63 lines
3.3 KiB
TypeScript
63 lines
3.3 KiB
TypeScript
'use client';
|
||
|
||
import { Link } from '@/i18n/routing';
|
||
import { siteInfo } from '@/lib/data';
|
||
import { Phone, MapPin, Menu } from 'lucide-react';
|
||
import { useState } from 'react';
|
||
|
||
export function Navbar() {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
|
||
return (
|
||
<div className="fixed top-4 left-4 right-4 z-50">
|
||
<header className="container mx-auto bg-white/80 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl transition-all duration-300">
|
||
<div className="px-6 h-20 flex items-center justify-between">
|
||
<Link href="/" className="font-extrabold text-2xl text-deepblue-900 tracking-tighter flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||
{siteInfo.name}
|
||
</Link>
|
||
|
||
{/* Desktop Nav */}
|
||
<nav className="hidden md:flex items-center gap-6">
|
||
<Link href="/" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Ana Sayfa</Link>
|
||
<Link href="/hakkimizda" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Hakkımızda</Link>
|
||
<Link href="/turlar" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Turlar</Link>
|
||
<Link href="/aktiviteler" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Aktiviteler</Link>
|
||
<Link href="/tekne-turlari" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Tekne Turları</Link>
|
||
<Link href="/iletisim" className="text-sm font-medium hover:text-turquoise-500 transition-colors">İletişim</Link>
|
||
</nav>
|
||
|
||
<div className="hidden md:flex items-center gap-4">
|
||
<a href={siteInfo.phoneLink} className="flex items-center gap-2 text-sm font-semibold text-deepblue-900">
|
||
<Phone className="w-4 h-4 text-turquoise-500" />
|
||
{siteInfo.phone}
|
||
</a>
|
||
<a href={siteInfo.whatsappLink} target="_blank" rel="noreferrer" className="px-4 py-2 bg-vibrantorange-500 hover:bg-orange-600 text-white rounded-md text-sm font-medium transition-colors">
|
||
Rezervasyon
|
||
</a>
|
||
</div>
|
||
|
||
{/* Mobile Toggle */}
|
||
<button className="md:hidden p-2" onClick={() => setIsOpen(!isOpen)}>
|
||
<Menu className="w-6 h-6" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Mobile Nav */}
|
||
{isOpen && (
|
||
<div className="md:hidden border-t p-4 flex flex-col gap-4 bg-sandwhite-100">
|
||
<Link href="/" onClick={() => setIsOpen(false)} className="text-sm font-medium">Ana Sayfa</Link>
|
||
<Link href="/hakkimizda" onClick={() => setIsOpen(false)} className="text-sm font-medium">Hakkımızda</Link>
|
||
<Link href="/turlar" onClick={() => setIsOpen(false)} className="text-sm font-medium">Turlar</Link>
|
||
<Link href="/aktiviteler" onClick={() => setIsOpen(false)} className="text-sm font-medium">Aktiviteler</Link>
|
||
<Link href="/tekne-turlari" onClick={() => setIsOpen(false)} className="text-sm font-medium">Tekne Turları</Link>
|
||
<Link href="/iletisim" onClick={() => setIsOpen(false)} className="text-sm font-medium">İletişim</Link>
|
||
<a href={siteInfo.whatsappLink} className="mt-2 block text-center px-4 py-2 bg-vibrantorange-500 text-white rounded-md text-sm font-medium">
|
||
Rezervasyon
|
||
</a>
|
||
</div>
|
||
)}
|
||
</header>
|
||
</div>
|
||
);
|
||
}
|