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

assets/components/parcours/QuiPeutRejoindre.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+
+// Imports des icônes fournies (ajuste le chemin vers ton dossier d'images)
+import etudiantIcon from '../../img/etudiant.png';
+import expertIcon from '../../img/expert.png';
+import entrepreneurIcon from '../../img/entrepreneur.png';
+import personneIcon from '../../img/personne.png';
+import professionnelsIcon from '../../img/professionnels.png';
+import retraiteIcon from '../../img/retraite.png';
+
+// Données organisées par colonnes pour respecter la hauteur et l'agencement Figma
+const COLUMNS_DATA = [
+    {
+        colId: 'col-1',
+        cards: [
+            {
+                id: 'etudiants',
+                title: 'Étudiants',
+                description:
+                    'Pour réaliser un stage, développer une première expérience professionnelle ou compléter leur formation.',
+                icon: etudiantIcon,
+            },
+            {
+                id: 'personnes-transition',
+                title: 'Personnes en transition',
+                isList: true,
+                listItems: [
+                    'Retour à l’emploi.',
+                    'Reconversion.',
+                    'Réorientation.',
+                    'Évolution professionnelle.',
+                ],
+                icon: personneIcon,
+                isTall: true, // Carte plus haute
+            },
+        ],
+    },
+    {
+        colId: 'col-2',
+        cards: [
+            {
+                id: 'jeunes-diplomes',
+                title: 'Jeunes diplômés',
+                description:
+                    'Pour renforcer leur employabilité et préparer leur entrée sur le marché du travail.',
+                icon: etudiantIcon, // Ou l'icône jeune diplômé si distincte
+            },
+            {
+                id: 'entrepreneurs',
+                title: 'Entrepreneurs',
+                description:
+                    'Pour développer un projet, une activité ou une initiative à impact.',
+                icon: entrepreneurIcon,
+            },
+            {
+                id: 'retraites',
+                title: 'Retraités',
+                description:
+                    'Pour mettre leur expérience au service de projets utiles et porteurs de sens.',
+                icon: retraiteIcon,
+            },
+        ],
+    },
+    {
+        colId: 'col-3',
+        cards: [
+            {
+                id: 'professionnels',
+                title: 'Professionnels',
+                description:
+                    'Pour développer de nouvelles compétences, élargir leur expérience ou préparer une évolution de carrière.',
+                icon: professionnelsIcon,
+            },
+            {
+                id: 'experts-specialistes',
+                title: 'Experts et spécialistes',
+                description:
+                    'Pour transmettre leurs compétences, accompagner des projets, bénéficier de mandats ou contribuer à l’écosystème.',
+                icon: expertIcon,
+                isTall: true,
+            },
+        ],
+    },
+];
+
+export default function QuiPeutRejoindre() {
+    return (
+        <section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20 font-sans">
+            <div className="max-w-[1320px] mx-auto">
+                {/* Trait de repère vert olive */}
+                <div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
+
+                {/* Titre de section */}
+                <h2 className="text-2xl sm:text-3xl font-extrabold text-[#111827] uppercase tracking-tight mb-10">
+                    QUI PEUT <span className="text-[#7a8035]">REJOINDRE</span> GAEA21 ?
+                </h2>
+
+                {/* Grille 3 colonnes responsive */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
+                    {COLUMNS_DATA.map((column) => (
+                        <div key={column.colId} className="flex flex-col gap-6">
+                            {column.cards.map((card) => (
+                                <div
+                                    key={card.id}
+                                    className={`rounded-2xl border border-[#e5e2d6] bg-white p-6 flex items-start gap-4 transition-all duration-200 shadow-sm hover:shadow-md ${card.isTall ? 'min-h-[190px]' : ''
+                                        }`}
+                                >
+                                    {/* Icône PNG dédiée */}
+                                    <img
+                                        src={card.icon}
+                                        alt={card.title}
+                                        className="w-12 h-12 object-contain shrink-0"
+                                    />
+
+                                    {/* Contenu textuel */}
+                                    <div className="flex-1">
+                                        <h3 className="text-base sm:text-lg font-bold text-[#111827] mb-2 leading-snug">
+                                            {card.title}
+                                        </h3>
+
+                                        {card.isList ? (
+                                            <ul className="space-y-1.5 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed">
+                                                {card.listItems.map((item, idx) => (
+                                                    <li key={idx} className="list-none">
+                                                        {item}
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        ) : (
+                                            <p className="text-xs sm:text-[13px] text-[#6b7280] leading-relaxed">
+                                                {card.description}
+                                            </p>
+                                        )}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}