HomePage V2: full-bleed hero, stats bar, discover section, editorial testimonials

New layout inspired by reference designs:
- Full-bleed hero with parsonshero.png + gradient overlay (heroImageUrl prop)
- Trust stats bar: 1,500+ families, 4.9 rating, 300+ directors
- "See what you'll discover" section: map placeholder + featured ProviderCards
- Editorial testimonials: alternating left/right with quote marks (no cards)
- Minimal FAQ: borderless accordion with divider lines
- V1 split hero preserved when heroImage prop used instead

New types: TrustStat, FeaturedProvider.
New props: heroImageUrl, stats, featuredProviders, discoverMapSlot,
  onSelectFeaturedProvider.
V1 stories unchanged, new V2 story added.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-31 20:08:53 +11:00
parent 51918ea503
commit 44f159a453
2 changed files with 416 additions and 160 deletions

View File

@@ -5,6 +5,7 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
import SearchIcon from '@mui/icons-material/Search';
import SupportAgentOutlinedIcon from '@mui/icons-material/SupportAgentOutlined';
import { HomePage } from './HomePage';
import type { FeaturedProvider, TrustStat } from './HomePage';
import { Navigation } from '../../organisms/Navigation';
import { Footer } from '../../organisms/Footer';
@@ -264,3 +265,68 @@ export const Mobile: Story = {
viewport: { defaultViewport: 'mobile1' },
},
};
// ─── V2 data ────────────────────────────────────────────────────────────────
const trustStats: TrustStat[] = [
{ value: '1,500+', label: 'Families helped' },
{ value: '4.9', label: 'Google Rating' },
{ value: '300+', label: 'Funeral directors' },
];
const featuredProviders: FeaturedProvider[] = [
{
id: 'parsons',
name: 'H.Parsons Funeral Directors',
location: 'Wentworth, NSW',
verified: true,
imageUrl: 'https://placehold.co/600x200/E8E0D6/8B6F47?text=H.Parsons',
logoUrl: 'https://placehold.co/64x64/FEF9F5/BA834E?text=HP',
rating: 4.6,
reviewCount: 7,
startingPrice: 900,
},
{
id: 'rankins',
name: 'Rankins Funeral Services',
location: 'Wollongong, NSW',
verified: true,
imageUrl: 'https://placehold.co/600x200/D7E1E2/4C5B6B?text=Rankins',
logoUrl: 'https://placehold.co/64x64/F2F5F6/4C5B6B?text=R',
rating: 4.8,
reviewCount: 23,
startingPrice: 1200,
},
{
id: 'easy-funerals',
name: 'Easy Funerals',
location: 'Sydney, NSW',
verified: true,
imageUrl: 'https://placehold.co/600x200/F0F7F0/3B7A3B?text=Easy+Funerals',
logoUrl: 'https://placehold.co/64x64/F0F7F0/3B7A3B?text=EF',
rating: 4.5,
reviewCount: 42,
startingPrice: 850,
},
];
// ─── V2 Story ───────────────────────────────────────────────────────────────
/** V2 layout — full-bleed hero, stats bar, map + provider cards, editorial testimonials */
export const V2: Story = {
args: {
navigation: nav,
footer,
heroImageUrl: '/brandassets/images/heroes/parsonshero.png',
stats: trustStats,
featuredProviders,
onSelectFeaturedProvider: (id) => console.log('Featured provider:', id),
features,
googleRating: 4.9,
googleReviewCount: 2340,
testimonials,
faqItems,
onSearch: (params) => console.log('Search:', params),
onCtaClick: () => console.log('CTA clicked'),
},
};