first commitv1

src/components/About.jsx

@@ -0,0 +1,116 @@
+import { motion } from 'framer-motion'
+import { Gem, Hand, Shield } from 'lucide-react'
+
+const pillars = [
+  {
+    icon: Gem,
+    title: 'Matières nobles',
+    text: 'Huiles, baumes et shampoings sélectionnés auprès d’artisans et de maisons françaises — parfums discrets, textures soyeuses.',
+  },
+  {
+    icon: Hand,
+    title: 'Gestuelle précise',
+    text: 'Chaque coupe et chaque ligne de barbe sont travaillées au millimètre, dans le respect de votre morphologie et de votre quotidien.',
+  },
+  {
+    icon: Shield,
+    title: 'Confiance & calme',
+    text: 'Créneaux espacés, cabines feutrées et confidentialité assurée : ici, le temps s’arrête le temps d’un soin.',
+  },
+]
+
+const stats = [
+  { value: '12+', label: 'Années d’expérience' },
+  { value: '4,9', label: 'Note moyenne avis' },
+  { value: '100%', label: 'Sur rendez-vous' },
+]
+
+const sideImage =
+  'https://images.unsplash.com/photo-1599351431202-1e0f0131899e?auto=format&fit=crop&w=900&q=85'
+
+export default function About() {
+  return (
+    <section
+      id="a-propos"
+      className="border-t border-white/5 bg-barber-bg py-20 sm:py-28"
+    >
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.55 }}
+          >
+            <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+              Notre maison
+            </p>
+            <h2 className="font-serif text-3xl font-medium leading-tight text-barber-cream sm:text-4xl md:text-5xl">
+              Un salon pensé comme un cabinet privé
+            </h2>
+            <p className="mt-6 text-sm leading-relaxed text-barber-cream/70 sm:text-base">
+              Fondé en 2014 par deux amis formés chez les plus grands noms de la coiffure masculine parisienne, Atelier Royal est né
+              d’une conviction simple : offrir au client un moment à part, loin du bruit et de la précipitation. Bois fumé, laiton
+              brossé, lumière tamisée : chaque détail du lieu a été imaginé pour prolonger le geste du barbier.
+            </p>
+            <p className="mt-4 text-sm leading-relaxed text-barber-cream/70 sm:text-base">
+              Aujourd’hui, une équipe de six artisans partage la même exigence — écoute, hygiène irréprochable et conseils sincères,
+              que vous passiez pour une retouche express ou pour un après-midi « signature ».
+            </p>
+
+            <dl className="mt-10 grid grid-cols-3 gap-4 border-y border-white/10 py-8">
+              {stats.map((s) => (
+                <div key={s.label} className="text-center sm:text-left">
+                  <dt className="font-serif text-2xl text-barber-gold sm:text-3xl">{s.value}</dt>
+                  <dd className="mt-1 text-[10px] uppercase tracking-wider text-barber-cream/50 sm:text-xs">{s.label}</dd>
+                </div>
+              ))}
+            </dl>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: '-80px' }}
+            transition={{ duration: 0.55, delay: 0.08 }}
+            className="relative"
+          >
+            <div className="overflow-hidden rounded-lg border border-white/10">
+              <img
+                src={sideImage}
+                alt="Détail d'une coupe en salon"
+                loading="lazy"
+                className="aspect-[4/5] w-full object-cover sm:aspect-[5/6]"
+              />
+            </div>
+            <div className="absolute -bottom-4 -left-4 hidden max-w-xs rounded border border-barber-gold/30 bg-barber-stone/95 p-4 text-xs leading-relaxed text-barber-cream/75 backdrop-blur-sm sm:block sm:text-sm">
+              « Nous ne vendons pas une coupe : nous installons une habitude de soin. »
+              <span className="mt-2 block font-medium text-barber-gold">— Marc-Antoine V., directeur artistique</span>
+            </div>
+          </motion.div>
+        </div>
+
+        <ul className="mt-16 grid gap-6 sm:grid-cols-3">
+          {pillars.map((p, i) => {
+            const Icon = p.icon
+            return (
+              <motion.li
+                key={p.title}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-40px' }}
+                transition={{ delay: i * 0.08, duration: 0.45 }}
+              >
+                <article className="h-full rounded-lg border border-white/10 bg-barber-stone/50 p-6">
+                  <Icon className="h-8 w-8 text-barber-gold" aria-hidden />
+                  <h3 className="mt-4 font-serif text-lg text-barber-cream">{p.title}</h3>
+                  <p className="mt-2 text-sm leading-relaxed text-barber-cream/60">{p.text}</p>
+                </article>
+              </motion.li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}

src/components/BackToTop.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronUp } from 'lucide-react'
+
+export default function BackToTop() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 480)
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.a
+          href="#accueil"
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 12 }}
+          transition={{ duration: 0.25 }}
+          className="fixed bottom-6 right-4 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-barber-gold/40 bg-barber-bg/90 text-barber-gold shadow-lg backdrop-blur-sm transition-colors hover:border-barber-gold hover:bg-barber-gold/10 sm:bottom-8 sm:right-6"
+          aria-label="Retour en haut"
+        >
+          <ChevronUp className="h-5 w-5" aria-hidden />
+        </motion.a>
+      )}
+    </AnimatePresence>
+  )
+}

