initiation librodrome

app/components/home/BookPresentation.vue

@@ -0,0 +1,92 @@
+<template>
+  <section class="section-padding">
+    <div class="container-content">
+      <div class="grid items-center gap-12 md:grid-cols-2">
+        <!-- Book cover -->
+        <UiScrollReveal>
+          <div class="book-cover-wrapper">
+            <div class="book-cover-3d">
+              <img
+                :src="content?.book.coverImage"
+                :alt="content?.book.coverAlt"
+                class="book-cover-img"
+              />
+            </div>
+          </div>
+        </UiScrollReveal>
+
+        <!-- Description -->
+        <div>
+          <UiScrollReveal>
+            <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.bookPresentation.kicker }}</p>
+            <h2 class="heading-section font-display font-bold tracking-tight text-white">
+              {{ content?.bookPresentation.title }}
+            </h2>
+          </UiScrollReveal>
+
+          <UiScrollReveal
+            v-for="(paragraph, i) in content?.bookPresentation.description"
+            :key="i"
+            :delay="(i + 1) * 100"
+          >
+            <p class="mt-4 text-lg leading-relaxed text-white/60">
+              {{ paragraph }}
+            </p>
+          </UiScrollReveal>
+
+          <UiScrollReveal :delay="300">
+            <div class="mt-8">
+              <UiBaseButton :to="content?.bookPresentation.cta.to">
+                {{ content?.bookPresentation.cta.label }}
+                <div class="i-lucide-arrow-right ml-2 h-4 w-4" />
+              </UiBaseButton>
+            </div>
+          </UiScrollReveal>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const { data: content } = await usePageContent('home')
+</script>
+
+<style scoped>
+.book-cover-wrapper {
+  perspective: 800px;
+  display: flex;
+  justify-content: center;
+}
+
+.book-cover-3d {
+  aspect-ratio: 3 / 4;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  border: 1px solid hsl(20 8% 18%);
+  box-shadow:
+    0 12px 40px hsl(0 0% 0% / 0.5),
+    0 0 0 1px hsl(20 8% 15%);
+  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
+              box-shadow 0.5s ease;
+  max-width: 360px;
+}
+
+.book-cover-3d:hover {
+  transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
+  box-shadow:
+    12px 16px 48px hsl(0 0% 0% / 0.6),
+    0 0 0 1px hsl(12 76% 48% / 0.2);
+}
+
+.book-cover-img {
+  width: 200%;
+  height: 100%;
+  object-fit: cover;
+  transform: translateX(-50%);
+}
+
+.heading-section {
+  font-size: clamp(1.625rem, 4vw, 2.125rem);
+}
+</style>