first commitv1

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