Design language

src/lib/components/PricingPage.svelte

@@ -3,6 +3,7 @@
   import { reveal } from '$lib/actions/reveal';
   import BookingSection from '$lib/components/BookingSection.svelte';
   import Icon from '$lib/components/Icon.svelte';
+  import PageHeader from '$lib/components/PageHeader.svelte';
   import TestimonialsSection from '$lib/components/TestimonialsSection.svelte';
   import type { PricingPageContent, SiteSharedContent } from '$lib/types';
 
@@ -110,37 +111,30 @@
 </script>
 
 <main class="pricing-page">
-  <section class="pricing-page-hero">
-    <div class="pricing-inner">
-      <h1>{pageContent.title}</h1>
-      {#if pageContent.subtitle}
-        <p class="pricing-page-sub">{pageContent.subtitle}</p>
-      {/if}
-
-      <a
-        class="pricing-trust"
-        href="https://g.page/r/CUsvrWPhkYrAEB0/"
-        target="_blank"
-        rel="noopener"
-        aria-label="Read our 5-star Google reviews"
-      >
-        <img
-          class="pricing-trust-logo"
-          src="/images/google-g-logo.svg"
-          alt=""
-          width="18"
-          height="19"
-        />
-        <span class="pricing-trust-stars" aria-hidden="true">
-          {#each Array(5) as _}
-            <Icon name="fas fa-star" />
-          {/each}
-        </span>
-        <span class="pricing-trust-label">30+ 5-star Google reviews, trusted by Auckland dog owners</span>
-        <Icon name="fas fa-arrow-right" className="pricing-trust-arrow" />
-      </a>
-    </div>
-  </section>
+  <PageHeader variant="green" title={pageContent.title} subtitle={pageContent.subtitle}>
+    <a
+      class="pricing-trust"
+      href="https://g.page/r/CUsvrWPhkYrAEB0/"
+      target="_blank"
+      rel="noopener"
+      aria-label="Read our 5-star Google reviews"
+    >
+      <img
+        class="pricing-trust-logo"
+        src="/images/google-g-logo.svg"
+        alt=""
+        width="18"
+        height="19"
+      />
+      <span class="pricing-trust-stars" aria-hidden="true">
+        {#each Array(5) as _}
+          <Icon name="fas fa-star" />
+        {/each}
+      </span>
+      <span class="pricing-trust-label">30+ 5-star Google reviews, trusted by Auckland dog owners</span>
+      <Icon name="fas fa-arrow-right" className="pricing-trust-arrow" />
+    </a>
+  </PageHeader>
 
   {#each pageContent.sections as section, index}
     <section use:reveal class="pricing-section reveal-block">
@@ -253,28 +247,6 @@
     padding: 0 50px;
   }
 
-  .pricing-page-hero {
-    background: var(--gw-green);
-    padding: 56px 0 64px;
-    text-align: center;
-  }
-
-  .pricing-page-hero h1 {
-    margin: 0 0 12px;
-    font-family: var(--font-head);
-    font-size: clamp(34px, 4vw, 56px);
-    line-height: 1.05;
-    letter-spacing: -0.04em;
-    color: #fff;
-  }
-
-  .pricing-page-sub {
-    margin: 0;
-    font-size: 16px;
-    line-height: 1.5;
-    color: rgba(255, 255, 255, 0.7);
-  }
-
   .pricing-trust {
     display: inline-flex;
     align-items: center;