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

83
app/components/home/FAQSection.tsx Normal file
View File

@@ -0,0 +1,83 @@
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 ${index !== 1 ? 'collapsed' : ''}`}
type="button"
data-bs-toggle="collapse"
data-bs-target={`#collapse${index}`}
aria-expanded={index === 1 ? 'true' : 'false'}
aria-controls={`collapse${index}`}
>
{item.question}
</button>
</h5>
<div
id={`collapse${index}`}
className={`accordion-collapse collapse ${index === 1 ? 'show' : ''}`}
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;