gaea21_v2/gaea21-v2-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cd6a66893a9a5250b41e82fa7c1de8e1d400366d
gaea21-v2-web/assets/components/Methodology.jsx
MohamedLoum1001 d3b9318dee feat(ui): modularisation du css et fidélisation des composants à la maquette figma 
- découpage du css par composant (navbar, hero, footer, global)
- ajustement pixel-perfect du footer (newsletter full-bleed, alignements, typographies)
- documentation et commentaires détaillés du code react et css
2026-09-23 17:27:05 +02:00

259 lines
14 KiB
JavaScript
Raw Blame History

// 1. IMPORTATION DE REACT
import React from 'react';
/**
* 2. TABLEAU DE DONNÉES STATIQUE : LES 6 ÉTAPES DE LA MÉTHODOLOGIE
* Externaliser les étapes hors du composant évite de recréer ce tableau
* en mémoire à chaque nouveau cycle de rendu (re-render) du composant.
*/
const STEPS = [
{
number: '01',
title: 'Diagnostiquer',
description: 'Comprendre les besoins humains, professionnels et systémiques.',
// Icône SVG : Loupe d'analyse / audit
icon: (
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="7" />
<path strokeLinecap="round" strokeLinejoin="round" d="m20 20-3.5-3.5" />
</svg>
),
},
{
number: '02',
title: 'Structurer',
description: 'Créer un cadre, des outils et des trajectoires cohérentes.',
// Icône SVG : Arborescence / Organigramme hiérarchique
icon: (
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
<rect x="9" y="3" width="6" height="5" rx="1" />
<rect x="3" y="16" width="6" height="5" rx="1" />
<rect x="15" y="16" width="6" height="5" rx="1" />
<path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4m0 0H6v4m6-4h6v4" />
</svg>
),
},
{
number: '03',
title: 'Appliquer',
description: 'Travailler sur des projets réels dans un environnement collaboratif.',
// Icône SVG : Outil clé / mise en œuvre pratique
icon: (
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d="m14.7 6.3 3 3-9.4 9.4H5.3v-3l9.4-9.4z" />
<path strokeLinecap="round" strokeLinejoin="round" d="m13 8 3 3" />
</svg>
),
},
{
number: '04',
title: 'Transformer',
description: 'Développer autonomie, compétences et stabilité.',
// Icône SVG : Pousse végétale / croissance durable
icon: (
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21V11" />
<path strokeLinecap="round" strokeLinejoin="round" d="M12 11c0-4 4-7 8-7-1 4-4 7-8 7z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M12 13c0-3.5-3.5-6-7-6 .9 3.5 3.5 6 7 6z" />
</svg>
),
},
{
number: '05',
title: 'Connecter',
description: 'Relier humain, économie, territoires et opportunités.',
// Icône SVG : Maillons de chaîne / réseau
icon: (
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path strokeLinecap="round" strokeLinejoin="round" d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
),
},
{
number: '06',
title: 'Régénérer',
description: 'Créer des boucles de valeur autonomes et durables.',
// Icône SVG : Flèches d'économie circulaire / régénération
icon: (
<svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth="2.2" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 0 0-15.5-6.36L3 8" />
<path strokeLinecap="round" strokeLinejoin="round" d="M3 3v5h5" />
<path strokeLinecap="round" strokeLinejoin="round" d="M3 12a9 9 0 0 0 15.5 6.36L21 16" />
<path strokeLinecap="round" strokeLinejoin="round" d="M16 16h5v5" />
</svg>
),
},
];
/**
* 3. COMPOSANT PRINCIPAL : Methodology
* Présente la section "Comment ça fonctionne ?" en deux parties :
* - Haut : Titre + descriptif à gauche (4 cols) et les 6 étapes à droite (8 cols).
* - Bas : Bandeau beige avec statistiques clés et bouton d'action.
*/
export default function Methodology() {
return (
/*
Section englobante :
- py-20 : padding vertical de 5rem (80px)
- px-6 sm:px-12 : padding horizontal adaptatif
- bg-white : fond blanc assurant la continuité avec les autres blocs
*/
<section className="py-20 px-6 sm:px-12 bg-white">
{/* Conteneur centré borné à 1400px (largeur standard de la maquette Figma) */}
<div className="max-w-[1400px] mx-auto">
{/* ====================================================================
A. PARTIE SUPÉRIEURE : EN-TÊTE + GRILLE DES 6 ÉTAPES
- Grille CSS de 12 colonnes sur grand écran (lg:grid-cols-12)
- 1 colonne unique sur mobile / tablette
==================================================================== */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start mb-16">
{/* COLONNE GAUCHE (4 colonnes sur 12) : Titres et texte explicatif */}
<div className="lg:col-span-4 pr-0 lg:pr-6">
{/* Surtitre vert olive (#798334) */}
<span className="text-[0.85rem] font-bold text-[#798334] tracking-wide block mb-2">
Notre méthodologie
</span>
{/* Titre principal */}
<h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 leading-tight mb-5">
Comment <br /> ça fonctionne ?
</h2>
{/* Sous-titre mis en avant */}
<h3 className="text-sm font-bold text-slate-900 mb-3">
Une méthodologie “Learning by Doing” validée sur plus de 20 ans.
</h3>
{/* Paragraphe descriptif avec largeur bridée pour une lecture confortable */}
<p className="text-xs sm:text-sm text-slate-500 leading-relaxed max-w-sm">
gaea21 transforme la recherche en action et les trajectoires humaines en capacités concrètes à travers une méthodologie systémique structurée.
</p>
</div>
{/* COLONNE DROITE (8 colonnes sur 12) : Les 6 étapes numérotées */}
{/*
Découpage responsive :
- Mobile : 2 colonnes (grid-cols-2)
- Tablette : 3 colonnes (sm:grid-cols-3)
- Desktop : 6 colonnes alignées (md:grid-cols-6)
*/}
<div className="lg:col-span-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 text-center">
{STEPS.map((step) => (
/*
group : permet à la bulle d'icône d'animer son zoom et sa couleur
dès que le curseur entre dans le bloc de l'étape
*/
<div key={step.number} className="flex flex-col items-center group">
{/* Numéro de l'étape (01, 02, etc.) */}
<span className="text-xs sm:text-sm font-semibold text-slate-400 mb-2">
{step.number}
</span>
{/* Bulle d'icône vert olive (#8c8f3e) avec transition fluide */}
<div className="w-16 h-16 rounded-full bg-[#8c8f3e] flex items-center justify-center mb-3 shadow-md group-hover:bg-[#737630] group-hover:scale-105 transition-all duration-200">
{step.icon}
</div>
{/* Titre de l'étape */}
<h4 className="text-sm font-bold text-slate-900 mb-1.5 leading-snug">
{step.title}
</h4>
{/* Description de l'étape */}
<p className="text-[0.68rem] sm:text-[0.72rem] text-slate-500 leading-snug">
{step.description}
</p>
</div>
))}
</div>
</div>
{/* ====================================================================
B. BANDEAU INFÉRIEUR : STATISTIQUES & BOUTON D'ACTION (CTA)
- bg-[#f7f8f0] : fond beige/vert très clair doux
- border-[#e8ebd5] : bordure fine d'encadrement
- rounded-2xl : coins arrondis
==================================================================== */}
<div className="bg-[#f7f8f0] border border-[#e8ebd5] rounded-2xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6 shadow-sm">
{/* Bloc Accroche textuelle à gauche */}
<div className="lg:w-1/4 text-center lg:text-left">
<h4 className="text-sm sm:text-base font-bold text-slate-900 leading-snug">
Une approche systémique et humaine
</h4>
<span className="text-xs sm:text-sm text-[#798334] font-medium block mt-0.5">
pour des résultats concrets et durables.
</span>
</div>
{/* Ligne séparatrice verticale visible uniquement sur desktop (lg) */}
<div className="hidden lg:block w-px h-12 bg-slate-300"></div>
{/* Statistique 1 : Ancienneté (20+ ans) */}
<div className="flex items-center gap-4">
{/* Icône cible / horloge */}
<div className="text-[#8c8f3e]">
<svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9" />
<path strokeLinecap="round" strokeLinejoin="round" d="M12 7v5l3 3" />
</svg>
</div>
<div>
<span className="text-xl sm:text-2xl font-black text-slate-900 block leading-tight">
20 + ans
</span>
<span className="text-xs text-slate-500 font-medium">
d'expérimentation
</span>
</div>
</div>
{/* Ligne séparatrice verticale visible uniquement sur desktop (lg) */}
<div className="hidden lg:block w-px h-12 bg-slate-300"></div>
{/* Statistique 2 : Nombre de bénéficiaires (3 000+ personnes) */}
<div className="flex items-center gap-4">
{/* Icône groupe / communauté */}
<div className="text-[#8c8f3e]">
<svg className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path strokeLinecap="round" strokeLinejoin="round" d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path strokeLinecap="round" strokeLinejoin="round" d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</div>
<div>
<span className="text-xl sm:text-2xl font-black text-slate-900 block leading-tight">
3 000 +
</span>
<span className="text-xs text-[#798334] font-medium">
personnes accompagnées
</span>
</div>
</div>
{/* Bouton CTA d'ancrage vers le détail de la méthodologie */}
<div className="mt-2 lg:mt-0">
<a
href="#methodologie"
className="inline-flex items-center gap-2 bg-[#798334] hover:bg-[#656d2b] text-white text-xs sm:text-sm font-semibold px-6 py-3 rounded-full transition-all duration-200 shadow-sm hover:shadow-md transform hover:-translate-y-0.5"
>
<span>Découvrir la méthodologie</span>
{/* Flèche droite indicative */}
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
</div>
</div>
</section>
);
}
Reference in New Issue View Git Blame Copy Permalink