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 feat/huy-02022026-ui-header-footer-homepage-aboutpage

Browse Source
This commit is contained in:
Wini_Fy
2026-02-02 17:10:05 +07:00
parent d24b9ed33e fbb64fafb5
commit 82a049a780
12 changed files with 397 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

31
app/components/Breadcrumb.tsx Normal file
View File

@@ -0,0 +1,31 @@
interface BreadcrumbProps {
title: string;
current: string;
}
export default function Breadcrumb({ title, current }: BreadcrumbProps) {
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">{title}</h1>
<ul className="breadcrumb-list">
<li>
<a href="/">Home</a>
</li>
<li>
<i className="fa-solid fa-chevron-right"></i>
</li>
<li>{current}</li>
</ul>
</div>
</div>
</section>
);
}

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

32
app/layout.tsx
View File

@@ -1,13 +1,14 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css";
import Header from "./components/Header";
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";
// Import global styles locally if needed, but linking via head is safer for legacy assets
// import "./globals.css";
import Header from "./components/layout/Header/Header";
import Footer from "./components/layout/Footer/Footer";
import Preloader from "./components/common/Preloader";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Visaway – Immigration & Visa Consulting HTML Template", title: "Visaway – Immigration & Visa Consulting HTML Template",
description: "Visaway – Immigration & Visa Consulting HTML Template", description: "Visaway – Immigration & Visa Consulting HTML Template",
@@ -43,19 +44,10 @@ export default function RootLayout({
{/* Main.css */} {/* Main.css */}
<link rel="stylesheet" href="/assets/css/main.css" /> <link rel="stylesheet" href="/assets/css/main.css" />
</head> </head>
<body className="smooth-scroll-yes"> <body className="smooth-scroll-yes">
<Loader />
<Preloader /> <BackToTop />
<MouseCursor />
{/* Mouse Cursor */}
<div className="mouseCursor cursor-outer"></div>
<div className="mouseCursor cursor-inner"></div>
{/* Back To Top */}
<button id="back-top" className="back-to-top">
<i className="fa-regular fa-arrow-up"></i>
</button>
<Header /> <Header />
{children} {children}