326ae0ca77
- Opacités Shadoks : 0.1 → 0.25-0.35 (enfin visibles) - Tailles SVG augmentées (clamp min/max relevés de 20-40%) - Fix pumper hors écran (right: -15% → 3%) - Footer pattern : opacités internes ×3 - Fonds palettes dark éclaircis (bg 4% → 7%, surface 9% → 12%) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
104 lines
4.1 KiB
Vue
104 lines
4.1 KiB
Vue
<template>
|
|
<section class="relative overflow-hidden section-padding bg-surface-600/50">
|
|
<!-- Shadok musician: round character playing a trumpet -->
|
|
<svg class="shadok-musician" viewBox="0 0 220 280" fill="none" aria-hidden="true">
|
|
<!-- Body (ovoid) -->
|
|
<ellipse cx="100" cy="150" rx="45" ry="55" fill="currentColor" opacity="0.85"/>
|
|
<!-- Head -->
|
|
<circle cx="100" cy="80" r="28" fill="currentColor" opacity="0.8"/>
|
|
<!-- Eyes -->
|
|
<circle cx="90" cy="74" r="5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="110" cy="74" r="5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="91" cy="73" r="2" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="111" cy="73" r="2" fill="currentColor" opacity="0.5"/>
|
|
<!-- Mouth (blowing) -->
|
|
<circle cx="125" cy="86" r="4" fill="currentColor" opacity="0.3"/>
|
|
<!-- Trumpet -->
|
|
<line x1="128" y1="86" x2="185" y2="78" stroke="currentColor" stroke-width="5" stroke-linecap="round" opacity="0.7"/>
|
|
<path d="M185 68 Q200 78 185 88" stroke="currentColor" stroke-width="3" fill="currentColor" opacity="0.45"/>
|
|
<!-- Trumpet valves -->
|
|
<circle cx="155" cy="80" r="3" fill="currentColor" opacity="0.3"/>
|
|
<circle cx="165" cy="79" r="3" fill="currentColor" opacity="0.3"/>
|
|
<!-- Music notes floating -->
|
|
<circle cx="205" cy="60" r="4" fill="currentColor" opacity="0.4"/>
|
|
<line x1="209" y1="60" x2="209" y2="42" stroke="currentColor" stroke-width="1.5" opacity="0.4"/>
|
|
<circle cx="195" cy="45" r="3" fill="currentColor" opacity="0.3"/>
|
|
<line x1="198" y1="45" x2="198" y2="30" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
|
|
<!-- Legs -->
|
|
<line x1="82" y1="202" x2="72" y2="255" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="118" y1="202" x2="128" y2="255" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Feet -->
|
|
<path d="M72 255 L58 258 M72 255 L66 261" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M128 255 L114 258 M128 255 L122 261" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
|
|
</svg>
|
|
|
|
<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);
|
|
}
|
|
|
|
.shadok-musician {
|
|
position: absolute;
|
|
right: 2%;
|
|
top: 4%;
|
|
width: clamp(110px, 15vw, 210px);
|
|
opacity: 0.28;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-float-musician 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shadok-float-musician {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.shadok-musician { display: none; }
|
|
}
|
|
</style>
|