ayrisdev/aydogannakliyat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add industrial background and refined styling to mobile menu

Browse Source
This commit is contained in:
ayrisdev
2026-04-12 19:26:40 +03:00
parent ae4677d27e
commit f49496dde6
1 changed files with 62 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/Navbar.tsx
View File

@@ -88,10 +88,23 @@ export function Navbar() {
{/* Mobile Menu Overlay */} {/* Mobile Menu Overlay */}
<div <div
className={cn( className={cn(
"fixed inset-0 bg-background/98 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500", "fixed inset-0 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500 overflow-hidden",
mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none" mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
)} )}
> >
{/* Background Image for Mobile Menu */}
<div className="absolute inset-0 z-0">
<Image
src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
alt="Mobile menu background"
fill
sizes="100vw"
className="object-cover grayscale brightness-[0.15]"
/>
<div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-background/95 to-background" />
</div>
<div className="relative z-10 flex flex-col h-full">
<div className="flex justify-between items-center mb-16"> <div className="flex justify-between items-center mb-16">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span> <span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span>
@@ -99,9 +112,9 @@ export function Navbar() {
</div> </div>
<button <button
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
className="p-4 bg-white/5 text-white" className="p-4 bg-white/5 text-white rounded-full hover:bg-primary transition-colors"
> >
<X size={32} /> <X size={24} />
</button> </button>
</div> </div>
@@ -112,11 +125,15 @@ export function Navbar() {
href={link.href} href={link.href}
onClick={() => setMobileMenuOpen(false)} onClick={() => setMobileMenuOpen(false)}
className={cn( className={cn(
"font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4", "font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4 flex items-center gap-4 group",
pathname === link.href ? "text-primary" : "text-white/60" pathname === link.href ? "text-primary" : "text-white/60"
)} )}
style={{ transitionDelay: `${idx * 50}ms` }} style={{ transitionDelay: `${idx * 50}ms` }}
> >
<div className={cn(
"w-2 h-2 bg-primary rounded-full transition-all group-hover:scale-150",
pathname === link.href ? "opacity-100" : "opacity-0 group-hover:opacity-100"
)} />
{link.name} {link.name}
</Link> </Link>
))} ))}
@@ -128,20 +145,21 @@ export function Navbar() {
handleWhatsApp(); handleWhatsApp();
setMobileMenuOpen(false); setMobileMenuOpen(false);
}} }}
className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all" className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all shadow-[0_20px_50px_rgba(234,179,8,0.2)]"
> >
<MessageCircle className="w-6 h-6" /> <MessageCircle className="w-6 h-6" />
HIZLI TEKLİF AL HIZLI TEKLİF AL
</button> </button>
<a <a
href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`} href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
className="w-full border border-white/10 text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3" className="w-full border border-white/10 bg-white/5 backdrop-blur-sm text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3 hover:bg-white/10 transition-all"
> >
<Phone className="w-5 h-5" /> <Phone className="w-5 h-5" />
{siteConfig.contact.phone} {siteConfig.contact.phone}
</a> </a>
</div> </div>
</div> </div>
</div>
</nav> </nav>
); );
} }