feat(trajectoire): intégration complète de la page Construire sa trajectoire
- Implémentation des composants React (8 trajectoires, Human Employment Model, méthodologie 6 étapes, Learning by Doing, exemples de projets, compétences) - Rendu dynamique des cartes via .map() - Configuration du routage SPA dans Symfony (route catch-all) et React Router (Header Link) - Ajustements graphiques et CSS conformes au Figma (#F4F1EA, vert olive)
This commit is contained in:
MohamedLoum1001
@ -1,10 +1,20 @@
|
|||||||
import './styles/app.css';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createRoot } from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import Home from './components/Home.jsx'; // <-- Ajoute .jsx ici !
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||||
|
// Au lieu de './components/Home'
|
||||||
|
import Home from './components/Home.jsx';
|
||||||
|
import ConstruireTrajectoire from './components/ConstruireTrajectoire.jsx';
|
||||||
|
import './styles/app.css';
|
||||||
|
|
||||||
const container = document.getElementById('root');
|
const rootElement = document.getElementById('root'); // ou l'ID de ton conteneur Twig
|
||||||
if (container) {
|
if (rootElement) {
|
||||||
const root = createRoot(container);
|
const root = ReactDOM.createRoot(rootElement);
|
||||||
root.render(<Home />);
|
root.render(
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/trajectoire" element={<ConstruireTrajectoire />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
53
assets/components/CompetencesEvoluer.jsx
Normal file
53
assets/components/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>
|
||||||
|
);
|
||||||
|
}
|
||||||
76
assets/components/ConstruireTrajectoire.jsx
Normal file
76
assets/components/ConstruireTrajectoire.jsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import heroTrajectoireImg from '../img/img-traject-banner.jpg';
|
||||||
|
import HuitTrajectoires from './HuitTrajectoires';
|
||||||
|
import HumanEmploymentModel from './HumanEmploymentModel';
|
||||||
|
import MethodologieEtapes from './MethodologieEtapes';
|
||||||
|
import LearningByDoing from './LearningByDoing';
|
||||||
|
import ExemplesProjets from './ExemplesProjets';
|
||||||
|
import '../styles/trajectoire.css';
|
||||||
|
|
||||||
|
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 />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
65
assets/components/ExemplesProjets.jsx
Normal file
65
assets/components/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 */}
|
||||||
|
<span className="projets-tag-top">Quelques exemples de projets</span>
|
||||||
|
|
||||||
|
{/* Grille des 6 projets avec .map() */}
|
||||||
|
<div className="projets-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 d'action CTA */}
|
||||||
|
<div className="projets-action">
|
||||||
|
<a href="#tous-les-projets" className="btn-decouvrir-projets">
|
||||||
|
Découvrez les projets
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,117 +1,75 @@
|
|||||||
// 1. IMPORTATION DES MODULES ET ASSETS
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
// Import du logo gaea21 via Webpack Encore (gestion du hashing et du chemin public)
|
|
||||||
import logo from '../img/logo_gaea21.png';
|
import logo from '../img/logo_gaea21.png';
|
||||||
|
|
||||||
/**
|
|
||||||
* 2. COMPOSANT PRINCIPAL : Header
|
|
||||||
*
|
|
||||||
* Rôle fonctionnel :
|
|
||||||
* - Fournit la barre de navigation principale (Navbar) fixée ou relative en haut de page.
|
|
||||||
* - Gère l'affichage responsive : menu étendu sur desktop, tiroir repliable (drawer) sur mobile.
|
|
||||||
* - Propose un bouton d'action principal (« Participer ») pour convertir le visiteur.
|
|
||||||
*/
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
/**
|
|
||||||
* ÉTAT LOCAL (State) : isOpen
|
|
||||||
* - false : le menu mobile est fermé
|
|
||||||
* - true : le menu mobile est ouvert (déroulé/visible)
|
|
||||||
*/
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
|
const closeMenu = () => {
|
||||||
|
setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
/*
|
|
||||||
Balise sémantique HTML5 <header> :
|
|
||||||
- navbar-container : gère le fond, la bordure inférieure éventuelle,
|
|
||||||
la hauteur fixe et le z-index pour rester au-dessus du contenu de la page.
|
|
||||||
*/
|
|
||||||
<header className="navbar-container">
|
<header className="navbar-container">
|
||||||
|
|
||||||
{/*
|
|
||||||
Conteneur interne centré :
|
|
||||||
- navbar-content : applique un flexbox (justify-content: space-between, align-items: center)
|
|
||||||
et borne la largeur maximale avec un padding latéral propre.
|
|
||||||
*/}
|
|
||||||
<div className="navbar-content">
|
<div className="navbar-content">
|
||||||
|
{/* Logo gaea21 ramenant à l'accueil */}
|
||||||
{/* =========================================================
|
<Link
|
||||||
A. LOGO DE LA MARQUE
|
to="/"
|
||||||
========================================================= */}
|
className="navbar-logo"
|
||||||
<a href="/" className="navbar-logo" aria-label="Retour à l'accueil gaea21">
|
onClick={closeMenu}
|
||||||
|
aria-label="Retour à l'accueil gaea21"
|
||||||
|
>
|
||||||
<img src={logo} alt="Logo gaea21" />
|
<img src={logo} alt="Logo gaea21" />
|
||||||
</a>
|
</Link>
|
||||||
|
|
||||||
{/* =========================================================
|
{/* Bouton burger mobile */}
|
||||||
B. BOUTON BURGER (Affiché uniquement sur écrans mobiles)
|
|
||||||
========================================================= */}
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
/*
|
|
||||||
Basculement dynamique de la classe 'active' :
|
|
||||||
Permet en CSS d'animer les 3 barres pour former une croix 'X' quand isOpen vaut true.
|
|
||||||
*/
|
|
||||||
className={`hamburger ${isOpen ? 'active' : ''}`}
|
className={`hamburger ${isOpen ? 'active' : ''}`}
|
||||||
/* Inverse la valeur booléenne au clic (ouvre ou ferme le menu) */
|
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
/* Attributs d'accessibilité ARIA pour les lecteurs d'écran */
|
aria-label={isOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
||||||
aria-label={isOpen ? 'Fermer le menu de navigation' : 'Ouvrir le menu de navigation'}
|
|
||||||
aria-expanded={isOpen}
|
aria-expanded={isOpen}
|
||||||
>
|
>
|
||||||
{/* Les 3 barres horizontales du burger dessinées en CSS */}
|
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* =========================================================
|
{/* Navigation principale */}
|
||||||
C. MENU DE NAVIGATION (DESKTOP & TIROIR MOBILE)
|
|
||||||
========================================================= */}
|
|
||||||
{/*
|
|
||||||
La classe 'open' est ajoutée conditionnellement pour déclencher
|
|
||||||
l'apparition du tiroir de navigation en version mobile.
|
|
||||||
*/}
|
|
||||||
<nav className={`navbar-nav ${isOpen ? 'open' : ''}`}>
|
<nav className={`navbar-nav ${isOpen ? 'open' : ''}`}>
|
||||||
|
|
||||||
{/* Liste ordonnée des ancres de navigation */}
|
|
||||||
<ul className="nav-links">
|
<ul className="nav-links">
|
||||||
<li>
|
<li>
|
||||||
{/* Le onClick={() => setIsOpen(false)} referme automatiquement le menu mobile après le clic */}
|
<Link to="/#parcours" onClick={closeMenu}>
|
||||||
<a href="#parcours" onClick={() => setIsOpen(false)}>
|
|
||||||
Parcours
|
Parcours
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#projet" onClick={() => setIsOpen(false)}>
|
<Link to="/trajectoire" onClick={closeMenu}>
|
||||||
Projet
|
Projet
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#ecosysteme" onClick={() => setIsOpen(false)}>
|
<Link to="/#ecosysteme" onClick={closeMenu}>
|
||||||
Écosystème
|
Écosystème
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#contact" onClick={() => setIsOpen(false)}>
|
<Link to="/#contact" onClick={closeMenu}>
|
||||||
Contact
|
Contact
|
||||||
</a>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{/* =========================================================
|
{/* Bouton d'action */}
|
||||||
D. BOUTON D'ACTION PRINCIPAL (CALL-TO-ACTION)
|
|
||||||
========================================================= */}
|
|
||||||
<div className="navbar-action">
|
<div className="navbar-action">
|
||||||
<a
|
<Link
|
||||||
href="#participer"
|
to="/#participer"
|
||||||
className="btn-participer"
|
className="btn-participer"
|
||||||
// Ferme le menu mobile si cliqué
|
onClick={closeMenu}
|
||||||
onClick={() => setIsOpen(false)}
|
|
||||||
>
|
>
|
||||||
Participer
|
Participer
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -1,82 +1,35 @@
|
|||||||
// 1. IMPORTATION DES DÉPENDANCES ET COMPOSANTS ENFANTS
|
import React, { useState } from 'react';
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
// Barre de navigation supérieure (Logo, Liens, Boutons d'action)
|
|
||||||
import Header from './Header';
|
import Header from './Header';
|
||||||
|
|
||||||
// Section d'accroche principale (Titre fort, boutons d'appel à l'action, visuel héroïque)
|
|
||||||
import Hero from './Hero';
|
import Hero from './Hero';
|
||||||
|
|
||||||
// Cartes des profils cibles ("Qui êtes-vous ?") : Individus, Entreprises, Institutions, etc.
|
|
||||||
import ProfileCards from './ProfileCards';
|
import ProfileCards from './ProfileCards';
|
||||||
|
|
||||||
// Section explicative de la méthodologie ("Comment ça fonctionne ?") en 6 étapes + chiffres clés
|
|
||||||
import Methodology from './Methodology';
|
import Methodology from './Methodology';
|
||||||
|
|
||||||
// Section de preuve d'impact chiffrée avec fond immersif et carrousel
|
|
||||||
import Impact from './Impact';
|
import Impact from './Impact';
|
||||||
|
|
||||||
// Section actualités : événements, articles, publications et formulaire de newsletter intermédiaire
|
|
||||||
import ActualitySection from './ActualitySection';
|
import ActualitySection from './ActualitySection';
|
||||||
|
|
||||||
// Section opportunités et carrières ("Construire des trajectoires, pas seulement des emplois")
|
|
||||||
import CareersSection from './CareersSection';
|
import CareersSection from './CareersSection';
|
||||||
|
|
||||||
// Pied de page complet (Navigation secondaire, réseaux sociaux, newsletter pleine largeur, mentions légales)
|
|
||||||
import Footer from './Footer';
|
import Footer from './Footer';
|
||||||
|
import ConstruireTrajectoire from './ConstruireTrajectoire';
|
||||||
|
|
||||||
/**
|
|
||||||
* 2. COMPOSANT RACINE DE LA PAGE D'ACCUEIL : Home
|
|
||||||
*
|
|
||||||
* Rôle architectural :
|
|
||||||
* - Sert de page principale (Page Component / Container) orchestrant la disposition verticale
|
|
||||||
* de toutes les sections de la page d'accueil de gaea21.
|
|
||||||
* - Assure une hiérarchie sémantique HTML5 claire pour le référencement (SEO) et l'accessibilité.
|
|
||||||
*/
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
const [view, setView] = useState('home');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
/*
|
|
||||||
CONTENEUR GLOBAL DE PAGE :
|
|
||||||
- relative : sert de référentiel de positionnement pour d'éventuels éléments absolus.
|
|
||||||
- min-h-screen : garantit que la page couvre au minimum 100% de la hauteur de la fenêtre (évite les fonds blancs coupés).
|
|
||||||
- bg-white : couleur de fond par défaut pour l'ensemble du site.
|
|
||||||
- overflow-x-hidden : masque tout débordement horizontal causé par des animations, des bannières pleine largeur ou des marges négatives.
|
|
||||||
*/
|
|
||||||
<div className="relative min-h-screen bg-white overflow-x-hidden">
|
<div className="relative min-h-screen bg-white overflow-x-hidden">
|
||||||
|
<Header onNavigate={setView} />
|
||||||
{/*
|
|
||||||
A. EN-TÊTE DU SITE
|
|
||||||
Balise <Header /> contenant la navigation principale fixée ou relative en haut de page.
|
|
||||||
*/}
|
|
||||||
<Header />
|
|
||||||
|
|
||||||
{/*
|
|
||||||
B. CONTENU PRINCIPAL DE LA PAGE
|
|
||||||
La balise sémantique HTML5 <main> délimite le cœur informationnel unique de la page d'accueil.
|
|
||||||
*/}
|
|
||||||
<main>
|
<main>
|
||||||
{/* Bannière d'introduction */}
|
{view === 'trajectoire' ? (
|
||||||
|
<ConstruireTrajectoire />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<Hero />
|
<Hero />
|
||||||
|
|
||||||
{/* Sélection des parcours utilisateurs */}
|
|
||||||
<ProfileCards />
|
<ProfileCards />
|
||||||
|
|
||||||
{/* Présentation du modèle "Learning by Doing" */}
|
|
||||||
<Methodology />
|
<Methodology />
|
||||||
|
|
||||||
{/* Statistiques d'impact et résultats sur 20 ans */}
|
|
||||||
<Impact />
|
<Impact />
|
||||||
|
|
||||||
{/* Actualités, publications et veille */}
|
|
||||||
<ActualitySection />
|
<ActualitySection />
|
||||||
|
|
||||||
{/* Opportunités professionnelles et développement de compétences */}
|
|
||||||
<CareersSection />
|
<CareersSection />
|
||||||
|
|
||||||
{/* Pied de page et liens institutionnels */}
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
80
assets/components/HuitTrajectoires.jsx
Normal file
80
assets/components/HuitTrajectoires.jsx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
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 />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
assets/components/HumanEmploymentModel.jsx
Normal file
70
assets/components/HumanEmploymentModel.jsx
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import '../styles/human-employment.css';
|
||||||
|
import hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image
|
||||||
|
|
||||||
|
const PILLIERS_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-wrapper">
|
||||||
|
<div className="hem-inner">
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
|
{/* Grille forcée sur 4 colonnes */}
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Phrase d'accroche */}
|
||||||
|
<p className="hem-phrase">
|
||||||
|
C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Cadre de l'image */}
|
||||||
|
<div className="hem-banner-container">
|
||||||
|
<img
|
||||||
|
src={hemImg}
|
||||||
|
alt="Human Employment Model Table"
|
||||||
|
className="hem-banner-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
40
assets/components/LearningByDoing.jsx
Normal file
40
assets/components/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/MethodologieEtapes.jsx
Normal file
87
assets/components/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>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
assets/img/Electrical.png
Normal file
BIN
assets/img/Electrical.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
assets/img/Frame 715.png
Normal file
BIN
assets/img/Frame 715.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
assets/img/Frame 719.png
Normal file
BIN
assets/img/Frame 719.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
assets/img/Search.png
Normal file
BIN
assets/img/Search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
assets/img/Tree Planting.png
Normal file
BIN
assets/img/Tree Planting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
assets/img/User Account.png
Normal file
BIN
assets/img/User Account.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
assets/img/bureau.png
Normal file
BIN
assets/img/bureau.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
assets/img/human-model-banner.png
Normal file
BIN
assets/img/human-model-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
assets/img/img-traject-banner.png
Normal file
BIN
assets/img/img-traject-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
BIN
assets/img/learning-by-doing.png
Normal file
BIN
assets/img/learning-by-doing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
assets/img/route.png
Normal file
BIN
assets/img/route.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 KiB |
102
assets/styles/competences-evoluer.css
Normal file
102
assets/styles/competences-evoluer.css
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
SECTION COMPÉTENCES POUR ÉVOLUER (FIGMA)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.competences-section {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #F4F1EA;
|
||||||
|
/* Fond beige Figma */
|
||||||
|
padding: 5rem 2rem 6rem 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competences-container {
|
||||||
|
max-width: 1140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Trait vert olive */
|
||||||
|
.competences-green-line {
|
||||||
|
width: 48px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #556B2F;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Surtitre */
|
||||||
|
.competences-tag-top {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #7b8337;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Titre principal */
|
||||||
|
.competences-main-title {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #0f172a;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0 0 3rem 0;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grille de 3 cartes */
|
||||||
|
.competences-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Carte blanche */
|
||||||
|
.competence-card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 2.25rem 2rem;
|
||||||
|
min-height: 220px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competence-card-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
margin: 0 0 1.25rem 0;
|
||||||
|
line-height: 1.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competence-card-intro {
|
||||||
|
font-size: 0.84rem;
|
||||||
|
color: #4b5563;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competence-card-text {
|
||||||
|
font-size: 0.84rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #4b5563;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.competences-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competences-section {
|
||||||
|
padding: 3.5rem 1.25rem 4rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.competences-main-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
107
assets/styles/exemples-projets.css
Normal file
107
assets/styles/exemples-projets.css
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
SECTION EXEMPLES DE PROJETS (FIGMA)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.projets-section {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 1rem 2rem 5rem 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projets-container {
|
||||||
|
max-width: 1140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Surtitre vert olive */
|
||||||
|
.projets-tag-top {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #7b8337;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grille 3 colonnes x 2 lignes */
|
||||||
|
.projets-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Carte blanche avec bordure grise douce */
|
||||||
|
.projet-card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1.75rem 1.5rem;
|
||||||
|
min-height: 125px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projet-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: #8c8f3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projet-card-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f172a;
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projet-card-desc {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #4b5563;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alignement du bouton à gauche comme sur la maquette */
|
||||||
|
.projets-action {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-decouvrir-projets {
|
||||||
|
background-color: #7b8337;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.55rem 1.6rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-decouvrir-projets:hover {
|
||||||
|
background-color: #6a712f;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.projets-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.projets-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projets-section {
|
||||||
|
padding: 1rem 1.25rem 3.5rem 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
114
assets/styles/human-employment.css
Normal file
114
assets/styles/human-employment.css
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
SECTION HUMAN EMPLOYMENT MODEL (FIGMA)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.hem-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 1rem 2rem 5rem 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hem-inner {
|
||||||
|
max-width: 1240px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Texte d'intro gris */
|
||||||
|
.hem-description {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: #6b7280;
|
||||||
|
max-width: 780px;
|
||||||
|
margin: 0 0 2.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grille 4 colonnes alignées */
|
||||||
|
.hem-cards-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 1.5rem;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 3.5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chaque carte beige */
|
||||||
|
.hem-card {
|
||||||
|
background-color: #F4F1EA;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1.75rem 1.4rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hem-card-title {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #4B6A4A;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hem-card-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hem-card-list li {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #9A9595;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Phrase centrale */
|
||||||
|
.hem-phrase {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #111827;
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hem-phrase strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image arrondie */
|
||||||
|
.hem-banner-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hem-banner-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive : passage en 2 colonnes uniquement sur smartphone / écran très étroit */
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.hem-cards-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hem-banner-img {
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hem-cards-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
92
assets/styles/learning-by-doing.css
Normal file
92
assets/styles/learning-by-doing.css
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
SECTION LEARNING BY DOING (FIGMA)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.lbd-section {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 5rem 2rem 6rem 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lbd-container {
|
||||||
|
max-width: 1140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ligne verte d'accentuation en haut */
|
||||||
|
.lbd-green-line {
|
||||||
|
width: 48px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #556B2F;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Surtitre */
|
||||||
|
.lbd-tag-top {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #7b8337;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Titre principal */
|
||||||
|
.lbd-main-title {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #0f172a;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0 0 1.25rem 0;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Paragraphe */
|
||||||
|
.lbd-description {
|
||||||
|
font-size: 0.86rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #4b5563;
|
||||||
|
max-width: 820px;
|
||||||
|
margin: 0 0 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Conteneur de la bannière avec coins arrondis */
|
||||||
|
.lbd-image-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lbd-banner-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 440px;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.lbd-main-title {
|
||||||
|
font-size: 1.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lbd-banner-img {
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.lbd-section {
|
||||||
|
padding: 3.5rem 1.25rem 4rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lbd-main-title {
|
||||||
|
font-size: 1.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lbd-banner-img {
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
106
assets/styles/methodologie-etapes.css
Normal file
106
assets/styles/methodologie-etapes.css
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
SECTION MÉTHODOLOGIE EN 6 ÉTAPES (FIGMA)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.etapes-section {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 4rem 2rem 6rem 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.etapes-container {
|
||||||
|
max-width: 1140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grille 3 colonnes x 2 lignes */
|
||||||
|
.etapes-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
row-gap: 4rem;
|
||||||
|
column-gap: 3rem;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bloc d'une étape */
|
||||||
|
.etape-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cercle beige avec liseré */
|
||||||
|
.etape-circle-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 104px;
|
||||||
|
height: 104px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.etape-circle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #F4F1EA;
|
||||||
|
border: 1.5px solid #d5dec3;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge vert foncé avec numéro */
|
||||||
|
.etape-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
right: -2px;
|
||||||
|
background-color: #435227;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Textes */
|
||||||
|
.etape-title {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
margin: 0 0 0.6rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.etape-desc {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #6b7280;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.etapes-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
row-gap: 3rem;
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 580px) {
|
||||||
|
.etapes-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
row-gap: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.etapes-section {
|
||||||
|
padding: 3rem 1.5rem 4rem 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
281
assets/styles/trajectoire.css
Normal file
281
assets/styles/trajectoire.css
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
PAGE CONSTRUIRE SA TRAJECTOIRE - GAEA21 (FIGMA)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
1. SECTION HERO BANNER
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
.trajectoire-hero {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 85vh;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #ffffff;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Overlay assombrissant :
|
||||||
|
Dégradé plus dense à gauche pour détacher le texte blanc,
|
||||||
|
plus transparent vers la droite pour révéler la personne et l'ordinateur.
|
||||||
|
*/
|
||||||
|
.trajectoire-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
rgba(10, 20, 25, 0.78) 0%,
|
||||||
|
rgba(15, 25, 30, 0.55) 45%,
|
||||||
|
rgba(10, 20, 25, 0.25) 100%);
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
2. NAVBAR TRANSPARENTE EN HAUT DU HERO (Optionnel si intégrée)
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
.trajectoire-header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.75rem 3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-logo img {
|
||||||
|
height: 44px;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-nav-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2.5rem;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-nav-links li a {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
opacity: 0.9;
|
||||||
|
transition: opacity 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-nav-links li a:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: #c7d264;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bouton « Participer » */
|
||||||
|
.btn-participer-trajectoire {
|
||||||
|
background-color: #8c8f3e;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 0.6rem 1.6rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-participer-trajectoire:hover {
|
||||||
|
background-color: #737630;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
3. CONTENU TEXTE DU HERO (GAUCHE)
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
.trajectoire-hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
max-width: 1440px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 3rem 4rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-text-wrapper {
|
||||||
|
max-width: 580px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-title {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.15;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-paragraphs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-paragraphs p {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Groupe de boutons d'action Hero */
|
||||||
|
.trajectoire-cta-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-trajectoire-primary {
|
||||||
|
background-color: #8c8f3e;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.75rem 1.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-trajectoire-primary:hover {
|
||||||
|
background-color: #737630;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-trajectoire-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.72rem 1.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: 1.5px solid rgba(255, 255, 255, 0.85);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-trajectoire-secondary:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
|
border-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
4. SECTION SUIVANTE : QUESTIONNAIRE INTRO (#F4F1EA)
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
.trajectoire-intro-questions {
|
||||||
|
background-color: #F4F1EA;
|
||||||
|
padding: 6rem 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-questions-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-subtitle-green {
|
||||||
|
color: #7b8337;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-heading-black {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-action-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bouton vert olive ovale "Commencer" */
|
||||||
|
.btn-trajectoire-commencer {
|
||||||
|
background-color: #7b8337;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.55rem 1.6rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-trajectoire-commencer:hover {
|
||||||
|
background-color: #6a712f;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------------------------
|
||||||
|
5. RESPONSIVE
|
||||||
|
-------------------------------------------------------------------------- */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.trajectoire-header {
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-nav-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-hero-content {
|
||||||
|
padding: 3rem 1.5rem 4rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-title {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.trajectoire-intro-questions {
|
||||||
|
padding: 4rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-heading-black {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
183
assets/styles/trajectoires-cards.css
Normal file
183
assets/styles/trajectoires-cards.css
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
SECTION 8 TRAJECTOIRES (FIGMA)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.trajectoires-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 5rem 2rem 6rem 2rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoires-container {
|
||||||
|
max-width: 1320px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* En-tête */
|
||||||
|
.trajectoires-header {
|
||||||
|
margin-bottom: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Le trait vert unique */
|
||||||
|
.trajectoires-green-line {
|
||||||
|
width: 48px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: #556B2F;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Titre "Les Trajectoires" */
|
||||||
|
.trajectoires-tag-top {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111827;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoires-main-title {
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #0f172a;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grille responsive : 3 colonnes sur desktop, 2 sur tablette, 1 sur mobile */
|
||||||
|
.trajectoires-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style de chaque carte individuelle */
|
||||||
|
.trajectoire-card {
|
||||||
|
background-color: #F4F1EA;
|
||||||
|
/* Teinte beige Figma */
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 2.25rem 2rem 2rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge supérieur (carré couleur + label) */
|
||||||
|
.trajectoire-card-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-badge-indicator {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-badge-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #374151;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corps de carte */
|
||||||
|
.trajectoire-card-body {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-card-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
line-height: 1.35;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-card-desc {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #4b5563;
|
||||||
|
margin: 0 0 1.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-card-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-card-list li {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: #4b5563;
|
||||||
|
line-height: 1.45;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoire-card-list li::before {
|
||||||
|
content: "•";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bouton Découvrir */
|
||||||
|
.trajectoire-card-footer {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-card-decouvrir {
|
||||||
|
background-color: #7b8337;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.5rem 1.4rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-card-decouvrir:hover {
|
||||||
|
background-color: #6a712f;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.trajectoires-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.trajectoires-section {
|
||||||
|
padding: 3.5rem 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoires-main-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trajectoires-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
60
package-lock.json
generated
60
package-lock.json
generated
@ -8,7 +8,8 @@
|
|||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.18.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.24.0",
|
"@babel/core": "^7.24.0",
|
||||||
@ -3040,6 +3041,19 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cookie": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/core-js": {
|
"node_modules/core-js": {
|
||||||
"version": "3.50.0",
|
"version": "3.50.0",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
|
||||||
@ -5684,6 +5698,44 @@
|
|||||||
"react": "^18.3.1"
|
"react": "^18.3.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-router": {
|
||||||
|
"version": "7.18.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
|
||||||
|
"integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"cookie": "^1.0.1",
|
||||||
|
"set-cookie-parser": "^2.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-router-dom": {
|
||||||
|
"version": "7.18.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
|
||||||
|
"integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"react-router": "7.18.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/read-cache": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz",
|
||||||
@ -6003,6 +6055,12 @@
|
|||||||
"randombytes": "^2.1.0"
|
"randombytes": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/set-cookie-parser": {
|
||||||
|
"version": "2.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||||
|
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/shallow-clone": {
|
"node_modules/shallow-clone": {
|
||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
|
||||||
|
|||||||
@ -24,6 +24,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.18.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,7 @@ use Symfony\Component\Routing\Attribute\Route;
|
|||||||
|
|
||||||
class HomeController extends AbstractController
|
class HomeController extends AbstractController
|
||||||
{
|
{
|
||||||
#[Route('/', name: 'app_home')]
|
#[Route('/{reactRouting}', name: 'app_home', requirements: ['reactRouting' => '^(?!api|_wdt|_profiler).+'], defaults: ['reactRouting' => null])]
|
||||||
public function index(): Response
|
public function index(): Response
|
||||||
{
|
{
|
||||||
return $this->render('home/index.html.twig');
|
return $this->render('home/index.html.twig');
|
||||||
|
|||||||
Reference in New Issue
Block a user