// Landing, Association EVAD Connect // ─── Equipe / Team ─── // REPLACE these placeholder names with real ones. const TEAM_GROUPS = [ { id: 'bureau', label: 'Bureau', role: 'Pilotage stratégique', desc: "Définit les orientations, vote les budgets, veille au respect de l'objet social.", accent: '#018262', tint: '#dcefe7', members: [ { name: 'Romain Marie Froment', role: 'Président', photo: window.__resources.teamRomain, photoPos: 'center 30%', linkedin: 'https://www.linkedin.com/in/romain-mf/', email: 'romain.mf@evad.org', message: "Depuis le premier jour, je porte une conviction : on change le monde en faisant, pas en attendant. EVAD, c'est notre terrain de jeu pour imaginer et bâtir le monde de demain, ensemble." }, { name: 'Arnaud Duvigneau', role: 'Trésorier', photo: window.__resources.teamArnaud, linkedin: 'https://www.linkedin.com/in/arnaud-duvigneau-631492186/', message: "Je veille à ce que chaque euro serve un impact réel. La transparence, c'est la première graine de la confiance." }, { name: 'Alexandre Letellier', role: 'Secrétaire', photo: window.__resources.teamAlexandre, linkedin: 'https://www.linkedin.com/in/alexandre-letellier-38448173/', message: "Mon rôle, c'est de garder le cap collectif et de fluidifier nos décisions. Une association bien tenue, c'est une association qui dure." }, ], }, { id: 'compagnons', label: "Équipe", role: 'Tech & partenariats', desc: "Font vivre les outils, l'infrastructure et les partenariats au service de l'écosystème.", accent: '#3a6e8c', tint: '#e0eef6', members: [ { name: 'Alexandra Cofano', role: 'Partenariats', photo: window.__resources.teamAlexandra, linkedin: 'https://www.linkedin.com/in/alexandra-cofano-3784107/', email: 'alexandra.cofano@evad.org', message: "Je tisse les liens entre EVAD et celles et ceux qui partagent nos valeurs et conviction. C'est grâce à la confiance et l’audace collective que naissent les plus belles réussites." }, { name: 'Pierre Gaignet', role: 'Réseau & Support IT', photo: window.__resources.teamPierre, linkedin: 'https://www.linkedin.com/in/pierre-gaignet/', message: "Je m'assure que les outils tournent et que le réseau tienne. La sobriété technique, c'est aussi de l'écologie." }, { name: 'Ismail Belqi', role: 'IA & Data', photo: window.__resources.teamIsmail, linkedin: 'https://www.linkedin.com/in/ismail-belqi-1662b5156/', message: "Je mets l'IA et la donnée au service du vivant, pas l'inverse : frugales, utiles, au plus près du terrain." }, { name: 'Jonas Chaurial', role: 'Communication', photo: window.__resources.teamJonas, linkedin: 'https://www.linkedin.com/in/jonas-chaurial/', message: "Je raconte EVAD pour donner envie d'agir. Les belles histoires sont celles qu'on écrit à plusieurs." }, ], }, { id: 'conseil', label: 'Conseil Régénératif', role: 'Chercheur·es et expert·es', desc: "Apporte un regard scientifique et expert sur les outils et les méthodes, pour rester à la hauteur des enjeux.", accent: '#7a6ea8', tint: '#e5e0f0', members: [ { name: 'Bénédicte Fumey', role: 'Économie régénérative', photo: window.__resources.teamBenedicte, linkedin: 'https://www.linkedin.com/in/benedictefumey/', email: 'benedicte.fumey@evad.org', message: "J'apporte la rigueur de l'économie régénérative pour que l'impact ne soit jamais un slogan, mais une mesure." }, { name: 'Charles Judes', role: 'Perma-comptabilité', photo: window.__resources.teamCharles, linkedin: 'https://www.linkedin.com/in/charles-judes/', message: "La perma-comptabilité, c'est compter ce qui compte vraiment : le vivant, et pas seulement l'argent." }, ], link: { href: 'https://compte.evad.org/apps/forms/s/3YxDgfMCdPGf8gPyN7bmdM4w', label: 'Rejoindre le Conseil', primary: true, external: true }, }, { id: 'membres', label: 'Membres', role: 'Communauté engagée', desc: "Personnes qui adhèrent à l'association, votent en assemblée générale et co-construisent l'écosystème.", accent: '#c8732a', tint: '#fce8d8', bigCount: '10+', bigCountLabel: 'membres', message: "Nous sommes citoyennes et citoyens des quatre coins de France, réunis par une même envie : agir concrètement pour le vivant. Chacun apporte sa pierre, et ensemble nous faisons grandir EVAD.", faces: [ window.__resources.member1, window.__resources.member2, window.__resources.member3, window.__resources.member4, window.__resources.member5, window.__resources.member6, window.__resources.member7, window.__resources.member8, ], link: { href: 'https://www.helloasso.com/associations/evad-connect/adhesions/devenir-membre-2026', label: 'Devenir membre', primary: true, external: true }, }, ]; const getInitials = (name) => { if (!name) return ''; return name.split(/\s+/).filter(Boolean).map(p => p[0]).join('').slice(0, 2).toUpperCase(); }; const Avatar = ({ name, photo, photoPos, color, tint, size = 36, ring = true }) => (
{photo ? ( {name} { e.currentTarget.style.display = 'none'; }} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: photoPos || 'center', display: 'block' }} /> ) : ( getInitials(name) )}
); const TeamCard = ({ group }) => { const isMembres = group.id === 'membres'; const visibleMembers = group.members ? group.members.slice(0, 5) : []; const extra = group.members ? Math.max(0, group.members.length - 5) : 0; return (
{ e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 16px 36px rgba(1,130,98,.12)'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 2px 16px rgba(1,130,98,.06)'; }}>
{group.role}

{group.label}

{isMembres ? group.bigCount : (group.members ? group.members.length : '')}

{group.desc}

{/* Stack of avatars removed, names appear in the list below */} {isMembres && ( { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 8px 20px rgba(200,115,42,.18)'; e.currentTarget.style.borderColor = group.accent + '55'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'transparent'; }} > {group.bigCountLabel} partout en France )} {/* Roles list (named members) */} {!isMembres && group.members && ( )} {/* Optional CTA link, internal anchor (default) or external action (primary) */} {group.link && group.link.external && ( { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = `0 12px 26px ${group.accent}55`; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = `0 8px 20px ${group.accent}40`; }} > {group.link.label} )} {group.link && !group.link.external && ( )}
); }; // ─── Member tile (people gallery item) ─── const MemberTile = ({ m, accent, tint }) => { const [open, setOpen] = React.useState(false); const expandable = !!m.message; return (
setOpen(o => !o) : undefined} role={expandable ? 'button' : undefined} tabIndex={expandable ? 0 : undefined} aria-expanded={expandable ? open : undefined} onKeyDown={expandable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(o => !o); } } : undefined} style={{ background: '#fff', border: `1px solid ${open ? accent + '55' : 'rgba(46,102,66,.1)'}`, borderRadius: 16, padding: '13px 15px', display: 'flex', flexDirection: 'column', gap: 0, boxShadow: open ? `0 12px 26px ${accent}1f` : '0 1px 8px rgba(1,130,98,.05)', cursor: expandable ? 'pointer' : 'default', transition: 'transform .2s, box-shadow .2s, border-color .2s', }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = `0 12px 26px ${accent}1f`; e.currentTarget.style.borderColor = accent + '44'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; if (!open) { e.currentTarget.style.boxShadow = '0 1px 8px rgba(1,130,98,.05)'; e.currentTarget.style.borderColor = 'rgba(46,102,66,.1)'; } }}>
{m.name} {m.linkedin && ( e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: 5, color: accent, background: 'transparent', textDecoration: 'none', flexShrink: 0, transition: 'background .15s', }} onMouseEnter={e => { e.currentTarget.style.background = accent + '22'; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }} > )} {m.email && ( e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: 5, color: accent, background: 'transparent', textDecoration: 'none', flexShrink: 0, transition: 'background .15s', }} onMouseEnter={e => { e.currentTarget.style.background = accent + '22'; }} onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }} > )}
{m.role}
{expandable && ( )}
{expandable && (
{m.message} {m.name}
)}
); }; // ─── Directory band (one group = one horizontal band) ─── const TeamBand = ({ group, last }) => { const isMembres = group.id === 'membres'; const [membersOpen, setMembersOpen] = React.useState(false); return (
{/* ── Identity column ── */}
{group.role}

