v4

src/lib/components/IntroStrip.svelte

@@ -5,45 +5,62 @@
   export let intro: IntroContent;
 
   const stars = Array.from({ length: 5 });
+
+  const statement = intro.text.replace(/\.$/, '');
+  const statementWords = statement.split(/(\s+)/);
 </script>
 
-<div id="intro">
+<section id="intro" aria-label="Goodwalk at a glance">
   <div class="intro-inner">
-    <div class="intro-trust-badge">
+    <div class="intro-statement">
+      <span class="intro-kicker" aria-hidden="true">
+        <span class="intro-kicker-rule"></span>
+        Goodwalk · Auckland
+      </span>
+      <h2 class="intro-headline">
+        {#each statementWords as token, index}
+          {#if /\s+/.test(token)}
+            {token}
+          {:else}
+            <span class="intro-word" style="--word-i: {index};">{token}</span>
+          {/if}
+        {/each}
+      </h2>
+    </div>
+
+    <aside class="intro-trust" aria-label="Reviews">
       <a
-        class="intro-trust-mark intro-trust-mark-link"
+        class="intro-google"
         href={intro.reviewCta.href}
         target="_blank"
         rel="noopener"
         aria-label="Read our Google reviews"
       >
-        <img
-          class="intro-google-logo"
-          src="/images/google-g-logo.svg"
-          alt=""
-          width="28"
-          height="29"
-        />
-      </a>
-
-      <div class="intro-trust-copy">
-        <p>
-          <span class="intro-trust-copy-desktop">{intro.text}</span>
-          <span class="intro-trust-copy-mobile">30+ 5-star Google reviews. Small &amp; medium dog specialists in Auckland.</span>
-        </p>
-
-        <div class="intro-trust-meta">
-          <div class="intro-trust-stars" aria-label="5 star rating">
+        <span class="intro-google-mark" aria-hidden="true">
+          <img
+            class="intro-google-logo"
+            src="/images/google-g-logo.svg"
+            alt=""
+            width="22"
+            height="23"
+          />
+        </span>
+        <span class="intro-google-copy">
+          <span class="intro-stars" aria-label="5 star rating">
             {#each stars as _, index}
               <Icon name="fas fa-star" className={`intro-star intro-star-${index + 1}`} />
             {/each}
-          </div>
-
-          <a class="intro-trust-cta" href={intro.reviewCta.href} target="_blank" rel="noopener">
+          </span>
+          <span class="intro-google-label">
             {intro.reviewCta.label}
-          </a>
-        </div>
-      </div>
-    </div>
+          </span>
+        </span>
+      </a>
+
+      <p class="intro-meta">
+        <span class="intro-meta-dot" aria-hidden="true"></span>
+        Auckland Central · Mon&ndash;Fri
+      </p>
+    </aside>
   </div>
-</div>
+</section>