design : accueil en trois variantes (console, parcours, établi) + couleur par axe

- typo : Bricolage Grotesque (titres) + Atkinson Hyperlegible (texte),
  Syne gardée pour le logo seul ; une seule source de polices (Bunny)
- palettes : teinte propre à chaque axe dans les 4 ambiances ;
  pages d'axe en axis-scope, cartes sans bordure (canon design)
- accueil : console des trois curseurs (tablist clavier), boîte à outils,
  bloc format éditorial + événement + reproduction ; ?v=a|b|c|0
- numérique : carte LPK ; bouquet rendu avec statut et légende
- messages : sans bordure, deux colonnes en grand écran

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-09-28 10:15:46 +02:00
co-authored by Claude Opus 5.5
parent c3ada04e52
commit e9fce4be8f
29 changed files with 2901 additions and 56 deletions
+30 -2
View File
@@ -1,8 +1,27 @@
<template>
<div>
<HomeHeroSection />
<HomeAxisGrid @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
<HomeVariantParcours
v-if="variant === 'b'"
@open-player="showBookPlayer = true"
@open-pdf="showPdfReader = true"
/>
<HomeVariantEtabli
v-else-if="variant === 'c'"
@open-player="showBookPlayer = true"
@open-pdf="showPdfReader = true"
/>
<template v-else-if="variant === '0'">
<HomeHeroSection />
<HomeAxisGrid @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
</template>
<HomeVariantConsole
v-else
@open-player="showBookPlayer = true"
@open-pdf="showPdfReader = true"
/>
<HomeMessages />
<HomeVariantSwitch v-if="showSwitch" :current="variant" />
<BookPlayer v-model="showBookPlayer" />
<BookPdfReader v-model="showPdfReader" />
</div>
@@ -14,6 +33,15 @@ useSeoPage({
description: 'Construire une autonomie collective à l\'échelle des bassins de vie. Un livre, des chansons et des outils pour l\'émancipation.',
})
// Home variants under review: ?v=a (console, default) · ?v=b (parcours) · ?v=c (établi) · ?v=0 (previous home)
const route = useRoute()
const VARIANTS = ['a', 'b', 'c', '0'] as const
const variant = computed(() => {
const v = String(route.query.v ?? 'a')
return (VARIANTS as readonly string[]).includes(v) ? v : 'a'
})
const showSwitch = computed(() => route.query.v !== undefined)
const showBookPlayer = ref(false)
const showPdfReader = ref(false)
</script>