forked from UKSOURCE/hailearning.edu.vn
feat: Refactor home page components
This commit is contained in:
Wini_Fy
@@ -46,11 +46,11 @@ const FAQSection = ({ data }: FAQSectionProps) => {
|
||||
<div key={index} className="accordion-item wow fadeInUp" data-wow-delay={`.${(index + 1) * 2}s`}>
|
||||
<h5 className="accordion-header" id={`heading${index}`}>
|
||||
<button
|
||||
className={`accordion-button ${index !== 1 ? 'collapsed' : ''}`}
|
||||
className="accordion-button collapsed"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target={`#collapse${index}`}
|
||||
aria-expanded={index === 1 ? 'true' : 'false'}
|
||||
aria-expanded="false"
|
||||
aria-controls={`collapse${index}`}
|
||||
>
|
||||
{item.question}
|
||||
@@ -58,7 +58,7 @@ const FAQSection = ({ data }: FAQSectionProps) => {
|
||||
</h5>
|
||||
<div
|
||||
id={`collapse${index}`}
|
||||
className={`accordion-collapse collapse ${index === 1 ? 'show' : ''}`}
|
||||
className="accordion-collapse collapse"
|
||||
aria-labelledby={`heading${index}`}
|
||||
data-bs-parent="#accordionExample"
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,8 +3,11 @@ import Link from 'next/link';
|
||||
interface WhyChooseUsProps {
|
||||
data: {
|
||||
heading: string;
|
||||
highlightWord?: string;
|
||||
subheading: string;
|
||||
description: string;
|
||||
mainImage?: string;
|
||||
secondaryImage?: string;
|
||||
items: {
|
||||
icon: string;
|
||||
title: string;
|
||||
@@ -19,6 +22,25 @@ interface WhyChooseUsProps {
|
||||
}
|
||||
|
||||
const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
|
||||
const highlight = data.highlightWord?.trim();
|
||||
|
||||
let headingContent: React.ReactNode = data.heading;
|
||||
|
||||
if (highlight) {
|
||||
const index = data.heading.indexOf(highlight);
|
||||
if (index !== -1) {
|
||||
const before = data.heading.slice(0, index);
|
||||
const after = data.heading.slice(index + highlight.length);
|
||||
headingContent = (
|
||||
<>
|
||||
{before}
|
||||
<span>{highlight}</span>
|
||||
{after}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="about-section section-padding fix pb-0">
|
||||
<div className="top-shape">
|
||||
@@ -29,9 +51,9 @@ const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
|
||||
<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" />
|
||||
<img src={data.mainImage || "/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" />
|
||||
<img src={data.secondaryImage || "/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" />
|
||||
@@ -49,7 +71,7 @@ const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
|
||||
<div className="section-title mb-0">
|
||||
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
||||
<h2 className="split-text-right split-text-in-right">
|
||||
{data.heading.split(' Dreams ')[0]} <span>Dreams</span> {data.heading.split(' Dreams ')[1]}
|
||||
{headingContent}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
||||
|
||||
Reference in New Issue
Block a user