cd6a66893a
- Implémentation des composants React (8 trajectoires, Human Employment Model, méthodologie 6 étapes, Learning by Doing, exemples de projets, compétences) - Rendu dynamique des cartes via .map() - Configuration du routage SPA dans Symfony (route catch-all) et React Router (Header Link) - Ajustements graphiques et CSS conformes au Figma (#F4F1EA, vert olive)
70 lines
2.5 KiB
JavaScript
70 lines
2.5 KiB
JavaScript
import React from 'react';
|
||
import '../styles/human-employment.css';
|
||
import hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image
|
||
|
||
const PILLIERS_DATA = [
|
||
{
|
||
id: 1,
|
||
title: "La personne",
|
||
items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "Les compétences",
|
||
items: ["Celles qu'elle possède déjà.", "Celles qu'elle doit développer."]
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "L'expérience",
|
||
items: ["Les projets.", "Les réalisations.", "Les responsabilités."]
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "Le réseau",
|
||
items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
|
||
}
|
||
];
|
||
|
||
export default function HumanEmploymentModel() {
|
||
return (
|
||
<section className="hem-wrapper">
|
||
<div className="hem-inner">
|
||
|
||
{/* Paragraphe descriptif */}
|
||
<p className="hem-description">
|
||
Chaque parcours est unique et ne peut pas se réduire à un simple intitulé de poste.
|
||
Nous considérons que les trajectoires durables se construisent lorsque quatre dimensions essentielles s'articulent.
|
||
</p>
|
||
|
||
{/* Grille forcée sur 4 colonnes */}
|
||
<div className="hem-cards-grid">
|
||
{PILLIERS_DATA.map((p) => (
|
||
<div key={p.id} className="hem-card">
|
||
<h3 className="hem-card-title">{p.title}</h3>
|
||
<ul className="hem-card-list">
|
||
{p.items.map((it, idx) => (
|
||
<li key={idx}>{it}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Phrase d'accroche */}
|
||
<p className="hem-phrase">
|
||
C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
|
||
</p>
|
||
|
||
{/* Cadre de l'image */}
|
||
<div className="hem-banner-container">
|
||
<img
|
||
src={hemImg}
|
||
alt="Human Employment Model Table"
|
||
className="hem-banner-img"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
} |