ac4aff4985
- Nettoyage paroles : suppression instructions Suno AI, corrections prononciation (11 fichiers) - 4 palettes saisonnières (Automne/Hiver dark, Printemps/Été light) avec sélecteur - Typographie modernisée : Outfit (display) + Inter (sans) remplacent Syne + Space Grotesk - Styles adaptatifs : CSS vars pour couleurs, overrides light mode complets - Mini-player : bouton Next ajouté, flèche expand plus visible - BookPlayer : fix scroll mode paginé, croix de fermeture visible - Illustrations Shadoks inline SVG dans 11 composants/pages - Suppression soulignés navigation, reset boutons, bordures propres Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
98 lines
3.9 KiB
Vue
98 lines
3.9 KiB
Vue
<template>
|
|
<section class="relative overflow-hidden section-padding">
|
|
<!-- 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.15),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>
|
|
|
|
<!-- Content -->
|
|
<div class="container-content relative z-10 px-4">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<UiScrollReveal>
|
|
<p class="mb-3 font-mono text-sm tracking-widest text-primary uppercase">
|
|
{{ content?.hero.kicker }}
|
|
</p>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="100">
|
|
<h1 class="font-display font-extrabold leading-tight tracking-tight">
|
|
<span class="hero-title text-gradient">{{ content?.hero.title }}</span>
|
|
</h1>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="200">
|
|
<p class="mt-6 text-lg leading-relaxed text-white/60 md:text-xl">
|
|
{{ content?.hero.subtitle }}
|
|
</p>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="300">
|
|
<p class="mt-4 text-base leading-relaxed text-white/45">
|
|
{{ content?.hero.footnote }}
|
|
</p>
|
|
</UiScrollReveal>
|
|
|
|
<UiScrollReveal :delay="400">
|
|
<div class="mt-8 flex justify-center">
|
|
<UiBaseButton variant="ghost" :to="content?.hero.cta.to">
|
|
{{ content?.hero.cta.label }}
|
|
<div class="i-lucide-arrow-right ml-2 h-4 w-4" />
|
|
</UiBaseButton>
|
|
</div>
|
|
</UiScrollReveal>
|
|
|
|
<HomeMessages />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: content } = await usePageContent('home')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-title {
|
|
font-size: clamp(2.25rem, 7vw, 4rem);
|
|
}
|
|
|
|
.shadok-bird {
|
|
position: absolute;
|
|
right: 5%;
|
|
top: 15%;
|
|
width: clamp(80px, 12vw, 160px);
|
|
opacity: 0.12;
|
|
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); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.shadok-bird { display: none; }
|
|
}
|
|
</style>
|