feat(trajectoire): intégration complète de la page et des sous-composants Figma
This commit is contained in:
MohamedLoum1001
@ -1,20 +1,26 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
// Au lieu de './components/Home'
|
||||
|
||||
import Header from './components/Header.jsx';
|
||||
import Home from './components/Home.jsx';
|
||||
import ConstruireTrajectoire from './components/ConstruireTrajectoire.jsx';
|
||||
import './styles/app.css';
|
||||
|
||||
const rootElement = document.getElementById('root'); // ou l'ID de ton conteneur Twig
|
||||
if (rootElement) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/trajectoire" element={<ConstruireTrajectoire />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (rootElement) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(<App />);
|
||||
}
|
||||
55
assets/components/AlumniCommunaute.jsx
Normal file
55
assets/components/AlumniCommunaute.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import alumniImg from '../img/alumni-meeting.png'; // Place l'image exportée de Figma dans assets/img/
|
||||
import '../styles/alumniCommunaute.css';
|
||||
|
||||
const COLONNE_GAUCHE = [
|
||||
'Développez votre réseau.',
|
||||
'Partagez votre expérience.',
|
||||
'Contribuez à des projets.'
|
||||
];
|
||||
|
||||
const COLONNE_DROITE = [
|
||||
'Participez à des communautés de pratique.',
|
||||
'Découvrez de nouvelles opportunités.',
|
||||
'Créez de nouvelles opportunités.'
|
||||
];
|
||||
|
||||
export default function AlumniCommunaute() {
|
||||
return (
|
||||
<section className="alumni-section" id="communaute">
|
||||
<div className="alumni-container">
|
||||
|
||||
{/* 1. Grande photo arrondie */}
|
||||
<div className="alumni-media">
|
||||
<img
|
||||
src={alumniImg}
|
||||
alt="Membres de la communauté gaea21 en réunion de travail"
|
||||
className="alumni-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2. Bloc textuel sous l'image */}
|
||||
<div className="alumni-content">
|
||||
<p className="alumni-intro-title">
|
||||
La fin d’une trajectoire ne marque pas la fin de l’aventure.
|
||||
</p>
|
||||
|
||||
<div className="alumni-columns-grid">
|
||||
<ul className="alumni-list">
|
||||
{COLONNE_GAUCHE.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<ul className="alumni-list">
|
||||
{COLONNE_DROITE.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,11 +1,15 @@
|
||||
import React from 'react';
|
||||
import heroTrajectoireImg from '../img/img-traject-banner.jpg';
|
||||
import heroTrajectoireImg from '../img/img-traject-banner.png';
|
||||
import HuitTrajectoires from './HuitTrajectoires';
|
||||
import HumanEmploymentModel from './HumanEmploymentModel';
|
||||
import MethodologieEtapes from './MethodologieEtapes';
|
||||
import LearningByDoing from './LearningByDoing';
|
||||
import ExemplesProjets from './ExemplesProjets';
|
||||
import '../styles/trajectoire.css';
|
||||
import ExemplesProjets from './ExemplesProjets';
|
||||
import CompetencesEvoluer from './CompetencesEvoluer';
|
||||
import TrajectoireJamaisFigee from './TrajectoireJamaisFigee';
|
||||
import AlumniCommunaute from './AlumniCommunaute';
|
||||
import Footer from './Footer';
|
||||
|
||||
export default function ConstruireTrajectoire() {
|
||||
return (
|
||||
@ -59,18 +63,23 @@ export default function ConstruireTrajectoire() {
|
||||
|
||||
{/* 3. Les 8 Trajectoires */}
|
||||
<HuitTrajectoires />
|
||||
|
||||
{/* 4. Approche Human Employment Model */}
|
||||
<HumanEmploymentModel />
|
||||
|
||||
{/* 5. Méthodologie en 6 Étapes */}
|
||||
<MethodologieEtapes />
|
||||
|
||||
{/* 6. Learning by Doing */}
|
||||
<LearningByDoing />
|
||||
|
||||
{/* 7. Exemples de projets */}
|
||||
<ExemplesProjets />
|
||||
{/* 8. Des compétences pour évoluer */}
|
||||
<CompetencesEvoluer />
|
||||
{/* 9. Une trajectoire n'est jamais figée */}
|
||||
<TrajectoireJamaisFigee />
|
||||
{/* 10. Communauté & fin de parcours */}
|
||||
<AlumniCommunaute />
|
||||
|
||||
{/* 11. Footer global du site */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,33 +4,33 @@ import '../styles/exemples-projets.css';
|
||||
const PROJETS_DATA = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Répertoire Vert",
|
||||
description: "Développer l'économie locale durable."
|
||||
title: 'Répertoire Vert',
|
||||
description: 'Développer l’économie locale durable.'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Green Index",
|
||||
description: "Construire des outils d'évaluation et de transition."
|
||||
title: 'Green Index',
|
||||
description: 'Construire des outils d’évaluation et de transition.'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Recherche appliquée",
|
||||
description: "Transformer les connaissances en solutions concrètes."
|
||||
title: 'Recherche appliquée',
|
||||
description: 'Transformer les connaissances en solutions concrètes.'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Développement commercial",
|
||||
description: "Créer des liens entre projets, entreprises et opportunités."
|
||||
title: 'Développement commercial',
|
||||
description: 'Créer des liens entre projets, entreprises et opportunités.'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Innovation territoriale",
|
||||
description: "Contribuer à la transformation des territoires."
|
||||
title: 'Innovation territoriale',
|
||||
description: 'Contribuer à la transformation des territoires.'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Programmes de développement international",
|
||||
description: "Participer à des initiatives liées à l'agriculture durable, à la création d'emplois, à la recherche et au développement territorial."
|
||||
title: 'Programmes de développement international',
|
||||
description: 'Participer à des initiatives liées à l’agriculture durable, à la création d’emplois, à la recherche et au développement territorial.'
|
||||
}
|
||||
];
|
||||
|
||||
@ -39,11 +39,11 @@ export default function ExemplesProjets() {
|
||||
<section className="projets-section" id="exemples-projets">
|
||||
<div className="projets-container">
|
||||
|
||||
{/* Surtitre */}
|
||||
<span className="projets-tag-top">Quelques exemples de projets</span>
|
||||
{/* Surtitre vert */}
|
||||
<span className="projets-uptitle">Quelques exemples de projets</span>
|
||||
|
||||
{/* Grille des 6 projets avec .map() */}
|
||||
<div className="projets-grid">
|
||||
{/* Grille des 6 cartes via .map() */}
|
||||
<div className="projets-cards-grid">
|
||||
{PROJETS_DATA.map((projet) => (
|
||||
<article key={projet.id} className="projet-card">
|
||||
<h3 className="projet-card-title">{projet.title}</h3>
|
||||
@ -52,9 +52,9 @@ export default function ExemplesProjets() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bouton d'action CTA */}
|
||||
<div className="projets-action">
|
||||
<a href="#tous-les-projets" className="btn-decouvrir-projets">
|
||||
{/* Bouton CTA */}
|
||||
<div className="projets-action-wrap">
|
||||
<a href="#projets" className="btn-projets-decouvrir">
|
||||
Découvrez les projets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -133,7 +133,7 @@ export default function Footer() {
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="newsletter-input"
|
||||
/>
|
||||
<button type="submit" className="newsletter-btn">
|
||||
<button type="submit" id="newsletter-btn">
|
||||
S'abonner
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -44,7 +44,15 @@ export default function Header() {
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/trajectoire" onClick={closeMenu}>
|
||||
<Link
|
||||
to="/trajectoire"
|
||||
onClick={() => {
|
||||
closeMenu();
|
||||
if (typeof onNavigate === 'function') {
|
||||
onNavigate('trajectoire');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Projet
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import Header from './Header';
|
||||
import React from 'react';
|
||||
import Hero from './Hero';
|
||||
import ProfileCards from './ProfileCards';
|
||||
import Methodology from './Methodology';
|
||||
@ -7,29 +6,17 @@ import Impact from './Impact';
|
||||
import ActualitySection from './ActualitySection';
|
||||
import CareersSection from './CareersSection';
|
||||
import Footer from './Footer';
|
||||
import ConstruireTrajectoire from './ConstruireTrajectoire';
|
||||
|
||||
export default function Home() {
|
||||
const [view, setView] = useState('home');
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-white overflow-x-hidden">
|
||||
<Header onNavigate={setView} />
|
||||
<main>
|
||||
{view === 'trajectoire' ? (
|
||||
<ConstruireTrajectoire />
|
||||
) : (
|
||||
<>
|
||||
<Hero />
|
||||
<ProfileCards />
|
||||
<Methodology />
|
||||
<Impact />
|
||||
<ActualitySection />
|
||||
<CareersSection />
|
||||
<Footer />
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
<Hero />
|
||||
<ProfileCards />
|
||||
<Methodology />
|
||||
<Impact />
|
||||
<ActualitySection />
|
||||
<CareersSection />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,80 +1,144 @@
|
||||
import React from 'react';
|
||||
import heroTrajectoireImg from '../img/img-traject-banner.png';
|
||||
import HuitTrajectoires from './HuitTrajectoires';
|
||||
import HumanEmploymentModel from './HumanEmploymentModel';
|
||||
import MethodologieEtapes from './MethodologieEtapes';
|
||||
import LearningByDoing from './LearningByDoing';
|
||||
import ExemplesProjets from './ExemplesProjets';
|
||||
import CompetencesEvoluer from './CompetencesEvoluer';
|
||||
import '../styles/trajectoire.css';
|
||||
import '../styles/huitTrajectoires.css';
|
||||
|
||||
export default function ConstruireTrajectoire() {
|
||||
const TRAJECTOIRES = [
|
||||
{
|
||||
id: 1,
|
||||
color: '#436034', // Vert foncé
|
||||
tag: 'Trouver un emploi',
|
||||
title: 'Insertion Professionnelle',
|
||||
points: [
|
||||
'Transformer ses compétences, son savoir-faire et ses opportunités professionnelles.',
|
||||
'Développer son employabilité.',
|
||||
'Construire son positionnement.',
|
||||
'Accéder au marché du travail.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: '#3B82F6', // Bleu
|
||||
tag: 'Réaliser un stage ou acquérir une première expérience',
|
||||
title: 'Étudiants, Stages & Première Expérience Professionnelle',
|
||||
points: [
|
||||
'Transformer des études en expérience professionnelle.',
|
||||
'Développer des compétences concrètes.',
|
||||
'Construire un premier réseau.',
|
||||
'Découvrir des métiers.',
|
||||
'Préparer son entrée dans la vie professionnelle.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: '#F59E0B', // Jaune ambré
|
||||
tag: 'Revenir après une interruption',
|
||||
title: 'Retour à l’Emploi',
|
||||
points: [
|
||||
'Retrouver progressivement le rythme après une maladie, un burn-out, un congé parental, un accident de vie ou un changement de situation personnelle.',
|
||||
'Retrouver la confiance.',
|
||||
'Réactiver son réseau.',
|
||||
'Réactiver ses projets.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
color: '#EA580C', // Orange
|
||||
tag: 'Me reconvertir',
|
||||
title: 'Reconversion Professionnelle',
|
||||
points: [
|
||||
'Réinventer un nouveau chapitre professionnel sans repartir de zéro.',
|
||||
'Explorer de nouvelles possibilités.',
|
||||
'Transformer ses acquis.',
|
||||
'Développer les compétences nécessaires à son nouveau métier.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
color: '#8B5CF6', // Violet
|
||||
tag: 'Développer mes compétences',
|
||||
title: 'Compétences, Expérience & Évolution Professionnelle',
|
||||
points: [
|
||||
'Développer ses compétences.',
|
||||
'Développer des compétences recherchées.',
|
||||
'Apprendre en faisant.',
|
||||
'S’entraîner à la prise de responsabilité.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
color: '#D97706', // Ocre / Caramel
|
||||
tag: 'Construire mon projet',
|
||||
title: 'Orientation, Coaching & Construction de Trajectoire',
|
||||
points: [
|
||||
'Définir ses objectifs.',
|
||||
'Clarifier sa vision professionnelle.',
|
||||
'Identifier une direction.',
|
||||
'Structurer son évolution à court, moyen et long terme.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
color: '#1F2937', // Noir / Gris foncé
|
||||
tag: 'Développer mon leadership',
|
||||
title: 'Leadership, Coordination & Management Durable',
|
||||
points: [
|
||||
'Apprendre à coordonner.',
|
||||
'Transmettre.',
|
||||
'Développer des équipes, des projets et des visions stratégiques.'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
color: '#92400E', // Brun
|
||||
tag: 'Lancer un projet ou une activité',
|
||||
title: 'Entrepreneuriat & Création d’Activité',
|
||||
points: [
|
||||
'Tester une idée, un projet, une expertise.',
|
||||
'Développer son autonomie.',
|
||||
'Créer de la valeur.',
|
||||
'Construire son activité.'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function HuitTrajectoires() {
|
||||
return (
|
||||
<div className="trajectoire-page">
|
||||
{/* 1. Hero */}
|
||||
<section
|
||||
className="trajectoire-hero"
|
||||
style={{ backgroundImage: `url("${heroTrajectoireImg}")` }}
|
||||
>
|
||||
<div className="trajectoire-overlay" />
|
||||
<div className="trajectoire-hero-content">
|
||||
<div className="trajectoire-text-wrapper">
|
||||
<h1 className="trajectoire-title">
|
||||
Construire sa <br />
|
||||
trajectoire.
|
||||
</h1>
|
||||
<div className="trajectoire-paragraphs">
|
||||
<p>Parfois, nous savons exactement où nous voulons aller.</p>
|
||||
<p>Parfois, nous savons simplement que nous ne pouvons plus rester là où nous sommes.</p>
|
||||
<p>Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.</p>
|
||||
<p>Non pas en leur proposant une solution unique.</p>
|
||||
</div>
|
||||
<div className="trajectoire-cta-group">
|
||||
<a href="#questionnaire" className="btn-trajectoire-primary">
|
||||
Trouver ma trajectoire
|
||||
</a>
|
||||
<a href="#approche" className="btn-trajectoire-secondary">
|
||||
Découvrir notre approche
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<section className="trajectoires-section" id="trajectoires">
|
||||
<div className="trajectoires-wrapper">
|
||||
<header className="trajectoires-header">
|
||||
<span className="trajectoires-line" aria-hidden="true"></span>
|
||||
<span className="trajectoires-uptitle">Les trajectoires</span>
|
||||
<h2 className="trajectoires-main-title">Huit trajectoires pour huit réalités.</h2>
|
||||
</header>
|
||||
|
||||
<div className="trajectoires-cards-grid">
|
||||
{TRAJECTOIRES.map((item) => (
|
||||
<article key={item.id} className="trajectoire-block-card">
|
||||
<div className="trajectoire-card-top">
|
||||
<span
|
||||
className="trajectoire-indicator-badge"
|
||||
style={{ backgroundColor: item.color }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="trajectoire-tagline">{item.tag}</p>
|
||||
</div>
|
||||
|
||||
<h3 className="trajectoire-item-title">{item.title}</h3>
|
||||
|
||||
<ul className="trajectoire-points-list">
|
||||
{item.points.map((point, index) => (
|
||||
<li key={index}>{point}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="trajectoire-card-footer">
|
||||
<a href="#decouvrir" className="btn-trajectoire-decouvrir">
|
||||
Découvrir
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Questionnaire Intro */}
|
||||
<section className="trajectoire-intro-questions" id="questionnaire">
|
||||
<div className="trajectoire-questions-container">
|
||||
<span className="trajectoire-subtitle-green">
|
||||
Trouvons ensemble la trajectoire qui vous correspond
|
||||
</span>
|
||||
<h2 className="trajectoire-heading-black">
|
||||
Répondez à quelques questions.
|
||||
</h2>
|
||||
<div className="trajectoire-action-wrapper">
|
||||
<a href="#demarrer" className="btn-trajectoire-commencer">
|
||||
Commencer
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. Les 8 Trajectoires */}
|
||||
<HuitTrajectoires />
|
||||
|
||||
{/* 4. Approche Human Employment Model */}
|
||||
<HumanEmploymentModel />
|
||||
|
||||
{/* 5. Méthodologie en 6 Étapes */}
|
||||
<MethodologieEtapes />
|
||||
|
||||
{/* 6. Learning by Doing */}
|
||||
<LearningByDoing />
|
||||
|
||||
{/* 7. Exemples de projets */}
|
||||
<ExemplesProjets />
|
||||
|
||||
{/* 8. Des compétences pour évoluer */}
|
||||
<CompetencesEvoluer />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -1,66 +1,73 @@
|
||||
import React from 'react';
|
||||
import hemBannerImg from '../img/human-model-banner.png'; // Place ton export Figma dans assets/img/
|
||||
import '../styles/human-employment.css';
|
||||
import hemImg from '../img/human-model-banner.png'; // Adapte le nom de ton image
|
||||
|
||||
const PILLIERS_DATA = [
|
||||
const DIMENSIONS_DATA = [
|
||||
{
|
||||
id: 1,
|
||||
title: "La personne",
|
||||
items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
|
||||
title: 'La personne',
|
||||
items: ['Ses aspirations.', 'Ses motivations.', 'Ses besoins.', 'Ses valeurs.']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Les compétences",
|
||||
items: ["Celles qu'elle possède déjà.", "Celles qu'elle doit développer."]
|
||||
title: 'Les compétences',
|
||||
items: ['Celles qu’elle possède déjà.', 'Celles qu’elle doit développer.']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "L'expérience",
|
||||
items: ["Les projets.", "Les réalisations.", "Les responsabilités."]
|
||||
title: 'L’expérience',
|
||||
items: ['Les projets.', 'Les réalisations.', 'Les responsabilités.']
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Le réseau",
|
||||
items: ["Ses aspirations.", "Ses motivations.", "Ses besoins.", "Ses valeurs."]
|
||||
title: 'Le réseau',
|
||||
items: ['Ses aspirations.', 'Ses motivations.', 'Ses besoins.', 'Ses valeurs.']
|
||||
}
|
||||
];
|
||||
|
||||
export default function HumanEmploymentModel() {
|
||||
return (
|
||||
<section className="hem-wrapper">
|
||||
<div className="hem-inner">
|
||||
<section className="hem-section" id="approche">
|
||||
<div className="hem-container">
|
||||
|
||||
{/* Paragraphe descriptif */}
|
||||
<p className="hem-description">
|
||||
Chaque parcours est unique et ne peut pas se réduire à un simple intitulé de poste.
|
||||
Nous considérons que les trajectoires durables se construisent lorsque quatre dimensions essentielles s'articulent.
|
||||
</p>
|
||||
{/* Trait vert olive + Titre de section */}
|
||||
<header className="hem-header">
|
||||
<span className="hem-line" aria-hidden="true" />
|
||||
<span className="hem-uptitle">Les trajectoires</span>
|
||||
<h2 className="hem-main-title">Huit trajectoires pour huit réalités.</h2>
|
||||
<p className="hem-intro-text">
|
||||
Chez gaea21, nous ne considérons pas l’insertion, l’emploi ou l’entrepreneuriat comme des objectifs isolés.<br />
|
||||
Nous considérons que les trajectoires durables se construisent lorsque plusieurs dimensions évoluent ensemble.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Grille forcée sur 4 colonnes */}
|
||||
{/* 4 Cartes de dimensions */}
|
||||
<div className="hem-cards-grid">
|
||||
{PILLIERS_DATA.map((p) => (
|
||||
<div key={p.id} className="hem-card">
|
||||
<h3 className="hem-card-title">{p.title}</h3>
|
||||
<ul className="hem-card-list">
|
||||
{p.items.map((it, idx) => (
|
||||
<li key={idx}>{it}</li>
|
||||
{DIMENSIONS_DATA.map((card) => (
|
||||
<article key={card.id} className="hem-card">
|
||||
<h3 className="hem-card-title">{card.title}</h3>
|
||||
<div className="hem-card-content">
|
||||
{card.items.map((line, idx) => (
|
||||
<p key={idx}>{line}</p>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Phrase d'accroche */}
|
||||
<p className="hem-phrase">
|
||||
C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
|
||||
</p>
|
||||
{/* Conclusion / Phrase clé */}
|
||||
<footer className="hem-footer">
|
||||
<p className="hem-footer-text">
|
||||
C’est cette approche que nous appelons le <strong>Human Employment Model</strong>.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
{/* Cadre de l'image */}
|
||||
<div className="hem-banner-container">
|
||||
<img
|
||||
src={hemImg}
|
||||
alt="Human Employment Model Table"
|
||||
className="hem-banner-img"
|
||||
{/* Grande Image Bannière (Mains et cubes en bois) */}
|
||||
<div className="hem-banner-wrapper">
|
||||
<img
|
||||
src={hemBannerImg}
|
||||
alt="Construction et modélisation humaine gaea21"
|
||||
className="hem-banner-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
54
assets/components/TrajectoireJamaisFigee.jsx
Normal file
54
assets/components/TrajectoireJamaisFigee.jsx
Normal file
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import routeImg from '../img/trajectoire-route.png'; // Place ton image exportée de Figma dans assets/img/
|
||||
import '../styles/trajectoireJamaisFigee.css';
|
||||
|
||||
const TEXTES_TRANSITIONS = [
|
||||
'Un étudiant peut devenir coordinateur.',
|
||||
'Un coordinateur peut devenir référent.',
|
||||
'Un référent peut devenir entrepreneur.',
|
||||
'Un entrepreneur peut devenir mentor.',
|
||||
'Une personne en reconversion peut découvrir une vocation inattendue.',
|
||||
'Une première expérience peut ouvrir une carrière entière.'
|
||||
];
|
||||
|
||||
export default function TrajectoireJamaisFigee() {
|
||||
return (
|
||||
<section className="trajectoire-figee-section" id="trajectoire-evolutive">
|
||||
<div className="trajectoire-figee-container">
|
||||
|
||||
{/* Colonne gauche : Contenu textuel */}
|
||||
<div className="trajectoire-figee-content">
|
||||
<header className="trajectoire-figee-header">
|
||||
<span className="trajectoire-figee-line" aria-hidden="true" />
|
||||
<span className="trajectoire-figee-uptitle">Les trajectoires</span>
|
||||
<h2 className="trajectoire-figee-title">Une trajectoire n'est jamais figée.</h2>
|
||||
</header>
|
||||
|
||||
<div className="trajectoire-figee-list">
|
||||
{TEXTES_TRANSITIONS.map((texte, idx) => (
|
||||
<p key={idx} className="trajectoire-figee-step">{texte}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="trajectoire-figee-conclusion">
|
||||
<p>
|
||||
C'est pourquoi les trajectoires gaea21<br />
|
||||
ne sont pas conçues comme des programmes isolés. Elles sont conçues comme des étapes<br />
|
||||
d'un parcours d'évolution.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Colonne droite : Image route */}
|
||||
<div className="trajectoire-figee-media">
|
||||
<img
|
||||
src={routeImg}
|
||||
alt="Route sinueuse traversant la nature"
|
||||
className="trajectoire-figee-image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 705 KiB After Width: | Height: | Size: 705 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;
|
||||
}
|
||||
}
|
||||
@ -1,107 +1,161 @@
|
||||
/* ==========================================================================
|
||||
SECTION EXEMPLES DE PROJETS (FIGMA)
|
||||
========================================================================== */
|
||||
|
||||
/* =========================================
|
||||
SECTION : Quelques exemples de projets
|
||||
========================================= */
|
||||
.projets-section {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 1rem 2rem 5rem 2rem;
|
||||
background-color: #f7f5f0;
|
||||
padding: 4.5rem 2rem 3.5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.projets-container {
|
||||
max-width: 1140px;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Surtitre vert olive */
|
||||
.projets-tag-top {
|
||||
.projets-uptitle {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #7b8337;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Grille 3 colonnes x 2 lignes */
|
||||
.projets-grid {
|
||||
.projets-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Carte blanche avec bordure grise douce */
|
||||
.projet-card {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #e5e2da;
|
||||
border-radius: 10px;
|
||||
padding: 1.75rem 1.5rem;
|
||||
min-height: 125px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.projet-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #8c8f3e;
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.projet-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
color: #111827;
|
||||
margin: 0 0 0.75rem 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.projet-card-desc {
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.5;
|
||||
color: #4b5563;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Alignement du bouton à gauche comme sur la maquette */
|
||||
.projets-action {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.projets-action-wrap {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-decouvrir-projets {
|
||||
.btn-projets-decouvrir {
|
||||
display: inline-block;
|
||||
background-color: #7b8337;
|
||||
color: #ffffff;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
padding: 0.55rem 1.6rem;
|
||||
padding: 0.55rem 1.4rem;
|
||||
border-radius: 9999px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: background-color 0.2s ease, transform 0.15s ease;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-decouvrir-projets:hover {
|
||||
background-color: #6a712f;
|
||||
transform: translateY(-1px);
|
||||
.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: 900px) {
|
||||
.projets-grid {
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.projets-cards-grid,
|
||||
.competences-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.projets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.projets-section {
|
||||
padding: 1rem 1.25rem 3.5rem 1.25rem;
|
||||
.projets-cards-grid,
|
||||
.competences-cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@ -159,7 +159,7 @@
|
||||
========================================================================== */
|
||||
.footer-newsletter-fullwidth {
|
||||
width: 100%;
|
||||
background-color: #D8DCAB;
|
||||
background-color: #e0dfb6;
|
||||
/* Teinte officielle verte amande/kaki clair du Figma */
|
||||
padding: 28px 0;
|
||||
box-sizing: border-box;
|
||||
@ -253,10 +253,10 @@
|
||||
}
|
||||
|
||||
/* Bouton vert olive (#A4AC56 / #98984B) */
|
||||
.newsletter-btn {
|
||||
#newsletter-btn {
|
||||
height: 44px;
|
||||
padding: 0 28px;
|
||||
background-color: #A4AC56;
|
||||
background-color: #b9b664;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -1,113 +1,130 @@
|
||||
/* ==========================================================================
|
||||
SECTION HUMAN EMPLOYMENT MODEL (FIGMA)
|
||||
========================================================================== */
|
||||
|
||||
.hem-wrapper {
|
||||
/* --- Human Employment Model --- */
|
||||
.hem-section {
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 1rem 2rem 5rem 2rem;
|
||||
background-color: white;
|
||||
padding: 5rem 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hem-inner {
|
||||
max-width: 1240px;
|
||||
.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;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Texte d'intro gris */
|
||||
.hem-description {
|
||||
.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.55;
|
||||
color: #6b7280;
|
||||
max-width: 780px;
|
||||
margin: 0 0 2.5rem 0;
|
||||
line-height: 1.6;
|
||||
color: #4b5563;
|
||||
margin: 0;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/* Grille 4 colonnes alignées */
|
||||
/* Grille 4 colonnes */
|
||||
.hem-cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
margin-bottom: 3.5rem;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* Chaque carte beige */
|
||||
.hem-card {
|
||||
background-color: #F4F1EA;
|
||||
background-color: #ede9e1;
|
||||
border-radius: 12px;
|
||||
padding: 1.75rem 1.4rem;
|
||||
box-sizing: border-box;
|
||||
min-height: 160px;
|
||||
padding: 2rem 1.5rem;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hem-card-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: #4B6A4A;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: #436034;
|
||||
margin: 0 0 1.25rem 0;
|
||||
}
|
||||
|
||||
.hem-card-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
.hem-card-content p {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
color: #6b7280;
|
||||
margin: 0 0 0.35rem 0;
|
||||
}
|
||||
|
||||
.hem-card-list li {
|
||||
font-size: 0.8rem;
|
||||
color: #9A9595;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
/* Phrase centrale */
|
||||
.hem-phrase {
|
||||
/* Phrase finale */
|
||||
.hem-footer {
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.hem-footer-text {
|
||||
font-size: 1rem;
|
||||
color: #111827;
|
||||
margin: 0 0 2rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hem-phrase strong {
|
||||
font-weight: 700;
|
||||
.hem-footer-text strong {
|
||||
color: #436034;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Image arrondie */
|
||||
.hem-banner-container {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.hem-banner-img {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive : passage en 2 colonnes uniquement sur smartphone / écran très étroit */
|
||||
@media (max-width: 720px) {
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
.hem-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hem-banner-img {
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 600px) {
|
||||
.hem-cards-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -5,12 +5,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}gaea21 - Accueil{% endblock %}</title>
|
||||
|
||||
{# Fichiers CSS compilés par Webpack Encore #}
|
||||
{# Laisse Symfony charger automatiquement TOUS les CSS nécessaires #}
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{% endblock %}
|
||||
|
||||
{# Fichiers JS compilés par Webpack Encore #}
|
||||
{# Laisse Symfony charger automatiquement runtime.js + vendors + app.js #}
|
||||
{% block javascripts %}
|
||||
{{ encore_entry_script_tags('app') }}
|
||||
{% endblock %}
|
||||
|
||||
@ -6,9 +6,9 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
|
||||
}
|
||||
|
||||
Encore
|
||||
// Répertoire où les fichiers compilés seront stockés
|
||||
// Le chemin sur le disque où les fichiers compilés sont stockés
|
||||
.setOutputPath('public/build/')
|
||||
// Chemin public utilisé par le serveur web
|
||||
// Le chemin public utilisé par le serveur web pour y accéder
|
||||
.setPublicPath('/build')
|
||||
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user