gaea21-v2-web/assets/components/HuitTrajectoires.jsx

import React from 'react';
import heroTrajectoireImg from '../img/img-traject-banner.png';
import HuitTrajectoires from './HuitTrajectoires';
import HumanEmploymentModel from './HumanEmploymentModel';
import MethodologieEtapes from './MethodologieEtapes';
import LearningByDoing from './LearningByDoing';
import ExemplesProjets from './ExemplesProjets';
import CompetencesEvoluer from './CompetencesEvoluer';
import '../styles/trajectoire.css';

export default function ConstruireTrajectoire() {
    return (
        <div className="trajectoire-page">
            {/* 1. Hero */}
            <section
                className="trajectoire-hero"
                style={{ backgroundImage: `url("${heroTrajectoireImg}")` }}
            >
                <div className="trajectoire-overlay" />
                <div className="trajectoire-hero-content">
                    <div className="trajectoire-text-wrapper">
                        <h1 className="trajectoire-title">
                            Construire sa <br />
                            trajectoire.
                        </h1>
                        <div className="trajectoire-paragraphs">
                            <p>Parfois, nous savons exactement où nous voulons aller.</p>
                            <p>Parfois, nous savons simplement que nous ne pouvons plus rester là où nous sommes.</p>
                            <p>Depuis plus de vingt ans, gaea21 accompagne les personnes dans ces moments de transition, d'évolution et de construction.</p>
                            <p>Non pas en leur proposant une solution unique.</p>
                        </div>
                        <div className="trajectoire-cta-group">
                            <a href="#questionnaire" className="btn-trajectoire-primary">
                                Trouver ma trajectoire
                            </a>
                            <a href="#approche" className="btn-trajectoire-secondary">
                                Découvrir notre approche
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            {/* 2. Questionnaire Intro */}
            <section className="trajectoire-intro-questions" id="questionnaire">
                <div className="trajectoire-questions-container">
                    <span className="trajectoire-subtitle-green">
                        Trouvons ensemble la trajectoire qui vous correspond
                    </span>
                    <h2 className="trajectoire-heading-black">
                        Répondez à quelques questions.
                    </h2>
                    <div className="trajectoire-action-wrapper">
                        <a href="#demarrer" className="btn-trajectoire-commencer">
                            Commencer
                        </a>
                    </div>
                </div>
            </section>

            {/* 3. Les 8 Trajectoires */}
            <HuitTrajectoires />

            {/* 4. Approche Human Employment Model */}
            <HumanEmploymentModel />

            {/* 5. Méthodologie en 6 Étapes */}
            <MethodologieEtapes />

            {/* 6. Learning by Doing */}
            <LearningByDoing />

            {/* 7. Exemples de projets */}
            <ExemplesProjets />

            {/* 8. Des compétences pour évoluer */}
            <CompetencesEvoluer />
        </div>
    );
}