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

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

frontend/src/components/home/Articles.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ArrowLeftIcon } from 'lucide-react';
+import { Reveal } from '../Reveal';
+import { ButtonLink } from '../Button';
+import { ArticleCard } from '../ArticleCard';
+import { useSite } from '../../api';
+
+export function Articles() {
+  const { articles } = useSite();
+  return (
+    <section className="bg-char py-24 lg:py-32" aria-labelledby="articles-title">
+      <div className="mx-auto max-w-site px-6 lg:px-10">
+        <Reveal className="max-w-2xl text-right">
+          <p className="text-sm font-light text-copper">وبلاگ</p>
+          <h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
+            آخرین مقالات
+          </h2>
+          <p className="mt-5 text-base font-light leading-9 text-ivory/60">
+            یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری آرامش پلازا درباره آنچه در کارگاه و بازار می‌گذرد.
+          </p>
+          <div className="mt-6 h-px w-24 bg-copper/70" />
+        </Reveal>
+
+        <div className="mt-14 grid gap-6 lg:grid-cols-3">
+          {articles.slice(0, 3).map((article, i) =>
+          <Reveal key={article.slug} delay={0.06 * i} className="h-full">
+              <ArticleCard article={article} />
+            </Reveal>
+          )}
+        </div>
+
+        <Reveal delay={0.1}>
+          <div className="mt-12 flex justify-center">
+            <ButtonLink to="/blog" variant="outline" className="font-light">
+              همه مقالات
+              <ArrowLeftIcon className="h-4 w-4" />
+            </ButtonLink>
+          </div>
+        </Reveal>
+      </div>
+    </section>);
+
+}