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,53 @@
import React from 'react';
import '../../styles/competences-evoluer.css';
const COMPETENCES_DATA = [
{
id: 1,
title: "Compétences professionnelles",
content: "Gestion de projet. Communication. Coordination. Recherche appliquée. Organisation. Développement commercial. Leadership. Gestion durable. Développement durable. Pensée stratégique."
},
{
id: 2,
title: "Compétences humaines",
content: "Confiance. Autonomie. Résilience. Adaptabilité. Intelligence émotionnelle. Leadership. Collaboration. Prise de décision. Gestion du changement."
},
{
id: 3,
title: "Vision systémique",
intro: "Comprendre les liens entre :",
content: "les individus, les organisations, l'économie, les territoires, les communautés, les projets, et les enjeux de transition."
}
];
export default function CompetencesEvoluer() {
return (
<section className="competences-section" id="competences-evoluer">
<div className="competences-container">
{/* Trait vert au-dessus */}
<div className="competences-green-line" aria-hidden="true" />
{/* En-tête */}
<span className="competences-tag-top">Les trajectoires</span>
<h2 className="competences-main-title">
Des compétences pour évoluer.
</h2>
{/* Grille des 3 cartes blanches avec .map() */}
<div className="competences-grid">
{COMPETENCES_DATA.map((item) => (
<article key={item.id} className="competence-card">
<h3 className="competence-card-title">{item.title}</h3>
{item.intro && (
<p className="competence-card-intro">{item.intro}</p>
)}
<p className="competence-card-text">{item.content}</p>
</article>
))}
</div>
</div>
</section>
);
}