From 9e627d88a6756ed3226303d977218d16335dd186 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Mon, 13 Apr 2026 15:49:33 +1000
Subject: [PATCH] Refine HomePage mobile spacing and typography scaling

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>
---
 src/components/pages/HomePage/HomePage.tsx | 32 ++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
index 8059692..c6b324b 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -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>