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:
MohamedLoum1001
144
assets/components/trajectoire/HuitTrajectoires.jsx
Normal file
144
assets/components/trajectoire/HuitTrajectoires.jsx
Normal file
@ -0,0 +1,144 @@
|
||||
import React from 'react';
|
||||
import '../../styles/huitTrajectoires.css';
|
||||
|
||||
const TRAJECTOIRES = [
|
||||
{
|
||||
id: 1,
|
||||
color: '#436034', // Vert foncé
|
||||
tag: 'Trouver un emploi',
|
||||
title: 'Insertion Professionnelle',
|
||||
points: [
|
||||
'Transformer ses compétences, son savoir-faire et ses opportunités professionnelles.',
|
||||
'Développer son employabilité.',
|
||||
'Construire son positionnement.',
|
||||
'Accéder au marché du travail.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: '#3B82F6', // Bleu
|
||||
tag: 'Réaliser un stage ou acquérir une première expérience',
|
||||
title: 'Étudiants, Stages & Première Expérience Professionnelle',
|
||||
points: [
|
||||
'Transformer des études en expérience professionnelle.',
|
||||
'Développer des compétences concrètes.',
|
||||
'Construire un premier réseau.',
|
||||
'Découvrir des métiers.',
|
||||
'Préparer son entrée dans la vie professionnelle.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: '#F59E0B', // Jaune ambré
|
||||
tag: 'Revenir après une interruption',
|
||||
title: 'Retour à l’Emploi',
|
||||
points: [
|
||||
'Retrouver progressivement le rythme après une maladie, un burn-out, un congé parental, un accident de vie ou un changement de situation personnelle.',
|
||||
'Retrouver la confiance.',
|
||||
'Réactiver son réseau.',
|
||||
'Réactiver ses projets.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
color: '#EA580C', // Orange
|
||||
tag: 'Me reconvertir',
|
||||
title: 'Reconversion Professionnelle',
|
||||
points: [
|
||||
'Réinventer un nouveau chapitre professionnel sans repartir de zéro.',
|
||||
'Explorer de nouvelles possibilités.',
|
||||
'Transformer ses acquis.',
|
||||
'Développer les compétences nécessaires à son nouveau métier.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
color: '#8B5CF6', // Violet
|
||||
tag: 'Développer mes compétences',
|
||||
title: 'Compétences, Expérience & Évolution Professionnelle',
|
||||
points: [
|
||||
'Développer ses compétences.',
|
||||
'Développer des compétences recherchées.',
|
||||
'Apprendre en faisant.',
|
||||
'S’entraîner à la prise de responsabilité.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
color: '#D97706', // Ocre / Caramel
|
||||
tag: 'Construire mon projet',
|
||||
title: 'Orientation, Coaching & Construction de Trajectoire',
|
||||
points: [
|
||||
'Définir ses objectifs.',
|
||||
'Clarifier sa vision professionnelle.',
|
||||
'Identifier une direction.',
|
||||
'Structurer son évolution à court, moyen et long terme.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
color: '#1F2937', // Noir / Gris foncé
|
||||
tag: 'Développer mon leadership',
|
||||
title: 'Leadership, Coordination & Management Durable',
|
||||
points: [
|
||||
'Apprendre à coordonner.',
|
||||
'Transmettre.',
|
||||
'Développer des équipes, des projets et des visions stratégiques.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
color: '#92400E', // Brun
|
||||
tag: 'Lancer un projet ou une activité',
|
||||
title: 'Entrepreneuriat & Création d’Activité',
|
||||
points: [
|
||||
'Tester une idée, un projet, une expertise.',
|
||||
'Développer son autonomie.',
|
||||
'Créer de la valeur.',
|
||||
'Construire son activité.'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function HuitTrajectoires() {
|
||||
return (
|
||||
<section className="trajectoires-section" id="trajectoires">
|
||||
<div className="trajectoires-wrapper">
|
||||
<header className="trajectoires-header">
|
||||
<span className="trajectoires-line" aria-hidden="true"></span>
|
||||
<span className="trajectoires-uptitle">Les trajectoires</span>
|
||||
<h2 className="trajectoires-main-title">Huit trajectoires pour huit réalités.</h2>
|
||||
</header>
|
||||
|
||||
<div className="trajectoires-cards-grid">
|
||||
{TRAJECTOIRES.map((item) => (
|
||||
<article key={item.id} className="trajectoire-block-card">
|
||||
<div className="trajectoire-card-top">
|
||||
<span
|
||||
className="trajectoire-indicator-badge"
|
||||
style={{ backgroundColor: item.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="trajectoire-tagline">{item.tag}</p>
|
||||
</div>
|
||||
|
||||
<h3 className="trajectoire-item-title">{item.title}</h3>
|
||||
|
||||
<ul className="trajectoire-points-list">
|
||||
{item.points.map((point, index) => (
|
||||
<li key={index}>{point}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="trajectoire-card-footer">
|
||||
<a href="#decouvrir" className="btn-trajectoire-decouvrir">
|
||||
Découvrir
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user