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:
@@ -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'),
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user