Files
Parsons/src/components/pages/HomePage/HomePageV2.stories.tsx
Richie eb6cf6a185 Add FuneralFinder V4, HomePage V3/V4, restyle Footer to light grey
- FuneralFinder V4: 3 numbered steps (48px circles), ungated location,
  no heading, inline copper errors, "Search" CTA. Archived.
- FuneralFinderV3: heading weight 600, "Find your local providers",
  "Search Local Providers" CTA, optional subheading
- HomePage V1/V2: split into separate archived stories
- HomePage V3: hero-3.png, updated copy, venue photos, map placeholder,
  scrolling partner logo bar, warm gradient CTA, increased spacing
- HomePage V4: same as V3 with FuneralFinderV4 via new finderSlot prop
- Footer: surface.subtle bg (matches header), dark-on-light text
- All versions archived in Storybook

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-01 14:02:52 +11:00

247 lines
8.3 KiB
TypeScript

import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
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';
// ─── Shared helpers ──────────────────────────────────────────────────────────
const FALogo = () => (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box
component="img"
src="/brandlogo/logo-full.svg"
alt="Funeral Arranger"
sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
/>
<Box
component="img"
src="/brandlogo/logo-short.svg"
alt="Funeral Arranger"
sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
/>
</Box>
);
const FALogoInverse = () => (
<Box
component="img"
src="/brandlogo/logo-full.svg"
alt="Funeral Arranger"
sx={{ height: 24, filter: 'brightness(0) invert(1)', opacity: 0.9 }}
/>
);
const nav = (
<Navigation
logo={<FALogo />}
items={[
{ label: 'FAQ', href: '/faq' },
{ label: 'Contact Us', href: '/contact' },
{ label: 'Log in', href: '/login' },
]}
/>
);
const footer = (
<Footer
logo={<FALogoInverse />}
tagline="Helping Australian families plan with confidence"
linkGroups={[
{
heading: 'Services',
links: [
{ label: 'Find a Director', href: '/directors' },
{ label: 'Compare Venues', href: '/venues' },
{ label: 'Pricing Guide', href: '/pricing' },
{ label: 'Start Planning', href: '/arrange' },
],
},
{
heading: 'Support',
links: [
{ label: 'FAQ', href: '/faq' },
{ label: 'Contact Us', href: '/contact' },
{ label: 'Grief Resources', href: '/resources' },
],
},
{
heading: 'Company',
links: [
{ label: 'About Us', href: '/about' },
{ label: 'Provider Portal', href: '/provider-portal' },
{ label: 'Partner With Us', href: '/partners' },
],
},
]}
phone="1800 987 888"
email="support@funeralarranger.com.au"
legalLinks={[
{ label: 'Privacy Policy', href: '/privacy' },
{ label: 'Terms of Service', href: '/terms' },
{ label: 'Accessibility', href: '/accessibility' },
]}
/>
);
// ─── Data ───────────────────────────────────────────────────────────────────
const features = [
{
icon: <VerifiedOutlinedIcon />,
heading: 'Transparent, verified pricing',
description:
'All costs are itemised for verified partners. No surprise fees. See pricing and options before you commit.',
},
{
icon: <AccessTimeIcon />,
heading: 'Available 24 hours a day',
description:
'Compare, plan and arrange at your own pace, day or night. No pressure to commit online.',
},
{
icon: <SearchIcon />,
heading: 'Find local & compare',
description: 'Search and compare local funeral directors to find the right choice for you.',
},
{
icon: <SupportAgentOutlinedIcon />,
heading: 'Support when you need it',
description:
'Arrange everything online or be guided through the steps by your preferred funeral director.',
},
];
const testimonials = [
{
name: 'Sarah H.',
rating: 5,
quote:
'At the most difficult time in our lives, this site made comparing costs so straightforward. We saved over $800.',
timeAgo: '3 weeks ago',
},
{
name: 'James M.',
rating: 5,
quote:
'The itemised quote builder meant we could personalise the service within our budget. Highly recommended.',
timeAgo: '1 month ago',
},
{
name: 'Tracy W.',
rating: 5,
quote:
'I had no idea there was such a price difference between local directors. This saved us from overpaying.',
timeAgo: '2 months ago',
},
];
const faqItems = [
{
question: 'What is Funeral Arranger?',
answer:
'Funeral Arranger is an online platform that helps Australian families find, compare and arrange funeral services. We connect you with trusted local funeral directors and provide transparent pricing so you can make informed decisions during a difficult time.',
},
{
question: 'What makes Funeral Arranger different from other funeral service providers?',
answer:
'Unlike traditional funeral homes, we are an independent comparison platform. We show you transparent, itemised pricing from multiple verified providers in your area so you can compare options and choose what is right for your family and budget.',
},
{
question: 'Do I need to complete all steps at once?',
answer:
'No. You can save your progress at any time and return when you are ready. Whether you are pre-planning or arranging at short notice, the process works at your pace with no time pressure.',
},
{
question: 'How much does a funeral cost in Australia?',
answer:
'Funeral costs in Australia typically range from $4,000 for a simple cremation to $15,000 or more for a full traditional service. Costs vary by location, provider, and the options you choose. Our platform helps you compare real prices from local providers.',
},
{
question: 'What is the cheapest funeral option?',
answer:
'A direct cremation (no service) is generally the most affordable option, starting from around $2,000\u2013$4,000 depending on your location. Our platform shows you all available options so you can find the right balance of service and cost.',
},
];
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,
},
];
// ─── Meta ────────────────────────────────────────────────────────────────────
const meta: Meta<typeof HomePage> = {
title: 'Archive/HomePage V2',
component: HomePage,
parameters: {
layout: 'fullscreen',
},
};
export default meta;
type Story = StoryObj<typeof HomePage>;
// ─── Stories ────────────────────────────────────────────────────────────────
/** V2 layout — full-bleed hero, stats bar, map + provider cards, editorial testimonials */
export const Default: 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'),
},
};