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>
This commit is contained in:
@@ -255,6 +255,26 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
|||||||
{heroSubheading}
|
{heroSubheading}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Container>
|
</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>
|
</Box>
|
||||||
) : (
|
) : (
|
||||||
/* ── V1: Split hero ── */
|
/* ── V1: Split hero ── */
|
||||||
@@ -322,17 +342,19 @@ 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.
|
||||||
═══════════════════════════════════════════════════════════════════ */}
|
═══════════════════════════════════════════════════════════════════ */}
|
||||||
|
{!isFullBleedHero && (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
mt: { xs: -14, md: -22 },
|
mt: { xs: -4, md: -6 },
|
||||||
px: 2,
|
px: 2,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box sx={{ maxWidth: 520, mx: 'auto' }}>
|
<Box sx={{ maxWidth: 620, mx: 'auto' }}>
|
||||||
<FuneralFinderV3
|
<FuneralFinderV3
|
||||||
heading="Find funeral providers near you"
|
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."
|
subheading="Tell us a little about what you're looking for and we'll show you options in your area."
|
||||||
@@ -341,6 +363,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ═══════════════════════════════════════════════════════════════════
|
{/* ═══════════════════════════════════════════════════════════════════
|
||||||
Section 2c: Discover — Map + Featured Providers (V2)
|
Section 2c: Discover — Map + Featured Providers (V2)
|
||||||
|
|||||||
Reference in New Issue
Block a user