66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
"use client";
|
||
import { Reveal } from "@/components/landing-page/Reveal";
|
||
import React, { useState } from "react";
|
||
import { useTranslations } from "next-intl";
|
||
|
||
interface FAQItem {
|
||
question: string;
|
||
answer: string;
|
||
}
|
||
|
||
const FAQS: React.FC = () => {
|
||
const t = useTranslations("LandingPage");
|
||
|
||
const faqs: FAQItem[] = [
|
||
{
|
||
question: t("question1", { defaultValue: "Question1" }),
|
||
answer: t("answer1", { defaultValue: "Answer1" }),
|
||
},
|
||
{
|
||
question: t("question2", { defaultValue: "Question2" }),
|
||
answer: t("answer2", { defaultValue: "Answer2" }),
|
||
},
|
||
{
|
||
question: t("question3", { defaultValue: "Question3" }),
|
||
answer: t("answer3", { defaultValue: "Answer3" }),
|
||
},
|
||
{
|
||
question: t("question4", { defaultValue: "Question4" }),
|
||
answer: t("answer4", { defaultValue: "Answer4" }),
|
||
},
|
||
];
|
||
|
||
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||
|
||
const toggleFAQ = (index: number) => {
|
||
setOpenIndex(openIndex === index ? null : index);
|
||
};
|
||
|
||
return (
|
||
<div className="max-w-3xl mx-auto h-screen p-6 mt-20">
|
||
{/* Header */}
|
||
<Reveal>
|
||
<div className="flex items-center justify-center mb-6">
|
||
<img src="/assets/icons-faqs.png" alt="Faqs" />
|
||
<h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800 dark:text-white">Frequently Asked Questions</h2>
|
||
</div>
|
||
|
||
{/* FAQS Items */}
|
||
<div className="space-y-4">
|
||
{faqs?.map((faq, index) => (
|
||
<div key={index} className="border-b border-gray-300 pb-2 cursor-pointer">
|
||
<div className="flex justify-between items-center" onClick={() => toggleFAQ(index)}>
|
||
<h3 className="text-sm font-semibold text-gray-800 dark:text-white">{faq.question}</h3>
|
||
<span className="text-gray-500 dark:text-white text-xl">{openIndex === index ? "−" : "+"}</span>
|
||
</div>
|
||
{openIndex === index && <p className="text-gray-600 dark:text-white mt-2 text-sm">{faq.answer}</p>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default FAQS;
|