پروژه کامل: فرانت متصل به 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,91 @@
+import React from 'react'
+import { ArrowLeftIcon } from 'lucide-react'
+import { Reveal } from '../Reveal'
+import { ButtonLink } from '../Button'
+import { IMAGES } from '../../data/site'
+
+const BENTO = [
+  { src: IMAGES[0], alt: 'نمای برج مسکونی آرامش در تهران' },
+  { src: IMAGES[1], alt: 'آتریوم مرکزی مجتمع تجاری پارسه' },
+  { src: IMAGES[2], alt: 'ویلاهای ساخته‌شده در سواحل شمال' },
+  { src: IMAGES[3], alt: 'نمای شبانه برج دوقلوی نیاوران' },
+]
+
+type StoryProps = {
+  showLink?: boolean;
+  showLabel?: boolean;
+  alignTop?: boolean;
+  children?: React.ReactNode;
+}
+
+export function Story({ showLink = true, showLabel = true, alignTop = false, children }: StoryProps) {
+  return (
+    <section id="story" className="bg-ink py-24 lg:py-32" aria-labelledby="story-title">
+      <div className={`mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-2 lg:px-10 ${alignTop ? 'items-start' : 'items-center'}`}>
+        <div>
+          {showLabel && (
+            <Reveal>
+              <h2 id="story-title" className="text-section font-bold text-ivory">
+                درباره ی ما
+              </h2>
+              <div className="mt-6 h-px w-24 bg-copper/70" />
+            </Reveal>
+          )}
+
+          <Reveal delay={0.08}>
+            <p className="mt-8 text-base font-light leading-9 text-ivory/65">
+              آرامش پلازا با یک دفتر کوچک معماری آغاز شد و امروز یکی از مجموعه‌های شناخته‌شده ساخت‌وساز لوکس در ایران
+              است. در تمام این سال‌ها یک اصل تغییر نکرده است: ساختمان باید برای زندگی ساخته شود، نه برای فروش سریع.
+            </p>
+            <p className="mt-5 text-base font-light leading-9 text-ivory/65">
+              هر پروژه با مطالعه زمین، نور، اقلیم و الگوی زندگی ساکنان آغاز می‌شود؛ سپس تیم طراحی، سازه و اجرا در یک
+              فرآیند واحد آن را تا تحویل کلید پیش می‌برند.
+            </p>
+          </Reveal>
+
+          <Reveal delay={0.16}>
+            <div className="mt-10 grid grid-cols-2 gap-8 border-t border-ivory/10 pt-8">
+              <div>
+                <p className="text-2xl font-bold text-copper">۹۴٪</p>
+                <p className="mt-2 text-sm font-light text-ivory/55">تحویل به‌موقع پروژه‌ها</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-copper">۵ سال</p>
+                <p className="mt-2 text-sm font-light text-ivory/55">پشتیبانی پس از تحویل</p>
+              </div>
+            </div>
+          </Reveal>
+
+          {showLink && (
+            <Reveal delay={0.22}>
+              <ButtonLink to="/about" variant="outline" className="mt-10 font-light">
+                داستان کامل ما
+                <ArrowLeftIcon className="h-4 w-4" />
+              </ButtonLink>
+            </Reveal>
+          )}
+
+          {children && (
+            <Reveal delay={0.24}>
+              {children}
+            </Reveal>
+          )}
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          {BENTO.map((item, i) => (
+            <Reveal key={item.src + i} delay={0.06 * i}>
+              <div className="overflow-hidden">
+                <img
+                  src={item.src}
+                  alt={item.alt}
+                  className="aspect-square w-full object-cover transition-transform duration-500 ease-lux hover:scale-105"
+                />
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}