From 9ac8e31516472310cf07a5d3cbcd4f978d84efdc Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 16 Apr 2026 16:00:28 +1000
Subject: [PATCH] Refine HomePage layout and add Locations dropdown to
 Navigation

- Navigation: add NavItem.children support for desktop dropdown + mobile collapsible sections. Wire Locations (Melbourne, Brisbane, Sydney, South Coast NSW, Central Coast NSW) before FAQ in all HomePage stories.
- HomePage hero: add italic "Trusted by thousands of families across Australia" tagline above h1, widen text container to 990px, use hero-couple.jpg background.
- HomePage features: rename "How it works" to "4 Reasons to use Funeral Arranger", add "Why Use Funeral Arranger" overline, remove placeholder body copy.
- HomePage testimonials: add "Funeral Arranger Reviews" overline above "What families are saying".
- HomePage CTA: promote "Start planning" to primary contained button (medium).
- FuneralFinderV3: remove header + divider so the form starts directly at "How can we help".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../FuneralFinder/FuneralFinderV3.tsx         |  35 +--
 .../Navigation/Navigation.stories.tsx         |  25 ++
 .../organisms/Navigation/Navigation.tsx       | 294 ++++++++++++++----
 .../pages/HomePage/HomePage.stories.tsx       |  10 +
 src/components/pages/HomePage/HomePage.tsx    |  71 +++--
 .../pages/HomePage/HomePageV2.stories.tsx     |  10 +
 .../pages/HomePage/HomePageV3.stories.tsx     |  12 +-
 .../pages/HomePage/HomePageV4.stories.tsx     |  10 +
 8 files changed, 339 insertions(+), 128 deletions(-)

diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
index bff9b80..d6ba374 100644
--- a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
+++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
@@ -41,10 +41,6 @@ export interface FuneralFinderV3Props {
   onSearch?: (params: FuneralFinderV3SearchParams) => void;
   /** Shows loading state on the CTA */
   loading?: boolean;
-  /** Optional heading override */
-  heading?: string;
-  /** Optional subheading override */
-  subheading?: string;
   /** MUI sx override for the root container */
   sx?: SxProps<Theme>;
 }
