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

Move FuneralFinder inside hero section, overlapping into white below

Browse Source 
- 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>
This commit is contained in:
Richie
2026-03-31 20:31:53 +11:00
parent 73aaa71644
commit ecf7a13e1d
1 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)