پروژه کامل: فرانت متصل به 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 from 'react'
+import { Link } from 'react-router-dom'
+import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
+import { PageHero } from '../components/PageHero'
+import { Reveal } from '../components/Reveal'
+import { ArticleCard } from '../components/ArticleCard'
+import { Newsletter } from '../components/home/Newsletter'
+import { IMAGES } from '../data/site'
+import { useSite } from '../api'
+
+export function Blog() {
+  const { articles } = useSite()
+  const [featured, ...rest] = articles
+
+  return (
+    <>
+      <PageHero
+        title="وبلاگ"
+        lead="یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری آرامش پلازا درباره آنچه در کارگاه و بازار می‌گذرد."
+        image={IMAGES[2]}
+      />
+
+      <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
+        <div className="mx-auto max-w-site px-6 lg:px-10">
+          <Reveal>
+            <Link
+              to={`/blog/${featured.slug}`}
+              className="group grid items-stretch border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift lg:grid-cols-2"
+              aria-label={`خواندن مقاله ${featured.title}`}
+            >
+              <div className="overflow-hidden">
+                <img
+                  src={featured.image}
+                  alt={`تصویر مقاله ${featured.title}`}
+                  className="h-full min-h-[20rem] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
+                />
+              </div>
+              <div className="flex flex-col justify-center p-8 lg:p-12">
+                <p className="text-xs font-light text-copper">مقاله ویژه — {featured.category}</p>
+                <h2 className="mt-6 text-2xl font-bold leading-[2.2] md:leading-[2.2] text-ivory transition-colors duration-200 ease-lux group-hover:text-copper md:text-3xl">
+                  {featured.title}
+                </h2>
+                <p className="mt-6 text-sm font-light leading-10 text-ivory/65">{featured.excerpt}</p>
+                <div className="mt-10 flex items-center justify-between border-t border-ivory/10 pt-8 text-xs font-light text-ivory/50">
+                  <span className="flex items-center gap-4">
+                    <span>{featured.date}</span>
+                    <span className="flex items-center gap-1.5">
+                      <ClockIcon className="h-3.5 w-3.5" />
+                      {featured.read}
+                    </span>
+                  </span>
+                  <span className="flex items-center gap-2 text-copper">
+                    ادامه مطلب
+                    <ArrowLeftIcon className="h-3.5 w-3.5 transition-transform duration-200 ease-lux group-hover:-translate-x-1" />
+                  </span>
+                </div>
+              </div>
+            </Link>
+          </Reveal>
+
+          <div className="mt-12 grid gap-6 lg:grid-cols-3">
+            {rest.map((article, i) => (
+              <Reveal key={article.slug} delay={0.05 * i} className="h-full">
+                <ArticleCard article={article} />
+              </Reveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Newsletter />
+    </>
+  )
+}