initiation librodrome

app/components/home/CooperativeVision.vue

@@ -0,0 +1,44 @@
+<template>
+  <section class="section-padding">
+    <div class="container-content">
+      <div class="mx-auto max-w-3xl text-center">
+        <UiScrollReveal>
+          <div class="i-lucide-users mx-auto h-12 w-12 text-accent/60 mb-6" />
+          <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.cooperative.kicker }}</p>
+          <h2 class="heading-section font-display font-bold tracking-tight text-white">
+            {{ content?.cooperative.title }}
+          </h2>
+        </UiScrollReveal>
+
+        <UiScrollReveal
+          v-for="(paragraph, i) in content?.cooperative.description"
+          :key="i"
+          :delay="(i + 1) * 100"
+        >
+          <p class="mt-6 text-lg leading-relaxed text-white/60" :class="{ 'mt-4': i > 0 }">
+            {{ paragraph }}
+          </p>
+        </UiScrollReveal>
+
+        <UiScrollReveal :delay="300">
+          <div class="mt-8">
+            <UiBaseButton variant="ghost" :to="content?.cooperative.cta.to">
+              {{ content?.cooperative.cta.label }}
+              <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
+            </UiBaseButton>
+          </div>
+        </UiScrollReveal>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const { data: content } = await usePageContent('home')
+</script>
+
+<style scoped>
+.heading-section {
+  font-size: clamp(1.625rem, 4vw, 2.125rem);
+}
+</style>