fbc2867163
- Hero : 5 lignes typographiques alternées (bold/light/accent/caps/italic), citations et axes dans un bloc discret dépliable - Icônes axes : Ğ1 custom, balance (éco don), graphe (WoT), marteau (décision), pictos plus lumineux (glow) - Menu : Autonomie en italique + grand, Événement majuscule - Page /autonomie renommée /numerique avec redirect 301 - Sceau hexagramme 益 Yì dans le layout, BookSection dans /modele-eco - Fonts Syne + Space Grotesk, dark theme éclairci - Popup GrateWizard agrandie (480×860) - Actions AxisBlock : primary côte à côte, secondary séparé dessous Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
119 lines
5.3 KiB
Vue
119 lines
5.3 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.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 : [],
|
|
}
|
|
})
|
|
</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>
|