4.2.1 final fixes

src/lib/components/HeroSection.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import Icon from '$lib/components/Icon.svelte';
   import { getImageMetadata } from '$lib/image-metadata';
-  import type { HeroContent } from '$lib/types';
+  import type { CallToAction, HeroContent } from '$lib/types';
 
   export let hero: HeroContent;
+  export let reviewCta: CallToAction | undefined = undefined;
 
   $: titleParts = splitTitle(hero.title);
   $: mobileTitle = hero.mobileTitle?.trim() || `${hero.title} ${hero.highlight}`.trim();
@@ -44,6 +46,30 @@
         <p class="hero-subtitle">{hero.subtitle}</p>
       {/if}
 
+      {#if reviewCta}
+        <a
+          class="hero-trust-chip"
+          href={reviewCta.href}
+          target={reviewCta.external ? '_blank' : undefined}
+          rel={reviewCta.external ? 'noopener' : undefined}
+          aria-label="Read our five-star Google reviews"
+        >
+          <img
+            class="hero-trust-logo"
+            src="/images/google-g-logo.svg"
+            alt=""
+            width="18"
+            height="19"
+          />
+          <span class="hero-trust-stars" aria-hidden="true">
+            {#each Array(5) as _}
+              <Icon name="fas fa-star" />
+            {/each}
+          </span>
+          <span>{reviewCta.label}</span>
+        </a>
+      {/if}
+
       <div class="hero-buttons">
         <a href={hero.primaryCta.href} class="btn btn-yellow">{hero.primaryCta.label}</a>
         <a href={hero.secondaryCta.href} class="btn btn-outline">{hero.secondaryCta.label}</a>