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 });
</script>

<div id="intro">
  <div class="intro-inner">
    <div class="intro-trust-badge">
      <a
        class="intro-trust-mark intro-trust-mark-link"
        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">
            {#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">
            {intro.reviewCta.label}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>