From ecf7a13e1d7abdab9060c669369020e11268a2eb Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Tue, 31 Mar 2026 20:31:53 +1100
Subject: [PATCH] Move FuneralFinder inside hero section, overlapping into
 white below

- FuneralFinder now renders inside the hero Box (V2 only)
- mb: -18 pulls the next section up so finder straddles hero/content
- No more white gap between hero image and finder
- V1 standalone finder preserved with conditional render

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

diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
index 77eb871..6fd47a9 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -255,6 +255,26 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                   {heroSubheading}
                 </Typography>
               </Container>
+
+              {/* FuneralFinder — inside the hero, bottom portion overlaps into white */}
+              <Box
+                sx={{
+                  position: 'relative',
+                  zIndex: 2,
+                  px: 2,
+                  pb: 0,
+                  mb: { xs: -14, md: -18 },
+                }}
+              >
+                <Box sx={{ maxWidth: 520, mx: 'auto' }}>
+                  <FuneralFinderV3
+                    heading="Find funeral providers near you"
+                    subheading="Tell us a little about what you're looking for and we'll show you options in your area."
+                    onSearch={onSearch}
+                    loading={searchLoading}
+                  />
+                </Box>
+              </Box>
             </Box>
           ) : (
             /* ── V1: Split hero ── */
@@ -322,25 +342,28 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
           )}
 
           {/* ═══════════════════════════════════════════════════════════════════
-              Section 2: FuneralFinder Widget (overlapping card)
+              Section 2: FuneralFinder Widget (V1 only — overlapping card)
+              V2 renders the finder inside the hero section above.
           ═══════════════════════════════════════════════════════════════════ */}
-          <Box
-            sx={{
-              position: 'relative',
-              zIndex: 1,
-              mt: { xs: -14, md: -22 },
-              px: 2,
-            }}
-          >
-            <Box sx={{ maxWidth: 520, mx: 'auto' }}>
-              <FuneralFinderV3
-                heading="Find funeral providers near you"
-                subheading="Tell us a little about what you're looking for and we'll show you options in your area."
-                onSearch={onSearch}
-                loading={searchLoading}
-              />
+          {!isFullBleedHero && (
+            <Box
+              sx={{
+                position: 'relative',
+                zIndex: 1,
+                mt: { xs: -4, md: -6 },
+                px: 2,
+              }}
+            >
+              <Box sx={{ maxWidth: 620, mx: 'auto' }}>
+                <FuneralFinderV3
+                  heading="Find funeral providers near you"
+                  subheading="Tell us a little about what you're looking for and we'll show you options in your area."
+                  onSearch={onSearch}
+                  loading={searchLoading}
+                />
+              </Box>
             </Box>
-          </Box>
+          )}
 
           {/* ═══════════════════════════════════════════════════════════════════
               Section 2c: Discover — Map + Featured Providers (V2)