// Landing, middle sections const Roles = ({ onChoose, persona }) => (
Chacun joue un rôle dans le passage de l'imagination à l'action.} sub="L'écosystème EVAD relie ceux qui coordonnent un lieu, ceux qui contribuent par leurs mains, et ceux qui financent contre des preuves d'impact mesurables.">
{Object.entries(ROLES).map(([id, r]) => { const isActive = persona === id; return (
{ e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(1,130,98,.14)'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = isActive ? '0 16px 40px ' + r.accent + '22' : '0 2px 16px rgba(1,130,98,.06)'; }}> {r.image && (
{r.name}
)}
{r.emoji}
{r.short}
{r.verb}

{r.name}

{r.desc}

{r.perks && (
    {r.perks.map((perk, i) => (
  • {perk}
    • ))}
)} {onChoose && ( )}
); })}
{onChoose && persona && (
)}
); const REGEN_STEPS = [ { L: 'R', name: 'Rêver', title: 'Rêver le monde de demain', subtitle: 'avec Luanti', color: '#018262', desc: 'Prototyper des lieux solarpunk dans un jeu en ligne collaboratif. Inventer, construire, tester des scénarios, l\'imagination est la première brique.' }, { L: 'E', name: 'Explorer', title: 'Explorer les solutions', subtitle: 'avec la Bibliothèque', color: '#3a6e8c', desc: 'Puiser dans la bibliothèque commune et open source de fiches low-tech, permaculture, gouvernance, autonomie… afin d\'adapter les techniques éprouvées à son lieu.' }, { L: 'G', name: 'Générer', title: 'Générer les fiches et tableaux de bord', subtitle: 'fiches & cockpits', color: '#c8732a', desc: 'Chaque profil génère sa fiche de présentation et son tableau de bord. La mesure est outillée, transparente, exportable.' }, { L: 'E', name: 'Entreprendre',title: 'Entreprendre les quêtes', subtitle: 'mise en ligne · financement', color: '#016b52', desc: 'Mettre les quêtes en ligne, mobiliser sa communauté, sécuriser le financement, documenter les preuves, créditer les graines.' }, { L: 'N', name: 'Nourrir', title: "Nourrir l'écosystème", subtitle: "retours d'expérience", color: '#7a6ea8', desc: 'Récolter les apprentissages, affiner les fiches, améliorer les outils. Les retours remontent dans les communs et nourrissent le parcours suivant.' }, ]; const ROLE_ROWS = [ { id: 'pilote', emoji: '🏡', name: "Pilote d'impact", short: 'Pilote', color: '#018262', tint: '#dcefe7', cells: [ 'Modélise son lieu en voxel, teste des aménagements avant les travaux réels.', 'Consulte les fiches solutions, choisit les modules adaptés à sa biorégion.', 'Génère la fiche d\'impact de son lieu, configure ses indicateurs et son cockpit.', 'Met les quêtes en ligne, anime la communauté, sécurise le financement, valide les preuves.', 'Partage les apprentissages, ajuste sa stratégie, contribue aux communs.', ], }, { id: 'batisseur', emoji: '🌿', name: "Bâtisseur d'impact", short: 'Bâtisseur', color: '#c8732a', tint: '#fce8d8', cells: [ 'Co-construit dans Luanti, explore des designs solarpunk avec la communauté.', 'Apprend la permaculture, le biomimétisme, les techniques low-tech.', 'Crée son tableau de bord personnel : graines, quêtes, coopétiteurs, biorégions.', 'Accomplit les quêtes, documente les preuves, encaisse ses graines.', 'Rédige des retours, vote au Conseil régénératif, propose des améliorations.', ], }, { id: 'semeur', emoji: '🌾', name: "Semeur d'impact", short: 'Semeur', color: '#3a6e8c', tint: '#e0eef6', cells: [ "Visualise les projets à financer en immersion 3D avant d'engager des fonds.", 'Étudie les solutions éprouvées pour cibler des investissements à fort impact.', 'Construit son rapport de portefeuille, agrège les preuves de ses dons et fonds.', "Abonde les pots, finance les modules, suit l'allocation en temps réel.", 'Diffuse les preuves, fait essaimer les bonnes pratiques entre lieux soutenus.', ], }, ]; const ParcoursMatrix = () => (
{/* Header */}
Qui fait quoi ?

La boucle REGEN, vécue par les trois rôles :

{ROLE_ROWS.map(r => ( {r.emoji}{r.short} ))}
{/* Matrix */}
{/* corner */}
{/* step headers */} {REGEN_STEPS.map((s, i) => (
{s.L} {s.name}
))} {/* rows */} {ROLE_ROWS.map(r => (
{r.emoji} {r.name}
{r.cells.map((c, i) => (
{c}
))} ))}
{/* footer note */}
⟲

Le même parcours pour les trois rôles. Personne ne capte la valeur seul : elle circule, elle nourrit le lieu, elle revient, et l'écosystème apprend.

); const RegenWheel = () => { const R = 140; const cx = 200, cy = 200; // 5 evenly distributed positions starting at top const pts = REGEN_STEPS.map((_, i) => { const a = -Math.PI / 2 + (i / 5) * Math.PI * 2; return { x: cx + Math.cos(a) * R, y: cy + Math.sin(a) * R, a }; }); return ( {/* arrow paths between consecutive points */} {pts.map((p, i) => { const next = pts[(i + 1) % pts.length]; // curve outwards a bit const mx = (p.x + next.x) / 2; const my = (p.y + next.y) / 2; const dx = mx - cx, dy = my - cy; const len = Math.hypot(dx, dy) || 1; const k = 30; const c1x = mx + (dx / len) * k, c1y = my + (dy / len) * k; // shorten endpoints to clear circles const ang = Math.atan2(next.y - p.y, next.x - p.x); const r0 = 32; const sx = p.x + Math.cos(ang) * r0; const sy = p.y + Math.sin(ang) * r0; const ex = next.x - Math.cos(ang) * r0; const ey = next.y - Math.sin(ang) * r0; return ( {/* arrow head */} ); })} {/* center label */} BOUCLE REGEN {['🏡','🌿','🌾'].map((e, i) => ( {e} ))} {/* nodes */} {pts.map((p, i) => { const s = REGEN_STEPS[i]; return ( {s.L} cy ? 52 : -38} fontFamily="Satoshi" fontSize="12" fontWeight="700" fill="#0d2b22" textAnchor="middle">{s.name} ); })} ); }; const Cycle = ({ role, onChoose }) => { const activeRow = role && ROLE_ROWS.find(r => r.id === role); return (
La Boucle REGEN, {activeRow ? <>vécue en {activeRow.name}. : 'une boucle partagée.'}} sub={activeRow ? ( <>Voici les cinq étapes telles que vous, {activeRow.name}, les traversez. La même boucle nourrit aussi les autres profils, la valeur circule. ) : ( <>REGEN est la boucle partagée par les Pilotes, les Bâtisseurs et les Semeurs. Cinq étapes pour passer de l'imagination à la régénération. )}>
{activeRow ? activeRow.emoji : '⟲'}

{activeRow ? <>Vue adaptée à votre profil {activeRow.name}. La boucle reste la même, vos actions changent. Vous êtes libre d'y entrer à n'importe quelle étape, selon là où vous en êtes. : <>Une même boucle pour les trois profils : la valeur circule entre eux et nourrit l'écosystème. Pas besoin de commencer au début : on entre dans la boucle à l'étape qui nous correspond.}

{REGEN_STEPS.map((s, i) => { const myCell = activeRow ? activeRow.cells[i] : null; return (
{ e.currentTarget.style.transform = 'translateX(2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(1,130,98,.1)'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = activeRow ? '0 6px 18px rgba(1,130,98,.08)' : '0 1px 6px rgba(1,130,98,.04)'; }}>
{s.L}
{s.title}

{s.desc}

{myCell && (
→

{myCell}

)}
); })}
); }; const RegenSection = () => (

Chaque lieu mesure son impact sur quatre axes. Pas de greenwashing : seules les preuves certifiées par le Conseil Régénératif font monter le score.

{[ ['Écologie', 78, '#4aab8f', 'biodiversité, sols, énergie, eau'], ['Social', 64, '#c8732a', 'accueil, inclusion, transmission'], ['Gouvernance', 52, '#7a6ea8', 'transparence, prise de décision'], ['Économie', 71, '#f0c84a', 'résilience, circuits courts, mutualisation'], ].map(([l, v, c, sub]) => (
{l} · {sub} {v}
))}
Ferme du Champ Vert
78/100
+12 points sur les 6 derniers mois
✓ DERNIÈRE PREUVE il y a 3 jours
Inventaire mare : 14 espèces recensées, +3 vs. 2025.
); const DevaSection = () => (
Deva accompagne, vous prenez les décisions.}>

