84 lines
2.5 KiB
Svelte
84 lines
2.5 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { CTA_DATA } from "./data";
|
||
|
|
import { i18n } from "$lib/i18n";
|
||
|
|
|
||
|
|
let {
|
||
|
|
id = "cta",
|
||
|
|
class: className = ""
|
||
|
|
}: {
|
||
|
|
id?: string;
|
||
|
|
class?: string;
|
||
|
|
} = $props();
|
||
|
|
|
||
|
|
const featureKeys = ["home.cta.f1", "home.cta.f2", "home.cta.f3"] as const;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section {id} class={`w-full bg-muted py-16 md:py-24 ${className}`}>
|
||
|
|
<div class="container mx-auto max-w-[1216px] px-4 md:px-6">
|
||
|
|
<div class="overflow-hidden rounded-2xl bg-secondary text-secondary-foreground shadow-xl">
|
||
|
|
<div class="grid grid-cols-1 items-center overflow-hidden lg:grid-cols-2">
|
||
|
|
<div class="p-8 md:p-12 lg:p-16">
|
||
|
|
<h2 class="h2-responsive mb-6 font-bold text-secondary-foreground">
|
||
|
|
{i18n.t("home.cta.titleLead")}<span
|
||
|
|
class="underline decoration-primary decoration-2 underline-offset-4"
|
||
|
|
>{i18n.t("home.cta.titleHighlight")}</span
|
||
|
|
>
|
||
|
|
</h2>
|
||
|
|
<p class="body-responsive mb-8 text-secondary-foreground/75">
|
||
|
|
{i18n.t("home.cta.description")}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="mb-10 space-y-4">
|
||
|
|
{#each CTA_DATA.features as feature, index}
|
||
|
|
<div class="flex items-start">
|
||
|
|
<div
|
||
|
|
class="mt-1 mr-3 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-primary/20"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
class="h-3 w-3 text-primary"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
stroke-width="2"
|
||
|
|
d="M5 13l4 4L19 7"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="body-responsive font-medium text-secondary-foreground">
|
||
|
|
{featureKeys[index] ? i18n.t(featureKeys[index]) : feature.text}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a
|
||
|
|
href={CTA_DATA.ctaButton.href}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
class="rounded-md bg-surface px-5 py-3 text-sm font-semibold text-text shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
|
||
|
|
>
|
||
|
|
{i18n.t("home.cta.apply")} <span aria-hidden="true">→</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="hidden h-full items-stretch justify-end pl-8 md:pl-12 lg:flex lg:pl-16">
|
||
|
|
<img
|
||
|
|
src="/descrybe_product_pages.png"
|
||
|
|
alt={i18n.t("home.cta.imageAlt")}
|
||
|
|
width="600"
|
||
|
|
height="400"
|
||
|
|
class="h-full max-w-none rounded-none object-cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|