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