From c94227c53429f7eef84a20615063e31ea81f0abe Mon Sep 17 00:00:00 2001 From: MohamedLoum1001 Date: Mon, 5 Oct 2026 11:23:05 +0200 Subject: [PATCH] =?UTF-8?q?feat(parcours):=20int=C3=A9gration=20des=20sect?= =?UTF-8?q?ions=20parcours,=20comp=C3=A9tences=20et=20r=C3=A9f=C3=A9rents?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Intégration de la timeline en 7 étapes conforme à la maquette Figma - Ajout du composant modèle de développement des compétences (paliers 01 à 03) - Ajout de la section d'accompagnement des référents avec visuel d'équipe - Ajustements responsive mobiles et desktop --- .../ModeleDeveloppementCompetences.jsx | 115 ++++++++++ assets/components/parcours/Parcours.jsx | 5 + .../parcours/ParcoursIntegration.jsx | 212 +++++++++++++----- .../components/parcours/SystemeReferents.jsx | 78 +++++++ assets/img/accompagner.png | Bin 0 -> 788590 bytes assets/img/base.png | Bin 0 -> 61364 bytes assets/img/construction.png | Bin 272618 -> 234296 bytes assets/img/decouvert.png | Bin 241894 -> 0 bytes assets/img/decouverte.png | Bin 0 -> 301874 bytes assets/img/developpement.png | Bin 255131 -> 281228 bytes assets/img/entretien.png | Bin 253598 -> 240257 bytes assets/img/evolution.png | Bin 300064 -> 226831 bytes assets/img/expertise.png | Bin 0 -> 54607 bytes assets/img/intergation.png | Bin 285073 -> 272853 bytes assets/img/maitrise.png | Bin 0 -> 54929 bytes assets/img/pre-profil.png | Bin 266611 -> 218121 bytes 16 files changed, 352 insertions(+), 58 deletions(-) create mode 100644 assets/components/parcours/ModeleDeveloppementCompetences.jsx create mode 100644 assets/components/parcours/SystemeReferents.jsx create mode 100644 assets/img/accompagner.png create mode 100644 assets/img/base.png delete mode 100644 assets/img/decouvert.png create mode 100644 assets/img/decouverte.png create mode 100644 assets/img/expertise.png create mode 100644 assets/img/maitrise.png diff --git a/assets/components/parcours/ModeleDeveloppementCompetences.jsx b/assets/components/parcours/ModeleDeveloppementCompetences.jsx new file mode 100644 index 0000000..f665b2c --- /dev/null +++ b/assets/components/parcours/ModeleDeveloppementCompetences.jsx @@ -0,0 +1,115 @@ +import React from 'react'; + +// Imports des 3 icônes exportées +import baseIcon from '../../img/base.png'; +import maitriseIcon from '../../img/maitrise.png'; +import expertiseIcon from '../../img/expertise.png'; + +const NIVEAUX = [ + { + number: '01', + title: 'Bases', + icon: baseIcon, + description: + 'Compréhension des concepts. Premières applications avec accompagnement.', + }, + { + number: '02', + title: 'Maîtrise opérationnelle', + icon: maitriseIcon, + description: + 'Capacité à réaliser de manière autonome. Contribution active aux projets.', + }, + { + number: '03', + title: 'Expertise', + icon: expertiseIcon, + description: + 'Capacité à transmettre, accompagner et structurer les pratiques.', + }, +]; + +export default function ModeleDeveloppementCompetences() { + return ( +
+
+ + {/* Grille adaptative : 1 col sur mobile/tablette portrait, 12 cols sur grand écran */} +
+ + {/* ================================================================= */} + {/* 1. Bloc TEXTES GAUCHE (Prend 5 colonnes sur desktop) */} + {/* ================================================================= */} +
+ {/* Sur-titre vert olive */} +

+ LE MODÈLE DE DÉVELOPPEMENT DES COMPÉTENCES +

