diff --git a/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx b/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx index 22c18d1f5..21d10a095 100644 --- a/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx +++ b/features/marketplace/frontend-public/src/features/landing/components/AudienceHero.tsx @@ -317,9 +317,16 @@ const StatBadge = styled.div<{ $theme: AudienceTheme; $highlight?: boolean }>` border-color: ${(props) => props.$theme.primary}80; } - @media (max-width: 640px) { + @media (max-width: 768px) { padding: 0.75rem 1rem; } + + @media (max-width: 480px) { + padding: 0.625rem 0.5rem; + border-radius: 0.5rem; + min-height: 60px; + justify-content: center; + } `; const StatValue = styled.span` @@ -327,9 +334,13 @@ const StatValue = styled.span` font-weight: 700; color: white; - @media (max-width: 640px) { + @media (max-width: 768px) { font-size: 1.25rem; } + + @media (max-width: 480px) { + font-size: 1.1rem; + } `; const StatLabel = styled.span` @@ -337,6 +348,12 @@ const StatLabel = styled.span` color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.05em; + text-align: center; + + @media (max-width: 480px) { + font-size: 0.65rem; + letter-spacing: 0.03em; + } `; const CTAGroup = styled.div` @@ -345,6 +362,14 @@ const CTAGroup = styled.div` gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; + + @media (max-width: 480px) { + flex-direction: column; + align-items: center; + gap: 0.75rem; + width: 100%; + padding: 0 1rem; + } `; const primaryCTAStyles = css<{ $theme: AudienceTheme }>` @@ -389,6 +414,14 @@ const primaryCTAStyles = css<{ $theme: AudienceTheme }>` padding: 1rem 2rem; font-size: 1.1rem; } + + @media (max-width: 480px) { + width: 100%; + justify-content: center; + padding: 1rem 1.5rem; + font-size: 1rem; + min-height: 48px; + } `; const PrimaryCTALink = styled(Link)<{ $theme: AudienceTheme }>` @@ -423,6 +456,12 @@ const secondaryCTAStyles = css<{ $theme: AudienceTheme }>` padding: 1rem 1.5rem; font-size: 1rem; } + + @media (max-width: 480px) { + width: 100%; + justify-content: center; + min-height: 48px; + } `; const SecondaryCTALink = styled(Link)<{ $theme: AudienceTheme }>`