feat(parcours): intégration des sections de la page Parcours conforme à Figma
- 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
This commit is contained in:
MohamedLoum1001
175
assets/components/home/ActualitySection.jsx
Normal file
175
assets/components/home/ActualitySection.jsx
Normal file
@ -0,0 +1,175 @@
|
||||
import React, { useState } from 'react';
|
||||
import bannerBg from '../../img/homepageactuality.png';
|
||||
|
||||
const CATEGORIES = ['Tout', 'Actualités', 'Publications', 'Évènements', 'Projets'];
|
||||
|
||||
const NEWS_ITEMS = [
|
||||
{ id: 1, tag: 'En ce moment' },
|
||||
{ id: 2, tag: 'En ce moment' },
|
||||
{ id: 3, tag: 'En ce moment' },
|
||||
{ id: 4, tag: 'En ce moment' },
|
||||
];
|
||||
|
||||
export default function ActualitySection() {
|
||||
const [activeCategory, setActiveCategory] = useState('Tout');
|
||||
const [email, setEmail] = useState('');
|
||||
|
||||
const handleSubmitNewsletter = (e) => {
|
||||
e.preventDefault();
|
||||
if (email) {
|
||||
alert(`Inscription enregistrée pour : ${email}`);
|
||||
setEmail('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="w-full bg-white">
|
||||
{/* 1. BANNIÈRE SUPÉRIEURE PLEINE LARGEUR */}
|
||||
<div
|
||||
className="relative w-full min-h-[460px] lg:min-h-[500px] bg-cover bg-right bg-no-repeat flex items-center overflow-hidden"
|
||||
style={{ backgroundImage: `url("${bannerBg}")` }}
|
||||
>
|
||||
{/* Dégradé Figma : Blanc pur à gauche avec transition douce vers le paysage */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(90deg, #ffffff 0%, #ffffff 38%, rgba(255,255,255,0.85) 48%, rgba(255,255,255,0) 68%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 max-w-[1440px] w-full mx-auto px-6 sm:px-12 lg:px-16 py-12 flex flex-col lg:flex-row lg:items-center justify-between gap-10">
|
||||
{/* Bloc Texte & CTA Gauche */}
|
||||
<div className="max-w-md lg:max-w-lg shrink-0">
|
||||
<span className="text-[0.72rem] font-bold tracking-[0.2em] text-[#8c8f3e] uppercase block mb-3">
|
||||
ACTUALITÉ
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-[2.65rem] font-extrabold text-[#0b1320] leading-[1.18] tracking-tight mb-4">
|
||||
Restez informé, <br />
|
||||
Inspirer le changement
|
||||
</h2>
|
||||
<p className="text-xs sm:text-sm text-slate-500 mb-6 max-w-sm leading-relaxed">
|
||||
Découvrez nos dernières actualités, publications, événements et initiatives sur le terrain
|
||||
</p>
|
||||
<a
|
||||
href="#actualites"
|
||||
className="inline-block bg-[#798334] hover:bg-[#656d2b] text-white text-xs sm:text-sm font-semibold px-6 py-2.5 rounded-full transition-colors shadow-sm"
|
||||
>
|
||||
Voir toute les actualité
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Carte Blanche Flottante "En ce moment" */}
|
||||
<div className="bg-white rounded-3xl p-6 sm:p-8 shadow-[0_12px_36px_rgba(0,0,0,0.1)] border border-slate-100/60 w-full lg:max-w-[460px] h-[210px] sm:h-[230px] flex flex-col justify-between shrink-0">
|
||||
<span className="text-xs font-semibold text-[#8c8f3e]">
|
||||
En ce moment
|
||||
</span>
|
||||
<div className="text-slate-300 text-xs italic">
|
||||
{/* Espace prévu pour le résumé de l'article à la une */}
|
||||
</div>
|
||||
<div className="h-2 w-14 bg-[#edf0db] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. ONGLETS DE FILTRES + GRILLE D'ACTUALITÉS */}
|
||||
<div className="max-w-[1440px] mx-auto px-6 sm:px-12 lg:px-16 pt-10 pb-16">
|
||||
{/* Menu épuré avec soulignement */}
|
||||
<nav className="flex items-center gap-8 sm:gap-12 mb-10 overflow-x-auto no-scrollbar">
|
||||
{CATEGORIES.map((cat) => {
|
||||
const isActive = activeCategory === cat;
|
||||
return (
|
||||
<button
|
||||
key={cat}
|
||||
type="button"
|
||||
onClick={() => setActiveCategory(cat)}
|
||||
className={`text-sm tracking-tight transition-colors pb-1.5 relative whitespace-nowrap bg-transparent border-none cursor-pointer p-0 ${isActive
|
||||
? 'text-slate-900 font-bold'
|
||||
: 'text-slate-600 hover:text-slate-900 font-medium'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
{isActive && (
|
||||
<span className="absolute bottom-0 left-0 w-full h-[2px] bg-slate-900 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Grille des 4 cartes d'articles */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{NEWS_ITEMS.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="bg-[#edf0db] rounded-2xl h-[300px] p-6 flex flex-col justify-between border border-[#e2e6cb] hover:shadow-md transition-shadow cursor-pointer"
|
||||
>
|
||||
<span className="text-xs font-semibold text-[#798334]">
|
||||
{item.tag}
|
||||
</span>
|
||||
<div className="space-y-2.5">
|
||||
<div className="h-3 w-4/5 bg-white/80 rounded-full"></div>
|
||||
<div className="h-3 w-3/5 bg-white/80 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 3. BANDEAU NEWSLETTER AUX COULEURS DE FIGMA */}
|
||||
<div className="bg-[#C3A569] rounded-2xl p-6 sm:p-10 flex flex-col lg:flex-row items-center justify-between gap-6 shadow-sm">
|
||||
{/* Icône enveloppe + Textes */}
|
||||
<div className="flex items-center gap-6 max-w-xl">
|
||||
{/* Cercle d'arrière-plan #D9D9D9 */}
|
||||
<div className="w-16 h-16 rounded-full bg-[#D9D9D9] flex items-center justify-center shrink-0 shadow-inner">
|
||||
{/* Icône violette #6568B9 */}
|
||||
<svg
|
||||
className="w-8 h-8 text-[#6568B9]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.9"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
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>
|
||||
<h3 className="text-lg sm:text-xl font-bold text-white leading-tight">
|
||||
Ne manquez rien de nos actualités
|
||||
</h3>
|
||||
<p className="text-xs sm:text-sm text-white/90 mt-1 leading-relaxed">
|
||||
Abonnez-vous à notre Newsletter pour recevoir nos dernières nouvelles et publications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Formulaire d'inscription */}
|
||||
<form onSubmit={handleSubmitNewsletter} className="w-full lg:w-auto flex-1 max-w-md">
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="Votre adresse e-mail"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-white/20 text-white placeholder-white/80 border border-white/50 rounded-full px-5 py-3 text-xs sm:text-sm focus:outline-none focus:ring-2 focus:ring-white pr-32"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="absolute right-1.5 bg-[#8c8f3e] hover:bg-[#737630] text-white text-xs font-semibold px-5 py-2 rounded-full transition-colors shadow-sm"
|
||||
>
|
||||
S'abonner
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-[0.68rem] text-white/80 block mt-2 ml-4">
|
||||
Nous respectons votre vie privée. Désinscription possible à tout moment.
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user