initialized the project with the software page

2026-04-21 09:21:29 +03:30
parent c1fb234f27
commit d981653ea3
16 changed files with 618 additions and 35 deletions
--- a/src/components/software/Projects.tsx
+++ b/src/components/software/Projects.tsx
@@ -0,0 +1,126 @@
+// components/software/Projects.tsx
+"use client";
+
+import { useState } from "react";
+
+const projects = [
+  {
+    type: "وب اپلیکیشن",
+    company: "شرکت آتی‌ساز",
+    title: "پلتفرم مدیریت پروژه",
+    description: "سیستم جامع مدیریت پروژه با قابلیت ردیابی وظایف و گزارش‌گیری Real-time",
+    tech: ["⚛ Next.js + TypeScript", "🐘 PostgreSQL + Prisma"],
+    stat: "👤 +۵۰۰ کاربر",
+    year: "۲۰۲۶",
+  },
+  {
+    type: "داشبورد تحلیلی",
+    company: "گروه مالی پارسیان",
+    title: "داشبورد تحلیل داده",
+    description: "پنل تحلیلی با نمودارهای تعاملی و گزارش‌های لحظه‌ای برای تیم مدیریت",
+    tech: ["⚛ React + Chart.js", "🟢 Node.js + WebSocket"],
+    stat: "📈 Real-time",
+    year: "۲۰۲۶",
+  },
+  {
+    type: "Backend API",
+    company: "استارتاپ دیجی‌مارکت",
+    title: "API فروشگاه آنلاین",
+    description: "RESTful API مقیاس‌پذیر با معماری Microservices برای پلتفرم تجارت الکترونیک",
+    tech: ["⚙ NestJS + TypeScript", "🐳 Docker + Kubernetes"],
+    stat: "🚀 Microservices",
+    year: "۲۰۲۵",
+  },
+  {
+    type: "وب اپلیکیشن",
+    company: "موسسه آموزشی نوین",
+    title: "پلتفرم آموزشی",
+    description: "سیستم LMS پیشرفته با قابلیت برگزاری کلاس آنلاین و ارزیابی خودکار",
+    tech: ["🟢 Vue.js + Nuxt", "🍃 MongoDB + Redis"],
+    stat: "📚 +۱۰۰۰ دوره",
+    year: "۲۰۲۵",
+  },
+];
+
+const filters = ["همه", "وب اپ", "API", "داشبورد"];
+
+export default function Projects() {
+  const [activeFilter, setActiveFilter] = useState("همه");
+
+  return (
+    <section className="px-6 py-16">
+      <div className="mx-auto mb-12 text-right max-w-7xl">
+        <h2 className="mb-2 text-3xl font-bold">پروژه‌های نرم‌افزاری</h2>
+        <p className="text-muted">منتخب پروژه‌های نرم‌افزاری با تمرکز بر کیفیت کد و معماری تمیز</p>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-4 px-6 mx-auto mb-8 max-w-7xl">
+        <div className="flex gap-2">
+          {filters.map((filter) => (
+            <button
+              key={filter}
+              onClick={() => setActiveFilter(filter)}
+              className={`px-4 py-2 text-sm border rounded-lg transition ${
+                activeFilter === filter ? "bg-accent text-white border-accent" : "bg-transparent text-muted border-border hover:border-accent/50"
+              }`}
+            >
+              {filter}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-4">
+          <button className="px-4 py-2 text-sm transition border rounded-lg border-border hover:bg-card">مشاهده همه پروژه‌ها</button>
+          <div className="flex gap-2">
+            <button className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">&gt;</button>
+            <button className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">&lt;</button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-6 px-6 pb-4 mx-auto overflow-x-auto max-w-7xl scrollbar-hide">
+        {projects.map((project, i) => (
+          <div
+            key={i}
+            className="min-w-[320px] bg-gradient-to-b from-card to-bg border border-border rounded-2xl p-6 flex flex-col relative overflow-hidden"
+          >
+            <div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-white/10 to-transparent" />
+
+            <div className="flex items-center justify-between mb-6">
+              <span className="px-3 py-1 text-xs border rounded bg-accent/10 border-accent/20 text-accent">{project.type}</span>
+              <span className="text-xs text-muted">{project.company}</span>
+            </div>
+
+            <div className="mb-6">
+              <h3 className="mb-2 text-xl font-bold">{project.title}</h3>
+              <p className="text-sm leading-relaxed text-muted">{project.description}</p>
+            </div>
+
+            <div className="mb-6">
+              {project.tech.map((tech, j) => (
+                <div key={j} className="flex items-center gap-2 mb-2 text-sm text-muted">
+                  {tech}
+                </div>
+              ))}
+            </div>
+
+            <div className="flex items-center justify-between pt-4 mt-auto border-t border-border">
+              <div className="text-sm text-muted">{project.stat}</div>
+              <div className="px-3 py-1 text-xs rounded bg-white/5 text-muted">{project.year}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <style jsx>{`
+        .scrollbar-hide::-webkit-scrollbar {
+          display: none;
+        }
+        .scrollbar-hide {
+          -ms-overflow-style: none;
+          scrollbar-width: none;
+        }
+      `}</style>
+    </section>
+  );
+}