@@ -251,13 +247,7 @@ const selectMenuProps = {
  */
 export const FuneralFinderV3 = React.forwardRef<HTMLDivElement, FuneralFinderV3Props>(
   (props, ref) => {
-    const {
-      onSearch,
-      loading = false,
-      heading = 'Find funeral directors near you',
-      subheading,
-      sx,
-    } = props;
+    const { onSearch, loading = false, sx } = props;
 
     // ─── IDs for aria-labelledby ──────────────────────────────
     const id = React.useId();
@@ -392,29 +382,6 @@ export const FuneralFinderV3 = React.forwardRef<HTMLDivElement, FuneralFinderV3P
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >
-        {/* ── Header ──────────────────────────────────────────── */}
-        <Box sx={{ textAlign: 'center' }}>
-          <Typography
-            variant="h3"
-            component="h2"
-            sx={{
-              fontFamily: 'var(--fa-font-family-display)',
-              fontWeight: 600,
-              fontSize: { xs: '1.25rem', sm: '1.5rem' },
-              mb: subheading ? 1 : 0,
-            }}
-          >
-            {heading}
-          </Typography>
-          {subheading && (
-            <Typography variant="body2" color="text.secondary">
-              {subheading}
-            </Typography>
-          )}
-        </Box>
-
-        <Divider />
-
         {/* ── How can we help ─────────────────────────────────── */}
         <Box ref={statusSectionRef}>
           <SectionLabel id={statusLabelId}>How Can We Help</SectionLabel>
diff --git a/src/components/organisms/Navigation/Navigation.stories.tsx b/src/components/organisms/Navigation/Navigation.stories.tsx
index 759cc04..8a7f2c1 100644
--- a/src/components/organisms/Navigation/Navigation.stories.tsx
+++ b/src/components/organisms/Navigation/Navigation.stories.tsx
@@ -143,3 +143,28 @@ export const ExtendedNavigation: Story = {
     ctaLabel: 'Start planning',
   },
 };
+
+// --- With Dropdown -----------------------------------------------------------
+
+/** Items with `children` render as a dropdown on desktop and a collapsible
+ *  section in the mobile drawer */
+export const WithDropdown: Story = {
+  args: {
+    logo: <FALogo />,
+    items: [
+      {
+        label: 'Locations',
+        children: [
+          { label: 'Melbourne', href: '/locations/melbourne' },
+          { label: 'Brisbane', href: '/locations/brisbane' },
+          { label: 'Sydney', href: '/locations/sydney' },
+          { label: 'South Coast NSW', href: '/locations/south-coast-nsw' },
+          { label: 'Central Coast NSW', href: '/locations/central-coast-nsw' },
+        ],
+      },
+      { label: 'FAQ', href: '/faq' },
+      { label: 'Contact Us', href: '/contact' },
+      { label: 'Log in', href: '/login' },
+    ],
+  },
+};
diff --git a/src/components/organisms/Navigation/Navigation.tsx b/src/components/organisms/Navigation/Navigation.tsx
index ab4aa95..42c57f2 100644
--- a/src/components/organisms/Navigation/Navigation.tsx
+++ b/src/components/organisms/Navigation/Navigation.tsx
@@ -6,9 +6,14 @@ import Drawer from '@mui/material/Drawer';
 import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Collapse from '@mui/material/Collapse';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { IconButton } from '../../atoms/IconButton';
 import { Link } from '../../atoms/Link';
@@ -18,14 +23,16 @@ import { Divider } from '../../atoms/Divider';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-/** A navigation link item */
+/** A navigation link item. May have children to render as a dropdown. */
 export interface NavItem {
   /** Display label */
   label: string;
-  /** URL to navigate to */
-  href: string;
+  /** URL to navigate to (ignored when `children` is provided) */
+  href?: string;
   /** Click handler (alternative to href for SPA navigation) */
   onClick?: () => void;
+  /** Sub-items rendered as a dropdown (desktop) or collapsible (mobile) */
+  children?: NavItem[];
 }
 
 /** Props for the FA Navigation organism */
@@ -44,6 +51,163 @@ export interface NavigationProps {
   sx?: SxProps<Theme>;
 }
 
+// ─── Desktop dropdown link ───────────────────────────────────────────────────
+
+interface DesktopDropdownProps {
+  item: NavItem;
+}
+
+const DesktopDropdown: React.FC<DesktopDropdownProps> = ({ item }) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  return (
+    <>
+      <Box
+        component="button"
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={handleOpen}
+        sx={{
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          cursor: 'pointer',
+          color: 'var(--fa-color-brand-900)',
+          fontFamily: 'inherit',
+          fontWeight: 600,
+          fontSize: '1rem',
+          '&:hover': {
+            color: 'primary.main',
+          },
+        }}
+      >
+        {item.label}
+      </Box>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        slotProps={{
+          paper: {
+            sx: {
+              mt: 1,
+              minWidth: 200,
+              borderRadius: 'var(--fa-border-radius-md, 8px)',
+              boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
+            },
+          },
+        }}
+      >
+        {item.children?.map((child) => (
+          <MenuItem
+            key={child.label}
+            component="a"
+            href={child.href}
+            onClick={(e: React.MouseEvent) => {
+              if (child.onClick) {
+                e.preventDefault();
+                child.onClick();
+              }
+              handleClose();
+            }}
+            sx={{
+              color: 'var(--fa-color-brand-900)',
+              fontWeight: 500,
+              py: 1.25,
+              '&:hover': {
+                bgcolor: 'var(--fa-color-brand-100)',
+                color: 'primary.main',
+              },
+            }}
+          >
+            {child.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+// ─── Mobile collapsible item ─────────────────────────────────────────────────
+
+interface MobileCollapsibleProps {
+  item: NavItem;
+  onItemClick: () => void;
+}
+
+const MobileCollapsible: React.FC<MobileCollapsibleProps> = ({ item, onItemClick }) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <ListItemButton
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        sx={{
+          py: 1.5,
+          px: 3,
+          minHeight: 44,
+          '&:hover': {
+            bgcolor: 'var(--fa-color-brand-100)',
+          },
+        }}
+      >
+        <ListItemText
+          primary={item.label}
+          primaryTypographyProps={{
+            fontWeight: 500,
+            fontSize: '1rem',
+          }}
+        />
+        {open ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {item.children?.map((child) => (
+            <ListItemButton
+              key={child.label}
+              component="a"
+              href={child.href}
+              onClick={(e: React.MouseEvent) => {
+                if (child.onClick) {
+                  e.preventDefault();
+                  child.onClick();
+                }
+                onItemClick();
+              }}
+              sx={{
+                py: 1.25,
+                pl: 5,
+                pr: 3,
+                minHeight: 44,
+                '&:hover': {
+                  bgcolor: 'var(--fa-color-brand-100)',
+                },
+              }}
+            >
+              <ListItemText
+                primary={child.label}
+                primaryTypographyProps={{
+                  fontWeight: 400,
+                  fontSize: '0.9375rem',
+                  color: 'text.secondary',
+                }}
+              />
+            </ListItemButton>
+          ))}
+        </List>
+      </Collapse>
+    </>
+  );
+};
+
 // ─── Component ───────────────────────────────────────────────────────────────
 
 /**
@@ -51,26 +215,13 @@ export interface NavigationProps {
  *
  * Responsive header with logo, navigation links, and optional CTA.
  * Desktop shows links inline; mobile collapses to hamburger + drawer.
+ * Items with `children` render as a dropdown (desktop) or collapsible
+ * section (mobile).
  *
  * Maps to Figma "Main Nav" (14:108) desktop and "Mobile Header"
  * (2391:41508) mobile patterns.
  *
- * Composes AppBar + Link + IconButton + Button + Divider + Drawer.
- *
- * Usage:
- * ```tsx
- * <Navigation
- *   logo={<img src="/logo.svg" alt="Funeral Arranger" height={40} />}
- *   onLogoClick={() => navigate('/')}
- *   items={[
- *     { label: 'FAQ', href: '/faq' },
- *     { label: 'Contact Us', href: '/contact' },
- *     { label: 'Log in', href: '/login' },
- *   ]}
- *   ctaLabel="Start planning"
- *   onCtaClick={() => navigate('/arrange')}
- * />
- * ```
+ * Composes AppBar + Link + IconButton + Button + Divider + Drawer + Menu.
  */
 export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
   ({ logo, onLogoClick, items = [], ctaLabel, onCtaClick, sx }, ref) => {
@@ -78,6 +229,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
     const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
 
     const handleDrawerToggle = () => setDrawerOpen((prev) => !prev);
+    const closeDrawer = () => setDrawerOpen(false);
 
     return (
       <>
@@ -147,24 +299,28 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
                 aria-label="Main navigation"
                 sx={{ display: 'flex', alignItems: 'center', gap: 3.5 }}
               >
-                {items.map((item) => (
-                  <Link
-                    key={item.label}
-                    href={item.href}
-                    onClick={item.onClick}
-                    underline="hover"
-                    sx={{
-                      color: 'var(--fa-color-brand-900)',
-                      fontWeight: 600,
-                      fontSize: '1rem',
-                      '&:hover': {
-                        color: 'primary.main',
-                      },
-                    }}
-                  >
-                    {item.label}
-                  </Link>
-                ))}
+                {items.map((item) =>
+                  item.children && item.children.length > 0 ? (
+                    <DesktopDropdown key={item.label} item={item} />
+                  ) : (
+                    <Link
+                      key={item.label}
+                      href={item.href}
+                      onClick={item.onClick}
+                      underline="hover"
+                      sx={{
+                        color: 'var(--fa-color-brand-900)',
+                        fontWeight: 600,
+                        fontSize: '1rem',
+                        '&:hover': {
+                          color: 'primary.main',
+                        },
+                      }}
+                    >
+                      {item.label}
+                    </Link>
+                  ),
+                )}
 
                 {ctaLabel && (
                   <Button variant="contained" size="medium" onClick={onCtaClick}>
@@ -210,36 +366,40 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
 
             {/* Nav items */}
             <List component="nav" aria-label="Main navigation">
-              {items.map((item) => (
-                <ListItemButton
-                  key={item.label}
-                  component="a"
-                  href={item.href}
-                  onClick={(e: React.MouseEvent) => {
-                    if (item.onClick) {
-                      e.preventDefault();
-                      item.onClick();
-                    }
-                    setDrawerOpen(false);
-                  }}
-                  sx={{
-                    py: 1.5,
-                    px: 3,
-                    minHeight: 44,
-                    '&:hover': {
-                      bgcolor: 'var(--fa-color-brand-100)',
-                    },
-                  }}
-                >
-                  <ListItemText
-                    primary={item.label}
-                    primaryTypographyProps={{
-                      fontWeight: 500,
-                      fontSize: '1rem',
+              {items.map((item) =>
+                item.children && item.children.length > 0 ? (
+                  <MobileCollapsible key={item.label} item={item} onItemClick={closeDrawer} />
+                ) : (
+                  <ListItemButton
+                    key={item.label}
+                    component="a"
+                    href={item.href}
+                    onClick={(e: React.MouseEvent) => {
+                      if (item.onClick) {
+                        e.preventDefault();
+                        item.onClick();
+                      }
+                      closeDrawer();
                     }}
-                  />
-                </ListItemButton>
-              ))}
+                    sx={{
+                      py: 1.5,
+                      px: 3,
+                      minHeight: 44,
+                      '&:hover': {
+                        bgcolor: 'var(--fa-color-brand-100)',
+                      },
+                    }}
+                  >
+                    <ListItemText
+                      primary={item.label}
+                      primaryTypographyProps={{
+                        fontWeight: 500,
+                        fontSize: '1rem',
+                      }}
+                    />
+                  </ListItemButton>
+                ),
+              )}
             </List>
 
             {ctaLabel && (
@@ -250,7 +410,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
                   fullWidth
                   onClick={() => {
                     if (onCtaClick) onCtaClick();
-                    setDrawerOpen(false);
+                    closeDrawer();
                   }}
                 >
                   {ctaLabel}
diff --git a/src/components/pages/HomePage/HomePage.stories.tsx b/src/components/pages/HomePage/HomePage.stories.tsx
index 53a1d2a..8f1bd6d 100644
--- a/src/components/pages/HomePage/HomePage.stories.tsx
+++ b/src/components/pages/HomePage/HomePage.stories.tsx
@@ -40,6 +40,16 @@ const nav = (
   <Navigation
     logo={<FALogo />}
     items={[
+      {
+        label: 'Locations',
+        children: [
+          { label: 'Melbourne', href: '/locations/melbourne' },
+          { label: 'Brisbane', href: '/locations/brisbane' },
+          { label: 'Sydney', href: '/locations/sydney' },
+          { label: 'South Coast NSW', href: '/locations/south-coast-nsw' },
+          { label: 'Central Coast NSW', href: '/locations/central-coast-nsw' },
+        ],
+      },
       { label: 'FAQ', href: '/faq' },
       { label: 'Contact Us', href: '/contact' },
       { label: 'Log in', href: '/login' },
diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
index 30fc2f3..d5063cb 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -186,8 +186,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.',
+      featuresHeading = '4 Reasons to use Funeral Arranger',
+      featuresBody,
       googleRating,
       googleReviewCount,
       testimonials = [],
@@ -241,15 +241,26 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
               }}
             >
               <Container
-                maxWidth="md"
+                maxWidth={false}
                 sx={{
                   position: 'relative',
                   zIndex: 1,
                   textAlign: 'center',
+                  maxWidth: 990,
                   pt: { xs: 10, md: 14 },
                   pb: { xs: 3, md: 4 },
                 }}
               >
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color: 'rgba(255,255,255,0.85)',
+                    fontStyle: 'italic',
+                    mb: 2,
+                  }}
+                >
+                  Trusted by thousands of families across Australia
+                </Typography>
                 <Typography
                   variant="display2"
                   component="h1"
@@ -280,13 +291,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                 }}
               >
                 <Box sx={{ width: '100%', maxWidth: finderSlot ? 500 : 520, mx: 'auto' }}>
-                  {finderSlot || (
-                    <FuneralFinderV3
-                      heading="Find your local providers"
-                      onSearch={onSearch}
-                      loading={searchLoading}
-                    />
-                  )}
+                  {finderSlot || <FuneralFinderV3 onSearch={onSearch} loading={searchLoading} />}
                 </Box>
               </Box>
             </Box>
@@ -369,13 +374,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
               }}
             >
               <Box sx={{ maxWidth: 620, mx: 'auto' }}>
-                {finderSlot || (
-                  <FuneralFinderV3
-                    heading="Find your local providers"
-                    onSearch={onSearch}
-                    loading={searchLoading}
-                  />
-                )}
+                {finderSlot || <FuneralFinderV3 onSearch={onSearch} loading={searchLoading} />}
               </Box>
             </Box>
           )}
@@ -801,21 +800,30 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
             >
               <Container maxWidth="lg">
                 <Box sx={{ textAlign: 'center', mb: { xs: 5, md: 8 } }}>
+                  <Typography
+                    variant="overline"
+                    component="div"
+                    sx={{ color: 'var(--fa-color-brand-600)', mb: 1.5 }}
+                  >
+                    Why Use Funeral Arranger
+                  </Typography>
                   <Typography
                     variant="display3"
                     component="h2"
                     id="features-heading"
-                    sx={{ mb: 2.5, color: 'text.primary' }}
+                    sx={{ mb: featuresBody ? 2.5 : 0, color: 'text.primary' }}
                   >
                     {featuresHeading}
                   </Typography>
-                  <Typography
-                    variant="body1"
-                    color="text.secondary"
-                    sx={{ maxWidth: 560, mx: 'auto', fontSize: { xs: '0.875rem', md: '1rem' } }}
-                  >
-                    {featuresBody}
-                  </Typography>
+                  {featuresBody && (
+                    <Typography
+                      variant="body1"
+                      color="text.secondary"
+                      sx={{ maxWidth: 560, mx: 'auto', fontSize: { xs: '0.875rem', md: '1rem' } }}
+                    >
+                      {featuresBody}
+                    </Typography>
+                  )}
                 </Box>
 
                 <Box
@@ -866,6 +874,17 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
               }}
             >
               <Container maxWidth="md">
+                <Typography
+                  variant="overline"
+                  component="div"
+                  sx={{
+                    textAlign: 'center',
+                    color: 'var(--fa-color-brand-600)',
+                    mb: 1.5,
+                  }}
+                >
+                  Funeral Arranger Reviews
+                </Typography>
                 <Typography
                   variant="display3"
                   component="h2"
@@ -978,7 +997,7 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
               >
                 {ctaHeading}
               </Typography>
-              <Button variant="text" size="large" onClick={onCtaClick}>
+              <Button variant="contained" size="medium" onClick={onCtaClick}>
                 {ctaButtonLabel}
               </Button>
             </Container>
diff --git a/src/components/pages/HomePage/HomePageV2.stories.tsx b/src/components/pages/HomePage/HomePageV2.stories.tsx
index 9dd8717..ea764d4 100644
--- a/src/components/pages/HomePage/HomePageV2.stories.tsx
+++ b/src/components/pages/HomePage/HomePageV2.stories.tsx
@@ -42,6 +42,16 @@ const nav = (
   <Navigation
     logo={<FALogo />}
     items={[
+      {
+        label: 'Locations',
+        children: [
+          { label: 'Melbourne', href: '/locations/melbourne' },
+          { label: 'Brisbane', href: '/locations/brisbane' },
+          { label: 'Sydney', href: '/locations/sydney' },
+          { label: 'South Coast NSW', href: '/locations/south-coast-nsw' },
+          { label: 'Central Coast NSW', href: '/locations/central-coast-nsw' },
+        ],
+      },
       { label: 'FAQ', href: '/faq' },
       { label: 'Contact Us', href: '/contact' },
       { label: 'Log in', href: '/login' },
diff --git a/src/components/pages/HomePage/HomePageV3.stories.tsx b/src/components/pages/HomePage/HomePageV3.stories.tsx
index e1aa618..0aea8ad 100644
--- a/src/components/pages/HomePage/HomePageV3.stories.tsx
+++ b/src/components/pages/HomePage/HomePageV3.stories.tsx
@@ -38,6 +38,16 @@ const nav = (
   <Navigation
     logo={<FALogo />}
     items={[
+      {
+        label: 'Locations',
+        children: [
+          { label: 'Melbourne', href: '/locations/melbourne' },
+          { label: 'Brisbane', href: '/locations/brisbane' },
+          { label: 'Sydney', href: '/locations/sydney' },
+          { label: 'South Coast NSW', href: '/locations/south-coast-nsw' },
+          { label: 'Central Coast NSW', href: '/locations/central-coast-nsw' },
+        ],
+      },
       { label: 'FAQ', href: '/faq' },
       { label: 'Contact Us', href: '/contact' },
       { label: 'Log in', href: '/login' },
@@ -258,7 +268,7 @@ export const Default: Story = {
   args: {
     navigation: nav,
     footer,
-    heroImageUrl: assetUrl('/images/heroes/hero-3.png'),
+    heroImageUrl: assetUrl('/images/heroes/hero-couple.jpg'),
     heroHeading: 'Compare funeral director pricing near you and arrange with confidence',
     heroSubheading: 'Transparent pricing \u00B7 No hidden fees \u00B7 Arrange 24/7',
     stats: trustStats,
diff --git a/src/components/pages/HomePage/HomePageV4.stories.tsx b/src/components/pages/HomePage/HomePageV4.stories.tsx
index aac1374..545b88e 100644
--- a/src/components/pages/HomePage/HomePageV4.stories.tsx
+++ b/src/components/pages/HomePage/HomePageV4.stories.tsx
@@ -39,6 +39,16 @@ const nav = (
   <Navigation
     logo={<FALogo />}
     items={[
+      {
+        label: 'Locations',
+        children: [
+          { label: 'Melbourne', href: '/locations/melbourne' },
+          { label: 'Brisbane', href: '/locations/brisbane' },
+          { label: 'Sydney', href: '/locations/sydney' },
+          { label: 'South Coast NSW', href: '/locations/south-coast-nsw' },
+          { label: 'Central Coast NSW', href: '/locations/central-coast-nsw' },
+        ],
+      },
       { label: 'FAQ', href: '/faq' },
       { label: 'Contact Us', href: '/contact' },
       { label: 'Log in', href: '/login' },