84 lines
2.0 KiB
Svelte
84 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import LinkButton from '../link-button.svelte';
|
|
import type { CtaSection } from '$lib/sanity.types';
|
|
import { deconstructLink } from '$lib/helper/link';
|
|
import type { SimpleImage } from '$lib/helper/asset-to-url';
|
|
import { cn } from '$lib/utils';
|
|
import SanityBlock from '../sanity-block.svelte';
|
|
import { onMount } from 'svelte';
|
|
|
|
interface CTAProps {
|
|
cta?: CtaSection;
|
|
sectionTitle?: string;
|
|
background: SimpleImage | any;
|
|
backgroundColor?: string;
|
|
textColor?: string;
|
|
}
|
|
|
|
let {
|
|
cta,
|
|
background,
|
|
sectionTitle,
|
|
backgroundColor = 'bg-gray-900/80',
|
|
textColor = 'text-white'
|
|
}: CTAProps = $props();
|
|
|
|
let linkData: { href: string; target: string } | null = $state(null);
|
|
let mounted = $state(false);
|
|
|
|
onMount(async () => {
|
|
if (cta?.button?.link) {
|
|
linkData = await deconstructLink(cta.button.link);
|
|
}
|
|
mounted = true;
|
|
});
|
|
|
|
</script>
|
|
|
|
<section
|
|
class={cn(
|
|
'min-h-screen flex flex-col md:flex-row w-full overflow-hidden relative',
|
|
textColor
|
|
)}
|
|
style:background-image={background?.url ? `url(${background.url})` : undefined}
|
|
style:background-size="cover"
|
|
style:background-position="center"
|
|
style:background-repeat="no-repeat"
|
|
aria-label={background?.alt}
|
|
>
|
|
<div class={cn('absolute inset-0 z-0', backgroundColor)}></div>
|
|
|
|
<div
|
|
class="z-10 flex flex-col items-center md:items-start justify-center md:justify-start mt-20 px-6 md:px-20 md:py-32 md:flex-1 space-y-12 min-h-screen md:min-h-0"
|
|
>
|
|
<div>
|
|
{#if sectionTitle}
|
|
<p class="text-sm mb-4">
|
|
{sectionTitle}
|
|
</p>
|
|
{/if}
|
|
<h1 class="md:max-w-[60rem] text-6xl md:text-8xl font-bold leading-tight">
|
|
{cta?.title}
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-start space-y-8 md:space-y-14 w-full max-w-xl">
|
|
{#if cta?.description}
|
|
<div class="text-lg">
|
|
<SanityBlock body={cta.description} />
|
|
</div>
|
|
{/if}
|
|
{#if mounted && linkData}
|
|
<div class="mb-20">
|
|
<LinkButton
|
|
text={cta?.button?.text ?? ''}
|
|
{linkData}
|
|
size="lg"
|
|
variant="default"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</section>
|