پروژه کامل: فرانت متصل به 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,53 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeftIcon } from 'lucide-react'
+
+type PageHeroProps = {
+  title: string
+  lead: string
+  image: string
+}
+
+export function PageHero({ title, lead, image }: PageHeroProps) {
+  return (
+    <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
+      <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
+      
+      <div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
+      
+      <div
+        className="absolute inset-0"
+        style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.1) 70%)' }}
+        aria-hidden="true"
+      />
+      
+      <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
+        <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
+          <Link to="/" className="transition-colors hover:text-copper">
+            صفحه اصلی
+          </Link>
+          <ChevronLeftIcon className="h-3.5 w-3.5" />
+          <span className="text-copper">{title}</span>
+        </nav>
+        <motion.h1
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
+          className="mt-5 max-w-[700px] text-hero font-bold text-ivory"
+        >
+          {title}
+        </motion.h1>
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, delay: 0.1, ease: [0.23, 1, 0.32, 1] }}
+          className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65"
+        >
+          {lead}
+        </motion.p>
+        <div className="mt-8 h-px w-28 bg-copper" />
+      </div>
+    </section>
+  )
+}