only front-end init

components/Header.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ShoppingBag, User, Menu, X } from "lucide-react";
+import { useState } from "react";
+import { useCart } from "@/contexts/CartContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import LanguageSwitcher from "./LanguageSwitcher";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const { totalItems, setIsCartOpen } = useCart();
+  const { t } = useLanguage();
+  const currentPath = usePathname();
+
+  const navLinks = [
+    { to: "/boutique", label: t("nav.shop") },
+    { to: "/reservation", label: t("nav.booking") },
+    { to: "/a-propos", label: t("nav.about") },
+    { to: "/contact", label: t("nav.contact") },
+  ];
+
+  const isActive = (path: string) => currentPath === path;
+
+  return (
+    <header className="sticky top-0 z-50 bg-background/95 backdrop-blur-md border-b border-border">
+      <div className="container mx-auto px-4 lg:px-8">
+        <div className="flex items-center justify-between h-16 lg:h-20">
+          {/* Mobile menu button */}
+          <button
+            className="lg:hidden p-2"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </button>
+
+          {/* Logo */}
+          <Link href="/" className="font-serif text-xl lg:text-2xl font-semibold tracking-wide text-foreground">
+            BADO HAIR
+          </Link>
+
+          {/* Desktop nav */}
+          <nav className="hidden lg:flex items-center gap-8 cursor-pointer">
+            {navLinks.map((link) => (
+              <Link
+                key={link.to}
+                href={link.to}
+                className={`text-sm tracking-wide transition-colors hover:text-primary ${
+                  isActive(link.to) ? "text-primary font-medium" : "text-muted-foreground"
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+
+          {/* Right icons */}
+          <div className="flex items-center gap-3">
+            <LanguageSwitcher />
+            <Link href="/connexion" className="p-2 text-muted-foreground hover:text-foreground transition-colors">
+              <User className="h-5 w-5" />
+            </Link>
+            <button
+              onClick={() => setIsCartOpen(true)}
+              className="p-2 text-muted-foreground hover:text-foreground transition-colors relative cursor-pointer"
+            >
+              <ShoppingBag className="h-5 w-5" />
+              {totalItems > 0 && (
+                <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-primary text-primary-foreground text-[10px] flex items-center justify-center font-medium">
+                  {totalItems}
+                </span>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile menu */}
+        {mobileMenuOpen && (
+          <nav className="lg:hidden pb-4 border-t border-border pt-4 space-y-3">
+            {navLinks.map((link) => (
+              <Link
+                key={link.to}
+                href={link.to}
+                onClick={() => setMobileMenuOpen(false)}
+                className={`block py-2 text-sm tracking-wide ${
+                  isActive(link.to) ? "text-primary font-medium" : "text-muted-foreground"
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+};