feat(parcours): intégration des sections parcours, compétences et référents
- 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
This commit is contained in:
MohamedLoum1001
115
assets/components/parcours/ModeleDeveloppementCompetences.jsx
Normal file
115
assets/components/parcours/ModeleDeveloppementCompetences.jsx
Normal file
@ -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 (
|
||||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-10 sm:py-14 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
|
||||
{/* Grille adaptative : 1 col sur mobile/tablette portrait, 12 cols sur grand écran */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 sm:gap-12 lg:gap-14 items-center">
|
||||
|
||||
{/* ================================================================= */}
|
||||
{/* 1. Bloc TEXTES GAUCHE (Prend 5 colonnes sur desktop) */}
|
||||
{/* ================================================================= */}
|
||||
<div className="lg:col-span-5 text-left">
|
||||
{/* Sur-titre vert olive */}
|
||||
<p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#7a8335] mb-2 sm:mb-3">
|
||||
LE MODÈLE DE DÉVELOPPEMENT DES COMPÉTENCES
|
||||
</p>
|
||||
|
||||
{/* Grand titre */}
|
||||
<h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold text-[#111827] leading-tight mb-4 sm:mb-6">
|
||||
Des compétences observables, mesurables et transférables.
|
||||
</h2>
|
||||
|
||||
{/* Paragraphes explicatifs */}
|
||||
<div className="space-y-1.5 sm:space-y-2 text-xs sm:text-[13px] sm:-ml-2 text-[#4b5563] leading-relaxed mb-4 sm:mb-6">
|
||||
<p>Chaque métier est composé de compétences.</p>
|
||||
<p>Chaque compétence est composée de sous-compétences.</p>
|
||||
<p>
|
||||
Le développement professionnel consiste à faire évoluer progressivement ces compétences.
|
||||
</p>
|
||||
<p>
|
||||
Chez gaea21, nous utilisons un système d’évaluation permettant d’identifier le niveau de maîtrise de chaque compétence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Conclusion en gras */}
|
||||
<p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
|
||||
Cette approche permet de visualiser les progrès, construire des plans de développement et valoriser l’expérience acquise.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ================================================================= */}
|
||||
{/* 2. Bloc NIVEAUX DROITE (Prend 7 colonnes sur desktop) */}
|
||||
{/* ================================================================= */}
|
||||
<div className="lg:col-span-7 w-full">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4 md:gap-6 lg:gap-8">
|
||||
{NIVEAUX.map((item) => (
|
||||
<div
|
||||
key={item.number}
|
||||
className="flex flex-col items-center text-center px-2"
|
||||
>
|
||||
{/* Numéro gris clair 01 / 02 / 03 */}
|
||||
<span className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-300 tracking-wider mb-2 sm:mb-3 lg:mb-4 select-none">
|
||||
{item.number}
|
||||
</span>
|
||||
|
||||
{/* Rond avec l'icône verte */}
|
||||
<div className="w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-full overflow-hidden flex items-center justify-center mb-3 sm:mb-4 shrink-0 shadow-xs">
|
||||
<img
|
||||
src={item.icon}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-contain select-none pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Titre du niveau */}
|
||||
<h3 className="text-sm sm:text-[15px] lg:text-base font-extrabold text-[#111827] mb-1.5 sm:mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{/* Courte description */}
|
||||
<p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed max-w-[220px]">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user