librodrome/app/components/home/HeroSection.vue

<template>
  <section class="relative overflow-hidden section-padding hero-section">
    <!-- Background gradient -->
    <div class="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-surface-bg" />
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,hsl(12_76%_48%/0.12),transparent_70%)]" />

    <!-- Shadok bird decoration -->
    <svg class="shadok-bird" viewBox="0 0 180 260" fill="none" aria-hidden="true">
      <ellipse cx="90" cy="100" rx="45" ry="40" fill="currentColor" opacity="0.85"/>
      <circle cx="130" cy="60" r="22" fill="currentColor" opacity="0.8"/>
      <path d="M110 85 Q125 70 128 63" stroke="currentColor" stroke-width="8" stroke-linecap="round" opacity="0.7" fill="none"/>
      <circle cx="136" cy="55" r="5" fill="currentColor" opacity="0.3"/>
      <circle cx="137" cy="54" r="2" fill="currentColor" opacity="0.6"/>
      <polygon points="150,58 175,50 152,65" fill="currentColor" opacity="0.6"/>
      <line x1="75" y1="138" x2="60" y2="230" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="105" y1="138" x2="115" y2="230" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <circle cx="66" cy="190" r="4" fill="currentColor" opacity="0.4"/>
      <circle cx="111" cy="190" r="4" fill="currentColor" opacity="0.4"/>
      <path d="M60 230 L45 233 M60 230 L55 236 M60 230 L65 235" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <path d="M115 230 L100 233 M115 230 L110 236 M115 230 L120 235" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <path d="M48 95 Q20 80 15 65" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5" fill="none"/>
      <path d="M48 100 Q22 92 10 85" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.4" fill="none"/>
      <path d="M48 105 Q25 102 12 100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3" fill="none"/>
    </svg>

    <!-- Shadok boulanger -->
    <svg class="shadok-boulanger" viewBox="0 0 240 300" fill="none" aria-hidden="true">
      <ellipse cx="120" cy="155" rx="40" ry="48" fill="currentColor" opacity="0.85"/>
      <circle cx="120" cy="92" r="25" fill="currentColor" opacity="0.8"/>
      <ellipse cx="120" cy="68" rx="18" ry="22" fill="currentColor" opacity="0.35"/>
      <rect x="105" y="78" width="30" height="5" rx="1" fill="currentColor" opacity="0.4"/>
      <path d="M110 88 Q114 84 118 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M124 88 Q128 84 132 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M112 102 Q120 108 128 102" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.35"/>
      <line x1="160" y1="145" x2="190" y2="135" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <rect x="185" y="125" width="40" height="10" rx="5" fill="currentColor" opacity="0.4" transform="rotate(-15 205 130)"/>
      <line x1="80" y1="148" x2="55" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="105" y1="200" x2="95" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="135" y1="200" x2="145" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <rect x="30" y="180" width="50" height="40" rx="4" fill="currentColor" opacity="0.25"/>
      <rect x="35" y="185" width="40" height="20" rx="2" fill="currentColor" opacity="0.15"/>
      <ellipse cx="55" cy="195" rx="12" ry="6" fill="currentColor" opacity="0.12"/>
    </svg>

    <!-- Content -->
    <div class="container-content relative z-10 px-4">
      <div class="mx-auto max-w-2xl">
        <HomeTypewriterText
          v-if="hero"
          :hero="hero"
        />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const { data: content } = await usePageContent('home')

const hero = computed(() => {
  const raw = (content.value as any)?.hero
  if (!raw) return null
  return {
    heading: Array.isArray(raw.heading) ? raw.heading : [],
    citations: Array.isArray(raw.citations) ? raw.citations : [],
    approach: raw.approach || '',
    axes: Array.isArray(raw.axes) ? raw.axes : [],
    audience: raw.audience || '',
    addressees: Array.isArray(raw.addressees) ? raw.addressees : [],
  }
})
</script>

<style scoped>
.hero-section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shadok-bird {
  position: absolute;
  right: 4%;
  top: 12%;
  width: clamp(110px, 15vw, 220px);
  opacity: 0.3;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float 8s ease-in-out infinite;
  z-index: 1;
}

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

.shadok-boulanger {
  position: absolute;
  left: 3%;
  bottom: 8%;
  width: clamp(100px, 13vw, 190px);
  opacity: 0.25;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-boulanger 9s ease-in-out infinite;
  z-index: 1;
}

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

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