forked from UKSOURCE/hailearning.edu.vn
feat: implement initial home page with dynamic content, API, and dedicated components.
This commit is contained in:
Wini_Fy
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
"subheading": "Did You Know",
|
||||
"items": [
|
||||
{
|
||||
"value": "1000",
|
||||
"value": "1",
|
||||
"suffix": "k+",
|
||||
"label": "Students Guided",
|
||||
"description": "Successfully assisted over a thousand students worldwide."
|
||||
@@ -238,54 +238,39 @@
|
||||
]
|
||||
},
|
||||
"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"
|
||||
}
|
||||
]
|
||||
"visaConsultancy": {
|
||||
"items": [
|
||||
{
|
||||
"name": "Best Visa Consultancy",
|
||||
"icon": "/assets/img/home-1/feature/icon-1.png",
|
||||
"year": "2025"
|
||||
},
|
||||
{
|
||||
"name": "Visa Success Award",
|
||||
"icon": "/assets/img/home-1/feature/icon-2.png",
|
||||
"year": "2025"
|
||||
},
|
||||
{
|
||||
"name": "Innovation Award",
|
||||
"icon": "/assets/img/home-1/feature/icon-3.png",
|
||||
"year": "2025"
|
||||
},
|
||||
{
|
||||
"name": "Global Education Partner",
|
||||
"icon": "/assets/img/home-1/feature/icon-4.png",
|
||||
"year": "2025"
|
||||
}
|
||||
]
|
||||
},
|
||||
"brands": {
|
||||
"items": [
|
||||
{ "logo": "/assets/img/home-1/brand/01.png" },
|
||||
{ "logo": "/assets/img/home-1/brand/02.png" },
|
||||
{ "logo": "/assets/img/home-1/brand/03.png" },
|
||||
{ "logo": "/assets/img/home-1/brand/04.png" },
|
||||
{ "logo": "/assets/img/home-1/brand/05.png" }
|
||||
]
|
||||
}
|
||||
},
|
||||
"blogPreview": {
|
||||
"heading": "Latest Insights & Updates",
|
||||
|
||||
45
app/page.tsx
45
app/page.tsx
@@ -8,21 +8,42 @@ 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';
|
||||
import localHomeData from './home.json';
|
||||
import { fetchHomeData } from '@/api';
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
|
||||
export default async function Home() {
|
||||
// Fetch home data (blog aggregation is now handled by the backend)
|
||||
const apiHomeData = await fetchHomeData();
|
||||
|
||||
// Use API home data if available, otherwise fallback to local JSON
|
||||
const data = JSON.parse(JSON.stringify(apiHomeData || localHomeData));
|
||||
|
||||
// Process Hero Image URL
|
||||
if (data.hero?.backgroundImage) {
|
||||
data.hero.backgroundImage = getCmsImageUrl(data.hero.backgroundImage);
|
||||
}
|
||||
|
||||
// Process blog images from CMS (thumbnail normalization)
|
||||
if (data.blogPreview?.items) {
|
||||
data.blogPreview.items = data.blogPreview.items.map((item: any) => ({
|
||||
...item,
|
||||
thumbnail: getCmsImageUrl(item.thumbnail) || '/assets/img/home-1/news/01.jpg'
|
||||
}));
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<HeroSection data={homeData.hero} />
|
||||
<WhyChooseUs data={homeData.whyChooseUs} />
|
||||
<VisaSolutions data={homeData.visaSolutions} />
|
||||
<VisaCountries data={homeData.visaCountries} />
|
||||
<Testimonials data={homeData.testimonials} />
|
||||
<VideoGallery data={homeData.videoGallery} />
|
||||
<FAQSection data={homeData.faq} />
|
||||
<Achievements data={homeData.achievements} />
|
||||
<Partners data={homeData.partners} />
|
||||
<BlogPreview data={homeData.blogPreview} />
|
||||
<HeroSection data={data.hero} />
|
||||
<WhyChooseUs data={data.whyChooseUs} />
|
||||
<VisaSolutions data={data.visaSolutions} />
|
||||
<VisaCountries data={data.visaCountries} />
|
||||
<Testimonials data={data.testimonials} />
|
||||
<VideoGallery data={data.videoGallery} />
|
||||
<FAQSection data={data.faq} />
|
||||
<Achievements data={data.achievements} />
|
||||
<Partners data={data.partners} />
|
||||
<BlogPreview data={data.blogPreview} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user