33 lines
845 B
Svelte
33 lines
845 B
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-trust-badge">
|
||
|
|
<div class="intro-trust-mark" aria-hidden="true">
|
||
|
|
<Icon name="fab fa-google" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="intro-trust-copy">
|
||
|
|
<p>{intro.text}</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 href={intro.reviewCta.href} target="_blank" rel="noopener">
|
||
|
|
{intro.reviewCta.label}
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|