gw-svelte/src/lib/components/FounderStorySection.svelte

<script lang="ts">
  import { getEnhancedImage } from '$lib/enhanced-images';
  import type { FounderStoryContent } from '$lib/types';

  export let founderStory: FounderStoryContent;

  $: founderStoryEnhanced = getEnhancedImage(founderStory.imageUrl);
</script>

<section id="promise">
  <div class="promise-inner">
    <div class="promise-text">
      <span class="promise-kicker">Founder story</span>
      <div class="promise-mobile-intro">
        <div class="promise-mobile-avatar">
          {#if founderStoryEnhanced}
            <enhanced:img
              src={founderStoryEnhanced}
              alt={founderStory.imageAlt}
              loading="lazy"
              decoding="async"
            />
          {:else}
            <img src={founderStory.imageUrl} alt={founderStory.imageAlt} loading="lazy" decoding="async" />
          {/if}
        </div>
        <p class="promise-mobile-caption">Auckland Central walks led personally by Aless.</p>
      </div>

      <h2 class="promise-heading">
        <span class="promise-heading-desktop">
          <span class="promise-title-main">{founderStory.title}</span>
          <br />
          <span class="promise-title-highlight">{founderStory.subtitle}</span>
        </span>
        <span class="promise-heading-mobile">
          <span class="promise-title-main">{founderStory.title}</span>
          <span class="promise-title-highlight">{founderStory.subtitle}</span>
        </span>
      </h2>

      {#each founderStory.body as paragraph, idx}
        <p>
          {paragraph}
          {#if idx === founderStory.body.length - 1}
            <strong>{founderStory.emphasis}</strong>
          {/if}
        </p>
      {/each}

      <a href={founderStory.cta.href} class="btn btn-green">{founderStory.cta.label}</a>
    </div>

    <div class="promise-img">
      <div class="promise-img-frame">
        {#if founderStoryEnhanced}
          <enhanced:img
            src={founderStoryEnhanced}
            alt={founderStory.imageAlt}
            loading="lazy"
            decoding="async"
          />
        {:else}
          <img src={founderStory.imageUrl} alt={founderStory.imageAlt} loading="lazy" decoding="async" />
        {/if}
      </div>
    </div>
  </div>
</section>

<style>
  .promise-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(33, 48, 33, 0.07);
    color: var(--gw-green);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
  }

  .promise-heading {
    margin: 0 0 22px;
    max-width: 14ch;
  }

  .promise-mobile-intro {
    display: none;
  }

  .promise-heading-desktop {
    display: block;
  }

  .promise-heading-mobile {
    display: none;
  }

  .promise-heading-mobile .promise-title-main,
  .promise-heading-mobile .promise-title-highlight {
    display: block;
  }

  .promise-title-main {
    display: block;
    margin-bottom: 8px;
    color: rgba(13, 26, 13, 0.68);
    font-family: var(--font-head);
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
  }

  .promise-title-highlight {
    display: block;
    color: #0d1a0d;
    font-size: clamp(42px, 5.2vw, 64px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.96;
    text-wrap: balance;
  }

  .promise-text {
    position: relative;
    z-index: 2;
  }

  @media (max-width: 768px) {
    #promise {
      padding-top: 42px;
      padding-bottom: var(--space-section-featured-y);
    }

    .promise-kicker {
      margin-bottom: 12px;
      padding: 7px 12px;
      font-size: 11px;
    }

    .promise-text {
      width: 100%;
      margin-top: 0;
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .promise-heading {
      max-width: none;
      margin-bottom: 22px;
      text-align: center;
    }

    .promise-heading-desktop {
      display: none;
    }

    .promise-heading-mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .promise-heading-mobile .promise-title-main,
    .promise-heading-mobile .promise-title-highlight {
      display: inline-block;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }

    .promise-mobile-intro {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 16px;
      padding: 14px 16px;
      border-radius: 22px;
      background: linear-gradient(180deg, #fbf6e8 0%, #efe4c8 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 10px 22px rgba(17, 20, 24, 0.06),
        inset 0 0 0 1px rgba(242, 191, 47, 0.12);
    }

    .promise-mobile-avatar {
      flex: 0 0 auto;
      width: 68px;
      height: 68px;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 8px 18px rgba(17, 20, 24, 0.08);
    }

    .promise-mobile-avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
    }

    .promise-mobile-caption {
      margin: 0;
      color: #34363a;
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.4;
    }

    .promise-title-main {
      margin-bottom: 0;
      font-size: 14px;
      letter-spacing: 0.02em;
    }

    .promise-title-highlight {
      font-size: clamp(36px, 11vw, 54px);
      line-height: 0.98;
    }

    .promise-text p,
    .promise-text .btn {
      margin-left: 0;
      margin-right: 0;
    }

    .promise-text p {
      text-align: left;
    }

    .promise-text .btn {
      width: 100%;
      justify-content: center;
    }

    .promise-img {
      display: none;
    }
  }

</style>