forked from UKSOURCE/hailearning.edu.vn
84 lines
3.9 KiB
TypeScript
84 lines
3.9 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
interface FAQSectionProps {
|
|
data: {
|
|
heading: string;
|
|
subheading: string;
|
|
description: string;
|
|
ctaButton: {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
items: {
|
|
question: string;
|
|
answer: string;
|
|
}[];
|
|
};
|
|
}
|
|
|
|
const FAQSection = ({ data }: FAQSectionProps) => {
|
|
return (
|
|
<section className="faq-section section-padding fix">
|
|
<div className="container">
|
|
<div className="faq-wrapper">
|
|
<div className="row g-4">
|
|
<div className="col-lg-5">
|
|
<div className="faq-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">
|
|
{data.heading}
|
|
</h2>
|
|
</div>
|
|
<p className="text">
|
|
{data.description}
|
|
</p>
|
|
<Link href={data.ctaButton.href} className="theme-btn">
|
|
{data.ctaButton.label}
|
|
<i className="fa-solid fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-7">
|
|
<div className="faq-items">
|
|
<div className="accordion" id="accordionExample">
|
|
{data.items.map((item, index) => (
|
|
<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 collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target={`#collapse${index}`}
|
|
aria-expanded="false"
|
|
aria-controls={`collapse${index}`}
|
|
>
|
|
{item.question}
|
|
</button>
|
|
</h5>
|
|
<div
|
|
id={`collapse${index}`}
|
|
className="accordion-collapse collapse"
|
|
aria-labelledby={`heading${index}`}
|
|
data-bs-parent="#accordionExample"
|
|
>
|
|
<div className="accordion-body">
|
|
<p>
|
|
{item.answer}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FAQSection;
|