v4

src/lib/components/HeroSection.svelte

@@ -10,8 +10,11 @@
   $: mobileLead = mobileTitle.includes(hero.highlight)
     ? mobileTitle.slice(0, mobileTitle.lastIndexOf(hero.highlight))
     : mobileTitle;
+  $: accessibleTitle = `${titleParts.lead}${titleParts.connector ? ` ${titleParts.connector}` : ''} ${hero.highlight}`.trim();
   $: proofItems = (hero.subtitleChips ?? []).slice(0, 3);
 
+  const trustStars = Array.from({ length: 5 });
+
   function splitTitle(title: string) {
     const trimmed = title.trim();
 
@@ -43,12 +46,20 @@
        constrained by hero-inner's stacking context -->
   <div class="hero-img">
     <picture>
+      {#if hero.desktopImageWebpUrl}
+        <source media="(min-width: 769px)" srcset={hero.desktopImageWebpUrl} type="image/webp" />
+      {/if}
       {#if hero.desktopImageUrl}
         <source media="(min-width: 769px)" srcset={hero.desktopImageUrl} />
       {/if}
+      {#if hero.imageWebpUrl}
+        <source srcset={hero.imageWebpUrl} type="image/webp" />
+      {/if}
       <img
         src={hero.imageUrl}
         alt={hero.imageAlt}
+        width={hero.imageWidth ?? undefined}
+        height={hero.imageHeight ?? undefined}
         loading="eager"
         fetchpriority="high"
       />
@@ -62,7 +73,8 @@
       {/if}
 
       <h1 class="hero-heading">
-        <span class="hero-heading-desktop">
+        <span class="visually-hidden">{accessibleTitle}</span>
+        <span class="hero-heading-desktop" aria-hidden="true">
           <span class="hero-title-main">{titleParts.lead}</span>
           {#if titleParts.connector}
             <span class="hero-title-connector"> {titleParts.connector}</span>
@@ -70,11 +82,15 @@
           <br />
           <span class="hero-title-highlight">{hero.highlight}</span>
         </span>
-        <span class="hero-heading-mobile">
+        <span class="hero-heading-mobile" aria-hidden="true">
           {mobileLead}<span class="hero-title-highlight">{hero.highlight}</span>
         </span>
       </h1>
 
+      {#if hero.seoHeading}
+        <h2 class="hero-seo-heading">{hero.seoHeading}</h2>
+      {/if}
+
       {#if hero.subtitle}
         <p class="hero-subtitle hero-subtitle-desktop">{hero.subtitle}</p>
       {/if}
@@ -95,14 +111,21 @@
               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>
+              <span class="hero-trust-mark" aria-hidden="true">
+                <img
+                  class="hero-trust-logo"
+                  src="/images/google-g-logo.svg"
+                  alt=""
+                  width="16"
+                  height="17"
+                />
+              </span>
+              <span class="hero-trust-stars" aria-hidden="true">
+                {#each trustStars as _, index}
+                  <Icon name="fas fa-star" className={`hero-trust-star hero-trust-star-${index + 1}`} />
+                {/each}
+              </span>
+              <span class="hero-trust-label">{reviewCta.label}</span>
             </a>
           {/if}
         </div>
@@ -113,7 +136,7 @@
           href={hero.primaryCta.href}
           target={linkTarget(hero.primaryCta.external)}
           rel={linkRel(hero.primaryCta.external)}
-          class="btn btn-yellow btn-with-arrow"
+          class="btn btn-yellow btn-with-arrow btn-hide-arrow-mobile"
         >
           {hero.primaryCta.label}
           <Icon name="fas fa-arrow-right" />