{group.label}

{isMembres ? `${group.bigCount} pers.` : `${group.members ? group.members.length : 0} pers.`}

{group.desc}

{group.link && ( { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = `0 12px 26px ${group.accent}55`; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = `0 8px 20px ${group.accent}40`; }} > {group.link.label} )}
{/* ── People / content column ── */} {isMembres ? (
setMembersOpen(o => !o) : undefined} role={group.message ? 'button' : undefined} tabIndex={group.message ? 0 : undefined} aria-expanded={group.message ? membersOpen : undefined} onKeyDown={group.message ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setMembersOpen(o => !o); } } : undefined} style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignContent: 'start', cursor: group.message ? 'pointer' : 'default' }}> {group.faces.map((src, i) => ( ))}
{group.message && ( <>
{group.message} Les membres d'EVAD Connect
)}
) : group.members ? (
{group.members.map((m, i) => )}
) : null}
); }; const TeamDirectory = () => (
{TEAM_GROUPS.map((g, i) => )}
); // ─── Main section ─── const AssociationSection = ({ teamLayout = 'directory' }) => (
{/* ─── HEADER : titre à gauche, logo à droite ─── */}
Qui porte le projet ?

L'association EVAD Connect.

Un collectif réuni autour du projet EVAD et accessible à toutes et à tous, avec une gouvernance partagée.

