From b9e0d9ad1375bc6851a100725043daa66527fc48 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Tue, 31 Mar 2026 20:23:09 +1100
Subject: [PATCH] HomePage V2 refinements: taller hero, compact cards, warm
 testimonials
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/components/pages/HomePage/HomePage.tsx | 58 +++-------------------
 1 file changed, 8 insertions(+), 50 deletions(-)

diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
index c122956..8c04bd2 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -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">