forked from UKSOURCE/hailearning.edu.vn
feat: Create FE home page and about page
This commit is contained in:
Đỗ Minh Nhật
@@ -1,141 +1,46 @@
|
||||
import { getCmsImageUrl } from '@/utils/image';
|
||||
import Link from 'next/link';
|
||||
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;
|
||||
}
|
||||
const HeroSection = () => {
|
||||
return (
|
||||
<section id="hero-banner" className="hero-home">
|
||||
<div className="hero-home__overlay">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
|
||||
alt="Paris University Campus"
|
||||
className="hero-home__bg-img"
|
||||
/>
|
||||
<div className="hero-home__gradient" />
|
||||
</div>
|
||||
|
||||
interface HeroSectionProps {
|
||||
data: {
|
||||
backgroundImage: 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;
|
||||
};
|
||||
}
|
||||
<div className="hero-home__container">
|
||||
<div className="hero-home__content">
|
||||
<div className="hero-home__badge">
|
||||
<span className="hero-home__badge-dot" />
|
||||
<span className="hero-home__badge-text">Leading Research Institution</span>
|
||||
</div>
|
||||
|
||||
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 || '',
|
||||
}];
|
||||
<h1 className="hero-home__title">
|
||||
Advancing Knowledge in the Heart of Paris
|
||||
</h1>
|
||||
|
||||
const firstSlide = slides[0];
|
||||
<p className="hero-home__desc">
|
||||
A premier liberal arts and research university dedicated to fostering
|
||||
interdisciplinary innovation, global partnerships, and academic excellence.
|
||||
</p>
|
||||
|
||||
return (
|
||||
<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>
|
||||
<div className="hero-shape">
|
||||
<img src="/assets/img/home-1/hero/shape.png" alt="img" />
|
||||
</div>
|
||||
<div className="top-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-3.png" alt="img" />
|
||||
</div>
|
||||
<div className="right-shape">
|
||||
<img src="/assets/img/home-1/hero/shape-4.png" alt="img" />
|
||||
</div>
|
||||
<div className="pagi-item">
|
||||
<div className="dot-number">
|
||||
<span className="dot-num">
|
||||
<span>03</span>
|
||||
</span>
|
||||
<span className="dot-num">
|
||||
<span>05</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<div className="swiper hero-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{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 className="col-lg-6">
|
||||
<div className="swiper image-slider">
|
||||
<div className="swiper-wrapper">
|
||||
{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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
<div className="hero-home__actions">
|
||||
<button className="hero-home__btn hero-home__btn--primary">
|
||||
Explore Research
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</button>
|
||||
<button className="hero-home__btn hero-home__btn--secondary">
|
||||
Partner With Us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
|
||||
Reference in New Issue
Block a user