c94227c534
- 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
78 lines
4.0 KiB
JavaScript
78 lines
4.0 KiB
JavaScript
import React from 'react';
|
||
|
||
// Import de l'image (renomme-la ou adapte le chemin vers ton dossier assets/img/)
|
||
import referentsImg from '../../img/accompagner.png';
|
||
|
||
export default function SystemeReferents() {
|
||
return (
|
||
<section className="w-full bg-[#f9f9f9] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
|
||
<div className="max-w-[1240px] mx-auto">
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-14 items-center">
|
||
|
||
{/* ========================================================= */}
|
||
{/* 1. Colonne GAUCHE : Textes et rôle du référent (5 cols) */}
|
||
{/* ========================================================= */}
|
||
<div className="lg:col-span-5 text-left">
|
||
{/* Trait vert horizontal */}
|
||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
|
||
|
||
{/* Sur-titre vert olive */}
|
||
<p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#8c8f3e] mb-2 sm:mb-3">
|
||
LE SYSTÈME DES RÉFÉRENTS
|
||
</p>
|
||
|
||
{/* Titre */}
|
||
<h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold text-[#111827] leading-tight mb-5">
|
||
Accompagner la progression.
|
||
</h2>
|
||
|
||
{/* Présentation */}
|
||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-1">
|
||
Chaque participant est accompagné par un référent.
|
||
</p>
|
||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2.5">
|
||
Son rôle est de :
|
||
</p>
|
||
|
||
{/* Liste à puces */}
|
||
<ul className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-6">
|
||
{[
|
||
'suivre l’évolution des compétences ;',
|
||
'identifier les axes de développement ;',
|
||
'accompagner la progression ;',
|
||
'contribuer à l’évaluation ;',
|
||
'aider à construire la trajectoire.',
|
||
].map((point, idx) => (
|
||
<li key={idx} className="flex items-start gap-2">
|
||
<span className="text-[#111827] text-xs leading-none mt-1">•</span>
|
||
<span>{point}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
{/* Phrase de conclusion en gras */}
|
||
<p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
|
||
Le référent constitue un point d'appui tout au long du parcours.
|
||
</p>
|
||
</div>
|
||
|
||
{/* ========================================================= */}
|
||
{/* 2. Colonne DROITE : Grande photo d'équipe (7 cols) */}
|
||
{/* ========================================================= */}
|
||
<div className="lg:col-span-7 flex justify-center lg:justify-end">
|
||
<div className="w-full max-w-[620px] rounded-2xl overflow-hidden shadow-xs">
|
||
<img
|
||
src={referentsImg}
|
||
alt="Accompagnement par un référent gaea21"
|
||
className="w-full h-auto object-cover block select-none"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
} |