77 lines
3.0 KiB
JavaScript
77 lines
3.0 KiB
JavaScript
import React from 'react';
|
||
import hemBannerImg from '../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
|
||
import '../styles/human-employment.css';
|
||
|
||
const DIMENSIONS_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-section" id="approche">
|
||
<div className="hem-container">
|
||
|
||
{/* Trait vert olive + Titre de section */}
|
||
<header className="hem-header">
|
||
<span className="hem-line" aria-hidden="true" />
|
||
<span className="hem-uptitle">Les trajectoires</span>
|
||
<h2 className="hem-main-title">Huit trajectoires pour huit réalités.</h2>
|
||
<p className="hem-intro-text">
|
||
Chez gaea21, nous ne considérons pas l’insertion, l’emploi ou l’entrepreneuriat comme des objectifs isolés.<br />
|
||
Nous considérons que les trajectoires durables se construisent lorsque plusieurs dimensions évoluent ensemble.
|
||
</p>
|
||
</header>
|
||
|
||
{/* 4 Cartes de dimensions */}
|
||
<div className="hem-cards-grid">
|
||
{DIMENSIONS_DATA.map((card) => (
|
||
<article key={card.id} className="hem-card">
|
||
<h3 className="hem-card-title">{card.title}</h3>
|
||
<div className="hem-card-content">
|
||
{card.items.map((line, idx) => (
|
||
<p key={idx}>{line}</p>
|
||
))}
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
{/* Conclusion / Phrase clé */}
|
||
<footer className="hem-footer">
|
||
<p className="hem-footer-text">
|
||
C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
|
||
</p>
|
||
</footer>
|
||
|
||
{/* Grande Image Bannière (Mains et cubes en bois) */}
|
||
<div className="hem-banner-wrapper">
|
||
<img
|
||
src={hemBannerImg}
|
||
alt="Construction et modélisation humaine gaea21"
|
||
className="hem-banner-image"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
} |