Initial commit

2026-08-16 23:34:47 +03:30
commit 05ea45852e
53 changed files with 7867 additions and 0 deletions
@@ -0,0 +1,65 @@
+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>);
+
+}