Initial commit

src/lib/components/HeroSection.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { HeroContent } from '$lib/types';
+
+  export let hero: HeroContent;
+
+  $: titleParts = splitTitle(hero.title);
+  $: mobileTitle = hero.mobileTitle?.trim() || `${hero.title} ${hero.highlight}`.trim();
+
+  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}
+        loading="eager"
+        fetchpriority="high"
+        decoding="async"
+      />
+    </div>
+  </div>
+</section>