Spaces:
Running
Running
File size: 2,294 Bytes
64b0c84 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { SectionTitle } from '../ui/SectionTitle';
import { faqs } from '../../data/faq';
import { Plus, Minus } from 'lucide-react';
export default function FAQ() {
const [open, setOpen] = useState<number | null>(0);
return (
<section className="py-32 bg-slate-50 border-b border-slate-100">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<SectionTitle
badge="FAQ"
title="Частые вопросы"
/>
<div className="space-y-4">
{faqs.map((faq, i) => (
<div
key={i}
className={`border-2 rounded-[2rem] overflow-hidden transition-all duration-300 ${
open === i
? 'bg-white border-blue-600 shadow-lg shadow-blue-900/5'
: 'bg-white border-slate-100 hover:border-blue-200'
}`}
>
<button
onClick={() => setOpen(open === i ? null : i)}
className="w-full px-8 py-6 flex items-center justify-between text-left outline-none"
>
<span className="text-xl font-bold text-slate-900 pr-8">{faq.question}</span>
<div className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center transition-colors ${open === i ? 'bg-blue-600 text-white' : 'bg-slate-50 text-slate-500'}`}>
{open === i ? <Minus size={20} /> : <Plus size={20} />}
</div>
</button>
<AnimatePresence>
{open === i && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3 }}
>
<div className="px-8 pb-8 pt-2 text-slate-600 font-medium leading-relaxed text-lg border-t border-slate-100 mt-2">
{faq.answer}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
))}
</div>
</div>
</section>
);
}
|