librodrome/app/components/home/BookPresentation.vue

<template>
  <section class="relative overflow-hidden section-padding">
    <!-- Shadok thinker: ovoid character sitting, hand on chin, thinking bubble -->
    <svg class="shadok-thinker" viewBox="0 0 220 280" fill="none" aria-hidden="true">
      <!-- Body (seated, leaning forward) -->
      <ellipse cx="100" cy="160" rx="42" ry="50" fill="currentColor" opacity="0.85"/>
      <!-- Head (tilted) -->
      <ellipse cx="110" cy="95" rx="25" ry="24" fill="currentColor" opacity="0.8"/>
      <!-- Neck -->
      <path d="M100 118 Q105 110 108 105" stroke="currentColor" stroke-width="6" stroke-linecap="round" opacity="0.6" fill="none"/>
      <!-- Eyes (contemplative) -->
      <circle cx="103" cy="90" r="4.5" fill="currentColor" opacity="0.2"/>
      <circle cx="120" cy="90" r="4.5" fill="currentColor" opacity="0.2"/>
      <circle cx="104" cy="89" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="121" cy="89" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Arm to chin -->
      <line x1="140" y1="145" x2="130" y2="108" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Hand on chin -->
      <circle cx="130" cy="105" r="5" fill="currentColor" opacity="0.45"/>
      <!-- Seated legs (crossed/bent) -->
      <path d="M75 205 Q60 230 50 240" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6" fill="none"/>
      <path d="M120 205 Q140 220 145 240" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6" fill="none"/>
      <!-- Feet -->
      <path d="M50 240 L38 243 M50 240 L45 246" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <path d="M145 240 L133 243 M145 240 L140 246" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <!-- Thinking bubbles -->
      <circle cx="150" cy="78" r="5" fill="currentColor" opacity="0.3"/>
      <circle cx="165" cy="62" r="8" fill="currentColor" opacity="0.25"/>
      <circle cx="185" cy="42" r="12" fill="currentColor" opacity="0.2"/>
    </svg>

    <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(var(--color-text) / 0.1);
  box-shadow:
    0 12px 40px hsl(var(--color-text) / 0.15),
    0 0 0 1px hsl(var(--color-text) / 0.08);
  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(var(--color-text) / 0.2),
    0 0 0 1px hsl(var(--color-primary) / 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);
}

.shadok-thinker {
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: clamp(110px, 14vw, 200px);
  opacity: 0.28;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-thinker 10s ease-in-out infinite;
}

@keyframes shadok-float-thinker {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 768px) {
  .shadok-thinker { display: none; }
}
</style>