forked from UKSOURCE/hailearning.edu.vn
115 lines
4.3 KiB
TypeScript
115 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function Header() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const navigation = [
|
|
{ name: "Trang chủ", href: "/" },
|
|
{ name: "Về chúng tôi", href: "/about" },
|
|
{ name: "Dịch vụ", href: "/services" },
|
|
{ name: "Visa", href: "/visa" },
|
|
{ name: "Quốc gia", href: "/countries" },
|
|
{ name: "Bảng giá", href: "/pricing" },
|
|
{ name: "Blog", href: "/blog" },
|
|
{ name: "Liên hệ", href: "/contact" },
|
|
];
|
|
|
|
return (
|
|
<header className="bg-white shadow-lg sticky top-0 z-50">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center space-x-2">
|
|
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-xl">V</span>
|
|
</div>
|
|
<div>
|
|
<div className="font-bold text-xl text-gray-900">VisaService</div>
|
|
<div className="text-xs text-gray-500">Dịch vụ visa uy tín</div>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden lg:flex items-center space-x-8">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-gray-700 hover:text-blue-600 transition-colors font-medium"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="hidden lg:flex items-center space-x-4">
|
|
<Link
|
|
href="/appointment"
|
|
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
|
>
|
|
Đặt lịch tư vấn
|
|
</Link>
|
|
<div className="flex items-center text-gray-600">
|
|
<span className="text-sm">📞</span>
|
|
<span className="ml-1 font-medium">1900 1234</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="lg:hidden p-2"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<div className="w-6 h-6 flex flex-col justify-center items-center">
|
|
<span
|
|
className={`bg-gray-600 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${isMenuOpen ? "rotate-45 translate-y-1" : "-translate-y-0.5"}`}
|
|
></span>
|
|
<span
|
|
className={`bg-gray-600 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm my-0.5 ${isMenuOpen ? "opacity-0" : "opacity-100"}`}
|
|
></span>
|
|
<span
|
|
className={`bg-gray-600 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${isMenuOpen ? "-rotate-45 -translate-y-1" : "translate-y-0.5"}`}
|
|
></span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMenuOpen && (
|
|
<div className="lg:hidden border-t border-gray-200">
|
|
<div className="py-4 space-y-4">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className="block text-gray-700 hover:text-blue-600 transition-colors font-medium"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<div className="pt-4 border-t border-gray-200">
|
|
<Link
|
|
href="/appointment"
|
|
className="block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors font-medium text-center mb-4"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
Đặt lịch tư vấn
|
|
</Link>
|
|
<div className="flex items-center justify-center text-gray-600">
|
|
<span className="text-sm">📞</span>
|
|
<span className="ml-1 font-medium">1900 1234</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|