gaea21_v2/gaea21-v2-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(trajectoire): intégration complète de la page et des sous-composants Figma

Browse Source
This commit is contained in:
MohamedLoum1001
2026-09-25 20:04:07 +02:00
parent cd6a66893a
commit f66e39ab09
20 changed files with 894 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
assets/components/HumanEmploymentModel.jsx
View File

@ -1,66 +1,73 @@
import React from 'react';
import hemBannerImg from '../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
import '../styles/human-employment.css';
import hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image
const PILLIERS_DATA = [
const DIMENSIONS_DATA = [
{
id: 1,
title: "La personne",
items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
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."]
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."]
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."]
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">
<section className="hem-section" id="approche">
<div className="hem-container">
{/* 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>
{/* 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>
{/* Grille forcée sur 4 colonnes */}
{/* 4 Cartes de dimensions */}
<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>
{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>
))}
</ul>
</div>
</div>
</article>
))}
</div>
{/* Phrase d'accroche */}
<p className="hem-phrase">
C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
</p>
{/* 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>
{/* Cadre de l'image */}
<div className="hem-banner-container">
<img
src={hemImg}
alt="Human Employment Model Table"
className="hem-banner-img"
{/* 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>