feat: add src/components/Navbar.tsx

2026-03-08 18:33:43 +00:00 · 2026-03-08 18:33:43 +00:00 · fea59977ef
parent c99448d6b1
commit fea59977ef
1 changed files with 108 additions and 0 deletions
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Menu, X, Shield } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const navLinks = [
+  { label: "Accueil", href: "#accueil" },
+  { label: "Services", href: "#services" },
+  { label: "Témoignages", href: "#temoignages" },
+  { label: "FAQ", href: "#faq" },
+  { label: "Contact", href: "#contact" },
+];
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <nav
+      className={cn(
+        "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
+        scrolled
+          ? "bg-military-dark shadow-lg py-3"
+          : "bg-transparent py-5"
+      )}
+    >
+      {/* Tricolore top bar */}
+      <div className="tricolore h-1 absolute top-0 left-0 right-0" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
+        {/* Logo */}
+        <a href="#accueil" className="flex items-center gap-3 group">
+          <div className="bg-french-red p-2 rounded-sm group-hover:bg-red-700 transition-colors">
+            <Shield className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <span className="text-white font-serif font-bold text-lg leading-none block">
+              ReconversionMil
+            </span>
+            <span className="text-gold text-xs tracking-widest uppercase">
+              Forces Françaises
+            </span>
+          </div>
+        </a>
+
+        {/* Desktop Links */}
+        <ul className="hidden md:flex items-center gap-8">
+          {navLinks.map((link) => (
+            <li key={link.href}>
+              <a
+                href={link.href}
+                className="text-gray-300 hover:text-white text-sm font-medium tracking-wide transition-colors duration-200 relative group"
+              >
+                {link.label}
+                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-french-red group-hover:w-full transition-all duration-300" />
+              </a>
+            </li>
+          ))}
+          <li>
+            <a href="#contact" className="btn-primary py-2.5 px-6 text-xs">
+              Commencer
+            </a>
+          </li>
+        </ul>
+
+        {/* Mobile Toggle */}
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="md:hidden text-white p-2"
+          aria-label="Toggle menu"
+        >
+          {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {isOpen && (
+        <div className="md:hidden bg-military-dark border-t border-gray-700 mt-3">
+          <ul className="flex flex-col px-6 py-4 gap-4">
+            {navLinks.map((link) => (
+              <li key={link.href}>
+                <a
+                  href={link.href}
+                  onClick={() => setIsOpen(false)}
+                  className="text-gray-300 hover:text-white text-sm font-medium block py-2 border-b border-gray-800"
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+            <li>
+              <a href="#contact" className="btn-primary block text-center mt-2">
+                Commencer ma reconversion
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
+    </nav>
+  );
+}