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

build ui header, footer, home page, about page

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-02 16:16:11 +07:00
parent 8d105dda9c
commit d24b9ed33e
38 changed files with 4336 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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