58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<section class="relative overflow-hidden section-padding">
|
|
<!-- Background gradient -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-surface-bg" />
|
|
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,hsl(12_76%_48%/0.15),transparent_70%)]" />
|
|
|
|
<!-- Content -->
|
|
<div class="container-content relative z-10 px-4">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<UiScrollReveal>
|
|
<p class="mb-3 font-mono text-sm tracking-widest text-primary uppercase">
|
|
{{ content?.hero.kicker }}
|
|
</p>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="100">
|
|
<h1 class="font-display font-extrabold leading-tight tracking-tight">
|
|
<span class="hero-title text-gradient">{{ content?.hero.title }}</span>
|
|
</h1>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="200">
|
|
<p class="mt-6 text-lg leading-relaxed text-white/60 md:text-xl">
|
|
{{ content?.hero.subtitle }}
|
|
</p>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="300">
|
|
<p class="mt-4 text-base leading-relaxed text-white/45">
|
|
{{ content?.hero.footnote }}
|
|
</p>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="400">
|
|
<div class="mt-8 flex justify-center">
|
|
<UiBaseButton variant="ghost" :to="content?.hero.cta.to">
|
|
{{ content?.hero.cta.label }}
|
|
<div class="i-lucide-arrow-right ml-2 h-4 w-4" />
|
|
</UiBaseButton>
|
|
</div>
|
|
</UiScrollReveal>
|
|
|
|
<HomeMessages />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: content } = await usePageContent('home')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-title {
|
|
font-size: clamp(2.25rem, 7vw, 4rem);
|
|
}
|
|
</style>
|