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