minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

Merge branch 'main' of https://gits.techvanguard.vn/UKSOURCE/hailearning.edu.vn into fea/bao-03022026-Service-Service_Details

Browse Source
This commit is contained in:
nguyenvanbao
2026-02-03 10:21:54 +07:00
parent 9f67fd44ef bf652a64b6
commit a2a215dfd7
49 changed files with 4709 additions and 542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/about/about.json
View File

@@ -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." ],
}, "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg"
{ },
"heading": "Tầm Nhìn", "intro": {
"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": "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": [
"heading": "Giá Trị Cốt Lõi", "Expert Visa Consulting",
"content": "Uy tín - Chất lượng - Tận tâm - Chuyên nghiệp" "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"
}
}
]
}
} }

67
app/about/page.tsx
View File

@@ -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
View 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;
};
}[];
};
}

226
app/blog/[slug]/components/NewsDetailsContent.tsx Normal file
View File

@@ -0,0 +1,226 @@
import Link from "next/link";
export default function NewsDetailsContent() {
return (
<div className="col-lg-8 col-12">
<div className="news-details-post">
<div className="news-details-image">
<img src="/assets/img/inner-page/news-details/details-1.jpg" alt="img" />
</div>
<div className="details-content">
<ul className="news-list">
<li>
<i className="fa-solid fa-user"></i>
By Admin
</li>
<li>
<i className="fa-solid fa-calendar-days"></i>
11 March 2025
</li>
<li>
<i className="fa-solid fa-comments"></i>
0 Comments
</li>
</ul>
<h2>Work Visa vs. Student Visa Which is Right for You?</h2>
<p>
Choosing between a work visa and a student visa depends on your career and academic goals. A
student visa allows you to pursue higher education abroad, gain international exposure, and
sometimes work part-time while studying. On the other hand, a work visa is for professionals
seeking employment opportunities and long-term career growth in another country.
</p>
<p className="mt-4 mb-3">
Both options have unique benefits, eligibility requirements, and future pathways. Understanding
your personal ambitions, financial plans, and long-term vision will help you decide which visa
option best suits your journey.
</p>
<h3>Work Visa vs. Student Visa: Which is Right for You?</h3>
<p className="mt-2 mb-3">
Choosing between a student visa and a work visa is a major decision that shapes your future
abroad. Both visa types open unique opportunities, but the right choice depends on your goals,
priorities, and resources. A student visa is designed for individuals who wish to pursue higher
education in a foreign country.
</p>
<div className="row g-4">
<div className="col-lg-6">
<div className="thumb">
<img src="/assets/img/inner-page/news-details/details-2.jpg" alt="img" />
</div>
</div>
<div className="col-lg-6">
<div className="thumb">
<img src="/assets/img/inner-page/news-details/details-3.jpg" alt="img" />
</div>
</div>
</div>
<div className="sideber">
<h5>
This blog really helped me understand the difference between student and work visas. The
explanations were clear and practical.
</h5>
</div>
<p className="mb-3">
It provides access to world-class universities, cultural exposure, and global networking
opportunities. With a student visa, you may also get part-time work rights, which can help support
your expenses and give you valuable international work experience. However, the primary focus
remains on academics and personal growth. On the other hand, a work visa is perfect for those who
want to establish themselves in a career overseas.
</p>
<p>
It provides immediate access to job markets, stable income, and often a pathway to permanent
residency. Work visas are suitable for skilled professionals who are ready to contribute to the
global workforce and achieve long-term career goals. Ultimately, the choice comes down to your
personal aspirations. If education and exploration are your priorities, a student visa is ideal. If
career advancement and stability are your goals, a work visa is the right fit.
</p>
<div className="row tag-share-wrap mt-4 mb-5">
<div className="col-lg-8 col-12">
<div className="tagcloud">
<span>Tags:</span>
<Link href="/blog/work-visa">WorkVisa</Link>
<Link href="/blog/family-visa">FamilyVisa</Link>
<Link href="/blog/student-visa">StudentVisa</Link>
</div>
</div>
<div className="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
<div className="social-share">
<a href="#">
<i className="fab fa-twitter"></i>
</a>
<a href="#">
<i className="fa-brands fa-youtube"></i>
</a>
<a href="#">
<i className="fab fa-linkedin-in"></i>
</a>
<a href="#">
<i className="fab fa-facebook-f"></i>
</a>
</div>
</div>
</div>
<div className="comments-area">
<div className="comments-heading">
<h3>02 Comments</h3>
</div>
<div className="news-single-comment d-flex gap-4 pt-4 pb-0">
<div className="image">
<img src="/assets/img/inner-page/news-details/comment-1.png" alt="image" />
</div>
<div className="content">
<div className="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
<div className="con">
<span>February 10, 2024</span>
<h4>Frank Flores</h4>
</div>
<Link href="/blog/work-visa" className="reply">
Reply
</Link>
</div>
<p className="mt-30 mb-4">
Neque porro est qui dolorem ipsum quia quaed inventor veritatis et quasi architecto var sed
efficitur turpis gilla sed sit amet finibus eros. Lorem Ipsum is simply dummy
</p>
</div>
</div>
<div className="news-single-comment style-2 d-flex gap-4 pt-4 pb-0">
<div className="image">
<img src="/assets/img/inner-page/news-details/comment-2.png" alt="image" />
</div>
<div className="content">
<div className="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
<div className="con">
<h4>Charlie Tushar</h4>
<span>February 10, 2024</span>
</div>
<Link href="/blog/work-visa" className="reply">
Reply
</Link>
</div>
<p className="mt-30 mb-4">
Neque porro est qui dolorem ipsum quia quaed inventor veritatis et quasi architecto var sed
efficitur turpis gilla sed sit amet finibus eros. Lorem Ipsum is simply dummy
</p>
</div>
</div>
<div className="news-single-comment d-flex gap-4 pt-4 pb-4">
<div className="image">
<img src="/assets/img/inner-page/news-details/comment-3.png" alt="image" />
</div>
<div className="content">
<div className="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
<div className="con">
<span>February 10, 2024 </span>
<h4>Fatma Sariqul</h4>
</div>
<Link href="/blog/work-visa" className="reply">
Reply
</Link>
</div>
<p className="mt-30 mb-4">
Neque porro est qui dolorem ipsum quia quaed inventor veritatis et quasi architecto var sed
efficitur turpis gilla sed sit amet finibus eros. Lorem Ipsum is simply dummy
</p>
</div>
</div>
</div>
<h3 className="mb-3">Leave A Comment</h3>
<form
action="contact.php"
id="contact-form1"
method="POST"
className="contact-form-items"
>
<div className="row g-4">
<div className="col-lg-4">
<div className="form-clt">
<span>Your Name</span>
<input type="text" name="name" id="name331" placeholder="Your name" />
</div>
</div>
<div className="col-lg-4">
<div className="form-clt">
<span>Your Email</span>
<input type="text" name="name" id="email11" placeholder="Your email" />
</div>
</div>
<div className="col-lg-4">
<div className="form-clt">
<span>Your Phone</span>
<input type="text" name="name" id="name22" placeholder="Phone Number" />
</div>
</div>
<div className="col-lg-6">
<div className="form-clt">
<span>Your Address</span>
<input type="text" name="name" id="name24" placeholder="Address Now" />
</div>
</div>
<div className="col-lg-6">
<div className="form-clt">
<span>Your Date</span>
<input type="text" name="name" id="name25" placeholder="Date" />
</div>
</div>
<div className="col-lg-12">
<div className="form-clt">
<textarea
name="message"
id="message1"
placeholder="Type your message"
></textarea>
</div>
</div>
<div className="col-lg-12 wow fadeInUp" data-wow-delay=".3s">
<button type="submit" className="theme-btn">
Send Message
<i className="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
);
}

