You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.9 KiB
94 lines
2.9 KiB
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
export default function Navigation() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const navItems = [
|
|
{ name: 'Home', href: '#home' },
|
|
{ name: 'Services', href: '#services' },
|
|
{ name: 'About', href: '#about' },
|
|
];
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16 md:h-20">
|
|
{/* Logo */}
|
|
<Link href="#home" className="text-2xl md:text-3xl font-bold text-slate-800 hover:text-orange-600 transition-colors">
|
|
Multilingual Family Space
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-slate-700 hover:text-orange-600 transition-colors font-medium"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="#contact"
|
|
className="bg-orange-600 text-white px-6 py-2 rounded-full hover:bg-orange-700 transition-colors font-medium"
|
|
>
|
|
Contact Now
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="md:hidden p-2 text-slate-700 hover:text-orange-600"
|
|
aria-label="Toggle menu"
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
{isMenuOpen ? (
|
|
<path d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<path d="M4 6h16M4 12h16M4 18h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden pb-4 space-y-3">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="block text-slate-700 hover:text-orange-600 transition-colors font-medium py-2"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href="#contact"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="block bg-orange-600 text-white px-6 py-2 rounded-full hover:bg-orange-700 transition-colors font-medium text-center mt-4"
|
|
>
|
|
Contact Now
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
|