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
66
assets/components/parcours/LearningByDoing.jsx
Normal file
66
assets/components/parcours/LearningByDoing.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import learningImg from '../../img/image-learning.png'; // Adapte avec le nom de l'image fournie
|
||||
|
||||
export default function LearningByDoing() {
|
||||
return (
|
||||
<section className="relative w-full min-h-[460px] lg:h-[500px] flex items-center overflow-hidden bg-neutral-950 font-sans">
|
||||
{/* 1. Image de fond positionnée sur la droite */}
|
||||
<img
|
||||
src={learningImg}
|
||||
alt="Learning by Doing gaea21"
|
||||
className="absolute inset-0 w-full h-full object-cover object-[75%_center] md:object-right z-0 pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
{/* 2. Dégradé sombre pour la lisibilité du texte à gauche */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black via-black/85 to-transparent z-10 pointer-events-none" />
|
||||
|
||||
{/* 3. Contenu textuel aligné sur la même grille que le reste de la page */}
|
||||
<div className="relative z-20 max-w-[1240px] w-full mx-auto px-6 md:px-12 py-14 lg:py-20">
|
||||
<div className="max-w-xl text-left">
|
||||
{/* Surtitre doré / olive */}
|
||||
<span className="text-[11px] sm:text-xs font-semibold uppercase tracking-widest text-[#a8ad48] block mb-3">
|
||||
APPRENDRE EN FAISANT
|
||||
</span>
|
||||
|
||||
{/* Titre principal */}
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight leading-tight mb-4">
|
||||
Le Learning by Doing au cœur du modèle.
|
||||
</h2>
|
||||
|
||||
{/* Paragraphe d'introduction */}
|
||||
<p className="text-xs sm:text-[13px] text-gray-300 leading-relaxed mb-4">
|
||||
Chez gaea21, nous considérons que les compétences se développent avant tout dans l’action.
|
||||
Les participants contribuent à :
|
||||
</p>
|
||||
|
||||
{/* Liste à puces */}
|
||||
<ul className="space-y-1.5 text-xs sm:text-[13px] text-gray-200 leading-relaxed mb-5 pl-1">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des projets réels ;</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des équipes réelles ;</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des outils réels ;</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des problématiques réelles.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Conclusion */}
|
||||
<div className="space-y-1 text-xs sm:text-[13px] text-gray-300 leading-relaxed border-t border-white/10 pt-4">
|
||||
<p>Ils apprennent en expérimentant.</p>
|
||||
<p>Ils développent leur autonomie en contribuant.</p>
|
||||
<p>Ils acquièrent de l’expérience en produisant des résultats concrets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
18
assets/components/parcours/Parcours.jsx
Normal file
18
assets/components/parcours/Parcours.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import ParcoursHero from './ParcoursHero';
|
||||
import ParcoursPresentation from './ParcoursPresentation';
|
||||
import QuiPeutRejoindre from './QuiPeutRejoindre';
|
||||
import ParcoursIntegration from './ParcoursIntegration';
|
||||
import LearningByDoing from './LearningByDoing';
|
||||
|
||||
export default function Parcours() {
|
||||
return (
|
||||
<main className="w-full">
|
||||
<ParcoursHero />
|
||||
<ParcoursPresentation />
|
||||
<QuiPeutRejoindre />
|
||||
<ParcoursIntegration />
|
||||
<LearningByDoing />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
33
assets/components/parcours/ParcoursHero.jsx
Normal file
33
assets/components/parcours/ParcoursHero.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import heroImg from '../../img/rejoindre-hero.png';
|
||||
|
||||
export default function ParcoursHero() {
|
||||
return (
|
||||
<section className="relative w-full min-h-[90vh] flex items-center overflow-hidden bg-[#0b1320]">
|
||||
{/* 1. Image de fond Figma */}
|
||||
<img
|
||||
src={heroImg}
|
||||
alt="Rejoindre gaea21"
|
||||
className="absolute inset-0 w-full h-full object-cover object-[70%_center] md:object-right z-0 pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
{/* 2. Overlay sombre latéral */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/60 to-transparent z-10 pointer-events-none" />
|
||||
|
||||
{/* 3. Textes Figma (REJOINDRE gaea21 + accroche) */}
|
||||
<div className="relative z-20 max-w-[1440px] w-full mx-auto px-6 md:px-12 lg:px-16 pt-24 pb-12">
|
||||
<div className="max-w-xl">
|
||||
<h1 className="text-white text-5xl sm:text-6xl font-extrabold tracking-tight leading-none mb-6">
|
||||
<span className="block uppercase">REJOINDRE</span>
|
||||
<span className="block lowercase font-extrabold">gaea21</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-white/95 text-sm sm:text-base font-normal leading-relaxed drop-shadow-sm">
|
||||
Développer des compétences.<br />
|
||||
Acquérir de l'expérience. Construire une trajectoire.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
182
assets/components/parcours/ParcoursPresentation.jsx
Normal file
182
assets/components/parcours/ParcoursPresentation.jsx
Normal file
@ -0,0 +1,182 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import teamImg from '../../img/team-discussion.png'; // Vérifie le chemin de ton image
|
||||
|
||||
export default function ParcoursPresentation() {
|
||||
return (
|
||||
<section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20">
|
||||
<div className="max-w-[1320px] mx-auto space-y-20">
|
||||
|
||||
{/* ========================================================
|
||||
PARTIE 1 : INTRODUCTION & STATS BANNER
|
||||
======================================================== */}
|
||||
<div className="space-y-10">
|
||||
{/* Header 2 colonnes : Titre à gauche / Paragraphes à droite */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
|
||||
<div className="lg:col-span-5">
|
||||
<span className="text-xs uppercase tracking-wider text-[#7a8035] font-semibold block mb-3">
|
||||
REJOINDRE gaea21
|
||||
</span>
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold text-[#111827] leading-[1.25]">
|
||||
Développer des compétences.<br />
|
||||
Acquérir de l'expérience.<br />
|
||||
Construire une trajectoire.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
|
||||
<p>
|
||||
Chaque année, des étudiants, jeunes diplômés, professionnels, entrepreneurs, chercheurs, personnes en transition et experts rejoignent gaea21. Certains recherchent un stage. D'autres souhaitent acquérir une première expérience. Certains cherchent à développer leurs compétences.
|
||||
</p>
|
||||
<p>
|
||||
D'autres souhaitent retrouver une activité professionnelle, lancer un projet ou contribuer à une initiative porteuse de sens. Ce qui les rassemble n'est pas leur parcours. C'est leur volonté d'évoluer.
|
||||
</p>
|
||||
<p>
|
||||
Depuis plus de vingt ans, gaea21 accompagne des milliers de personnes dans le développement de leurs compétences, de leur expérience et de leur trajectoire professionnelle à travers des projets réels, des accompagnements structurés et un modèle unique d'apprentissage par l'action.
|
||||
</p>
|
||||
<p className="font-medium text-[#1f2937]">
|
||||
Rejoindre gaea21 ne consiste pas simplement à intégrer un projet.<br />
|
||||
C'est rejoindre un écosystème conçu pour apprendre, expérimenter, contribuer et grandir.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bandeau beige + Bouton pilule Figma */}
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-5">
|
||||
{/* Boîte beige claire avec bordure discrète */}
|
||||
<div className="w-full lg:flex-1 bg-[#edeade]/80 rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-6 border border-[#e2dec9]">
|
||||
|
||||
{/* Approche systémique */}
|
||||
<div className="text-center md:text-left">
|
||||
<span className="text-xs sm:text-[13px] font-semibold text-[#1e293b] block">
|
||||
Une approche systémique et humaine
|
||||
</span>
|
||||
<span className="text-[11px] text-[#6b7280]">
|
||||
pour des résultats concrets et durables
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Ligne séparatrice */}
|
||||
<div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />
|
||||
|
||||
{/* Stat 1 : 20 + ans (Icône Cible au trait noir/anthracite sans cercle) */}
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className="w-7 h-7 text-[#1e293b] shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<circle cx="12" cy="12" r="6" />
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
</svg>
|
||||
<div>
|
||||
<span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
|
||||
20 + ans
|
||||
</span>
|
||||
<span className="text-[10px] text-[#6b7280]">
|
||||
d'accompagnement
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ligne séparatrice */}
|
||||
<div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />
|
||||
|
||||
{/* Stat 2 : 3 000 + (Icône 3 personnes au trait noir/anthracite sans cercle) */}
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className="w-7 h-7 text-[#1e293b] shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<div>
|
||||
<span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
|
||||
3 000 +
|
||||
</span>
|
||||
<span className="text-[10px] text-[#6b7280]">
|
||||
personnes accompagnées
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bouton style PILULE arrondi (rounded-full) fidèle à Figma */}
|
||||
<Link
|
||||
to="/#participer"
|
||||
className="w-full lg:w-auto text-center shrink-0 bg-[#7a8035] hover:bg-[#686d2b] text-white px-7 py-3.5 rounded-full text-xs sm:text-[13px] font-semibold tracking-wide transition-all shadow-sm hover:shadow whitespace-nowrap"
|
||||
>
|
||||
Découvrir les opportunités →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========================================================
|
||||
PARTIE 2 : QUI SOMMES-NOUS ? / QU'EST-CE QUE GAEA21 ?
|
||||
======================================================== */}
|
||||
<div className="pt-6">
|
||||
{/* Petite barre de soulignement verte */}
|
||||
<div className="w-12 h-1 bg-[#7a8035] rounded-full mb-6" />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
{/* Texte de gauche */}
|
||||
<div className="lg:col-span-7 space-y-5">
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-wider text-[#7a8035] font-bold block mb-2">
|
||||
Qui sommes-nous ?
|
||||
</span>
|
||||
<h3 className="text-2xl sm:text-3xl font-extrabold text-[#111827] tracking-tight uppercase">
|
||||
QU'EST-CE QUE GAEA21 ?
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
|
||||
<p>
|
||||
gaea21 est un centre de recherche appliquée, d'innovation, de développement durable et d'insertion professionnelle.
|
||||
</p>
|
||||
<p>
|
||||
Notre mission est de créer des ponts entre :
|
||||
</p>
|
||||
<ul className="list-disc pl-5 space-y-1 text-[#374151]">
|
||||
<li>la formation et l'emploi ;</li>
|
||||
<li>les compétences et les opportunités ;</li>
|
||||
<li>les individus et les organisations ;</li>
|
||||
<li>les projets et les territoires ;</li>
|
||||
<li>le développement humain et le développement durable.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Depuis plus de vingt ans, nous développons des projets réels permettant aux participants d'acquérir une expérience concrète tout en contribuant à des enjeux réels.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cercle avec l'équipe de travail */}
|
||||
<div className="lg:col-span-5 flex justify-center lg:justify-end">
|
||||
<div className="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 rounded-full overflow-hidden shadow-md border-4 border-white">
|
||||
<img
|
||||
src={teamImg}
|
||||
alt="Équipe gaea21 en réunion de travail"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
143
assets/components/parcours/QuiPeutRejoindre.jsx
Normal file
143
assets/components/parcours/QuiPeutRejoindre.jsx
Normal file
@ -0,0 +1,143 @@
|
||||
import React from 'react';
|
||||
|
||||
// Imports des icônes fournies (ajuste le chemin vers ton dossier d'images)
|
||||
import etudiantIcon from '../../img/etudiant.png';
|
||||
import expertIcon from '../../img/expert.png';
|
||||
import entrepreneurIcon from '../../img/entrepreneur.png';
|
||||
import personneIcon from '../../img/personne.png';
|
||||
import professionnelsIcon from '../../img/professionnels.png';
|
||||
import retraiteIcon from '../../img/retraite.png';
|
||||
|
||||
// Données organisées par colonnes pour respecter la hauteur et l'agencement Figma
|
||||
const COLUMNS_DATA = [
|
||||
{
|
||||
colId: 'col-1',
|
||||
cards: [
|
||||
{
|
||||
id: 'etudiants',
|
||||
title: 'Étudiants',
|
||||
description:
|
||||
'Pour réaliser un stage, développer une première expérience professionnelle ou compléter leur formation.',
|
||||
icon: etudiantIcon,
|
||||
},
|
||||
{
|
||||
id: 'personnes-transition',
|
||||
title: 'Personnes en transition',
|
||||
isList: true,
|
||||
listItems: [
|
||||
'Retour à l’emploi.',
|
||||
'Reconversion.',
|
||||
'Réorientation.',
|
||||
'Évolution professionnelle.',
|
||||
],
|
||||
icon: personneIcon,
|
||||
isTall: true, // Carte plus haute
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
colId: 'col-2',
|
||||
cards: [
|
||||
{
|
||||
id: 'jeunes-diplomes',
|
||||
title: 'Jeunes diplômés',
|
||||
description:
|
||||
'Pour renforcer leur employabilité et préparer leur entrée sur le marché du travail.',
|
||||
icon: etudiantIcon, // Ou l'icône jeune diplômé si distincte
|
||||
},
|
||||
{
|
||||
id: 'entrepreneurs',
|
||||
title: 'Entrepreneurs',
|
||||
description:
|
||||
'Pour développer un projet, une activité ou une initiative à impact.',
|
||||
icon: entrepreneurIcon,
|
||||
},
|
||||
{
|
||||
id: 'retraites',
|
||||
title: 'Retraités',
|
||||
description:
|
||||
'Pour mettre leur expérience au service de projets utiles et porteurs de sens.',
|
||||
icon: retraiteIcon,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
colId: 'col-3',
|
||||
cards: [
|
||||
{
|
||||
id: 'professionnels',
|
||||
title: 'Professionnels',
|
||||
description:
|
||||
'Pour développer de nouvelles compétences, élargir leur expérience ou préparer une évolution de carrière.',
|
||||
icon: professionnelsIcon,
|
||||
},
|
||||
{
|
||||
id: 'experts-specialistes',
|
||||
title: 'Experts et spécialistes',
|
||||
description:
|
||||
'Pour transmettre leurs compétences, accompagner des projets, bénéficier de mandats ou contribuer à l’écosystème.',
|
||||
icon: expertIcon,
|
||||
isTall: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function QuiPeutRejoindre() {
|
||||
return (
|
||||
<section className="w-full bg-[#fbfbf9] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20 font-sans">
|
||||
<div className="max-w-[1320px] mx-auto">
|
||||
{/* Trait de repère vert olive */}
|
||||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
|
||||
|
||||
{/* Titre de section */}
|
||||
<h2 className="text-2xl sm:text-3xl font-extrabold text-[#111827] uppercase tracking-tight mb-10">
|
||||
QUI PEUT <span className="text-[#7a8035]">REJOINDRE</span> GAEA21 ?
|
||||
</h2>
|
||||
|
||||
{/* Grille 3 colonnes responsive */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
|
||||
{COLUMNS_DATA.map((column) => (
|
||||
<div key={column.colId} className="flex flex-col gap-6">
|
||||
{column.cards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`rounded-2xl border border-[#e5e2d6] bg-white p-6 flex items-start gap-4 transition-all duration-200 shadow-sm hover:shadow-md ${card.isTall ? 'min-h-[190px]' : ''
|
||||
}`}
|
||||
>
|
||||
{/* Icône PNG dédiée */}
|
||||
<img
|
||||
src={card.icon}
|
||||
alt={card.title}
|
||||
className="w-12 h-12 object-contain shrink-0"
|
||||
/>
|
||||
|
||||
{/* Contenu textuel */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base sm:text-lg font-bold text-[#111827] mb-2 leading-snug">
|
||||
{card.title}
|
||||
</h3>
|
||||
|
||||
{card.isList ? (
|
||||
<ul className="space-y-1.5 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed">
|
||||
{card.listItems.map((item, idx) => (
|
||||
<li key={idx} className="list-none">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-xs sm:text-[13px] text-[#6b7280] leading-relaxed">
|
||||
{card.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user