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

<script lang="ts">
  import { getImageMetadata } from '$lib/image-metadata';
  import type { HeroContent } from '$lib/types';

  export let hero: HeroContent;

  $: titleParts = splitTitle(hero.title);
  $: mobileTitle = hero.mobileTitle?.trim() || `${hero.title} ${hero.highlight}`.trim();
  $: heroImage = getImageMetadata(hero.imageUrl);

  function splitTitle(title: string) {
    const trimmed = title.trim();

    if (trimmed.toLowerCase().endsWith(' in')) {
      return {
        lead: trimmed.slice(0, -3),
        connector: 'in'
      };
    }

    return {
      lead: trimmed,
      connector: ''
    };
  }
</script>

<section id="hero">
  <div class="hero-inner">
    <div class="hero-text">
      <h1 class="hero-heading">
        <span class="hero-heading-desktop">
          <span class="hero-title-main">{titleParts.lead}</span>
          {#if titleParts.connector}
            <span class="hero-title-connector"> {titleParts.connector}</span>
          {/if}
          <br />
          <span class="hero-title-highlight">{hero.highlight}</span>
        </span>
        <span class="hero-heading-mobile">{mobileTitle}</span>
      </h1>

      <div class="hero-buttons">
        <a href={hero.primaryCta.href} class="btn btn-yellow">{hero.primaryCta.label}</a>
        <a href={hero.secondaryCta.href} class="btn btn-outline">{hero.secondaryCta.label}</a>
      </div>
    </div>

    <div class="hero-img">
      <img
        src={hero.imageUrl}
        alt={hero.imageAlt}
        width={heroImage?.width}
        height={heroImage?.height}
        loading="eager"
        fetchpriority="high"
        decoding="async"
      />
    </div>
  </div>
</section>