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)
89 lines
3.8 KiB
JavaScript
89 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
|
|
// Icône de groupe déjà utilisée dans les acteurs
|
|
import iconeGroup from '../../img/x1.png';
|
|
|
|
// SVG de la mallette avec le contour vert identique à la maquette
|
|
const BriefcaseIcon = () => (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="#8c8f3e"
|
|
strokeWidth="1.8"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="w-7 h-7 sm:w-8 sm:h-8"
|
|
>
|
|
<rect width="20" height="14" x="2" y="7" rx="2" />
|
|
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
|
|
<line x1="2" x2="22" y1="12" y2="12" />
|
|
<circle cx="12" cy="12" r="1.5" fill="#8c8f3e" />
|
|
</svg>
|
|
);
|
|
|
|
const SKILLS = [
|
|
// Ligne 1
|
|
{ title: 'Expérience professionnelle', isGroup: false },
|
|
{ title: 'Employabilité', isGroup: true },
|
|
{ title: 'Gestion de projet', isGroup: false },
|
|
{ title: 'Communication', isGroup: false },
|
|
{ title: 'Intelligence émotionnelle', isGroup: false },
|
|
{ title: 'Leadership', isGroup: false },
|
|
{ title: 'Développement durable', isGroup: false },
|
|
{ title: 'Gestion durable', isGroup: false },
|
|
// Ligne 2
|
|
{ title: 'Recherche appliquée', isGroup: false },
|
|
{ title: 'Pensée systémique', isGroup: false },
|
|
{ title: 'Collaboration', isGroup: false },
|
|
{ title: 'Résolution de problèmes', isGroup: false },
|
|
{ title: 'Développement commercial', isGroup: false },
|
|
{ title: 'Autonomie', isGroup: false },
|
|
{ title: 'Confiance', isGroup: false },
|
|
{ title: 'Réseau professionnel', isGroup: false },
|
|
];
|
|
|
|
export default function CeQueVousDeveloppez() {
|
|
return (
|
|
<section className="w-full bg-[#ffffff] 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">
|
|
|
|
{/* En-tête */}
|
|
<div className="text-left mb-12 sm:mb-16">
|
|
<div className="w-12 h-1 bg-[#475734] rounded-full mb-5" />
|
|
<h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold uppercase tracking-tight text-[#111827]">
|
|
CE QUE VOUS DÉVELOPPEZ
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Grille des compétences : 2 sur mobile, 4 sur tablette, 8 sur desktop */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-y-10 sm:gap-y-12 gap-x-4 sm:gap-x-6 justify-items-center">
|
|
{SKILLS.map((skill, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col items-center text-center w-full max-w-[125px]"
|
|
>
|
|
{/* Cercle avec bordure verte olive fine */}
|
|
<div className="w-16 h-16 sm:w-[72px] sm:h-[72px] rounded-full border-2 border-[#8c8f3e] bg-white flex items-center justify-center p-2 mb-3 shadow-xs">
|
|
{skill.isGroup ? (
|
|
<img
|
|
src={iconeGroup}
|
|
alt={skill.title}
|
|
className="w-7 h-7 sm:w-8 sm:h-8 object-contain"
|
|
/>
|
|
) : (
|
|
<BriefcaseIcon />
|
|
)}
|
|
</div>
|
|
|
|
{/* Libellé de la compétence */}
|
|
<p className="text-[11px] sm:text-xs font-bold text-[#111827] leading-tight select-none">
|
|
{skill.title}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
} |