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
55
assets/components/trajectoire/AlumniCommunaute.jsx
Normal file
55
assets/components/trajectoire/AlumniCommunaute.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import alumniImg from '../../img/alumni-meeting.png'; // Place l'image exportée de Figma dans assets/img/
|
||||
import '../../styles/alumniCommunaute.css';
|
||||
|
||||
const COLONNE_GAUCHE = [
|
||||
'Développez votre réseau.',
|
||||
'Partagez votre expérience.',
|
||||
'Contribuez à des projets.'
|
||||
];
|
||||
|
||||
const COLONNE_DROITE = [
|
||||
'Participez à des communautés de pratique.',
|
||||
'Découvrez de nouvelles opportunités.',
|
||||
'Créez de nouvelles opportunités.'
|
||||
];
|
||||
|
||||
export default function AlumniCommunaute() {
|
||||
return (
|
||||
<section className="alumni-section" id="communaute">
|
||||
<div className="alumni-container">
|
||||
|
||||
{/* 1. Grande photo arrondie */}
|
||||
<div className="alumni-media">
|
||||
<img
|
||||
src={alumniImg}
|
||||
alt="Membres de la communauté gaea21 en réunion de travail"
|
||||
className="alumni-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2. Bloc textuel sous l'image */}
|
||||
<div className="alumni-content">
|
||||
<p className="alumni-intro-title">
|
||||
La fin d’une trajectoire ne marque pas la fin de l’aventure.
|
||||
</p>
|
||||
|
||||
<div className="alumni-columns-grid">
|
||||
<ul className="alumni-list">
|
||||
{COLONNE_GAUCHE.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<ul className="alumni-list">
|
||||
{COLONNE_DROITE.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
53
assets/components/trajectoire/CompetencesEvoluer.jsx
Normal file
53
assets/components/trajectoire/CompetencesEvoluer.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import '../../styles/competences-evoluer.css';
|
||||
|
||||
const COMPETENCES_DATA = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Compétences professionnelles",
|
||||
content: "Gestion de projet. Communication. Coordination. Recherche appliquée. Organisation. Développement commercial. Leadership. Gestion durable. Développement durable. Pensée stratégique."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Compétences humaines",
|
||||
content: "Confiance. Autonomie. Résilience. Adaptabilité. Intelligence émotionnelle. Leadership. Collaboration. Prise de décision. Gestion du changement."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Vision systémique",
|
||||
intro: "Comprendre les liens entre :",
|
||||
content: "les individus, les organisations, l'économie, les territoires, les communautés, les projets, et les enjeux de transition."
|
||||
}
|
||||
];
|
||||
|
||||
export default function CompetencesEvoluer() {
|
||||
return (
|
||||
<section className="competences-section" id="competences-evoluer">
|
||||
<div className="competences-container">
|
||||
|
||||
{/* Trait vert au-dessus */}
|
||||
<div className="competences-green-line" aria-hidden="true" />
|
||||
|
||||
{/* En-tête */}
|
||||
<span className="competences-tag-top">Les trajectoires</span>
|
||||
<h2 className="competences-main-title">
|
||||
Des compétences pour évoluer.
|
||||
</h2>
|
||||
|
||||
{/* Grille des 3 cartes blanches avec .map() */}
|
||||
<div className="competences-grid">
|
||||
{COMPETENCES_DATA.map((item) => (
|
||||
<article key={item.id} className="competence-card">
|
||||
<h3 className="competence-card-title">{item.title}</h3>
|
||||
{item.intro && (
|
||||
<p className="competence-card-intro">{item.intro}</p>
|
||||
)}
|
||||
<p className="competence-card-text">{item.content}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
85
assets/components/trajectoire/ConstruireTrajectoire.jsx
Normal file
85
assets/components/trajectoire/ConstruireTrajectoire.jsx
Normal file
@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
import heroTrajectoireImg from'../../img/img-traject-banner.png';
|
||||
import HuitTrajectoires from '../trajectoire/HuitTrajectoires';
|
||||
import HumanEmploymentModel from '../trajectoire/HumanEmploymentModel';
|
||||
import MethodologieEtapes from '../trajectoire/MethodologieEtapes';
|
||||
import LearningByDoing from '../trajectoire/LearningByDoing';
|
||||
import '../../styles/trajectoire.css';
|
||||
import ExemplesProjets from '../trajectoire/ExemplesProjets';
|
||||
import CompetencesEvoluer from '../trajectoire/CompetencesEvoluer';
|
||||
import TrajectoireJamaisFigee from '../trajectoire/TrajectoireJamaisFigee';
|
||||
import AlumniCommunaute from '../trajectoire/AlumniCommunaute';
|
||||
import Footer from '../Footer';
|
||||
|
||||
export default function ConstruireTrajectoire() {
|
||||
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>
|
||||
</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 />
|
||||
{/* 9. Une trajectoire n'est jamais figée */}
|
||||
<TrajectoireJamaisFigee />
|
||||
{/* 10. Communauté & fin de parcours */}
|
||||
<AlumniCommunaute />
|
||||
|
||||
{/* 11. Footer global du site */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
77
assets/components/trajectoire/HumanEmploymentModel.jsx
Normal file
77
assets/components/trajectoire/HumanEmploymentModel.jsx
Normal file
@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import hemBannerImg from '../../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
|
||||
import '../../styles/human-employment.css';
|
||||
|
||||
const DIMENSIONS_DATA = [
|
||||
{
|
||||
id: 1,
|
||||
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.']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
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.']
|
||||
}
|
||||
];
|
||||
|
||||
export default function HumanEmploymentModel() {
|
||||
return (
|
||||
<section className="hem-section" id="approche">
|
||||
<div className="hem-container">
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 4 Cartes de dimensions */}
|
||||
<div className="hem-cards-grid">
|
||||
{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>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
40
assets/components/trajectoire/LearningByDoing.jsx
Normal file
40
assets/components/trajectoire/LearningByDoing.jsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import '../../styles/learning-by-doing.css';
|
||||
import plantBannerImg from '../../img/learning-by-doing.png'; // ou learning-by-doing.png
|
||||
|
||||
export default function LearningByDoing() {
|
||||
return (
|
||||
<section className="lbd-section" id="learning-by-doing">
|
||||
<div className="lbd-container">
|
||||
|
||||
{/* Trait vert au-dessus */}
|
||||
<div className="lbd-green-line" aria-hidden="true" />
|
||||
|
||||
{/* Surtitre */}
|
||||
<span className="lbd-tag-top">Les trajectoires</span>
|
||||
|
||||
{/* Titre principal */}
|
||||
<h2 className="lbd-main-title">
|
||||
Le Learning by Doing au cœur de l'expérience.
|
||||
</h2>
|
||||
|
||||
{/* Paragraphe descriptif conforme au Figma */}
|
||||
<p className="lbd-description">
|
||||
Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.
|
||||
Non pas en leur proposant une solution unique, mais en les aidant à comprendre leur situation, identifier leurs forces,
|
||||
développer leurs compétences, acquérir de l'expérience et construire une trajectoire cohérente avec leurs aspirations et la réalité du monde qui les entoure.
|
||||
</p>
|
||||
|
||||
{/* Image bannière arrondie */}
|
||||
<div className="lbd-image-wrapper">
|
||||
<img
|
||||
src={plantBannerImg}
|
||||
alt="Le Learning by Doing au cœur de l'expérience - gaea21"
|
||||
className="lbd-banner-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
87
assets/components/trajectoire/MethodologieEtapes.jsx
Normal file
87
assets/components/trajectoire/MethodologieEtapes.jsx
Normal file
@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import '../../styles/methodologie-etapes.css';
|
||||
|
||||
// Import des 6 icônes
|
||||
import iconSearch from '../../img/Search.png';
|
||||
import iconUser from '../../img/User Account.png';
|
||||
import iconWrench from '../../img/Frame 715.png';
|
||||
import iconPlant from '../../img/Tree Planting.png';
|
||||
import iconElectrical from '../../img/Electrical.png';
|
||||
import iconCycle from '../../img/Frame 719.png';
|
||||
|
||||
const ETAPES_DATA = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Comprendre",
|
||||
description: "Identifier votre situation, vos aspirations, vos compétences et vos besoins.",
|
||||
icon: iconSearch,
|
||||
hasCircleBg: false // L'icône est brute, on lui applique le cercle CSS
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Structurer",
|
||||
description: "Construire une trajectoire réaliste, progressive et durable.",
|
||||
icon: iconUser,
|
||||
hasCircleBg: false
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Expérimenter",
|
||||
description: "Développer des compétences à travers des projets réels.",
|
||||
icon: iconWrench,
|
||||
hasCircleBg: true // Frame 715 contient déjà son cercle de fond
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Développer",
|
||||
description: "Renforcer son autonomie, ses capacités d'action et son leadership.",
|
||||
icon: iconPlant,
|
||||
hasCircleBg: false
|
||||
},
|
||||
{
|
||||
step: "05",
|
||||
title: "Connecter",
|
||||
description: "S'inscrire dans un écosystème bienveillant et activer son réseau.",
|
||||
icon: iconElectrical,
|
||||
hasCircleBg: false
|
||||
},
|
||||
{
|
||||
step: "06",
|
||||
title: "Évoluer",
|
||||
description: "Mesurer l'impact de sa transition et pérenniser son parcours.",
|
||||
icon: iconCycle,
|
||||
hasCircleBg: true // Frame 719 contient déjà son cercle de fond
|
||||
}
|
||||
];
|
||||
|
||||
export default function MethodologieEtapes() {
|
||||
return (
|
||||
<section className="etapes-section">
|
||||
<div className="etapes-container">
|
||||
<div className="etapes-grid">
|
||||
{ETAPES_DATA.map((item) => (
|
||||
<div key={item.step} className="etape-item">
|
||||
|
||||
{/* Conteneur cercle + badge numéro */}
|
||||
<div className="etape-circle-wrapper">
|
||||
<div className={`etape-circle ${item.hasCircleBg ? 'transparent-bg' : ''}`}>
|
||||
<img
|
||||
src={item.icon}
|
||||
alt={item.title}
|
||||
className="etape-icon-img"
|
||||
/>
|
||||
</div>
|
||||
<span className="etape-badge">{item.step}</span>
|
||||
</div>
|
||||
|
||||
{/* Titre et description */}
|
||||
<h3 className="etape-title">{item.title}</h3>
|
||||
<p className="etape-desc">{item.description}</p>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
54
assets/components/trajectoire/TrajectoireJamaisFigee.jsx
Normal file
54
assets/components/trajectoire/TrajectoireJamaisFigee.jsx
Normal file
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import routeImg from '../../img/trajectoire-route.png'; // Place ton image exportée de Figma dans assets/img/
|
||||
import '../../styles/trajectoireJamaisFigee.css';
|
||||
|
||||
const TEXTES_TRANSITIONS = [
|
||||
'Un étudiant peut devenir coordinateur.',
|
||||
'Un coordinateur peut devenir référent.',
|
||||
'Un référent peut devenir entrepreneur.',
|
||||
'Un entrepreneur peut devenir mentor.',
|
||||
'Une personne en reconversion peut découvrir une vocation inattendue.',
|
||||
'Une première expérience peut ouvrir une carrière entière.'
|
||||
];
|
||||
|
||||
export default function TrajectoireJamaisFigee() {
|
||||
return (
|
||||
<section className="trajectoire-figee-section" id="trajectoire-evolutive">
|
||||
<div className="trajectoire-figee-container">
|
||||
|
||||
{/* Colonne gauche : Contenu textuel */}
|
||||
<div className="trajectoire-figee-content">
|
||||
<header className="trajectoire-figee-header">
|
||||
<span className="trajectoire-figee-line" aria-hidden="true" />
|
||||
<span className="trajectoire-figee-uptitle">Les trajectoires</span>
|
||||
<h2 className="trajectoire-figee-title">Une trajectoire n'est jamais figée.</h2>
|
||||
</header>
|
||||
|
||||
<div className="trajectoire-figee-list">
|
||||
{TEXTES_TRANSITIONS.map((texte, idx) => (
|
||||
<p key={idx} className="trajectoire-figee-step">{texte}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="trajectoire-figee-conclusion">
|
||||
<p>
|
||||
C'est pourquoi les trajectoires gaea21<br />
|
||||
ne sont pas conçues comme des programmes isolés. Elles sont conçues comme des étapes<br />
|
||||
d'un parcours d'évolution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Colonne droite : Image route */}
|
||||
<div className="trajectoire-figee-media">
|
||||
<img
|
||||
src={routeImg}
|
||||
alt="Route sinueuse traversant la nature"
|
||||
className="trajectoire-figee-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user