initialized the project with the software page

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/globals.css

@@ -1,26 +1,27 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #060b14;
+  --foreground: #ffffff;
+  --card: #0d1522;
+  --border: #1e293b;
+  --input: #151e2d;
+  --accent: #f97316;
+  --muted: #64748b;
 }
 
 @theme inline {
-  --color-background: var(--background);
+  --color-bg: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --color-card: var(--card);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-accent: var(--accent);
+  --color-muted: var(--muted);
 }
 
 body {
-  background: var(--background);
+  direction: rtl;
+  background-color: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
 }

src/app/layout.tsx

@@ -1,20 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import localFont from "next/font/local";
+import Navbar from "@/components/shared/Navbar";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+const modam = localFont({
+  src: "../../public/fonts/ModamWeb-Bold.woff2",
+  weight: "100 900",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "رایین شبکه | توسعه نرم‌افزار",
+  description: "ساخت اپلیکیشن‌های وب مدرن و سیستم‌های سازمانی",
 };
 
 export default function RootLayout({
@@ -23,11 +19,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="fa-ir" className={modam.className}>
+      <body className="flex flex-col min-h-screen bg-bg text-foreground">
+        <Navbar />
+        {children}
+      </body>
     </html>
   );
 }

src/app/software/page.tsx

@@ -0,0 +1,20 @@
+// app/software/page.tsx
+import Hero from "@/components/software/Hero";
+import Services from "@/components/software/Services";
+import TechStack from "@/components/software/TechStack";
+import Process from "@/components/software/Process";
+import Projects from "@/components/software/Projects";
+import ContactFooter from "@/components/software/ContactFooter";
+
+export default function SoftwarePage() {
+  return (
+    <main className="bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px]">
+      <Hero />
+      <Services />
+      <TechStack />
+      <Process />
+      <Projects />
+      <ContactFooter />
+    </main>
+  );
+}

src/components/shared/Navbar.tsx

@@ -0,0 +1,26 @@
+export default function Navbar() {
+  return (
+    <header className="sticky top-0 z-50 border-b backdrop-blur-lg bg-bg/80 border-white/5">
+      <div className="flex items-center justify-between px-6 py-4 mx-auto max-w-7xl">
+        <div className="text-xl font-bold">
+          رایین <span className="text-accent">شبکه</span>
+        </div>
+
+        <nav className="hidden md:block">
+          <ul className="flex gap-8 text-sm text-muted">
+            <li className="transition cursor-pointer hover:text-foreground">صفحه اصلی</li>
+            <li className="transition cursor-pointer hover:text-foreground">خدمات</li>
+            <li className="transition cursor-pointer hover:text-foreground">تکنولوژی</li>
+            <li className="transition cursor-pointer hover:text-foreground">فرآیند</li>
+            <li className="transition cursor-pointer hover:text-foreground">پروژه‌ها</li>
+          </ul>
+        </nav>
+
+        <div className="flex gap-3">
+          <button className="border border-border px-3 py-1.5 rounded-md text-sm hover:bg-card transition">EN</button>
+          <button className="border border-border px-3 py-1.5 rounded-md text-sm hover:bg-card transition">☾</button>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/software/ContactFooter.tsx

@@ -0,0 +1,104 @@
+// components/software/ContactFooter.tsx
+export default function ContactFooter() {
+  return (
+    <div className="mx-6 my-16 border bg-card border-border rounded-3xl">
+      <div className="flex flex-wrap gap-16 p-12">
+        {/* Right Side: Info & Footer */}
+        <div className="flex-1 min-w-[300px] text-right">
+          <span className="inline-block px-4 py-2 mb-4 text-xs border rounded-full text-accent border-accent/30">🎧 مشاوره تخصصی رایین شبکه</span>
+          <h2 className="mb-4 text-3xl font-bold">آماده شروع پروژه نرم‌افزاری هستید؟</h2>
+          <p className="mb-8 leading-relaxed text-muted">
+            نیازت رو ثبت کن تا تیم رایین شبکه بر اساس مسئله واقعی کسب‌و‌کارت، مسیر اجرای فنی و زمانی پیشنهادی رو ارائه بده.
+          </p>
+
+          <ul className="mb-12 space-y-3">
+            {["تماس اولیه در کمتر از ۲۴ ساعت کاری", "تحلیل اولیه متناسب با نوع پروژه", "نقشه اجرا + برآورد زمان‌بندی"].map((item, i) => (
+              <li key={i} className="flex items-center gap-3 text-sm text-muted">
+                <span className="flex items-center justify-center w-5 h-5 text-xs border rounded-full text-accent border-accent">✓</span>
+                {item}
+              </li>
+            ))}
+          </ul>
+
+          <div className="flex flex-wrap justify-between gap-8 pt-8 border-t border-border">
+            <div className="flex-[2] min-w-[200px]">
+              <h4 className="mb-3 text-lg font-bold">رایین شبکه</h4>
+              <p className="text-sm leading-relaxed text-muted max-w-[250px]">
+                معماری سیستم، تولید محتوا و اجرای راهکارهای فنی برای رشد پایدار کسب‌و‌کارها.
+              </p>
+            </div>
+
+            <div className="min-w-[120px]">
+              <ul className="space-y-2 text-sm text-left">
+                {["صفحه اصلی", "خدمات", "پروژه‌ها", "تکنولوژی"].map((link, i) => (
+                  <li key={i}>
+                    <a href="#" className="transition text-muted hover:text-foreground">
+                      {link}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="min-w-[200px] text-left">
+              <div className="flex items-center justify-end gap-2 mb-2 text-sm text-muted">
+                <span>۰۹۱۲-۰۰۰-۰۰۰۰</span>
+                <span>📱</span>
+              </div>
+              <div className="flex items-center justify-end gap-2 mb-4 text-sm text-muted">
+                <span>info@raeinnetwork.ir</span>
+                <span>✉</span>
+              </div>
+              <button className="px-4 py-2 text-xs transition border rounded-lg border-border hover:bg-card">مشاهده همه پروژه‌ها</button>
+            </div>
+          </div>
+
+          <div className="pt-6 mt-8 text-xs text-center border-t text-muted border-white/5">© ۲۰۲۶ رایین شبکه . تمامی حقوق محفوظ است.</div>
+        </div>
+
+        {/* Left Side: Form */}
+        <div className="flex-1 min-w-[300px] bg-white/[0.02] border border-border p-8 rounded-2xl">
+          <div className="flex gap-4 mb-4">
+            <div className="flex flex-col flex-1 text-right">
+              <label className="mb-2 text-sm text-muted">نام و نام خانوادگی</label>
+              <input
+                type="text"
+                placeholder="مثلاً: علی احمدی"
+                className="px-4 py-3 text-sm border rounded-lg bg-input border-border text-foreground focus:outline-none focus:border-accent"
+              />
+            </div>
+            <div className="flex flex-col flex-1 text-right">
+              <label className="mb-2 text-sm text-muted">شماره تماس</label>
+              <input
+                type="text"
+                placeholder="۰۹xxxxxxxxx"
+                className="px-4 py-3 text-sm border rounded-lg bg-input border-border text-foreground focus:outline-none focus:border-accent"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col mb-4 text-right">
+            <label className="mb-2 text-sm text-muted">نوع پروژه</label>
+            <select className="px-4 py-3 text-sm border rounded-lg bg-input border-border text-foreground focus:outline-none focus:border-accent">
+              <option>انتخاب کنید</option>
+              <option>وب اپلیکیشن</option>
+              <option>موبایل اپلیکیشن</option>
+              <option>طراحی API</option>
+            </select>
+          </div>
+
+          <div className="flex flex-col text-right">
+            <label className="mb-2 text-sm text-muted">توضیح کوتاه پروژه</label>
+            <textarea
+              placeholder="مسئله اصلی شما چیست و چه خروجی‌ای می‌خواهید؟"
+              rows={4}
+              className="px-4 py-3 text-sm border rounded-lg resize-none bg-input border-border text-foreground focus:outline-none focus:border-accent"
+            />
+          </div>
+
+          <button className="w-full px-6 py-3 mt-6 transition border rounded-lg border-border hover:bg-white/5">ارسال درخواست &lt;</button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/software/Hero.tsx

@@ -0,0 +1,44 @@
+export default function Hero() {
+  return (
+    <section className="px-4 py-20 text-center">
+      <div className="inline-block px-4 py-2 mb-6 text-sm border rounded-full bg-accent/10 border-accent/20 text-accent">
+        ⚙ توسعه نرم‌افزار سفارشی
+      </div>
+
+      <h1 className="mb-4 text-5xl font-bold leading-tight">
+        از ایده تا <br />
+        <span className="text-accent">پلتفرم زنده</span>
+      </h1>
+
+      <p className="max-w-2xl mx-auto mb-12 text-muted">
+        ساخت اپلیکیشن‌های وب مدرن، API های مقیاس‌پذیر و سیستم‌های سازمانی با معماری تمیز و کد قابل نگهداری.
+      </p>
+
+      <div className="flex justify-center gap-12 mb-12 bg-white/[0.02] px-12 py-6 rounded-xl border border-border w-fit mx-auto">
+        <div className="text-center">
+          <h3 className="mb-1 text-3xl font-bold text-accent" style={{ direction: "ltr" }}>
+            +۵۰
+          </h3>
+          <p className="text-xs text-muted">پروژه تحویلی</p>
+        </div>
+        <div className="text-center">
+          <h3 className="mb-1 text-3xl font-bold text-accent" style={{ direction: "ltr" }}>
+            +۱۲
+          </h3>
+          <p className="text-xs text-muted">تکنولوژی</p>
+        </div>
+        <div className="text-center">
+          <h3 className="mb-1 text-3xl font-bold text-accent" style={{ direction: "ltr" }}>
+            ٪۹۸
+          </h3>
+          <p className="text-xs text-muted">رضایت مشتری</p>
+        </div>
+      </div>
+
+      <div className="flex justify-center gap-4">
+        <button className="px-6 py-3 text-white transition rounded-lg bg-accent hover:bg-accent/90">شروع پروژه &lt;</button>
+        <button className="px-6 py-3 transition border rounded-lg border-border hover:bg-card">مشاهده نمونه‌کارها</button>
+      </div>
+    </section>
+  );
+}

src/components/software/Process.tsx

@@ -0,0 +1,96 @@
+// components/software/Process.tsx
+export default function Process() {
+  const steps = [
+    {
+      number: "۰۱",
+      icon: "🔍",
+      title: "Discovery",
+      description: "تحلیل نیازمندی و تعریف محدوده پروژه",
+      tags: ["Requirements", "Research"],
+    },
+    {
+      number: "۰۲",
+      icon: "🎨",
+      title: "Design",
+      description: "طراحی UI/UX و معماری سیستم",
+      tags: ["Wireframes", "Architecture"],
+    },
+    {
+      number: "۰۳",
+      icon: "💻",
+      title: "Development",
+      description: "کدنویسی با استانداردهای بالا",
+      tags: ["Clean Code", "Git Flow"],
+    },
+    {
+      number: "۰۴",
+      icon: "🐛",
+      title: "Testing",
+      description: "تست و کنترل کیفیت کامل",
+      tags: ["Unit Tests", "QA"],
+    },
+    {
+      number: "۰۵",
+      icon: "🚀",
+      title: "Deployment",
+      description: "استقرار و راه‌اندازی Production",
+      tags: ["CI/CD", "Docker"],
+    },
+    {
+      number: "۰۶",
+      icon: "⚙️",
+      title: "Support",
+      description: "پشتیبانی و نگهداری مستمر",
+      tags: ["Monitoring", "Updates"],
+    },
+  ];
+
+  const badges = [
+    { icon: "⏱", title: "۲-۴", subtitle: "هفته Sprint" },
+    { icon: "🔄", title: "Agile", subtitle: "Methodology" },
+    { icon: "🎧", title: "۲۴/۷", subtitle: "Support" },
+  ];
+
+  return (
+    <section className="px-6 py-16 bg-black/30 border-t border-white/[0.02]">
+      <div className="mx-auto mb-12 text-center max-w-7xl">
+        <h2 className="mb-2 text-3xl font-bold">فرآیند توسعه نرم‌افزار</h2>
+        <p className="text-muted">از ایده تا محصول نهایی با متدولوژی Agile</p>
+      </div>
+
+      <div className="grid gap-8 px-6 mx-auto mb-12 max-w-7xl md:grid-cols-2 lg:grid-cols-3">
+        {steps.map((step, i) => (
+          <div key={i} className="relative p-8 text-center transition-transform border bg-card border-border rounded-xl hover:-translate-y-1">
+            <div className="absolute -top-4 right-5 w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center text-sm font-bold shadow-[0_4px_10px_rgba(249,115,22,0.3)]">
+              {step.number}
+            </div>
+            <div className="flex items-center justify-center w-12 h-12 mx-auto mb-6 text-2xl border bg-accent/10 border-accent/20 rounded-xl">
+              {step.icon}
+            </div>
+            <h3 className="mb-2 text-xl font-bold">{step.title}</h3>
+            <p className="mb-6 text-sm text-muted">{step.description}</p>
+            <div className="flex flex-wrap justify-center gap-2">
+              {step.tags.map((tag, j) => (
+                <span key={j} className="px-2 py-1 text-xs border rounded text-muted border-border">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-6">
+        {badges.map((badge, i) => (
+          <div key={i} className="flex items-center justify-between w-64 gap-4 px-6 py-4 border bg-card border-border rounded-xl">
+            <div className="text-right">
+              <h4 className="text-xl font-bold">{badge.title}</h4>
+              <p className="text-sm text-muted">{badge.subtitle}</p>
+            </div>
+            <div className="flex items-center justify-center w-10 h-10 text-xl rounded-lg bg-accent">{badge.icon}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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>
+  );
+}

src/components/software/Services.tsx

@@ -0,0 +1,55 @@
+const services = [
+  {
+    icon: "💻",
+    title: "توسعه وب اپلیکیشن",
+    description: "ساخت اپلیکیشن‌های وب پیشرفته با React, Next.js و Vue.js",
+  },
+  {
+    icon: "⚡",
+    title: "طراحی و توسعه API",
+    description: "ساخت RESTful و GraphQL API های مقیاس‌پذیر",
+  },
+  {
+    icon: "☁",
+    title: "راه‌اندازی ابری",
+    description: "استقرار و مدیریت اپلیکیشن در زیرساخت ابری",
+  },
+  {
+    icon: "🎛",
+    title: "پنل‌های مدیریتی",
+    description: "داشبوردهای تحلیلی و سیستم‌های مدیریت محتوا",
+  },
+  {
+    icon: "📱",
+    title: "اپلیکیشن موبایل",
+    description: "توسعه اپ‌های کراس‌پلتفرم با React Native",
+  },
+  {
+    icon: "⚙",
+    title: "اتوماسیون فرآیندها",
+    description: "خودکارسازی وظایف تکراری و بهینه‌سازی جریان کار",
+  },
+];
+
+export default function Services() {
+  return (
+    <section className="px-6 py-16 mx-auto max-w-7xl">
+      <div className="mb-12 text-right">
+        <h2 className="mb-2 text-3xl font-bold">خدمات توسعه نرم‌افزار</h2>
+        <p className="text-muted">راهکارهای جامع از طراحی تا استقرار و نگهداری</p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {services.map((service, i) => (
+          <div key={i} className="p-8 text-right transition-transform border bg-card border-border rounded-xl hover:-translate-y-1">
+            <div className="flex items-center justify-center w-12 h-12 mb-6 text-2xl border rounded-lg bg-accent/10 border-accent/20 text-accent">
+              {service.icon}
+            </div>
+            <h3 className="mb-3 text-xl font-bold">{service.title}</h3>
+            <p className="text-sm leading-relaxed text-muted">{service.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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>
+  );
+}