پروژه کامل: فرانت متصل به 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,76 @@
+import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ChevronLeftIcon, ChevronRightIcon, QuoteIcon } from 'lucide-react';
+import { SectionHeading } from '../SectionHeading';
+import { useSite } from '../../api';
+
+export function Testimonials() {
+  const { testimonials } = useSite();
+  const [index, setIndex] = useState(0);
+  const item = testimonials[index];
+
+  const go = (dir: number) => {
+    setIndex((prev) => (prev + dir + testimonials.length) % testimonials.length);
+  };
+
+  return (
+    <section className="border-y border-ivory/10 bg-char py-24 lg:py-32" aria-labelledby="testimonials-title">
+      <div className="mx-auto max-w-site px-6 lg:px-10">
+        <SectionHeading title="نظرات مشتریان" align="center" />
+
+        <div className="relative mx-auto mt-14 max-w-3xl text-center">
+          <QuoteIcon className="mx-auto h-8 w-8 text-copper/60" aria-hidden="true" />
+          <AnimatePresence mode="wait">
+            <motion.blockquote
+              key={item.name}
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
+              
+              <p className="mt-8 text-lg font-light leading-[2.4rem] text-ivory/85 md:text-xl">«{item.quote}»</p>
+              <footer className="mt-8">
+                <p className="text-base font-bold text-copper">{item.name}</p>
+                <p className="mt-1 text-sm font-light text-ivory/45">{item.role}</p>
+              </footer>
+            </motion.blockquote>
+          </AnimatePresence>
+
+          <div className="mt-10 flex items-center justify-center gap-4">
+            <button
+              type="button"
+              onClick={() => go(1)}
+              aria-label="نظر قبلی"
+              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
+              
+              <ChevronRightIcon className="h-5 w-5" />
+            </button>
+            <div className="flex gap-2" role="tablist" aria-label="انتخاب نظر">
+              {testimonials.map((t, i) =>
+              <button
+                key={t.name}
+                type="button"
+                role="tab"
+                aria-selected={i === index}
+                aria-label={`نظر ${t.name}`}
+                onClick={() => setIndex(i)}
+                className={`h-1.5 transition-[width,background-color] duration-200 ease-lux ${
+                i === index ? 'w-8 bg-copper' : 'w-3 bg-ivory/25'}`
+                } />
+
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => go(-1)}
+              aria-label="نظر بعدی"
+              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
+              
+              <ChevronLeftIcon className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>);
+
+}