forked from UKSOURCE/hailearning.edu.vn
Initial commit
This commit is contained in:
r2xrzh9q2z-lab
191
app/components/Footer.tsx
Normal file
191
app/components/Footer.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const quickLinks = [
|
||||
{ name: "Về chúng tôi", href: "/about" },
|
||||
{ name: "Dịch vụ", href: "/services" },
|
||||
{ name: "Bảng giá", href: "/pricing" },
|
||||
{ name: "Blog", href: "/blog" },
|
||||
{ name: "Liên hệ", href: "/contact" },
|
||||
];
|
||||
|
||||
const visaServices = [
|
||||
{ name: "Visa Mỹ", href: "/visa" },
|
||||
{ name: "Visa Schengen", href: "/visa" },
|
||||
{ name: "Visa Nhật Bản", href: "/visa" },
|
||||
{ name: "Visa Hàn Quốc", href: "/visa" },
|
||||
{ name: "Visa Canada", href: "/visa" },
|
||||
];
|
||||
|
||||
const countries = [
|
||||
{ name: "Châu Âu", href: "/countries" },
|
||||
{ name: "Bắc Mỹ", href: "/countries" },
|
||||
{ name: "Châu Á", href: "/countries" },
|
||||
{ name: "Châu Đại Dương", href: "/countries" },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{/* Company Info */}
|
||||
<div>
|
||||
<div className="flex items-center space-x-2 mb-6">
|
||||
<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">VisaService</div>
|
||||
<div className="text-sm text-gray-400">Dịch vụ visa uy tín</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6">
|
||||
Đối tác tin cậy cho dịch vụ visa và du lịch với hơn 10 năm kinh
|
||||
nghiệm. Cam kết mang đến dịch vụ chất lượng cao với tỷ lệ thành
|
||||
công 99%.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<span className="sr-only">Facebook</span>
|
||||
📘
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<span className="sr-only">Instagram</span>
|
||||
📷
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<span className="sr-only">YouTube</span>
|
||||
📺
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<span className="sr-only">LinkedIn</span>
|
||||
💼
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6">Liên Kết Nhanh</h3>
|
||||
<ul className="space-y-3">
|
||||
{quickLinks.map((link) => (
|
||||
<li key={link.name}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Visa Services */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6">Dịch Vụ Visa</h3>
|
||||
<ul className="space-y-3">
|
||||
{visaServices.map((service) => (
|
||||
<li key={service.name}>
|
||||
<Link
|
||||
href={service.href}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
{service.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6">Thông Tin Liên Hệ</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start">
|
||||
<span className="text-blue-400 mr-3 mt-1">📍</span>
|
||||
<div>
|
||||
<p className="text-gray-400">
|
||||
123 Nguyễn Huệ, Quận 1<br />
|
||||
TP. Hồ Chí Minh
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-blue-400 mr-3">📞</span>
|
||||
<p className="text-gray-400">+84 28 1234 5678</p>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-blue-400 mr-3">✉️</span>
|
||||
<p className="text-gray-400">info@visaservice.com</p>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<span className="text-blue-400 mr-3 mt-1">🕒</span>
|
||||
<div>
|
||||
<p className="text-gray-400">
|
||||
Thứ 2 - Thứ 6: 8:00 - 18:00
|
||||
<br />
|
||||
Thứ 7: 8:00 - 12:00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="border-t border-gray-800 mt-12 pt-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="text-gray-400 text-sm mb-4 md:mb-0">
|
||||
© {currentYear} VisaService. Tất cả quyền được bảo lưu.
|
||||
</div>
|
||||
<div className="flex space-x-6 text-sm">
|
||||
<Link
|
||||
href="#"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
Chính sách bảo mật
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
Điều khoản sử dụng
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
Sitemap
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Contact Button */}
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<Link
|
||||
href="/appointment"
|
||||
className="bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-colors flex items-center justify-center"
|
||||
>
|
||||
<span className="text-2xl">💬</span>
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
114
app/components/Header.tsx
Normal file
114
app/components/Header.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user