Design language

src/lib/components/HeroSection.svelte

@@ -8,6 +8,9 @@
 
   $: titleParts = splitTitle(hero.title);
   $: mobileTitle = hero.mobileTitle?.trim() || `${hero.title} ${hero.highlight}`.trim();
+  $: mobileLead = mobileTitle.includes(hero.highlight)
+    ? mobileTitle.slice(0, mobileTitle.lastIndexOf(hero.highlight))
+    : mobileTitle;
   $: heroEnhanced = getEnhancedImage(hero.imageUrl);
 
   function splitTitle(title: string) {
@@ -36,8 +39,33 @@
 </script>
 
 <section id="hero">
+  <!-- hero-img is a direct child of #hero so it can be absolutely
+       positioned relative to the section on mobile without being
+       constrained by hero-inner's stacking context -->
+  <div class="hero-img">
+    <picture>
+      {#if hero.desktopImageUrl}
+        <source media="(min-width: 769px)" srcset={hero.desktopImageUrl} />
+      {/if}
+      <img
+        src={hero.imageUrl}
+        alt={hero.imageAlt}
+        loading="eager"
+        fetchpriority="high"
+      />
+    </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}
+        <p class="hero-kicker">{hero.kicker}</p>
+      {/if}
+
       <h1 class="hero-heading">
         <span class="hero-heading-desktop">
           <span class="hero-title-main">{titleParts.lead}</span>
@@ -47,11 +75,24 @@
           <br />
           <span class="hero-title-highlight">{hero.highlight}</span>
         </span>
-        <span class="hero-heading-mobile">{mobileTitle}</span>
+        <span class="hero-heading-mobile">
+          {mobileLead}<span class="hero-title-highlight">{hero.highlight}</span>
+        </span>
       </h1>
 
       {#if hero.subtitle}
-        <p class="hero-subtitle">{hero.subtitle}</p>
+        <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}
+            <span class="hero-chip">
+              <Icon name={chip.icon} />
+              {chip.label}
+            </span>
+          {/each}
+        </div>
       {/if}
 
       {#if reviewCta}
@@ -94,28 +135,9 @@
           class="btn btn-outline"
         >
           {hero.secondaryCta.label}
+          <Icon name="fas fa-arrow-down" className="hero-cta-arrow" />
         </a>
       </div>
     </div>
-
-    <div class="hero-img">
-      {#if heroEnhanced}
-        <enhanced:img
-          src={heroEnhanced}
-          alt={hero.imageAlt}
-          loading="eager"
-          fetchpriority="high"
-          decoding="async"
-        />
-      {:else}
-        <img
-          src={hero.imageUrl}
-          alt={hero.imageAlt}
-          loading="eager"
-          fetchpriority="high"
-          decoding="async"
-        />
-      {/if}
-    </div>
   </div>
 </section>