src/components/Faq.jsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronDown } from 'lucide-react'
+
+const faqs = [
+  {
+    q: 'Comment réserver un créneau ?',
+    a: 'Le plus simple est de nous écrire à bonjour@atelier-royal.fr ou par téléphone. Indiquez la prestation souhaitée et vos disponibilités : nous revenons vers vous sous 24 h ouvrées avec une proposition de date.',
+  },
+  {
+    q: 'Puis-je venir sans rendez-vous ?',
+    a: 'Le salon fonctionne exclusivement sur rendez-vous pour garantir calme, ponctualité et temps suffisant pour chaque client. En cas d’urgence, appelez-nous : nous faisons au mieux pour trouver un créneau le jour même.',
+  },
+  {
+    q: 'Quels moyens de paiement acceptez-vous ?',
+    a: 'Carte bancaire, espèces et paiement sans contact. Les cartes cadeaux Atelier Royal sont également disponibles en caisse ou sur demande par e-mail.',
+  },
+  {
+    q: 'Proposez-vous des forfaits ou abonnements ?',
+    a: 'Oui : après votre première visite, nous pouvons vous proposer un carnet de séances ou un suivi barbe mensuel adapté à votre rythme. Demandez conseil à votre barbier en fin de prestation.',
+  },
+  {
+    q: 'Y a-t-il un parking à proximité ?',
+    a: 'Le parking Indigo Bourse (5 min à pied) et plusieurs parkings publics du 2ᵉ arrondissement sont accessibles. Les clients à vélo peuvent accrocher leur deux-roues sur les arceaux rue Montmartre.',
+  },
+]
+
+export default function Faq() {
+  const [open, setOpen] = useState(0)
+
+  return (
+    <section id="faq" className="border-t border-white/5 py-20 sm:py-28">
+      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.55 }}
+          className="mb-10 text-center"
+        >
+          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+            Questions fréquentes
+          </p>
+          <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
+            Avant votre visite
+          </h2>
+          <p className="mx-auto mt-4 max-w-lg text-sm text-barber-cream/60 sm:text-base">
+            Tout ce qu’il est utile de savoir sur les réservations, les paiements et l’accès au salon.
+          </p>
+        </motion.div>
+
+        <ul className="space-y-3">
+          {faqs.map((item, i) => {
+            const isOpen = open === i
+            return (
+              <motion.li
+                key={item.q}
+                initial={{ opacity: 0, y: 12 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-20px' }}
+                transition={{ delay: i * 0.05, duration: 0.4 }}
+              >
+                <div className="overflow-hidden rounded-lg border border-white/10 bg-barber-stone/40">
+                  <button
+                    type="button"
+                    aria-expanded={isOpen}
+                    className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-white/5"
+                    onClick={() => setOpen(isOpen ? -1 : i)}
+                  >
+                    <span className="text-sm font-medium text-barber-cream sm:text-base">{item.q}</span>
+                    <ChevronDown
+                      className={`h-5 w-5 shrink-0 text-barber-gold transition-transform ${isOpen ? 'rotate-180' : ''}`}
+                      aria-hidden
+                    />
+                  </button>
+                  <AnimatePresence initial={false}>
+                    {isOpen && (
+                      <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.25 }}
+                      >
+                        <p className="border-t border-white/5 px-5 pb-5 pt-4 text-sm leading-relaxed text-barber-cream/65">
+                          {item.a}
+                        </p>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </motion.li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}

src/components/Footer.jsx

@@ -0,0 +1,122 @@
+import { MapPin, Phone, Mail, Instagram, Facebook } from 'lucide-react'
+
+const hours = [
+  { day: 'Lun — Ven', time: '10h — 20h' },
+  { day: 'Samedi', time: '9h — 19h' },
+  { day: 'Dimanche', time: 'Sur rendez-vous' },
+]
+
+export default function Footer() {
+  return (
+    <footer id="contact" className="border-t border-barber-gold/20 bg-barber-bg py-16 sm:py-20">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-3">
+          <div>
+            <p className="font-serif text-2xl text-barber-cream">
+              Atelier <span className="text-barber-gold">Royal</span>
+            </p>
+            <p className="mt-4 max-w-sm text-sm leading-relaxed text-barber-cream/60">
+              12 rue de la Couture, 75002 Paris — métro Bourse ou Sentier (lignes 3 et 8). Accès PMR sur
+              demande à la réservation.
+            </p>
+            <ul className="mt-6 space-y-3 text-sm text-barber-cream/75">
+              <li className="flex items-start gap-3">
+                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-barber-gold" aria-hidden />
+                <a
+                  href="https://maps.google.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-colors hover:text-barber-gold"
+                >
+                  Itinéraire Google Maps
+                </a>
+              </li>
+              <li className="flex items-center gap-3">
+                <Phone className="h-4 w-4 shrink-0 text-barber-gold" aria-hidden />
+                <a href="tel:+33142385600" className="transition-colors hover:text-barber-gold">
+                  +33 1 42 38 56 00
+                </a>
+              </li>
+              <li className="flex items-center gap-3">
+                <Mail className="h-4 w-4 shrink-0 text-barber-gold" aria-hidden />
+                <a
+                  href="mailto:bonjour@atelier-royal.fr"
+                  className="transition-colors hover:text-barber-gold"
+                >
+                  bonjour@atelier-royal.fr
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-barber-gold">
+              Horaires
+            </h3>
+            <ul className="mt-4 space-y-3 text-sm text-barber-cream/75">
+              {hours.map((h) => (
+                <li key={h.day} className="flex justify-between gap-4 border-b border-white/5 pb-3">
+                  <span className="text-barber-cream/55">{h.day}</span>
+                  <span>{h.time}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-barber-gold">
+              Réseaux
+            </h3>
+            <p className="mt-4 text-sm text-barber-cream/60">
+              Suivez-nous pour les disponibilités et coulisses du salon.
+            </p>
+            <div className="mt-6 flex gap-3">
+              <a
+                href="https://instagram.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex h-11 w-11 items-center justify-center rounded border border-white/15 text-barber-cream transition-all hover:border-barber-gold hover:text-barber-gold"
+                aria-label="Instagram"
+              >
+                <Instagram className="h-5 w-5" />
+              </a>
+              <a
+                href="https://facebook.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex h-11 w-11 items-center justify-center rounded border border-white/15 text-barber-cream transition-all hover:border-barber-gold hover:text-barber-gold"
+                aria-label="Facebook"
+              >
+                <Facebook className="h-5 w-5" />
+              </a>
+            </div>
+            <a
+              href="mailto:bonjour@atelier-royal.fr?subject=Rendez-vous"
+              className="mt-8 inline-block text-sm font-medium text-barber-gold underline-offset-4 hover:underline"
+            >
+              Prendre RDV — nous écrire
+            </a>
+          </div>
+        </div>
+
+        <div className="mt-14 border-t border-white/10 pt-8 text-center text-xs leading-relaxed text-barber-cream/40">
+          <p>
+            © {new Date().getFullYear()} Atelier Royal SAS — RCS Paris 812 456 789. Hébergement et données :
+            traitement conforme au RGPD sur simple demande.
+          </p>
+          <p className="mt-2">
+            <a href="#faq" className="transition-colors hover:text-barber-gold/80">
+              FAQ &amp; infos pratiques
+            </a>
+            <span aria-hidden className="mx-2 text-barber-cream/25">
+              ·
+            </span>
+            <a href="mailto:bonjour@atelier-royal.fr" className="transition-colors hover:text-barber-gold/80">
+              Contact presse
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/Gallery.jsx

@@ -0,0 +1,109 @@
+import { motion } from 'framer-motion'
+
+const images = [
+  {
+    src: 'https://images.unsplash.com/photo-1621605815971-fbc98d665033?auto=format&fit=crop&w=800&q=80',
+    alt: 'Coupe homme soignée',
+    className: 'md:col-span-2 md:row-span-2',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=600&q=80',
+    alt: 'Salon barbier ambiance luxe',
+    className: '',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1622286342621-4bd786c2447c?auto=format&fit=crop&w=600&q=80',
+    alt: 'Barbe sculptée',
+    className: '',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1599351431202-1e0f0131899e?auto=format&fit=crop&w=700&q=80',
+    alt: 'Détail coupe premium',
+    className: 'md:col-span-2',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1521490683712-35a1cb235434?auto=format&fit=crop&w=500&q=80',
+    alt: 'Rasage traditionnel',
+    className: '',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?auto=format&fit=crop&w=600&q=80',
+    alt: 'Intérieur salon doré',
+    className: '',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1622287167306-6ec14f987b68?auto=format&fit=crop&w=700&q=80',
+    alt: 'Coiffure style barbershop',
+    className: 'md:col-span-2',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1580618672591-eb180b1a973f?auto=format&fit=crop&w=600&q=80',
+    alt: 'Produits de soin barbier luxe',
+    className: '',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1562322140-8baeececf3df?auto=format&fit=crop&w=700&q=80',
+    alt: 'Fauteuil barbier vintage',
+    className: 'md:col-span-2',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1493256337651-120d5a3d8b20?auto=format&fit=crop&w=600&q=80',
+    alt: 'Détail tondeuse et outils',
+    className: '',
+  },
+]
+
+export default function Gallery() {
+  return (
+    <section id="galerie" className="border-t border-white/5 py-20 sm:py-28">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.55 }}
+          className="mb-12 text-center"
+        >
+          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+            Portfolio
+          </p>
+          <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
+            Galerie
+          </h2>
+          <p className="mx-auto mt-4 max-w-2xl text-sm text-barber-cream/60 sm:text-base">
+            Quelques instantanés de notre univers — fades, barbes dessinées, détails matière et lumière du
+            salon. Chaque photo reflète le soin apporté aux volumes et aux finitions, avant votre prochaine
+            visite.
+          </p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true, margin: '-40px' }}
+          transition={{ duration: 0.6 }}
+          className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-4 md:auto-rows-[minmax(120px,auto)] lg:auto-rows-[minmax(140px,auto)]"
+        >
+          {images.map((img, i) => (
+            <motion.figure
+              key={img.src}
+              initial={{ opacity: 0, scale: 0.96 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true, margin: '-20px' }}
+              transition={{ delay: i * 0.05, duration: 0.45 }}
+              className={`group relative overflow-hidden rounded-lg border border-white/10 bg-barber-stone ${img.className}`}
+            >
+              <img
+                src={img.src}
+                alt={img.alt}
+                loading="lazy"
+                className="h-full min-h-[140px] w-full object-cover transition-transform duration-500 group-hover:scale-105 md:min-h-0"
+              />
+              <figcaption className="pointer-events-none absolute inset-0 bg-gradient-to-t from-barber-bg/80 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+            </motion.figure>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  )
+}

src/components/Hero.jsx

@@ -0,0 +1,85 @@
+import { motion } from 'framer-motion'
+import { Calendar } from 'lucide-react'
+
+const heroImage =
+  'https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=2400&q=85'
+
+export default function Hero() {
+  return (
+    <section
+      id="accueil"
+      className="relative flex min-h-[100svh] items-end justify-center overflow-hidden pt-20 pb-16 sm:items-center sm:pb-24"
+    >
+      <div
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{ backgroundImage: `url('${heroImage}')` }}
+        aria-hidden
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-barber-bg via-barber-bg/85 to-barber-bg/40" />
+      <div className="absolute inset-0 bg-gradient-to-r from-barber-bg/60 via-transparent to-barber-bg/50" />
+
+      <div className="relative z-10 mx-auto max-w-4xl px-4 text-center sm:px-6">
+        <motion.p
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.15, duration: 0.6 }}
+          className="mb-4 text-xs font-medium uppercase tracking-[0.35em] text-barber-gold sm:text-sm"
+        >
+          Coiffure & barbier — Paris
+        </motion.p>
+        <motion.h1
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.25, duration: 0.65 }}
+          className="font-serif text-4xl font-medium leading-tight tracking-tight text-barber-cream sm:text-5xl md:text-6xl lg:text-7xl"
+        >
+          L&apos;Art de la Coupe,
+          <br />
+          <span className="text-barber-gold">l&apos;Excellence du Style</span>
+        </motion.h1>
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4, duration: 0.6 }}
+          className="mx-auto mt-6 max-w-xl text-sm leading-relaxed text-barber-cream/75 sm:text-base"
+        >
+          Un sanctuaire du soin masculin où chaque détail compte — matériaux nobles, gestes précis
+          et une ambiance feutrée pour un moment qui vous ressemble.
+        </motion.p>
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.55, duration: 0.5 }}
+          className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
+        >
+          <a
+            href="#contact"
+            className="inline-flex items-center justify-center gap-2 rounded border border-barber-gold bg-barber-gold px-8 py-3.5 text-sm font-semibold tracking-wide text-barber-bg transition-all hover:bg-transparent hover:text-barber-gold"
+          >
+            <Calendar className="h-4 w-4" aria-hidden />
+            Prendre RDV
+          </a>
+          <a
+            href="#services"
+            className="text-sm font-medium tracking-wide text-barber-cream/80 underline-offset-4 transition-colors hover:text-barber-gold hover:underline"
+          >
+            Découvrir nos prestations
+          </a>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.85, duration: 0.6 }}
+          className="mx-auto mt-14 flex max-w-lg flex-wrap items-center justify-center gap-x-8 gap-y-3 border-t border-white/10 pt-8 text-xs text-barber-cream/50 sm:text-sm"
+        >
+          <span>
+            <strong className="font-semibold text-barber-gold">4,9/5</strong> sur 380+ avis vérifiés
+          </span>
+          <span className="hidden h-3 w-px bg-white/20 sm:block" aria-hidden />
+          <span>Marques partenaires : Horace, Balmain Hair, Truefitt &amp; Hill</span>
+        </motion.div>
+      </div>
+    </section>
+  )
+}

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>
+  )
+}

