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

2
index.html
View File

@@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<title>Maison du Barbier — Salon de luxe</title> <title>Maison du Barbier — Salon de luxe</title>

12
src/components/About.jsx
View File

@@ -32,7 +32,7 @@ export default function About() {
return ( return (
<section <section
id="a-propos" id="a-propos"
className="border-t border-white/5 bg-barber-bg py-20 sm:py-28" className="border-t border-barber-border py-20 sm:py-28"
> >
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8"> <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"> <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
@@ -42,7 +42,7 @@ export default function About() {
viewport={{ once: true, margin: '-80px' }} viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.55 }} transition={{ duration: 0.55 }}
> >
<p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold"> <p className="mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
Notre maison Notre maison
</p> </p>
<h2 className="font-serif text-3xl font-medium leading-tight text-barber-cream sm:text-4xl md:text-5xl"> <h2 className="font-serif text-3xl font-medium leading-tight text-barber-cream sm:text-4xl md:text-5xl">
@@ -58,7 +58,7 @@ export default function About() {
que vous passiez pour une retouche express ou pour un après-midi « signature ». que vous passiez pour une retouche express ou pour un après-midi « signature ».
</p> </p>
<dl className="mt-10 grid grid-cols-3 gap-4 border-y border-white/10 py-8"> <dl className="mt-10 grid grid-cols-3 gap-4 border-y border-barber-border py-8">
{stats.map((s) => ( {stats.map((s) => (
<div key={s.label} className="text-center sm:text-left"> <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> <dt className="font-serif text-2xl text-barber-gold sm:text-3xl">{s.value}</dt>
@@ -75,7 +75,7 @@ export default function About() {
transition={{ duration: 0.55, delay: 0.08 }} transition={{ duration: 0.55, delay: 0.08 }}
className="relative" className="relative"
> >
<div className="overflow-hidden rounded-lg border border-white/10"> <div className="overflow-hidden rounded-2xl border border-barber-border shadow-[0_24px_48px_-24px_rgba(0,0,0,0.5)]">
<img <img
src={sideImage} src={sideImage}
alt="Détail d'une coupe en salon" alt="Détail d'une coupe en salon"
@@ -83,7 +83,7 @@ export default function About() {
className="aspect-[4/5] w-full object-cover sm:aspect-[5/6]" className="aspect-[4/5] w-full object-cover sm:aspect-[5/6]"
/> />
</div> </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"> <div className="absolute -bottom-4 -left-4 hidden max-w-xs rounded-2xl border border-barber-border bg-barber-stone/90 p-4 text-xs leading-relaxed text-barber-cream/75 shadow-xl backdrop-blur-md sm:block sm:text-sm">
« Nous ne vendons pas une coupe : nous installons une habitude de soin. » « 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> <span className="mt-2 block font-medium text-barber-gold">— Marc-Antoine V., directeur artistique</span>
</div> </div>
@@ -101,7 +101,7 @@ export default function About() {
viewport={{ once: true, margin: '-40px' }} viewport={{ once: true, margin: '-40px' }}
transition={{ delay: i * 0.08, duration: 0.45 }} transition={{ delay: i * 0.08, duration: 0.45 }}
> >
<article className="h-full rounded-lg border border-white/10 bg-barber-stone/50 p-6"> <article className="h-full rounded-2xl border border-barber-border bg-barber-stone/40 p-6 backdrop-blur-sm transition-colors hover:border-barber-gold/25 hover:bg-barber-stone/55">
<Icon className="h-8 w-8 text-barber-gold" aria-hidden /> <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> <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> <p className="mt-2 text-sm leading-relaxed text-barber-cream/60">{p.text}</p>

2
src/components/BackToTop.jsx
View File

@@ -21,7 +21,7 @@ export default function BackToTop() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 12 }} exit={{ opacity: 0, y: 12 }}
transition={{ duration: 0.25 }} 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" className="fixed bottom-6 right-4 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-barber-border bg-barber-bg/85 text-barber-gold shadow-[0_8px_32px_-8px_rgba(0,0,0,0.5)] backdrop-blur-xl transition-colors hover:border-barber-gold/45 hover:bg-barber-gold/10 sm:bottom-8 sm:right-6"
aria-label="Retour en haut" aria-label="Retour en haut"
> >
<ChevronUp className="h-5 w-5" aria-hidden /> <ChevronUp className="h-5 w-5" aria-hidden />

10
src/components/Faq.jsx
View File

@@ -29,7 +29,7 @@ export default function Faq() {
const [open, setOpen] = useState(0) const [open, setOpen] = useState(0)
return ( return (
<section id="faq" className="border-t border-white/5 py-20 sm:py-28"> <section id="faq" className="border-t border-barber-border py-20 sm:py-28">
<div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8"> <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -38,7 +38,7 @@ export default function Faq() {
transition={{ duration: 0.55 }} transition={{ duration: 0.55 }}
className="mb-10 text-center" className="mb-10 text-center"
> >
<p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold"> <p className="mx-auto mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
Questions fréquentes Questions fréquentes
</p> </p>
<h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl"> <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -60,11 +60,11 @@ export default function Faq() {
viewport={{ once: true, margin: '-20px' }} viewport={{ once: true, margin: '-20px' }}
transition={{ delay: i * 0.05, duration: 0.4 }} transition={{ delay: i * 0.05, duration: 0.4 }}
> >
<div className="overflow-hidden rounded-lg border border-white/10 bg-barber-stone/40"> <div className="overflow-hidden rounded-2xl border border-barber-border bg-barber-stone/35 backdrop-blur-sm">
<button <button
type="button" type="button"
aria-expanded={isOpen} 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" className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition-colors hover:bg-white/[0.04]"
onClick={() => setOpen(isOpen ? -1 : i)} onClick={() => setOpen(isOpen ? -1 : i)}
> >
<span className="text-sm font-medium text-barber-cream sm:text-base">{item.q}</span> <span className="text-sm font-medium text-barber-cream sm:text-base">{item.q}</span>
@@ -81,7 +81,7 @@ export default function Faq() {
exit={{ height: 0, opacity: 0 }} exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.25 }} 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"> <p className="border-t border-barber-border px-5 pb-5 pt-4 text-sm leading-relaxed text-barber-cream/65">
{item.a} {item.a}
</p> </p>
</motion.div> </motion.div>

17
src/components/Footer.jsx
View File

@@ -8,12 +8,15 @@ const hours = [
export default function Footer() { export default function Footer() {
return ( return (
<footer id="contact" className="border-t border-barber-gold/20 bg-barber-bg py-16 sm:py-20"> <footer id="contact" className="border-t border-barber-border bg-barber-bg/90 py-16 backdrop-blur-sm sm:py-20">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8"> <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 className="grid gap-12 md:grid-cols-2 lg:grid-cols-3">
<div> <div>
<p className="font-serif text-2xl text-barber-cream"> <p className="font-serif text-2xl font-medium text-barber-cream">
Atelier <span className="text-barber-gold">Royal</span> Atelier{' '}
<span className="bg-gradient-to-r from-barber-gold to-amber-300 bg-clip-text text-transparent">
Royal
</span>
</p> </p>
<p className="mt-4 max-w-sm text-sm leading-relaxed text-barber-cream/60"> <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 12 rue de la Couture, 75002 Paris — métro Bourse ou Sentier (lignes 3 et 8). Accès PMR sur
@@ -55,7 +58,7 @@ export default function Footer() {
</h3> </h3>
<ul className="mt-4 space-y-3 text-sm text-barber-cream/75"> <ul className="mt-4 space-y-3 text-sm text-barber-cream/75">
{hours.map((h) => ( {hours.map((h) => (
<li key={h.day} className="flex justify-between gap-4 border-b border-white/5 pb-3"> <li key={h.day} className="flex justify-between gap-4 border-b border-barber-border pb-3">
<span className="text-barber-cream/55">{h.day}</span> <span className="text-barber-cream/55">{h.day}</span>
<span>{h.time}</span> <span>{h.time}</span>
</li> </li>
@@ -75,7 +78,7 @@ export default function Footer() {
href="https://instagram.com" href="https://instagram.com"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" className="flex h-11 w-11 items-center justify-center rounded-xl border border-barber-border bg-white/[0.04] text-barber-cream transition-all hover:border-barber-gold/50 hover:text-barber-gold"
aria-label="Instagram" aria-label="Instagram"
> >
<Instagram className="h-5 w-5" /> <Instagram className="h-5 w-5" />
@@ -84,7 +87,7 @@ export default function Footer() {
href="https://facebook.com" href="https://facebook.com"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" className="flex h-11 w-11 items-center justify-center rounded-xl border border-barber-border bg-white/[0.04] text-barber-cream transition-all hover:border-barber-gold/50 hover:text-barber-gold"
aria-label="Facebook" aria-label="Facebook"
> >
<Facebook className="h-5 w-5" /> <Facebook className="h-5 w-5" />
@@ -99,7 +102,7 @@ export default function Footer() {
</div> </div>
</div> </div>
<div className="mt-14 border-t border-white/10 pt-8 text-center text-xs leading-relaxed text-barber-cream/40"> <div className="mt-14 border-t border-barber-border pt-8 text-center text-xs leading-relaxed text-barber-cream/40">
<p> <p>
© {new Date().getFullYear()} Atelier Royal SAS — RCS Paris 812 456 789. Hébergement et données : © {new Date().getFullYear()} Atelier Royal SAS — RCS Paris 812 456 789. Hébergement et données :
traitement conforme au RGPD sur simple demande. traitement conforme au RGPD sur simple demande.

6
src/components/Gallery.jsx
View File

@@ -55,7 +55,7 @@ const images = [
export default function Gallery() { export default function Gallery() {
return ( return (
<section id="galerie" className="border-t border-white/5 py-20 sm:py-28"> <section id="galerie" className="border-t border-barber-border py-20 sm:py-28">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8"> <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -64,7 +64,7 @@ export default function Gallery() {
transition={{ duration: 0.55 }} transition={{ duration: 0.55 }}
className="mb-12 text-center" className="mb-12 text-center"
> >
<p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold"> <p className="mx-auto mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
Portfolio Portfolio
</p> </p>
<h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl"> <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -91,7 +91,7 @@ export default function Gallery() {
whileInView={{ opacity: 1, scale: 1 }} whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, margin: '-20px' }} viewport={{ once: true, margin: '-20px' }}
transition={{ delay: i * 0.05, duration: 0.45 }} transition={{ delay: i * 0.05, duration: 0.45 }}
className={`group relative overflow-hidden rounded-lg border border-white/10 bg-barber-stone ${img.className}`} className={`group relative overflow-hidden rounded-2xl border border-barber-border bg-barber-stone/50 ${img.className}`}
> >
<img <img
src={img.src} src={img.src}

28
src/components/Hero.jsx
View File

@@ -15,15 +15,23 @@ export default function Hero() {
style={{ backgroundImage: `url('${heroImage}')` }} style={{ backgroundImage: `url('${heroImage}')` }}
aria-hidden 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-t from-barber-bg via-barber-bg/88 to-barber-bg/35" />
<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-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"> <div className="relative z-10 mx-auto max-w-4xl px-4 text-center sm:px-6">
<motion.p <motion.p
initial={{ opacity: 0, y: 16 }} initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.15, duration: 0.6 }} 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 Coiffure & barbier — Paris
</motion.p> </motion.p>
@@ -31,17 +39,19 @@ export default function Hero() {
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.25, duration: 0.65 }} 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, L&apos;Art de la Coupe,
<br /> <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.h1>
<motion.p <motion.p
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4, duration: 0.6 }} 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 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. et une ambiance feutrée pour un moment qui vous ressemble.
@@ -54,14 +64,14 @@ export default function Hero() {
> >
<a <a
href="#contact" 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 /> <Calendar className="h-4 w-4" aria-hidden />
Prendre RDV Prendre RDV
</a> </a>
<a <a
href="#services" 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 Découvrir nos prestations
</a> </a>
@@ -71,7 +81,7 @@ export default function Hero() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.85, duration: 0.6 }} 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> <span>
<strong className="font-semibold text-barber-gold">4,9/5</strong> sur 380+ avis vérifiés <strong className="font-semibold text-barber-gold">4,9/5</strong> sur 380+ avis vérifiés

14
src/components/Navbar.jsx
View File

@@ -19,7 +19,7 @@ export default function Navbar() {
initial={{ y: -24, opacity: 0 }} initial={{ y: -24, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 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" className="fixed inset-x-0 top-0 z-50 border-b border-barber-border bg-barber-bg/75 backdrop-blur-xl backdrop-saturate-150"
> >
<nav <nav
className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8" className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8"
@@ -27,10 +27,10 @@ export default function Navbar() {
> >
<a <a
href="#accueil" href="#accueil"
className="group font-serif text-lg tracking-wide text-barber-cream sm:text-xl" className="group font-serif text-lg font-medium tracking-tight text-barber-cream sm:text-xl"
> >
<span className="transition-colors group-hover:text-barber-gold">Atelier</span>{' '} <span className="transition-colors group-hover:text-barber-gold">Atelier</span>{' '}
<span className="text-barber-gold transition-colors group-hover:text-barber-cream"> <span className="bg-gradient-to-r from-barber-gold to-amber-300 bg-clip-text text-transparent transition-opacity group-hover:opacity-90">
Royal Royal
</span> </span>
</a> </a>
@@ -40,7 +40,7 @@ export default function Navbar() {
<li key={href}> <li key={href}>
<a <a
href={href} href={href}
className="whitespace-nowrap text-xs font-medium tracking-wide text-barber-cream/80 transition-colors hover:text-barber-gold lg:text-sm" className="whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium text-barber-cream/75 transition-colors hover:bg-white/[0.06] hover:text-barber-cream lg:text-sm"
> >
{label} {label}
</a> </a>
@@ -50,7 +50,7 @@ export default function Navbar() {
<button <button
type="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" className="flex h-10 w-10 items-center justify-center rounded-full border border-barber-border bg-white/[0.04] text-barber-gold transition-colors hover:border-barber-gold/50 hover:bg-barber-gold/10 md:hidden"
aria-expanded={open} aria-expanded={open}
aria-controls="mobile-menu" aria-controls="mobile-menu"
onClick={() => setOpen((v) => !v)} onClick={() => setOpen((v) => !v)}
@@ -68,7 +68,7 @@ export default function Navbar() {
animate={{ height: 'auto', opacity: 1 }} animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }} exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.25 }} transition={{ duration: 0.25 }}
className="overflow-hidden border-b border-white/5 bg-barber-bg md:hidden" className="overflow-hidden border-b border-barber-border bg-barber-bg/95 backdrop-blur-xl md:hidden"
> >
<ul className="flex flex-col gap-1 px-4 pb-4"> <ul className="flex flex-col gap-1 px-4 pb-4">
{links.map(({ href, label }) => ( {links.map(({ href, label }) => (
@@ -76,7 +76,7 @@ export default function Navbar() {
<a <a
href={href} href={href}
onClick={() => setOpen(false)} 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" className="block rounded-xl px-3 py-3 text-sm font-medium text-barber-cream/90 transition-colors hover:bg-white/[0.06] hover:text-barber-gold"
> >
{label} {label}
</a> </a>

10
src/components/Services.jsx
View File

@@ -23,7 +23,7 @@ export default function Services() {
return ( return (
<section <section
id="services" id="services"
className="relative border-t border-white/5 bg-barber-stone py-20 sm:py-28" className="relative border-t border-barber-border bg-barber-stone/80 py-20 sm:py-28"
> >
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8"> <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<motion.div <motion.div
@@ -33,8 +33,8 @@ export default function Services() {
transition={{ duration: 0.55 }} transition={{ duration: 0.55 }}
className="mx-auto mb-14 max-w-2xl text-center" 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"> <p className="mx-auto mb-3 inline-flex items-center justify-center gap-2 rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
<Scissors className="h-4 w-4" aria-hidden /> <Scissors className="h-3.5 w-3.5" aria-hidden />
Prestations Prestations
</p> </p>
<h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl"> <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -57,7 +57,7 @@ export default function Services() {
> >
{services.map((s) => ( {services.map((s) => (
<motion.li key={s.id} variants={item}> <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)]"> <article className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-barber-border bg-barber-bg/80 p-6 backdrop-blur-sm transition-all duration-300 hover:border-barber-gold/35 hover:shadow-[0_0_48px_-12px_var(--color-barber-glow)]">
<div className="mb-4 flex items-start justify-between gap-2"> <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"> <h3 className="font-serif text-xl text-barber-cream transition-colors group-hover:text-barber-gold">
{s.name} {s.name}
@@ -70,7 +70,7 @@ export default function Services() {
<p className="mb-6 flex-1 text-sm leading-relaxed text-barber-cream/65"> <p className="mb-6 flex-1 text-sm leading-relaxed text-barber-cream/65">
{s.description} {s.description}
</p> </p>
<div className="flex flex-wrap items-end justify-between gap-2 border-t border-white/10 pt-4"> <div className="flex flex-wrap items-end justify-between gap-2 border-t border-barber-border pt-4">
<div> <div>
<p className="text-2xl font-semibold tabular-nums text-barber-gold"> <p className="text-2xl font-semibold tabular-nums text-barber-gold">
{s.price}€ {s.price}€

8
src/components/Testimonials.jsx
View File

@@ -62,7 +62,7 @@ function Stars({ count }) {
export default function Testimonials() { export default function Testimonials() {
return ( return (
<section className="border-t border-white/5 bg-barber-stone py-20 sm:py-28"> <section className="border-t border-barber-border bg-barber-stone/80 py-20 sm:py-28">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8"> <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -71,7 +71,7 @@ export default function Testimonials() {
transition={{ duration: 0.55 }} transition={{ duration: 0.55 }}
className="mb-12 text-center" className="mb-12 text-center"
> >
<p className="mb-3 text-xs font-medium uppercase tracking-[0.3em] text-barber-gold"> <p className="mx-auto mb-3 inline-flex rounded-full border border-barber-border bg-white/[0.04] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.25em] text-barber-gold">
Témoignages Témoignages
</p> </p>
<h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl"> <h2 className="font-serif text-3xl font-medium text-barber-cream sm:text-4xl md:text-5xl">
@@ -92,12 +92,12 @@ export default function Testimonials() {
viewport={{ once: true, margin: '-40px' }} viewport={{ once: true, margin: '-40px' }}
transition={{ delay: (i % 3) * 0.06, duration: 0.5 }} 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"> <blockquote className="flex h-full flex-col rounded-2xl border border-barber-border bg-barber-bg/80 p-6 backdrop-blur-sm transition-colors hover:border-barber-gold/20">
<Stars count={r.rating} /> <Stars count={r.rating} />
<p className="mt-4 flex-1 text-sm leading-relaxed text-barber-cream/80"> <p className="mt-4 flex-1 text-sm leading-relaxed text-barber-cream/80">
&ldquo;{r.text}&rdquo; &ldquo;{r.text}&rdquo;
</p> </p>
<footer className="mt-6 border-t border-white/10 pt-4"> <footer className="mt-6 border-t border-barber-border pt-4">
<cite className="not-italic text-sm font-medium text-barber-gold">{r.name}</cite> <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> <p className="mt-0.5 text-xs text-barber-cream/45">{r.role}</p>
</footer> </footer>

29
src/index.css
View File

@@ -1,13 +1,16 @@
@import 'tailwindcss'; @import 'tailwindcss';
@theme { @theme {
--color-barber-bg: #0a0a0a; --color-barber-bg: #0a0b0f;
--color-barber-gold: #d4af37; --color-barber-surface: #12141c;
--color-barber-gold-muted: #b8962e; --color-barber-gold: #e8b84a;
--color-barber-cream: #ece8e1; --color-barber-gold-muted: #c49a3a;
--color-barber-stone: #1a1a1a; --color-barber-cream: #f1f3f7;
--font-serif: 'Playfair Display', ui-serif, Georgia, serif; --color-barber-stone: #181b26;
--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif; --color-barber-border: oklch(1 0 0 / 0.08);
--color-barber-glow: oklch(0.82 0.13 82 / 0.2);
--font-serif: 'Fraunces', ui-serif, Georgia, serif;
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
} }
@layer base { @layer base {
@@ -16,10 +19,20 @@
} }
body { body {
@apply m-0 min-h-svh bg-barber-bg font-sans text-barber-cream antialiased; @apply m-0 min-h-svh font-sans text-barber-cream antialiased;
background-color: var(--color-barber-bg);
background-image:
radial-gradient(ellipse 100% 80% at 50% -30%, rgba(232, 184, 74, 0.09), transparent 55%),
radial-gradient(ellipse 50% 40% at 100% 20%, rgba(99, 102, 241, 0.06), transparent 50%),
radial-gradient(ellipse 40% 30% at 0% 80%, rgba(232, 184, 74, 0.04), transparent 45%);
} }
#root { #root {
@apply min-h-svh w-full max-w-none; @apply min-h-svh w-full max-w-none;
} }
::selection {
background-color: oklch(0.82 0.13 82 / 0.45);
color: var(--color-barber-bg);
}
} }