svelte and nx rewrite

template/apps/client/src/lib/components/section/cta.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import LinkButton from '../link-button.svelte';
+	import type { CtaSection } from '$lib/sanity.types';
+	import { deconstructLink } from '$lib/link-helper';
+	import type { SimpleImage } from '$lib/asset-to-url';
+	import { cn } from '$lib/utils';
+	import { generateImageUrl } from '$lib/image-url';
+	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>