Initial commit

2026-08-16 23:34:47 +03:30
commit 05ea45852e
53 changed files with 7867 additions and 0 deletions
@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+import { ArrowLeftIcon } from 'lucide-react'
+import { Reveal } from '../Reveal'
+import { ButtonLink } from '../Button'
+import { ProjectCard } from '../ProjectCard'
+import { SectionHeading } from '../SectionHeading'
+import { PROJECTS, type ProjectStatus } from '../../data/site'
+
+const FILTERS: { key: ProjectStatus; label: string }[] = [
+  { key: 'done', label: 'انجام شده' },
+  { key: 'progress', label: 'در حال انجام' },
+]
+
+export function FeaturedProjects() {
+  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-lux ${
+                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-lux group-hover:translate-y-0"
+                />
+              )}
+              <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
+                {filter.label}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-10 grid gap-6 lg:grid-cols-3">
+          {list.map((project, i) => (
+            <Reveal key={project.slug} delay={0.06 * i} className="h-full">
+              <ProjectCard project={project} />
+            </Reveal>
+          ))}
+        </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>
+  )
+}