src/components/Services.jsx

@@ -0,0 +1,89 @@
+import { motion } from 'framer-motion'
+import { Scissors, Sparkles } from 'lucide-react'
+import { services } from '../data/services.js'
+
+const container = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, delayChildren: 0.05 },
+  },
+}
+
+const item = {
+  hidden: { opacity: 0, y: 28 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
+  },
+}
+
+export default function Services() {
+  return (
+    <section
+      id="services"
+      className="relative border-t border-white/5 bg-barber-stone py-20 sm:py-28"
+    >
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.55 }}
+          className="mx-auto mb-14 max-w-2xl text-center"
+        >
+          <p className="mb-3 flex items-center justify-center gap-2 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+            <Scissors className="h-4 w-4" aria-hidden />
+            Prestations
+          </p>
+          <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
+            L&apos;excellence, à votre rythme
+          </h2>
+          <p className="mt-4 text-sm leading-relaxed text-barber-cream/65 sm:text-base">
+            Des formules pensées pour le détail : durée annoncée, produits haut de gamme et finition
+            irréprochable. Pensez au{' '}
+            <span className="text-barber-cream/90">Forfait Signature</span> pour découvrir l’ensemble
+            de notre savoir-faire en une séance.
+          </p>
+        </motion.div>
+
+        <motion.ul
+          variants={container}
+          initial="hidden"
+          whileInView="show"
+          viewport={{ once: true, margin: '-60px' }}
+          className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
+        >
+          {services.map((s) => (
+            <motion.li key={s.id} variants={item}>
+              <article className="group relative flex h-full flex-col overflow-hidden rounded-lg border border-white/10 bg-barber-bg p-6 transition-all duration-300 hover:border-barber-gold/60 hover:shadow-[0_0_40px_-8px_rgba(212,175,55,0.25)]">
+                <div className="mb-4 flex items-start justify-between gap-2">
+                  <h3 className="font-serif text-xl text-barber-cream transition-colors group-hover:text-barber-gold">
+                    {s.name}
+                  </h3>
+                  <Sparkles
+                    className="h-5 w-5 shrink-0 text-barber-gold/40 transition-colors group-hover:text-barber-gold"
+                    aria-hidden
+                  />
+                </div>
+                <p className="mb-6 flex-1 text-sm leading-relaxed text-barber-cream/65">
+                  {s.description}
+                </p>
+                <div className="flex flex-wrap items-end justify-between gap-2 border-t border-white/10 pt-4">
+                  <div>
+                    <p className="text-2xl font-semibold tabular-nums text-barber-gold">
+                      {s.price}€
+                    </p>
+                    <p className="text-xs text-barber-cream/45">à partir de</p>
+                  </div>
+                  <p className="text-sm text-barber-cream/55">{s.duration} min</p>
+                </div>
+              </article>
+            </motion.li>
+          ))}
+        </motion.ul>
+      </div>
+    </section>
+  )
+}

