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
66 lines
3.6 KiB
JavaScript
66 lines
3.6 KiB
JavaScript
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>
|
||
);
|
||
} |