67 lines
1.9 KiB
Svelte
67 lines
1.9 KiB
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–Fri
|
|
</p>
|
|
</aside>
|
|
</div>
|
|
</section>
|