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

14
src/components/Navbar.jsx
View File

@@ -19,7 +19,7 @@ export default function Navbar() {
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"
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
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
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="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
</span>
</a>
@@ -40,7 +40,7 @@ export default function Navbar() {
<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"
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}
</a>
@@ -50,7 +50,7 @@ export default function Navbar() {
<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-controls="mobile-menu"
onClick={() => setOpen((v) => !v)}
@@ -68,7 +68,7 @@ export default function Navbar() {
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"
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">
{links.map(({ href, label }) => (
@@ -76,7 +76,7 @@ export default function Navbar() {
<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"
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}
</a>