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

- اتصال کامل فرانت به API: همه محتوای سایت (پروژه‌ها، مقالات، خدمات، برند و...) از بک‌اند خوانده می‌شود (SiteProvider + useSite)
- فرم تماس و خبرنامه متصل به بک‌اند و تست‌شده در مرورگر
- ساختار مونوریپو: frontend/ + backend/
- Dockerfile برای هر دو بخش + docker-compose (PostgreSQL + FastAPI + nginx)
- nginx با پروکسی /api — بدون نیاز به CORS در حالت داکر
- README کامل فارسی

frontend/src/components/home/Stats.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useInView } from 'framer-motion';
+import { useSite } from '../../api';
+
+function toFa(n: number) {
+  return n.toLocaleString('fa-IR');
+}
+
+function Counter({ value }: {value: number;}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true, margin: '-60px' });
+  const [display, setDisplay] = useState(0);
+
+  useEffect(() => {
+    if (!inView) return;
+    let frame = 0;
+    const total = 60;
+    const id = window.setInterval(() => {
+      frame += 1;
+      const progress = 1 - Math.pow(1 - frame / total, 3);
+      setDisplay(Math.round(value * progress));
+      if (frame >= total) window.clearInterval(id);
+    }, 20);
+    return () => window.clearInterval(id);
+  }, [inView, value]);
+
+  return <span ref={ref}>{toFa(display)}</span>;
+}
+
+export function Stats() {
+  const { stats } = useSite();
+  return (
+    <section className="bg-char py-16" aria-label="آمار و ارقام">
+      <div className="mx-auto grid max-w-site grid-cols-2 gap-y-12 px-6 lg:grid-cols-4 lg:px-10">
+        {stats.map((stat) =>
+        <div key={stat.label} className="text-center">
+            <p className="text-4xl font-bold text-copper md:text-5xl">
+              <Counter value={stat.value} />
+              {stat.suffix && <span className="mr-1 text-2xl">{stat.suffix}</span>}
+            </p>
+            <p className="mt-3 text-sm font-light text-ivory/55">{stat.label}</p>
+          </div>
+        )}
+      </div>
+    </section>);
+
+}