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

74
app/components/home/Testimonials.tsx Normal file
View File

@@ -0,0 +1,74 @@
interface TestimonialsProps {
data: {
heading: string;
subheading: string;
videoUrl: string;
videoThumbnail: string;
items: {
name: string;
role: string;
country: string;
rating: number;
comment: string;
avatar: string;
}[];
};
}
const Testimonials = ({ data }: TestimonialsProps) => {
return (
<section className="testimonial-section section-padding pb-0 fix">
<div className="container">
<div className="section-title text-center">
<span className="sub-title wow fadeInUp">{data.subheading}</span>
<h2 className="split-text-right split-text-in-right">
{data.heading}
</h2>
</div>
<div className="testimonial-wrapper">
<div className="row g-4">
<div className="col-lg-4">
<div className="testimonia-image tp-clip-anim p-relative">
<img src={data.videoThumbnail} alt="img" className="tp-anim-img" data-animate="true" />
<a href={data.videoUrl} className="video-btn video-popup">
<i className="fa-solid fa-play"></i></a>
<h5>Real stories</h5>
</div>
</div>
<div className="col-lg-8">
<div className="swiper testimonial-slider">
<div className="swiper-wrapper">
{data.items.map((testimonial, index) => (
<div key={index} className="swiper-slide">
<div className="testimonial-box">
<div className="star">
{Array.from({ length: testimonial.rating }).map((_, i) => (
<i key={i} className="fa-solid fa-star"></i>
))}
</div>
<p>
{testimonial.comment}
</p>
<div className="info-item">
<div className="client-image">
<img src={testimonial.avatar} alt="img" />
</div>
<div className="content">
<h5>{testimonial.name}</h5>
<span>{testimonial.country}</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default Testimonials;