65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { PlusIcon } from 'lucide-react';
|
|
import { Reveal } from '../Reveal';
|
|
import { SectionHeading } from '../SectionHeading';
|
|
import { FAQS } from '../../data/site';
|
|
|
|
export function Faq() {
|
|
const [open, setOpen] = useState<number | null>(0);
|
|
|
|
return (
|
|
<section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
|
|
<div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
|
|
<div className="lg:col-span-4">
|
|
<SectionHeading
|
|
title="سوالات متداول"
|
|
lead="پاسخ کوتاه به پرتکرارترین پرسشهای سرمایهگذاران و خریداران." />
|
|
|
|
</div>
|
|
|
|
<div className="lg:col-span-8">
|
|
<ul>
|
|
{FAQS.map((faq, i) => {
|
|
const isOpen = open === i;
|
|
return (
|
|
<Reveal key={faq.q} delay={0.04 * i}>
|
|
<li className="border-b border-ivory/10">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(isOpen ? null : i)}
|
|
aria-expanded={isOpen}
|
|
className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper">
|
|
|
|
<span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
|
|
{faq.q}
|
|
</span>
|
|
<PlusIcon
|
|
className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
|
|
isOpen ? 'rotate-45' : ''}`
|
|
} />
|
|
|
|
</button>
|
|
<AnimatePresence initial={false}>
|
|
{isOpen &&
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
|
|
className="overflow-hidden">
|
|
|
|
<p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.a}</p>
|
|
</motion.div>
|
|
}
|
|
</AnimatePresence>
|
|
</li>
|
|
</Reveal>);
|
|
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>);
|
|
|
|
} |