diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx index 2052bb8..bff9b80 100644 --- a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx +++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx @@ -561,7 +561,7 @@ export const FuneralFinderV3 = React.forwardRef + : undefined} onClick={handleSubmit} - sx={{ minHeight: 52 }} + sx={{ minHeight: { xs: 40, sm: 52 }, fontSize: { xs: '0.875rem', sm: undefined } }} > - Search Local Providers + Search diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx index 79876e7..954ff11 100644 --- a/src/components/pages/HomePage/HomePage.tsx +++ b/src/components/pages/HomePage/HomePage.tsx @@ -380,16 +380,109 @@ export const HomePage = React.forwardRef( )} {/* ═══════════════════════════════════════════════════════════════════ - Section 2c: Discover — Map + Featured Providers (V2) + Section 2b: Partner Logos Carousel + ═══════════════════════════════════════════════════════════════════ */} + {partnerLogos.length > 0 && ( + + + + {partnerTrustLine} + + + + {/* Carousel track */} + + + {[...partnerLogos, ...partnerLogos].map((logo, i) => ( + = partnerLogos.length ? true : undefined} + sx={{ + height: { xs: 46, md: 55 }, + maxWidth: { xs: 140, md: 184 }, + width: 'auto', + objectFit: 'contain', + filter: 'grayscale(100%) brightness(1.2)', + opacity: 0.4, + flexShrink: 0, + }} + /> + ))} + + + + )} + + {/* ═══════════════════════════════════════════════════════════════════ + Section 2c: Discover — Map + Featured Providers ═══════════════════════════════════════════════════════════════════ */} {featuredProviders.length > 0 && ( @@ -486,93 +579,208 @@ export const HomePage = React.forwardRef( )} {/* ═══════════════════════════════════════════════════════════════════ - Section 3: Partner Logos Carousel + Section 3b: Why Use FA — Text + Image ═══════════════════════════════════════════════════════════════════ */} - {partnerLogos.length > 0 && ( - - - - {partnerTrustLine} - - - - {/* Carousel track */} + + + {/* Text */} + + + Why Use Funeral Arranger + + + Making an impossible time a little easier + + + Funeral planning doesn’t have to be overwhelming. Whether a loved one has + just passed, is imminent, or you’re pre-planning the future for yourself. + Compare transparent pricing from local funeral directors. Explore the service + options, coffins and more to personalise a funeral plan in clear, easy steps. + + + + {/* Image */} - {[...partnerLogos, ...partnerLogos].map((logo, i) => ( - = partnerLogos.length ? true : undefined} - sx={{ - height: { xs: 46, md: 55 }, - maxWidth: { xs: 140, md: 184 }, - width: 'auto', - objectFit: 'contain', - filter: 'grayscale(100%) brightness(1.2)', - opacity: 0.4, - flexShrink: 0, - }} - /> - ))} + Family planning together with care and confidence - - )} + + + + {/* ═══════════════════════════════════════════════════════════════════ + Section 3c: What You Can Do Here — Three Feature Cards + ═══════════════════════════════════════════════════════════════════ */} + + + + + What You Can Do Here + + + Three ways we can help you today + + + + + {/* Card 1: Compare pricing */} + + + + + Compare pricing + + + See verified, itemised prices from multiple funeral directors in your area + side by side. + + + + + + {/* Card 2: Find a funeral director */} + + + + + Find a funeral director + + + Browse rated, reviewed directors near you with profiles, photos, and contact + details. + + + + + + {/* Card 3: Arrange a funeral */} + + + + + Arrange a funeral + + + Build a fully customised quote — choose coffin, flowers, transport, + venue, and more. + + + + + + + {/* ═══════════════════════════════════════════════════════════════════ Section 4: Why Use Funeral Arranger (Features) @@ -583,7 +791,7 @@ export const HomePage = React.forwardRef( aria-labelledby="features-heading" sx={{ bgcolor: 'var(--fa-color-surface-default)', - py: { xs: 8, md: 12 }, + py: { xs: 10, md: 14 }, }} > @@ -648,8 +856,8 @@ export const HomePage = React.forwardRef( component="section" aria-labelledby="reviews-heading" sx={{ - py: { xs: 8, md: 12 }, - bgcolor: 'var(--fa-color-surface-subtle)', + py: { xs: 10, md: 14 }, + bgcolor: '#f8f5f1', }} > @@ -683,26 +891,29 @@ export const HomePage = React.forwardRef( )} - {/* Editorial testimonials — alternating alignment with dividers */} - + {/* Editorial testimonials — left-aligned with dividers */} + {testimonials.map((t, i) => { - const isRight = i % 2 === 1; return ( {i > 0 && } @@ -750,7 +961,7 @@ export const HomePage = React.forwardRef( sx={{ background: 'linear-gradient(180deg, var(--fa-color-brand-100, #F5EDE4) 0%, var(--fa-color-surface-warm, #FEF9F5) 100%)', - py: { xs: 8, md: 10 }, + py: { xs: 10, md: 14 }, }} > @@ -777,17 +988,17 @@ export const HomePage = React.forwardRef( aria-labelledby="faq-heading" sx={{ bgcolor: 'var(--fa-color-surface-default)', - py: { xs: 8, md: 12 }, + py: { xs: 10, md: 14 }, }} > - FAQ + Frequently Asked Questions @@ -823,6 +1034,11 @@ export const HomePage = React.forwardRef( ))} + + + diff --git a/src/components/pages/HomePage/HomePageV3.stories.tsx b/src/components/pages/HomePage/HomePageV3.stories.tsx index 0f46bf9..a570b0b 100644 --- a/src/components/pages/HomePage/HomePageV3.stories.tsx +++ b/src/components/pages/HomePage/HomePageV3.stories.tsx @@ -240,7 +240,7 @@ const partnerLogos: PartnerLogo[] = [ // ─── Meta ──────────────────────────────────────────────────────────────────── const meta: Meta = { - title: 'Archive/HomePage V3', + title: 'Pages/HomePage', component: HomePage, parameters: { layout: 'fullscreen', @@ -258,7 +258,7 @@ export const Default: Story = { navigation: nav, footer, heroImageUrl: '/brandassets/images/heroes/hero-3.png', - heroHeading: 'Compare funeral directors pricing near you and arrange with confidence', + heroHeading: 'Compare funeral director pricing near you and arrange with confidence', heroSubheading: 'Transparent pricing \u00B7 No hidden fees \u00B7 Arrange 24/7', stats: trustStats, featuredProviders, @@ -269,7 +269,7 @@ export const Default: Story = { }), onSelectFeaturedProvider: (id) => console.log('Featured provider:', id), partnerLogos, - partnerTrustLine: 'Trusted by hundreds of verified funeral directors across Australia', + partnerTrustLine: 'Verified funeral directors on Funeral Arranger', features, googleRating: 4.9, googleReviewCount: 2340,