96 lines
4.3 KiB
JavaScript
96 lines
4.3 KiB
JavaScript
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/88 to-barber-bg/35" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-barber-bg/70 via-transparent to-barber-bg/55" />
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-40 mix-blend-soft-light"
|
|
style={{
|
|
backgroundImage:
|
|
'radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232,184,74,0.15), transparent)',
|
|
}}
|
|
aria-hidden
|
|
/>
|
|
|
|
<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="mx-auto mb-4 flex w-max items-center rounded-full border border-barber-border bg-white/[0.04] px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.28em] text-barber-gold/95 backdrop-blur-sm sm:text-xs"
|
|
>
|
|
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-[1.08] tracking-tight text-barber-cream sm:text-5xl md:text-6xl lg:text-7xl"
|
|
>
|
|
L'Art de la Coupe,
|
|
<br />
|
|
<span className="bg-gradient-to-r from-barber-gold via-amber-200 to-barber-gold-muted bg-clip-text text-transparent">
|
|
l'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/70 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-full bg-gradient-to-r from-barber-gold to-amber-400 px-8 py-3.5 text-sm font-semibold tracking-wide text-barber-bg shadow-[0_0_32px_-4px_var(--color-barber-glow)] transition-transform hover:scale-[1.02] active:scale-[0.98]"
|
|
>
|
|
<Calendar className="h-4 w-4" aria-hidden />
|
|
Prendre RDV
|
|
</a>
|
|
<a
|
|
href="#services"
|
|
className="rounded-full border border-barber-border bg-white/[0.04] px-6 py-3 text-sm font-semibold text-barber-cream/90 backdrop-blur-sm transition-colors hover:border-barber-gold/40 hover:text-barber-gold"
|
|
>
|
|
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-barber-border pt-8 text-xs text-barber-cream/45 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 & Hill</span>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|