forked from UKSOURCE/hailearning.edu.vn
build ui header, footer, home page, about page
This commit is contained in:
@@ -1,33 +1,97 @@
|
|||||||
{
|
{
|
||||||
"title": "Về Chúng Tôi",
|
"hero": {
|
||||||
"subtitle": "Đối tác tin cậy cho dịch vụ visa và du lịch",
|
"title": "About Us",
|
||||||
"description": "Chúng tôi là công ty hàng đầu trong lĩnh vực tư vấn visa và dịch vụ du lịch, với hơn 10 năm kinh nghiệm phục vụ khách hàng.",
|
"subtitle": "Global Education Simplified",
|
||||||
"sections": [
|
"breadcrumb": [
|
||||||
{
|
"Home",
|
||||||
"heading": "Sứ Mệnh",
|
"About Us"
|
||||||
"content": "Mang đến cho khách hàng những trải nghiệm du lịch tuyệt vời và hỗ trợ thủ tục visa một cách nhanh chóng, chính xác."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"heading": "Tầm Nhìn",
|
|
||||||
"content": "Trở thành công ty dẫn đầu trong lĩnh vực dịch vụ visa và du lịch tại Việt Nam."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"heading": "Giá Trị Cốt Lõi",
|
|
||||||
"content": "Uy tín - Chất lượng - Tận tâm - Chuyên nghiệp"
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
|
"backgroundImage": "/assets/img/inner-page/breadcrumb.jpg"
|
||||||
|
},
|
||||||
|
"intro": {
|
||||||
|
"heading": "Building Pathways to Your Immigration Success",
|
||||||
|
"description": "We provide expert guidance, personalized solutions, and transparent processes to help you achieve your immigration goals. Our dedicated team ensures a smooth journey, building pathways to your international success.",
|
||||||
|
"highlights": [
|
||||||
|
"Expert Visa Consulting",
|
||||||
|
"Smooth Documentation Process",
|
||||||
|
"Personalized Student Guidance"
|
||||||
|
],
|
||||||
|
"image": "/assets/img/inner-page/intro.jpg"
|
||||||
|
},
|
||||||
|
"mission": {
|
||||||
|
"title": "Our Commitment to Your Future",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"label": "Mission",
|
||||||
|
"description": "To guide students with expert visa consulting, ensuring a smooth process from application to approval and turning dreams into reality."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Vision",
|
||||||
|
"description": "To be the most trusted global education consultancy, expanding opportunities and building paths to international success for every student."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Values",
|
||||||
|
"description": "Transparency, integrity, and excellence in every visa application, ensuring reliable assistance and professional support."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
"stats": [
|
"stats": [
|
||||||
{
|
{
|
||||||
"number": "10000+",
|
"label": "Years Experience",
|
||||||
"label": "Khách hàng hài lòng"
|
"value": 10
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"number": "50+",
|
"label": "Students Helped",
|
||||||
"label": "Quốc gia hỗ trợ visa"
|
"value": 1000
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"number": "99%",
|
"label": "Success Rate",
|
||||||
"label": "Tỷ lệ thành công"
|
"value": "95%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Countries Covered",
|
||||||
|
"value": 50
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"team": {
|
||||||
|
"title": "Meet Our Expert Team",
|
||||||
|
"members": [
|
||||||
|
{
|
||||||
|
"name": "Eleanor Pena",
|
||||||
|
"role": "Lead Legal Consultant",
|
||||||
|
"image": "/assets/img/home-1/testimonial/client.png",
|
||||||
|
"social": {
|
||||||
|
"facebook": "href",
|
||||||
|
"linkedin": "href"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Jerome Bell",
|
||||||
|
"role": "Senior Visa Expert",
|
||||||
|
"image": "/assets/img/home-1/testimonial/client-2.png",
|
||||||
|
"social": {
|
||||||
|
"facebook": "href",
|
||||||
|
"linkedin": "href"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Marvin McKinney",
|
||||||
|
"role": "Immigration Advisor",
|
||||||
|
"image": "/assets/img/home-1/news/client.png",
|
||||||
|
"social": {
|
||||||
|
"facebook": "href",
|
||||||
|
"linkedin": "href"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Kathryn Murphy",
|
||||||
|
"role": "Education Consultant",
|
||||||
|
"image": "/assets/img/home-1/testimonial/client.png",
|
||||||
|
"social": {
|
||||||
|
"facebook": "href",
|
||||||
|
"linkedin": "href"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,49 +1,24 @@
|
|||||||
import aboutData from "./about.json";
|
import {
|
||||||
|
AboutHero,
|
||||||
|
AboutIntro,
|
||||||
|
AboutMission,
|
||||||
|
AboutStats,
|
||||||
|
AboutTeam,
|
||||||
|
AboutFeatures,
|
||||||
|
AboutNews
|
||||||
|
} from '../components/about';
|
||||||
|
import aboutData from './about.json';
|
||||||
|
|
||||||
export default function AboutPage() {
|
export default function AboutPage() {
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<>
|
||||||
<div className="max-w-4xl mx-auto">
|
<AboutHero data={aboutData.hero} />
|
||||||
{/* Header */}
|
<AboutIntro data={aboutData.intro} />
|
||||||
<div className="text-center mb-12">
|
<AboutMission data={aboutData.mission} />
|
||||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
<AboutStats data={aboutData.stats} />
|
||||||
{aboutData.title}
|
<AboutTeam data={aboutData.team} />
|
||||||
</h1>
|
<AboutFeatures />
|
||||||
<p className="text-xl text-gray-600 mb-6">{aboutData.subtitle}</p>
|
<AboutNews />
|
||||||
<p className="text-lg text-gray-700 leading-relaxed">
|
</>
|
||||||
{aboutData.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sections */}
|
|
||||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
|
||||||
{aboutData.sections.map((section, index) => (
|
|
||||||
<div key={index} className="bg-white p-6 rounded-lg shadow-md">
|
|
||||||
<h3 className="text-xl font-semibold text-gray-900 mb-4">
|
|
||||||
{section.heading}
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-700 leading-relaxed">{section.content}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats */}
|
|
||||||
<div className="bg-blue-50 rounded-lg p-8">
|
|
||||||
<h2 className="text-2xl font-bold text-center text-gray-900 mb-8">
|
|
||||||
Thành Tích Của Chúng Tôi
|
|
||||||
</h2>
|
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
|
||||||
{aboutData.stats.map((stat, index) => (
|
|
||||||
<div key={index} className="text-center">
|
|
||||||
<div className="text-3xl font-bold text-blue-600 mb-2">
|
|
||||||
{stat.number}
|
|
||||||
</div>
|
|
||||||
<div className="text-gray-700">{stat.label}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
37
app/about/types.ts
Normal file
37
app/about/types.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
export interface AboutData {
|
||||||
|
hero: {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
breadcrumb: string[];
|
||||||
|
backgroundImage: string;
|
||||||
|
};
|
||||||
|
intro: {
|
||||||
|
heading: string;
|
||||||
|
description: string;
|
||||||
|
highlights: string[];
|
||||||
|
image: string;
|
||||||
|
};
|
||||||
|
mission: {
|
||||||
|
title: string;
|
||||||
|
items: {
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
stats: {
|
||||||
|
label: string;
|
||||||
|
value: number | string;
|
||||||
|
}[];
|
||||||
|
team: {
|
||||||
|
title: string;
|
||||||
|
members: {
|
||||||
|
name: string;
|
||||||
|
role: string;
|
||||||
|
image: string;
|
||||||
|
social: {
|
||||||
|
facebook: string;
|
||||||
|
linkedin: string;
|
||||||
|
};
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
457
app/home.json
Normal file
457
app/home.json
Normal file
@@ -0,0 +1,457 @@
|
|||||||
|
{
|
||||||
|
"header": {
|
||||||
|
"top": {
|
||||||
|
"phone": "+09 378 357 5222",
|
||||||
|
"email": "info@hailearning.edu.vn",
|
||||||
|
"location": "69 Street, 5th Avenue LA, United States",
|
||||||
|
"socialLinks": [
|
||||||
|
{
|
||||||
|
"platform": "linkedin",
|
||||||
|
"url": "https://linkedin.com",
|
||||||
|
"icon": "fa-brands fa-linkedin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platform": "twitter",
|
||||||
|
"url": "https://twitter.com",
|
||||||
|
"icon": "fa-brands fa-twitter"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platform": "instagram",
|
||||||
|
"url": "https://instagram.com",
|
||||||
|
"icon": "fa-brands fa-instagram"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"platform": "youtube",
|
||||||
|
"url": "https://youtube.com",
|
||||||
|
"icon": "fa-brands fa-youtube"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"menu": [
|
||||||
|
{
|
||||||
|
"label": "Home",
|
||||||
|
"href": "/",
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "About Us",
|
||||||
|
"href": "/about",
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Pages",
|
||||||
|
"href": "#",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"label": "Service",
|
||||||
|
"href": "/service",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"label": "Service",
|
||||||
|
"href": "/service"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Service Details",
|
||||||
|
"href": "/service-details"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Country List",
|
||||||
|
"href": "/country-list",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"label": "Country List",
|
||||||
|
"href": "/country-list"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Country Details",
|
||||||
|
"href": "/country-details"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Our Pricing",
|
||||||
|
"href": "/pricing"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Appointment",
|
||||||
|
"href": "/appointment"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "VISA",
|
||||||
|
"href": "#",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"label": "Visa List",
|
||||||
|
"href": "/visa-list"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Visa Details",
|
||||||
|
"href": "/visa-details"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Blog",
|
||||||
|
"href": "#",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"label": "Blog Grid",
|
||||||
|
"href": "/blog-grid"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Blog Standard",
|
||||||
|
"href": "/blog"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Blog Details",
|
||||||
|
"href": "/blog-details"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Contact Us",
|
||||||
|
"href": "/contact"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"hero": {
|
||||||
|
"title": "From Application to Visa – We've Got You Covered",
|
||||||
|
"subtitle": "Global Education Simplified",
|
||||||
|
"description": "We guide you through every step of the education visa process, from initial application to final approval, ensuring a smooth, hassle-free journey.",
|
||||||
|
"primaryButton": {
|
||||||
|
"label": "Apply now",
|
||||||
|
"href": "/contact"
|
||||||
|
},
|
||||||
|
"secondaryButton": {
|
||||||
|
"label": "Book Free Consultation",
|
||||||
|
"href": "/contact"
|
||||||
|
},
|
||||||
|
"backgroundImage": "/assets/img/home-1/hero/bg.jpg",
|
||||||
|
"videoUrl": "https://www.youtube.com/watch?v=Cn4G2lZ_g2I"
|
||||||
|
},
|
||||||
|
"whyChooseUs": {
|
||||||
|
"heading": "Turning Study Abroad Dreams Into Reality",
|
||||||
|
"subheading": "About Our Consultancy",
|
||||||
|
"description": "We guide students with expert visa consulting, ensuring a smooth process from application to approval, turning study abroad aspirations into life-changing opportunities for a brighter future.",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"icon": "/assets/img/home-1/icon/01.svg",
|
||||||
|
"title": "Global Reach",
|
||||||
|
"description": "Expanding Opportunities Worldwide"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon": "/assets/img/home-1/icon/01.svg",
|
||||||
|
"title": "Expert Guidance",
|
||||||
|
"description": "Professional Support Every Step"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"features": [
|
||||||
|
"Fastest Visa form processing with skilled immigration agents",
|
||||||
|
"Partnership with International Educational Institutions"
|
||||||
|
],
|
||||||
|
"ctaButton": {
|
||||||
|
"label": "Get Started",
|
||||||
|
"href": "/about"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"visaSolutions": {
|
||||||
|
"heading": "Comprehensive Visa Solutions",
|
||||||
|
"subheading": "Our Expert Services",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"number": "01",
|
||||||
|
"title": "Student Visa Guidance",
|
||||||
|
"description": "Assistance with admission, documentation, and visa application.Assistance",
|
||||||
|
"link": "/service-details"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": "02",
|
||||||
|
"title": "PTE Exam Preparation",
|
||||||
|
"description": "We provide expert guidance and personalized support throughout the education visa process,",
|
||||||
|
"link": "/service-details"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": "03",
|
||||||
|
"title": "University Selection Assistance",
|
||||||
|
"description": "We provide expert guidance and personalized support throughout the education visa process,",
|
||||||
|
"link": "/service-details"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": "04",
|
||||||
|
"title": "IELTS Exam Preparation",
|
||||||
|
"description": "We provide expert guidance and personalized support throughout the education visa process,",
|
||||||
|
"link": "/service-details"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"visaCountries": {
|
||||||
|
"heading": "Visa & VISAWAY Services To UK",
|
||||||
|
"subheading": "UK. United Kingdom",
|
||||||
|
"description": "The Express Entry program is designed for skilled workers who wish to immigrate to Canada. It includes the Federal Skilled Worker Program, the Federal Skilled…",
|
||||||
|
"countries": [
|
||||||
|
{
|
||||||
|
"name": "United Kingdom",
|
||||||
|
"code": "UK",
|
||||||
|
"flag": "/assets/img/home-1/feature/shape.png",
|
||||||
|
"link": "/country-details/uk",
|
||||||
|
"visaTypes": [
|
||||||
|
"Visitor Visa",
|
||||||
|
"Student Visa & Admission",
|
||||||
|
"Work Visa – H1B",
|
||||||
|
"Business Visa",
|
||||||
|
"Work permit for Canada",
|
||||||
|
"Student Visa for Canada"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "United States",
|
||||||
|
"code": "US",
|
||||||
|
"flag": "/assets/img/flags/us.png",
|
||||||
|
"link": "/country-details/us",
|
||||||
|
"visaTypes": [
|
||||||
|
"Student Visa F-1",
|
||||||
|
"Work Visa H1-B",
|
||||||
|
"Tourist Visa B-2"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Canada",
|
||||||
|
"code": "CA",
|
||||||
|
"flag": "/assets/img/flags/canada.png",
|
||||||
|
"link": "/country-details/canada",
|
||||||
|
"visaTypes": [
|
||||||
|
"Study Permit",
|
||||||
|
"Work Permit",
|
||||||
|
"Express Entry"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Australia",
|
||||||
|
"code": "AU",
|
||||||
|
"flag": "/assets/img/flags/australia.png",
|
||||||
|
"link": "/country-details/australia",
|
||||||
|
"visaTypes": [
|
||||||
|
"Student Visa 500",
|
||||||
|
"Skilled Migration",
|
||||||
|
"Working Holiday"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Germany",
|
||||||
|
"code": "DE",
|
||||||
|
"flag": "/assets/img/flags/germany.png",
|
||||||
|
"link": "/country-details/germany",
|
||||||
|
"visaTypes": [
|
||||||
|
"Student Visa",
|
||||||
|
"Job Seeker Visa",
|
||||||
|
"EU Blue Card"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ctaButton": {
|
||||||
|
"label": "Get Started",
|
||||||
|
"href": "/contact"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"testimonials": {
|
||||||
|
"heading": "Student Reviews & Testimonials",
|
||||||
|
"subheading": "What Our Students Say",
|
||||||
|
"videoUrl": "https://www.youtube.com/watch?v=Cn4G2lZ_g2I",
|
||||||
|
"videoThumbnail": "/assets/img/home-1/testimonial/01.jpg",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"name": "Sohel Tanvir",
|
||||||
|
"role": "Student",
|
||||||
|
"country": "Canada",
|
||||||
|
"rating": 5,
|
||||||
|
"comment": "Professional and reliable service. They explained each step clearly, prepared my documents, and supported me during the interview. My visa approval came faster than expected.",
|
||||||
|
"avatar": "/assets/img/home-1/testimonial/client.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Ayesha Rahman",
|
||||||
|
"role": "Student",
|
||||||
|
"country": "UK. United Kingdom",
|
||||||
|
"rating": 5,
|
||||||
|
"comment": "The consultancy guided me from start to finish, making my study abroad journey smooth and stress-free. Thanks to their expert support, I secured my visa successfully.",
|
||||||
|
"avatar": "/assets/img/home-1/testimonial/client-2.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Michael Chen",
|
||||||
|
"role": "Graduate Student",
|
||||||
|
"country": "Australia",
|
||||||
|
"rating": 5,
|
||||||
|
"comment": "Outstanding service from beginning to end. The team was knowledgeable, responsive, and made the entire visa process seamless. Highly recommend to anyone planning to study abroad.",
|
||||||
|
"avatar": "/assets/img/home-1/testimonial/client.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"videoGallery": {
|
||||||
|
"heading": "VIDEO PLAY GALLERY",
|
||||||
|
"videoUrl": "https://ex-coders.com/vdo/visa.mp4",
|
||||||
|
"thumbnail": "/assets/img/home-1/feature/text.png"
|
||||||
|
},
|
||||||
|
"faq": {
|
||||||
|
"heading": "Got Questions? We've Got Answers",
|
||||||
|
"subheading": "Visa FAQs",
|
||||||
|
"description": "We understand students often have many questions about studying abroad. Our experts provide clear.",
|
||||||
|
"ctaButton": {
|
||||||
|
"label": "contact us",
|
||||||
|
"href": "/contact"
|
||||||
|
},
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"question": "How long does the student visa process usually take?",
|
||||||
|
"answer": "The student visa process typically takes 4-8 weeks depending on the country and time of year. We recommend starting the application process at least 3 months before your intended travel date to ensure sufficient time for document preparation and processing."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Do you assist with scholarship applications as well?",
|
||||||
|
"answer": "Yes, we guide students in identifying suitable scholarships, preparing strong applications, and increasing chances of securing financial aid for their studies abroad."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Will you guide me in preparing for the visa interview?",
|
||||||
|
"answer": "Absolutely! We provide comprehensive visa interview preparation, including mock interviews, document review, and tips on how to answer common questions confidently and effectively."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "Do you offer post-arrival support for students?",
|
||||||
|
"answer": "Yes, we provide post-arrival support including airport pickup coordination, accommodation assistance, university orientation guidance, and ongoing support throughout your study period."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"question": "What documents are required for a student visa application?",
|
||||||
|
"answer": "Required documents typically include a valid passport, university acceptance letter, proof of financial support, academic transcripts, language proficiency test scores, and health insurance. We provide a complete checklist tailored to your destination country."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"achievements": {
|
||||||
|
"heading": "Our Achievements in Numbers",
|
||||||
|
"subheading": "Did You Know",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"value": "1000",
|
||||||
|
"suffix": "k+",
|
||||||
|
"label": "Students Guided",
|
||||||
|
"description": "Successfully assisted over a thousand students worldwide."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "50",
|
||||||
|
"suffix": "+",
|
||||||
|
"label": "Countries Covered",
|
||||||
|
"description": "Helping students apply to universities in more than 50 countries."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "95",
|
||||||
|
"suffix": "%",
|
||||||
|
"label": "Visa Success Rate",
|
||||||
|
"description": "Inspired students to reach their goals globally"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "10",
|
||||||
|
"suffix": "+",
|
||||||
|
"label": "Years of Experience",
|
||||||
|
"description": "Trusted experts in global education consulting."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"partners": {
|
||||||
|
"heading": "Our Trusted Partners",
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"name": "Best Visa Consultancy",
|
||||||
|
"logo": "/assets/img/home-1/feature/icon-1.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Visa Success Award",
|
||||||
|
"logo": "/assets/img/home-1/feature/icon-2.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Innovation Award",
|
||||||
|
"logo": "/assets/img/home-1/feature/icon-3.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Global Education Partner",
|
||||||
|
"logo": "/assets/img/home-1/feature/icon-4.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "University Partner 1",
|
||||||
|
"logo": "/assets/img/home-1/brand/01.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "University Partner 2",
|
||||||
|
"logo": "/assets/img/home-1/brand/02.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "University Partner 3",
|
||||||
|
"logo": "/assets/img/home-1/brand/03.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "University Partner 4",
|
||||||
|
"logo": "/assets/img/home-1/brand/04.png",
|
||||||
|
"year": "2025"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "University Partner 5",
|
||||||
|
"logo": "/assets/img/home-1/brand/05.png",
|
||||||
|
"year": "2025"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"blogPreview": {
|
||||||
|
"heading": "Latest Insights & Updates",
|
||||||
|
"subheading": "Visa Tips & Guides",
|
||||||
|
"ctaButton": {
|
||||||
|
"label": "view all articles",
|
||||||
|
"href": "/blog"
|
||||||
|
},
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"title": "Step-by-Step Guide to Applying for a Student Visa",
|
||||||
|
"excerpt": "Learn the complete process of applying for a student visa, from gathering documents to attending your interview. Our comprehensive guide covers everything you need to know.",
|
||||||
|
"category": "Student Visa",
|
||||||
|
"date": "2025-08-20",
|
||||||
|
"author": {
|
||||||
|
"name": "Sohel",
|
||||||
|
"avatar": "/assets/img/home-1/news/client.png"
|
||||||
|
},
|
||||||
|
"comments": 8,
|
||||||
|
"link": "/blog/step-by-step-guide-student-visa",
|
||||||
|
"thumbnail": "/assets/img/home-1/news/news-1.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Tips to Prepare Financial Documents for Visa Approval",
|
||||||
|
"excerpt": "Financial documentation is crucial for visa approval. Discover expert tips on preparing bank statements, sponsorship letters, and proof of funds that meet embassy requirements.",
|
||||||
|
"category": "IELTS / TOEFL",
|
||||||
|
"date": "2025-08-20",
|
||||||
|
"author": {
|
||||||
|
"name": "Sohel",
|
||||||
|
"avatar": "/assets/img/home-1/news/client.png"
|
||||||
|
},
|
||||||
|
"comments": 8,
|
||||||
|
"link": "/blog/financial-documents-visa-approval",
|
||||||
|
"thumbnail": "/assets/img/home-1/news/news-2.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Post-Arrival Guide What Every Student Should Know",
|
||||||
|
"excerpt": "Moving to a new country can be overwhelming. Our post-arrival guide helps international students navigate accommodation, banking, healthcare, and cultural adaptation successfully.",
|
||||||
|
"category": "Study Abroad",
|
||||||
|
"date": "2025-08-20",
|
||||||
|
"author": {
|
||||||
|
"name": "Sohel",
|
||||||
|
"avatar": "/assets/img/home-1/news/client.png"
|
||||||
|
},
|
||||||
|
"comments": 8,
|
||||||
|
"link": "/blog/post-arrival-guide-students",
|
||||||
|
"thumbnail": "/assets/img/home-1/news/news-3.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,14 +1,16 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import "./globals.css";
|
|
||||||
|
|
||||||
import Header from "./components/Header";
|
|
||||||
import Footer from "./components/Footer";
|
|
||||||
import Script from "next/script";
|
import Script from "next/script";
|
||||||
|
|
||||||
|
// Import global styles locally if needed, but linking via head is safer for legacy assets
|
||||||
|
// import "./globals.css";
|
||||||
|
|
||||||
|
import Header from "./components/layout/Header/Header";
|
||||||
|
import Footer from "./components/layout/Footer/Footer";
|
||||||
|
import Preloader from "./components/common/Preloader";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "VisaService - Dịch vụ visa uy tín",
|
title: "Visaway – Immigration & Visa Consulting HTML Template",
|
||||||
description:
|
description: "Visaway – Immigration & Visa Consulting HTML Template",
|
||||||
"Dịch vụ visa chuyên nghiệp với tỷ lệ thành công 99%. Hỗ trợ visa cho hơn 50 quốc gia.",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
@@ -17,25 +19,50 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="vi">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
{/* Nhúng các file CSS template như news.html */}
|
{/* Favicon */}
|
||||||
<link rel="shortcut icon" href="/assets/img/favicon.png" />
|
<link rel="shortcut icon" href="/assets/img/favicon.png" />
|
||||||
|
|
||||||
|
{/* Bootstrap min.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
|
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
|
||||||
|
{/* All Min Css */}
|
||||||
<link rel="stylesheet" href="/assets/css/all.min.css" />
|
<link rel="stylesheet" href="/assets/css/all.min.css" />
|
||||||
|
{/* Animate.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/animate.css" />
|
<link rel="stylesheet" href="/assets/css/animate.css" />
|
||||||
|
{/* Magnific Popup.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/magnific-popup.css" />
|
<link rel="stylesheet" href="/assets/css/magnific-popup.css" />
|
||||||
|
{/* MeanMenu.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/meanmenu.css" />
|
<link rel="stylesheet" href="/assets/css/meanmenu.css" />
|
||||||
|
{/* Odometer.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/odometer.css" />
|
<link rel="stylesheet" href="/assets/css/odometer.css" />
|
||||||
|
{/* Swiper Bundle.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/swiper-bundle.min.css" />
|
<link rel="stylesheet" href="/assets/css/swiper-bundle.min.css" />
|
||||||
|
{/* Nice Select.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/nice-select.css" />
|
<link rel="stylesheet" href="/assets/css/nice-select.css" />
|
||||||
|
{/* Main.css */}
|
||||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body className={`antialiased bg-gray-50`}>
|
<body className="smooth-scroll-yes">
|
||||||
|
|
||||||
|
<Preloader />
|
||||||
|
|
||||||
|
{/* Mouse Cursor */}
|
||||||
|
<div className="mouseCursor cursor-outer"></div>
|
||||||
|
<div className="mouseCursor cursor-inner"></div>
|
||||||
|
|
||||||
|
{/* Back To Top */}
|
||||||
|
<button id="back-top" className="back-to-top">
|
||||||
|
<i className="fa-regular fa-arrow-up"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
<main className="min-h-screen">{children}</main>
|
|
||||||
|
{children}
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
{/* Nhúng các script JS giống news.html */}
|
|
||||||
|
{/* Scripts */}
|
||||||
<Script src="/assets/js/jquery-3.7.1.min.js" strategy="beforeInteractive" />
|
<Script src="/assets/js/jquery-3.7.1.min.js" strategy="beforeInteractive" />
|
||||||
<Script src="/assets/js/viewport.jquery.js" strategy="afterInteractive" />
|
<Script src="/assets/js/viewport.jquery.js" strategy="afterInteractive" />
|
||||||
<Script src="/assets/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
|
<Script src="/assets/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
|
||||||
|
|||||||
83
app/page.tsx
83
app/page.tsx
@@ -1,65 +1,28 @@
|
|||||||
import Image from "next/image";
|
import HeroSection from './components/home/HeroSection';
|
||||||
|
import WhyChooseUs from './components/home/WhyChooseUs';
|
||||||
|
import VisaSolutions from './components/home/VisaSolutions';
|
||||||
|
import VisaCountries from './components/home/VisaCountries';
|
||||||
|
import Testimonials from './components/home/Testimonials';
|
||||||
|
import VideoGallery from './components/home/VideoGallery';
|
||||||
|
import FAQSection from './components/home/FAQSection';
|
||||||
|
import Achievements from './components/home/Achievements';
|
||||||
|
import Partners from './components/home/Partners';
|
||||||
|
import BlogPreview from './components/home/BlogPreview';
|
||||||
|
import homeData from './home.json';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<>
|
||||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
<HeroSection data={homeData.hero} />
|
||||||
<Image
|
<WhyChooseUs data={homeData.whyChooseUs} />
|
||||||
className="dark:invert"
|
<VisaSolutions data={homeData.visaSolutions} />
|
||||||
src="/next.svg"
|
<VisaCountries data={homeData.visaCountries} />
|
||||||
alt="Next.js logo"
|
<Testimonials data={homeData.testimonials} />
|
||||||
width={100}
|
<VideoGallery data={homeData.videoGallery} />
|
||||||
height={20}
|
<FAQSection data={homeData.faq} />
|
||||||
priority
|
<Achievements data={homeData.achievements} />
|
||||||
/>
|
<Partners data={homeData.partners} />
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
<BlogPreview data={homeData.blogPreview} />
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
</>
|
||||||
To get started, edit the page.tsx file.
|
|
||||||
</h1>
|
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Templates
|
|
||||||
</a>{" "}
|
|
||||||
or the{" "}
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Learning
|
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Deploy Now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
793
docs/example/about.html
Normal file
793
docs/example/about.html
Normal file
@@ -0,0 +1,793 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<!--<< Header Area >>-->
|
||||||
|
<head>
|
||||||
|
<!-- ========== Meta Tags ========== -->
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="author" content="Gramentheme">
|
||||||
|
<meta name="description" content="Visaway – Immigration & Visa Consulting HTML Template">
|
||||||
|
<!-- ======== Page title ============ -->
|
||||||
|
<title>Visaway – Immigration & Visa Consulting HTML Template</title>
|
||||||
|
<!--<< Favcion >>-->
|
||||||
|
<link rel="shortcut icon" href="assets/img/favicon.png">
|
||||||
|
<!--<< Bootstrap min.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
||||||
|
<!--<< All Min Css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/all.min.css">
|
||||||
|
<!--<< Animate.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/animate.css">
|
||||||
|
<!--<< Magnific Popup.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/magnific-popup.css">
|
||||||
|
<!--<< MeanMenu.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/meanmenu.css">
|
||||||
|
<!--<< Odometer.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/odometer.css">
|
||||||
|
<!--<< Swiper Bundle.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
|
||||||
|
<!--<< Nice Select.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/nice-select.css">
|
||||||
|
<!--<< Main.css >>-->
|
||||||
|
<link rel="stylesheet" href="assets/css/main.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="smooth-scroll-yes">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Preloader Start -->
|
||||||
|
<div id="preloader" class="preloader">
|
||||||
|
<div class="animation-preloader">
|
||||||
|
<div class="spinner">
|
||||||
|
</div>
|
||||||
|
<div class="txt-loading">
|
||||||
|
<span data-text-preloader="V" class="letters-loading">
|
||||||
|
V
|
||||||
|
</span>
|
||||||
|
<span data-text-preloader="I" class="letters-loading">
|
||||||
|
I
|
||||||
|
</span>
|
||||||
|
<span data-text-preloader="S" class="letters-loading">
|
||||||
|
S
|
||||||
|
</span>
|
||||||
|
<span data-text-preloader="A" class="letters-loading">
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
<span data-text-preloader="W" class="letters-loading">
|
||||||
|
W
|
||||||
|
</span>
|
||||||
|
<span data-text-preloader="A" class="letters-loading">
|
||||||
|
A
|
||||||
|
</span>
|
||||||
|
<span data-text-preloader="Y" class="letters-loading">
|
||||||
|
Y
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-center">Loading</p>
|
||||||
|
</div>
|
||||||
|
<div class="loader">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3 loader-section section-left">
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3 loader-section section-left">
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3 loader-section section-right">
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3 loader-section section-right">
|
||||||
|
<div class="bg"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- GT Back To Top Start -->
|
||||||
|
<button id="back-top" class="back-to-top show">
|
||||||
|
<i class="fa-regular fa-arrow-up"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- GT MouseCursor Start -->
|
||||||
|
<div class="mouseCursor cursor-outer"></div>
|
||||||
|
<div class="mouseCursor cursor-inner"></div>
|
||||||
|
|
||||||
|
<!-- Header-Top-Section Start -->
|
||||||
|
<div class="header-top-section">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="header-top-wrapper">
|
||||||
|
<div class="header-left">
|
||||||
|
<ul class="list">
|
||||||
|
<li class="style-2">
|
||||||
|
<span>Help Line</span>
|
||||||
|
<i class="fa-solid fa-phone"></i>
|
||||||
|
<a href="tel:+093783575222">+09 378 357 5222</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-location-dot"></i>
|
||||||
|
69 Street, 5th AvenueLA, United States
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-envelope"></i>
|
||||||
|
<a href="mailto:info@example.com">info@example.com</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="flag-wrap">
|
||||||
|
<div class="flag">
|
||||||
|
<i class="fa-solid fa-globe"></i>
|
||||||
|
</div>
|
||||||
|
<div class="nice-select" tabindex="0">
|
||||||
|
<span class="current">
|
||||||
|
English
|
||||||
|
</span>
|
||||||
|
<ul class="list">
|
||||||
|
<li data-value="1" class="option selected focus">
|
||||||
|
English
|
||||||
|
</li>
|
||||||
|
<li data-value="1" class="option">
|
||||||
|
Bangla
|
||||||
|
</li>
|
||||||
|
<li data-value="1" class="option">
|
||||||
|
Hindi
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-item">
|
||||||
|
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
|
||||||
|
<a href="#"><i class="fa-brands fa-twitter"></i></a>
|
||||||
|
<a href="#"><i class="fa-brands fa-instagram"></i></a>
|
||||||
|
<a href="#"><i class="fa-brands fa-youtube"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Offcanvas Area Start -->
|
||||||
|
<div class="fix-area">
|
||||||
|
<div class="offcanvas__info">
|
||||||
|
<div class="offcanvas__wrapper">
|
||||||
|
<div class="offcanvas__content">
|
||||||
|
<div class="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
|
||||||
|
<div class="offcanvas__logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="assets/img/logo/black-logo.svg" alt="logo-img">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas__close">
|
||||||
|
<button>
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text d-none d-xl-block">
|
||||||
|
Nullam dignissim, ante scelerisque the is euismod fermentum odio sem semper the is erat, a feugiat leo urna eget eros. Duis Aenean a imperdiet risus.
|
||||||
|
</p>
|
||||||
|
<div class="mobile-menu fix mb-3"></div>
|
||||||
|
<div class="offcanvas__contact d-xl-block">
|
||||||
|
<h4 class="d-xl-block">Contact Info</h4>
|
||||||
|
<ul class="d-xl-block">
|
||||||
|
<li class="d-flex align-items-center">
|
||||||
|
<div class="offcanvas__contact-icon">
|
||||||
|
<i class="fal fa-map-marker-alt"></i>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas__contact-text">
|
||||||
|
<a target="_blank" href="#">Main Street, Melbourne, Australia</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex align-items-center">
|
||||||
|
<div class="offcanvas__contact-icon mr-15">
|
||||||
|
<i class="fal fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas__contact-text">
|
||||||
|
<a href="mailto:info@example.com"><span class="mailto:info@example.com">info@example.com</span></a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex align-items-center">
|
||||||
|
<div class="offcanvas__contact-icon mr-15">
|
||||||
|
<i class="fal fa-clock"></i>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas__contact-text">
|
||||||
|
<a target="_blank" href="#">Mod-friday, 09am -05pm</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="d-flex align-items-center">
|
||||||
|
<div class="offcanvas__contact-icon mr-15">
|
||||||
|
<i class="far fa-phone"></i>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas__contact-text">
|
||||||
|
<a href="tel:+11002345909">+11002345909</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="social-icon d-flex align-items-center">
|
||||||
|
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
||||||
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a href="#"><i class="fab fa-youtube"></i></a>
|
||||||
|
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas__overlay"></div>
|
||||||
|
|
||||||
|
<!-- Header Section Start -->
|
||||||
|
<header id="header-sticky" class="header-1">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="mega-menu-wrapper">
|
||||||
|
<div class="header-main">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html" class="header-logo-2">
|
||||||
|
<img src="assets/img/logo/black-logo.svg" alt="logo-img">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mean__menu-wrapper">
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav id="mobile-menu">
|
||||||
|
<ul>
|
||||||
|
<li class="has-dropdown active menu-thumb">
|
||||||
|
<a href="index.html">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<ul class="submenu has-homemenu">
|
||||||
|
<li>
|
||||||
|
<div class="homemenu-items">
|
||||||
|
<div class="homemenu">
|
||||||
|
<div class="homemenu-thumb">
|
||||||
|
<img src="assets/img/header/home-1.jpg" alt="img">
|
||||||
|
<div class="demo-button">
|
||||||
|
<a href="index.html" class="theme-btn">
|
||||||
|
Multi Page <i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homemenu-content text-center">
|
||||||
|
<h4 class="homemenu-title">
|
||||||
|
Home 01
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homemenu">
|
||||||
|
<div class="homemenu-thumb mb-15">
|
||||||
|
<img src="assets/img/header/home-2.jpg" alt="img">
|
||||||
|
<div class="demo-button">
|
||||||
|
<a href="index-2.html" class="theme-btn">
|
||||||
|
Multi Page <i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homemenu-content text-center">
|
||||||
|
<h4 class="homemenu-title">
|
||||||
|
Home 02
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homemenu">
|
||||||
|
<div class="homemenu-thumb mb-15">
|
||||||
|
<img src="assets/img/header/home-3.jpg" alt="img">
|
||||||
|
<div class="demo-button">
|
||||||
|
<a href="index-3.html" class="theme-btn">
|
||||||
|
Multi Page <i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homemenu-content text-center">
|
||||||
|
<h4 class="homemenu-title">
|
||||||
|
Home 03
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="has-dropdown active d-xl-none">
|
||||||
|
<a href="index.html" class="border-none">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="index.html">Home 01</a></li>
|
||||||
|
<li><a href="index-2.html">Home 02</a></li>
|
||||||
|
<li><a href="index-3.html">Home 03</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="about.html">About Us</a>
|
||||||
|
</li>
|
||||||
|
<li class="has-dropdown">
|
||||||
|
<a href="news-details.html">
|
||||||
|
Pages
|
||||||
|
</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li class="has-dropdown">
|
||||||
|
<a href="service-details.html">
|
||||||
|
Service
|
||||||
|
<i class="fas fa-angle-right"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="service.html">Service</a></li>
|
||||||
|
<li><a href="service-details.html">Service Details</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="has-dropdown">
|
||||||
|
<a href="project-details.html">
|
||||||
|
Country List
|
||||||
|
<i class="fas fa-angle-right"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="country-list.html">Country List</a></li>
|
||||||
|
<li><a href="country-details.html">Country Details</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="pricing.html">Our Pricing</a></li>
|
||||||
|
<li><a href="appointment.html">Appointment</a></li>
|
||||||
|
<li><a href="404.html">404 Page</a></li>
|
||||||
|
<li><a href="coming-soon.html">Coming Soon</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="country-details.html">
|
||||||
|
VISA
|
||||||
|
</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="country-list.html">Visa List</a></li>
|
||||||
|
<li><a href="country-details.html">Visa Details</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="news-details.html">
|
||||||
|
Blog
|
||||||
|
</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="news-grid.html">Blog Grid</a></li>
|
||||||
|
<li><a href="news.html">Blog Standard</a></li>
|
||||||
|
<li><a href="news-details.html">Blog Details</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="contact.html">Contact Us</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right d-flex align-items-center mt-0">
|
||||||
|
<div class="header-call-item">
|
||||||
|
<a href="#" class="main-header__search search-toggler">
|
||||||
|
<i class="fa-regular fa-magnifying-glass"></i>
|
||||||
|
</a>
|
||||||
|
<a href="contact.html" class="theme-btn">
|
||||||
|
Apply now
|
||||||
|
<i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
<div class="header__hamburger my-auto">
|
||||||
|
<div class="sidebar__toggle">
|
||||||
|
<i class="fa-solid fa-bars-staggered"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Search Area Start -->
|
||||||
|
<div class="search-popup">
|
||||||
|
<div class="search-popup__overlay search-toggler"></div>
|
||||||
|
<div class="search-popup__content">
|
||||||
|
<form role="search" method="get" class="search-popup__form" action="#">
|
||||||
|
<input type="text" id="search" name="search" placeholder="Search Here...">
|
||||||
|
<button type="submit" aria-label="search submit" class="search-btn">
|
||||||
|
<span><i class="fa-regular fa-magnifying-glass"></i></span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Breadcrumb-Wrapper Section Start -->
|
||||||
|
<section class="breadcrumb-wrapper fix bg-cover" style="background-image: url(assets/img/inner-page/breadcrumb.jpg);">
|
||||||
|
<div class="shape">
|
||||||
|
<img src="assets/img/inner-page/shape.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-heading">
|
||||||
|
<h1 class="breadcrumb-title">About Us</h1>
|
||||||
|
<ul class="breadcrumb-list">
|
||||||
|
<li>
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-chevron-right"></i>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
About Us
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--Choose-us Section3 Start -->
|
||||||
|
<section class="intro-section section-padding fix pb-0">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title-area">
|
||||||
|
<div class="section-title">
|
||||||
|
<span class="sub-title-2 wow fadeInUp">Company Intro</span>
|
||||||
|
<h2 class="split-text-right split-text-in-right">
|
||||||
|
Building Pathways to Your Immigration Success
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
We provide expert guidance, personalized solutions, and transparent processes to help you achieve your immigration goals. Our dedicated team ensures a smooth journey, building pathways to your international success.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="intro-image tp-clip-anim p-relative">
|
||||||
|
<img src="assets/img/inner-page/intro.jpg" alt="img" class="tp-anim-img" data-animate="true">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--About Section Start -->
|
||||||
|
<section class="about-section section-padding fix pb-0">
|
||||||
|
<div class="top-shape">
|
||||||
|
<img src="assets/img/home-1/about/globe.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-wrapper">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="about-image">
|
||||||
|
<img src="assets/img/home-1/about/about-1.jpg" alt="img" class="wow img-custom-anim-left">
|
||||||
|
<div class="about-image-2">
|
||||||
|
<img src="assets/img/home-1/about/about-02.jpg" alt="img" class="wow img-custom-anim-right">
|
||||||
|
</div>
|
||||||
|
<div class="bg-shape">
|
||||||
|
<img src="assets/img/home-1/about/Vector.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<div class="plane-shape float-bob-y">
|
||||||
|
<img src="assets/img/home-1/about/plane.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<div class="top-shape float-bob-y">
|
||||||
|
<img src="assets/img/home-1/about/shape.png" alt="img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="about-content">
|
||||||
|
<div class="section-title mb-0">
|
||||||
|
<span class="sub-title wow fadeInUp">About Our Consultancy</span>
|
||||||
|
<h2 class="split-text-right split-text-in-right">
|
||||||
|
Turning Study Abroad <span>Dreams</span> Into Reality
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p class="text wow fadeInUp" data-wow-delay=".3s">
|
||||||
|
We guide students with expert visa consulting, ensuring a smooth process from application to approval, turning study abroad aspirations into life-changing opportunities for a brighter future.
|
||||||
|
</p>
|
||||||
|
<div class="about-item wow fadeInUp" data-wow-delay=".5s">
|
||||||
|
<div class="content">
|
||||||
|
<span><img src="assets/img/home-1/icon/01.svg" alt=""> Global Reach-</span>
|
||||||
|
<p>Expanding Opportunities Worldwide</p>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<span><img src="assets/img/home-1/icon/01.svg" alt=""> Global Reach-</span>
|
||||||
|
<p>Expanding Opportunities Worldwide</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="list wow fadeInUp" data-wow-delay=".3s">
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-chevrons-right"></i>
|
||||||
|
Fastest Visa form processing with skilled immigration agents
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-chevrons-right"></i>
|
||||||
|
Partnership with International Educational Institutions
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="about.html" class="theme-btn wow fadeInUp" data-wow-delay=".5s">
|
||||||
|
Get Started
|
||||||
|
<i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Choose-us-section-2 Start -->
|
||||||
|
<section class="choose-us-section-2 section-padding fix bg-cover" style="background-image: url(assets/img/home-2/feature/bg-shape.png);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="choose-us-wrapper-2">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="choose-us-image">
|
||||||
|
<img src="assets/img/home-2/feature/02.png" alt="img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="feature-content">
|
||||||
|
<div class="section-title mb-0">
|
||||||
|
<span class="sub-title-2 wow fadeInUp">Your Travel Made Easy</span>
|
||||||
|
<h2 class="split-text-right split-text-in-right">
|
||||||
|
Smooth Visa Journey Guaranteed
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p class="text">
|
||||||
|
We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance
|
||||||
|
</p>
|
||||||
|
<div class="choose-us-box">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="assets/img/home-2/icon/01.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h5>Expert Consultants</h5>
|
||||||
|
<p>
|
||||||
|
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="choose-us-box">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="assets/img/home-2/icon/01.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h5>Personalized Support</h5>
|
||||||
|
<p>
|
||||||
|
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="choose-us-box">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="assets/img/home-2/icon/01.png" alt="img">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<h5>Transparent Process</h5>
|
||||||
|
<p>
|
||||||
|
Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html" class="theme-btn">
|
||||||
|
Get Started Today
|
||||||
|
<i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--News Section Start -->
|
||||||
|
<section class="news-section section-padding fix pt-0">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-title-area">
|
||||||
|
<div class="section-title">
|
||||||
|
<span class="sub-title">Visa Tips & Guides</span>
|
||||||
|
<h2 class="split-text-right split-text-in-right">
|
||||||
|
Latest Insights & Updates
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<a href="news.html" class="theme-btn">
|
||||||
|
view all articies
|
||||||
|
<i class="fa-solid fa-arrow-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||||
|
<div class="news-card-item">
|
||||||
|
<div class="news-image">
|
||||||
|
<img src="assets/img/home-1/news/news-1.jpg" alt="img">
|
||||||
|
<span>Student Visa</span>
|
||||||
|
<div class="news-layer-wrapper">
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-1.jpg');"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news-content">
|
||||||
|
<div class="list">
|
||||||
|
<span>Comment (08)</span>
|
||||||
|
<span>_ 20 August ,2025</span>
|
||||||
|
</div>
|
||||||
|
<h3>
|
||||||
|
<a href="news-details.html">
|
||||||
|
Step-by-Step Guide to Applying for a Student Visa
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<div class="news-bottom">
|
||||||
|
<div class="info-item">
|
||||||
|
<img src="assets/img/home-1/news/client.png" alt="img">
|
||||||
|
<span>By Sohel</span>
|
||||||
|
</div>
|
||||||
|
<a href="news-details.html" class="link-btn">View Articles<i class="fa-solid fa-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||||
|
<div class="news-card-item">
|
||||||
|
<div class="news-image">
|
||||||
|
<img src="assets/img/home-1/news/news-2.jpg" alt="img">
|
||||||
|
<span>IELTS / TOEFL</span>
|
||||||
|
<div class="news-layer-wrapper">
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-2.jpg');"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news-content">
|
||||||
|
<div class="list">
|
||||||
|
<span>Comment (08)</span>
|
||||||
|
<span>_ 20 August ,2025</span>
|
||||||
|
</div>
|
||||||
|
<h3>
|
||||||
|
<a href="news-details.html">
|
||||||
|
Tips to Prepare Financial Documents for Visa Approval
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<div class="news-bottom">
|
||||||
|
<div class="info-item">
|
||||||
|
<img src="assets/img/home-1/news/client.png" alt="img">
|
||||||
|
<span>By Sohel</span>
|
||||||
|
</div>
|
||||||
|
<a href="news-details.html" class="link-btn">View Articles<i class="fa-solid fa-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-4 col-lg-6 col-md-6">
|
||||||
|
<div class="news-card-item">
|
||||||
|
<div class="news-image">
|
||||||
|
<img src="assets/img/home-1/news/news-3.jpg" alt="img">
|
||||||
|
<span>Study Abroad</span>
|
||||||
|
<div class="news-layer-wrapper">
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
|
||||||
|
<div class="news-layer-image" style="background-image: url('assets/img/home-1/news/news-3.jpg');"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="news-content">
|
||||||
|
<div class="list">
|
||||||
|
<span>Comment (08)</span>
|
||||||
|
<span>_ 20 August ,2025</span>
|
||||||
|
</div>
|
||||||
|
<h3>
|
||||||
|
<a href="news-details.html">
|
||||||
|
Post-Arrival Guide What Every Student Should Know
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<div class="news-bottom">
|
||||||
|
<div class="info-item">
|
||||||
|
<img src="assets/img/home-1/news/client.png" alt="img">
|
||||||
|
<span>By Sohel</span>
|
||||||
|
</div>
|
||||||
|
<a href="news-details.html" class="link-btn">View Articles<i class="fa-solid fa-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!--Footer Section Start -->
|
||||||
|
<footer class="footer-section fix bg-cover" style="background-image: url(assets/img/home-1/footer-bg.jpg);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-wrapper">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xl-12">
|
||||||
|
<div class="footer-item">
|
||||||
|
<h2>
|
||||||
|
<a href="tel:+16336547896">+163 3654 7896</a>
|
||||||
|
</h2>
|
||||||
|
<h2 class="text">69 Street, 5th AvenueLA, United States</h2>
|
||||||
|
<div class="footer-list-item">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="assets/img/logo/white-logo.svg" alt="img">
|
||||||
|
</a>
|
||||||
|
<ul class="footer-list">
|
||||||
|
<li>
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="about.html">About Us</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="country-details.html">Visa</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="news-details.html">Pages</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="news.html">Article</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="contact.html">Contact Us</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="social-icon">
|
||||||
|
<a href="#"><i class="fa-brands fa-twitter"></i></a>
|
||||||
|
<a href="#"><i class="fa-brands fa-instagram"></i></a>
|
||||||
|
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
|
||||||
|
<a href="#"><i class="fa-brands fa-youtube"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!--Footer-Bottom Section Start -->
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-wrapper">
|
||||||
|
<p>
|
||||||
|
Copyright© <span>GRAMENTHEME</span> All Rights Reserved.
|
||||||
|
</p>
|
||||||
|
<ul class="bottom-list">
|
||||||
|
<li>
|
||||||
|
<a href="contact.html">Terms & Conditions</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="contact.html">Privacy Policy</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="contact.html">Contact Us</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--<< All JS Plugins >>-->
|
||||||
|
<script src="assets/js/jquery-3.7.1.min.js"></script>
|
||||||
|
<!--<< Viewport Js >>-->
|
||||||
|
<script src="assets/js/viewport.jquery.js"></script>
|
||||||
|
<!--<< Bootstrap Js >>-->
|
||||||
|
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<!--<< nice-selec Js >>-->
|
||||||
|
<script src="assets/js/jquery.nice-select.min.js"></script>
|
||||||
|
<!--<< Waypoints Js >>-->
|
||||||
|
<script src="assets/js/jquery.waypoints.js"></script>
|
||||||
|
<!--<< Odometer Js >>-->
|
||||||
|
<script src="assets/js/odometer.min.js"></script>
|
||||||
|
<!--<< Swiper Slider Js >>-->
|
||||||
|
<script src="assets/js/swiper-bundle.min.js"></script>
|
||||||
|
<!--<< MeanMenu Js >>-->
|
||||||
|
<script src="assets/js/jquery.meanmenu.min.js"></script>
|
||||||
|
<!--<< Magnific Popup Js >>-->
|
||||||
|
<script src="assets/js/jquery.magnific-popup.min.js"></script>
|
||||||
|
<!--<< Wow Animation Js >>-->
|
||||||
|
<script src="assets/js/wow.min.js"></script>
|
||||||
|
<!--<< circle-progress Js >>-->
|
||||||
|
<script src="assets/js/circle-progress.js"></script>
|
||||||
|
<!--<< Wow gsap Js >>-->
|
||||||
|
<script src="assets/js/gsap.js"></script>
|
||||||
|
<!--<< Wow lenis.min. Js >>-->
|
||||||
|
<script src="assets/js/lenis.min.js"></script>
|
||||||
|
<!--<< Wow ScrollTrigger.min. Js >>-->
|
||||||
|
<script src="assets/js/ScrollTrigger.min.js"></script>
|
||||||
|
<!--<< Wow SplitText.min. Js >>-->
|
||||||
|
<script src="assets/js/SplitText.min.js"></script>
|
||||||
|
<!--<< Main.js >>-->
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1261
docs/example/index.html
Normal file
1261
docs/example/index.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -3442,7 +3442,7 @@ span {
|
|||||||
background-color: var(--theme);
|
background-color: var(--theme);
|
||||||
left: 0;
|
left: 0;
|
||||||
right: initial;
|
right: initial;
|
||||||
width: 337px;
|
width: 300px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.header-top-section .container-fluid {
|
.header-top-section .container-fluid {
|
||||||
@@ -3473,16 +3473,24 @@ span {
|
|||||||
.header-top-wrapper .header-left .list {
|
.header-top-wrapper .header-left .list {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 60px;
|
gap: 30px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
}
|
}
|
||||||
.header-top-wrapper .header-left .list li {
|
.header-top-wrapper .header-left .list li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.header-top-wrapper .header-left .list li a {
|
.header-top-wrapper .header-left .list li a {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.header-top-wrapper .header-left .list li i {
|
.header-top-wrapper .header-left .list li i {
|
||||||
margin-right: 12px;
|
margin-right: 8px;
|
||||||
color: var(--theme);
|
color: var(--theme);
|
||||||
}
|
}
|
||||||
.header-top-wrapper .header-left .list li.style-2 {
|
.header-top-wrapper .header-left .list li.style-2 {
|
||||||
@@ -3495,7 +3503,8 @@ span {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 12px;
|
margin-right: 6px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.header-top-wrapper .header-right {
|
.header-top-wrapper .header-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user