d3b9318dee
- découpage du css par composant (navbar, hero, footer, global) - ajustement pixel-perfect du footer (newsletter full-bleed, alignements, typographies) - documentation et commentaires détaillés du code react et css
82 lines
3.2 KiB
JavaScript
82 lines
3.2 KiB
JavaScript
// 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>
|
|
);
|
|
} |