Refine contact and trust UI

This commit is contained in:
2026-05-16 14:07:03 +01:00
parent 256c6ffb97
commit 4d3d9fd8d6
6 changed files with 24 additions and 21 deletions

View File

@@ -24,12 +24,12 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
return (
<header className="fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6">
<nav className="glass mx-auto flex max-w-7xl items-center justify-between rounded-full px-4 py-3 sm:px-5" aria-label="Main navigation">
<nav className="glass mx-auto flex max-w-7xl items-center justify-between gap-2 rounded-full px-3 py-3 sm:px-5" aria-label="Main navigation">
<a href="#home" onClick={(event) => scrollToSection(event, "#home")} className="relative z-[3] flex items-center gap-3" aria-label="New Optic home">
<span className="relative grid size-10 place-items-center overflow-hidden rounded-full bg-white shadow-sm">
<Image src={business.assets.logo} alt="New Optic logo" fill sizes="40px" className="object-contain p-1" priority />
</span>
<span className="text-sm font-semibold tracking-[-0.02em]">{business.name}</span>
<span className="hidden text-sm font-semibold tracking-[-0.02em] xs:inline sm:inline">{business.name}</span>
</a>
<div className="relative z-[3] hidden items-center gap-7 lg:flex">
@@ -47,9 +47,14 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
</PhysicsButton>
</div>
<button type="button" onClick={() => setOpen((value) => !value)} className="relative z-[3] grid size-11 place-items-center rounded-full bg-white/70 text-ink md:hidden" aria-label={t.nav.menu} aria-expanded={open}>
{open ? <X size={18} /> : <Menu size={18} />}
</button>
<div className="relative z-[3] flex items-center gap-2 md:hidden">
<PhysicsButton href={whatsappUrl} external className="rounded-full bg-ink px-4 py-2.5 text-xs font-semibold text-white shadow-soft transition-colors hover:bg-optical sm:px-5 sm:text-sm">
{t.nav.cta}
</PhysicsButton>
<button type="button" onClick={() => setOpen((value) => !value)} className="grid size-11 place-items-center rounded-full bg-white/70 text-ink" aria-label={t.nav.menu} aria-expanded={open}>
{open ? <X size={18} /> : <Menu size={18} />}
</button>
</div>
</nav>
<AnimatePresence>
@@ -70,9 +75,6 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
</div>
<div className="mt-4 flex items-center justify-between gap-3">
<LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} />
<PhysicsButton href={whatsappUrl} external className="rounded-full bg-ink px-5 py-3 text-sm font-semibold text-white">
{t.nav.cta}
</PhysicsButton>
</div>
</motion.div>
) : null}