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/TechStack.tsx
+++ b/src/components/software/TechStack.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+
+const techItems = [
+  { name: "React", icon: "⚛️", orbit: 1, description: "کتابخانه قدرتمند برای ساخت رابط‌های تعاملی" },
+  { name: "Next.js", icon: "▲", orbit: 1, description: "فریم‌ورک پیشرفته React برای پروژه‌های تولیدی" },
+
+  { name: "TypeScript", icon: "TS", orbit: 2, description: "جاوااسکریپت تایپ‌دار برای کد امن‌تر و قابل نگهداری" },
+  { name: "Node.js", icon: "🟢", orbit: 2, description: "محیط اجرای سمت سرور با سرعت بالا" },
+
+  { name: "PostgreSQL", icon: "🐘", orbit: 3, description: "پایگاه داده رابطه‌ای قدرتمند با امکانات پیشرفته" },
+  { name: "MongoDB", icon: "🍃", orbit: 3, description: "پایگاه داده NoSQL سریع و مقیاس‌پذیر" },
+
+  { name: "Docker", icon: "🐳", orbit: 4, description: "کانتینرسازی برای استقرار و توسعه یکپارچه" },
+  { name: "AWS", icon: "☁️", orbit: 4, description: "سرویس‌های ابری امن و مقیاس‌پذیر" },
+];
+
+export default function TechStack() {
+  const [selected, setSelected] = useState(techItems[0]);
+
+  return (
+    <section className="flex flex-col items-center px-6 py-16">
+      <div className="w-full 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-center w-full gap-16 max-w-7xl lg:flex-nowrap">
+        {/* ============================= */}
+        {/*     ORBITAL TECH SYSTEM      */}
+        {/* ============================= */}
+        <div className="relative w-[500px] h-[500px] flex-shrink-0">
+          {/* Center glowing core */}
+          <div
+            className="absolute top-1/2 left-1/2 
+            -translate-x-1/2 -translate-y-1/2 
+            w-20 h-20 bg-accent rounded-full 
+            shadow-[0_0_60px_rgba(249,115,22,0.6)] 
+            flex items-center justify-center text-3xl z-10"
+          >
+            🚀
+          </div>
+
+          {/* Orbit rings */}
+          {[1, 2, 3, 4].map((orbit) => (
+            <div
+              key={orbit}
+              className="absolute -translate-x-1/2 -translate-y-1/2 border rounded-full top-1/2 left-1/2 border-border/40"
+              style={{
+                width: `${orbit * 130}px`,
+                height: `${orbit * 130}px`,
+              }}
+            />
+          ))}
+
+          {/* Rotating tech icons */}
+          {techItems.map((tech, i) => {
+            const radius = tech.orbit * 65;
+            const speed = 25 + tech.orbit * 10;
+            const delay = i * -4;
+
+            return (
+              <div
+                key={i}
+                className="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
+                style={{
+                  width: radius * 2,
+                  height: radius * 2,
+                  animation: `spin ${speed}s linear infinite`,
+                  animationDelay: `${delay}s`,
+                }}
+              >
+                <button
+                  onClick={() => setSelected(tech)}
+                  className={`absolute top-0 left-1/2 
+                    -translate-x-1/2 -translate-y-1/2 
+                    w-14 h-14 rounded-full flex items-center justify-center text-xl transition-all
+                    ${
+                      selected.name === tech.name
+                        ? "bg-accent text-white shadow-[0_0_20px_rgba(249,115,22,0.5)] scale-110"
+                        : "bg-card border border-border hover:border-accent/50 hover:scale-105"
+                    }
+                  `}
+                  style={{
+                    animation: `spin ${speed}s linear infinite reverse`,
+                    animationDelay: `${delay}s`,
+                  }}
+                >
+                  {tech.icon}
+                </button>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* ============================= */}
+        {/*        INFORMATION CARD       */}
+        {/* ============================= */}
+        <div className="w-full max-w-md p-8 text-right border bg-card border-border rounded-xl">
+          <div className="flex items-center justify-center w-16 h-16 mb-6 text-3xl border bg-accent/10 border-accent/20 rounded-xl">
+            {selected.icon}
+          </div>
+
+          <h3 className="mb-4 text-2xl font-bold">{selected.name}</h3>
+
+          <p className="leading-relaxed text-muted">{selected.description}</p>
+        </div>
+      </div>
+
+      {/* Keyframes */}
+      <style>{`
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </section>
+  );
+}