src/components/Testimonials.jsx

@@ -0,0 +1,111 @@
+import { motion } from 'framer-motion'
+import { Star } from 'lucide-react'
+
+const reviews = [
+  {
+    id: 1,
+    name: 'Thomas M.',
+    role: 'Entrepreneur',
+    text: 'Le forfait signature vaut chaque euro. Ambiance feutrée, coupe millimétrée — je ne vais plus ailleurs.',
+    rating: 5,
+  },
+  {
+    id: 2,
+    name: 'Alexandre R.',
+    role: 'Avocat',
+    text: 'Barbe sculptée comme je voulais depuis des années. L’équipe est à l’écoute et très pro.',
+    rating: 5,
+  },
+  {
+    id: 3,
+    name: 'Julien L.',
+    role: 'Architecte',
+    text: 'Détails, timing, produits : tout est au niveau d’un grand palace. RDV facile à prendre.',
+    rating: 5,
+  },
+  {
+    id: 4,
+    name: 'Karim D.',
+    role: 'Consultant',
+    text: 'Premier camouflage gris : naturel à souhait. On m’a expliqué l’entretien sans jargon, top.',
+    rating: 5,
+  },
+  {
+    id: 5,
+    name: 'Nicolas P.',
+    role: 'Chef de projet',
+    text: 'Le rasage traditionnel est une claque. Serviette chaude, zéro irritation. Je recommande les yeux fermés.',
+    rating: 5,
+  },
+  {
+    id: 6,
+    name: 'Hugo B.',
+    role: 'Photographe',
+    text: 'J’apprécie le calme du lieu et le fait qu’on ne soit jamais bousculé. La coupe tient bien trois semaines.',
+    rating: 5,
+  },
+]
+
+function Stars({ count }) {
+  return (
+    <div className="flex gap-0.5" aria-label={`${count} sur 5 étoiles`}>
+      {Array.from({ length: count }, (_, i) => (
+        <Star
+          key={i}
+          className="h-4 w-4 fill-barber-gold text-barber-gold"
+          aria-hidden
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function Testimonials() {
+  return (
+    <section className="border-t border-white/5 bg-barber-stone py-20 sm:py-28">
+      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-80px' }}
+          transition={{ duration: 0.55 }}
+          className="mb-12 text-center"
+        >
+          <p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold">
+            Témoignages
+          </p>
+          <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
+            Avis clients
+          </h2>
+          <p className="mx-auto mt-4 max-w-2xl text-sm text-barber-cream/60 sm:text-base">
+            Une communauté fidèle de professionnels et de passionnés de style — merci à tous pour la confiance
+            accordée au fil des années.
+          </p>
+        </motion.div>
+
+        <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {reviews.map((r, i) => (
+            <motion.li
+              key={r.id}
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-40px' }}
+              transition={{ delay: (i % 3) * 0.06, duration: 0.5 }}
+            >
+              <blockquote className="flex h-full flex-col rounded-lg border border-white/10 bg-barber-bg p-6">
+                <Stars count={r.rating} />
+                <p className="mt-4 flex-1 text-sm leading-relaxed text-barber-cream/80">
+                  &ldquo;{r.text}&rdquo;
+                </p>
+                <footer className="mt-6 border-t border-white/10 pt-4">
+                  <cite className="not-italic text-sm font-medium text-barber-gold">{r.name}</cite>
+                  <p className="mt-0.5 text-xs text-barber-cream/45">{r.role}</p>
+                </footer>
+              </blockquote>
+            </motion.li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}