Redesign accueil : grille 3 axes, hero fade/swipe, pages gestation et décision
- 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>
This commit is contained in:
Yvv
@@ -7,11 +7,10 @@ export default defineAppConfig({
|
||||
header: {
|
||||
height: '4rem',
|
||||
nav: [
|
||||
{ label: 'Autonomie', to: '/autonomie' },
|
||||
{ label: 'Modèle éco', to: '/modele-eco' },
|
||||
{ label: 'En musique', to: '/en-musique' },
|
||||
{ label: 'Évènement', to: '/evenement' },
|
||||
{ label: 'À propos', to: '/a-propos' },
|
||||
{ label: 'Numérique', to: '/#numerique' },
|
||||
{ label: 'Économique', to: '/#economique' },
|
||||
{ label: 'Citoyenne', to: '/#citoyenne' },
|
||||
{ label: 'Événement', to: '/evenement' },
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
@@ -27,4 +26,7 @@ export default defineAppConfig({
|
||||
height: 720,
|
||||
},
|
||||
},
|
||||
libredecision: {
|
||||
url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.laplank.org',
|
||||
},
|
||||
})
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
:root {
|
||||
--color-primary: 18 80% 45%;
|
||||
--color-accent: 32 85% 50%;
|
||||
--color-bg: 20 10% 7%;
|
||||
--color-surface: 20 10% 12%;
|
||||
--color-surface-light: 20 8% 17%;
|
||||
--color-bg: 20 10% 10%;
|
||||
--color-surface: 20 10% 14%;
|
||||
--color-surface-light: 20 8% 20%;
|
||||
--color-text: 0 0% 100%;
|
||||
--color-text-muted: 0 0% 65%;
|
||||
|
||||
|
||||
231
app/components/home/AxisBlock.vue
Normal file
231
app/components/home/AxisBlock.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="axis-block">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="axis-icon" :class="`axis-icon--${color}`">
|
||||
<div :class="`i-lucide-${icon} h-6 w-6`" />
|
||||
</div>
|
||||
<h2 class="font-display text-2xl font-bold text-white">{{ title }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Items grid -->
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
class="axis-item card-surface"
|
||||
:class="{ 'axis-item--gestation': item.gestation }"
|
||||
>
|
||||
<!-- Item icon -->
|
||||
<div v-if="item.icon" class="axis-item-icon mb-3" :class="`axis-item-icon--${color}`">
|
||||
<div :class="`i-lucide-${item.icon} h-5 w-5`" />
|
||||
</div>
|
||||
|
||||
<h3 class="font-display text-lg font-semibold text-white mb-2">
|
||||
{{ item.label }}
|
||||
<span v-if="item.gestation" class="gestation-badge">
|
||||
<div class="i-lucide-flask-conical h-3 w-3" />
|
||||
En gestation
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<p class="text-sm text-white/60 leading-relaxed mb-4">{{ item.description }}</p>
|
||||
|
||||
<!-- Actions or link -->
|
||||
<div class="mt-auto">
|
||||
<!-- Multiple actions (e.g., Économie du don) -->
|
||||
<div v-if="item.actions?.length" class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="action in item.actions"
|
||||
:key="action.id"
|
||||
class="axis-action-btn"
|
||||
@click="handleAction(action.id)"
|
||||
>
|
||||
<div :class="`i-lucide-${action.icon} h-3.5 w-3.5`" />
|
||||
{{ action.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- External link -->
|
||||
<a
|
||||
v-else-if="item.href"
|
||||
:href="item.href"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="axis-link"
|
||||
>
|
||||
Découvrir
|
||||
<div class="i-lucide-external-link h-3.5 w-3.5" />
|
||||
</a>
|
||||
|
||||
<!-- Internal link -->
|
||||
<NuxtLink
|
||||
v-else-if="item.to"
|
||||
:to="item.to"
|
||||
class="axis-link"
|
||||
>
|
||||
{{ item.gestation ? 'En savoir plus' : 'Découvrir' }}
|
||||
<div class="i-lucide-arrow-right h-3.5 w-3.5" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface AxisAction {
|
||||
id: string
|
||||
label: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
interface AxisItem {
|
||||
label: string
|
||||
description: string
|
||||
to?: string
|
||||
href?: string
|
||||
gestation?: boolean
|
||||
icon?: string
|
||||
actions?: AxisAction[]
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
title: string
|
||||
icon: string
|
||||
color?: 'primary' | 'accent'
|
||||
items: AxisItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'open-player': []
|
||||
'open-pdf': []
|
||||
'launch-gratewizard': []
|
||||
}>()
|
||||
|
||||
function handleAction(id: string) {
|
||||
if (id === 'open-player') emit('open-player')
|
||||
else if (id === 'open-pdf') emit('open-pdf')
|
||||
else if (id === 'launch-gratewizard') emit('launch-gratewizard')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.axis-block {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.axis-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
border-radius: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.axis-icon--primary {
|
||||
background: hsl(var(--color-primary) / 0.12);
|
||||
border: 1px solid hsl(var(--color-primary) / 0.2);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.axis-icon--accent {
|
||||
background: hsl(var(--color-accent) / 0.12);
|
||||
border: 1px solid hsl(var(--color-accent) / 0.2);
|
||||
color: hsl(var(--color-accent));
|
||||
}
|
||||
|
||||
.axis-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.25rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(var(--color-text) / 0.08);
|
||||
background: hsl(var(--color-surface));
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.axis-item:hover {
|
||||
border-color: hsl(var(--color-text) / 0.15);
|
||||
box-shadow: 0 4px 20px hsl(var(--color-text) / 0.05);
|
||||
}
|
||||
|
||||
.axis-item--gestation {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.axis-item--gestation:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.axis-item-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.axis-item-icon--primary {
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.axis-item-icon--accent {
|
||||
background: hsl(var(--color-accent) / 0.1);
|
||||
color: hsl(var(--color-accent));
|
||||
}
|
||||
|
||||
.gestation-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: hsl(var(--color-accent) / 0.12);
|
||||
color: hsl(var(--color-accent));
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.axis-action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--color-text) / 0.7);
|
||||
background: hsl(var(--color-text) / 0.05);
|
||||
border: 1px solid hsl(var(--color-text) / 0.1);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.axis-action-btn:hover {
|
||||
color: hsl(var(--color-text));
|
||||
background: hsl(var(--color-primary) / 0.12);
|
||||
border-color: hsl(var(--color-primary) / 0.3);
|
||||
}
|
||||
|
||||
.axis-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--color-primary) / 0.8);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.axis-link:hover {
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
</style>
|
||||
145
app/components/home/AxisGrid.vue
Normal file
145
app/components/home/AxisGrid.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<section class="section-padding">
|
||||
<div class="container-content flex flex-col gap-16">
|
||||
<UiScrollReveal>
|
||||
<div id="numerique">
|
||||
<HomeAxisBlock
|
||||
v-if="axes?.numerique"
|
||||
:title="axes.numerique.title"
|
||||
:icon="axes.numerique.icon"
|
||||
color="primary"
|
||||
:items="axes.numerique.items"
|
||||
/>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
|
||||
<UiScrollReveal :delay="100">
|
||||
<div id="economique">
|
||||
<HomeAxisBlock
|
||||
v-if="axes?.economie"
|
||||
:title="axes.economie.title"
|
||||
:icon="axes.economie.icon"
|
||||
color="accent"
|
||||
:items="axes.economie.items"
|
||||
@open-player="$emit('open-player')"
|
||||
@open-pdf="$emit('open-pdf')"
|
||||
@launch-gratewizard="launchGW"
|
||||
/>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
|
||||
<UiScrollReveal :delay="200">
|
||||
<div id="citoyenne">
|
||||
<HomeAxisBlock
|
||||
v-if="axes?.politique"
|
||||
:title="axes.politique.title"
|
||||
:icon="axes.politique.icon"
|
||||
color="primary"
|
||||
:items="axes.politique.items"
|
||||
/>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
|
||||
<!-- Bloc Événement -->
|
||||
<UiScrollReveal v-if="evenement" :delay="300">
|
||||
<NuxtLink :to="evenement.to" class="event-block">
|
||||
<div class="event-content">
|
||||
<div class="event-icon">
|
||||
<div class="i-lucide-calendar-heart h-7 w-7" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="font-display text-2xl font-bold text-white sm:text-3xl">
|
||||
{{ evenement.title }}
|
||||
</h2>
|
||||
<p class="font-display text-xl text-white/70 sm:text-2xl">
|
||||
{{ evenement.subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="evenement.gestation" class="event-badge">
|
||||
<div class="i-lucide-flask-conical h-3.5 w-3.5" />
|
||||
En gestation
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineEmits<{
|
||||
'open-player': []
|
||||
'open-pdf': []
|
||||
}>()
|
||||
|
||||
const { data: content } = await usePageContent('home')
|
||||
const { launch } = useGrateWizard()
|
||||
|
||||
const axes = computed(() => (content.value as any)?.axes)
|
||||
const evenement = computed(() => (content.value as any)?.evenement)
|
||||
|
||||
function launchGW() {
|
||||
launch()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.event-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem 2.5rem;
|
||||
border-radius: 1rem;
|
||||
border: 2px solid hsl(var(--color-accent) / 0.25);
|
||||
background: linear-gradient(135deg, hsl(var(--color-accent) / 0.08), hsl(var(--color-primary) / 0.04));
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.event-block:hover {
|
||||
border-color: hsl(var(--color-accent) / 0.45);
|
||||
box-shadow: 0 0 40px hsl(var(--color-accent) / 0.08);
|
||||
}
|
||||
|
||||
.event-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.event-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: hsl(var(--color-accent) / 0.15);
|
||||
color: hsl(var(--color-accent));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.event-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
background: hsl(var(--color-accent) / 0.12);
|
||||
color: hsl(var(--color-accent));
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.event-block {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<section class="section-padding">
|
||||
<div class="container-content">
|
||||
<div class="grid items-center gap-12 md:grid-cols-2">
|
||||
<!-- Book cover -->
|
||||
<UiScrollReveal>
|
||||
<div class="book-cover-wrapper relative">
|
||||
<!-- Shadok pumper -->
|
||||
<svg class="shadok-pumper" viewBox="0 0 200 240" fill="none" aria-hidden="true">
|
||||
<ellipse cx="100" cy="130" rx="55" ry="65" fill="currentColor" opacity="0.9"/>
|
||||
<ellipse cx="100" cy="60" rx="30" ry="28" fill="currentColor" opacity="0.85"/>
|
||||
<circle cx="88" cy="54" r="6" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="112" cy="54" r="6" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="90" cy="53" r="2.5" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="114" cy="53" r="2.5" fill="currentColor" opacity="0.5"/>
|
||||
<polygon points="100,68 115,78 85,78" fill="currentColor" opacity="0.6"/>
|
||||
<line x1="80" y1="192" x2="70" y2="230" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="120" y1="192" x2="130" y2="230" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
|
||||
<line x1="70" y1="230" x2="55" y2="232" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="130" y1="230" x2="145" y2="232" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
|
||||
<line x1="155" y1="110" x2="190" y2="90" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
|
||||
<line x1="190" y1="90" x2="190" y2="120" stroke="currentColor" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
|
||||
<rect x="180" y="118" width="18" height="40" rx="3" fill="currentColor" opacity="0.4"/>
|
||||
</svg>
|
||||
<div class="book-cover-3d">
|
||||
<img
|
||||
:src="content?.book.coverImage"
|
||||
:alt="content?.book.coverAlt"
|
||||
class="book-cover-img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
|
||||
<!-- Content + CTAs -->
|
||||
<div>
|
||||
<UiScrollReveal>
|
||||
<p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.book.kicker }}</p>
|
||||
<h2 class="heading-section font-display font-bold tracking-tight text-white">
|
||||
{{ content?.book.title }}
|
||||
</h2>
|
||||
</UiScrollReveal>
|
||||
|
||||
<UiScrollReveal :delay="100">
|
||||
<p class="mt-4 text-lg leading-relaxed text-white/60">
|
||||
{{ content?.book.description }}
|
||||
</p>
|
||||
</UiScrollReveal>
|
||||
|
||||
<UiScrollReveal :delay="200">
|
||||
<div class="mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
|
||||
<UiBaseButton @click="$emit('open-player')">
|
||||
<div class="i-lucide-play mr-2 h-5 w-5" />
|
||||
{{ content?.book.cta.player }}
|
||||
</UiBaseButton>
|
||||
<UiBaseButton variant="accent" @click="$emit('open-pdf')">
|
||||
<div class="i-lucide-book-open mr-2 h-5 w-5" />
|
||||
{{ content?.book.cta.pdf }}
|
||||
</UiBaseButton>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineEmits<{
|
||||
'open-player': []
|
||||
'open-pdf': []
|
||||
}>()
|
||||
|
||||
const { data: content } = await usePageContent('home')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.book-cover-wrapper {
|
||||
perspective: 800px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.book-cover-3d {
|
||||
aspect-ratio: 3 / 4;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid hsl(var(--color-text) / 0.1);
|
||||
box-shadow:
|
||||
0 12px 40px hsl(var(--color-text) / 0.15),
|
||||
0 0 0 1px hsl(var(--color-text) / 0.08);
|
||||
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
box-shadow 0.5s ease;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.book-cover-3d:hover {
|
||||
transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
|
||||
box-shadow:
|
||||
12px 16px 48px hsl(var(--color-text) / 0.2),
|
||||
0 0 0 1px hsl(var(--color-primary) / 0.2);
|
||||
}
|
||||
|
||||
.book-cover-img {
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.heading-section {
|
||||
font-size: clamp(1.625rem, 4vw, 2.125rem);
|
||||
}
|
||||
|
||||
.shadok-pumper {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
bottom: 8%;
|
||||
width: clamp(90px, 12vw, 180px);
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-primary));
|
||||
animation: shadok-float 10s ease-in-out infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes shadok-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shadok-pumper { display: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<section class="section-padding">
|
||||
<div class="container-content">
|
||||
<UiScrollReveal>
|
||||
<div class="gw-card relative overflow-hidden">
|
||||
<!-- Shadok blob -->
|
||||
<svg class="shadok-blob" viewBox="0 0 200 180" fill="none" aria-hidden="true">
|
||||
<path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" fill="currentColor" opacity="0.12"/>
|
||||
<path d="M60 90 Q30 50 70 30 Q110 10 140 40 Q180 60 170 100 Q165 140 130 155 Q90 170 55 145 Q25 125 60 90Z" stroke="currentColor" stroke-width="1.5" opacity="0.2"/>
|
||||
<circle cx="100" cy="80" r="8" fill="currentColor" opacity="0.08"/>
|
||||
<circle cx="120" cy="110" r="6" fill="currentColor" opacity="0.06"/>
|
||||
<circle cx="80" cy="105" r="5" fill="currentColor" opacity="0.07"/>
|
||||
<circle cx="95" cy="72" r="3" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="108" cy="70" r="3" fill="currentColor" opacity="0.3"/>
|
||||
<circle cx="96" cy="71" r="1.2" fill="currentColor" opacity="0.5"/>
|
||||
<circle cx="109" cy="69" r="1.2" fill="currentColor" opacity="0.5"/>
|
||||
</svg>
|
||||
<div class="flex flex-col items-center text-center gap-4 md:flex-row md:text-left md:gap-8 relative z-1">
|
||||
<!-- Icon -->
|
||||
<div class="gw-icon-wrapper">
|
||||
<div class="i-lucide-sparkles h-8 w-8 text-amber-400" />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1">
|
||||
<span class="inline-block mb-2 rounded-full bg-amber-400/15 px-3 py-0.5 font-mono text-xs tracking-widest text-amber-400 uppercase">
|
||||
{{ content?.grateWizardTeaser.kicker }}
|
||||
</span>
|
||||
<h3 class="heading-h3 font-display font-bold text-white">
|
||||
{{ content?.grateWizardTeaser.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-white/60 md:text-base leading-relaxed">
|
||||
{{ content?.grateWizardTeaser.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="shrink-0 flex flex-col gap-2">
|
||||
<UiBaseButton :href="url" target="_blank" @click="launch">
|
||||
<div class="i-lucide-external-link mr-2 h-4 w-4" />
|
||||
{{ content?.grateWizardTeaser.cta.launch }}
|
||||
</UiBaseButton>
|
||||
<UiBaseButton variant="ghost" :to="content?.grateWizardTeaser.cta.more.to">
|
||||
{{ content?.grateWizardTeaser.cta.more.label }}
|
||||
<div class="i-lucide-arrow-right ml-2 h-4 w-4" />
|
||||
</UiBaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { url, launch } = useGrateWizard()
|
||||
const { data: content } = await usePageContent('home')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gw-card {
|
||||
border: 1px solid hsl(40 80% 50% / 0.2);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem 2rem;
|
||||
background: linear-gradient(135deg, hsl(40 80% 50% / 0.05), hsl(40 80% 50% / 0.02));
|
||||
box-shadow: 0 0 40px hsl(40 80% 50% / 0.05);
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.gw-card:hover {
|
||||
border-color: hsl(40 80% 50% / 0.35);
|
||||
box-shadow: 0 0 60px hsl(40 80% 50% / 0.1);
|
||||
}
|
||||
|
||||
.heading-h3 {
|
||||
font-size: clamp(1.25rem, 3vw, 1.625rem);
|
||||
}
|
||||
|
||||
.gw-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: hsl(40 80% 50% / 0.1);
|
||||
border: 1px solid hsl(40 80% 50% / 0.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shadok-blob {
|
||||
position: absolute;
|
||||
right: -2%;
|
||||
top: -20%;
|
||||
width: clamp(120px, 16vw, 220px);
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
color: hsl(var(--color-accent));
|
||||
animation: shadok-drift 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shadok-drift {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-8px) rotate(3deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.shadok-blob { display: none; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section class="relative overflow-hidden section-padding">
|
||||
<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%)]" />
|
||||
@@ -23,7 +23,7 @@
|
||||
<path d="M48 105 Q25 102 12 100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3" fill="none"/>
|
||||
</svg>
|
||||
|
||||
<!-- Shadok boulanger: character with oven and bread -->
|
||||
<!-- 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"/>
|
||||
@@ -44,53 +44,39 @@
|
||||
|
||||
<!-- 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 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-title {
|
||||
font-size: clamp(2.25rem, 7vw, 4rem);
|
||||
.hero-section {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.shadok-bird {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="mt-16">
|
||||
<section class="section-padding">
|
||||
<div class="container-content mx-auto max-w-3xl">
|
||||
<!-- Formulaire -->
|
||||
<UiScrollReveal :delay="500">
|
||||
<UiScrollReveal>
|
||||
<div class="message-form-card">
|
||||
<h3 class="font-display text-lg font-bold text-white mb-4">Laisser un message</h3>
|
||||
|
||||
@@ -45,7 +46,7 @@
|
||||
</UiScrollReveal>
|
||||
|
||||
<!-- 2 derniers messages publiés -->
|
||||
<UiScrollReveal v-if="messages?.length" :delay="600">
|
||||
<UiScrollReveal v-if="messages?.length" :delay="100">
|
||||
<div class="mt-8 space-y-4">
|
||||
<h3 class="font-display text-lg font-bold text-white/80 text-center">Derniers messages</h3>
|
||||
<div v-for="msg in messages.slice(0, 2)" :key="msg.id" class="message-card">
|
||||
@@ -64,7 +65,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</UiScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
195
app/components/home/TypewriterText.vue
Normal file
195
app/components/home/TypewriterText.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<div class="hero-text" @click="handleClick">
|
||||
<!-- Locked sentences (stays: true, already shown) -->
|
||||
<TransitionGroup name="lock">
|
||||
<div v-for="(item, i) in lockedSentences" :key="`lock-${i}`">
|
||||
<div v-if="item.separator" class="hero-separator" />
|
||||
<p
|
||||
v-else
|
||||
class="hero-line"
|
||||
:class="styleClass(item.style)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</p>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
<!-- Active sentence — fade + swipe -->
|
||||
<div class="hero-active-zone">
|
||||
<Transition
|
||||
name="sentence"
|
||||
@after-enter="onEntered"
|
||||
@after-leave="onLeft"
|
||||
>
|
||||
<p
|
||||
v-if="showActive && currentSentence"
|
||||
:key="currentIndex"
|
||||
class="hero-line"
|
||||
:class="styleClass(currentSentence.style)"
|
||||
>
|
||||
{{ currentSentence.text }}
|
||||
</p>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SEO / no-JS fallback -->
|
||||
<template #fallback>
|
||||
<div class="hero-text">
|
||||
<p
|
||||
v-for="(sentence, i) in stayingSentences"
|
||||
:key="i"
|
||||
class="hero-line"
|
||||
:class="styleClass(sentence.style)"
|
||||
>
|
||||
{{ sentence.text }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TypewriterSentence } from '~/composables/useTypewriter'
|
||||
|
||||
const props = defineProps<{
|
||||
sentences: TypewriterSentence[]
|
||||
}>()
|
||||
|
||||
const stayingSentences = computed(() => props.sentences.filter(s => s.stays))
|
||||
|
||||
const {
|
||||
currentIndex,
|
||||
currentSentence,
|
||||
showActive,
|
||||
lockedSentences,
|
||||
isComplete,
|
||||
onEntered,
|
||||
onLeft,
|
||||
start,
|
||||
skipToEnd,
|
||||
} = useTypewriter(props.sentences)
|
||||
|
||||
onMounted(() => {
|
||||
start()
|
||||
})
|
||||
|
||||
function handleClick() {
|
||||
if (!isComplete.value) {
|
||||
skipToEnd()
|
||||
}
|
||||
}
|
||||
|
||||
function styleClass(style?: string) {
|
||||
if (style === 'citation') return 'hero-line--citation'
|
||||
if (style === 'text') return 'hero-line--body'
|
||||
return 'hero-line--title'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero-text {
|
||||
text-align: center;
|
||||
min-height: 14rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Lines ── */
|
||||
|
||||
.hero-line {
|
||||
margin: 0;
|
||||
padding: 0.3em 0;
|
||||
font-family: var(--font-display);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.hero-line--title {
|
||||
font-weight: 700;
|
||||
font-size: clamp(1.4rem, 4vw, 2.4rem);
|
||||
color: hsl(var(--color-text));
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.hero-line--citation {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: clamp(1.1rem, 3vw, 1.6rem);
|
||||
color: hsl(var(--color-text) / 0.75);
|
||||
max-width: 38ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.hero-line--body {
|
||||
font-weight: 400;
|
||||
font-size: clamp(1rem, 2.5vw, 1.35rem);
|
||||
color: hsl(var(--color-text) / 0.6);
|
||||
max-width: 44ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── Separator ── */
|
||||
|
||||
.hero-separator {
|
||||
width: 4rem;
|
||||
height: 2px;
|
||||
margin: 1.25rem auto;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
hsl(var(--color-primary) / 0.5),
|
||||
transparent
|
||||
);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* ── Active zone ── */
|
||||
|
||||
.hero-active-zone {
|
||||
min-height: 4.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Active sentence transition (fade + swipe) ── */
|
||||
|
||||
.sentence-enter-active {
|
||||
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.sentence-leave-active {
|
||||
transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0),
|
||||
transform 0.6s cubic-bezier(0.7, 0, 0.84, 0);
|
||||
}
|
||||
|
||||
.sentence-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
|
||||
.sentence-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-18px);
|
||||
}
|
||||
|
||||
/* ── Locked sentences transition ── */
|
||||
|
||||
.lock-enter-active {
|
||||
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
|
||||
}
|
||||
|
||||
.lock-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
|
||||
.lock-move {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
108
app/composables/useTypewriter.ts
Normal file
108
app/composables/useTypewriter.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
export interface TypewriterSentence {
|
||||
text: string
|
||||
style?: 'title' | 'citation' | 'text'
|
||||
stays?: boolean
|
||||
separator?: boolean
|
||||
}
|
||||
|
||||
interface SequenceOptions {
|
||||
holdMs?: number
|
||||
gapMs?: number
|
||||
}
|
||||
|
||||
export function useTypewriter(sentences: TypewriterSentence[], options: SequenceOptions = {}) {
|
||||
const {
|
||||
holdMs = 2400,
|
||||
gapMs = 300,
|
||||
} = options
|
||||
|
||||
const currentIndex = ref(-1)
|
||||
const showActive = ref(false)
|
||||
const lockedSentences = ref<TypewriterSentence[]>([])
|
||||
const isComplete = ref(false)
|
||||
|
||||
let holdTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
const currentSentence = computed(() =>
|
||||
currentIndex.value >= 0 && currentIndex.value < sentences.length
|
||||
? sentences[currentIndex.value]
|
||||
: null,
|
||||
)
|
||||
|
||||
function clearTimer() {
|
||||
if (holdTimer) {
|
||||
clearTimeout(holdTimer)
|
||||
holdTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
function showNext() {
|
||||
const nextIdx = currentIndex.value + 1
|
||||
if (nextIdx >= sentences.length) {
|
||||
isComplete.value = true
|
||||
return
|
||||
}
|
||||
|
||||
currentIndex.value = nextIdx
|
||||
const sentence = sentences[nextIdx]
|
||||
|
||||
if (sentence.separator) {
|
||||
lockedSentences.value = [...lockedSentences.value, { text: '', separator: true }]
|
||||
}
|
||||
|
||||
showActive.value = true
|
||||
}
|
||||
|
||||
/** Called by component via @after-enter on Transition */
|
||||
function onEntered() {
|
||||
holdTimer = setTimeout(() => {
|
||||
showActive.value = false
|
||||
}, holdMs)
|
||||
}
|
||||
|
||||
/** Called by component via @after-leave on Transition */
|
||||
function onLeft() {
|
||||
const sentence = sentences[currentIndex.value]
|
||||
if (sentence?.stays) {
|
||||
lockedSentences.value = [...lockedSentences.value, { ...sentence }]
|
||||
}
|
||||
setTimeout(showNext, gapMs)
|
||||
}
|
||||
|
||||
function start() {
|
||||
showNext()
|
||||
}
|
||||
|
||||
function skipToEnd() {
|
||||
clearTimer()
|
||||
showActive.value = false
|
||||
|
||||
const locked: TypewriterSentence[] = []
|
||||
for (const sentence of sentences) {
|
||||
if (sentence.separator) {
|
||||
locked.push({ text: '', separator: true })
|
||||
}
|
||||
if (sentence.stays) {
|
||||
locked.push({ ...sentence })
|
||||
}
|
||||
}
|
||||
|
||||
lockedSentences.value = locked
|
||||
currentIndex.value = sentences.length - 1
|
||||
isComplete.value = true
|
||||
}
|
||||
|
||||
onUnmounted(clearTimer)
|
||||
|
||||
return {
|
||||
currentIndex: readonly(currentIndex),
|
||||
currentSentence,
|
||||
showActive,
|
||||
lockedSentences: readonly(lockedSentences),
|
||||
isComplete: readonly(isComplete),
|
||||
onEntered,
|
||||
onLeft,
|
||||
start,
|
||||
skipToEnd,
|
||||
}
|
||||
}
|
||||
104
app/pages/decision.vue
Normal file
104
app/pages/decision.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="section-padding">
|
||||
<div class="container-content">
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-12">
|
||||
<div class="decision-icon mx-auto mb-6">
|
||||
<div class="i-lucide-scale h-10 w-10" />
|
||||
</div>
|
||||
<h1 class="font-display text-4xl font-bold text-white mb-4">Plateforme Décision</h1>
|
||||
<p class="text-lg text-white/60 leading-relaxed">
|
||||
Se donner les moyens de la décision collective.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="grid gap-4 sm:grid-cols-2 mb-12">
|
||||
<div v-for="feature in features" :key="feature.title" class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<div :class="`i-lucide-${feature.icon} h-5 w-5`" />
|
||||
</div>
|
||||
<h3 class="font-display font-semibold text-white mb-1">{{ feature.title }}</h3>
|
||||
<p class="text-sm text-white/50 leading-relaxed">{{ feature.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
|
||||
<UiBaseButton :href="decisionUrl" target="_blank">
|
||||
<div class="i-lucide-external-link mr-2 h-4 w-4" />
|
||||
Ouvrir Glibredecision
|
||||
</UiBaseButton>
|
||||
<UiBaseButton variant="ghost" to="/">
|
||||
<div class="i-lucide-arrow-left mr-2 h-4 w-4" />
|
||||
Retour à l'accueil
|
||||
</UiBaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({ title: 'Décision collective' })
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
const decisionUrl = (appConfig.libredecision as { url: string }).url
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: 'vote',
|
||||
title: 'Décisions on-chain',
|
||||
text: 'Des décisions transparentes et vérifiables, inscrites sur la blockchain.',
|
||||
},
|
||||
{
|
||||
icon: 'scroll-text',
|
||||
title: 'Les Mandats',
|
||||
text: 'Formaliser et suivre les mandats confiés aux personnes désignées.',
|
||||
},
|
||||
{
|
||||
icon: 'file-text',
|
||||
title: 'Documents de référence',
|
||||
text: 'Les textes fondateurs et documents qui encadrent la prise de décision.',
|
||||
},
|
||||
{
|
||||
icon: 'git-branch',
|
||||
title: 'Les Protocoles',
|
||||
text: 'Les règles et processus qui structurent la décision collective.',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.decision-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 1rem;
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
border: 1px solid hsl(var(--color-primary) / 0.2);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 1.25rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(var(--color-text) / 0.08);
|
||||
background: hsl(var(--color-surface));
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
color: hsl(var(--color-primary));
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
94
app/pages/gestation/[slug].vue
Normal file
94
app/pages/gestation/[slug].vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="section-padding">
|
||||
<div class="container-content">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="gestation-icon mx-auto mb-6">
|
||||
<div class="i-lucide-flask-conical h-12 w-12 text-accent" />
|
||||
</div>
|
||||
|
||||
<h1 class="font-display text-3xl font-bold text-white mb-4 text-center">
|
||||
{{ item?.label ?? 'En gestation' }}
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-white/60 leading-relaxed mb-8 text-center">
|
||||
{{ item?.description ?? 'Cette initiative est en cours de préparation.' }}
|
||||
</p>
|
||||
|
||||
<!-- Présentation spécifique -->
|
||||
<div v-if="item?.presentation" class="presentation-card mb-10">
|
||||
<div class="presentation-icon">
|
||||
<div class="i-lucide-rocket h-5 w-5" />
|
||||
</div>
|
||||
<h2 class="font-display text-xl font-semibold text-white mb-2">
|
||||
{{ item.presentation.title }}
|
||||
</h2>
|
||||
<p class="text-white/60 leading-relaxed">
|
||||
{{ item.presentation.text }}
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-white/30 italic">En cours de développement.</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<UiBaseButton variant="ghost" to="/">
|
||||
<div class="i-lucide-arrow-left mr-2 h-4 w-4" />
|
||||
Retour à l'accueil
|
||||
</UiBaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug as string
|
||||
|
||||
const { data: content } = await usePageContent('home')
|
||||
|
||||
const item = computed(() => {
|
||||
const axes = (content.value as any)?.axes
|
||||
if (!axes) return null
|
||||
for (const axis of Object.values(axes) as any[]) {
|
||||
for (const it of axis.items ?? []) {
|
||||
if (it.to === `/gestation/${slug}`) return it
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: item.value?.label ?? `En gestation — ${slug}`,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gestation-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 1rem;
|
||||
background: hsl(var(--color-accent) / 0.1);
|
||||
border: 1px solid hsl(var(--color-accent) / 0.2);
|
||||
}
|
||||
|
||||
.presentation-card {
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid hsl(var(--color-primary) / 0.15);
|
||||
background: hsl(var(--color-surface));
|
||||
}
|
||||
|
||||
.presentation-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
color: hsl(var(--color-primary));
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<HomeHeroSection />
|
||||
<HomeBookSection @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
|
||||
<HomeGrateWizardTeaser />
|
||||
<HomeAxisGrid @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
|
||||
<HomeMessages />
|
||||
<BookPlayer v-model="showBookPlayer" />
|
||||
<BookPdfReader v-model="showPdfReader" />
|
||||
</div>
|
||||
|
||||
@@ -1,62 +1,109 @@
|
||||
hero:
|
||||
kicker: Autonomie collective des bassins de vie
|
||||
title: Le librodrome
|
||||
subtitle: Créer une économie ? Couvrir nos besoins pour vivre et nourrir nos plaisirs vivre. Ouverture d'une plateforme
|
||||
de productions collectives, pour facilier la création d'équipes, la préparation et la réalisation de ces
|
||||
productions.
|
||||
footnote: Ce projet est ouvert. Chaque personne qui souhaite se mobiliser pour participer à une production est invitée à
|
||||
laisser un message. Pour poser des questions ou laisser un mail.
|
||||
cta:
|
||||
label: En savoir plus sur le projet
|
||||
to: /a-propos
|
||||
book:
|
||||
kicker: Modèle économique
|
||||
title: Une économie du don — enfin concevable
|
||||
description: Un livre et quelques chansons pour une proposition de modèle économique fondé sur le don. Le livre est
|
||||
accompagné de chansons qui le racontent, un peu autrement.
|
||||
coverImage: /images/book-cover-spread.jpg
|
||||
coverAlt: Couverture — Une économie du don, enfin concevable
|
||||
cta:
|
||||
player: Présentation musicale
|
||||
pdf: Lecture du livre
|
||||
bookPresentation:
|
||||
kicker: Le livre
|
||||
title: Une économie du don — enfin concevable
|
||||
description:
|
||||
- Ce livre explore les fondements d'une économie fondée sur le don.
|
||||
- Les chansons prolongent le propos en suivant le cours des chapitres, pour le rendre plus accessible. Elles créent
|
||||
une invitation inédite et immersive à la lecture.
|
||||
cta:
|
||||
label: Sommaire
|
||||
to: /modele-eco
|
||||
songs:
|
||||
kicker: Les chansons
|
||||
title: Des chansons qui racontent le livre, du moins une partie
|
||||
description: Chaque chanson est un prolongement musical d'un ou deux chapitres. Naturellement, les chansons ne
|
||||
restituent pas l'intégralité du livre.
|
||||
cta:
|
||||
label: Voir toutes les chansons
|
||||
to: /en-musique
|
||||
cooperative:
|
||||
icon: users
|
||||
kicker: Vision
|
||||
title: Une plateforme coopérative
|
||||
description:
|
||||
- L'ouverture de cette page librodrome est le premier pas vers une plateforme de productions collectives. Un espace
|
||||
où les créateurs, producteurs et toute personne mobilisée, contribuent ensemble à faire émerger des projets de
|
||||
productions. La plateforme sera utile pour leur réalisation effective, le suivi et le retour d'expérience.
|
||||
- Ce projet est ouvert. Chaque contribution enrichit l'ensemble. Rejoignez-nous pour construire une autonomie
|
||||
collective à l'échelle des bassins de vie.
|
||||
cta:
|
||||
label: En savoir plus
|
||||
to: /a-propos
|
||||
grateWizardTeaser:
|
||||
kicker: Estimer les valeurs en DU - Les coefficients relatifs
|
||||
title: grateWizard
|
||||
description: Une webapp pour calculer des coefficients relatifs et estimer les valeurs dans une économie du don.
|
||||
Relatifs à la moyenne, à l'ancienneté, au solde net, au volume disponible.
|
||||
cta:
|
||||
launch: Lancer l'appli
|
||||
more:
|
||||
label: En savoir plus
|
||||
to: /gratewizard
|
||||
typewriter:
|
||||
sentences:
|
||||
- text: "Construire une autonomie collective"
|
||||
style: title
|
||||
stays: false
|
||||
- text: "à l'échelle des bassins de vie."
|
||||
style: title
|
||||
stays: false
|
||||
- text: "Pousser les curseurs de l'autonomie numérique, économique et politique — et s'en donner les moyens"
|
||||
style: title
|
||||
stays: true
|
||||
- text: "Il s'agit d'émancipation"
|
||||
style: citation
|
||||
stays: false
|
||||
- text: "Les trois dimensions qui nous émancipent sont le numérique, l'économie et le politique"
|
||||
style: citation
|
||||
stays: false
|
||||
- text: "Ce sont les 3 axes de l'espace dans lequel nous naviguons"
|
||||
style: citation
|
||||
stays: true
|
||||
separator: true
|
||||
- text: "Dans chaque dimension, nous adressons ce qui est le plus en amont"
|
||||
style: text
|
||||
stays: false
|
||||
- text: "Pour le numérique, c'est le code source"
|
||||
style: text
|
||||
stays: false
|
||||
- text: "Pour l'économie, c'est la création monétaire"
|
||||
style: text
|
||||
stays: false
|
||||
- text: "Pour le politique, c'est la prise de décision — comment on choisit, comment on décide"
|
||||
style: text
|
||||
stays: true
|
||||
|
||||
axes:
|
||||
numerique:
|
||||
title: Autonomie numérique
|
||||
icon: monitor
|
||||
items:
|
||||
- label: Logiciel libre
|
||||
description: Maîtriser le code source, c'est maîtriser l'outil. Le logiciel libre est la base de l'autonomie numérique.
|
||||
to: /gestation/logiciel-libre
|
||||
gestation: true
|
||||
icon: code-2
|
||||
presentation:
|
||||
title: wishBounty
|
||||
text: Application pour le financement fléché des développements.
|
||||
- label: Authentification — WoT
|
||||
description: Une toile de confiance décentralisée, sans autorité centrale. Chaque identité est certifiée par ses pairs.
|
||||
to: /gestation/authentification-wot
|
||||
gestation: true
|
||||
icon: fingerprint
|
||||
presentation:
|
||||
title: trustWallet
|
||||
text: Gestionnaire de confiances.
|
||||
- label: Cloud libre
|
||||
description: Héberger ses propres services pour ne dépendre de personne. Serveurs, noms de domaine, infrastructure.
|
||||
to: /gestation/cloud-libre
|
||||
gestation: true
|
||||
icon: cloud
|
||||
presentation:
|
||||
title: Bouquet de services
|
||||
text: "Un bouquet de services complet : Drive, Visio, Forum, Wiki, CMS. IA frugale localisée."
|
||||
economie:
|
||||
title: Autonomie économique
|
||||
icon: coins
|
||||
items:
|
||||
- label: Monnaie libre
|
||||
description: "La Ğ1 (June) : une monnaie co-créée par ses membres, sans dette ni intérêt. Le dividende universel comme base."
|
||||
href: https://monnaie-libre.fr
|
||||
icon: circle-dollar-sign
|
||||
- label: Économie du don
|
||||
description: Un livre et des chansons pour une proposition de modèle économique fondé sur le don.
|
||||
icon: heart-handshake
|
||||
actions:
|
||||
- id: open-player
|
||||
label: Présentation musicale
|
||||
icon: play
|
||||
- id: open-pdf
|
||||
label: Lecture du livre
|
||||
icon: book-open
|
||||
- id: launch-gratewizard
|
||||
label: grateWizard
|
||||
icon: sparkles
|
||||
- label: Productions collectives
|
||||
description: Une plateforme pour faciliter la création d'équipes et la réalisation de productions à l'échelle des bassins de vie.
|
||||
to: /gestation/productions-collectives
|
||||
gestation: true
|
||||
icon: users
|
||||
politique:
|
||||
title: Autonomie citoyenne
|
||||
icon: landmark
|
||||
items:
|
||||
- label: Décision collective
|
||||
description: Se donner les moyens de la décision collective.
|
||||
to: /decision
|
||||
icon: scale
|
||||
- label: Tarifs de l'eau
|
||||
description: Application pour obtenir justice sociale et incitation dynamique à la réduction. Permet de confier la décision à la population des communes.
|
||||
to: /gestation/tarifs-eau
|
||||
gestation: true
|
||||
icon: droplets
|
||||
|
||||
evenement:
|
||||
title: Le librodrome,
|
||||
subtitle: c'est également un événement.
|
||||
to: /evenement
|
||||
gestation: true
|
||||
|
||||
Reference in New Issue
Block a user