Lou/Barber-VitrineV1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revue du style

Browse Source
This commit is contained in:
SarTron-NorthBlue
2026-04-02 17:53:17 +04:00
parent be02b7e542
commit 7d058cf095
11 changed files with 82 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Hero.jsx
View File

@@ -15,15 +15,23 @@ export default function Hero() {
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="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="mb-4 text-xs font-medium uppercase tracking-[0.35em] text-barber-gold sm:text-sm"
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>
@@ -31,17 +39,19 @@ export default function Hero() {
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"
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&apos;Art de la Coupe,
<br />
<span className="text-barber-gold">l&apos;Excellence du Style</span>
<span className="bg-gradient-to-r from-barber-gold via-amber-200 to-barber-gold-muted bg-clip-text text-transparent">
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"
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.
@@ -54,14 +64,14 @@ export default function Hero() {
>
<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"
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="text-sm font-medium tracking-wide text-barber-cream/80 underline-offset-4 transition-colors hover:text-barber-gold hover:underline"
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>
@@ -71,7 +81,7 @@ export default function Hero() {
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"
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