Onboarding / Deployment Scripts / Marketing updates

src/lib/components/TestimonialsSection.svelte

@@ -2,7 +2,8 @@
   import { onMount } from 'svelte';
   import { reveal } from '$lib/actions/reveal';
   import Icon from '$lib/components/Icon.svelte';
-  import { getImageMetadata } from '$lib/image-metadata';
+  import { getEnhancedImage } from '$lib/enhanced-images';
+  import { getSeededTestimonialIndex } from '$lib/testimonials';
   import type { TestimonialContent } from '$lib/types';
 
   export let testimonials: TestimonialContent[];
@@ -11,6 +12,7 @@
   export let blurb = 'Peace of mind for busy Auckland dog owners. Happier dogs, smoother routines, and a team owners trust with the important stuff.';
   export let instagramHref = 'https://www.instagram.com/goodwalk.nz/';
   export let instagramLabel = 'goodwalk.nz';
+  export let seedKey = '';
 
   type TestimonialSlide = TestimonialContent & { imageUrl: string };
 
@@ -50,6 +52,7 @@
   let inView = false;
   let prefersReducedMotion = false;
   let carouselEl: HTMLDivElement | undefined;
+  let slideSignature = '';
 
   $: slides = testimonials
     .map((testimonial) => wordpressTestimonials[testimonial.reviewer] ?? testimonial)
@@ -59,6 +62,15 @@
     activeIndex = 0;
   }
 
+  $: {
+    const nextSignature = `${seedKey}:${slides.map((slide) => slide.reviewer).join('|')}`;
+
+    if (nextSignature !== slideSignature) {
+      slideSignature = nextSignature;
+      activeIndex = getSeededTestimonialIndex(slides, seedKey);
+    }
+  }
+
   function dogNameFromDetail(detail: string) {
     const match = detail.match(/^([^'’]+)/);
     return match ? match[1].trim() : '';
@@ -163,16 +175,24 @@
               <div class="testimonial-photo-wrap">
                 <div class="testimonial-photo-frame">
                   {#if index === activeIndex}
-                    {@const imageMeta = getImageMetadata(testimonial.imageUrl)}
-                    <img
-                      class="testimonial-photo"
-                      src={testimonial.imageUrl}
-                      alt={testimonialAlt(testimonial)}
-                      width={imageMeta?.width}
-                      height={imageMeta?.height}
-                      loading="lazy"
-                      decoding="async"
-                    />
+                    {@const enhancedPhoto = getEnhancedImage(testimonial.imageUrl)}
+                    {#if enhancedPhoto}
+                      <enhanced:img
+                        class="testimonial-photo"
+                        src={enhancedPhoto}
+                        alt={testimonialAlt(testimonial)}
+                        loading="lazy"
+                        decoding="async"
+                      />
+                    {:else}
+                      <img
+                        class="testimonial-photo"
+                        src={testimonial.imageUrl}
+                        alt={testimonialAlt(testimonial)}
+                        loading="lazy"
+                        decoding="async"
+                      />
+                    {/if}
                   {/if}
                 </div>
               </div>
@@ -489,8 +509,11 @@
     border-radius: 999px;
     background: #f8f8f8;
     color: #0a304e;
+    font-family: var(--font-head);
     font-size: 14px;
-    line-height: 1.3;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: 0.01em;
     box-shadow: 0 0 0 1px rgba(10, 48, 78, 0.06);
   }