gw-svelte/src/lib/components/PromiseSection.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>

      <p>
        {promise.body}
        <strong>{promise.emphasis}</strong>
      </p>

      <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>