forked from UKSOURCE/hailearning.edu.vn
build ui header, footer, home page, about page
This commit is contained in:
@@ -1,191 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
71
app/components/about/AboutFeatures.tsx
Normal file
71
app/components/about/AboutFeatures.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const AboutFeatures = () => {
|
||||
return (
|
||||
<section className="choose-us-section-2 section-padding fix bg-cover" style={{ backgroundImage: 'url(/assets/img/home-2/feature/bg-shape.png)' }}>
|
||||
<div className="container">
|
||||
<div className="choose-us-wrapper-2">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="choose-us-image">
|
||||
<img src="/assets/img/home-2/feature/02.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title-2 wow fadeInUp">Your Travel Made Easy</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
Smooth Visa Journey Guaranteed
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text">
|
||||
We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance
|
||||
</p>
|
||||
<div className="choose-us-box">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/home-2/icon/01.png" alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>Expert Consultants</h5>
|
||||
<p>
|
||||
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="choose-us-box">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/home-2/icon/01.png" alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>Personalized Support</h5>
|
||||
<p>
|
||||
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="choose-us-box">
|
||||
<div className="icon">
|
||||
<img src="/assets/img/home-2/icon/01.png" alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>Transparent Process</h5>
|
||||
<p>
|
||||
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/contact" className="theme-btn">
|
||||
Get Started Today
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutFeatures;
|
||||
37
app/components/about/AboutHero.tsx
Normal file
37
app/components/about/AboutHero.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import Link from 'next/link';
|
||||
import { AboutData } from '../../about/types';
|
||||
|
||||
interface AboutHeroProps {
|
||||
data: AboutData['hero'];
|
||||
}
|
||||
|
||||
const AboutHero = ({ data }: AboutHeroProps) => {
|
||||
return (
|
||||
<section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: `url(${data.backgroundImage})` }}>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/inner-page/shape.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="page-heading">
|
||||
<h1 className="breadcrumb-title">{data.title}</h1>
|
||||
<ul className="breadcrumb-list">
|
||||
{data.breadcrumb.map((item, index) => (
|
||||
<li key={index}>
|
||||
{index === data.breadcrumb.length - 1 ? (
|
||||
item
|
||||
) : (
|
||||
<>
|
||||
<Link href="/">{item}</Link>
|
||||
<i className="fa-solid fa-chevron-right ms-2 me-2"></i>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutHero;
|
||||
32
app/components/about/AboutIntro.tsx
Normal file
32
app/components/about/AboutIntro.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { AboutData } from '../../about/types';
|
||||
|
||||
interface AboutIntroProps {
|
||||
data: AboutData['intro'];
|
||||
}
|
||||
|
||||
const AboutIntro = ({ data }: AboutIntroProps) => {
|
||||
return (
|
||||
<section className="intro-section section-padding fix pb-0">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title">
|
||||
<span className="sub-title-2 wow fadeInUp">Company Intro</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<p>
|
||||
{data.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="intro-image tp-clip-anim p-relative">
|
||||
<img src={data.image} alt="img" className="tp-anim-img" data-animate="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutIntro;
|
||||
66
app/components/about/AboutMission.tsx
Normal file
66
app/components/about/AboutMission.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import Link from 'next/link';
|
||||
import { AboutData } from '../../about/types';
|
||||
|
||||
interface AboutMissionProps {
|
||||
data: AboutData['mission'];
|
||||
}
|
||||
|
||||
const AboutMission = ({ data }: AboutMissionProps) => {
|
||||
return (
|
||||
<section className="about-section section-padding fix pb-0">
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/about/globe.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="about-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="about-image">
|
||||
<img src="/assets/img/home-1/about/about-1.jpg" alt="img" className="wow img-custom-anim-left" />
|
||||
<div className="about-image-2">
|
||||
<img src="/assets/img/home-1/about/about-02.jpg" alt="img" className="wow img-custom-anim-right" />
|
||||
</div>
|
||||
<div className="bg-shape">
|
||||
<img src="/assets/img/home-1/about/Vector.png" alt="img" />
|
||||
</div>
|
||||
<div className="plane-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/plane.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/shape.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="about-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">About Our Consultancy</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="about-item wow fadeInUp" data-wow-delay=".5s">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="content mb-3">
|
||||
<span>
|
||||
<img src="/assets/img/home-1/icon/01.svg" alt="" className="me-2" />
|
||||
<strong>{item.label}</strong>
|
||||
</span>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link href="/contact" className="theme-btn wow fadeInUp" data-wow-delay=".5s">
|
||||
Get Started
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutMission;
|
||||
92
app/components/about/AboutNews.tsx
Normal file
92
app/components/about/AboutNews.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const AboutNews = () => {
|
||||
const newsItems = [
|
||||
{
|
||||
image: '/assets/img/home-1/news/news-1.jpg',
|
||||
category: 'Student Visa',
|
||||
comments: '08',
|
||||
date: '20 August ,2025',
|
||||
title: 'Step-by-Step Guide to Applying for a Student Visa',
|
||||
author: 'Sohel',
|
||||
authorImage: '/assets/img/home-1/news/client.png'
|
||||
},
|
||||
{
|
||||
image: '/assets/img/home-1/news/news-2.jpg',
|
||||
category: 'IELTS / TOEFL',
|
||||
comments: '08',
|
||||
date: '20 August ,2025',
|
||||
title: 'Tips to Prepare Financial Documents for Visa Approval',
|
||||
author: 'Sohel',
|
||||
authorImage: '/assets/img/home-1/news/client.png'
|
||||
},
|
||||
{
|
||||
image: '/assets/img/home-1/news/news-3.jpg',
|
||||
category: 'Study Abroad',
|
||||
comments: '08',
|
||||
date: '20 August ,2025',
|
||||
title: 'Post-Arrival Guide What Every Student Should Know',
|
||||
author: 'Sohel',
|
||||
authorImage: '/assets/img/home-1/news/client.png'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="news-section section-padding fix pt-0">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title">
|
||||
<span className="sub-title">Visa Tips & Guides</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
Latest Insights & Updates
|
||||
</h2>
|
||||
</div>
|
||||
<Link href="/news" className="theme-btn">
|
||||
view all articies
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="row">
|
||||
{newsItems.map((item, index) => (
|
||||
<div key={index} className="col-xl-4 col-lg-6 col-md-6">
|
||||
<div className="news-card-item">
|
||||
<div className="news-image">
|
||||
<img src={item.image} alt="img" />
|
||||
<span>{item.category}</span>
|
||||
<div className="news-layer-wrapper">
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="news-content">
|
||||
<div className="list">
|
||||
<span>Comment ({item.comments})</span>
|
||||
<span>_ {item.date}</span>
|
||||
</div>
|
||||
<h3>
|
||||
<Link href="/news-details">
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="news-bottom">
|
||||
<div className="info-item">
|
||||
<img src={item.authorImage} alt="img" />
|
||||
<span>By {item.author}</span>
|
||||
</div>
|
||||
<Link href="/news-details" className="link-btn">
|
||||
View Articles<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutNews;
|
||||
45
app/components/about/AboutStats.tsx
Normal file
45
app/components/about/AboutStats.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { AboutData } from '../../about/types';
|
||||
|
||||
interface AboutStatsProps {
|
||||
data: AboutData['stats'];
|
||||
}
|
||||
|
||||
const AboutStats = ({ data }: AboutStatsProps) => {
|
||||
return (
|
||||
<section className="counter-section section-padding pb-0 fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg-2.jpg')" }}>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/home-1/feature/shape-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title bg-2 wow fadeInUp">Did You Know</span>
|
||||
<h2 className="text-white split-text-right split-text-in-right">
|
||||
Our Achievements in Numbers
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="counter-wrapper">
|
||||
<div className="container">
|
||||
<div className="counter-main-item">
|
||||
{data.map((stat, index) => {
|
||||
// Helper to extract number and suffix from value
|
||||
const valueStr = String(stat.value);
|
||||
const numericMatch = valueStr.match(/(\d+)/);
|
||||
const numericValue = numericMatch ? numericMatch[0] : "0";
|
||||
const suffix = valueStr.replace(numericValue, "");
|
||||
|
||||
return (
|
||||
<div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
|
||||
<h2><span className="odometer" data-count={numericValue}>00</span>{suffix}</h2>
|
||||
<h5>{stat.label}</h5>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutStats;
|
||||
42
app/components/about/AboutTeam.tsx
Normal file
42
app/components/about/AboutTeam.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { AboutData } from '../../about/types';
|
||||
|
||||
interface AboutTeamProps {
|
||||
data: AboutData['team'];
|
||||
}
|
||||
|
||||
const AboutTeam = ({ data }: AboutTeamProps) => {
|
||||
return (
|
||||
<section className="team-section section-padding fix pt-0">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title wow fadeInUp">Our Expert Team</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="row g-4">
|
||||
{data.members.map((member, index) => (
|
||||
<div key={index} className="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay={`${0.2 * (index + 1)}s`}>
|
||||
<div className="news-card-item">
|
||||
<div className="news-image">
|
||||
<img src={member.image} alt={member.name} />
|
||||
</div>
|
||||
<div className="news-content text-center">
|
||||
<h3>{member.name}</h3>
|
||||
<span className="text-primary">{member.role}</span>
|
||||
<div className="social-icon d-flex justify-content-center gap-2 mt-3">
|
||||
{member.social.facebook && <a href={member.social.facebook}><i className="fa-brands fa-facebook-f"></i></a>}
|
||||
{member.social.linkedin && <a href={member.social.linkedin}><i className="fa-brands fa-linkedin-in"></i></a>}
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutTeam;
|
||||
7
app/components/about/index.ts
Normal file
7
app/components/about/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export { default as AboutHero } from './AboutHero';
|
||||
export { default as AboutIntro } from './AboutIntro';
|
||||
export { default as AboutMission } from './AboutMission';
|
||||
export { default as AboutFeatures } from './AboutFeatures';
|
||||
export { default as AboutNews } from './AboutNews';
|
||||
export { default as AboutStats } from './AboutStats';
|
||||
export { default as AboutTeam } from './AboutTeam';
|
||||
82
app/components/common/Preloader.tsx
Normal file
82
app/components/common/Preloader.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const Preloader = () => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Simulate loading time or wait for window load
|
||||
const handleLoad = () => {
|
||||
// Add a small delay to ensure assets are loaded or at least a smooth transition
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
handleLoad();
|
||||
} else {
|
||||
window.addEventListener('load', handleLoad);
|
||||
// Fallback in case load event already fired or takes too long
|
||||
const timeoutId = setTimeout(handleLoad, 3000);
|
||||
return () => {
|
||||
window.removeEventListener('load', handleLoad);
|
||||
clearTimeout(timeoutId);
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!isLoading) return null;
|
||||
|
||||
return (
|
||||
<div id="preloader" className={`preloader ${!isLoading ? 'loaded' : ''}`} style={{ display: isLoading ? 'block' : 'none' }}>
|
||||
<div className="animation-preloader">
|
||||
<div className="spinner">
|
||||
</div>
|
||||
<div className="txt-loading">
|
||||
<span data-text-preloader="V" className="letters-loading">
|
||||
V
|
||||
</span>
|
||||
<span data-text-preloader="I" className="letters-loading">
|
||||
I
|
||||
</span>
|
||||
<span data-text-preloader="S" className="letters-loading">
|
||||
S
|
||||
</span>
|
||||
<span data-text-preloader="A" className="letters-loading">
|
||||
A
|
||||
</span>
|
||||
<span data-text-preloader="W" className="letters-loading">
|
||||
W
|
||||
</span>
|
||||
<span data-text-preloader="A" className="letters-loading">
|
||||
A
|
||||
</span>
|
||||
<span data-text-preloader="Y" className="letters-loading">
|
||||
Y
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-center">Loading</p>
|
||||
</div>
|
||||
<div className="loader">
|
||||
<div className="row">
|
||||
<div className="col-3 loader-section section-left">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
<div className="col-3 loader-section section-left">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
<div className="col-3 loader-section section-right">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
<div className="col-3 loader-section section-right">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Preloader;
|
||||
47
app/components/home/Achievements.tsx
Normal file
47
app/components/home/Achievements.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
interface AchievementsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
items: {
|
||||
value: string;
|
||||
suffix: string;
|
||||
label: string;
|
||||
description: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Achievements = ({ data }: AchievementsProps) => {
|
||||
return (
|
||||
<section className="counter-section section-padding pb-0 fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg-2.jpg')" }}>
|
||||
<div className="shape">
|
||||
<img src="/assets/img/home-1/feature/shape-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="text-white split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="counter-wrapper">
|
||||
<div className="container">
|
||||
<div className="counter-main-item">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
|
||||
<h2><span className="odometer" data-count={item.value}>00</span>{item.suffix}</h2>
|
||||
<h5>{item.label}</h5>
|
||||
<p>
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Achievements;
|
||||
89
app/components/home/BlogPreview.tsx
Normal file
89
app/components/home/BlogPreview.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface BlogPreviewProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
items: {
|
||||
title: string;
|
||||
excerpt: string;
|
||||
category: string;
|
||||
date: string;
|
||||
author: {
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
comments: number;
|
||||
link: string;
|
||||
thumbnail: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const BlogPreview = ({ data }: BlogPreviewProps) => {
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="news-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title-area">
|
||||
<div className="section-title">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="row">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay={`.${(index + 1) * 2 + 1}s`}>
|
||||
<div className="news-card-item">
|
||||
<div className="news-image">
|
||||
<img src={item.thumbnail} alt="img" />
|
||||
<span>{item.category}</span>
|
||||
<div className="news-layer-wrapper">
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
<div className="news-layer-image" style={{ backgroundImage: `url('${item.thumbnail}')` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="news-content">
|
||||
<div className="list">
|
||||
<span>Comment ({item.comments.toString().padStart(2, '0')})</span>
|
||||
<span>_ {formatDate(item.date)}</span>
|
||||
</div>
|
||||
<h3>
|
||||
<Link href={item.link}>
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="news-bottom">
|
||||
<div className="info-item">
|
||||
<img src={item.author.avatar} alt="img" />
|
||||
<span>By {item.author.name}</span>
|
||||
</div>
|
||||
<Link href={item.link} className="link-btn">View Articles<i className="fa-solid fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPreview;
|
||||
83
app/components/home/FAQSection.tsx
Normal file
83
app/components/home/FAQSection.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface FAQSectionProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
items: {
|
||||
question: string;
|
||||
answer: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const FAQSection = ({ data }: FAQSectionProps) => {
|
||||
return (
|
||||
<section className="faq-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="faq-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-5">
|
||||
<div className="faq-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text">
|
||||
{data.description}
|
||||
</p>
|
||||
<Link href={data.ctaButton.href} className="theme-btn">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-7">
|
||||
<div className="faq-items">
|
||||
<div className="accordion" id="accordionExample">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="accordion-item wow fadeInUp" data-wow-delay={`.${(index + 1) * 2}s`}>
|
||||
<h5 className="accordion-header" id={`heading${index}`}>
|
||||
<button
|
||||
className={`accordion-button ${index !== 1 ? 'collapsed' : ''}`}
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${index}`}
|
||||
aria-expanded={index === 1 ? 'true' : 'false'}
|
||||
aria-controls={`collapse${index}`}
|
||||
>
|
||||
{item.question}
|
||||
</button>
|
||||
</h5>
|
||||
<div
|
||||
id={`collapse${index}`}
|
||||
className={`accordion-collapse collapse ${index === 1 ? 'show' : ''}`}
|
||||
aria-labelledby={`heading${index}`}
|
||||
data-bs-parent="#accordionExample"
|
||||
>
|
||||
<div className="accordion-body">
|
||||
<p>
|
||||
{item.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQSection;
|
||||
100
app/components/home/HeroSection.tsx
Normal file
100
app/components/home/HeroSection.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface HeroSectionProps {
|
||||
data: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
primaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
secondaryButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
backgroundImage: string;
|
||||
videoUrl: string;
|
||||
};
|
||||
}
|
||||
|
||||
const HeroSection = ({ data }: HeroSectionProps) => {
|
||||
return (
|
||||
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${data.backgroundImage}')` }}>
|
||||
<div className="left-shape">
|
||||
<img src="/assets/img/home-1/hero/sape-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="hero-shape">
|
||||
<img src="/assets/img/home-1/hero/shape.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-3.png" alt="img" />
|
||||
</div>
|
||||
<div className="right-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-4.png" alt="img" />
|
||||
</div>
|
||||
<div className="pagi-item">
|
||||
<div className="dot-number">
|
||||
<span className="dot-num">
|
||||
<span>03</span>
|
||||
</span>
|
||||
<span className="dot-num">
|
||||
<span>05</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="swiper hero-slider">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<div className="hero-content">
|
||||
<h6>{data.subtitle}</h6>
|
||||
<h1>
|
||||
{data.title}
|
||||
<a href={data.videoUrl} className="video-btn video-popup">
|
||||
<i className="fa-solid fa-play"></i>
|
||||
</a>
|
||||
</h1>
|
||||
<p>
|
||||
{data.description}
|
||||
</p>
|
||||
<div className="hero-button">
|
||||
<Link href={data.primaryButton.href} className="theme-btn">
|
||||
{data.primaryButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
<Link href={data.secondaryButton.href} className="theme-btn style-2">
|
||||
{data.secondaryButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="swiper image-slider">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<div className="hero-image">
|
||||
<img src="/assets/img/home-1/hero/man.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper-slide">
|
||||
<div className="hero-image">
|
||||
<img src="/assets/img/home-1/hero/man.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
58
app/components/home/Partners.tsx
Normal file
58
app/components/home/Partners.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
interface PartnersProps {
|
||||
data: {
|
||||
heading: string;
|
||||
items: {
|
||||
name: string;
|
||||
logo: string;
|
||||
year: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Partners = ({ data }: PartnersProps) => {
|
||||
return (
|
||||
<>
|
||||
{/* Awards Section */}
|
||||
<section className="visa-consultency-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="row g-4">
|
||||
{data.items.slice(0, 4).map((partner, index) => (
|
||||
<div key={index} className="col-xl-3 col-lg-4 col-md-6">
|
||||
<div className="visa-consultency-item">
|
||||
<div className="image">
|
||||
<img src={partner.logo} alt="img" />
|
||||
</div>
|
||||
<h3>{partner.name}</h3>
|
||||
<h6>{partner.year}</h6>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Brand Partners Section */}
|
||||
<div className="brand-section fix">
|
||||
<div className="container">
|
||||
<div className="brand-wrapper style-1">
|
||||
<div className="brand-item">
|
||||
<div className="swiper brand-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{data.items.slice(4).map((partner, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="brand-image text-center">
|
||||
<img src={partner.logo} alt={partner.name} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Partners;
|
||||
74
app/components/home/Testimonials.tsx
Normal file
74
app/components/home/Testimonials.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
interface TestimonialsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
videoUrl: string;
|
||||
videoThumbnail: string;
|
||||
items: {
|
||||
name: string;
|
||||
role: string;
|
||||
country: string;
|
||||
rating: number;
|
||||
comment: string;
|
||||
avatar: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const Testimonials = ({ data }: TestimonialsProps) => {
|
||||
return (
|
||||
<section className="testimonial-section section-padding pb-0 fix">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="testimonial-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-4">
|
||||
<div className="testimonia-image tp-clip-anim p-relative">
|
||||
<img src={data.videoThumbnail} alt="img" className="tp-anim-img" data-animate="true" />
|
||||
<a href={data.videoUrl} className="video-btn video-popup">
|
||||
<i className="fa-solid fa-play"></i></a>
|
||||
<h5>Real stories</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-8">
|
||||
<div className="swiper testimonial-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{data.items.map((testimonial, index) => (
|
||||
<div key={index} className="swiper-slide">
|
||||
<div className="testimonial-box">
|
||||
<div className="star">
|
||||
{Array.from({ length: testimonial.rating }).map((_, i) => (
|
||||
<i key={i} className="fa-solid fa-star"></i>
|
||||
))}
|
||||
</div>
|
||||
<p>
|
||||
{testimonial.comment}
|
||||
</p>
|
||||
<div className="info-item">
|
||||
<div className="client-image">
|
||||
<img src={testimonial.avatar} alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<h5>{testimonial.name}</h5>
|
||||
<span>{testimonial.country}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonials;
|
||||
35
app/components/home/VideoGallery.tsx
Normal file
35
app/components/home/VideoGallery.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
interface VideoGalleryProps {
|
||||
data: {
|
||||
heading: string;
|
||||
videoUrl: string;
|
||||
thumbnail: string;
|
||||
};
|
||||
}
|
||||
|
||||
const VideoGallery = ({ data }: VideoGalleryProps) => {
|
||||
return (
|
||||
<section className="video-section bg-cover">
|
||||
<video autoPlay loop muted playsInline className="video-bg">
|
||||
<source src={data.videoUrl} type="video/mp4" />
|
||||
</video>
|
||||
<div className="text-image">
|
||||
<img src="/assets/img/home-1/feature/text.png" alt="img" />
|
||||
</div>
|
||||
<div className="text-image-2">
|
||||
<img src="/assets/img/home-1/feature/text-2.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="video-content">
|
||||
<div className="shape">
|
||||
<img src="/assets/img/home-1/feature/Vector.png" alt="img" />
|
||||
</div>
|
||||
<h2 className="split-text-right split-text-in-right">{data.heading.split(' ').map((word, index) => (
|
||||
<span key={index}>{word}{index === 0 ? <br /> : ' '}</span>
|
||||
))}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoGallery;
|
||||
82
app/components/home/VisaCountries.tsx
Normal file
82
app/components/home/VisaCountries.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface VisaCountriesProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
countries: {
|
||||
name: string;
|
||||
code: string;
|
||||
flag: string;
|
||||
link: string;
|
||||
visaTypes: string[];
|
||||
}[];
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const VisaCountries = ({ data }: VisaCountriesProps) => {
|
||||
// Display the first country as featured
|
||||
const featuredCountry = data.countries[0];
|
||||
const halfLength = Math.ceil(featuredCountry.visaTypes.length / 2);
|
||||
const firstColumn = featuredCountry.visaTypes.slice(0, halfLength);
|
||||
const secondColumn = featuredCountry.visaTypes.slice(halfLength);
|
||||
|
||||
return (
|
||||
<section className="feature-section section-padding fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg.png')" }}>
|
||||
<div className="container">
|
||||
<div className="feature-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title bg-2 wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="text-white split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.description}
|
||||
</p>
|
||||
<div className="feature-list-item wow fadeInUp" data-wow-delay=".5s">
|
||||
<ul className="list">
|
||||
{firstColumn.map((visaType, index) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
{visaType}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<ul className="list">
|
||||
{secondColumn.map((visaType, index) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
{visaType}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Link href={data.ctaButton.href} className="theme-btn">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="feature-image">
|
||||
<img src={featuredCountry.flag} alt="img" />
|
||||
<h6>{featuredCountry.code}.{featuredCountry.name}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default VisaCountries;
|
||||
52
app/components/home/VisaSolutions.tsx
Normal file
52
app/components/home/VisaSolutions.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface VisaSolutionsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
items: {
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
link: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const VisaSolutions = ({ data }: VisaSolutionsProps) => {
|
||||
return (
|
||||
<div className="service-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className={`service-wrapper ${index === 1 ? 'active' : ''}`}>
|
||||
<div className="container">
|
||||
<div className="service-item">
|
||||
<div className="image-hover d-none d-md-block bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/hover-bg.jpg')" }}></div>
|
||||
<div className="left-item">
|
||||
<h5 className="number">{item.number}</h5>
|
||||
<h3>
|
||||
<Link href={item.link}>{item.title}</Link>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="right-item">
|
||||
<p>
|
||||
{item.description}
|
||||
</p>
|
||||
<Link href={item.link} className="service-btn">Service Details <i className="fa-solid fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VisaSolutions;
|
||||
87
app/components/home/WhyChooseUs.tsx
Normal file
87
app/components/home/WhyChooseUs.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface WhyChooseUsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
items: {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
features: string[];
|
||||
ctaButton: {
|
||||
label: string;
|
||||
href: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
|
||||
return (
|
||||
<section className="about-section section-padding fix pb-0">
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/about/globe.png" alt="img" />
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="about-wrapper">
|
||||
<div className="row g-4">
|
||||
<div className="col-lg-6">
|
||||
<div className="about-image">
|
||||
<img src="/assets/img/home-1/about/about-1.jpg" alt="img" className="wow img-custom-anim-left" />
|
||||
<div className="about-image-2">
|
||||
<img src="/assets/img/home-1/about/about-02.jpg" alt="img" className="wow img-custom-anim-right" />
|
||||
</div>
|
||||
<div className="bg-shape">
|
||||
<img src="/assets/img/home-1/about/Vector.png" alt="img" />
|
||||
</div>
|
||||
<div className="plane-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/plane.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape float-bob-y">
|
||||
<img src="/assets/img/home-1/about/shape.png" alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="about-content">
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading.split(' Dreams ')[0]} <span>Dreams</span> {data.heading.split(' Dreams ')[1]}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.description}
|
||||
</p>
|
||||
<div className="about-item wow fadeInUp" data-wow-delay=".5s">
|
||||
{data.items.map((item, index) => (
|
||||
<div key={index} className="content">
|
||||
<span><img src={item.icon} alt="" /> {item.title}-</span>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<ul className="list wow fadeInUp" data-wow-delay=".3s">
|
||||
{data.features.map((feature, index) => (
|
||||
<li key={index}>
|
||||
<i className="fa-solid fa-chevrons-right"></i>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".5s">
|
||||
{data.ctaButton.label}
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhyChooseUs;
|
||||
17
app/components/layout/Container.tsx
Normal file
17
app/components/layout/Container.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ContainerProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
fluid?: boolean;
|
||||
}
|
||||
|
||||
const Container: React.FC<ContainerProps> = ({ children, className = '', fluid = false }) => {
|
||||
return (
|
||||
<div className={`${fluid ? 'container-fluid' : 'container'} ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Container;
|
||||
13
app/components/layout/Footer/Footer.tsx
Normal file
13
app/components/layout/Footer/Footer.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import FooterTop from './FooterTop';
|
||||
import FooterBottom from './FooterBottom';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<FooterTop />
|
||||
<FooterBottom />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
28
app/components/layout/Footer/FooterBottom.tsx
Normal file
28
app/components/layout/Footer/FooterBottom.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const FooterBottom = () => {
|
||||
return (
|
||||
<div className="footer-bottom">
|
||||
<div className="container">
|
||||
<div className="footer-wrapper">
|
||||
<p>
|
||||
Copyright© <span>GRAMENTHEME</span> All Rights Reserved.
|
||||
</p>
|
||||
<ul className="bottom-list">
|
||||
<li>
|
||||
<Link href="/contact">Terms & Conditions</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">Privacy Policy</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">Contact Us</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterBottom;
|
||||
55
app/components/layout/Footer/FooterTop.tsx
Normal file
55
app/components/layout/Footer/FooterTop.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const FooterTop = () => {
|
||||
return (
|
||||
<footer className="footer-section fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/footer-bg.jpg')" }}>
|
||||
<div className="container">
|
||||
<div className="footer-wrapper">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<div className="footer-item">
|
||||
<h2>
|
||||
<a href="tel:+16336547896">+84 961 83 4040</a>
|
||||
</h2>
|
||||
<h2 className="text">734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC</h2>
|
||||
<div className="footer-list-item">
|
||||
<Link href="/">
|
||||
<img src="/assets/img/logo/white-logo.svg" alt="img" />
|
||||
</Link>
|
||||
<ul className="footer-list">
|
||||
<li>
|
||||
<Link href="/">Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about">About Us</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/country-details">Visa</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/news-details">Pages</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/news">Article</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">Contact Us</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="social-icon">
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-linkedin"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default FooterTop;
|
||||
25
app/components/layout/Header/Header.tsx
Normal file
25
app/components/layout/Header/Header.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import HeaderTop from './HeaderTop';
|
||||
import HeaderBottom from './HeaderBottom';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<HeaderTop />
|
||||
<HeaderBottom />
|
||||
{/* Search Popup - kept here for now as part of header logic/structure */}
|
||||
<div className="search-popup">
|
||||
<div className="search-popup__overlay search-toggler"></div>
|
||||
<div className="search-popup__content">
|
||||
<form role="search" method="get" className="search-popup__form" action="#">
|
||||
<input type="text" id="search" name="search" placeholder="Search Here..." />
|
||||
<button type="submit" aria-label="search submit" className="search-btn">
|
||||
<span><i className="fa-regular fa-magnifying-glass"></i></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
154
app/components/layout/Header/HeaderBottom.tsx
Normal file
154
app/components/layout/Header/HeaderBottom.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import HeaderMenu from './HeaderMenu';
|
||||
|
||||
const homeMegaMenu = (
|
||||
<>
|
||||
<div className="homemenu">
|
||||
<div className="homemenu-thumb">
|
||||
<img src="/assets/img/header/home-1.jpg" alt="img" />
|
||||
<div className="demo-button">
|
||||
<Link href="/" className="theme-btn">
|
||||
Multi Page <i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="homemenu-content text-center">
|
||||
<h4 className="homemenu-title">
|
||||
Home 01
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="homemenu">
|
||||
<div className="homemenu-thumb mb-15">
|
||||
<img src="/assets/img/header/home-2.jpg" alt="img" />
|
||||
<div className="demo-button">
|
||||
<Link href="/index-2" className="theme-btn">
|
||||
Multi Page <i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="homemenu-content text-center">
|
||||
<h4 className="homemenu-title">
|
||||
Home 02
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="homemenu">
|
||||
<div className="homemenu-thumb mb-15">
|
||||
<img src="/assets/img/header/home-3.jpg" alt="img" />
|
||||
<div className="demo-button">
|
||||
<Link href="/index-3" className="theme-btn">
|
||||
Multi Page <i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="homemenu-content text-center">
|
||||
<h4 className="homemenu-title">
|
||||
Home 03
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: 'Home',
|
||||
href: '/',
|
||||
megaMenuContent: homeMegaMenu
|
||||
},
|
||||
{
|
||||
label: 'About Us',
|
||||
href: '/about'
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
href: '#',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Service',
|
||||
href: '#',
|
||||
submenu: [
|
||||
{ label: 'Service', href: '/service' },
|
||||
{ label: 'Service Details', href: '/service-details' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Country List',
|
||||
href: '#',
|
||||
submenu: [
|
||||
{ label: 'Country List', href: '/country-list' },
|
||||
{ label: 'Country Details', href: '/country-details' }
|
||||
]
|
||||
},
|
||||
{ label: 'Our Pricing', href: '/pricing' },
|
||||
{ label: 'Appointment', href: '/appointment' },
|
||||
{ label: '404 Page', href: '/404' },
|
||||
{ label: 'Coming Soon', href: '/coming-soon' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'VISA',
|
||||
href: '#',
|
||||
submenu: [
|
||||
{ label: 'Visa List', href: '/country-list' },
|
||||
{ label: 'Visa Details', href: '/country-details' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Blog',
|
||||
href: '#',
|
||||
submenu: [
|
||||
{ label: 'Blog Grid', href: '/news-grid' },
|
||||
{ label: 'Blog Standard', href: '/news' },
|
||||
{ label: 'Blog Details', href: '/news-details' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Contact Us',
|
||||
href: '/contact'
|
||||
}
|
||||
];
|
||||
|
||||
const HeaderBottom = () => {
|
||||
return (
|
||||
<header id="header-sticky" className="header-1">
|
||||
<div className="container-fluid">
|
||||
<div className="mega-menu-wrapper">
|
||||
<div className="header-main">
|
||||
<div className="header-left">
|
||||
<div className="logo">
|
||||
<Link href="/" className="header-logo-2">
|
||||
<img src="/assets/img/logo/black-logo.svg" alt="logo-img" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mean__menu-wrapper">
|
||||
<HeaderMenu menuItems={menuItems} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right d-flex align-items-center mt-0">
|
||||
<div className="header-call-item">
|
||||
<a href="#" className="main-header__search search-toggler">
|
||||
<i className="fa-regular fa-magnifying-glass"></i>
|
||||
</a>
|
||||
<Link href="/contact" className="theme-btn">
|
||||
Apply now
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</Link>
|
||||
<div className="header__hamburger my-auto">
|
||||
<div className="sidebar__toggle">
|
||||
<i className="fa-solid fa-bars-staggered"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderBottom;
|
||||
68
app/components/layout/Header/HeaderMenu.tsx
Normal file
68
app/components/layout/Header/HeaderMenu.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
interface MenuItem {
|
||||
label: string;
|
||||
href: string;
|
||||
submenu?: MenuItem[];
|
||||
isMegaMenu?: boolean; // For Home demo images if needed, though simple recursion handles most
|
||||
megaMenuContent?: React.ReactNode; // Flexible slot for complex mega menus
|
||||
}
|
||||
|
||||
interface HeaderMenuProps {
|
||||
menuItems: MenuItem[];
|
||||
}
|
||||
|
||||
const HeaderMenu: React.FC<HeaderMenuProps> = ({ menuItems }) => {
|
||||
return (
|
||||
<div className="main-menu">
|
||||
<nav id="mobile-menu">
|
||||
<ul>
|
||||
{menuItems.map((item, index) => (
|
||||
<li key={index} className={`${item.submenu || item.megaMenuContent ? 'has-dropdown' : ''} ${item.href === 'index.html' ? 'active menu-thumb' : ''}`}>
|
||||
<Link href={item.href} className={item.href === 'index.html' ? '' : 'border-none'}>
|
||||
{item.label}
|
||||
{(item.submenu || item.megaMenuContent) && <i className="fas fa-angle-down"></i>}
|
||||
</Link>
|
||||
|
||||
{/* Standard Submenu */}
|
||||
{item.submenu && !item.megaMenuContent && (
|
||||
<ul className="submenu">
|
||||
{item.submenu.map((subItem, subIndex) => (
|
||||
<li key={subIndex} className={subItem.submenu ? 'has-dropdown' : ''}>
|
||||
<Link href={subItem.href}>
|
||||
{subItem.label}
|
||||
{subItem.submenu && <i className="fas fa-angle-right"></i>}
|
||||
</Link>
|
||||
{subItem.submenu && (
|
||||
<ul className="submenu">
|
||||
{subItem.submenu.map((nestedItem, nestedIndex) => (
|
||||
<li key={nestedIndex}>
|
||||
<Link href={nestedItem.href}>{nestedItem.label}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Custom Mega Menu (like Home) */}
|
||||
{item.megaMenuContent && (
|
||||
<ul className="submenu has-homemenu">
|
||||
<li>
|
||||
<div className="homemenu-items">
|
||||
{item.megaMenuContent}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderMenu;
|
||||
63
app/components/layout/Header/HeaderTop.tsx
Normal file
63
app/components/layout/Header/HeaderTop.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const HeaderTop = () => {
|
||||
return (
|
||||
<div className="header-top-section">
|
||||
<div className="container-fluid">
|
||||
<div className="header-top-wrapper">
|
||||
<div className="header-left">
|
||||
<ul className="list d-flex align-items-center mb-0 p-0 list-unstyled">
|
||||
<li className="style-2 d-flex align-items-center me-4">
|
||||
<span className="me-2">Help Line</span>
|
||||
<i className="fa-solid fa-phone me-2"></i>
|
||||
<a href="tel:+84961834040">+84 961 83 4040</a>
|
||||
</li>
|
||||
|
||||
<li className="d-flex align-items-center me-4">
|
||||
<i className="fa-solid fa-location-dot me-2"></i>
|
||||
734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC
|
||||
</li>
|
||||
|
||||
<li className="d-flex align-items-center">
|
||||
<i className="fa-solid fa-envelope me-2"></i>
|
||||
<a href="mailto:get-info@hai.edu.vn">get-info@hai.edu.vn</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="header-right">
|
||||
<div className="flag-wrap">
|
||||
<div className="flag">
|
||||
<i className="fa-solid fa-globe"></i>
|
||||
</div>
|
||||
<div className="nice-select" tabIndex={0}>
|
||||
<span className="current">
|
||||
English
|
||||
</span>
|
||||
<ul className="list">
|
||||
<li data-value="1" className="option selected focus">
|
||||
English
|
||||
</li>
|
||||
<li data-value="1" className="option">
|
||||
Bangla
|
||||
</li>
|
||||
<li data-value="1" className="option">
|
||||
Hindi
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-item">
|
||||
<a href="#"><i className="fa-brands fa-linkedin"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-youtube"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderTop;
|
||||
Reference in New Issue
Block a user