v4.0.0.1

src/lib/components/AboutPage.svelte

@@ -2,8 +2,8 @@
   import { accordion } from '$lib/actions/accordion';
   import { reveal } from '$lib/actions/reveal';
   import CtaCard from '$lib/components/CtaCard.svelte';
-  import PageHeader from '$lib/components/PageHeader.svelte';
   import Icon from '$lib/components/Icon.svelte';
+  import ServiceHero from '$lib/components/ServiceHero.svelte';
   import { getEnhancedImage } from '$lib/enhanced-images';
   import type { AboutPageContent } from '$lib/types';
 
@@ -11,33 +11,25 @@
 
   $: standardSections = pageContent.sections.filter((s) => s.accent !== 'founder');
   $: founderSection = pageContent.sections.find((s) => s.accent === 'founder') ?? null;
+  const heroChips = [
+    { icon: 'fas fa-star', label: '30+ five-star Google reviews' },
+    { icon: 'fas fa-location-dot', label: 'Auckland Central' },
+    { icon: 'fas fa-paw', label: 'Small dog specialists' }
+  ];
   const founderHeadingLead = 'Meet Aless,';
   const founderHeadingHighlight = 'the heart of Goodwalk';
 </script>
 
 <main class="about-page">
-
-  <!-- ── Hero ── -->
-  <PageHeader
-    variant="green"
+  <ServiceHero
     eyebrow="About Goodwalk"
     title={pageContent.title}
     subtitle="Small dog specialists serving Auckland Central. A team your dog knows by name."
-  >
-    <div class="ph-chips">
-      <a
-        href="https://g.page/r/CUsvrWPhkYrAEB0/"
-        target="_blank"
-        rel="noopener"
-        class="ph-chip ph-chip--link"
-      >
-        <span class="about-chip-stars" aria-hidden="true">★★★★★</span>
-        30+ five-star Google reviews
-      </a>
-      <span class="ph-chip">Auckland Central</span>
-      <span class="ph-chip">Small dog specialists</span>
-    </div>
-  </PageHeader>
+    imageUrl="/images/about-good-walk.webp"
+    imageAlt="Goodwalk dogs gathered together in the back of the car before a walk"
+    chips={heroChips}
+    cta={{ label: 'Book a Meet & Greet', href: '/contact-us', variant: 'yellow' }}
+  />
 
   <!-- ── Standard sections (Who we are, Our impact) ── -->
   {#each standardSections as section}
@@ -50,7 +42,7 @@
       <div class="page-inner about-section-grid" class:about-section-reverse={section.reverse}>
         <div class="about-copy">
           {#if section.eyebrow}
-            <span class="about-eyebrow">{section.eyebrow}</span>
+            <span class="eyebrow about-eyebrow">{section.eyebrow}</span>
           {/if}
           <h2>{section.title}</h2>
           {#each section.body as paragraph}
@@ -93,7 +85,7 @@
         <div class="about-founder-copy">
           <article class="about-founder-note">
             {#if founderSection.eyebrow}
-              <span class="about-eyebrow about-founder-kicker">{founderSection.eyebrow}</span>
+              <span class="eyebrow about-eyebrow about-founder-kicker">{founderSection.eyebrow}</span>
             {/if}
             <h2 class="about-founder-heading">
               <span class="about-founder-heading-desktop">
@@ -144,7 +136,7 @@
     <section use:reveal={{ delay: 30 }} class="about-faq reveal-block">
       <div class="page-inner">
         <div class="about-faq-header">
-          <span class="about-eyebrow">FAQ</span>
+          <span class="eyebrow about-eyebrow">FAQ</span>
           <h2>{pageContent.faqTitle ?? 'Common questions'}</h2>
         </div>
         <div use:accordion class="faq about-faq-list">
@@ -187,21 +179,6 @@
   .about-eyebrow {
     display: inline-block;
     margin-bottom: 14px;
-    padding: 7px 12px;
-    border-radius: 999px;
-    background: rgba(33, 48, 33, 0.08);
-    color: var(--gw-green);
-    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
-    font-size: 12px;
-    font-weight: 800;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
-  .about-chip-stars {
-    color: var(--yellow);
-    letter-spacing: 1px;
-    font-size: 13px;
   }
 
   /* ── Standard sections ── */