97ba6dd04c
- Hero : animation fade-in/fade-out + swipe (useTypewriter composable + TypewriterText) - 3 axes : Autonomie numérique, économique, citoyenne (AxisBlock + AxisGrid) - Pages gestation avec présentations (wishBounty, trustWallet, Cloud libre) - Page /decision : plateforme Décision collective (lien Glibredecision) - Bloc événement distinct en bas des axes - Nav : Numérique / Économique / Citoyenne / Événement - Dark theme éclairci (bg 7→10%, surface 12→14%) - Suppression BookSection + GrateWizardTeaser (remplacés par AxisGrid) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
121 lines
5.4 KiB
Vue
121 lines
5.4 KiB
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.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>
|
|
|
|
<!-- 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="sentences.length"
|
|
:sentences="sentences"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TypewriterSentence } from '~/composables/useTypewriter'
|
|
|
|
const { data: content } = await usePageContent('home')
|
|
|
|
const sentences = computed<TypewriterSentence[]>(() => {
|
|
const raw = (content.value as any)?.hero?.typewriter?.sentences
|
|
if (!Array.isArray(raw)) return []
|
|
return raw.map((s: any) => ({
|
|
text: s.text,
|
|
style: s.style || 'title',
|
|
stays: !!s.stays,
|
|
separator: !!s.separator,
|
|
}))
|
|
})
|
|
</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>
|