Strip template feel from features + simplify CTA section
Features: remove Card containers and circular icon backgrounds. Clean icon (brand colour) + heading + description in open grid. Feels authentic, not template-generated. CTA: remove warm bg, use default surface with subtle divider above. Heading in display3, understated placement between testimonials and FAQ. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -12,8 +12,8 @@ import StarBorderIcon from '@mui/icons-material/StarBorder';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
import { Button } from '../../atoms/Button';
|
||||
import { Card } from '../../atoms/Card';
|
||||
import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
|
||||
import { Divider } from '../../atoms/Divider';
|
||||
import { FuneralFinderV3, type FuneralFinderV3SearchParams } from '../../organisms/FuneralFinder';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
@@ -102,6 +102,10 @@ export interface HomePageProps {
|
||||
|
||||
/** Feature cards for "Why Use FA" */
|
||||
features?: FeatureCard[];
|
||||
/** Features section heading */
|
||||
featuresHeading?: string;
|
||||
/** Features section body text */
|
||||
featuresBody?: string;
|
||||
|
||||
/** Aggregate Google rating */
|
||||
googleRating?: number;
|
||||
@@ -178,6 +182,8 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
discoverMapSlot,
|
||||
onSelectFeaturedProvider,
|
||||
features = [],
|
||||
featuresHeading = 'How it works',
|
||||
featuresBody = 'Search local funeral directors, compare transparent pricing, and personalise a plan — all in your own time. No pressure, no hidden costs.',
|
||||
googleRating,
|
||||
googleReviewCount,
|
||||
testimonials = [],
|
||||
@@ -404,15 +410,15 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
display: 'grid',
|
||||
gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
|
||||
gap: 3,
|
||||
alignItems: 'start',
|
||||
alignItems: 'stretch',
|
||||
}}
|
||||
>
|
||||
{/* Map placeholder */}
|
||||
{/* Map placeholder — stretches to match card stack */}
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
minHeight: { xs: 240, md: 400 },
|
||||
minHeight: { xs: 240, md: 0 },
|
||||
bgcolor: 'var(--fa-color-surface-cool)',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider',
|
||||
@@ -447,6 +453,13 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* CTA */}
|
||||
<Box sx={{ textAlign: 'center', mt: 4 }}>
|
||||
<Button variant="text" size="medium" onClick={onCtaClick}>
|
||||
Start exploring →
|
||||
</Button>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
)}
|
||||
@@ -556,28 +569,19 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ textAlign: 'center', mb: { xs: 4, md: 6 } }}>
|
||||
<Typography
|
||||
variant="overline"
|
||||
sx={{ color: 'var(--fa-color-text-brand)', mb: 1.5, display: 'block' }}
|
||||
>
|
||||
Why use Funeral Arranger
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h2"
|
||||
variant="display3"
|
||||
component="h2"
|
||||
id="features-heading"
|
||||
sx={{ mb: 2, color: 'text.primary' }}
|
||||
>
|
||||
Making an impossible time a little easier
|
||||
{featuresHeading}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
variant="body1"
|
||||
color="text.secondary"
|
||||
sx={{ maxWidth: 560, mx: 'auto' }}
|
||||
>
|
||||
Funeral planning doesn't have to be overwhelming. Whether a loved one has
|
||||
just passed, is imminent, or you're pre-planning for the future. Compare
|
||||
transparent pricing from local funeral directors. Explore the service options,
|
||||
coffins and more to personalise a funeral plan in clear, easy steps.
|
||||
{featuresBody}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
@@ -589,41 +593,27 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
sm: 'repeat(2, 1fr)',
|
||||
md: 'repeat(4, 1fr)',
|
||||
},
|
||||
gap: { xs: 3, md: 3 },
|
||||
gap: { xs: 4, md: 5 },
|
||||
}}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<Card key={feature.heading} variant="outlined" padding="compact">
|
||||
<Box sx={{ textAlign: 'center' }}>
|
||||
<Box key={feature.heading} sx={{ textAlign: 'center' }}>
|
||||
<Box
|
||||
sx={{
|
||||
mb: 1.5,
|
||||
mx: 'auto',
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'var(--fa-color-brand-50)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
mb: 2,
|
||||
color: 'primary.main',
|
||||
'& svg': { fontSize: 28 },
|
||||
'& svg': { fontSize: 32 },
|
||||
}}
|
||||
>
|
||||
{feature.icon}
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h5"
|
||||
component="h3"
|
||||
sx={{ mb: 1, color: 'text.primary' }}
|
||||
>
|
||||
<Typography variant="h6" component="h3" sx={{ mb: 1, color: 'text.primary' }}>
|
||||
{feature.heading}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{feature.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
</Container>
|
||||
@@ -639,17 +629,17 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
aria-labelledby="reviews-heading"
|
||||
sx={{
|
||||
py: { xs: 6, md: 10 },
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
bgcolor: 'var(--fa-color-surface-subtle)',
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="md">
|
||||
<Typography
|
||||
variant="h2"
|
||||
variant="display3"
|
||||
component="h2"
|
||||
id="reviews-heading"
|
||||
sx={{ textAlign: 'center', mb: 1, color: 'text.primary' }}
|
||||
>
|
||||
Testimonials
|
||||
What families are saying
|
||||
</Typography>
|
||||
|
||||
{googleRating != null && (
|
||||
@@ -673,13 +663,14 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Editorial testimonials — alternating alignment */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{/* Editorial testimonials — alternating alignment with dividers */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
|
||||
{testimonials.map((t, i) => {
|
||||
const isRight = i % 2 === 1;
|
||||
return (
|
||||
<React.Fragment key={`${t.name}-${i}`}>
|
||||
{i > 0 && <Divider sx={{ my: 4 }} />}
|
||||
<Box
|
||||
key={`${t.name}-${i}`}
|
||||
sx={{
|
||||
textAlign: isRight ? 'right' : 'left',
|
||||
maxWidth: '85%',
|
||||
@@ -722,6 +713,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
@@ -736,16 +728,16 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
|
||||
component="section"
|
||||
aria-labelledby="cta-heading"
|
||||
sx={{
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
py: { xs: 6, md: 10 },
|
||||
py: { xs: 6, md: 8 },
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" sx={{ textAlign: 'center' }}>
|
||||
<Container maxWidth="sm" sx={{ textAlign: 'center' }}>
|
||||
<Divider sx={{ mb: { xs: 5, md: 6 } }} />
|
||||
<Typography
|
||||
variant="displaySm"
|
||||
variant="display3"
|
||||
component="h2"
|
||||
id="cta-heading"
|
||||
sx={{ mb: 3, color: 'text.primary', maxWidth: 500, mx: 'auto' }}
|
||||
sx={{ mb: 3, color: 'text.primary' }}
|
||||
>
|
||||
{ctaHeading}
|
||||
</Typography>
|
||||
|
||||
Reference in New Issue
Block a user