52 lines
1.5 KiB
Vue
52 lines
1.5 KiB
Vue
<template>
|
|
<section class="section-padding bg-surface-600/50">
|
|
<div class="container-content">
|
|
<UiScrollReveal>
|
|
<div class="text-center mb-12">
|
|
<p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">{{ content?.songs.kicker }}</p>
|
|
<h2 class="heading-section font-display font-bold tracking-tight text-white">
|
|
{{ content?.songs.title }}
|
|
</h2>
|
|
<p class="mt-4 mx-auto max-w-2xl text-white/60">
|
|
{{ content?.songs.description }}
|
|
</p>
|
|
</div>
|
|
</UiScrollReveal>
|
|
|
|
<!-- Featured songs grid -->
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<UiScrollReveal
|
|
v-for="(song, i) in featuredSongs"
|
|
:key="song.id"
|
|
:delay="i * 100"
|
|
>
|
|
<SongItem :song="song" />
|
|
</UiScrollReveal>
|
|
</div>
|
|
|
|
<UiScrollReveal :delay="400">
|
|
<div class="mt-10 text-center">
|
|
<UiBaseButton variant="accent" :to="content?.songs.cta.to">
|
|
{{ content?.songs.cta.label }}
|
|
<div class="i-lucide-arrow-right ml-2 h-4 w-4" />
|
|
</UiBaseButton>
|
|
</div>
|
|
</UiScrollReveal>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: content } = await usePageContent('home')
|
|
const bookData = useBookData()
|
|
await bookData.init()
|
|
|
|
const featuredSongs = computed(() => bookData.getSongs().slice(0, 6))
|
|
</script>
|
|
|
|
<style scoped>
|
|
.heading-section {
|
|
font-size: clamp(1.625rem, 4vw, 2.125rem);
|
|
}
|
|
</style>
|