17
app/blog/[slug]/components/NewsDetailsSection.tsx Normal file
View File

@@ -0,0 +1,17 @@
import NewsDetailsContent from "./NewsDetailsContent";
import Sidebar from "@/app/blog/components/Sidebar";
export default function NewsDetailsSection() {
return (
<section className="news-standard-section section-padding fix">
<div className="container">
<div className="news-details-wrapper">
<div className="row g-4">
<NewsDetailsContent />
<Sidebar />
</div>
</div>
</div>
</section>
);
}

17
app/blog/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,17 @@
import Breadcrumb from "@/app/components/Breadcrumb";
import NewsDetailsSection from "./components/NewsDetailsSection";
interface BlogDetailsPageProps {
params: {
slug: string;
};
}
export default function BlogDetailsPage(_props: BlogDetailsPageProps) {
return (
<>
<Breadcrumb title="Blog Details" current="Blog Details" />
<NewsDetailsSection />
</>
);
}

23
app/blog/components/Breadcrumb.tsx
View File

@@ -1,23 +0,0 @@
export default function Breadcrumb() {
return (
<section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)" }}>
<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">Blog Stardard</h1>
<ul className="breadcrumb-list">
<li>
<a href="/">Home</a>
</li>
<li>
<i className="fa-solid fa-chevron-right"></i>
</li>
<li>Blog Stardard</li>
</ul>
</div>
</div>
</section>
);
}

