55d15922a9
- Création du composant EquipeAccompagnement avec les 5 intervenants et leurs badges respectifs - Intégration de la section TeletravailCompetence avec visuel et liste des compétences clés - Implémentation du composant CeQueVousDeveloppez (grille responsive de 16 compétences sur 8 colonnes) - Correction de l'alignement et centrage des badges icônes via positionnement absolu - Intégration des assets graphiques finaux (coach-job-icon.png, icone-user.png)
285 lines
14 KiB
JavaScript
285 lines
14 KiB
JavaScript
import React from 'react';
|
||
|
||
// 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';
|
||
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: decouverteImg,
|
||
},
|
||
{
|
||
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 profil et d’identifier les opportunités les plus pertinentes.',
|
||
subIntro: 'Nous cherchons à comprendre :',
|
||
bullets: [
|
||
'où vous en êtes ;',
|
||
'où vous souhaitez aller ;',
|
||
'ce que vous souhaitez développer ;',
|
||
'ce qui pourrait accélérer votre évolution.',
|
||
],
|
||
image: entretienImg,
|
||
},
|
||
{
|
||
step: 4,
|
||
title: 'Étape 4 — Construction de la trajectoire',
|
||
intro:
|
||
'À partir des informations recueillies, nous identifions :',
|
||
bullets: [
|
||
'la trajectoire la plus adaptée ;',
|
||
'les projets pertinents ;',
|
||
'les compétences à développer ;',
|
||
'les ressources à mobiliser ;',
|
||
'les accompagnements nécessaires.',
|
||
],
|
||
conclusion:
|
||
'Chaque personne suit un parcours unique.',
|
||
image: constructionImg,
|
||
},
|
||
{
|
||
step: 5,
|
||
title: 'Étape 5 — Intégration dans les projets',
|
||
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',
|
||
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',
|
||
intro:
|
||
'L’objectif n’est pas simplement de participer à un projet.',
|
||
subIntro: 'L’objectif est de développer :',
|
||
bullets: [
|
||
'une expérience démontrable ;',
|
||
'des compétences transférables ;',
|
||
'un réseau actif et engagé ;',
|
||
'des perspectives professionnelles claires.',
|
||
],
|
||
image: evolutionImg,
|
||
},
|
||
];
|
||
|
||
export default function ParcoursIntegration() {
|
||
return (
|
||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-10 md:py-20 px-4 sm:px-6 md:px-12 font-sans">
|
||
<div className="max-w-[1240px] mx-auto">
|
||
|
||
{/* Trait de repère vert horizontal */}
|
||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-4 md:mb-6" />
|
||
|
||
{/* Titre de section */}
|
||
<h2 className="text-lg sm:text-xl md:text-2xl font-extrabold uppercase tracking-tight text-[#111827] mb-8 md:mb-16 text-left">
|
||
COMMENT FONCTIONNE LE{' '}
|
||
<span className="text-[#8c8f3e]">PARCOURS D'INTÉGRATION</span> ?
|
||
</h2>
|
||
|
||
{/* ========================================================================= */}
|
||
{/* 1. VERSION MOBILE (< md) : Vue empilée et lisible */}
|
||
{/* ========================================================================= */}
|
||
<div className="flex md:hidden flex-col gap-10">
|
||
{STEPS.map((item, index) => {
|
||
const isLast = index === STEPS.length - 1;
|
||
|
||
return (
|
||
<div key={item.step} className="flex flex-col">
|
||
{/* Image mobile */}
|
||
<div className="w-full max-w-[340px] mx-auto mb-4">
|
||
<img
|
||
src={item.image}
|
||
alt={item.title}
|
||
className="w-full h-auto object-contain block"
|
||
/>
|
||
</div>
|
||
|
||
{/* Bloc pastille + ligne à gauche & texte à droite */}
|
||
<div className="flex items-start">
|
||
<div className="relative flex flex-col items-center shrink-0 mr-4 self-stretch">
|
||
<div className="w-9 h-9 rounded-full bg-[#8c8f3e] text-white text-sm font-bold flex items-center justify-center shadow-xs z-10 shrink-0">
|
||
{item.step}
|
||
</div>
|
||
{!isLast && (
|
||
<div className="w-[2px] bg-[#8c8f3e] flex-1 my-1" />
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex-1 pb-6 text-left">
|
||
<h3 className="text-sm font-extrabold text-[#111827] mb-1.5 pt-1.5">
|
||
{item.title}
|
||
</h3>
|
||
|
||
{item.intro && (
|
||
<p className="text-xs text-[#4b5563] leading-relaxed mb-2">
|
||
{item.intro}
|
||
</p>
|
||
)}
|
||
|
||
{item.subIntro && (
|
||
<p className="text-xs text-[#4b5563] font-medium leading-relaxed mb-1">
|
||
{item.subIntro}
|
||
</p>
|
||
)}
|
||
|
||
{item.bullets && item.bullets.length > 0 && (
|
||
<ul className="space-y-1 text-xs text-[#4b5563] leading-tight mb-2">
|
||
{item.bullets.map((bullet, idx) => (
|
||
<li key={idx} className="flex items-start gap-1.5">
|
||
<span className="text-[#111827] text-xs leading-none mt-0.5">•</span>
|
||
<span>{bullet}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
|
||
{item.paragraphs && item.paragraphs.length > 0 && (
|
||
<div className="space-y-1 text-xs text-[#4b5563] leading-relaxed">
|
||
{item.paragraphs.map((p, idx) => (
|
||
<p key={idx}>{p}</p>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{item.conclusion && (
|
||
<p className="text-xs text-[#4b5563] italic leading-relaxed mt-1">
|
||
{item.conclusion}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* ========================================================================= */}
|
||
{/* 2. VERSION DESKTOP (md et plus) : Ton affichage exact qui fonctionne */}
|
||
{/* ========================================================================= */}
|
||
<div className="hidden md:flex max-w-[1100px] mx-auto lg:ml-0 flex-col">
|
||
{STEPS.map((item, index) => {
|
||
const isLast = index === STEPS.length - 1;
|
||
|
||
return (
|
||
<div key={item.step} className="flex items-center">
|
||
|
||
{/* 1. Colonne GAUCHE */}
|
||
<div className="w-[48%] flex justify-end shrink-0">
|
||
<div className="w-full max-w-[420px] -ml-1 -mr-1 z-0">
|
||
<img
|
||
src={item.image}
|
||
alt={item.title}
|
||
className="w-full h-auto object-contain block select-none"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 2. Colonne CENTRALE */}
|
||
<div className="relative flex flex-col items-center shrink-0 self-stretch justify-center z-10">
|
||
<div
|
||
className={`w-[2px] bg-[#8c8f3e] flex-1 ${index === 0 ? 'opacity-0' : ''
|
||
}`}
|
||
/>
|
||
|
||
<div className="w-10 h-10 sm:w-11 sm:h-11 rounded-full bg-[#8c8f3e] text-white text-base sm:text-lg font-bold flex items-center justify-center shadow-xs select-none shrink-0 my-1">
|
||
{item.step}
|
||
</div>
|
||
|
||
<div
|
||
className={`w-[2px] bg-[#8c8f3e] flex-1 ${isLast ? 'opacity-0' : ''
|
||
}`}
|
||
/>
|
||
</div>
|
||
|
||
{/* 3. Colonne DROITE */}
|
||
<div className="flex-1 pl-6 sm:pl-8 py-6 sm:py-8 text-left">
|
||
<h3 className="text-base sm:text-lg font-extrabold text-[#111827] leading-none mb-2">
|
||
{item.title}
|
||
</h3>
|
||
|
||
{item.intro && (
|
||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2 max-w-md">
|
||
{item.intro}
|
||
</p>
|
||
)}
|
||
|
||
{item.subIntro && (
|
||
<p className="text-xs sm:text-[13px] text-[#4b5563] font-medium leading-relaxed mb-1 max-w-md">
|
||
{item.subIntro}
|
||
</p>
|
||
)}
|
||
|
||
{item.bullets && item.bullets.length > 0 && (
|
||
<ul className="space-y-0.5 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-2">
|
||
{item.bullets.map((bullet, idx) => (
|
||
<li key={idx} className="flex items-start gap-1.5">
|
||
<span className="text-[#111827] text-xs leading-none mt-1">•</span>
|
||
<span>{bullet}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
|
||
{item.paragraphs && item.paragraphs.length > 0 && (
|
||
<div className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed max-w-md">
|
||
{item.paragraphs.map((p, idx) => (
|
||
<p key={idx}>{p}</p>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{item.conclusion && (
|
||
<p className="text-xs sm:text-[13px] text-[#4b5563] italic leading-relaxed max-w-md mt-1">
|
||
{item.conclusion}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|