initiation librodrome

app/components/home/HeroSection.vue

@@ -0,0 +1,57 @@
+<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>