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

feat: implement initial home page with dynamic content, API, and dedicated components.

Browse Source
This commit is contained in:
Wini_Fy
2026-02-05 15:56:06 +07:00
parent 857d250435
commit 11f435378f
8 changed files with 189 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
app/components/home/BlogPreview.tsx
View File

@@ -1,3 +1,4 @@
import { getCmsImageUrl } from '@/utils/image';
import Link from 'next/link';
interface BlogPreviewProps {
@@ -46,40 +47,66 @@ const BlogPreview = ({ data }: BlogPreviewProps) => {
</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>
{data.items.map((item, index) => {
const thumbUrl = getCmsImageUrl(item.thumbnail);
return (
<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={thumbUrl}
alt="img"
style={{
width: '419px',
height: '312px',
objectFit: 'cover'
}}
/>
<span>{item.category}</span>
<div className="news-layer-wrapper">
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${thumbUrl}')`, width: '419px', height: '312px' }}></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">
<div
style={{
width: '32px',
height: '32px',
backgroundColor: '#d1d5db',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '14px',
fontWeight: 'bold',
color: '#374151',
marginRight: '10px'
}}
>
{item.author.name.charAt(0).toUpperCase()}
</div>
<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>
<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>

3
app/components/home/HeroSection.tsx
View File

@@ -1,3 +1,4 @@
import { getCmsImageUrl } from '@/utils/image';
import Link from 'next/link';
interface HeroSectionProps {
@@ -20,7 +21,7 @@ interface HeroSectionProps {
const HeroSection = ({ data }: HeroSectionProps) => {
return (
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${data.backgroundImage}')` }}>
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${getCmsImageUrl(data.backgroundImage)}')` }}>
<div className="left-shape">
<img src="/assets/img/home-1/hero/sape-2.png" alt="img" />
</div>

28
app/components/home/Partners.tsx
View File

@@ -1,11 +1,19 @@
import { getCmsImageUrl } from '@/utils/image';
interface PartnersProps {
data: {
heading: string;
items: {
name: string;
logo: string;
year: string;
}[];
visaConsultancy: {
items: {
name: string;
icon: string;
year: string;
}[];
};
brands: {
items: {
logo: string;
}[];
};
};
}
@@ -16,11 +24,11 @@ const Partners = ({ data }: PartnersProps) => {
<section className="visa-consultency-section section-padding fix">
<div className="container">
<div className="row g-4">
{data.items.slice(0, 4).map((partner, index) => (
{(data.visaConsultancy?.items || []).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" />
<img src={getCmsImageUrl(partner.icon)} alt={partner.name} />
</div>
<h3>{partner.name}</h3>
<h6>{partner.year}</h6>
@@ -38,10 +46,10 @@ const Partners = ({ data }: PartnersProps) => {
<div className="brand-item">
<div className="swiper brand-slider">
<div className="swiper-wrapper">
{data.items.slice(4).map((partner, index) => (
{(data.brands?.items || []).map((brand, index) => (
<div key={index} className="swiper-slide">
<div className="brand-image text-center">
<img src={partner.logo} alt={partner.name} />
<img src={getCmsImageUrl(brand.logo)} alt="brand-logo" />
</div>
</div>
))}