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 React from 'react';
|
||||||
import { createRoot } from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import Home from './components/Home.jsx'; // <-- Ajoute .jsx ici !
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||||
|
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');
|
function App() {
|
||||||
if (container) {
|
return (
|
||||||
const root = createRoot(container);
|
<BrowserRouter>
|
||||||
root.render(<Home />);
|
<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)}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
className="newsletter-input"
|
className="newsletter-input"
|
||||||
/>
|
/>
|
||||||
<button type="submit" className="newsletter-btn">
|
<button type="submit" id="newsletter-btn">
|
||||||
S'abonner
|
S'abonner
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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 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'];
|
const CATEGORIES = ['Tout', 'Actualités', 'Publications', 'Évènements', 'Projets'];
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import carreerBg from '../img/carreer.png';
|
import carreerBg from '../../img/carreer.png';
|
||||||
|
|
||||||
export default function CareersSection() {
|
export default function CareersSection() {
|
||||||
const parcours = [
|
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
|
// 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
|
// 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
|
* 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';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
// Webpack Encore gère l'empreinte de hachage (hash) et le chemin public de l'image de fond
|
// 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. STRUCTURE DE DONNÉES STATIQUE : DIAPOSITIVES DU CARROUSEL
|
||||||
@ -2,10 +2,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
// Webpack Encore gère l'empreinte de hachage (hashing) et le chemin public des images
|
// Webpack Encore gère l'empreinte de hachage (hashing) et le chemin public des images
|
||||||
import individusImg from '../img/individus.png';
|
import individusImg from '../../img/individus.png';
|
||||||
import entrepriseImg from '../img/entreprise.png';
|
import institutionsImg from '../../img/institutions.png';
|
||||||
import institutionsImg from '../img/institutions.png';
|
import coachImg from '../../img/coach.png';
|
||||||
import coachImg from '../img/coach.png';
|
import entrepriseImg from '../../img/entreprise.png';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 2. STRUCTURE DE DONNÉES STATIQUE : LISTE DES PROFILS CIBLES
|
* 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;
|
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 BANNER */
|
||||||
.hero-section {
|
.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 {
|
.footer-newsletter-fullwidth {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #D8DCAB;
|
background-color: #e0dfb6;
|
||||||
/* Teinte officielle verte amande/kaki clair du Figma */
|
/* Teinte officielle verte amande/kaki clair du Figma */
|
||||||
padding: 28px 0;
|
padding: 28px 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -253,10 +253,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Bouton vert olive (#A4AC56 / #98984B) */
|
/* Bouton vert olive (#A4AC56 / #98984B) */
|
||||||
.newsletter-btn {
|
#newsletter-btn {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0 28px;
|
padding: 0 28px;
|
||||||
background-color: #A4AC56;
|
background-color: #b9b664;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
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",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.18.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.24.0",
|
"@babel/core": "^7.24.0",
|
||||||
@ -3040,6 +3041,19 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cookie": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/express"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/core-js": {
|
"node_modules/core-js": {
|
||||||
"version": "3.50.0",
|
"version": "3.50.0",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
|
||||||
@ -5684,6 +5698,44 @@
|
|||||||
"react": "^18.3.1"
|
"react": "^18.3.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-router": {
|
||||||
|
"version": "7.18.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
|
||||||
|
"integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"cookie": "^1.0.1",
|
||||||
|
"set-cookie-parser": "^2.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-router-dom": {
|
||||||
|
"version": "7.18.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
|
||||||
|
"integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"react-router": "7.18.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/read-cache": {
|
"node_modules/read-cache": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz",
|
||||||
@ -6003,6 +6055,12 @@
|
|||||||
"randombytes": "^2.1.0"
|
"randombytes": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/set-cookie-parser": {
|
||||||
|
"version": "2.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
|
||||||
|
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/shallow-clone": {
|
"node_modules/shallow-clone": {
|
||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
|
||||||
|
|||||||
@ -24,6 +24,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.18.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,7 +8,7 @@ use Symfony\Component\Routing\Attribute\Route;
|
|||||||
|
|
||||||
class HomeController extends AbstractController
|
class HomeController extends AbstractController
|
||||||
{
|
{
|
||||||
#[Route('/', name: 'app_home')]
|
#[Route('/{reactRouting}', name: 'app_home', requirements: ['reactRouting' => '^(?!api|_wdt|_profiler).+'], defaults: ['reactRouting' => null])]
|
||||||
public function index(): Response
|
public function index(): Response
|
||||||
{
|
{
|
||||||
return $this->render('home/index.html.twig');
|
return $this->render('home/index.html.twig');
|
||||||
|
|||||||
@ -5,12 +5,12 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>{% block title %}gaea21 - Accueil{% endblock %}</title>
|
<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 %}
|
{% block stylesheets %}
|
||||||
{{ encore_entry_link_tags('app') }}
|
{{ encore_entry_link_tags('app') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{# Fichiers JS compilés par Webpack Encore #}
|
{# Laisse Symfony charger automatiquement runtime.js + vendors + app.js #}
|
||||||
{% block javascripts %}
|
{% block javascripts %}
|
||||||
{{ encore_entry_script_tags('app') }}
|
{{ encore_entry_script_tags('app') }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
@ -6,9 +6,9 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Encore
|
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/')
|
.setOutputPath('public/build/')
|
||||||
// Chemin public utilisé par le serveur web
|
// Le chemin public utilisé par le serveur web pour y accéder
|
||||||
.setPublicPath('/build')
|
.setPublicPath('/build')
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
Reference in New Issue
Block a user