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

build ui header, footer, home page, about page

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-02 16:16:11 +07:00
parent 8d105dda9c
commit d24b9ed33e
38 changed files with 4336 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/components/home/HeroSection.tsx Normal file
View File

@@ -0,0 +1,100 @@
import Link from 'next/link';
interface HeroSectionProps {
data: {
title: string;
subtitle: string;
description: string;
primaryButton: {
label: string;
href: string;
};
secondaryButton: {
label: string;
href: string;
};
backgroundImage: string;
videoUrl: string;
};
}
const HeroSection = ({ data }: HeroSectionProps) => {
return (
<section className="hero-section hero-1 fix bg-cover" style={{ backgroundImage: `url('${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">
<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>
</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" />
</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>
</div>
</div>
</section>
);
};
export default HeroSection;