feat(trajectoire): intégration complète de la page et des sous-composants Figma
This commit is contained in:
MohamedLoum1001
55
assets/components/AlumniCommunaute.jsx
Normal file
55
assets/components/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>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,15 @@
|
||||
import React from 'react';
|
||||
import heroTrajectoireImg from '../img/img-traject-banner.jpg';
|
||||
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 '../styles/trajectoire.css';
|
||||
import ExemplesProjets from './ExemplesProjets';
|
||||
import CompetencesEvoluer from './CompetencesEvoluer';
|
||||
import TrajectoireJamaisFigee from './TrajectoireJamaisFigee';
|
||||
import AlumniCommunaute from './AlumniCommunaute';
|
||||
import Footer from './Footer';
|
||||
|
||||
export default function ConstruireTrajectoire() {
|
||||
return (
|
||||
@ -59,18 +63,23 @@ export default function ConstruireTrajectoire() {
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
@ -4,33 +4,33 @@ import '../styles/exemples-projets.css';
|
||||
const PROJETS_DATA = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Répertoire Vert",
|
||||
description: "Développer l'économie locale durable."
|
||||
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."
|
||||
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."
|
||||
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."
|
||||
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."
|
||||
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."
|
||||
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.'
|
||||
}
|
||||
];
|
||||
|
||||
@ -39,11 +39,11 @@ export default function ExemplesProjets() {
|
||||
<section className="projets-section" id="exemples-projets">
|
||||
<div className="projets-container">
|
||||
|
||||
{/* Surtitre */}
|
||||
<span className="projets-tag-top">Quelques exemples de projets</span>
|
||||
{/* Surtitre vert */}
|
||||
<span className="projets-uptitle">Quelques exemples de projets</span>
|
||||
|
||||
{/* Grille des 6 projets avec .map() */}
|
||||
<div className="projets-grid">
|
||||
{/* 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>
|
||||
@ -52,9 +52,9 @@ export default function ExemplesProjets() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bouton d'action CTA */}
|
||||
<div className="projets-action">
|
||||
<a href="#tous-les-projets" className="btn-decouvrir-projets">
|
||||
{/* Bouton CTA */}
|
||||
<div className="projets-action-wrap">
|
||||
<a href="#projets" className="btn-projets-decouvrir">
|
||||
Découvrez les projets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -133,7 +133,7 @@ export default function Footer() {
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="newsletter-input"
|
||||
/>
|
||||
<button type="submit" className="newsletter-btn">
|
||||
<button type="submit" id="newsletter-btn">
|
||||
S'abonner
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -44,7 +44,15 @@ export default function Header() {
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/trajectoire" onClick={closeMenu}>
|
||||
<Link
|
||||
to="/trajectoire"
|
||||
onClick={() => {
|
||||
closeMenu();
|
||||
if (typeof onNavigate === 'function') {
|
||||
onNavigate('trajectoire');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Projet
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import Header from './Header';
|
||||
import React from 'react';
|
||||
import Hero from './Hero';
|
||||
import ProfileCards from './ProfileCards';
|
||||
import Methodology from './Methodology';
|
||||
@ -7,29 +6,17 @@ import Impact from './Impact';
|
||||
import ActualitySection from './ActualitySection';
|
||||
import CareersSection from './CareersSection';
|
||||
import Footer from './Footer';
|
||||
import ConstruireTrajectoire from './ConstruireTrajectoire';
|
||||
|
||||
export default function Home() {
|
||||
const [view, setView] = useState('home');
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-white overflow-x-hidden">
|
||||
<Header onNavigate={setView} />
|
||||
<main>
|
||||
{view === 'trajectoire' ? (
|
||||
<ConstruireTrajectoire />
|
||||
) : (
|
||||
<>
|
||||
<Hero />
|
||||
<ProfileCards />
|
||||
<Methodology />
|
||||
<Impact />
|
||||
<ActualitySection />
|
||||
<CareersSection />
|
||||
<Footer />
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
<Hero />
|
||||
<ProfileCards />
|
||||
<Methodology />
|
||||
<Impact />
|
||||
<ActualitySection />
|
||||
<CareersSection />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -1,66 +1,73 @@
|
||||
import React from 'react';
|
||||
import hemBannerImg from '../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
|
||||
import '../styles/human-employment.css';
|
||||
import hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image
|
||||
|
||||
const PILLIERS_DATA = [
|
||||
const DIMENSIONS_DATA = [
|
||||
{
|
||||
id: 1,
|
||||
title: "La personne",
|
||||
items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
|
||||
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."]
|
||||
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."]
|
||||
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."]
|
||||
title: 'Le réseau',
|
||||
items: ['Ses aspirations.', 'Ses motivations.', 'Ses besoins.', 'Ses valeurs.']
|
||||
}
|
||||
];
|
||||
|
||||
export default function HumanEmploymentModel() {
|
||||
return (
|
||||
<section className="hem-wrapper">
|
||||
<div className="hem-inner">
|
||||
<section className="hem-section" id="approche">
|
||||
<div className="hem-container">
|
||||
|
||||
{/* Paragraphe descriptif */}
|
||||
<p className="hem-description">
|
||||
Chaque parcours est unique et ne peut pas se réduire à un simple intitulé de poste.
|
||||
Nous considérons que les trajectoires durables se construisent lorsque quatre dimensions essentielles s'articulent.
|
||||
</p>
|
||||
{/* 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>
|
||||
|
||||
{/* Grille forcée sur 4 colonnes */}
|
||||
{/* 4 Cartes de dimensions */}
|
||||
<div className="hem-cards-grid">
|
||||
{PILLIERS_DATA.map((p) => (
|
||||
<div key={p.id} className="hem-card">
|
||||
<h3 className="hem-card-title">{p.title}</h3>
|
||||
<ul className="hem-card-list">
|
||||
{p.items.map((it, idx) => (
|
||||
<li key={idx}>{it}</li>
|
||||
{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>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Phrase d'accroche */}
|
||||
<p className="hem-phrase">
|
||||
C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
|
||||
</p>
|
||||
{/* 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>
|
||||
|
||||
{/* Cadre de l'image */}
|
||||
<div className="hem-banner-container">
|
||||
<img
|
||||
src={hemImg}
|
||||
alt="Human Employment Model Table"
|
||||
className="hem-banner-img"
|
||||
{/* 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>
|
||||
|
||||
|
||||
54
assets/components/TrajectoireJamaisFigee.jsx
Normal file
54
assets/components/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