Logo EVAD Connect
{/* ─── BLOC 1 : OBJET SOCIAL ─── */}
Faciliter la création et la gestion des lieux durables grâce à EVAD : des outils, des méthodes, une communauté.} /> Sensibiliser de manière positive et ludique à la transition écologique grâce à l'évènement EVAD&Vous.} />
{/* ─── BLOC 2 : IDENTITÉ JURIDIQUE ─── */}
{[ { e: '📜', t: '1901', d: 'Association loi 1901, à but non lucratif.', big: true }, { e: '🏅', t: 'Intérêt général', d: 'Reconnue d\'intérêt général. Dons défiscalisés jusqu\'à 66 %.' }, { e: '🤝', t: 'Gouvernance partagée', d: 'Décisions collectives, inspirées de l\'écocratie.' }, { e: '📖', t: 'Communs ouverts', d: 'Outils, méthodes et savoirs publiés sous licence Creative Commons.' }, { e: '🚪', t: 'Accessible à toutes et tous', d: 'Ouverte à toute personne qui veut s\'engager.' }, ].map((c, i) => (
{c.e}
{c.t}

{c.d}

))}
{/* ─── BLOC 3 : ÉQUIPE ─── */} {teamLayout === 'cards' ? (
{TEAM_GROUPS.map(g => )}
) : ( )} {/* ─── BLOC 4 : AGIR (Conseil Régénératif + Don + Coopétiteur) ─── */}
{ e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 18px 40px rgba(1,130,98,.42)'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 14px 32px rgba(1,130,98,.32)'; }}> Entreprises et grands donateurs, soutenez EVAD dans la durée. Construisons ensemble un partenariat de mécénat sur mesure, aligné sur vos engagements RSE.} link={{ href: "mailto:contact@evad.org?subject=Devenir%20mécène%20d'EVAD", label: "Envoyer un email" }} id="agir-mecene" /> Partager ressources, retours d'expérience et co-développement entre acteurs, pour bâtir un écosystème numérique robuste au service des territoires en transition.} link={{ href: "https://compte.evad.org/apps/forms/s/MFdHsmKzPo9PSK3KjWo4czWn", label: "Se proposer" }} id="agir-coop" />
); const BlockHeader = ({ label, title }) => (
{label}
); const ObjectCard = ({ bg, fg, chipBg, num, name, text, link, id }) => (
{num}
{name}

{text}

{link && ( { e.currentTarget.style.background = 'rgba(255,255,255,.26)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,.16)'; }}> {link.label} )}
); window.AssociationSection = AssociationSection;