feat(parcours): intégration des sections de la page Parcours conforme à Figma

- Prise en charge du thème sombre du Header sur la route /parcours
- Ajout de la section Hero et présentation des chiffres clés
- Grille des profils 'Qui peut rejoindre' avec méthode map() et icônes
- Intégration de la timeline verticale des étapes d'intégration
- Ajout du bandeau 'Learning by Doing'
- Restructuration des composants par dossier
This commit is contained in:
MohamedLoum1001
2026-09-30 15:38:26 +02:00
parent f66e39ab09
commit bb1393e9ef
44 changed files with 1366 additions and 140 deletions

View File

@ -0,0 +1,87 @@
import React from 'react';
import '../../styles/methodologie-etapes.css';
// Import des 6 icônes
import iconSearch from '../../img/Search.png';
import iconUser from '../../img/User Account.png';
import iconWrench from '../../img/Frame 715.png';
import iconPlant from '../../img/Tree Planting.png';
import iconElectrical from '../../img/Electrical.png';
import iconCycle from '../../img/Frame 719.png';
const ETAPES_DATA = [
{
step: "01",
title: "Comprendre",
description: "Identifier votre situation, vos aspirations, vos compétences et vos besoins.",
icon: iconSearch,
hasCircleBg: false // L'icône est brute, on lui applique le cercle CSS
},
{
step: "02",
title: "Structurer",
description: "Construire une trajectoire réaliste, progressive et durable.",
icon: iconUser,
hasCircleBg: false
},
{
step: "03",
title: "Expérimenter",
description: "Développer des compétences à travers des projets réels.",
icon: iconWrench,
hasCircleBg: true // Frame 715 contient déjà son cercle de fond
},
{
step: "04",
title: "Développer",
description: "Renforcer son autonomie, ses capacités d'action et son leadership.",
icon: iconPlant,
hasCircleBg: false
},
{
step: "05",
title: "Connecter",
description: "S'inscrire dans un écosystème bienveillant et activer son réseau.",
icon: iconElectrical,
hasCircleBg: false
},
{
step: "06",
title: "Évoluer",
description: "Mesurer l'impact de sa transition et pérenniser son parcours.",
icon: iconCycle,
hasCircleBg: true // Frame 719 contient déjà son cercle de fond
}
];
export default function MethodologieEtapes() {
return (
<section className="etapes-section">
<div className="etapes-container">
<div className="etapes-grid">
{ETAPES_DATA.map((item) => (
<div key={item.step} className="etape-item">
{/* Conteneur cercle + badge numéro */}
<div className="etape-circle-wrapper">
<div className={`etape-circle ${item.hasCircleBg ? 'transparent-bg' : ''}`}>
<img
src={item.icon}
alt={item.title}
className="etape-icon-img"
/>
</div>
<span className="etape-badge">{item.step}</span>
</div>
{/* Titre et description */}
<h3 className="etape-title">{item.title}</h3>
<p className="etape-desc">{item.description}</p>
</div>
))}
</div>
</div>
</section>
);
}