first commitv1

src/components/Navbar.jsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { Menu, X } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+const links = [
+  { href: '#accueil', label: 'Accueil' },
+  { href: '#a-propos', label: 'À propos' },
+  { href: '#services', label: 'Services' },
+  { href: '#galerie', label: 'Galerie' },
+  { href: '#faq', label: 'FAQ' },
+  { href: '#contact', label: 'Contact' },
+]
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <motion.header
+      initial={{ y: -24, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+      className="fixed inset-x-0 top-0 z-50 border-b border-white/5 bg-barber-bg/80 backdrop-blur-md"
+    >
+      <nav
+        className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8"
+        aria-label="Principale"
+      >
+        <a
+          href="#accueil"
+          className="group font-serif text-lg tracking-wide text-barber-cream sm:text-xl"
+        >
+          <span className="transition-colors group-hover:text-barber-gold">Atelier</span>{' '}
+          <span className="text-barber-gold transition-colors group-hover:text-barber-cream">
+            Royal
+          </span>
+        </a>
+
+        <ul className="hidden items-center gap-3 md:flex md:gap-4 lg:gap-5">
+          {links.map(({ href, label }) => (
+            <li key={href}>
+              <a
+                href={href}
+                className="whitespace-nowrap text-xs font-medium tracking-wide text-barber-cream/80 transition-colors hover:text-barber-gold lg:text-sm"
+              >
+                {label}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <button
+          type="button"
+          className="flex h-10 w-10 items-center justify-center rounded border border-barber-gold/30 text-barber-gold transition-colors hover:border-barber-gold hover:bg-barber-gold/10 md:hidden"
+          aria-expanded={open}
+          aria-controls="mobile-menu"
+          onClick={() => setOpen((v) => !v)}
+        >
+          {open ? <X className="h-5 w-5" aria-hidden /> : <Menu className="h-5 w-5" aria-hidden />}
+          <span className="sr-only">Menu</span>
+        </button>
+      </nav>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            id="mobile-menu"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.25 }}
+            className="overflow-hidden border-b border-white/5 bg-barber-bg md:hidden"
+          >
+            <ul className="flex flex-col gap-1 px-4 pb-4">
+              {links.map(({ href, label }) => (
+                <li key={href}>
+                  <a
+                    href={href}
+                    onClick={() => setOpen(false)}
+                    className="block rounded px-3 py-3 text-sm font-medium text-barber-cream/90 transition-colors hover:bg-white/5 hover:text-barber-gold"
+                  >
+                    {label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.header>
+  )
+}