58 lines
2 KiB
TypeScript
58 lines
2 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { ChevronDown, ChevronUp } from 'lucide-react';
|
||
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
||
|
|
|
||
|
|
const FAQ: React.FC = () => {
|
||
|
|
const { t } = useLanguage();
|
||
|
|
|
||
|
|
const faqs = [
|
||
|
|
{ question: t.faq.q1, answer: t.faq.a1 },
|
||
|
|
{ question: t.faq.q2, answer: t.faq.a2 },
|
||
|
|
{ question: t.faq.q3, answer: t.faq.a3 },
|
||
|
|
{ question: t.faq.q4, answer: t.faq.a4 }
|
||
|
|
];
|
||
|
|
|
||
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="faq" className="py-20 bg-gray-50">
|
||
|
|
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="text-center mb-12">
|
||
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">{t.faq.title}</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
{faqs.map((faq, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="bg-white rounded-xl border border-gray-200 overflow-hidden transition-all duration-200 hover:border-brand-200"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
className="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none"
|
||
|
|
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
||
|
|
>
|
||
|
|
<span className="font-semibold text-gray-900">{faq.question}</span>
|
||
|
|
{openIndex === index ? (
|
||
|
|
<ChevronUp className="text-brand-500" size={20} />
|
||
|
|
) : (
|
||
|
|
<ChevronDown className="text-gray-400" size={20} />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className={`px-6 overflow-hidden transition-all duration-300 ease-in-out ${openIndex === index ? 'max-h-40 pb-6 opacity-100' : 'max-h-0 opacity-0'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<p className="text-gray-600 leading-relaxed text-sm">
|
||
|
|
{faq.answer}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FAQ;
|