122 lines
4.5 KiB
JavaScript
122 lines
4.5 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { HelpCircle, ChevronDown, Search } from 'lucide-react';
|
|
|
|
export default function FAQPage() {
|
|
const { t } = useTranslation();
|
|
const [openIndex, setOpenIndex] = useState(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
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') },
|
|
{ question: t('faq.q5'), answer: t('faq.a5') },
|
|
{ question: t('faq.q6'), answer: t('faq.a6') },
|
|
{ question: t('faq.q7'), answer: t('faq.a7') },
|
|
{ question: t('faq.q8'), answer: t('faq.a8') },
|
|
];
|
|
|
|
const filteredFaqs = faqs.filter(
|
|
(faq) =>
|
|
faq.question.includes(searchTerm) ||
|
|
faq.answer.includes(searchTerm)
|
|
);
|
|
|
|
const toggleFAQ = (index) => {
|
|
setOpenIndex(openIndex === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white py-12" dir="rtl">
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<div className="w-20 h-20 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-amber-100">
|
|
<HelpCircle className="w-10 h-10 text-amber-600" />
|
|
</div>
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-4">{t('faq.pageTitle')}</h1>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
{t('faq.pageDescription')}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="relative mb-8"
|
|
>
|
|
<Search className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder={t('faq.searchPlaceholder')}
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pr-12 pl-4 py-4 bg-white border border-gray-200 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400"
|
|
/>
|
|
</motion.div>
|
|
|
|
<div className="space-y-4">
|
|
{filteredFaqs.map((faq, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
|
|
>
|
|
<button
|
|
onClick={() => toggleFAQ(index)}
|
|
className="w-full flex items-center justify-between p-5 text-right"
|
|
>
|
|
<span className="text-lg font-semibold text-gray-900 flex-1">
|
|
{faq.question}
|
|
</span>
|
|
<motion.div
|
|
animate={{ rotate: openIndex === index ? 180 : 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<ChevronDown className="w-5 h-5 text-gray-500 shrink-0" />
|
|
</motion.div>
|
|
</button>
|
|
<AnimatePresence>
|
|
{openIndex === index && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<p className="px-5 pb-5 text-gray-600 leading-relaxed border-t border-gray-100 pt-4">
|
|
{faq.answer}
|
|
</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{filteredFaqs.length === 0 && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="text-center py-12"
|
|
>
|
|
<p className="text-gray-500 text-lg">{t('faq.noResults')}</p>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|