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

<script lang="ts">
  import { reveal } from '$lib/actions/reveal';
  import Icon from '$lib/components/Icon.svelte';
  import { getEnhancedImage } from '$lib/enhanced-images';
  import type { FounderStoryContent } from '$lib/types';

  export let founderStory: FounderStoryContent;

  const founderTrustNotes = [
    'The same friendly face at the door',
    'Little groups, never a crowded van',
    'Updates that help you relax while you are out'
  ];

  const founderStoryParagraphs = [
    'Goodwalk started with my own little dog and the kind of relationship I have always had with animals. Growing up in Italy with a German Shepherd, I saw early on how much joy, comfort, personality, and companionship dogs bring into a home. They are not just pets. They become part of your family and your daily life.',
    'When I moved to Auckland, I noticed a lot of dog walking felt rushed, overcrowded, or impersonal, especially for smaller dogs. So I built Goodwalk around the kind of care I would want for my own dog: familiar faces, safe and social little groups, lots of fun, and genuine relationships with every dog we walk.',
    'The Tiny Gang is built around routine, trust, and dogs having the absolute best part of their day together. Older dogs help younger ones settle in, nervous dogs build confidence, and playful dogs get to burn energy with their friends.',
    'You know exactly who is caring for your dog. Your dog knows who is at the door. And you come home to a happy, fulfilled dog that has had a proper adventure. Ready to join the Tiny Gang?'
  ];

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

