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>

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