Initial commit

app/components/Header.tsx

@@ -0,0 +1,114 @@
+"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>
+  );
+}