120 lines
3.5 KiB
TypeScript
120 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
interface FaqItem {
|
|
questionKey: string;
|
|
answerKey: string;
|
|
}
|
|
|
|
interface FaqProps {
|
|
items?: FaqItem[];
|
|
}
|
|
|
|
export function FAQ({ items }: FaqProps) {
|
|
const t = useTranslations();
|
|
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
|
|
|
const defaultItems: FaqItem[] = [
|
|
{
|
|
questionKey: "faq.items.0.question",
|
|
answerKey: "faq.items.0.answer",
|
|
},
|
|
{
|
|
questionKey: "faq.items.1.question",
|
|
answerKey: "faq.items.1.answer",
|
|
},
|
|
{
|
|
questionKey: "faq.items.2.question",
|
|
answerKey: "faq.items.2.answer",
|
|
},
|
|
];
|
|
|
|
const faqItems = items || defaultItems;
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.1 },
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 10 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
return (
|
|
<section id="faq" className="py-20 bg-white">
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{t("faq.title")}
|
|
</h2>
|
|
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
|
</motion.div>
|
|
|
|
{/* FAQ Items */}
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="space-y-4"
|
|
>
|
|
{faqItems.map((item, idx) => (
|
|
<motion.div key={idx} variants={itemVariants}>
|
|
<motion.button
|
|
onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
|
|
className="w-full bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg p-6 text-left"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900 flex-1">
|
|
{t(item.questionKey)}
|
|
</h3>
|
|
<motion.div
|
|
animate={{ rotate: openIndex === idx ? 180 : 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="ml-4 shrink-0"
|
|
>
|
|
<ChevronDown className="text-blue-600" size={24} />
|
|
</motion.div>
|
|
</div>
|
|
</motion.button>
|
|
|
|
<AnimatePresence>
|
|
{openIndex === idx && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "auto" }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<div className="bg-blue-50 p-6 rounded-b-lg border-t border-gray-200">
|
|
<p className="text-gray-700 leading-relaxed">
|
|
{t(item.answerKey)}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|