bb1393e9ef
- 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
143 lines
6.2 KiB
JavaScript
143 lines
6.2 KiB
JavaScript
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>
|
||
);
|
||
} |