<section id="promise" use:reveal={{ delay: 20 }} class="reveal-block">
  <div class="founder-inner">
    <article class="founder-note">
        <div class="founder-intro">
          <span class="eyebrow founder-kicker">A note from Aless</span>
          <span class="founder-greeting">Hi, I'm Aless.</span>
        </div>

        <h2 class="founder-heading">
          <span class="founder-heading-main">{founderStory.title}</span>
          <span class="founder-heading-sub">Goodwalk is built around trust.</span>
        </h2>

        <div class="founder-trust-strip" aria-label="What owners can expect from Goodwalk">
          <span class="founder-trust-label">What owners notice first</span>
          <ul class="founder-trust-list">
            {#each founderTrustNotes as note}
              <li>{note}</li>
            {/each}
          </ul>
        </div>

        <div class="founder-body">
          {#each founderStoryParagraphs as paragraph}
            <p>{paragraph}</p>
          {/each}
        </div>

        <p class="founder-closing">
          Ready to <strong>{founderStory.emphasis}</strong>
        </p>

        <div class="founder-actions">
          <a class="founder-contact-note" href="mailto:info@goodwalk.co.nz" aria-label="Email Aless at Goodwalk">
            <span class="founder-contact-wave" aria-hidden="true">👋</span>
            <span>If you are unsure about anything, feel free to email me anytime.</span>
          </a>

          <a href={founderStory.cta.href} class="btn btn-green btn-with-arrow btn-hide-arrow-mobile founder-cta">
            {founderStory.cta.label}
            <Icon name="fas fa-arrow-right" />
          </a>
        </div>

        <div class="founder-signoff">
          <div class="founder-signoff-copy">
            <p class="founder-signoff-name">Aless, founder of Goodwalk</p>
            <p class="founder-signoff-line">The same calm face at the door, the same trusted routine for your dog.</p>
          </div>

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

<style>
  #promise {
    content-visibility: auto;
    contain-intrinsic-size: 980px;
  }

  .founder-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 50px;
  }

  .founder-media-card {
    overflow: hidden;
    width: min(100%, 168px);
    border-radius: 24px;
    background:
      linear-gradient(180deg, oklch(0.97 0.02 100) 0%, oklch(0.93 0.03 102) 100%);
    box-shadow: 0 16px 30px rgba(17, 20, 24, 0.08);
  }

  .founder-portrait {
    display: block;
    width: 100%;
    aspect-ratio: 0.86;
    object-fit: cover;
    object-position: center 24%;
  }

  .founder-note {
    padding: clamp(32px, 4vw, 48px);
    background: var(--surface-panel);
    border: 1px solid var(--border-soft);
    border-radius: 34px;
    box-shadow: 0 24px 60px rgba(17, 20, 24, 0.06);
  }

  .founder-intro {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
  }

  .founder-kicker {
    display: inline-block;
    color: var(--text-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .founder-greeting {
    color: oklch(0.29 0.02 118);
    font-family: var(--font-head);
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.5;
  }

  .founder-heading {
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
  }

  .founder-heading-main {
    display: block;
    color: oklch(0.23 0.02 136);
    font-family: var(--font-head);
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
  }

  .founder-heading-sub {
    display: block;
    max-width: 28ch;
    color: oklch(0.4 0.018 118);
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 500;
    line-height: 1.45;
  }

  .founder-trust-strip {
    display: grid;
    gap: 10px;
    margin: 0 0 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
  }

  .founder-trust-label {
    color: var(--text-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .founder-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .founder-trust-list li {
    position: relative;
    padding-left: 14px;
    color: oklch(0.35 0.017 118);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }

  .founder-trust-list li::before {
    content: '';
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gw-green) 72%, white);
  }

  .founder-body {
    display: grid;
    gap: 18px;
    max-width: 67ch;
  }

  .founder-body p {
    margin: 0;
    color: oklch(0.39 0.014 105);
    font-size: var(--body-copy-size);
    line-height: 1.75;
  }

  .founder-closing {
    margin: 24px 0 0;
    color: oklch(0.24 0.018 136);
    font-family: var(--font-head);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
  }

  .founder-closing strong {
    color: var(--gw-green);
    font-weight: 800;
  }

  .founder-actions {
    display: grid;
    gap: 18px;
    justify-items: start;
    margin-top: 28px;
  }

  .founder-contact-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border-radius: 18px;
    color: oklch(0.33 0.018 118);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition:
      color 0.18s ease,
      transform 0.18s ease;
  }

  .founder-contact-wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-panel-muted);
    box-shadow: inset 0 0 0 1px var(--border-soft);
    font-size: 16px;
    flex: 0 0 auto;
  }

  .founder-cta {
    margin-top: 2px;
  }

  .founder-signoff {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--border-soft);
  }

  .founder-signoff-copy {
    display: grid;
    gap: 6px;
    max-width: 30ch;
  }

  .founder-signoff-name {
    margin: 0;
    color: oklch(0.24 0.02 136);
    font-family: var(--font-head);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .founder-signoff-line {
    margin: 0;
    color: var(--text-subtle);
    font-size: 14px;
    line-height: 1.55;
  }

  @media (hover: hover) {
    .founder-media-card:hover .founder-portrait {
      transform: scale(1.02);
    }

    .founder-portrait {
      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .founder-contact-note:hover {
      color: var(--gw-green);
      transform: translateY(-1px);
    }
  }

  @media (max-width: 768px) {
    .founder-inner {
      padding: 0 var(--space-container-x-mobile);
    }

    .founder-note {
      padding: 26px 22px 24px;
      border-radius: 24px;
    }

    .founder-heading {
      margin: 0 0 22px;
    }

    .founder-body p {
      font-size: var(--body-copy-size-mobile);
      line-height: 1.7;
    }

    .founder-media-card {
      border-radius: 24px;
      width: 132px;
    }

    .founder-trust-strip {
      margin-bottom: 24px;
      padding-top: 16px;
    }

    .founder-trust-list {
      display: grid;
      gap: 8px;
    }

    .founder-trust-list li {
      font-size: 13px;
    }

    .founder-contact-note {
      display: flex;
      width: 100%;
      font-size: 13px;
      padding: 11px 14px;
      text-align: center;
    }

    .founder-cta {
      width: 100%;
      justify-content: center;
    }

    .founder-signoff {
      align-items: start;
      flex-direction: column;
      margin-top: 28px;
      padding-top: 20px;
    }

    .founder-signoff-copy {
      max-width: none;
    }
  }
</style>