20
app/blog/components/NewsList.tsx
View File

@@ -1,3 +1,5 @@
import Link from "next/link";
export default function NewsList() { export default function NewsList() {
return ( return (
<div className="col-lg-8 col-12"> <div className="col-lg-8 col-12">
@@ -19,14 +21,14 @@ export default function NewsList() {
</li> </li>
</ul> </ul>
<h3> <h3>
<a href="/news-details">How to Avoid Common Mistakes in Visa Applications</a> <Link href="/news-details">How to Avoid Common Mistakes in Visa Applications</Link>
</h3> </h3>
<p> <p>
A business consultant provides expert guidance, strategic planning, and problem-solving support—helping startups avoid mistakes, grow faster, and operate more efficiently from day one. A business consultant provides expert guidance, strategic planning, and problem-solving support—helping startups avoid mistakes, grow faster, and operate more efficiently from day one.
</p> </p>
<a href="/news-details" className="theme-btn"> <Link href="/blog/news-details" className="theme-btn">
VIEW MORE <i className="fa-solid fa-arrow-right"></i> VIEW MORE <i className="fa-solid fa-arrow-right"></i>
</a> </Link>
</div> </div>
</div> </div>
{/* News Post 2 */} {/* News Post 2 */}
@@ -47,14 +49,14 @@ export default function NewsList() {
</li> </li>
</ul> </ul>
<h3> <h3>
<a href="/news-details">The Role of Immigration Consultants in Your Journey</a> <Link href="/news-details">The Role of Immigration Consultants in Your Journey</Link>
</h3> </h3>
<p> <p>
Immigration consultants play a vital role in guiding applicants, simplifying complex processes, offering expert advice, and ensuring successful outcomes for study, work, or permanent residency abroad. Immigration consultants play a vital role in guiding applicants, simplifying complex processes, offering expert advice, and ensuring successful outcomes for study, work, or permanent residency abroad.
</p> </p>
<a href="/news-details" className="theme-btn"> <Link href="/blog/news-details" className="theme-btn">
VIEW MORE <i className="fa-solid fa-arrow-right"></i> VIEW MORE <i className="fa-solid fa-arrow-right"></i>
</a> </Link>
</div> </div>
</div> </div>
{/* News Post 3 */} {/* News Post 3 */}
@@ -75,14 +77,14 @@ export default function NewsList() {
</li> </li>
</ul> </ul>
<h3> <h3>
<a href="/news-details">Latest Immigration Policy Updates You Should Know</a> <Link href="/news-details">Latest Immigration Policy Updates You Should Know</Link>
</h3> </h3>
<p> <p>
Stay informed with the latest immigration policy updates, ensuring you understand new rules, visa requirements, and opportunities that impact your study, work, or migration journey abroad. Stay informed with the latest immigration policy updates, ensuring you understand new rules, visa requirements, and opportunities that impact your study, work, or migration journey abroad.
</p> </p>
<a href="/news-details" className="theme-btn"> <Link href="/blog/news-details" className="theme-btn">
VIEW MORE <i className="fa-solid fa-arrow-right"></i> VIEW MORE <i className="fa-solid fa-arrow-right"></i>
</a> </Link>
</div> </div>
</div> </div>
</div> </div>

32
app/blog/components/Sidebar.tsx
View File

@@ -1,3 +1,5 @@
import Link from "next/link";
export default function Sidebar() { export default function Sidebar() {
return ( return (
<div className="col-lg-4 col-12"> <div className="col-lg-4 col-12">
@@ -16,15 +18,15 @@ export default function Sidebar() {
{/* Categories */} {/* Categories */}
<div className="news-sideber-box"> <div className="news-sideber-box">
<div className="wid-title"> <div className="wid-title">
<h3>Cetegories</h3> <h3>Categories</h3>
</div> </div>
<div className="news-widget-categories"> <div className="news-widget-categories">
<ul> <ul>
<li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Permanent Residency (PR)</a><span>(04)</span></li> <li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Permanent Residency (PR)</Link><span>(04)</span></li>
<li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Immigration Policy Updates</a><span>(09)</span></li> <li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Immigration Policy Updates</Link><span>(09)</span></li>
<li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Scholarships & Grants</a><span>(00)</span></li> <li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Scholarships & Grants</Link><span>(00)</span></li>
<li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Citizenship & Naturalization</a><span>(04)</span></li> <li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Citizenship & Naturalization</Link><span>(04)</span></li>
<li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Visa Interview Preparation</a><span>(01)</span></li> <li><Link href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Visa Interview Preparation</Link><span>(01)</span></li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -40,7 +42,7 @@ export default function Sidebar() {
</div> </div>
<div className="recent-content"> <div className="recent-content">
<h6> <h6>
<a href="/news-details">Top Countries for Higher Education in 2025</a> <Link href="/news-details">Top Countries for Higher Education in 2025</Link>
</h6> </h6>
<ul> <ul>
<li>March 26, 2025</li> <li>March 26, 2025</li>
@@ -53,7 +55,7 @@ export default function Sidebar() {
</div> </div>
<div className="recent-content"> <div className="recent-content">
<h6> <h6>
<a href="/news-details">The Benefits of Hiring a Visa Consultant</a> <Link href="/news-details">The Benefits of Hiring a Visa Consultant</Link>
</h6> </h6>
<ul> <ul>
<li>March 26, 2025</li> <li>March 26, 2025</li>
@@ -66,7 +68,7 @@ export default function Sidebar() {
</div> </div>
<div className="recent-content"> <div className="recent-content">
<h6> <h6>
<a href="/news-details">How to Prepare for Your Immigration Interview</a> <Link href="/news-details">How to Prepare for Your Immigration Interview</Link>
</h6> </h6>
<ul> <ul>
<li>March 26, 2025</li> <li>March 26, 2025</li>
@@ -82,12 +84,12 @@ export default function Sidebar() {
</div> </div>
<div className="news-widget-categories"> <div className="news-widget-categories">
<div className="tagcloud"> <div className="tagcloud">
<a href="/news-details">WorkVisa</a> <Link href="/news-details">WorkVisa</Link>
<a href="/news-details">FamilyVisa</a> <Link href="/news-details">FamilyVisa</Link>
<a href="/news-details">StudentVisa</a> <Link href="/news-details">StudentVisa</Link>
<a href="/news-details">VisaUpdates</a> <Link href="/news-details">VisaUpdates</Link>
<a href="/news-details">TravelVisa</a> <Link href="/news-details">TravelVisa</Link>
<a href="/news-details">StudyAbroad</a> <Link href="/news-details">StudyAbroad</Link>
</div> </div>
</div> </div>
</div> </div>

4
app/blog/page.tsx
View File

@@ -1,10 +1,10 @@
import Breadcrumb from "./components/Breadcrumb"; import Breadcrumb from "@/app/components/Breadcrumb";
import NewsSection from "./components/NewsSection"; import NewsSection from "./components/NewsSection";
export default function NewsPage() { export default function NewsPage() {
return ( return (
<> <>
<Breadcrumb /> <Breadcrumb title="Blog Stardard" current="Blog Stardard" />
<NewsSection /> <NewsSection />
</> </>
); );

7
app/components/BackToTop.tsx Normal file
View File

@@ -0,0 +1,7 @@
export default function BackToTop() {
return (
<button id="back-top" className="back-to-top show">
<i className="fa-regular fa-arrow-up"></i>
</button>
);
}

52
app/components/Breadcrumb.tsx
View File

@@ -1,31 +1,31 @@
interface BreadcrumbProps { interface BreadcrumbProps {
title: string; title: string;
current: string; current: string;
} }
export default function Breadcrumb({ title, current }: BreadcrumbProps) { export default function Breadcrumb({ title, current }: BreadcrumbProps) {
return ( return (
<section <section
className="breadcrumb-wrapper fix bg-cover" className="breadcrumb-wrapper fix bg-cover"
style={{ backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)" }} style={{ backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)" }}
> >
<div className="shape"> <div className="shape">
<img src="/assets/img/inner-page/shape.png" alt="img" /> <img src="/assets/img/inner-page/shape.png" alt="img" />
</div> </div>
<div className="container"> <div className="container">
<div className="page-heading"> <div className="page-heading">
<h1 className="breadcrumb-title">{title}</h1> <h1 className="breadcrumb-title">{title}</h1>
<ul className="breadcrumb-list"> <ul className="breadcrumb-list">
<li> <li>
<a href="/">Home</a> <a href="/">Home</a>
</li> </li>
<li> <li>
<i className="fa-solid fa-chevron-right"></i> <i className="fa-solid fa-chevron-right"></i>
</li> </li>
<li>{current}</li> <li>{current}</li>
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
); );
} }

191
app/components/Footer.tsx
View File

@@ -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>
);
}

114
app/components/Header.tsx
View File

@@ -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>
);
}

49
app/components/Loader.tsx Normal file
View File

@@ -0,0 +1,49 @@
"use client";
import { useEffect, useState } from "react";
export default function Loader() {
const [show, setShow] = useState(true);
useEffect(() => {
const timer = setTimeout(() => setShow(false), 700);
return () => clearTimeout(timer);
}, []);
if (!show) return null;
return (
<div id="preloader" className="preloader">
<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>
);
}

8
app/components/MouseCursor.tsx Normal file
View File

@@ -0,0 +1,8 @@
export default function MouseCursor() {
return (
<>
<div className="mouseCursor cursor-outer"></div>
<div className="mouseCursor cursor-inner"></div>
</>
);
}

71
app/components/about/AboutFeatures.tsx Normal file
View 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
View 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
View 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
View 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
View 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 &amp; Guides</span>
<h2 className="split-text-right split-text-in-right">
Latest Insights &amp; 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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"
}
]
}
}

60
app/layout.tsx
View File

@@ -1,14 +1,17 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import Header from "./components/Header"; import Header from "./components/Header";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import Loader from "./components/Loader";
import BackToTop from "./components/BackToTop";
import MouseCursor from "./components/MouseCursor";
import Script from "next/script"; import Script from "next/script";
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,45 +20,46 @@ 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">
<Loader />
<BackToTop />
<MouseCursor />
<Header /> <Header />
<main className="min-h-screen">{children}</main>
{children}
<Footer /> <Footer />
{/* Nhúng các script JS giống news.html */}
<Script {/* Scripts */}
src="/assets/js/jquery-3.7.1.min.js" <Script src="/assets/js/jquery-3.7.1.min.js" strategy="beforeInteractive" />
strategy="beforeInteractive" <Script src="/assets/js/viewport.jquery.js" strategy="afterInteractive" />
/> <Script src="/assets/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
<Script <Script src="/assets/js/jquery.nice-select.min.js" strategy="afterInteractive" />
src="/assets/js/viewport.jquery.js" <Script src="/assets/js/jquery.waypoints.js" strategy="afterInteractive" />
strategy="afterInteractive"
/>
<Script
src="/assets/js/bootstrap.bundle.min.js"
strategy="afterInteractive"
/>
<Script
src="/assets/js/jquery.nice-select.min.js"
strategy="afterInteractive"
/>
<Script
src="/assets/js/jquery.waypoints.js"
strategy="afterInteractive"
/>
<Script src="/assets/js/odometer.min.js" strategy="afterInteractive" /> <Script src="/assets/js/odometer.min.js" strategy="afterInteractive" />
<Script <Script
src="/assets/js/swiper-bundle.min.js" src="/assets/js/swiper-bundle.min.js"

83
app/page.tsx
View File

@@ -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
View 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
View File

File diff suppressed because it is too large Load Diff

17
public/assets/css/main.css
View File

@@ -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;