Onboarding / Deployment Scripts / Marketing updates

src/lib/components/HeroSection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Icon from '$lib/components/Icon.svelte';
-  import { getImageMetadata } from '$lib/image-metadata';
+  import { getEnhancedImage } from '$lib/enhanced-images';
   import type { CallToAction, HeroContent } from '$lib/types';
 
   export let hero: HeroContent;
@@ -8,7 +8,7 @@
 
   $: titleParts = splitTitle(hero.title);
   $: mobileTitle = hero.mobileTitle?.trim() || `${hero.title} ${hero.highlight}`.trim();
-  $: heroImage = getImageMetadata(hero.imageUrl);
+  $: heroEnhanced = getEnhancedImage(hero.imageUrl);
 
   function splitTitle(title: string) {
     const trimmed = title.trim();
@@ -99,15 +99,23 @@
     </div>
 
     <div class="hero-img">
-      <img
-        src={hero.imageUrl}
-        alt={hero.imageAlt}
-        width={heroImage?.width}
-        height={heroImage?.height}
-        loading="eager"
-        fetchpriority="high"
-        decoding="async"
-      />
+      {#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>