Design language

src/lib/components/AboutPage.svelte

@@ -2,6 +2,7 @@
   import { accordion } from '$lib/actions/accordion';
   import { reveal } from '$lib/actions/reveal';
   import Icon from '$lib/components/Icon.svelte';
+  import PageHeader from '$lib/components/PageHeader.svelte';
   import { getEnhancedImage } from '$lib/enhanced-images';
   import type { AboutPageContent } from '$lib/types';
 
@@ -16,26 +17,26 @@
 <main class="about-page">
 
   <!-- ── Hero ── -->
-  <section class="about-hero">
-    <div class="about-inner">
-      <span class="about-hero-eyebrow">About Goodwalk</span>
-      <h1>{pageContent.title}</h1>
-      <p class="about-hero-desc">Small dog specialists serving Auckland Central. A team your dog knows by name.</p>
-      <div class="about-hero-chips">
-        <a
-          href="https://g.page/r/CUsvrWPhkYrAEB0/"
-          target="_blank"
-          rel="noopener"
-          class="about-hero-chip about-hero-chip-link"
-        >
-          <span class="about-chip-stars" aria-hidden="true">★★★★★</span>
-          30+ five-star Google reviews
-        </a>
-        <span class="about-hero-chip">Auckland Central</span>
-        <span class="about-hero-chip">Small dog specialists</span>
-      </div>
+  <PageHeader
+    variant="green"
+    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>
-  </section>
+  </PageHeader>
 
   <!-- ── Standard sections (Who we are, Our impact) ── -->
   {#each standardSections as section}
@@ -174,7 +175,6 @@
 
   /* ── Shared eyebrow ── */
   .about-eyebrow,
-  .about-hero-eyebrow,
   .about-contact-eyebrow {
     display: inline-block;
     margin-bottom: 14px;
@@ -192,70 +192,11 @@
     box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
   }
 
-  .about-hero-eyebrow,
   .about-contact-eyebrow {
     background: rgba(255, 255, 255, 0.14);
     color: #fff;
   }
 
-  /* ── Hero ── */
-  .about-hero {
-    background: var(--gw-green);
-    color: #fff;
-    padding: 80px 0 72px;
-    text-align: center;
-  }
-
-  .about-hero h1 {
-    margin: 0 0 16px;
-    font-family: var(--font-head);
-    font-size: clamp(40px, 5vw, 68px);
-    font-weight: 800;
-    line-height: 1.02;
-    letter-spacing: -0.04em;
-    color: #fff;
-  }
-
-  .about-hero-desc {
-    max-width: 480px;
-    margin: 0 auto 28px;
-    color: rgba(255, 255, 255, 0.82);
-    font-size: 17px;
-    line-height: 1.55;
-  }
-
-  .about-hero-chips {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    flex-wrap: wrap;
-  }
-
-  .about-hero-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 9px 18px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.14);
-    color: #fff;
-    font-family: var(--font-head);
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 1.2;
-    letter-spacing: 0.01em;
-  }
-
-  .about-hero-chip-link {
-    text-decoration: none;
-    transition: background 0.18s ease;
-  }
-
-  .about-hero-chip-link:hover {
-    background: rgba(255, 255, 255, 0.18);
-  }
-
   .about-chip-stars {
     color: var(--yellow);
     letter-spacing: 1px;
@@ -546,23 +487,6 @@
       padding: 0 24px;
     }
 
-    .about-hero {
-      padding: 56px 0 48px;
-    }
-
-    .about-hero h1 {
-      font-size: 38px;
-    }
-
-    .about-hero-desc {
-      font-size: 15px;
-    }
-
-    .about-hero-chip {
-      font-size: 13px;
-      padding: 8px 14px;
-    }
-
     .about-section {
       padding: 60px 0;
     }