bb1393e9ef
- Prise en charge du thème sombre du Header sur la route /parcours - Ajout de la section Hero et présentation des chiffres clés - Grille des profils 'Qui peut rejoindre' avec méthode map() et icônes - Intégration de la timeline verticale des étapes d'intégration - Ajout du bandeau 'Learning by Doing' - Restructuration des composants par dossier
104 lines
4.6 KiB
JavaScript
104 lines
4.6 KiB
JavaScript
// 1. IMPORTATIONS DES MODULES ET DES ASSETS
|
|
import React from 'react';
|
|
|
|
// Import de l'image de bannière principale via Webpack Encore
|
|
// Webpack génère automatiquement le bon chemin d'accès avec hachage pour le cache
|
|
import heroBg from '../../img/hero-banner.png';
|
|
|
|
/**
|
|
* 2. COMPOSANT PRINCIPAL : Hero
|
|
*
|
|
* Rôle fonctionnel et visuel :
|
|
* - Première section visible sous le Header (zone "Above the Fold").
|
|
* - Transmet la proposition de valeur principale de gaea21 via un titre H1 percutant.
|
|
* - Propose un bouton d'action (Call-to-Action) guidant l'utilisateur vers la découverte de l'écosystème.
|
|
*/
|
|
export default function Hero() {
|
|
return (
|
|
/*
|
|
SECTION ENGOBANTE DU HERO :
|
|
- className="hero-section" : applique les dimensions (hauteur minimale/100vh),
|
|
le positionnement d'arrière-plan (background-size: cover, background-position: center)
|
|
et le positionnement relatif pour caler les calques enfants.
|
|
- style={{ backgroundImage: ... }} : injection dynamique de l'URL de l'image
|
|
traitée par le bundler Webpack.
|
|
*/
|
|
<section
|
|
className="hero-section"
|
|
style={{ backgroundImage: `url("${heroBg}")` }}
|
|
>
|
|
{/*
|
|
CALQUE D'OVERLAY SOMBRE :
|
|
- Élément positionné en absolu couvrant toute la surface de la section.
|
|
- Applique un gradient ou un filtre semi-transparent sombre afin d'assurer
|
|
un contraste suffisant (normes d'accessibilité WCAG) entre le texte blanc
|
|
et les zones claires de l'image d'arrière-plan.
|
|
*/}
|
|
<div className="hero-overlay"></div>
|
|
|
|
{/*
|
|
CONTENEUR DE CONTENU CENTRÉ :
|
|
- Assure le centrage horizontal du bloc de texte sur la largeur maximale de la page.
|
|
- z-index supérieur à l'overlay pour que les textes et boutons restent cliquables et visibles.
|
|
*/}
|
|
<div className="hero-content">
|
|
|
|
{/*
|
|
BLOC TEXTUEL :
|
|
- Limite la largeur maximale du texte pour éviter qu'il ne s'étale trop sur grands écrans,
|
|
ce qui garantit un confort de lecture optimal.
|
|
*/}
|
|
<div className="hero-text-block">
|
|
|
|
{/*
|
|
TITRE PRINCIPAL H1 :
|
|
- Balise unique et essentielle pour le référencement naturel (SEO).
|
|
- Les balises <br /> forcent des retours à la ligne précis pour sculpter
|
|
la silhouette du texte exactement comme sur la maquette Figma.
|
|
*/}
|
|
<h1 className="hero-title">
|
|
Construire <br />
|
|
les infrastructures <br />
|
|
humaines, économiques <br />
|
|
et territoriales de demain
|
|
</h1>
|
|
|
|
{/*
|
|
PARAGRAPHE D'INTRODUCTION :
|
|
- Résume succinctement les axes d'impact et la légitimité historique (20 ans) de gaea21.
|
|
*/}
|
|
<p className="hero-description">
|
|
Depuis plus de 20 ans, gaea21 relie insertion professionnelle, santé mentale,
|
|
économie locale, transition durable, recherche appliquée et innovation systémique.
|
|
</p>
|
|
|
|
{/*
|
|
BOUTON D'APPEL À L'ACTION (CTA) :
|
|
- Lien d'ancrage vers la section "#ecosysteme".
|
|
- Composé d'un label textuel et d'une flèche SVG vectorielle indiquant l'action/la direction.
|
|
*/}
|
|
<a href="#ecosysteme" className="btn-hero">
|
|
<span>Explorer l'écosystème</span>
|
|
{/* Flèche droite indicative (alignée horizontalement avec le texte) */}
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
// Masque l'icône purement décorative des lecteurs d'écran
|
|
aria-hidden="true"
|
|
>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |