gw-svelte/src/lib/components/IntroStrip.svelte

<script lang="ts">
  import Icon from '$lib/components/Icon.svelte';
  import type { IntroContent } from '$lib/types';

  export let intro: IntroContent;

  const stars = Array.from({ length: 5 });

  const statement = intro.text.replace(/\.$/, '');
  const statementWords = statement.split(/(\s+)/);
</script>

<section id="intro" aria-label="Goodwalk at a glance">
  <div class="intro-inner">
    <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-google"
        href={intro.reviewCta.href}
        target="_blank"
        rel="noopener"
        aria-label="Read our Google reviews"
      >
        <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}
          </span>
          <span class="intro-google-label">
            {intro.reviewCta.label}
          </span>
        </span>
      </a>

      <p class="intro-meta">
        <span class="intro-meta-dot" aria-hidden="true"></span>
        Auckland Central · Mon&ndash;Fri
      </p>
    </aside>
  </div>
</section>