feat(trajectoire): intégration complète de la page Construire sa trajectoire
- 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)
This commit is contained in:
65
assets/components/ExemplesProjets.jsx
Normal file
65
assets/components/ExemplesProjets.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import '../styles/exemples-projets.css';
|
||||
|
||||
const PROJETS_DATA = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Répertoire Vert",
|
||||
description: "Développer l'économie locale durable."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Green Index",
|
||||
description: "Construire des outils d'évaluation et de transition."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Recherche appliquée",
|
||||
description: "Transformer les connaissances en solutions concrètes."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Développement commercial",
|
||||
description: "Créer des liens entre projets, entreprises et opportunités."
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Innovation territoriale",
|
||||
description: "Contribuer à la transformation des territoires."
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Programmes de développement international",
|
||||
description: "Participer à des initiatives liées à l'agriculture durable, à la création d'emplois, à la recherche et au développement territorial."
|
||||
}
|
||||
];
|
||||
|
||||
export default function ExemplesProjets() {
|
||||
return (
|
||||
<section className="projets-section" id="exemples-projets">
|
||||
<div className="projets-container">
|
||||
|
||||
{/* Surtitre */}
|
||||
<span className="projets-tag-top">Quelques exemples de projets</span>
|
||||
|
||||
{/* Grille des 6 projets avec .map() */}
|
||||
<div className="projets-grid">
|
||||
{PROJETS_DATA.map((projet) => (
|
||||
<article key={projet.id} className="projet-card">
|
||||
<h3 className="projet-card-title">{projet.title}</h3>
|
||||
<p className="projet-card-desc">{projet.description}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bouton d'action CTA */}
|
||||
<div className="projets-action">
|
||||
<a href="#tous-les-projets" className="btn-decouvrir-projets">
|
||||
Découvrez les projets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user