Design Language tweaks

src/lib/components/HeroSection.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import Icon from '$lib/components/Icon.svelte';
-  import { getEnhancedImage } from '$lib/enhanced-images';
   import type { CallToAction, HeroContent } from '$lib/types';
 
   export let hero: HeroContent;
@@ -11,7 +10,7 @@
   $: mobileLead = mobileTitle.includes(hero.highlight)
     ? mobileTitle.slice(0, mobileTitle.lastIndexOf(hero.highlight))
     : mobileTitle;
-  $: heroEnhanced = getEnhancedImage(hero.imageUrl);
+  $: proofItems = (hero.subtitleChips ?? []).slice(0, 3);
 
   function splitTitle(title: string) {
     const trimmed = title.trim();
@@ -56,10 +55,6 @@
     </picture>
   </div>
 
-  {#if hero.floatingPill}
-    <div class="hero-floating-pill">{hero.floatingPill}</div>
-  {/if}
-
   <div class="hero-inner">
     <div class="hero-text">
       {#if hero.kicker}
@@ -84,55 +79,50 @@
         <p class="hero-subtitle hero-subtitle-desktop">{hero.subtitle}</p>
       {/if}
 
-      {#if hero.subtitleChips && hero.subtitleChips.length}
-        <div class="hero-chips">
-          {#each hero.subtitleChips as chip}
+      {#if proofItems.length || reviewCta}
+        <div class="hero-chips" aria-label="Why owners choose Goodwalk">
+          {#each proofItems as chip}
             <span class="hero-chip">
               <Icon name={chip.icon} />
               {chip.label}
             </span>
           {/each}
+          {#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>{reviewCta.label}</span>
+            </a>
+          {/if}
         </div>
       {/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}
           target={linkTarget(hero.primaryCta.external)}
           rel={linkRel(hero.primaryCta.external)}
-          class="btn btn-yellow"
+          class="btn btn-yellow btn-with-arrow"
         >
           {hero.primaryCta.label}
+          <Icon name="fas fa-arrow-right" />
         </a>
         <a
           href={hero.secondaryCta.href}
           target={linkTarget(hero.secondaryCta.external)}
           rel={linkRel(hero.secondaryCta.external)}
-          class="btn btn-outline"
+          class="hero-secondary-link"
         >
           {hero.secondaryCta.label}
           <Icon name="fas fa-arrow-down" className="hero-cta-arrow" />