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
189
assets/components/parcours/ParcoursIntegration.jsx
Normal file
189
assets/components/parcours/ParcoursIntegration.jsx
Normal file
@ -0,0 +1,189 @@
|
||||
import React from 'react';
|
||||
|
||||
// Imports des 7 images (vérifie bien tes extensions .png ou .png)
|
||||
import decouvertImg from '../../img/decouvert.png';
|
||||
import preProfilImg from '../../img/pre-profil.png';
|
||||
import entretienImg from '../../img/entretien.png';
|
||||
import constructionImg from '../../img/construction.png';
|
||||
import integrationImg from '../../img/intergation.png';
|
||||
import developpementImg from '../../img/developpement.png';
|
||||
import evolutionImg from '../../img/evolution.png';
|
||||
|
||||
const STEPS = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Étape 1 — Découverte',
|
||||
intro:
|
||||
'Vous découvrez les projets, les équipes, les trajectoires et les opportunités proposées par gaea21.',
|
||||
image: decouvertImg,
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Étape 2 — Pré-profil',
|
||||
intro:
|
||||
'Vous complétez un questionnaire permettant de mieux comprendre :',
|
||||
bullets: [
|
||||
'votre situation ;',
|
||||
'votre parcours ;',
|
||||
'vos compétences ;',
|
||||
'vos objectifs ;',
|
||||
'vos disponibilités ;',
|
||||
'vos centres d’intérêt ;',
|
||||
'vos attentes.',
|
||||
],
|
||||
conclusion:
|
||||
'Cette étape constitue la base de votre future trajectoire.',
|
||||
image: preProfilImg,
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Étape 3 — Entretien',
|
||||
intro:
|
||||
'Un entretien permet d’approfondir votre démarche et d’identifier les opportunités les plus adaptées :',
|
||||
bullets: [
|
||||
'vos compétences à mobiliser ;',
|
||||
'les projets correspondant à votre profil ;',
|
||||
'ce que vous souhaitez développer.',
|
||||
],
|
||||
image: entretienImg,
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: 'Étape 4 — Construction de la trajectoire',
|
||||
intro:
|
||||
'À partir des informations recueillies, nous définissons :',
|
||||
bullets: [
|
||||
'vos objectifs d’apprentissage ;',
|
||||
'les compétences à développer ;',
|
||||
'votre rôle dans les projets gaea21 ;',
|
||||
'la durée et le rythme de votre parcours.',
|
||||
],
|
||||
conclusion:
|
||||
'Cette étape permet de construire une feuille de route sur mesure.',
|
||||
image: constructionImg,
|
||||
},
|
||||
{
|
||||
step: 5,
|
||||
title: 'Étape 5 — Intégration dans les projets',
|
||||
intro:
|
||||
'Vous intégrez un ou plusieurs projets réels :',
|
||||
bullets: [
|
||||
'accompagné(e) par des tuteurs et experts ;',
|
||||
'au sein d’une équipe pluridisciplinaire ;',
|
||||
'avec des livrables concrets à réaliser.',
|
||||
],
|
||||
image: integrationImg,
|
||||
},
|
||||
{
|
||||
step: 6,
|
||||
title: 'Étape 6 — Développement des compétences',
|
||||
intro:
|
||||
'Vous montez en compétences à travers la pratique :',
|
||||
bullets: [
|
||||
'ateliers, méthodologies et outils gaea21 ;',
|
||||
'développement de compétences transversales et techniques ;',
|
||||
'suivi personnalisé et feedback régulier.',
|
||||
],
|
||||
image: developpementImg,
|
||||
},
|
||||
{
|
||||
step: 7,
|
||||
title: 'Étape 7 — Évolution et opportunités',
|
||||
intro:
|
||||
'À la fin de votre parcours :',
|
||||
bullets: [
|
||||
'bilan des compétences acquises ;',
|
||||
'attestation de parcours gaea21 ;',
|
||||
'recommandation professionnelle ;',
|
||||
'opportunités de mandats internes ou externes ;',
|
||||
'accès au réseau Alumni gaea21.',
|
||||
],
|
||||
image: evolutionImg,
|
||||
},
|
||||
];
|
||||
|
||||
export default function ParcoursIntegration() {
|
||||
return (
|
||||
<section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
|
||||
{/* 1. Le trait vert horizontal au-dessus du titre (identique à Figma) */}
|
||||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
|
||||
|
||||
{/* 2. Titre de section */}
|
||||
<h2 className="text-base sm:text-lg lg:text-xl font-extrabold uppercase tracking-tight text-[#111827] mb-14 text-left">
|
||||
COMMENT FONCTIONNE LE{' '}
|
||||
<span className="text-[#8c8f3e]">PARCOURS D'INTÉGRATION</span> ?
|
||||
</h2>
|
||||
|
||||
{/* 3. Timeline */}
|
||||
<div className="max-w-[940px] mx-auto lg:ml-0 flex flex-col">
|
||||
{STEPS.map((item, index) => {
|
||||
const isLast = index === STEPS.length - 1;
|
||||
|
||||
return (
|
||||
<div key={item.step} className="flex items-start">
|
||||
|
||||
{/* Colonne GAUCHE : Illustration */}
|
||||
<div className="w-[42%] flex justify-end pr-6 sm:pr-10 shrink-0">
|
||||
<div className="w-40 h-28 sm:w-52 sm:h-36 flex items-center justify-end">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="max-h-full max-w-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Colonne CENTRALE : Cercle numéroté + Ligne verticale */}
|
||||
<div className="relative flex flex-col items-center shrink-0 self-stretch">
|
||||
{/* Rond vert olive avec chiffre blanc (Figma) */}
|
||||
<div className="w-8 h-8 rounded-full bg-[#8c8f3e] text-white text-xs sm:text-sm font-bold flex items-center justify-center shadow-xs z-10">
|
||||
{item.step}
|
||||
</div>
|
||||
|
||||
{/* Ligne verticale verte reliant chaque pastille */}
|
||||
{!isLast && (
|
||||
<div className="w-[2px] bg-[#8c8f3e] flex-1 my-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Colonne DROITE : Textes fidèles à Figma */}
|
||||
<div className="flex-1 pl-6 sm:pl-10 pb-12 sm:pb-16 text-left">
|
||||
<h3 className="text-xs sm:text-sm font-bold text-[#111827] leading-none mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{item.intro && (
|
||||
<p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed mb-2 max-w-md">
|
||||
{item.intro}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{item.bullets && item.bullets.length > 0 && (
|
||||
<ul className="space-y-1 text-[11px] text-[#71717a] leading-tight max-w-md">
|
||||
{item.bullets.map((bullet, idx) => (
|
||||
<li key={idx} className="flex items-start gap-1.5">
|
||||
<span className="text-[#8c8f3e] text-xs leading-none mt-0.5">•</span>
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{item.conclusion && (
|
||||
<p className="text-[11px] text-[#52525b] leading-relaxed mt-2 max-w-md">
|
||||
{item.conclusion}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user