From 73aaa716442c510d51979b92de5201bd03e0bc5f Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Tue, 31 Mar 2026 20:27:41 +1100
Subject: [PATCH] Hero layout: text top-aligned, FuneralFinder overlaps into
 hero image
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero text: alignItems center → flex-start, pt 8 (top of image)
- FuneralFinder: mt -10 → -22 (sits on the hero image, not white bg)
- Heading + subheading + finder all visible above the fold

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/pages/HomePage/HomePage.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
index 8c04bd2..77eb871 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -215,7 +215,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                 position: 'relative',
                 minHeight: { xs: 480, md: 640 },
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: 'flex-start',
                 justifyContent: 'center',
                 backgroundImage: `url(${heroImageUrl})`,
                 backgroundSize: 'cover',
@@ -231,7 +231,13 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
             >
               <Container
                 maxWidth="md"
-                sx={{ position: 'relative', zIndex: 1, textAlign: 'center', py: 6 }}
+                sx={{
+                  position: 'relative',
+                  zIndex: 1,
+                  textAlign: 'center',
+                  pt: { xs: 6, md: 8 },
+                  pb: 4,
+                }}
               >
                 <Typography
                   variant="display3"
@@ -322,7 +328,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
             sx={{
               position: 'relative',
               zIndex: 1,
-              mt: { xs: -6, md: -10 },
+              mt: { xs: -14, md: -22 },
               px: 2,
             }}
           >