پروژه کامل: فرانت متصل به 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,92 @@
+import React, { useState } from 'react'
+import { ArrowLeftIcon } from 'lucide-react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { Reveal } from '../Reveal'
+import { ButtonLink } from '../Button'
+import { ProjectCard } from '../ProjectCard'
+import { SectionHeading } from '../SectionHeading'
+import { useSite } from '../../api'
+import type { ProjectStatus } from '../../data/site'
+
+const FILTERS: { key: ProjectStatus; label: string }[] = [
+  { key: 'done', label: 'انجام شده' },
+  { key: 'progress', label: 'در حال انجام' },
+]
+
+export function FeaturedProjects() {
+  const { projects } = useSite()
+  const [status, setStatus] = useState<ProjectStatus>('done')
+  const list = projects.filter((p) => p.status === status).slice(0, 3)
+
+  return (
+    <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
+      <div className="mx-auto max-w-site px-6 lg:px-10">
+        <SectionHeading
+          title="پروژه‌های شاخص"
+          lead="کارهایی که بیشترین چیز را درباره استاندارد ما می‌گویند؛ چه آن‌هایی که تحویل شده‌اند و چه آن‌هایی که همین امروز در حال ساخت‌اند."
+        />
+
+        <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
+          {FILTERS.map((filter) => (
+            <button
+              key={filter.key}
+              type="button"
+              role="tab"
+              aria-selected={status === filter.key}
+              onClick={() => setStatus(filter.key)}
+              className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-out ${
+                status === filter.key
+                  ? 'border-copper bg-copper font-bold text-char'
+                  : 'border-ivory/15 font-light text-ivory/65'
+              }`}
+            >
+              {status !== filter.key && (
+                <span
+                  aria-hidden="true"
+                  className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-out group-hover:translate-y-0"
+                />
+              )}
+              <span className="relative z-10 transition-colors duration-300 ease-out group-hover:text-char">
+                {filter.label}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-10 min-h-[420px]">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={status} 
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -15 }}
+              transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
+              className="grid gap-6 lg:grid-cols-3"
+            >
+              {list.map((project, i) => (
+                <motion.div
+                  key={project.slug}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: i * 0.1, ease: [0.23, 1, 0.32, 1] }}
+                  className="h-full"
+                >
+                  <ProjectCard project={project} />
+                </motion.div>
+              ))}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        <Reveal delay={0.1}>
+          <div className="mt-12 flex justify-center">
+            <ButtonLink to="/projects" variant="outline" className="font-light">
+              همه پروژه‌ها
+              <ArrowLeftIcon className="h-4 w-4" />
+            </ButtonLink>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  )
+}