diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..c1afcde
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -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;