42 lines
976 B
Svelte
42 lines
976 B
Svelte
<script lang="ts">
|
|
import { getImageMetadata } from '$lib/image-metadata';
|
|
import type { PromiseContent } from '$lib/types';
|
|
|
|
export let promise: PromiseContent;
|
|
|
|
$: promiseImage = getImageMetadata(promise.imageUrl);
|
|
</script>
|
|
|
|
<section id="promise">
|
|
<div class="promise-inner">
|
|
<div class="promise-text">
|
|
<h2>
|
|
{promise.title}<br />
|
|
{promise.subtitle}
|
|
</h2>
|
|
|
|
{#each promise.body as paragraph, idx}
|
|
<p>
|
|
{paragraph}
|
|
{#if idx === promise.body.length - 1}
|
|
<strong>{promise.emphasis}</strong>
|
|
{/if}
|
|
</p>
|
|
{/each}
|
|
|
|
<a href={promise.cta.href} class="btn btn-green">{promise.cta.label}</a>
|
|
</div>
|
|
|
|
<div class="promise-img">
|
|
<img
|
|
src={promise.imageUrl}
|
|
alt={promise.imageAlt}
|
|
width={promiseImage?.width}
|
|
height={promiseImage?.height}
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|