082a17d09b
- Hero : réécriture composable timeout pur (plus de Transition callbacks) Animation fade opacity 1s très douce, lisible - Icônes : safelist UnoCSS dans nuxt.config.ts (résout pastilles vides) - Menu : mis à jour site.yml (Numérique/Économique/Citoyenne/Événement) - Blocs : card entière cliquable, zone actions séparée (border-top) - Économie du don : lié à /modele-eco (page chapitres préservée) - Tarifs de l'eau : bouton SejeteralO (localhost:3009 / collectivites.librodrome.org) - Dark theme fort : bg 220 12% 15%, surface 19%, surface-light 24% - Config SejeteralO + Glibredecision dans app.config.ts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
106 lines
2.9 KiB
Vue
106 lines
2.9 KiB
Vue
<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>
|
|
|
|
<!-- Bouton SejeteralO pour tarifs-eau -->
|
|
<div v-if="slug === 'tarifs-eau'" class="text-center mb-10">
|
|
<UiBaseButton :href="sejeteral0Url" target="_blank">
|
|
<div class="i-lucide-external-link mr-2 h-4 w-4" />
|
|
Lancer SejeteralO
|
|
</UiBaseButton>
|
|
</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 appConfig = useAppConfig()
|
|
const sejeteral0Url = (appConfig.sejeteral0 as { url: string }).url
|
|
|
|
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>
|