cd6a66893a
- Implémentation des composants React (8 trajectoires, Human Employment Model, méthodologie 6 étapes, Learning by Doing, exemples de projets, compétences) - Rendu dynamique des cartes via .map() - Configuration du routage SPA dans Symfony (route catch-all) et React Router (Header Link) - Ajustements graphiques et CSS conformes au Figma (#F4F1EA, vert olive)
87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
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>
|
|
);
|
|
} |