99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
"use client";
|
||
import { Reveal } from "@/components/landing-page/Reveal";
|
||
import React, { useState } from "react";
|
||
import { useTranslations } from "next-intl";
|
||
import Image from "next/image";
|
||
|
||
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">
|
||
{/* <Image
|
||
width={54}
|
||
height={54}
|
||
src="/assets/icons-faqs.png"
|
||
alt="Faqs"
|
||
/> */}
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="50"
|
||
height="50"
|
||
viewBox="0 0 26 26"
|
||
>
|
||
<path
|
||
fill="#bc0006"
|
||
d="M13 0c-1.7 0-3 1.3-3 3v6c0 1.7 1.3 3 3 3h6l4 4v-4c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zm4.188 3h1.718l1.688 6h-1.5l-.407-1.5h-1.5L16.813 9H15.5zM18 4c-.1.4-.212.888-.313 1.188l-.28 1.312h1.187l-.282-1.313C18.113 4.888 18 4.4 18 4M3 10c-1.7 0-3 1.3-3 3v6c0 1.7 1.3 3 3 3v4l4-4h6c1.7 0 3-1.3 3-3v-6h-3c-1.9 0-3.406-1.3-3.906-3zm4.594 2.906c1.7 0 2.5 1.4 2.5 3c0 1.4-.481 2.288-1.281 2.688c.4.2.874.306 1.374.406l-.374 1c-.7-.2-1.426-.512-2.126-.813c-.1-.1-.275-.093-.375-.093C6.112 18.994 5 18 5 16c0-1.7.994-3.094 2.594-3.094m0 1.094c-.8 0-1.188.9-1.188 2c0 1.2.388 2 1.188 2s1.218-.9 1.218-2s-.418-2-1.218-2"
|
||
/>
|
||
</svg>
|
||
<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;
|