134 lines
3.9 KiB
Svelte
134 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import Icon from '$lib/components/Icon.svelte';
|
|
import type { CallToAction, HeroContent } from '$lib/types';
|
|
|
|
export let hero: HeroContent;
|
|
export let reviewCta: CallToAction | undefined = undefined;
|
|
|
|
$: titleParts = splitTitle(hero.title);
|
|
$: mobileTitle = hero.mobileTitle?.trim() || `${hero.title} ${hero.highlight}`.trim();
|
|
$: mobileLead = mobileTitle.includes(hero.highlight)
|
|
? mobileTitle.slice(0, mobileTitle.lastIndexOf(hero.highlight))
|
|
: mobileTitle;
|
|
$: proofItems = (hero.subtitleChips ?? []).slice(0, 3);
|
|
|
|
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: ''
|
|
};
|
|
}
|
|
|
|
function linkTarget(external?: boolean) {
|
|
return external ? '_blank' : undefined;
|
|
}
|
|
|
|
function linkRel(external?: boolean) {
|
|
return external ? 'noopener' : undefined;
|
|
}
|
|
</script>
|
|
|
|
<section id="hero">
|
|
<!-- hero-img is a direct child of #hero so it can be absolutely
|
|
positioned relative to the section on mobile without being
|
|
constrained by hero-inner's stacking context -->
|
|
<div class="hero-img">
|
|
<picture>
|
|
{#if hero.desktopImageUrl}
|
|
<source media="(min-width: 769px)" srcset={hero.desktopImageUrl} />
|
|
{/if}
|
|
<img
|
|
src={hero.imageUrl}
|
|
alt={hero.imageAlt}
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
/>
|
|
</picture>
|
|
</div>
|
|
|
|
<div class="hero-inner">
|
|
<div class="hero-text">
|
|
{#if hero.kicker}
|
|
<p class="hero-kicker">{hero.kicker}</p>
|
|
{/if}
|
|
|
|
<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">
|
|
{mobileLead}<span class="hero-title-highlight">{hero.highlight}</span>
|
|
</span>
|
|
</h1>
|
|
|
|
{#if hero.subtitle}
|
|
<p class="hero-subtitle hero-subtitle-desktop">{hero.subtitle}</p>
|
|
{/if}
|
|
|
|
{#if proofItems.length || reviewCta}
|
|
<div class="hero-chips" aria-label="Why owners choose Goodwalk">
|
|
{#each proofItems as chip}
|
|
<span class="hero-chip">
|
|
<Icon name={chip.icon} />
|
|
{chip.label}
|
|
</span>
|
|
{/each}
|
|
{#if reviewCta}
|
|
<a
|
|
class="hero-trust-chip"
|
|
href={reviewCta.href}
|
|
target={reviewCta.external ? '_blank' : undefined}
|
|
rel={reviewCta.external ? 'noopener' : undefined}
|
|
aria-label="Read our five-star Google reviews"
|
|
>
|
|
<img
|
|
class="hero-trust-logo"
|
|
src="/images/google-g-logo.svg"
|
|
alt=""
|
|
width="18"
|
|
height="19"
|
|
/>
|
|
<span>{reviewCta.label}</span>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="hero-buttons">
|
|
<a
|
|
href={hero.primaryCta.href}
|
|
target={linkTarget(hero.primaryCta.external)}
|
|
rel={linkRel(hero.primaryCta.external)}
|
|
class="btn btn-yellow btn-with-arrow"
|
|
>
|
|
{hero.primaryCta.label}
|
|
<Icon name="fas fa-arrow-right" />
|
|
</a>
|
|
<a
|
|
href={hero.secondaryCta.href}
|
|
target={linkTarget(hero.secondaryCta.external)}
|
|
rel={linkRel(hero.secondaryCta.external)}
|
|
class="hero-secondary-link"
|
|
>
|
|
{hero.secondaryCta.label}
|
|
<Icon name="fas fa-arrow-down" className="hero-cta-arrow" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|