83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { useLanguage } from "@/contexts/language-context";
|
|
|
|
export default function FAQ() {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
const {t} = useLanguage();
|
|
|
|
const faqs = [
|
|
{
|
|
question: t.faq.list[0].q,
|
|
answer:t.faq.list[0].a,
|
|
},
|
|
{
|
|
question: t.faq.list[1].q,
|
|
answer:t.faq.list[1].a,
|
|
},
|
|
{
|
|
question: t.faq.list[2].q,
|
|
answer:t.faq.list[2].a,
|
|
},
|
|
{
|
|
question: t.faq.list[3].q,
|
|
answer:t.faq.list[3].a,
|
|
},
|
|
{
|
|
question: t.faq.list[4].q,
|
|
answer:t.faq.list[4].a,
|
|
},
|
|
{
|
|
question: t.faq.list[5].q,
|
|
answer:t.faq.list[5].a,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="faq" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8 bg-muted">
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
|
|
{t.faq.title}
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
{t.faq.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{faqs.map((faq, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-background border border-border rounded-lg overflow-hidden hover:border-primary/50 transition-colors"
|
|
>
|
|
<button
|
|
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
|
className="w-full px-6 py-4 flex items-center justify-between hover:bg-muted/50 transition-colors"
|
|
>
|
|
<span className="text-left font-semibold text-foreground">
|
|
{faq.question}
|
|
</span>
|
|
<ChevronDown
|
|
size={20}
|
|
className={`flex-shrink-0 text-primary transition-transform duration-300 ${
|
|
openIndex === index ? "rotate-180" : ""
|
|
}`}
|
|
/>
|
|
</button>
|
|
|
|
{openIndex === index && (
|
|
<div className="px-6 py-4 border-t border-border bg-muted/30">
|
|
<p className="text-muted-foreground">{faq.answer}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|