پروژه کامل: فرانت متصل به 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,106 @@
+import React from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
+import { ButtonLink } from '../Button'
+import { useSite } from '../../api'
+
+export function Hero() {
+  const { brand } = useSite()
+  const { scrollY } = useScroll()
+  const imageY = useTransform(scrollY, [0, 700], [0, 110])
+  const contentY = useTransform(scrollY, [0, 700], [0, -55])
+  const overlay = useTransform(scrollY, [0, 600], [0.5, 0.78])
+
+  return (
+    <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label="معرفی آرامش پلازا">
+      <motion.img
+        src={brand.hero}
+        alt="نمای شبانه برج مسکونی ساخته‌شده توسط آرامش پلازا"
+        style={{ y: imageY }}
+        className="absolute inset-0 h-[114%] w-full object-cover"
+      />
+      <motion.div className="absolute inset-0 bg-ink" style={{ opacity: overlay }} aria-hidden="true" />
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'linear-gradient(to top, #27221c 5%, rgba(39,34,28,0.2) 60%, rgba(39,34,28,0.6) 100%)',
+        }}
+        aria-hidden="true"
+      />
+
+      <motion.div
+        style={{ y: contentY }}
+        className="relative mx-auto flex h-full max-w-site flex-col justify-center px-6 lg:px-10"
+      >
+        <div className="w-full max-w-[700px] lg:max-w-[58%]">
+          <motion.p
+            initial={{ opacity: 0, y: 18 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
+            className="text-sm font-light text-copper"
+          >
+            از سال ۱۳۸۳ — تهران، اصفهان، سواحل شمال
+          </motion.p>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 28 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
+            className="mt-6 text-hero font-bold text-ivory"
+          >
+            ساختمانی که آرامش را
+            <span className="text-copper"> معماری </span>
+            می‌کند
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 22 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.85, delay: 2.32, ease: [0.23, 1, 0.32, 1] }}
+            className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/70"
+          >
+            طراحی، ساخت و سرمایه‌گذاری در پروژه‌های مسکونی و تجاری لوکس؛ با استانداردی که در جزئیات دیده می‌شود و در
+            سال‌ها دوام می‌آورد.
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 22 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
+            className="mt-10 flex flex-wrap items-center gap-4"
+          >
+            <ButtonLink to="/projects" variant="copper">
+              مشاهده پروژه‌ها
+              <ArrowLeftIcon className="h-4 w-4" />
+            </ButtonLink>
+            <ButtonLink to="/contact" variant="outline" className="font-light">
+              مشاوره سرمایه‌گذاری
+            </ButtonLink>
+          </motion.div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, x: -24 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
+          className="absolute bottom-28 left-6 hidden w-60 border border-ivory/15 bg-char/60 p-6 backdrop-blur-md lg:block lg:left-10"
+        >
+          <p className="text-3xl font-bold text-copper">۴۷</p>
+          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
+            پروژه تحویل‌شده در بیست‌ویک سال فعالیت حرفه‌ای
+          </p>
+        </motion.div>
+      </motion.div>
+
+      <a
+        href="#story"
+        aria-label="رفتن به بخش بعدی"
+        className="absolute bottom-8 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/50 transition-colors duration-200 ease-lux hover:text-copper"
+      >
+        <span className="text-xs font-light">اسکرول کنید</span>
+        <ChevronDownIcon className="h-4 w-4 animate-bounce" />
+      </a>
+    </section>
+  )
+}