45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<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>
|