Deva est l'esprit régénératif de l'écosystème. Il suggère des quêtes adaptées à votre lieu, repère les preuves manquantes, propose des solutions issues de la bibliothèque.

{/* Speech bubble tail toward Deva avatar */}
    {[ ['📚', 'Suggère des solutions'], ['⚡', 'Génère des quêtes'], ['✓', 'Vérifie les preuves'], ['🤲', 'Met en relation'], ].map(([e, t]) => (
  • {e} {t}
    • ))}
Deva
); const MarketplaceSection = () => { const items = [ { e: '🌾', t: 'Permaculture · 2 jours', l: 'Ferme du Champ Vert · Drôme', p: '120 G', g: 'linear-gradient(135deg,#4aab8f,#016b52)', b: 'new' }, { e: '🛖', t: 'Yourte 4 places', l: 'Tiers-lieu Les Possibles', p: '85 G', g: 'linear-gradient(135deg,#c8732a,#a85e20)', b: 'promo' }, { e: '🧱', t: 'Construction terre crue', l: 'Écolieu La Source', p: '450 G', g: 'linear-gradient(135deg,#7a6ea8,#3a6e8c)', b: 'premium' }, ]; const bcols = { new: '#4aab8f', promo: '#c8732a', premium: 'linear-gradient(135deg,#7a6ea8,#3a6e8c)' }; return (
{items.map(m => (
{m.e} {m.b}
{m.t}
{m.l}
{m.p}
))}
); }; window.Roles = Roles; window.Cycle = Cycle; window.RegenSection = RegenSection; window.DevaSection = DevaSection; window.MarketplaceSection = MarketplaceSection;