feat: add src/components/Hero.tsx
This commit is contained in:
parent
522fa79e22
commit
1f7b9ae7b9
|
|
@ -0,0 +1,152 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { ChevronDown, Shield, Star } from 'lucide-react';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setVisible(true), 100);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const scrollToAbout = () => {
|
||||
document.querySelector('#apropos')?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="accueil"
|
||||
className="relative min-h-screen flex items-center justify-center text-white overflow-hidden"
|
||||
style={{
|
||||
background: `
|
||||
linear-gradient(180deg, rgba(10,30,50,0.85) 0%, rgba(16,42,67,0.75) 60%, rgba(10,30,50,0.90) 100%),
|
||||
url('https://images.unsplash.com/photo-1569025743873-ea3a9ade89f9?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat fixed
|
||||
`,
|
||||
}}
|
||||
>
|
||||
{/* Decorative top border */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-gold-500 to-transparent" />
|
||||
|
||||
{/* Floating badge */}
|
||||
<div className="absolute top-28 right-8 hidden xl:flex flex-col items-center opacity-70">
|
||||
<div className="w-16 h-16 rounded-full border-2 border-gold-400 flex items-center justify-center">
|
||||
<Star className="w-7 h-7 text-gold-400" />
|
||||
</div>
|
||||
<div className="text-gold-400 text-xs text-center mt-2 tracking-widest uppercase">Honneur<br/>Patrie</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center py-32">
|
||||
{/* Eyebrow */}
|
||||
<div
|
||||
className={`transition-all duration-700 delay-100 ${
|
||||
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
|
||||
}`}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 text-gold-400 uppercase tracking-widest text-xs sm:text-sm font-semibold mb-6 border border-gold-500/40 px-4 py-2 rounded-sm bg-gold-500/10">
|
||||
<Shield className="w-4 h-4" />
|
||||
Fondée pour honorer et perpétuer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Main Title */}
|
||||
<h1
|
||||
className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6 text-shadow transition-all duration-700 delay-200 ${
|
||||
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
|
||||
}`}
|
||||
style={{ fontFamily: "'Playfair Display', Georgia, serif" }}
|
||||
>
|
||||
Anciens des{' '}
|
||||
<span className="text-gold-400">Troupes de Marine</span>
|
||||
<br />& des{' '}
|
||||
<span className="text-gold-400">Télégraphistes Coloniaux</span>
|
||||
</h1>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
className={`flex items-center justify-center gap-4 mb-8 transition-all duration-700 delay-300 ${
|
||||
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
|
||||
}`}
|
||||
>
|
||||
<div className="h-px w-16 bg-gold-500/60" />
|
||||
<div className="w-2 h-2 rounded-full bg-gold-500" />
|
||||
<div className="h-px w-16 bg-gold-500/60" />
|
||||
</div>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p
|
||||
className={`text-lg sm:text-xl md:text-2xl text-gray-200 max-w-3xl mx-auto leading-relaxed mb-4 transition-all duration-700 delay-400 ${
|
||||
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
|
||||
}`}
|
||||
>
|
||||
Préserver la mémoire de ceux qui ont servi, honorer les sacrifices consentis,
|
||||
et maintenir vivante la fraternité d'armes entre anciens camarades.
|
||||
</p>
|
||||
|
||||
{/* Motto */}
|
||||
<p
|
||||
className={`text-gold-300 italic text-lg mb-12 transition-all duration-700 delay-500 ${
|
||||
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
|
||||
}`}
|
||||
style={{ fontFamily: "'Playfair Display', Georgia, serif" }}
|
||||
>
|
||||
« Valeur et Discipline »
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div
|
||||
className={`flex flex-col sm:flex-row items-center justify-center gap-4 transition-all duration-700 delay-600 ${
|
||||
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className="btn-primary text-base px-8 py-4"
|
||||
>
|
||||
<Shield className="w-5 h-5" />
|
||||
Rejoindre l'Association
|
||||
</button>
|
||||
<button
|
||||
onClick={() => document.querySelector('#apropos')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className="btn-secondary text-base px-8 py-4"
|
||||
>
|
||||
En savoir plus
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stats bar */}
|
||||
<div
|
||||
className={`mt-20 grid grid-cols-3 gap-4 border-t border-white/10 pt-8 transition-all duration-700 delay-700 ${
|
||||
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'
|
||||
}`}
|
||||
>
|
||||
{[
|
||||
{ value: '1945', label: 'Année de fondation' },
|
||||
{ value: '500+', label: 'Membres actifs' },
|
||||
{ value: '80 ans', label: "D'histoire commune" },
|
||||
].map((stat) => (
|
||||
<div key={stat.label} className="text-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-gold-400" style={{ fontFamily: "'Playfair Display', serif" }}>
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-gray-300 mt-1 uppercase tracking-wide">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<button
|
||||
onClick={scrollToAbout}
|
||||
className="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/60 hover:text-gold-400 transition-colors animate-bounce"
|
||||
aria-label="Défiler vers le bas"
|
||||
>
|
||||
<ChevronDown className="w-8 h-8" />
|
||||
</button>
|
||||
|
||||
{/* Bottom gradient */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-white to-transparent pointer-events-none" />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
Loading…
Reference in New Issue