166 lines
9.1 KiB
JavaScript
166 lines
9.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
// Importation du logo vectoriel ou transparent de gaea21
|
|
import logo from '../img/logo_gaea21.png';
|
|
// Importation de la feuille de style dédiée au Footer
|
|
import '../styles/footer.css';
|
|
|
|
export default function Footer() {
|
|
// État local pour stocker l'adresse email saisie par l'utilisateur
|
|
const [email, setEmail] = useState('');
|
|
|
|
// Gestionnaire de soumission du formulaire d'abonnement à la newsletter
|
|
const handleSubmitNewsletter = (e) => {
|
|
e.preventDefault();
|
|
if (email) {
|
|
alert(`Inscription enregistrée pour : ${email}`);
|
|
setEmail('');
|
|
}
|
|
};
|
|
|
|
// Liste ordonnée des liens pour la colonne "Écosystème"
|
|
const ecosystemLinks = [
|
|
'Individus',
|
|
'Entreprises',
|
|
'Institutions',
|
|
'Universités',
|
|
'Praticiens',
|
|
];
|
|
|
|
return (
|
|
<footer className="gaea-footer">
|
|
|
|
{/* -------------------------------------------------------------------
|
|
1. SECTION SUPÉRIEURE (Centrée sur 1440px)
|
|
Comprend : Le logo + Réseaux sociaux, le trait doré et les colonnes
|
|
------------------------------------------------------------------- */}
|
|
<div className="gaea-footer-inner">
|
|
<div className="footer-top-row">
|
|
|
|
{/* Bloc Marque : Logo gaea21 et liens sociaux */}
|
|
<div className="footer-brand-col">
|
|
<a href="/" className="footer-logo">
|
|
<img src={logo} alt="Logo gaea21" />
|
|
</a>
|
|
|
|
<div className="footer-socials">
|
|
{/* Icône LinkedIn */}
|
|
<a href="#linkedin" aria-label="LinkedIn">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z" />
|
|
</svg>
|
|
</a>
|
|
|
|
{/* Icône Instagram */}
|
|
<a href="#instagram" aria-label="Instagram">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.13-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
|
</svg>
|
|
</a>
|
|
|
|
{/* Icône YouTube */}
|
|
<a href="#youtube" aria-label="YouTube">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Ligne verticale dorée (#A8985A) de séparation */}
|
|
<div className="footer-gold-divider" />
|
|
|
|
{/* Les 3 colonnes de liens de navigation */}
|
|
<div className="footer-nav-columns">
|
|
{/* Colonne 1 : Écosystème */}
|
|
<div>
|
|
<h4 className="footer-col-title">Écosystème</h4>
|
|
<ul className="footer-links-list">
|
|
{ecosystemLinks.map((item, idx) => (
|
|
<li key={idx}>
|
|
<a href={`#${item.toLowerCase()}`}>{item}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Colonne 2 : Ressources */}
|
|
<div>
|
|
<h4 className="footer-col-title">Ressources</h4>
|
|
</div>
|
|
|
|
{/* Colonne 3 : À propos */}
|
|
<div>
|
|
<h4 className="footer-col-title">À propos</h4>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* -------------------------------------------------------------------
|
|
2. BANDEAU NEWSLETTER (Pleine Largeur / Full bleed)
|
|
S'étend d'un bord à l'autre de l'écran avec la couleur #D8DCAB
|
|
------------------------------------------------------------------- */}
|
|
<div className="footer-newsletter-fullwidth">
|
|
<div className="footer-newsletter-content">
|
|
|
|
{/* Côté gauche : Pastille ronde grise avec icône violette + Textes */}
|
|
<div className="newsletter-brand-side">
|
|
<div className="newsletter-icon-circle">
|
|
<svg fill="none" stroke="currentColor" strokeWidth="1.8" viewBox="0 0 24 24">
|
|
<rect x="3" y="5" width="18" height="14" rx="2" />
|
|
<polyline points="3 7 12 13 21 7" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="newsletter-texts">
|
|
<h3>Ne manquez rien de nos actualités</h3>
|
|
<p>
|
|
Abonnez vous a notre Newsletters pour recevoir <br />
|
|
nos dernières nouvelles et publications
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Côté droit : Formulaire (Champ ovale noir + Bouton vert olive) */}
|
|
<form onSubmit={handleSubmitNewsletter} className="newsletter-form-side">
|
|
<div className="newsletter-input-group">
|
|
<input
|
|
type="email"
|
|
required
|
|
placeholder="Votre adresse e-mail"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="newsletter-input"
|
|
/>
|
|
<button type="submit" id="newsletter-btn">
|
|
S'abonner
|
|
</button>
|
|
</div>
|
|
<span className="newsletter-privacy-text">
|
|
Nous respectons votre vie privée. Désinscription possible à tout moment
|
|
</span>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* -------------------------------------------------------------------
|
|
3. BARRE DE MENTIONS LÉGALES TOUT EN BAS (Centrée sur 1440px)
|
|
------------------------------------------------------------------- */}
|
|
<div className="gaea-footer-inner">
|
|
<div className="footer-bottom-bar">
|
|
<div>gaea21 2026 - Tout droit réservés</div>
|
|
<div className="footer-bottom-links">
|
|
<a href="#mentions-legales">Mentions légales</a>
|
|
<span className="divider">|</span>
|
|
<a href="#confidentialite">Politiques de confidentialités</a>
|
|
<span className="divider">|</span>
|
|
<a href="#cookies">Cookies</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
);
|
|
} |