forked from UKSOURCE/hailearning.edu.vn
110 lines
4.7 KiB
TypeScript
110 lines
4.7 KiB
TypeScript
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;
|
|
description: string;
|
|
}[];
|
|
features: string[];
|
|
ctaButton: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
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">
|
|
<img src="/assets/img/home-1/about/globe.png" alt="img" />
|
|
</div>
|
|
<div className="container">
|
|
<div className="about-wrapper">
|
|
<div className="row g-4">
|
|
<div className="col-lg-6">
|
|
<div className="about-image">
|
|
<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={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" />
|
|
</div>
|
|
<div className="plane-shape float-bob-y">
|
|
<img src="/assets/img/home-1/about/plane.png" alt="img" />
|
|
</div>
|
|
<div className="top-shape float-bob-y">
|
|
<img src="/assets/img/home-1/about/shape.png" alt="img" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="about-content">
|
|
<div className="section-title mb-0">
|
|
<span className="sub-title wow fadeInUp">{data.subheading}</span>
|
|
<h2 className="split-text-right split-text-in-right">
|
|
{headingContent}
|
|
</h2>
|
|
</div>
|
|
<p className="text wow fadeInUp" data-wow-delay=".3s">
|
|
{data.description}
|
|
</p>
|
|
<div className="about-item wow fadeInUp" data-wow-delay=".5s">
|
|
{data.items.map((item, index) => (
|
|
<div key={index} className="content">
|
|
<span><img src={item.icon} alt="" /> {item.title}-</span>
|
|
<p>{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ul className="list wow fadeInUp" data-wow-delay=".3s">
|
|
{data.features.map((feature, index) => (
|
|
<li key={index}>
|
|
<i className="fa-solid fa-chevrons-right"></i>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Link href={data.ctaButton.href} className="theme-btn wow fadeInUp" data-wow-delay=".5s">
|
|
{data.ctaButton.label}
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default WhyChooseUs;
|