Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 55d15922a9 | |||
| c94227c534 | |||
| bb1393e9ef | |||
| f66e39ab09 | |||
| cd6a66893a |
@ -1,10 +1,27 @@
|
||||
import './styles/app.css';
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import Home from './components/Home.jsx'; // <-- Ajoute .jsx ici !
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import Header from './components/home/Header.jsx';
|
||||
import Home from './components/home/Home.jsx';
|
||||
import ConstruireTrajectoire from './components/trajectoire/ConstruireTrajectoire.jsx';
|
||||
import './styles/app.css';
|
||||
import Parcours from './components/parcours/Parcours.jsx';
|
||||
|
||||
const container = document.getElementById('root');
|
||||
if (container) {
|
||||
const root = createRoot(container);
|
||||
root.render(<Home />);
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/trajectoire" element={<ConstruireTrajectoire />} />
|
||||
<Route path="/parcours" element={<Parcours />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (rootElement) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(<App />);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
// 1. IMPORTATION DES MODULES ET ASSETS
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Import du logo gaea21 via Webpack Encore (gestion du hashing et du chemin public)
|
||||
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() {
|
||||
/**
|
||||
* ÉTAT LOCAL (State) : isOpen
|
||||
* - false : le menu mobile est fermé
|
||||
* - true : le menu mobile est ouvert (déroulé/visible)
|
||||
*/
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
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">
|
||||
|
||||
{/*
|
||||
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">
|
||||
|
||||
{/* =========================================================
|
||||
A. LOGO DE LA MARQUE
|
||||
========================================================= */}
|
||||
<a href="/" className="navbar-logo" aria-label="Retour à l'accueil gaea21">
|
||||
<img src={logo} alt="Logo gaea21" />
|
||||
</a>
|
||||
|
||||
{/* =========================================================
|
||||
B. BOUTON BURGER (Affiché uniquement sur écrans mobiles)
|
||||
========================================================= */}
|
||||
<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' : ''}`}
|
||||
/* Inverse la valeur booléenne au clic (ouvre ou ferme le menu) */
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
/* Attributs d'accessibilité ARIA pour les lecteurs d'écran */
|
||||
aria-label={isOpen ? 'Fermer le menu de navigation' : 'Ouvrir le menu de navigation'}
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
{/* Les 3 barres horizontales du burger dessinées en CSS */}
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
{/* =========================================================
|
||||
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' : ''}`}>
|
||||
|
||||
{/* Liste ordonnée des ancres de navigation */}
|
||||
<ul className="nav-links">
|
||||
<li>
|
||||
{/* Le onClick={() => setIsOpen(false)} referme automatiquement le menu mobile après le clic */}
|
||||
<a href="#parcours" onClick={() => setIsOpen(false)}>
|
||||
Parcours
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#projet" onClick={() => setIsOpen(false)}>
|
||||
Projet
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#ecosysteme" onClick={() => setIsOpen(false)}>
|
||||
Écosystème
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#contact" onClick={() => setIsOpen(false)}>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* =========================================================
|
||||
D. BOUTON D'ACTION PRINCIPAL (CALL-TO-ACTION)
|
||||
========================================================= */}
|
||||
<div className="navbar-action">
|
||||
<a
|
||||
href="#participer"
|
||||
className="btn-participer"
|
||||
// Ferme le menu mobile si cliqué
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Participer
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
// 1. IMPORTATION DES DÉPENDANCES ET COMPOSANTS ENFANTS
|
||||
import React from 'react';
|
||||
|
||||
// Barre de navigation supérieure (Logo, Liens, Boutons d'action)
|
||||
import Header from './Header';
|
||||
|
||||
// Section d'accroche principale (Titre fort, boutons d'appel à l'action, visuel héroïque)
|
||||
import Hero from './Hero';
|
||||
|
||||
// Cartes des profils cibles ("Qui êtes-vous ?") : Individus, Entreprises, Institutions, etc.
|
||||
import ProfileCards from './ProfileCards';
|
||||
|
||||
// Section explicative de la méthodologie ("Comment ça fonctionne ?") en 6 étapes + chiffres clés
|
||||
import Methodology from './Methodology';
|
||||
|
||||
// Section de preuve d'impact chiffrée avec fond immersif et carrousel
|
||||
import Impact from './Impact';
|
||||
|
||||
// Section actualités : événements, articles, publications et formulaire de newsletter intermédiaire
|
||||
import ActualitySection from './ActualitySection';
|
||||
|
||||
// Section opportunités et carrières ("Construire des trajectoires, pas seulement des emplois")
|
||||
import CareersSection from './CareersSection';
|
||||
|
||||
// Pied de page complet (Navigation secondaire, réseaux sociaux, newsletter pleine largeur, mentions légales)
|
||||
import Footer from './Footer';
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
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">
|
||||
|
||||
{/*
|
||||
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>
|
||||
{/* Bannière d'introduction */}
|
||||
<Hero />
|
||||
|
||||
{/* Sélection des parcours utilisateurs */}
|
||||
<ProfileCards />
|
||||
|
||||
{/* Présentation du modèle "Learning by Doing" */}
|
||||
<Methodology />
|
||||
|
||||
{/* Statistiques d'impact et résultats sur 20 ans */}
|
||||
<Impact />
|
||||
|
||||
{/* Actualités, publications et veille */}
|
||||
<ActualitySection />
|
||||
|
||||
{/* Opportunités professionnelles et développement de compétences */}
|
||||
<CareersSection />
|
||||
|
||||
{/* Pied de page et liens institutionnels */}
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import bannerBg from '../img/homepageactuality.png';
|
||||
import bannerBg from '../../img/homepageactuality.png';
|
||||
|
||||
const CATEGORIES = ['Tout', 'Actualités', 'Publications', 'Évènements', 'Projets'];
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import carreerBg from '../img/carreer.png';
|
||||
import carreerBg from '../../img/carreer.png';
|
||||
|
||||
export default function CareersSection() {
|
||||
const parcours = [
|
||||
94
assets/components/home/Header.jsx
Normal file
94
assets/components/home/Header.jsx
Normal file
@ -0,0 +1,94 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import logo from '../../img/logo_gaea21.png';
|
||||
import '../../styles/header.css';
|
||||
|
||||
export default function Header({ onNavigate }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const location = useLocation();
|
||||
|
||||
// Active la couleur blanche (nav-light) pour trajectoire, projet et parcours
|
||||
const isDark =
|
||||
location.pathname === '/trajectoire' ||
|
||||
location.pathname === '/projet' ||
|
||||
location.pathname === '/parcours';
|
||||
|
||||
const closeMenu = () => {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="navbar-container">
|
||||
<div className="navbar-content">
|
||||
{/* Logo gaea21 */}
|
||||
<Link
|
||||
to="/"
|
||||
className="navbar-logo"
|
||||
onClick={closeMenu}
|
||||
aria-label="Retour à l'accueil gaea21"
|
||||
>
|
||||
<img src={logo} alt="Logo gaea21" />
|
||||
</Link>
|
||||
|
||||
{/* Bouton burger mobile */}
|
||||
<button
|
||||
type="button"
|
||||
className={`hamburger ${isOpen ? 'active' : ''}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-label={isOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
{/* Navigation principale */}
|
||||
<nav className={`navbar-nav ${isOpen ? 'open' : ''}`}>
|
||||
{/* Applique la classe nav-light si la page a un fond sombre */}
|
||||
<ul className={`nav-links ${isDark ? 'nav-light' : ''}`}>
|
||||
<li>
|
||||
<Link to="/parcours" onClick={closeMenu}>
|
||||
Parcours
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/trajectoire"
|
||||
onClick={() => {
|
||||
closeMenu();
|
||||
if (typeof onNavigate === 'function') {
|
||||
onNavigate('trajectoire');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Projet
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/#ecosysteme" onClick={closeMenu}>
|
||||
Écosystème
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/#contact" onClick={closeMenu}>
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Bouton Participer */}
|
||||
<div className="navbar-action">
|
||||
<Link
|
||||
to="/#participer"
|
||||
className="btn-participer"
|
||||
onClick={closeMenu}
|
||||
>
|
||||
Participer
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@ -3,7 +3,7 @@ import React from 'react';
|
||||
|
||||
// Import de l'image de bannière principale via Webpack Encore
|
||||
// Webpack génère automatiquement le bon chemin d'accès avec hachage pour le cache
|
||||
import heroBg from '../img/hero-banner.png';
|
||||
import heroBg from '../../img/hero-banner.png';
|
||||
|
||||
/**
|
||||
* 2. COMPOSANT PRINCIPAL : Hero
|
||||
23
assets/components/home/Home.jsx
Normal file
23
assets/components/home/Home.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import Hero from './Hero';
|
||||
import ProfileCards from './ProfileCards';
|
||||
import Methodology from './Methodology';
|
||||
import Impact from './Impact';
|
||||
import ActualitySection from './ActualitySection';
|
||||
import CareersSection from './CareersSection';
|
||||
import Footer from '../Footer';
|
||||
// import Hero from './Hero';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="relative min-h-screen bg-white overflow-x-hidden">
|
||||
<Hero />
|
||||
<ProfileCards />
|
||||
<Methodology />
|
||||
<Impact />
|
||||
<ActualitySection />
|
||||
<CareersSection />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Webpack Encore gère l'empreinte de hachage (hash) et le chemin public de l'image de fond
|
||||
import impactBg from '../img/impact.png';
|
||||
import impactBg from '../../img/impact.png';
|
||||
|
||||
/**
|
||||
* 2. STRUCTURE DE DONNÉES STATIQUE : DIAPOSITIVES DU CARROUSEL
|
||||
@ -2,10 +2,10 @@
|
||||
import React from 'react';
|
||||
|
||||
// Webpack Encore gère l'empreinte de hachage (hashing) et le chemin public des images
|
||||
import individusImg from '../img/individus.png';
|
||||
import entrepriseImg from '../img/entreprise.png';
|
||||
import institutionsImg from '../img/institutions.png';
|
||||
import coachImg from '../img/coach.png';
|
||||
import individusImg from '../../img/individus.png';
|
||||
import institutionsImg from '../../img/institutions.png';
|
||||
import coachImg from '../../img/coach.png';
|
||||
import entrepriseImg from '../../img/entreprise.png';
|
||||
|
||||
/**
|
||||
* 2. STRUCTURE DE DONNÉES STATIQUE : LISTE DES PROFILS CIBLES
|
||||
89
assets/components/parcours/CeQueVousDeveloppez.jsx
Normal file
89
assets/components/parcours/CeQueVousDeveloppez.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
|
||||
// Icône de groupe déjà utilisée dans les acteurs
|
||||
import iconeGroup from '../../img/x1.png';
|
||||
|
||||
// SVG de la mallette avec le contour vert identique à la maquette
|
||||
const BriefcaseIcon = () => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#8c8f3e"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="w-7 h-7 sm:w-8 sm:h-8"
|
||||
>
|
||||
<rect width="20" height="14" x="2" y="7" rx="2" />
|
||||
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
|
||||
<line x1="2" x2="22" y1="12" y2="12" />
|
||||
<circle cx="12" cy="12" r="1.5" fill="#8c8f3e" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SKILLS = [
|
||||
// Ligne 1
|
||||
{ title: 'Expérience professionnelle', isGroup: false },
|
||||
{ title: 'Employabilité', isGroup: true },
|
||||
{ title: 'Gestion de projet', isGroup: false },
|
||||
{ title: 'Communication', isGroup: false },
|
||||
{ title: 'Intelligence émotionnelle', isGroup: false },
|
||||
{ title: 'Leadership', isGroup: false },
|
||||
{ title: 'Développement durable', isGroup: false },
|
||||
{ title: 'Gestion durable', isGroup: false },
|
||||
// Ligne 2
|
||||
{ title: 'Recherche appliquée', isGroup: false },
|
||||
{ title: 'Pensée systémique', isGroup: false },
|
||||
{ title: 'Collaboration', isGroup: false },
|
||||
{ title: 'Résolution de problèmes', isGroup: false },
|
||||
{ title: 'Développement commercial', isGroup: false },
|
||||
{ title: 'Autonomie', isGroup: false },
|
||||
{ title: 'Confiance', isGroup: false },
|
||||
{ title: 'Réseau professionnel', isGroup: false },
|
||||
];
|
||||
|
||||
export default function CeQueVousDeveloppez() {
|
||||
return (
|
||||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
|
||||
{/* En-tête */}
|
||||
<div className="text-left mb-12 sm:mb-16">
|
||||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-5" />
|
||||
<h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold uppercase tracking-tight text-[#111827]">
|
||||
CE QUE VOUS DÉVELOPPEZ
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Grille des compétences : 2 sur mobile, 4 sur tablette, 8 sur desktop */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-y-10 sm:gap-y-12 gap-x-4 sm:gap-x-6 justify-items-center">
|
||||
{SKILLS.map((skill, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col items-center text-center w-full max-w-[125px]"
|
||||
>
|
||||
{/* Cercle avec bordure verte olive fine */}
|
||||
<div className="w-16 h-16 sm:w-[72px] sm:h-[72px] rounded-full border-2 border-[#8c8f3e] bg-white flex items-center justify-center p-2 mb-3 shadow-xs">
|
||||
{skill.isGroup ? (
|
||||
<img
|
||||
src={iconeGroup}
|
||||
alt={skill.title}
|
||||
className="w-7 h-7 sm:w-8 sm:h-8 object-contain"
|
||||
/>
|
||||
) : (
|
||||
<BriefcaseIcon />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Libellé de la compétence */}
|
||||
<p className="text-[11px] sm:text-xs font-bold text-[#111827] leading-tight select-none">
|
||||
{skill.title}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
120
assets/components/parcours/EquipeAccompagnement.jsx
Normal file
120
assets/components/parcours/EquipeAccompagnement.jsx
Normal file
@ -0,0 +1,120 @@
|
||||
import React from 'react';
|
||||
|
||||
// Photos exportées
|
||||
import referentImg from '../../img/referent.png';
|
||||
import cordonateurImg from '../../img/cordonateur.png';
|
||||
import rhImg from '../../img/rh.png';
|
||||
import coachImg from '../../img/coach-img.png';
|
||||
import coachePersonnelImg from '../../img/coache-personnel.png';
|
||||
|
||||
// Icônes exportées
|
||||
import iconeReferent from '../../img/icone-referent.png';
|
||||
import iconeCordonateur from '../../img/icone-cordonateur.png';
|
||||
import iconeRh from '../../img/icone-rh.png';
|
||||
import iconeJobCoach from '../../img/coach-job-icon.png';
|
||||
import iconeCoachPersonnel from '../../img/icone-coach-personnel.png';
|
||||
|
||||
const ACTEURS = [
|
||||
{
|
||||
role: 'Référent',
|
||||
description: 'Développement des compétences.',
|
||||
photo: referentImg,
|
||||
icon: iconeReferent,
|
||||
},
|
||||
{
|
||||
role: 'Coordinateur Projet',
|
||||
description: 'Suivi opérationnel et intégration dans les équipes.',
|
||||
photo: cordonateurImg,
|
||||
icon: iconeCordonateur,
|
||||
},
|
||||
{
|
||||
role: 'RH Projet',
|
||||
description: 'Accompagnement administratif et suivi du parcours.',
|
||||
photo: rhImg,
|
||||
icon: iconeRh,
|
||||
},
|
||||
{
|
||||
role: 'Job Coach',
|
||||
description:
|
||||
'Construction du projet professionnel et développement de l’employabilité.',
|
||||
photo: coachImg,
|
||||
icon: iconeJobCoach,
|
||||
},
|
||||
{
|
||||
role: 'Coach Personnel',
|
||||
description:
|
||||
'Accompagnement des dimensions personnelles influençant la trajectoire.',
|
||||
photo: coachePersonnelImg,
|
||||
icon: iconeCoachPersonnel,
|
||||
},
|
||||
];
|
||||
|
||||
export default function EquipeAccompagnement() {
|
||||
return (
|
||||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
|
||||
{/* ========================================================= */}
|
||||
{/* En-tête de la section */}
|
||||
{/* ========================================================= */}
|
||||
<div className="text-left mb-12 sm:mb-16">
|
||||
{/* Trait vert horizontal */}
|
||||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-5" />
|
||||
|
||||
{/* Sur-titre vert olive */}
|
||||
<p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#8c8f3e] mb-2 sm:mb-3">
|
||||
UNE ÉQUIPE AUTOUR DE CHAQUE PARTICIPANT
|
||||
</p>
|
||||
|
||||
{/* Titre principal */}
|
||||
<h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold text-[#111827] leading-tight">
|
||||
Selon les besoins,
|
||||
<br />
|
||||
plusieurs acteurs peuvent intervenir :
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* ========================================================= */}
|
||||
{/* Grille des 5 acteurs */}
|
||||
{/* ========================================================= */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 sm:gap-6 lg:gap-5 justify-items-center">
|
||||
{ACTEURS.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col items-center text-center w-full max-w-[210px]"
|
||||
>
|
||||
{/* Conteneur photo avec découpe Figma */}
|
||||
<div className="relative w-[155px] sm:w-[165px] h-[155px] sm:h-[165px] flex items-center justify-center">
|
||||
<img
|
||||
src={item.photo}
|
||||
alt={item.role}
|
||||
className="w-full h-full object-contain select-none pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Pastille icône insérée dans l'échancrure basse */}
|
||||
<div className="relative -mt-6 z-10 w-11 h-11 rounded-full bg-[#8c8f3e] flex items-center justify-center shadow-xs ring-4 ring-[#fbfbf9] overflow-hidden">
|
||||
<img
|
||||
src={item.icon}
|
||||
alt={item.role}
|
||||
className="w-full h-full object-contain p-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Rôle / Titre */}
|
||||
<h3 className="text-sm sm:text-[15px] text-[#98984B] mt-3.5 mb-1.5 leading-tight">
|
||||
{item.role}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-[11px] sm:text-xs font-extrabold text-[#050505] leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
66
assets/components/parcours/LearningByDoing.jsx
Normal file
66
assets/components/parcours/LearningByDoing.jsx
Normal file
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import learningImg from '../../img/image-learning.png'; // Adapte avec le nom de l'image fournie
|
||||
|
||||
export default function LearningByDoing() {
|
||||
return (
|
||||
<section className="relative w-full min-h-[460px] lg:h-[500px] flex items-center overflow-hidden bg-neutral-950 font-sans">
|
||||
{/* 1. Image de fond positionnée sur la droite */}
|
||||
<img
|
||||
src={learningImg}
|
||||
alt="Learning by Doing gaea21"
|
||||
className="absolute inset-0 w-full h-full object-cover object-[75%_center] md:object-right z-0 pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
{/* 2. Dégradé sombre pour la lisibilité du texte à gauche */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black via-black/85 to-transparent z-10 pointer-events-none" />
|
||||
|
||||
{/* 3. Contenu textuel aligné sur la même grille que le reste de la page */}
|
||||
<div className="relative z-20 max-w-[1240px] w-full mx-auto px-6 md:px-12 py-14 lg:py-20">
|
||||
<div className="max-w-xl text-left">
|
||||
{/* Surtitre doré / olive */}
|
||||
<span className="text-[11px] sm:text-xs font-semibold uppercase tracking-widest text-[#a8ad48] block mb-3">
|
||||
APPRENDRE EN FAISANT
|
||||
</span>
|
||||
|
||||
{/* Titre principal */}
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight leading-tight mb-4">
|
||||
Le Learning by Doing au cœur du modèle.
|
||||
</h2>
|
||||
|
||||
{/* Paragraphe d'introduction */}
|
||||
<p className="text-xs sm:text-[13px] text-gray-300 leading-relaxed mb-4">
|
||||
Chez gaea21, nous considérons que les compétences se développent avant tout dans l’action.
|
||||
Les participants contribuent à :
|
||||
</p>
|
||||
|
||||
{/* Liste à puces */}
|
||||
<ul className="space-y-1.5 text-xs sm:text-[13px] text-gray-200 leading-relaxed mb-5 pl-1">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des projets réels ;</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des équipes réelles ;</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des outils réels ;</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#a8ad48]" />
|
||||
<span>des problématiques réelles.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Conclusion */}
|
||||
<div className="space-y-1 text-xs sm:text-[13px] text-gray-300 leading-relaxed border-t border-white/10 pt-4">
|
||||
<p>Ils apprennent en expérimentant.</p>
|
||||
<p>Ils développent leur autonomie en contribuant.</p>
|
||||
<p>Ils acquièrent de l’expérience en produisant des résultats concrets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
115
assets/components/parcours/ModeleDeveloppementCompetences.jsx
Normal file
115
assets/components/parcours/ModeleDeveloppementCompetences.jsx
Normal file
@ -0,0 +1,115 @@
|
||||
import React from 'react';
|
||||
|
||||
// Imports des 3 icônes exportées
|
||||
import baseIcon from '../../img/base.png';
|
||||
import maitriseIcon from '../../img/maitrise.png';
|
||||
import expertiseIcon from '../../img/expertise.png';
|
||||
|
||||
const NIVEAUX = [
|
||||
{
|
||||
number: '01',
|
||||
title: 'Bases',
|
||||
icon: baseIcon,
|
||||
description:
|
||||
'Compréhension des concepts. Premières applications avec accompagnement.',
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: 'Maîtrise opérationnelle',
|
||||
icon: maitriseIcon,
|
||||
description:
|
||||
'Capacité à réaliser de manière autonome. Contribution active aux projets.',
|
||||
},
|
||||
{
|
||||
number: '03',
|
||||
title: 'Expertise',
|
||||
icon: expertiseIcon,
|
||||
description:
|
||||
'Capacité à transmettre, accompagner et structurer les pratiques.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function ModeleDeveloppementCompetences() {
|
||||
return (
|
||||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-10 sm:py-14 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
|
||||
{/* Grille adaptative : 1 col sur mobile/tablette portrait, 12 cols sur grand écran */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 sm:gap-12 lg:gap-14 items-center">
|
||||
|
||||
{/* ================================================================= */}
|
||||
{/* 1. Bloc TEXTES GAUCHE (Prend 5 colonnes sur desktop) */}
|
||||
{/* ================================================================= */}
|
||||
<div className="lg:col-span-5 text-left">
|
||||
{/* Sur-titre vert olive */}
|
||||
<p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#7a8335] mb-2 sm:mb-3">
|
||||
LE MODÈLE DE DÉVELOPPEMENT DES COMPÉTENCES
|
||||
</p>
|
||||
|
||||
{/* Grand titre */}
|
||||
<h2 className="text-xl sm:text-2xl lg:text-[28px] font-extrabold text-[#111827] leading-tight mb-4 sm:mb-6">
|
||||
Des compétences observables, mesurables et transférables.
|
||||
</h2>
|
||||
|
||||
{/* Paragraphes explicatifs */}
|
||||
<div className="space-y-1.5 sm:space-y-2 text-xs sm:text-[13px] sm:-ml-2 text-[#4b5563] leading-relaxed mb-4 sm:mb-6">
|
||||
<p>Chaque métier est composé de compétences.</p>
|
||||
<p>Chaque compétence est composée de sous-compétences.</p>
|
||||
<p>
|
||||
Le développement professionnel consiste à faire évoluer progressivement ces compétences.
|
||||
</p>
|
||||
<p>
|
||||
Chez gaea21, nous utilisons un système d’évaluation permettant d’identifier le niveau de maîtrise de chaque compétence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Conclusion en gras */}
|
||||
<p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
|
||||
Cette approche permet de visualiser les progrès, construire des plans de développement et valoriser l’expérience acquise.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ================================================================= */}
|
||||
{/* 2. Bloc NIVEAUX DROITE (Prend 7 colonnes sur desktop) */}
|
||||
{/* ================================================================= */}
|
||||
<div className="lg:col-span-7 w-full">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4 md:gap-6 lg:gap-8">
|
||||
{NIVEAUX.map((item) => (
|
||||
<div
|
||||
key={item.number}
|
||||
className="flex flex-col items-center text-center px-2"
|
||||
>
|
||||
{/* Numéro gris clair 01 / 02 / 03 */}
|
||||
<span className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-300 tracking-wider mb-2 sm:mb-3 lg:mb-4 select-none">
|
||||
{item.number}
|
||||
</span>
|
||||
|
||||
{/* Rond avec l'icône verte */}
|
||||
<div className="w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-full overflow-hidden flex items-center justify-center mb-3 sm:mb-4 shrink-0 shadow-xs">
|
||||
<img
|
||||
src={item.icon}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-contain select-none pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Titre du niveau */}
|
||||
<h3 className="text-sm sm:text-[15px] lg:text-base font-extrabold text-[#111827] mb-1.5 sm:mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{/* Courte description */}
|
||||
<p className="text-[11px] sm:text-xs text-[#52525b] leading-relaxed max-w-[220px]">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
32
assets/components/parcours/Parcours.jsx
Normal file
32
assets/components/parcours/Parcours.jsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import ParcoursHero from './ParcoursHero';
|
||||
import ParcoursPresentation from './ParcoursPresentation';
|
||||
import QuiPeutRejoindre from './QuiPeutRejoindre';
|
||||
import ParcoursIntegration from './ParcoursIntegration';
|
||||
import LearningByDoing from './LearningByDoing';
|
||||
import ModeleDeveloppementCompetences from './ModeleDeveloppementCompetences';
|
||||
import SystemeReferents from './SystemeReferents';
|
||||
import EquipeAccompagnement from './EquipeAccompagnement';
|
||||
import TeletravailCompetence from './TeletravailCompetence';
|
||||
import CeQueVousDeveloppez from './CeQueVousDeveloppez';
|
||||
|
||||
export default function Parcours() {
|
||||
return (
|
||||
<main className="w-full">
|
||||
<ParcoursHero />
|
||||
<ParcoursPresentation />
|
||||
<QuiPeutRejoindre />
|
||||
<ParcoursIntegration />
|
||||
<LearningByDoing />
|
||||
<ModeleDeveloppementCompetences />
|
||||
<SystemeReferents />
|
||||
<EquipeAccompagnement />
|
||||
<TeletravailCompetence />
|
||||
<CeQueVousDeveloppez />
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
);
|
||||
}
|
||||
33
assets/components/parcours/ParcoursHero.jsx
Normal file
33
assets/components/parcours/ParcoursHero.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import heroImg from '../../img/rejoindre-hero.png';
|
||||
|
||||
export default function ParcoursHero() {
|
||||
return (
|
||||
<section className="relative w-full min-h-[90vh] flex items-center overflow-hidden bg-[#0b1320]">
|
||||
{/* 1. Image de fond Figma */}
|
||||
<img
|
||||
src={heroImg}
|
||||
alt="Rejoindre gaea21"
|
||||
className="absolute inset-0 w-full h-full object-cover object-[70%_center] md:object-right z-0 pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
{/* 2. Overlay sombre latéral */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/60 to-transparent z-10 pointer-events-none" />
|
||||
|
||||
{/* 3. Textes Figma (REJOINDRE gaea21 + accroche) */}
|
||||
<div className="relative z-20 max-w-[1440px] w-full mx-auto px-6 md:px-12 lg:px-16 pt-24 pb-12">
|
||||
<div className="max-w-xl">
|
||||
<h1 className="text-white text-5xl sm:text-6xl font-extrabold tracking-tight leading-none mb-6">
|
||||
<span className="block uppercase">REJOINDRE</span>
|
||||
<span className="block lowercase font-extrabold">gaea21</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-white/95 text-sm sm:text-base font-normal leading-relaxed drop-shadow-sm">
|
||||
Développer des compétences.<br />
|
||||
Acquérir de l'expérience. Construire une trajectoire.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
285
assets/components/parcours/ParcoursIntegration.jsx
Normal file
285
assets/components/parcours/ParcoursIntegration.jsx
Normal file
@ -0,0 +1,285 @@
|
||||
import React from 'react';
|
||||
|
||||
// Imports exacts des images exportées de Figma
|
||||
import decouverteImg from '../../img/decouverte.png';
|
||||
import preProfilImg from '../../img/pre-profil.png';
|
||||
import entretienImg from '../../img/entretien.png';
|
||||
import constructionImg from '../../img/construction.png';
|
||||
import integrationImg from '../../img/intergation.png';
|
||||
import developpementImg from '../../img/developpement.png';
|
||||
import evolutionImg from '../../img/evolution.png';
|
||||
|
||||
const STEPS = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Étape 1 — Découverte',
|
||||
intro:
|
||||
'Vous découvrez les projets, les équipes, les trajectoires et les opportunités proposées par gaea21.',
|
||||
image: decouverteImg,
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Étape 2 — Pré-profil',
|
||||
intro:
|
||||
'Vous complétez un questionnaire permettant de mieux comprendre :',
|
||||
bullets: [
|
||||
'votre situation ;',
|
||||
'votre parcours ;',
|
||||
'vos compétences ;',
|
||||
'vos objectifs ;',
|
||||
'vos disponibilités ;',
|
||||
'vos centres d’intérêt ;',
|
||||
'vos attentes.',
|
||||
],
|
||||
conclusion:
|
||||
'Cette étape constitue la base de votre future trajectoire.',
|
||||
image: preProfilImg,
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Étape 3 — Entretien',
|
||||
intro:
|
||||
'Un entretien permet d’approfondir votre profil et d’identifier les opportunités les plus pertinentes.',
|
||||
subIntro: 'Nous cherchons à comprendre :',
|
||||
bullets: [
|
||||
'où vous en êtes ;',
|
||||
'où vous souhaitez aller ;',
|
||||
'ce que vous souhaitez développer ;',
|
||||
'ce qui pourrait accélérer votre évolution.',
|
||||
],
|
||||
image: entretienImg,
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: 'Étape 4 — Construction de la trajectoire',
|
||||
intro:
|
||||
'À partir des informations recueillies, nous identifions :',
|
||||
bullets: [
|
||||
'la trajectoire la plus adaptée ;',
|
||||
'les projets pertinents ;',
|
||||
'les compétences à développer ;',
|
||||
'les ressources à mobiliser ;',
|
||||
'les accompagnements nécessaires.',
|
||||
],
|
||||
conclusion:
|
||||
'Chaque personne suit un parcours unique.',
|
||||
image: constructionImg,
|
||||
},
|
||||
{
|
||||
step: 5,
|
||||
title: 'Étape 5 — Intégration dans les projets',
|
||||
paragraphs: [
|
||||
'Vous rejoignez une ou plusieurs équipes projet.',
|
||||
'Vous participez progressivement à des réunions et des livrables.',
|
||||
'Vous développez des compétences en contribuant à des projets concrets.',
|
||||
],
|
||||
image: integrationImg,
|
||||
},
|
||||
{
|
||||
step: 6,
|
||||
title: 'Étape 6 — Développement des compétences',
|
||||
paragraphs: [
|
||||
'Les projets deviennent des espaces d’apprentissage continu.',
|
||||
'L’expérience devient un outil de progression.',
|
||||
'Les responsabilités évoluent progressivement selon votre développement.',
|
||||
],
|
||||
image: developpementImg,
|
||||
},
|
||||
{
|
||||
step: 7,
|
||||
title: 'Étape 7 — Évolution',
|
||||
intro:
|
||||
'L’objectif n’est pas simplement de participer à un projet.',
|
||||
subIntro: 'L’objectif est de développer :',
|
||||
bullets: [
|
||||
'une expérience démontrable ;',
|
||||
'des compétences transférables ;',
|
||||
'un réseau actif et engagé ;',
|
||||
'des perspectives professionnelles claires.',
|
||||
],
|
||||
image: evolutionImg,
|
||||
},
|
||||
];
|
||||
|
||||
export default function ParcoursIntegration() {
|
||||
return (
|
||||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-10 md:py-20 px-4 sm:px-6 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
|
||||
{/* Trait de repère vert horizontal */}
|
||||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-4 md:mb-6" />
|
||||
|
||||
{/* Titre de section */}
|
||||
<h2 className="text-lg sm:text-xl md:text-2xl font-extrabold uppercase tracking-tight text-[#111827] mb-8 md:mb-16 text-left">
|
||||
COMMENT FONCTIONNE LE{' '}
|
||||
<span className="text-[#8c8f3e]">PARCOURS D'INTÉGRATION</span> ?
|
||||
</h2>
|
||||
|
||||
{/* ========================================================================= */}
|
||||
{/* 1. VERSION MOBILE (< md) : Vue empilée et lisible */}
|
||||
{/* ========================================================================= */}
|
||||
<div className="flex md:hidden flex-col gap-10">
|
||||
{STEPS.map((item, index) => {
|
||||
const isLast = index === STEPS.length - 1;
|
||||
|
||||
return (
|
||||
<div key={item.step} className="flex flex-col">
|
||||
{/* Image mobile */}
|
||||
<div className="w-full max-w-[340px] mx-auto mb-4">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="w-full h-auto object-contain block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bloc pastille + ligne à gauche & texte à droite */}
|
||||
<div className="flex items-start">
|
||||
<div className="relative flex flex-col items-center shrink-0 mr-4 self-stretch">
|
||||
<div className="w-9 h-9 rounded-full bg-[#8c8f3e] text-white text-sm font-bold flex items-center justify-center shadow-xs z-10 shrink-0">
|
||||
{item.step}
|
||||
</div>
|
||||
{!isLast && (
|
||||
<div className="w-[2px] bg-[#8c8f3e] flex-1 my-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pb-6 text-left">
|
||||
<h3 className="text-sm font-extrabold text-[#111827] mb-1.5 pt-1.5">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{item.intro && (
|
||||
<p className="text-xs text-[#4b5563] leading-relaxed mb-2">
|
||||
{item.intro}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{item.subIntro && (
|
||||
<p className="text-xs text-[#4b5563] font-medium leading-relaxed mb-1">
|
||||
{item.subIntro}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{item.bullets && item.bullets.length > 0 && (
|
||||
<ul className="space-y-1 text-xs text-[#4b5563] leading-tight mb-2">
|
||||
{item.bullets.map((bullet, idx) => (
|
||||
<li key={idx} className="flex items-start gap-1.5">
|
||||
<span className="text-[#111827] text-xs leading-none mt-0.5">•</span>
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{item.paragraphs && item.paragraphs.length > 0 && (
|
||||
<div className="space-y-1 text-xs text-[#4b5563] leading-relaxed">
|
||||
{item.paragraphs.map((p, idx) => (
|
||||
<p key={idx}>{p}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{item.conclusion && (
|
||||
<p className="text-xs text-[#4b5563] italic leading-relaxed mt-1">
|
||||
{item.conclusion}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* ========================================================================= */}
|
||||
{/* 2. VERSION DESKTOP (md et plus) : Ton affichage exact qui fonctionne */}
|
||||
{/* ========================================================================= */}
|
||||
<div className="hidden md:flex max-w-[1100px] mx-auto lg:ml-0 flex-col">
|
||||
{STEPS.map((item, index) => {
|
||||
const isLast = index === STEPS.length - 1;
|
||||
|
||||
return (
|
||||
<div key={item.step} className="flex items-center">
|
||||
|
||||
{/* 1. Colonne GAUCHE */}
|
||||
<div className="w-[48%] flex justify-end shrink-0">
|
||||
<div className="w-full max-w-[420px] -ml-1 -mr-1 z-0">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="w-full h-auto object-contain block select-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. Colonne CENTRALE */}
|
||||
<div className="relative flex flex-col items-center shrink-0 self-stretch justify-center z-10">
|
||||
<div
|
||||
className={`w-[2px] bg-[#8c8f3e] flex-1 ${index === 0 ? 'opacity-0' : ''
|
||||
}`}
|
||||
/>
|
||||
|
||||
<div className="w-10 h-10 sm:w-11 sm:h-11 rounded-full bg-[#8c8f3e] text-white text-base sm:text-lg font-bold flex items-center justify-center shadow-xs select-none shrink-0 my-1">
|
||||
{item.step}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`w-[2px] bg-[#8c8f3e] flex-1 ${isLast ? 'opacity-0' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 3. Colonne DROITE */}
|
||||
<div className="flex-1 pl-6 sm:pl-8 py-6 sm:py-8 text-left">
|
||||
<h3 className="text-base sm:text-lg font-extrabold text-[#111827] leading-none mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
{item.intro && (
|
||||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2 max-w-md">
|
||||
{item.intro}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{item.subIntro && (
|
||||
<p className="text-xs sm:text-[13px] text-[#4b5563] font-medium leading-relaxed mb-1 max-w-md">
|
||||
{item.subIntro}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{item.bullets && item.bullets.length > 0 && (
|
||||
<ul className="space-y-0.5 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-2">
|
||||
{item.bullets.map((bullet, idx) => (
|
||||
<li key={idx} className="flex items-start gap-1.5">
|
||||
<span className="text-[#111827] text-xs leading-none mt-1">•</span>
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{item.paragraphs && item.paragraphs.length > 0 && (
|
||||
<div className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed max-w-md">
|
||||
{item.paragraphs.map((p, idx) => (
|
||||
<p key={idx}>{p}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{item.conclusion && (
|
||||
<p className="text-xs sm:text-[13px] text-[#4b5563] italic leading-relaxed max-w-md mt-1">
|
||||
{item.conclusion}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
182
assets/components/parcours/ParcoursPresentation.jsx
Normal file
182
assets/components/parcours/ParcoursPresentation.jsx
Normal file
@ -0,0 +1,182 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import teamImg from '../../img/team-discussion.png'; // Vérifie le chemin de ton image
|
||||
|
||||
export default function ParcoursPresentation() {
|
||||
return (
|
||||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20">
|
||||
<div className="max-w-[1320px] mx-auto space-y-20">
|
||||
|
||||
{/* ========================================================
|
||||
PARTIE 1 : INTRODUCTION & STATS BANNER
|
||||
======================================================== */}
|
||||
<div className="space-y-10">
|
||||
{/* Header 2 colonnes : Titre à gauche / Paragraphes à droite */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
|
||||
<div className="lg:col-span-5">
|
||||
<span className="text-xs uppercase tracking-wider text-[#7a8035] font-semibold block mb-3">
|
||||
REJOINDRE gaea21
|
||||
</span>
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold text-[#111827] leading-[1.25]">
|
||||
Développer des compétences.<br />
|
||||
Acquérir de l'expérience.<br />
|
||||
Construire une trajectoire.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-7 space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
|
||||
<p>
|
||||
Chaque année, des étudiants, jeunes diplômés, professionnels, entrepreneurs, chercheurs, personnes en transition et experts rejoignent gaea21. Certains recherchent un stage. D'autres souhaitent acquérir une première expérience. Certains cherchent à développer leurs compétences.
|
||||
</p>
|
||||
<p>
|
||||
D'autres souhaitent retrouver une activité professionnelle, lancer un projet ou contribuer à une initiative porteuse de sens. Ce qui les rassemble n'est pas leur parcours. C'est leur volonté d'évoluer.
|
||||
</p>
|
||||
<p>
|
||||
Depuis plus de vingt ans, gaea21 accompagne des milliers de personnes dans le développement de leurs compétences, de leur expérience et de leur trajectoire professionnelle à travers des projets réels, des accompagnements structurés et un modèle unique d'apprentissage par l'action.
|
||||
</p>
|
||||
<p className="font-medium text-[#1f2937]">
|
||||
Rejoindre gaea21 ne consiste pas simplement à intégrer un projet.<br />
|
||||
C'est rejoindre un écosystème conçu pour apprendre, expérimenter, contribuer et grandir.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bandeau beige + Bouton pilule Figma */}
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-5">
|
||||
{/* Boîte beige claire avec bordure discrète */}
|
||||
<div className="w-full lg:flex-1 bg-[#edeade]/80 rounded-2xl px-8 py-5 flex flex-col md:flex-row items-center justify-between gap-6 border border-[#e2dec9]">
|
||||
|
||||
{/* Approche systémique */}
|
||||
<div className="text-center md:text-left">
|
||||
<span className="text-xs sm:text-[13px] font-semibold text-[#1e293b] block">
|
||||
Une approche systémique et humaine
|
||||
</span>
|
||||
<span className="text-[11px] text-[#6b7280]">
|
||||
pour des résultats concrets et durables
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Ligne séparatrice */}
|
||||
<div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />
|
||||
|
||||
{/* Stat 1 : 20 + ans (Icône Cible au trait noir/anthracite sans cercle) */}
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className="w-7 h-7 text-[#1e293b] shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<circle cx="12" cy="12" r="6" />
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
</svg>
|
||||
<div>
|
||||
<span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
|
||||
20 + ans
|
||||
</span>
|
||||
<span className="text-[10px] text-[#6b7280]">
|
||||
d'accompagnement
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ligne séparatrice */}
|
||||
<div className="hidden md:block w-px h-10 bg-[#d8d3c5]" />
|
||||
|
||||
{/* Stat 2 : 3 000 + (Icône 3 personnes au trait noir/anthracite sans cercle) */}
|
||||
<div className="flex items-center gap-3">
|
||||
<svg
|
||||
className="w-7 h-7 text-[#1e293b] shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
<div>
|
||||
<span className="text-base sm:text-lg font-bold text-[#1e293b] block leading-tight">
|
||||
3 000 +
|
||||
</span>
|
||||
<span className="text-[10px] text-[#6b7280]">
|
||||
personnes accompagnées
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bouton style PILULE arrondi (rounded-full) fidèle à Figma */}
|
||||
<Link
|
||||
to="/#participer"
|
||||
className="w-full lg:w-auto text-center shrink-0 bg-[#7a8035] hover:bg-[#686d2b] text-white px-7 py-3.5 rounded-full text-xs sm:text-[13px] font-semibold tracking-wide transition-all shadow-sm hover:shadow whitespace-nowrap"
|
||||
>
|
||||
Découvrir les opportunités →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========================================================
|
||||
PARTIE 2 : QUI SOMMES-NOUS ? / QU'EST-CE QUE GAEA21 ?
|
||||
======================================================== */}
|
||||
<div className="pt-6">
|
||||
{/* Petite barre de soulignement verte */}
|
||||
<div className="w-12 h-1 bg-[#7a8035] rounded-full mb-6" />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
{/* Texte de gauche */}
|
||||
<div className="lg:col-span-7 space-y-5">
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-wider text-[#7a8035] font-bold block mb-2">
|
||||
Qui sommes-nous ?
|
||||
</span>
|
||||
<h3 className="text-2xl sm:text-3xl font-extrabold text-[#111827] tracking-tight uppercase">
|
||||
QU'EST-CE QUE GAEA21 ?
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3.5 text-xs sm:text-[13px] leading-relaxed text-[#4b5563]">
|
||||
<p>
|
||||
gaea21 est un centre de recherche appliquée, d'innovation, de développement durable et d'insertion professionnelle.
|
||||
</p>
|
||||
<p>
|
||||
Notre mission est de créer des ponts entre :
|
||||
</p>
|
||||
<ul className="list-disc pl-5 space-y-1 text-[#374151]">
|
||||
<li>la formation et l'emploi ;</li>
|
||||
<li>les compétences et les opportunités ;</li>
|
||||
<li>les individus et les organisations ;</li>
|
||||
<li>les projets et les territoires ;</li>
|
||||
<li>le développement humain et le développement durable.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Depuis plus de vingt ans, nous développons des projets réels permettant aux participants d'acquérir une expérience concrète tout en contribuant à des enjeux réels.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cercle avec l'équipe de travail */}
|
||||
<div className="lg:col-span-5 flex justify-center lg:justify-end">
|
||||
<div className="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 rounded-full overflow-hidden shadow-md border-4 border-white">
|
||||
<img
|
||||
src={teamImg}
|
||||
alt="Équipe gaea21 en réunion de travail"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
143
assets/components/parcours/QuiPeutRejoindre.jsx
Normal file
143
assets/components/parcours/QuiPeutRejoindre.jsx
Normal file
@ -0,0 +1,143 @@
|
||||
import React from 'react';
|
||||
|
||||
// Imports des icônes fournies (ajuste le chemin vers ton dossier d'images)
|
||||
import etudiantIcon from '../../img/etudiant.png';
|
||||
import expertIcon from '../../img/expert.png';
|
||||
import entrepreneurIcon from '../../img/entrepreneur.png';
|
||||
import personneIcon from '../../img/personne.png';
|
||||
import professionnelsIcon from '../../img/professionnels.png';
|
||||
import retraiteIcon from '../../img/retraite.png';
|
||||
|
||||
// Données organisées par colonnes pour respecter la hauteur et l'agencement Figma
|
||||
const COLUMNS_DATA = [
|
||||
{
|
||||
colId: 'col-1',
|
||||
cards: [
|
||||
{
|
||||
id: 'etudiants',
|
||||
title: 'Étudiants',
|
||||
description:
|
||||
'Pour réaliser un stage, développer une première expérience professionnelle ou compléter leur formation.',
|
||||
icon: etudiantIcon,
|
||||
},
|
||||
{
|
||||
id: 'personnes-transition',
|
||||
title: 'Personnes en transition',
|
||||
isList: true,
|
||||
listItems: [
|
||||
'Retour à l’emploi.',
|
||||
'Reconversion.',
|
||||
'Réorientation.',
|
||||
'Évolution professionnelle.',
|
||||
],
|
||||
icon: personneIcon,
|
||||
isTall: true, // Carte plus haute
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
colId: 'col-2',
|
||||
cards: [
|
||||
{
|
||||
id: 'jeunes-diplomes',
|
||||
title: 'Jeunes diplômés',
|
||||
description:
|
||||
'Pour renforcer leur employabilité et préparer leur entrée sur le marché du travail.',
|
||||
icon: etudiantIcon, // Ou l'icône jeune diplômé si distincte
|
||||
},
|
||||
{
|
||||
id: 'entrepreneurs',
|
||||
title: 'Entrepreneurs',
|
||||
description:
|
||||
'Pour développer un projet, une activité ou une initiative à impact.',
|
||||
icon: entrepreneurIcon,
|
||||
},
|
||||
{
|
||||
id: 'retraites',
|
||||
title: 'Retraités',
|
||||
description:
|
||||
'Pour mettre leur expérience au service de projets utiles et porteurs de sens.',
|
||||
icon: retraiteIcon,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
colId: 'col-3',
|
||||
cards: [
|
||||
{
|
||||
id: 'professionnels',
|
||||
title: 'Professionnels',
|
||||
description:
|
||||
'Pour développer de nouvelles compétences, élargir leur expérience ou préparer une évolution de carrière.',
|
||||
icon: professionnelsIcon,
|
||||
},
|
||||
{
|
||||
id: 'experts-specialistes',
|
||||
title: 'Experts et spécialistes',
|
||||
description:
|
||||
'Pour transmettre leurs compétences, accompagner des projets, bénéficier de mandats ou contribuer à l’écosystème.',
|
||||
icon: expertIcon,
|
||||
isTall: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function QuiPeutRejoindre() {
|
||||
return (
|
||||
<section className="w-full bg-[#ffffff] text-[#1e293b] py-14 lg:py-20 px-6 md:px-12 lg:px-20 font-sans">
|
||||
<div className="max-w-[1320px] mx-auto">
|
||||
{/* Trait de repère vert olive */}
|
||||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
|
||||
|
||||
{/* Titre de section */}
|
||||
<h2 className="text-2xl sm:text-3xl font-extrabold text-[#111827] uppercase tracking-tight mb-10">
|
||||
QUI PEUT <span className="text-[#7a8035]">REJOINDRE</span> GAEA21 ?
|
||||
</h2>
|
||||
|
||||
{/* Grille 3 colonnes responsive */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
|
||||
{COLUMNS_DATA.map((column) => (
|
||||
<div key={column.colId} className="flex flex-col gap-6">
|
||||
{column.cards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`rounded-2xl border border-[#e5e2d6] bg-white p-6 flex items-start gap-4 transition-all duration-200 shadow-sm hover:shadow-md ${card.isTall ? 'min-h-[190px]' : ''
|
||||
}`}
|
||||
>
|
||||
{/* Icône PNG dédiée */}
|
||||
<img
|
||||
src={card.icon}
|
||||
alt={card.title}
|
||||
className="w-12 h-12 object-contain shrink-0"
|
||||
/>
|
||||
|
||||
{/* Contenu textuel */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-base sm:text-lg font-bold text-[#111827] mb-2 leading-snug">
|
||||
{card.title}
|
||||
</h3>
|
||||
|
||||
{card.isList ? (
|
||||
<ul className="space-y-1.5 text-xs sm:text-[13px] text-[#4b5563] leading-relaxed">
|
||||
{card.listItems.map((item, idx) => (
|
||||
<li key={idx} className="list-none">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-xs sm:text-[13px] text-[#6b7280] leading-relaxed">
|
||||
{card.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
78
assets/components/parcours/SystemeReferents.jsx
Normal file
78
assets/components/parcours/SystemeReferents.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
|
||||
// Import de l'image (renomme-la ou adapte le chemin vers ton dossier assets/img/)
|
||||
import referentsImg from '../../img/accompagner.png';
|
||||
|
||||
export default function SystemeReferents() {
|
||||
return (
|
||||
<section className="w-full bg-[#f9f9f9] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-14 items-center">
|
||||
|
||||
{/* ========================================================= */}
|
||||
{/* 1. Colonne GAUCHE : Textes et rôle du référent (5 cols) */}
|
||||
{/* ========================================================= */}
|
||||
<div className="lg:col-span-5 text-left">
|
||||
{/* Trait vert horizontal */}
|
||||
<div className="w-12 h-1 bg-[#475734] rounded-full mb-6" />
|
||||
|
||||
{/* Sur-titre vert olive */}
|
||||
<p className="text-[11px] sm:text-xs md:text-sm font-extrabold uppercase tracking-wider text-[#8c8f3e] mb-2 sm:mb-3">
|
||||
LE SYSTÈME DES RÉFÉRENTS
|
||||
</p>
|
||||
|
||||
{/* Titre */}
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold text-[#111827] leading-tight mb-5">
|
||||
Accompagner la progression.
|
||||
</h2>
|
||||
|
||||
{/* Présentation */}
|
||||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-1">
|
||||
Chaque participant est accompagné par un référent.
|
||||
</p>
|
||||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2.5">
|
||||
Son rôle est de :
|
||||
</p>
|
||||
|
||||
{/* Liste à puces */}
|
||||
<ul className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-6">
|
||||
{[
|
||||
'suivre l’évolution des compétences ;',
|
||||
'identifier les axes de développement ;',
|
||||
'accompagner la progression ;',
|
||||
'contribuer à l’évaluation ;',
|
||||
'aider à construire la trajectoire.',
|
||||
].map((point, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-[#111827] text-xs leading-none mt-1">•</span>
|
||||
<span>{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Phrase de conclusion en gras */}
|
||||
<p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
|
||||
Le référent constitue un point d'appui tout au long du parcours.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ========================================================= */}
|
||||
{/* 2. Colonne DROITE : Grande photo d'équipe (7 cols) */}
|
||||
{/* ========================================================= */}
|
||||
<div className="lg:col-span-7 flex justify-center lg:justify-end">
|
||||
<div className="w-full max-w-[620px] rounded-2xl overflow-hidden shadow-xs">
|
||||
<img
|
||||
src={referentsImg}
|
||||
alt="Accompagnement par un référent gaea21"
|
||||
className="w-full h-auto object-cover block select-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
72
assets/components/parcours/TeletravailCompetence.jsx
Normal file
72
assets/components/parcours/TeletravailCompetence.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
|
||||
// Import de l'image de la section télétravail exportée de Figma
|
||||
import teletravailImg from '../../img/teletravail.png';
|
||||
|
||||
export default function TeletravailCompetence() {
|
||||
return (
|
||||
<section className="w-full bg-[#fbfbf9] text-[#1e293b] py-12 sm:py-16 lg:py-20 px-4 sm:px-8 md:px-12 font-sans">
|
||||
<div className="max-w-[1240px] mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-14 items-center">
|
||||
|
||||
{/* ========================================================= */}
|
||||
{/* 1. Colonne GAUCHE : Textes et compétences (5 cols) */}
|
||||
{/* ========================================================= */}
|
||||
<div className="lg:col-span-5 text-left">
|
||||
{/* Trait vert horizontal */}
|
||||
<div className="w-12 h-1 bg-[#4B6A4A] rounded-full mb-6" />
|
||||
|
||||
{/* Titre principal en gras/majuscules */}
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-[32px] font-extrabold uppercase text-[#111827] leading-tight mb-5">
|
||||
LE TÉLÉTRAVAIL COMME COMPÉTENCE
|
||||
</h2>
|
||||
|
||||
{/* Paragraphe d'introduction */}
|
||||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-1">
|
||||
Depuis plus de vingt ans, gaea21 développe des méthodes de collaboration à distance.
|
||||
</p>
|
||||
<p className="text-xs sm:text-[13px] text-[#4b5563] leading-relaxed mb-2.5">
|
||||
Les participants apprennent notamment à :
|
||||
</p>
|
||||
|
||||
{/* Liste à puces */}
|
||||
<ul className="space-y-1 text-xs sm:text-[13px] text-[#4b5563] leading-tight max-w-md mb-6">
|
||||
{[
|
||||
'organiser leur travail ;',
|
||||
'gérer leur temps ;',
|
||||
'communiquer efficacement ;',
|
||||
'collaborer à distance ;',
|
||||
'développer leur autonomie ;',
|
||||
'maintenir leur efficacité dans un environnement distribué.',
|
||||
].map((point, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-[#111827] text-xs leading-none mt-1">•</span>
|
||||
<span>{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Phrase de conclusion en gras */}
|
||||
<p className="text-xs sm:text-[13px] font-bold text-[#111827] leading-relaxed">
|
||||
Ces compétences sont aujourd’hui recherchées dans de nombreux secteurs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ========================================================= */}
|
||||
{/* 2. Colonne DROITE : Visuel télétravail / visio (7 cols) */}
|
||||
{/* ========================================================= */}
|
||||
<div className="lg:col-span-7 flex justify-center lg:justify-end">
|
||||
<div className="w-full max-w-[620px] rounded-2xl overflow-hidden shadow-xs">
|
||||
<img
|
||||
src={teletravailImg}
|
||||
alt="Le télétravail comme compétence chez gaea21"
|
||||
className="w-full h-auto object-cover block select-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
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/accompagner.png
Normal file
BIN
assets/img/accompagner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 KiB |
BIN
assets/img/alumni-meeting.png
Normal file
BIN
assets/img/alumni-meeting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
assets/img/base.png
Normal file
BIN
assets/img/base.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
assets/img/coach-img.png
Normal file
BIN
assets/img/coach-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
assets/img/coach-job-icon.png
Normal file
BIN
assets/img/coach-job-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/img/coache-personnel.png
Normal file
BIN
assets/img/coache-personnel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
assets/img/construction.png
Normal file
BIN
assets/img/construction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
assets/img/cordonateur.png
Normal file
BIN
assets/img/cordonateur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
assets/img/decouverte.png
Normal file
BIN
assets/img/decouverte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
BIN
assets/img/developpement.png
Normal file
BIN
assets/img/developpement.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
BIN
assets/img/diplome.png
Normal file
BIN
assets/img/diplome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
assets/img/entrepreneur.png
Normal file
BIN
assets/img/entrepreneur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
assets/img/entretien.png
Normal file
BIN
assets/img/entretien.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
assets/img/etudiant.png
Normal file
BIN
assets/img/etudiant.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/img/evolution.png
Normal file
BIN
assets/img/evolution.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
assets/img/expert.png
Normal file
BIN
assets/img/expert.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/img/expertise.png
Normal file
BIN
assets/img/expertise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
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/icone-coach-personnel.png
Normal file
BIN
assets/img/icone-coach-personnel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
assets/img/icone-coach.png
Normal file
BIN
assets/img/icone-coach.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/img/icone-cordonateur.png
Normal file
BIN
assets/img/icone-cordonateur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assets/img/icone-referent.png
Normal file
BIN
assets/img/icone-referent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
assets/img/icone-rh.png
Normal file
BIN
assets/img/icone-rh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
assets/img/image-learning.png
Normal file
BIN
assets/img/image-learning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 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/intergation.png
Normal file
BIN
assets/img/intergation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
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/maitrise.png
Normal file
BIN
assets/img/maitrise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
assets/img/personne.png
Normal file
BIN
assets/img/personne.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
assets/img/pre-profil.png
Normal file
BIN
assets/img/pre-profil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
assets/img/professionnels.png
Normal file
BIN
assets/img/professionnels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
assets/img/referent.png
Normal file
BIN
assets/img/referent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
assets/img/rejoindre-hero.png
Normal file
BIN
assets/img/rejoindre-hero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
assets/img/retraite.png
Normal file
BIN
assets/img/retraite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
assets/img/rh.png
Normal file
BIN
assets/img/rh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
assets/img/team-discussion.png
Normal file
BIN
assets/img/team-discussion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 416 KiB |
BIN
assets/img/teletravail.png
Normal file
BIN
assets/img/teletravail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 707 KiB |
BIN
assets/img/trajectoire-route.png
Normal file
BIN
assets/img/trajectoire-route.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 KiB |
BIN
assets/img/x1.png
Normal file
BIN
assets/img/x1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
83
assets/styles/alumniCommunaute.css
Normal file
83
assets/styles/alumniCommunaute.css
Normal file
@ -0,0 +1,83 @@
|
||||
/* =========================================
|
||||
SECTION : Communauté / Alumni (Fin de trajectoire)
|
||||
========================================= */
|
||||
.alumni-section {
|
||||
width: 100%;
|
||||
background-color: #f7f5f0;
|
||||
padding: 2rem 2rem 5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.alumni-container {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Image principale */
|
||||
.alumni-media {
|
||||
width: 100%;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.alumni-image {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Contenu texte et listes */
|
||||
.alumni-content {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.alumni-intro-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.alumni-columns-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.alumni-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.alumni-list li {
|
||||
font-size: 0.85rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.75rem;
|
||||
position: relative;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.alumni-list li::before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #111827;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.alumni-image {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.alumni-columns-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
@ -9,99 +9,8 @@
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* NAVBAR */
|
||||
.navbar-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
padding: 1.5rem 3rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-logo img {
|
||||
height: 46px;
|
||||
width: auto;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 3rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
text-decoration: none;
|
||||
color: #1e293b;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
/* Contour lumineux pour détacher les liens du feuillage */
|
||||
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-links li a:hover {
|
||||
color: #8c8f3e;
|
||||
}
|
||||
|
||||
.btn-participer {
|
||||
background-color: #8c8f3e;
|
||||
color: #ffffff;
|
||||
padding: 0.65rem 1.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.btn-participer:hover {
|
||||
background-color: #737630;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 28px;
|
||||
height: 22px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 60;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 100%;
|
||||
height: 2.5px;
|
||||
background-color: #1e293b;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* HERO BANNER */
|
||||
.hero-section {
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
161
assets/styles/exemples-projets.css
Normal file
161
assets/styles/exemples-projets.css
Normal file
@ -0,0 +1,161 @@
|
||||
/* =========================================
|
||||
SECTION : Quelques exemples de projets
|
||||
========================================= */
|
||||
.projets-section {
|
||||
width: 100%;
|
||||
background-color: #f7f5f0;
|
||||
padding: 4.5rem 2rem 3.5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.projets-container {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.projets-uptitle {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #7b8337;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.projets-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.projet-card {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e5e2da;
|
||||
border-radius: 10px;
|
||||
padding: 1.75rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.projet-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.projet-card-desc {
|
||||
font-size: 0.82rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.projets-action-wrap {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-projets-decouvrir {
|
||||
display: inline-block;
|
||||
background-color: #7b8337;
|
||||
color: #ffffff;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
padding: 0.55rem 1.4rem;
|
||||
border-radius: 9999px;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-projets-decouvrir:hover {
|
||||
background-color: #636b2b;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
SECTION : Des compétences pour évoluer
|
||||
========================================= */
|
||||
.competences-section {
|
||||
width: 100%;
|
||||
background-color: #ede9e1;
|
||||
padding: 5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.competences-container {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.competences-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.competences-line {
|
||||
display: block;
|
||||
width: 44px;
|
||||
height: 4px;
|
||||
background-color: #436034;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.competences-uptitle {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.competences-main-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.competences-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.competence-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 2rem 1.75rem;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.competence-card-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.competence-card-desc {
|
||||
font-size: 0.82rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.projets-cards-grid,
|
||||
.competences-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.projets-cards-grid,
|
||||
.competences-cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@ -159,7 +159,7 @@
|
||||
========================================================================== */
|
||||
.footer-newsletter-fullwidth {
|
||||
width: 100%;
|
||||
background-color: #D8DCAB;
|
||||
background-color: #e0dfb6;
|
||||
/* Teinte officielle verte amande/kaki clair du Figma */
|
||||
padding: 28px 0;
|
||||
box-sizing: border-box;
|
||||
@ -253,10 +253,10 @@
|
||||
}
|
||||
|
||||
/* Bouton vert olive (#A4AC56 / #98984B) */
|
||||
.newsletter-btn {
|
||||
#newsletter-btn {
|
||||
height: 44px;
|
||||
padding: 0 28px;
|
||||
background-color: #A4AC56;
|
||||
background-color: #b9b664;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
|
||||
@ -0,0 +1,303 @@
|
||||
/* ========================================================
|
||||
1. CONTENEUR GLOBAL & LOGO
|
||||
======================================================== */
|
||||
.navbar-container {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
z-index: 1000 !important;
|
||||
padding: 1.25rem 2.5rem !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
max-width: 1440px !important;
|
||||
margin: 0 auto !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
text-decoration: none !important;
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.navbar-logo img {
|
||||
height: 42px !important;
|
||||
width: auto !important;
|
||||
display: block !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
2. DESKTOP & TABLETTES (Dès 768px : iPad Mini, Air, Pro, PC)
|
||||
======================================================== */
|
||||
@media (min-width: 768px) {
|
||||
|
||||
/* Grille en 3 zones distinctes : Gauche / Centre / Droite */
|
||||
.navbar-content {
|
||||
display: grid !important;
|
||||
grid-template-columns: auto 1fr auto !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* Le hamburger reste toujours masqué sur iPad et PC */
|
||||
.hamburger {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
grid-column: 1 !important;
|
||||
justify-self: start !important;
|
||||
}
|
||||
|
||||
/* Le conteneur nav couvre le centre et la droite */
|
||||
.navbar-nav {
|
||||
grid-column: 2 / 4 !important;
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr auto !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
position: static !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Liens centrés au milieu de l'écran */
|
||||
.nav-links {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
list-style: none !important;
|
||||
gap: 2rem !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
display: inline-block !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
text-decoration: none !important;
|
||||
color: #1e293b;
|
||||
font-size: 0.92rem !important;
|
||||
font-weight: 500 !important;
|
||||
white-space: nowrap !important;
|
||||
transition: color 0.2s ease;
|
||||
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.nav-links li a:hover {
|
||||
color: #8c8f3e !important;
|
||||
}
|
||||
|
||||
/* Liens blancs pour la page Projet / Trajectoire (fond sombre) */
|
||||
.nav-links.nav-light li a {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
.nav-links.nav-light li a:hover {
|
||||
color: #d1d58b !important;
|
||||
}
|
||||
|
||||
/* Bouton Participer calé à droite */
|
||||
.navbar-action {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.btn-participer {
|
||||
background-color: #8c8f3e !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0.55rem 1.4rem !important;
|
||||
border-radius: 9999px !important;
|
||||
font-size: 0.88rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-decoration: none !important;
|
||||
display: inline-block !important;
|
||||
white-space: nowrap !important;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
|
||||
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-participer:hover {
|
||||
background-color: #737630 !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ajustements proportionnels spécifiques aux écrans tablettes (768px à 900px) */
|
||||
@media (min-width: 768px) and (max-width: 900px) {
|
||||
.navbar-container {
|
||||
padding: 1rem 1.25rem !important;
|
||||
}
|
||||
|
||||
.navbar-logo img {
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 1.25rem !important;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
font-size: 0.82rem !important;
|
||||
}
|
||||
|
||||
.btn-participer {
|
||||
padding: 0.45rem 1rem !important;
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
3. SMARTPHONES UNIQUEMENT (< 768px)
|
||||
======================================================== */
|
||||
@media (max-width: 767px) {
|
||||
.navbar-container {
|
||||
padding: 1rem 1.25rem !important;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.navbar-logo img {
|
||||
height: 34px !important;
|
||||
}
|
||||
|
||||
/* Bouton Hamburger / Croix */
|
||||
.hamburger {
|
||||
position: relative !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-around !important;
|
||||
width: 28px !important;
|
||||
height: 22px !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
cursor: pointer !important;
|
||||
z-index: 1005 !important;
|
||||
/* Reste toujours au-dessus du tiroir */
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 100% !important;
|
||||
height: 2.5px !important;
|
||||
background-color: #1e293b !important;
|
||||
border-radius: 2px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
/* Barres blanches quand le fond est sombre et que le menu est fermé */
|
||||
.navbar-container:has(.nav-light) .hamburger:not(.active) span {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Croix bien visible sur le volet blanc */
|
||||
.hamburger.active span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px) !important;
|
||||
background-color: #1e293b !important;
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(2) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(6px, -6px) !important;
|
||||
background-color: #1e293b !important;
|
||||
}
|
||||
|
||||
/* Tiroir latéral blanc */
|
||||
.navbar-nav {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
right: -100% !important;
|
||||
width: min(85vw, 320px) !important;
|
||||
height: 100vh !important;
|
||||
background-color: #ffffff !important;
|
||||
box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
padding: 6rem 1.5rem 3rem 1.5rem !important;
|
||||
/* Dégage le haut pour ne pas coller à la croix */
|
||||
box-sizing: border-box !important;
|
||||
transition: right 0.35s ease-in-out !important;
|
||||
z-index: 1001 !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.navbar-nav.open {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
/* Liste des liens verticaux */
|
||||
.nav-links {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
list-style: none !important;
|
||||
gap: 1.75rem !important;
|
||||
margin: 0 0 2.5rem 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
text-decoration: none !important;
|
||||
color: #1e293b !important;
|
||||
font-size: 1.15rem !important;
|
||||
font-weight: 500 !important;
|
||||
display: block !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.nav-links.nav-light li a {
|
||||
color: #1e293b !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Bouton Participer bien centré dans le volet */
|
||||
.navbar-action {
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.btn-participer {
|
||||
background-color: #8c8f3e !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0.75rem 2rem !important;
|
||||
border-radius: 9999px !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-decoration: none !important;
|
||||
display: inline-block !important;
|
||||
box-shadow: 0 3px 10px rgba(140, 143, 62, 0.25) !important;
|
||||
}
|
||||
}
|
||||
148
assets/styles/huitTrajectoires.css
Normal file
148
assets/styles/huitTrajectoires.css
Normal file
@ -0,0 +1,148 @@
|
||||
/* --- Section 8 Trajectoires --- */
|
||||
.trajectoires-section {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
padding: 5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.trajectoires-wrapper {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.trajectoires-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.trajectoires-line {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background-color: #111827;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
/* margin-bottom: 1.25rem; */
|
||||
}
|
||||
|
||||
.trajectoires-uptitle {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.trajectoires-main-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Grille 3 colonnes Figma */
|
||||
.trajectoires-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Carte individuelle */
|
||||
.trajectoire-block-card {
|
||||
background-color: #ede9e1;
|
||||
border-radius: 12px;
|
||||
padding: 2rem 1.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.trajectoire-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.trajectoire-indicator-badge {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trajectoire-tagline {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.trajectoire-item-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 1.25rem 0;
|
||||
min-height: 2.6rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Liste des points */
|
||||
.trajectoire-points-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 2rem 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.trajectoire-points-list li {
|
||||
font-size: 0.8rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.45;
|
||||
margin-bottom: 0.75rem;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.trajectoire-points-list li::before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
/* Bouton Découvrir */
|
||||
.trajectoire-card-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.btn-trajectoire-decouvrir {
|
||||
display: inline-block;
|
||||
background-color: #7b8337;
|
||||
color: #ffffff;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
padding: 0.45rem 1.25rem;
|
||||
border-radius: 9999px;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-trajectoire-decouvrir:hover {
|
||||
background-color: #636b2b;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.trajectoires-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.trajectoires-cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
131
assets/styles/human-employment.css
Normal file
131
assets/styles/human-employment.css
Normal file
@ -0,0 +1,131 @@
|
||||
/* --- Human Employment Model --- */
|
||||
.hem-section {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
padding: 5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hem-container {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hem-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.hem-line {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 4px;
|
||||
background-color: #436034;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hem-uptitle {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hem-banner-wrapper {
|
||||
width: 100%;
|
||||
margin-top: 3.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hem-banner-image {
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
height: 380px;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hem-banner-image {
|
||||
height: 220px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.hem-main-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.hem-intro-text {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
color: #4b5563;
|
||||
margin: 0;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/* Grille 4 colonnes */
|
||||
.hem-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hem-card {
|
||||
background-color: #ede9e1;
|
||||
border-radius: 12px;
|
||||
padding: 2rem 1.5rem;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hem-card-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: #436034;
|
||||
margin: 0 0 1.25rem 0;
|
||||
}
|
||||
|
||||
.hem-card-content p {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: #6b7280;
|
||||
margin: 0 0 0.35rem 0;
|
||||
}
|
||||
|
||||
/* Phrase finale */
|
||||
.hem-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hem-footer-text {
|
||||
font-size: 1rem;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hem-footer-text strong {
|
||||
color: #436034;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
.hem-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
372
assets/styles/parcoursHero.css
Normal file
372
assets/styles/parcoursHero.css
Normal file
@ -0,0 +1,372 @@
|
||||
/* ========================================================
|
||||
1. SECTION HERO & BANNIÈRE (REJOINDRE gaea21)
|
||||
======================================================== */
|
||||
.parcours-hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 80vh;
|
||||
background-image: url('../img/rejoindre-hero.jpg');
|
||||
/* Chemin de la photo Figma */
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Dégradé sombre pour garantir la lisibilité du texte blanc */
|
||||
.parcours-hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(10, 15, 25, 0.82) 0%,
|
||||
rgba(10, 15, 25, 0.6) 45%,
|
||||
rgba(10, 15, 25, 0.2) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Contenu textuel de la bannière */
|
||||
.parcours-hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1440px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 7rem 3rem 4rem 3rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.parcours-hero-text-block {
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
/* Titre principal REJOINDRE gaea21 */
|
||||
.parcours-hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.12;
|
||||
color: #ffffff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 1.25rem 0;
|
||||
}
|
||||
|
||||
.parcours-hero-title .brand-name {
|
||||
text-transform: lowercase;
|
||||
font-weight: 800;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Accroche sous le titre */
|
||||
.parcours-hero-subtitle {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.6;
|
||||
color: #ffffff;
|
||||
opacity: 0.95;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
2. HEADER & NAVIGATION INTÉGRÉE
|
||||
======================================================== */
|
||||
.navbar-container {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
z-index: 1000 !important;
|
||||
padding: 1.25rem 3rem !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
max-width: 1440px !important;
|
||||
margin: 0 auto !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Logo à gauche */
|
||||
.navbar-logo {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
text-decoration: none !important;
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.navbar-logo img {
|
||||
height: 42px !important;
|
||||
width: auto !important;
|
||||
display: block !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
3. DESKTOP & TABLETTES (Dès 768px : iPad Mini, Air, PC)
|
||||
======================================================== */
|
||||
@media (min-width: 768px) {
|
||||
.navbar-content {
|
||||
display: grid !important;
|
||||
grid-template-columns: auto 1fr auto !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
grid-column: 1 !important;
|
||||
justify-self: start !important;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
grid-column: 2 / 4 !important;
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr auto !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
position: static !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
height: auto !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Liens blancs centrés au milieu de l'écran */
|
||||
.nav-links {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
list-style: none !important;
|
||||
gap: 2.25rem !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
display: inline-block !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
text-decoration: none !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 0.95rem !important;
|
||||
font-weight: 500 !important;
|
||||
white-space: nowrap !important;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-links li a:hover {
|
||||
color: #d1d58b !important;
|
||||
}
|
||||
|
||||
/* Bouton Participer à droite */
|
||||
.navbar-action {
|
||||
display: flex !important;
|
||||
justify-content: flex-end !important;
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.btn-participer {
|
||||
background-color: #8c8f3e !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0.6rem 1.6rem !important;
|
||||
border-radius: 9999px !important;
|
||||
font-size: 0.9rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-decoration: none !important;
|
||||
display: inline-block !important;
|
||||
white-space: nowrap !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-participer:hover {
|
||||
background-color: #737630 !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Spécifique iPad (768px à 960px) */
|
||||
@media (min-width: 768px) and (max-width: 960px) {
|
||||
.navbar-container {
|
||||
padding: 1rem 1.5rem !important;
|
||||
}
|
||||
|
||||
.parcours-hero-content {
|
||||
padding: 6.5rem 1.5rem 3.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.parcours-hero-title {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 1.35rem !important;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.btn-participer {
|
||||
padding: 0.45rem 1.15rem !important;
|
||||
font-size: 0.82rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
4. SMARTPHONES UNIQUEMENT (< 768px)
|
||||
======================================================== */
|
||||
@media (max-width: 767px) {
|
||||
.parcours-hero-section {
|
||||
min-height: 60vh;
|
||||
background-position: 70% center;
|
||||
}
|
||||
|
||||
.parcours-hero-content {
|
||||
padding: 5.5rem 1.25rem 3rem 1.25rem;
|
||||
}
|
||||
|
||||
.parcours-hero-title {
|
||||
font-size: 2.25rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.parcours-hero-subtitle {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
padding: 1rem 1.25rem !important;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
/* Bouton hamburger mobile */
|
||||
.hamburger {
|
||||
position: relative !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-around !important;
|
||||
width: 28px !important;
|
||||
height: 22px !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
cursor: pointer !important;
|
||||
z-index: 1005 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
width: 100% !important;
|
||||
height: 2.5px !important;
|
||||
background-color: #ffffff !important;
|
||||
/* Barres blanches par défaut sur le hero */
|
||||
border-radius: 2px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
/* Croix active */
|
||||
.hamburger.active span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px) !important;
|
||||
background-color: #1e293b !important;
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(2) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(6px, -6px) !important;
|
||||
background-color: #1e293b !important;
|
||||
}
|
||||
|
||||
/* Volet tiroir mobile blanc */
|
||||
.navbar-nav {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
right: -100% !important;
|
||||
width: min(85vw, 320px) !important;
|
||||
height: 100vh !important;
|
||||
background-color: #ffffff !important;
|
||||
box-shadow: -6px 0 25px rgba(0, 0, 0, 0.15) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
padding: 6rem 1.5rem 3rem 1.5rem !important;
|
||||
box-sizing: border-box !important;
|
||||
transition: right 0.35s ease-in-out !important;
|
||||
z-index: 1001 !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.navbar-nav.open {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
/* Liens verticaux dans le tiroir */
|
||||
.nav-links {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
list-style: none !important;
|
||||
gap: 1.75rem !important;
|
||||
margin: 0 0 2.5rem 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.nav-links li a {
|
||||
text-decoration: none !important;
|
||||
color: #1e293b !important;
|
||||
/* Liens sombres sur fond blanc */
|
||||
font-size: 1.15rem !important;
|
||||
font-weight: 500 !important;
|
||||
display: block !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.navbar-action {
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.btn-participer {
|
||||
background-color: #8c8f3e !important;
|
||||
color: #ffffff !important;
|
||||
padding: 0.75rem 2rem !important;
|
||||
border-radius: 9999px !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-decoration: none !important;
|
||||
display: inline-block !important;
|
||||
box-shadow: 0 3px 10px rgba(140, 143, 62, 0.25) !important;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
110
assets/styles/trajectoireJamaisFigee.css
Normal file
110
assets/styles/trajectoireJamaisFigee.css
Normal file
@ -0,0 +1,110 @@
|
||||
/* =========================================
|
||||
SECTION : Une trajectoire n'est jamais figée
|
||||
========================================= */
|
||||
.trajectoire-figee-section {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
padding: 5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.trajectoire-figee-container {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
/* Colonne Gauche : Textes */
|
||||
.trajectoire-figee-content {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.trajectoire-figee-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.trajectoire-figee-line {
|
||||
display: block;
|
||||
width: 44px;
|
||||
height: 4px;
|
||||
background-color: #436034;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.trajectoire-figee-uptitle {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #7b8337;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.trajectoire-figee-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* Liste des transitions */
|
||||
.trajectoire-figee-list {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.trajectoire-figee-step {
|
||||
font-size: 0.85rem;
|
||||
color: #374151;
|
||||
margin: 0 0 0.6rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Bloc conclusion */
|
||||
.trajectoire-figee-conclusion p {
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Colonne Droite : Image */
|
||||
.trajectoire-figee-media {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.trajectoire-figee-image {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
height: 340px;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 960px) {
|
||||
.trajectoire-figee-container {
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.trajectoire-figee-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.trajectoire-figee-media {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trajectoire-figee-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
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",
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.18.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.0",
|
||||
@ -3040,6 +3041,19 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "3.50.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
|
||||
@ -5684,6 +5698,44 @@
|
||||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz",
|
||||
@ -6003,6 +6055,12 @@
|
||||
"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": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"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
|
||||
{
|
||||
#[Route('/', name: 'app_home')]
|
||||
#[Route('/{reactRouting}', name: 'app_home', requirements: ['reactRouting' => '^(?!api|_wdt|_profiler).+'], defaults: ['reactRouting' => null])]
|
||||
public function index(): Response
|
||||
{
|
||||
return $this->render('home/index.html.twig');
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}gaea21 - Accueil{% endblock %}</title>
|
||||
|
||||
{# Fichiers CSS compilés par Webpack Encore #}
|
||||
{# Laisse Symfony charger automatiquement TOUS les CSS nécessaires #}
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
|
||||
{# Fichiers JS compilés par Webpack Encore #}
|
||||
{# Laisse Symfony charger automatiquement runtime.js + vendors + app.js #}
|
||||
{% block javascripts %}
|
||||
{{ encore_entry_script_tags('app') }}
|
||||
{% endblock %}
|
||||
|
||||
@ -6,9 +6,9 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
|
||||
}
|
||||
|
||||
Encore
|
||||
// Répertoire où les fichiers compilés seront stockés
|
||||
// Le chemin sur le disque où les fichiers compilés sont stockés
|
||||
.setOutputPath('public/build/')
|
||||
// Chemin public utilisé par le serveur web
|
||||
// Le chemin public utilisé par le serveur web pour y accéder
|
||||
.setPublicPath('/build')
|
||||
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user