feat(parcours): intégration des sections équipe d'accompagnement, télétravail et compétences

- 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)
This commit is contained in:
MohamedLoum1001
2026-10-07 13:01:19 +02:00
parent c94227c534
commit 55d15922a9
20 changed files with 293 additions and 3 deletions

View File

@ -0,0 +1,72 @@
import React from 'react';
// Import de l'image de la section télétravail exportée de Figma
import teletravailImg from '../../img/teletravail.png';
export default function TeletravailCompetence() {
return (
<section className="w-full bg-[#fbfbf9] 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 compétences (5 cols) */}
{/* ========================================================= */}
<div className="lg:col-span-5 text-left">
{/* Trait vert horizontal */}
<div className="w-12 h-1 bg-[#4B6A4A] rounded-full mb-6" />
{/* Titre principal en gras/majuscules */}
<h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold uppercase text-[#111827] leading-tight mb-5">
LE TÉLÉTRAVAIL COMME COMPÉTENCE
</h2>
{/* Paragraphe d'introduction */}
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-1">
Depuis plus de vingt ans, gaea21 développe des méthodes de collaboration à distance.
</p>
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2.5">
Les participants apprennent notamment à :
</p>
{/* Liste à puces */}
<ul className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-6">
{[
'organiser leur travail ;',
'gérer leur temps ;',
'communiquer efficacement ;',
'collaborer à distance ;',
'développer leur autonomie ;',
'maintenir leur efficacité dans un environnement distribué.',
].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">
Ces compétences sont aujourd’hui recherchées dans de nombreux secteurs.
</p>
</div>
{/* ========================================================= */}
{/* 2. Colonne DROITE : Visuel télétravail / visio (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={teletravailImg}
alt="Le télétravail comme compétence chez gaea21"
className="w-full h-auto object-cover block select-none"
/>
</div>
</div>
</div>
</div>
</section>
);
}