feat(parcours): intégration des sections de la page Parcours conforme à Figma
- Prise en charge du thème sombre du Header sur la route /parcours - Ajout de la section Hero et présentation des chiffres clés - Grille des profils 'Qui peut rejoindre' avec méthode map() et icônes - Intégration de la timeline verticale des étapes d'intégration - Ajout du bandeau 'Learning by Doing' - Restructuration des composants par dossier
This commit is contained in:
65
assets/components/trajectoire/ExemplesProjets.jsx
Normal file
65
assets/components/trajectoire/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 vert */}
|
||||
<span className="projets-uptitle">Quelques exemples de projets</span>
|
||||
|
||||
{/* Grille des 6 cartes via .map() */}
|
||||
<div className="projets-cards-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 CTA */}
|
||||
<div className="projets-action-wrap">
|
||||
<a href="#projets" className="btn-projets-decouvrir">
|
||||
Découvrez les projets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user