initiation librodrome

app/components/home/SongsPreview.vue

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