116 lines
4.0 KiB
TypeScript
116 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Card } from '@/components/ui/Card';
|
|
|
|
interface FAQProps {
|
|
t: any;
|
|
}
|
|
|
|
export const FAQ: React.FC<FAQProps> = ({ t }) => {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|
|
|
const defaultQuestions = [
|
|
'account',
|
|
'static_vs_dynamic',
|
|
'forever',
|
|
'file_type',
|
|
'analytics',
|
|
];
|
|
|
|
const questions = t?.faq?.questions
|
|
? Array.isArray(t.faq.questions)
|
|
? t.faq.questions
|
|
: Object.keys(t.faq.questions).length > 5
|
|
? Object.keys(t.faq.questions).slice(0, 12)
|
|
: defaultQuestions
|
|
: defaultQuestions;
|
|
|
|
return (
|
|
<section id="faq" className="py-16 bg-gray-50">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
|
{t.faq.title}
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="max-w-3xl mx-auto space-y-4">
|
|
{questions.map((key: string, index: number) => (
|
|
<motion.div
|
|
key={key}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
>
|
|
<Card
|
|
className="cursor-pointer border-gray-200 hover:border-gray-300 transition-colors"
|
|
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
|
>
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900">
|
|
{t.faq.questions[key]?.question ||
|
|
t.faq.questions[key]?.question ||
|
|
key}
|
|
</h3>
|
|
<svg
|
|
className={`w-5 h-5 text-gray-500 transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<AnimatePresence>
|
|
{openIndex === index && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0, marginTop: 0 }}
|
|
animate={{ height: 'auto', opacity: 1, marginTop: 16 }}
|
|
exit={{ height: 0, opacity: 0, marginTop: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<div className="text-gray-600">
|
|
{t.faq.questions[key]?.answer ||
|
|
t.faq.questions[key]?.answer ||
|
|
''}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="text-center mt-8">
|
|
<a
|
|
href="/faq"
|
|
className="text-primary-600 hover:text-primary-700 font-medium"
|
|
>
|
|
View All Questions →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|