feat(trajectoire): intégration complète de la page et des sous-composants Figma
This commit is contained in:
MohamedLoum1001
@ -1,80 +1,144 @@
|
||||
import React from 'react';
|
||||
import heroTrajectoireImg from '../img/img-traject-banner.png';
|
||||
import HuitTrajectoires from './HuitTrajectoires';
|
||||
import HumanEmploymentModel from './HumanEmploymentModel';
|
||||
import MethodologieEtapes from './MethodologieEtapes';
|
||||
import LearningByDoing from './LearningByDoing';
|
||||
import ExemplesProjets from './ExemplesProjets';
|
||||
import CompetencesEvoluer from './CompetencesEvoluer';
|
||||
import '../styles/trajectoire.css';
|
||||
import '../styles/huitTrajectoires.css';
|
||||
|
||||
export default function ConstruireTrajectoire() {
|
||||
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 (
|
||||
<div className="trajectoire-page">
|
||||
{/* 1. Hero */}
|
||||
<section
|
||||
className="trajectoire-hero"
|
||||
style={{ backgroundImage: `url("${heroTrajectoireImg}")` }}
|
||||
>
|
||||
<div className="trajectoire-overlay" />
|
||||
<div className="trajectoire-hero-content">
|
||||
<div className="trajectoire-text-wrapper">
|
||||
<h1 className="trajectoire-title">
|
||||
Construire sa <br />
|
||||
trajectoire.
|
||||
</h1>
|
||||
<div className="trajectoire-paragraphs">
|
||||
<p>Parfois, nous savons exactement où nous voulons aller.</p>
|
||||
<p>Parfois, nous savons simplement que nous ne pouvons plus rester là où nous sommes.</p>
|
||||
<p>Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.</p>
|
||||
<p>Non pas en leur proposant une solution unique.</p>
|
||||
</div>
|
||||
<div className="trajectoire-cta-group">
|
||||
<a href="#questionnaire" className="btn-trajectoire-primary">
|
||||
Trouver ma trajectoire
|
||||
</a>
|
||||
<a href="#approche" className="btn-trajectoire-secondary">
|
||||
Découvrir notre approche
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* 2. Questionnaire Intro */}
|
||||
<section className="trajectoire-intro-questions" id="questionnaire">
|
||||
<div className="trajectoire-questions-container">
|
||||
<span className="trajectoire-subtitle-green">
|
||||
Trouvons ensemble la trajectoire qui vous correspond
|
||||
</span>
|
||||
<h2 className="trajectoire-heading-black">
|
||||
Répondez à quelques questions.
|
||||
</h2>
|
||||
<div className="trajectoire-action-wrapper">
|
||||
<a href="#demarrer" className="btn-trajectoire-commencer">
|
||||
Commencer
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Les 8 Trajectoires */}
|
||||
<HuitTrajectoires />
|
||||
|
||||
{/* 4. Approche Human Employment Model */}
|
||||
<HumanEmploymentModel />
|
||||
|
||||
{/* 5. Méthodologie en 6 Étapes */}
|
||||
<MethodologieEtapes />
|
||||
|
||||
{/* 6. Learning by Doing */}
|
||||
<LearningByDoing />
|
||||
|
||||
{/* 7. Exemples de projets */}
|
||||
<ExemplesProjets />
|
||||
|
||||
{/* 8. Des compétences pour évoluer */}
|
||||
<CompetencesEvoluer />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user