+ + {/* Grand titre */} +

+ Des compétences observables, mesurables et transférables. +

+ + {/* Paragraphes explicatifs */} +
+

Chaque métier est composé de compétences.

+

Chaque compétence est composée de sous-compétences.

+

+ Le développement professionnel consiste à faire évoluer progressivement ces compétences. +

+

+ Chez gaea21, nous utilisons un système d’évaluation permettant d’identifier le niveau de maîtrise de chaque compétence. +

+
+ + {/* Conclusion en gras */} +

+ Cette approche permet de visualiser les progrès, construire des plans de développement et valoriser l’expérience acquise. +

+
+ + {/* ================================================================= */} + {/* 2. Bloc NIVEAUX DROITE (Prend 7 colonnes sur desktop) */} + {/* ================================================================= */} +
+
+ {NIVEAUX.map((item) => ( +
+ {/* Numéro gris clair 01 / 02 / 03 */} + + {item.number} + + + {/* Rond avec l'icône verte */} +
+ {item.title} +
+ + {/* Titre du niveau */} +

+ {item.title} +

+ + {/* Courte description */} +

+ {item.description} +

+
+ ))} +
+
+ +
+ +
+
+ ); +} \ No newline at end of file diff --git a/assets/components/parcours/Parcours.jsx b/assets/components/parcours/Parcours.jsx index 8da138a..a578c16 100644 --- a/assets/components/parcours/Parcours.jsx +++ b/assets/components/parcours/Parcours.jsx @@ -4,6 +4,8 @@ import ParcoursPresentation from './ParcoursPresentation'; import QuiPeutRejoindre from './QuiPeutRejoindre'; import ParcoursIntegration from './ParcoursIntegration'; import LearningByDoing from './LearningByDoing'; +import ModeleDeveloppementCompetences from './ModeleDeveloppementCompetences'; +import SystemeReferents from './SystemeReferents'; export default function Parcours() { return ( @@ -13,6 +15,9 @@ export default function Parcours() { + + + ); } \ No newline at end of file diff --git a/assets/components/parcours/ParcoursIntegration.jsx b/assets/components/parcours/ParcoursIntegration.jsx index da11817..4d69aed 100644 --- a/assets/components/parcours/ParcoursIntegration.jsx +++ b/assets/components/parcours/ParcoursIntegration.jsx @@ -1,7 +1,7 @@ import React from 'react'; -// Imports des 7 images (vérifie bien tes extensions .png ou .png) -import decouvertImg from '../../img/decouvert.png'; +// Imports exacts des images exportées de Figma +import decouverteImg from '../../img/decouverte.png'; import preProfilImg from '../../img/pre-profil.png'; import entretienImg from '../../img/entretien.png'; import constructionImg from '../../img/construction.png'; @@ -15,7 +15,7 @@ const STEPS = [ 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, + image: decouverteImg, }, { step: 2, @@ -39,11 +39,13 @@ const STEPS = [ 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 :', + 'Un entretien permet d’approfondir votre profil et d’identifier les opportunités les plus pertinentes.', + subIntro: 'Nous cherchons à comprendre :', bullets: [ - 'vos compétences à mobiliser ;', - 'les projets correspondant à votre profil ;', - 'ce que vous souhaitez développer.', + 'où vous en êtes ;', + 'où vous souhaitez aller ;', + 'ce que vous souhaitez développer ;', + 'ce qui pourrait accélérer votre évolution.', ], image: entretienImg, }, @@ -51,52 +53,49 @@ const STEPS = [ step: 4, title: 'Étape 4 — Construction de la trajectoire', intro: - 'À partir des informations recueillies, nous définissons :', + 'À partir des informations recueillies, nous identifions :', bullets: [ - 'vos objectifs d’apprentissage ;', + 'la trajectoire la plus adaptée ;', + 'les projets pertinents ;', 'les compétences à développer ;', - 'votre rôle dans les projets gaea21 ;', - 'la durée et le rythme de votre parcours.', + 'les ressources à mobiliser ;', + 'les accompagnements nécessaires.', ], conclusion: - 'Cette étape permet de construire une feuille de route sur mesure.', + 'Chaque personne suit un parcours unique.', 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.', + paragraphs: [ + 'Vous rejoignez une ou plusieurs équipes projet.', + 'Vous participez progressivement à des réunions et des livrables.', + 'Vous développez des compétences en contribuant à des projets concrets.', ], 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.', + paragraphs: [ + 'Les projets deviennent des espaces d’apprentissage continu.', + 'L’expérience devient un outil de progression.', + 'Les responsabilités évoluent progressivement selon votre développement.', ], image: developpementImg, }, { step: 7, - title: 'Étape 7 — Évolution et opportunités', + title: 'Étape 7 — Évolution', intro: - 'À la fin de votre parcours :', + 'L’objectif n’est pas simplement de participer à un projet.', + subIntro: 'L’objectif est de développer :', 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.', + 'une expérience démontrable ;', + 'des compétences transférables ;', + 'un réseau actif et engagé ;', + 'des perspectives professionnelles claires.', ], image: evolutionImg, }, @@ -104,75 +103,172 @@ const STEPS = [ export default function ParcoursIntegration() { return ( -
+
- {/* 1. Le trait vert horizontal au-dessus du titre (identique à Figma) */} -
+ {/* Trait de repère vert horizontal */} +
- {/* 2. Titre de section */} -

+ {/* Titre de section */} +

COMMENT FONCTIONNE LE{' '} PARCOURS D'INTÉGRATION ?

- {/* 3. Timeline */} -
+ {/* ========================================================================= */} + {/* 1. VERSION MOBILE (< md) : Vue empilée et lisible */} + {/* ========================================================================= */} +
{STEPS.map((item, index) => { const isLast = index === STEPS.length - 1; return ( -
+
+ {/* Image mobile */} +
+ {item.title} +
- {/* Colonne GAUCHE : Illustration */} -
-
+ {/* Bloc pastille + ligne à gauche & texte à droite */} +
+
+
+ {item.step} +
+ {!isLast && ( +
+ )} +
+ +
+

+ {item.title} +

+ + {item.intro && ( +

+ {item.intro} +

+ )} + + {item.subIntro && ( +

+ {item.subIntro} +

+ )} + + {item.bullets && item.bullets.length > 0 && ( +
    + {item.bullets.map((bullet, idx) => ( +
  • + • + {bullet} +
    • + ))} +
+ )} + + {item.paragraphs && item.paragraphs.length > 0 && ( +
+ {item.paragraphs.map((p, idx) => ( +

{p}

+ ))} +
+ )} + + {item.conclusion && ( +

+ {item.conclusion} +

+ )} +
+
+
+ ); + })} +
+ + {/* ========================================================================= */} + {/* 2. VERSION DESKTOP (md et plus) : Ton affichage exact qui fonctionne */} + {/* ========================================================================= */} +
+ {STEPS.map((item, index) => { + const isLast = index === STEPS.length - 1; + + return ( +
+ + {/* 1. Colonne GAUCHE */} +
+
{item.title}
- {/* Colonne CENTRALE : Cercle numéroté + Ligne verticale */} -
- {/* Rond vert olive avec chiffre blanc (Figma) */} -
+ {/* 2. Colonne CENTRALE */} +
+
+ +
{item.step}
- {/* Ligne verticale verte reliant chaque pastille */} - {!isLast && ( -
- )} +
- {/* Colonne DROITE : Textes fidèles à Figma */} -
-

+ {/* 3. Colonne DROITE */} +
+

{item.title}

{item.intro && ( -

+

{item.intro}

)} + {item.subIntro && ( +

+ {item.subIntro} +

+ )} + {item.bullets && item.bullets.length > 0 && ( -