پروژه کامل: فرانت متصل به API + داکرایز

- اتصال کامل فرانت به API: همه محتوای سایت (پروژه‌ها، مقالات، خدمات، برند و...) از بک‌اند خوانده می‌شود (SiteProvider + useSite) - فرم تماس و خبرنامه متصل به بک‌اند و تست‌شده در مرورگر - ساختار مونوریپو: frontend/ + backend/ - Dockerfile برای هر دو بخش + docker-compose (PostgreSQL + FastAPI + nginx) - nginx با پروکسی /api — بدون نیاز به CORS در حالت داکر - README کامل فارسی
2026-08-29 13:26:58 +03:30
parent ed14435485
commit ad75f7a7bd
78 changed files with 8242 additions and 133 deletions
@@ -0,0 +1,74 @@
+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 { useSite } from '../../api'
+
+type FaqProps = {
+  hideHeading?: boolean;
+}
+
+export function Faq({ hideHeading = false }: FaqProps) {
+  const { faqs } = useSite()
+  const [open, setOpen] = useState<number | null>(0)
+
+  return (
+    <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
+    
+      <div className={hideHeading ? "mx-auto max-w-4xl px-6 lg:px-10" : "mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10"}>
+        
+        {!hideHeading && (
+          <div className="lg:col-span-4">
+            <SectionHeading
+              title="سوالات متداول"
+              lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."
+            />
+          </div>
+        )}
+
+        <div className={hideHeading ? "" : "lg:col-span-8"}>
+          <ul>
+            {faqs.map((faq, i) => {
+              const isOpen = open === i
+              return (
+                <Reveal key={faq.question} 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.question}
+                      </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.answer}</p>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </li>
+                </Reveal>
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}