66 lines
1.7 KiB
Svelte
66 lines
1.7 KiB
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>
|
|
|
|
{#if hero.subtitle}
|
|
<p class="hero-subtitle">{hero.subtitle}</p>
|
|
{/if}
|
|
|
|
<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>
|