richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine HomePage mobile spacing and typography scaling

Browse Source 
Increase hero top padding, heading-to-subheading gap, and finder card
side padding on mobile. Scale body1 text to 14px on mobile under display3
headings for better hierarchy contrast. Centre-align "Why Use FA" section
on mobile. Remove arrow from "Start exploring" button.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-04-13 15:49:33 +10:00
parent ab25af2e67
commit 9e627d88a6
1 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/pages/HomePage/HomePage.tsx
View File

@@ -246,8 +246,8 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
position: 'relative',
zIndex: 1,
textAlign: 'center',
pt: { xs: 8, md: 11 },
pb: 4,
pt: { xs: 10, md: 14 },
pb: { xs: 3, md: 4 },
}}
>
<Typography
@@ -255,7 +255,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
component="h1"
id="hero-heading"
tabIndex={-1}
sx={{ mb: 3, color: 'var(--fa-color-white)' }}
sx={{ mb: 5, color: 'var(--fa-color-white)' }}
>
{heroHeading}
</Typography>
@@ -273,8 +273,8 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
position: 'relative',
zIndex: 2,
width: '100%',
px: 2,
pt: 2,
px: { xs: 3, md: 2 },
pt: 6,
pb: 0,
mb: { xs: -14, md: -18 },
}}
@@ -499,7 +499,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
<Typography
variant="body1"
color="text.secondary"
sx={{ maxWidth: 520, mx: 'auto' }}
sx={{ maxWidth: 520, mx: 'auto', fontSize: { xs: '0.875rem', md: '1rem' } }}
>
From trusted local providers to personalised options, find the right care near
you.
@@ -572,7 +572,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
{/* CTA */}
<Box sx={{ textAlign: 'center', mt: 4 }}>
<Button variant="text" size="medium" onClick={onCtaClick}>
Start exploring &rarr;
Start exploring
</Button>
</Box>
</Container>
@@ -602,7 +602,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
}}
>
{/* Text */}
<Box>
<Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
<Typography
variant="overline"
component="div"
@@ -618,7 +618,11 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
>
Making an impossible time a little easier
</Typography>
<Typography variant="body1" color="text.secondary">
<Typography
variant="body1"
color="text.secondary"
sx={{ fontSize: { xs: '0.875rem', md: '1rem' } }}
>
Funeral planning doesn&rsquo;t have to be overwhelming. Whether a loved one has
just passed, is imminent, or you&rsquo;re pre-planning the future for yourself.
Compare transparent pricing from local funeral directors. Explore the service
@@ -808,7 +812,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
<Typography
variant="body1"
color="text.secondary"
sx={{ maxWidth: 560, mx: 'auto' }}
sx={{ maxWidth: 560, mx: 'auto', fontSize: { xs: '0.875rem', md: '1rem' } }}
>
{featuresBody}
</Typography>
@@ -1020,7 +1024,13 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
}}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 0, py: 1.5 }}>
<Typography variant="body1" sx={{ fontWeight: 500 }}>
<Typography
variant="body1"
sx={{
fontWeight: 500,
fontSize: { xs: '0.875rem', md: '1rem' },
}}
>
{item.question}
</Typography>
</AccordionSummary>