richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HomePage V2 refinements: taller hero, compact cards, warm testimonials

Browse Source 
- Hero: minHeight 520→640px, extends further below FuneralFinder
- FuneralFinder: mt -6→-10 (closer to hero text), maxWidth 620→520px
- Stats bar: removed entirely
- Typo: fixed "See what you'll discover"
- Discover cards: ProviderCard → ProviderCardCompact (horizontal, teaser)
- Testimonials: warm surface background for section contrast

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-31 20:23:09 +11:00
parent 44f159a453
commit b9e0d9ad13
1 changed files with 8 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/pages/HomePage/HomePage.tsx
View File

@@ -13,7 +13,7 @@ import type { SxProps, Theme } from '@mui/material/styles';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { Card } from '../../atoms/Card';
import { ProviderCard } from '../../molecules/ProviderCard';
import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
import { FuneralFinderV3, type FuneralFinderV3SearchParams } from '../../organisms/FuneralFinder';
// ─── Types ───────────────────────────────────────────────────────────────────
@@ -172,7 +172,6 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
heroImageUrl,
onSearch,
searchLoading,
stats = [],
partnerLogos = [],
partnerTrustLine = 'Providing services from hundreds of trusted funeral homes across Australia',
featuredProviders = [],
@@ -214,7 +213,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
aria-labelledby="hero-heading"
sx={{
position: 'relative',
minHeight: { xs: 420, md: 520 },
minHeight: { xs: 480, md: 640 },
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -323,11 +322,11 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
sx={{
position: 'relative',
zIndex: 1,
mt: { xs: -4, md: -6 },
mt: { xs: -6, md: -10 },
px: 2,
}}
>
<Box sx={{ maxWidth: 620, mx: 'auto' }}>
<Box sx={{ maxWidth: 520, mx: 'auto' }}>
<FuneralFinderV3
heading="Find funeral providers near you"
subheading="Tell us a little about what you're looking for and we'll show you options in your area."
@@ -337,44 +336,6 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
</Box>
</Box>
{/* ═══════════════════════════════════════════════════════════════════
Section 2b: Stats Bar (V2 only)
═══════════════════════════════════════════════════════════════════ */}
{stats.length > 0 && (
<Box
component="section"
aria-label="Trust statistics"
sx={{ py: { xs: 4, md: 5 }, mt: { xs: 4, md: 5 } }}
>
<Container maxWidth="md">
<Box
sx={{
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
gap: { xs: 3, md: 6 },
textAlign: 'center',
}}
>
{stats.map((stat) => (
<Box key={stat.label}>
<Typography
variant="h3"
component="p"
sx={{ color: 'primary.main', mb: 0.5 }}
>
{stat.value}
</Typography>
<Typography variant="body2" color="text.secondary">
{stat.label}
</Typography>
</Box>
))}
</Box>
</Container>
</Box>
)}
{/* ═══════════════════════════════════════════════════════════════════
Section 2c: Discover — Map + Featured Providers (V2)
═══════════════════════════════════════════════════════════════════ */}
@@ -395,7 +356,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
id="discover-heading"
sx={{ mb: 1.5, color: 'text.primary' }}
>
See what you&rsquo;ll discover
See what you'll discover
</Typography>
<Typography
variant="body1"
@@ -436,19 +397,16 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
)}
</Box>
{/* Featured provider cards */}
{/* Featured provider cards — compact for discover teaser */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
{featuredProviders.map((provider) => (
<ProviderCard
<ProviderCardCompact
key={provider.id}
name={provider.name}
location={provider.location}
verified={provider.verified}
imageUrl={provider.imageUrl}
logoUrl={provider.logoUrl}
rating={provider.rating}
reviewCount={provider.reviewCount}
startingPrice={provider.startingPrice}
onClick={
onSelectFeaturedProvider
? () => onSelectFeaturedProvider(provider.id)
@@ -650,7 +608,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
aria-labelledby="reviews-heading"
sx={{
py: { xs: 6, md: 10 },
bgcolor: 'var(--fa-color-surface-default)',
bgcolor: 'var(--fa-color-surface-warm)',
}}
>
<Container maxWidth="md">