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

feat: Refactor home page components

Browse Source
This commit is contained in:
Wini_Fy
2026-02-05 21:20:12 +07:00
parent 2a475901cc
commit 03263d5fb1
6 changed files with 149 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,60 @@
import { getCmsImageUrl } from '@/utils/image';
import Link from 'next/link';
interface HeroSlide {
title: string;
subtitle: string;
description: string;
primaryButton: {
label: string;
href: string;
};
secondaryButton: {
label: string;
href: string;
};
heroImage?: string;
videoUrl: string;
}
interface HeroSectionProps {
data: {
title: string;
subtitle: string;
description: string;
primaryButton: {
label: string;
href: string;
};
secondaryButton: {
label: string;
href: string;
};
backgroundImage: string;
videoUrl: string;
// Optional multi-slide support from CMS
slides?: HeroSlide[];
// Legacy single-slide fields (fallback)
title?: string;
subtitle?: string;
description?: string;
primaryButton?: {
label: string;
href: string;
};
secondaryButton?: {
label: string;
href: string;
};
heroImage?: string;
videoUrl?: string;
};
}
const HeroSection = ({ data }: HeroSectionProps) => {
const slides: HeroSlide[] =
(data.slides && data.slides.length > 0)
? data.slides
: [{
title: data.title || '',
subtitle: data.subtitle || '',
description: data.description || '',
primaryButton: data.primaryButton || { label: '', href: '#' },
secondaryButton: data.secondaryButton || { label: '', href: '#' },
heroImage: data.heroImage,
videoUrl: data.videoUrl || '',
}];
const firstSlide = slides[0];
return (
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${getCmsImageUrl(data.backgroundImage)}')` }}>
<div className="left-shape">
@@ -49,46 +84,51 @@ const HeroSection = ({ data }: HeroSectionProps) => {
<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>
{slides.map((slide, index) => (
<div className="swiper-slide" key={index}>
<div className="hero-content">
<h6>{slide.subtitle}</h6>
<h1>
{slide.title}
{slide.videoUrl && (
<a href={slide.videoUrl} className="video-btn video-popup">
<i className="fa-solid fa-play"></i>
</a>
)}
</h1>
<p>
{slide.description}
</p>
<div className="hero-button">
{slide.primaryButton?.href && (
<Link href={slide.primaryButton.href} className="theme-btn">
{slide.primaryButton.label}
<i className="fa-solid fa-arrow-right"></i>
</Link>
)}
{slide.secondaryButton?.href && (
<Link href={slide.secondaryButton.href} className="theme-btn style-2">
{slide.secondaryButton.label}
<i className="fa-solid fa-arrow-right"></i>
</Link>
)}
</div>
</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" />
{slides.map((slide, index) => (
<div className="swiper-slide" key={index}>
<div className="hero-image">
<img src={slide.heroImage || firstSlide.heroImage || "/assets/img/home-1/hero/man.png"} alt="img" />
</div>
</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>