initialize project with 5 static pages

2026-04-23 12:25:41 +03:30
parent 72659ddc08
commit 889e3f9213
26 changed files with 1480 additions and 73 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "new_client",
      "version": "0.1.0",
      "dependencies": {
+        "lucide-react": "^1.8.0",
        "next": "16.2.4",
        "react": "19.2.4",
        "react-dom": "19.2.4"
@@ -3260,6 +3261,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -4864,6 +4866,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "1.8.0",
+      "resolved": "https://mirror-npm.runflare.com/lucide-react/-/lucide-react-1.8.0.tgz",
+      "integrity": "sha512-WuvlsjngSk7TnTBJ1hsCy3ql9V9VOdcPkd3PKcSmM34vJD8KG6molxz7m7zbYFgICwsanQWmJ13JlYs4Zp7Arw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.21",
      "resolved": "https://mirror-npm.runflare.com/magic-string/-/magic-string-0.30.21.tgz",
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "lucide-react": "^1.8.0",
    "next": "16.2.4",
    "react": "19.2.4",
    "react-dom": "19.2.4"
--- a/src/app/academy/[slug]/page.tsx
+++ b/src/app/academy/[slug]/page.tsx
@@ -0,0 +1,34 @@
+import Consultation from "@/components/network/Consultation";
+import ContactFooter from "@/components/network/ContactFooter";
+import ArticleBody from "@/components/single-academy/ArticleBody";
+import ArticleHeader from "@/components/single-academy/ArticleHeader";
+import RelatedArticles from "@/components/single-academy/RelatedArticles";
+
+export default function SingleAcademyPage() {
+  return (
+    <div className="min-h-screen bg-[#0B1120] text-white font-sans selection:bg-orange-500/30 rtl" dir="rtl">
+      {/* Background Grid Pattern */}
+      <div
+        className="fixed inset-0 z-0 pointer-events-none opacity-20"
+        style={{
+          backgroundImage:
+            "linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)",
+          backgroundSize: "40px 40px",
+        }}
+      ></div>
+
+      <div className="relative z-10 pt-24 pb-12">
+        <div className="max-w-6xl px-4 mx-auto sm:px-6 lg:px-8">
+          <ArticleHeader />
+          <ArticleBody />
+          <RelatedArticles />
+        </div>
+      </div>
+
+      <div className="relative z-10 max-w-6xl px-4 pb-12 mx-auto sm:px-6 lg:px-8">
+        <Consultation />
+        <ContactFooter />
+      </div>
+    </div>
+  );
+}
--- a/src/app/academy/page.tsx
+++ b/src/app/academy/page.tsx
@@ -0,0 +1,22 @@
+import AcademyHeader from "@/components/academy/AcademyHeader";
+import ArticleGrid from "@/components/academy/ArticleGrid";
+import FeaturedArticle from "@/components/academy/FeaturedArticle";
+import Consultation from "@/components/network/Consultation";
+import ContactFooter from "@/components/network/ContactFooter";
+
+export default function AcademyPage() {
+  return (
+    <div className="min-h-screen pt-8 font-sans bg-background text-foreground md:pt-16">
+      <div className="max-w-[1440px] mx-auto px-4 md:px-8">
+        <AcademyHeader />
+        <FeaturedArticle />
+        <ArticleGrid />
+      </div>
+
+      <div className="mt-16 md:mt-24">
+        <Consultation />
+        <ContactFooter />
+      </div>
+    </div>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,20 +4,28 @@
  --background: #060b14;
  --foreground: #ffffff;
  --card: #0d1522;
+  --panel: #111827;
  --border: #1e293b;
  --input: #151e2d;
-  --accent: #f97316;
-  --muted: #64748b;
+  --accent: #e86b35; /* Orange primary */
+  --accent-light: #ff9130;
+  --muted: #8b95a5;
+  --success: #2ecc71; /* Green indicators */
+  --grid: rgba(22, 27, 38, 0.8);
 }

@theme inline {
  --color-bg: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
+  --color-panel: var(--panel);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-accent: var(--accent);
+  --color-accent-light: var(--accent-light);
  --color-muted: var(--muted);
+  --color-success: var(--success);
+  --color-grid: var(--grid);
 }

 body {
@@ -26,11 +34,7 @@ body {
  color: var(--foreground);
 }

-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.bg-grid-pattern {
+  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
+  background-size: 40px 40px;
 }
--- a/src/app/network/page.tsx
+++ b/src/app/network/page.tsx
@@ -0,0 +1,22 @@
+import Hero from "@/components/network/Hero";
+import Services from "@/components/network/Services";
+import Technologies from "@/components/network/Technologies";
+import Projects from "@/components/network/Projects";
+import Consultation from "@/components/network/Consultation";
+import ContactFooter from "@/components/network/ContactFooter";
+
+export default function NetworkPage() {
+  return (
+    <main className="relative flex flex-col items-center overflow-x-hidden">
+      <div className="fixed inset-0 -z-20 bg-grid-pattern" />
+      <div className="fixed top-1/2 left-1/2 w-[80vw] h-[80vh] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(circle,rgba(42,31,38,0.5)_0%,rgba(20,20,32,0.2)_40%,rgba(8,11,18,0)_70%)] -z-10 pointer-events-none" />
+
+      <Hero />
+      <Services />
+      <Technologies />
+      <Projects />
+      <Consultation />
+      <ContactFooter />
+    </main>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,63 +1,29 @@
-import Image from "next/image";
+import BentoServices from "@/components/home/BentoServices";
+import HomeAcademy from "@/components/home/HomeAcademy";
+import HomeHero from "@/components/home/HomeHero";
+import HomeProjects from "@/components/home/HomeProjects";
+import TechMarquee from "@/components/home/TechMarquee";
+import Consultation from "@/components/network/Consultation";
+import ContactFooter from "@/components/network/ContactFooter";

-export default function Home() {
+export default function HomePage() {
  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+    <div className="min-h-screen bg-[#0B1120] text-white font-sans selection:bg-orange-500/30 rtl" dir="rtl">
+      {/* Background Glow */}
+      <div className="fixed top-0 inset-x-0 h-[500px] bg-gradient-to-b from-orange-500/5 via-transparent to-transparent pointer-events-none -z-10"></div>
+
+      <main className="flex flex-col gap-24 pt-32 pb-12">
+        <HomeHero />
+        <TechMarquee />
+
+        <div className="w-full px-4 mx-auto space-y-32 max-w-7xl sm:px-6 lg:px-8">
+          <BentoServices />
+          <HomeProjects />
+          <HomeAcademy />
+          <div>
+            <Consultation />
+            <ContactFooter />
+          </div>
        </div>
      </main>
    </div>
--- a/src/components/academy/AcademyHeader.tsx
+++ b/src/components/academy/AcademyHeader.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+
+export default function AcademyHeader() {
+  const [activeFilter, setActiveFilter] = useState("همه مقالات");
+  const filters = ["همه مقالات", "شبکه", "امنیت", "برنامه‌نویسی", "DevOps"];
+
+  return (
+    <div className="flex flex-col items-center mb-12 text-center md:mb-20">
+      <div className="bg-accent/10 border border-accent/20 text-accent px-4 py-1.5 rounded-full text-xs mb-6 flex items-center gap-2">
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+          />
+        </svg>
+        آکادمی رابین شبکه
+      </div>
+
+      <h1 className="mb-4 text-3xl font-bold md:text-5xl lg:text-6xl">
+        دانش و تجربه
+        <span className="block mt-2 text-accent">به اشتراک گذاشته شده</span>
+      </h1>
+
+      <p className="max-w-2xl mb-10 text-sm text-muted md:text-base">مقالات تخصصی، آموزش‌ها و تجربیات واقعی از پروژه‌های شبکه و نرم‌افزار</p>
+
+      <div className="relative w-full max-w-2xl mb-12">
+        <input
+          type="text"
+          placeholder="جستجو در مقالات..."
+          className="w-full px-6 py-4 text-sm transition border bg-panel border-border rounded-xl focus:outline-none focus:border-accent"
+        />
+        <svg className="absolute w-5 h-5 -translate-y-1/2 text-muted left-4 top-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-2 md:gap-4">
+        {filters.map((filter) => (
+          <button
+            key={filter}
+            onClick={() => setActiveFilter(filter)}
+            className={`px-4 py-2 rounded-lg text-sm transition-all border ${
+              activeFilter === filter
+                ? "bg-accent border-accent text-background font-bold shadow-[0_0_15px_rgba(232,107,53,0.3)]"
+                : "bg-panel border-border text-muted hover:border-accent/50 hover:text-foreground"
+            }`}
+          >
+            {filter}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/components/academy/ArticleGrid.tsx
+++ b/src/components/academy/ArticleGrid.tsx
@@ -0,0 +1,126 @@
+export default function ArticleGrid() {
+  const articles = [
+    {
+      title: "طراحی شبکه WiFi برای هتل ۱۰۰ اتاقه",
+      desc: "انتخاب تجهیزات، Site Survey و پیکربندی UniFi برای پوشش کامل و بدون dead zone.",
+      category: "شبکه",
+      date: "۱ هفته پیش",
+      readTime: "۱۸ دقیقه",
+      tags: ["WiFi", "UniFi"],
+      gradient: "from-[#1a2332] to-[#121418]",
+    },
+    {
+      title: "معماری Microservices: از تئوری تا عمل",
+      desc: "چگونه یک سیستم Monolithic را به معماری Microservices تبدیل کنیم؟ تجربه واقعی از یک پروژه.",
+      category: "برنامه‌نویسی",
+      date: "۱ هفته پیش",
+      readTime: "۲۰ دقیقه",
+      tags: ["Microservices", "Architecture"],
+      gradient: "from-[#231a32] to-[#121418]",
+    },
+    {
+      title: "۱۰ نکته طلایی برای امن‌سازی Firewall",
+      desc: "بهترین روش‌ها و تکنیک‌های پیکربندی فایروال برای محافظت حداکثری از شبکه سازمانی.",
+      category: "امنیت",
+      date: "۵ روز پیش",
+      readTime: "۱۲ دقیقه",
+      tags: ["Firewall", "Security"],
+      gradient: "from-[#321a1a] to-[#121418]",
+    },
+    {
+      title: "VPN چیست و چگونه کار می‌کند؟",
+      desc: "آشنایی با انواع VPN، پروتکل‌ها و نحوه پیاده‌سازی Site-to-Site VPN با MikroTik.",
+      category: "شبکه",
+      date: "۲ هفته پیش",
+      readTime: "۱۰ دقیقه",
+      tags: ["VPN", "IPSec"],
+      gradient: "from-[#1a2b32] to-[#121418]",
+    },
+    {
+      title: "راه‌اندازی CI/CD Pipeline با GitHub Actions",
+      desc: "پیاده‌سازی کامل یک pipeline برای deploy خودکار اپلیکیشن Next.js روی VPS.",
+      category: "DevOps",
+      date: "۲ هفته پیش",
+      readTime: "۲۵ دقیقه",
+      tags: ["CI/CD", "GitHub"],
+      gradient: "from-[#2e321a] to-[#121418]",
+    },
+  ];
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="grid w-full grid-cols-1 gap-6 mb-12 md:grid-cols-2 lg:grid-cols-3">
+        {articles.map((article, i) => (
+          <div
+            key={i}
+            className="flex flex-col h-full overflow-hidden transition-all border cursor-pointer bg-panel border-border rounded-xl group hover:border-accent/50 hover:-translate-y-1"
+          >
+            {/* تصویر کاور کارت */}
+            <div className={`h-48 w-full bg-gradient-to-br ${article.gradient} relative border-b border-border`}>
+              <div className="absolute top-4 right-4 bg-accent text-background text-[10px] md:text-xs font-bold px-2.5 py-1 rounded-md shadow-lg">
+                {article.category}
+              </div>
+            </div>
+
+            {/* محتوای کارت */}
+            <div className="flex flex-col flex-1 p-5">
+              <div className="flex justify-between items-center text-[11px] text-muted mb-3">
+                <span className="flex items-center gap-1">
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                  {article.date}
+                </span>
+                <span className="flex items-center gap-1">
+                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  {article.readTime}
+                </span>
+              </div>
+
+              <h3 className="mb-2 text-lg font-bold transition-colors md:text-xl group-hover:text-accent">{article.title}</h3>
+
+              <p className="flex-1 mb-6 text-xs leading-relaxed text-muted md:text-sm">{article.desc}</p>
+
+              <div className="flex flex-wrap gap-2 mt-auto">
+                {article.tags.map((tag) => (
+                  <span key={tag} className="text-[10px] bg-background border border-border px-2 py-1 rounded text-muted">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Pagination (صفحه‌بندی) */}
+      <div className="flex items-center gap-2 font-mono text-sm">
+        <button className="flex items-center justify-center w-8 h-8 transition border rounded-lg border-border bg-panel text-muted hover:text-foreground">
+          &gt; {/* راست چین (قبلی) */}
+        </button>
+        <button className="flex items-center justify-center w-8 h-8 transition border rounded-lg border-border bg-panel text-muted hover:text-foreground">
+          4
+        </button>
+        <button className="flex items-center justify-center w-8 h-8 transition border rounded-lg border-border bg-panel text-muted hover:text-foreground">
+          3
+        </button>
+        <button className="flex items-center justify-center w-8 h-8 transition border rounded-lg border-border bg-panel text-muted hover:text-foreground">
+          2
+        </button>
+        <button className="w-8 h-8 rounded-lg border border-accent bg-accent text-background font-bold flex items-center justify-center transition shadow-[0_0_10px_rgba(232,107,53,0.4)]">
+          1
+        </button>
+        <button className="flex items-center justify-center w-8 h-8 transition border rounded-lg border-border bg-panel text-muted hover:text-foreground">
+          &lt; {/* چپ چین (بعدی) */}
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/src/components/academy/FeaturedArticle.tsx
+++ b/src/components/academy/FeaturedArticle.tsx
@@ -0,0 +1,52 @@
+export default function FeaturedArticle() {
+  return (
+    <div className="flex flex-col mb-8 overflow-hidden transition-colors border cursor-pointer bg-panel border-border rounded-2xl md:mb-12 md:flex-row group hover:border-accent/50">
+      <div className="flex flex-col justify-center flex-1 order-2 p-6 md:p-10 md:order-1">
+        <div className="flex items-center gap-4 mb-4 text-xs text-muted">
+          <span className="flex items-center gap-1">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+            ۲ روز پیش
+          </span>
+          <span className="flex items-center gap-1">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            ۱۵ دقیقه
+          </span>
+        </div>
+
+        <h2 className="mb-4 text-2xl font-bold leading-tight transition-colors md:text-3xl lg:text-4xl group-hover:text-accent">
+          راهنمای کامل پیکربندی MikroTik برای شبکه‌های سازمانی
+        </h2>
+
+        <p className="mb-8 text-sm leading-relaxed text-muted md:text-base">
+          در این مقاله به صورت جامع نحوه پیکربندی روتر MikroTik برای یک شبکه سازمانی با ۱۰۰+ کاربر را بررسی می‌کنیم. از VLAN Segmentation تا QoS و
+          Firewall Rules.
+        </p>
+
+        <div className="flex flex-wrap gap-2 mt-auto">
+          {["MikroTik", "VLAN", "Routing"].map((tag) => (
+            <span
+              key={tag}
+              className="px-3 py-1 text-xs transition border rounded-md bg-background border-border text-muted hover:text-accent hover:border-accent/50"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* بخش تصویر کاور (از گرادیانت به عنوان جایگزین تصویر استفاده شده) */}
+      <div className="w-full md:w-[45%] h-64 md:h-auto bg-gradient-to-br from-[#2a1b18] to-[#121418] relative order-1 md:order-2 border-b md:border-b-0 md:border-r border-border">
+        <div className="absolute top-4 right-4 bg-accent text-background text-xs font-bold px-3 py-1.5 rounded-md">شبکه</div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/home/BentoServices.tsx
+++ b/src/components/home/BentoServices.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Network, Code, PenTool, GraduationCap } from "lucide-react";
+
+export default function BentoServices() {
+  return (
+    <section>
+      <div className="mb-12 text-center">
+        <h2 className="mb-4 text-3xl font-bold text-white">راهکارهای یکپارچه</h2>
+        <p className="text-gray-400">خدمات ما پازل‌های تکمیل‌کننده کسب‌وکار شما هستند.</p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        {/* Right Column (Large Card) */}
+        <div className="bg-slate-900/40 border border-slate-800 rounded-2xl p-8 hover:border-orange-500/50 transition-colors flex flex-col justify-between h-[400px]">
+          <div>
+            <div className="flex items-center gap-3 mb-6">
+              <div className="p-3 text-orange-500 bg-slate-800 rounded-xl">
+                <Network className="w-6 h-6" />
+              </div>
+              <h3 className="text-2xl font-bold">زیرساخت و امنیت شبکه</h3>
+            </div>
+            <p className="max-w-md leading-relaxed text-gray-400">
+              طراحی، پیاده‌سازی و ایمن‌سازی شبکه‌های پیچیده. از کانفیگ روترهای سخت‌افزاری تا مانیتورینگ لایه هفت.
+            </p>
+          </div>
+          <div className="relative w-full h-32 mt-8 overflow-hidden border bg-slate-800/50 rounded-xl border-slate-700/50">
+            {/* Decorative element representing network */}
+            <div className="absolute flex gap-2 right-4 bottom-4">
+              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+              <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
+            </div>
+          </div>
+        </div>
+
+        {/* Left Column (Split Cards) */}
+        <div className="flex flex-col gap-6">
+          {/* Top Card */}
+          <div className="flex flex-col justify-between flex-1 p-8 transition-colors border bg-slate-900/40 border-slate-800 rounded-2xl hover:border-orange-500/50">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-2 text-orange-500 rounded-lg bg-slate-800">
+                <Code className="w-5 h-5" />
+              </div>
+              <h3 className="text-xl font-bold">توسعه نرم‌افزار اختصاصی</h3>
+            </div>
+            <p className="text-sm text-gray-400">ساخت پلتفرم‌های ابری قدرتمند و اتوماسیون فرآیندهای سازمانی.</p>
+          </div>
+
+          {/* Bottom Two Cards */}
+          <div className="grid flex-1 grid-cols-1 gap-6 sm:grid-cols-2">
+            {/* Branding Card */}
+            <div className="flex flex-col justify-between p-6 transition-colors border bg-slate-900/40 border-slate-800 rounded-2xl hover:border-orange-500/50">
+              <div className="flex items-center gap-2 mb-2">
+                <PenTool className="w-5 h-5 text-orange-500" />
+                <h3 className="text-lg font-bold">هویت بصری</h3>
+              </div>
+              <p className="mt-2 text-xs text-gray-400">طراحی رابط کاربری (UI/UX) و برندینگ مدرن.</p>
+            </div>
+
+            {/* Academy Card */}
+            <div className="relative flex flex-col items-center justify-center p-6 overflow-hidden text-center transition-colors border bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700 rounded-2xl hover:border-orange-500/50">
+              <div className="absolute inset-0 bg-orange-500/5"></div>
+              <GraduationCap className="relative z-10 w-8 h-8 mb-3 text-orange-500" />
+              <h3 className="relative z-10 mb-3 text-lg font-bold">آکادمی</h3>
+              <button className="relative z-10 px-6 py-2 text-sm text-white transition-colors border rounded-lg bg-slate-800 hover:bg-slate-700 border-slate-600">
+                ورود
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/HomeAcademy.tsx
+++ b/src/components/home/HomeAcademy.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { BookOpen, Clock, ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
+const articlesData = [
+  {
+    id: 1,
+    title: "آموزش راه‌اندازی سرورهای مجازی با VMware ESXi",
+    category: "شبکه",
+    readTime: "۱۰ دقیقه",
+    date: "۲۲ فروردین ۱۴۰۵",
+  },
+  {
+    id: 2,
+    title: "بررسی تفاوت‌های React و Next.js در سال ۲۰۲۶",
+    category: "برنامه‌نویسی",
+    readTime: "۸ دقیقه",
+    date: "۱۵ فروردین ۱۴۰۵",
+  },
+  {
+    id: 3,
+    title: "اصول طراحی رابط کاربری (UI) برای اپلیکیشن‌های مالی",
+    category: "طراحی",
+    readTime: "۱۲ دقیقه",
+    date: "۵ فروردین ۱۴۰۵",
+  },
+];
+
+export default function HomeAcademy() {
+  return (
+    <section className="py-12 mb-12">
+      <div className="flex flex-col justify-between gap-6 mb-8 md:flex-row md:items-end">
+        <div>
+          <h2 className="flex items-center gap-3 mb-4 text-3xl font-bold text-white">
+            <BookOpen className="text-orange-500" />
+            تازه‌های آکادمی
+          </h2>
+          <p className="text-gray-400">آخرین مقالات، آموزش‌ها و اخبار دنیای فناوری.</p>
+        </div>
+
+        <Link href="/academy" className="flex items-center gap-2 font-medium text-orange-500 transition-colors hover:text-orange-400">
+          مشاهده همه مقالات
+          <ArrowLeft className="w-5 h-5" />
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        {articlesData.map((article) => (
+          <Link
+            href={`/academy/${article.id}`}
+            key={article.id}
+            className="flex flex-col justify-between p-6 transition-all duration-300 border group bg-slate-900/40 border-slate-800 hover:border-orange-500/50 rounded-2xl"
+          >
+            <div>
+              <div className="flex items-center gap-3 mb-4">
+                <span className="px-3 py-1 text-xs text-orange-500 border rounded-full bg-orange-500/10 border-orange-500/20">
+                  {article.category}
+                </span>
+                <span className="flex items-center gap-1 text-xs text-gray-500">
+                  <Clock className="w-3 h-3" />
+                  {article.readTime}
+                </span>
+              </div>
+
+              <h3 className="mb-4 text-lg font-bold leading-relaxed text-gray-200 transition-colors group-hover:text-white">{article.title}</h3>
+            </div>
+
+            <div className="flex items-center justify-between pt-4 text-sm text-gray-500 border-t border-slate-800/50">
+              <span>{article.date}</span>
+              <span className="text-orange-500 transition-opacity opacity-0 group-hover:opacity-100">مطالعه</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/HomeHero.tsx
+++ b/src/components/home/HomeHero.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { ChevronLeft } from "lucide-react";
+
+export default function HomeHero() {
+  return (
+    <section className="flex flex-col items-center justify-center max-w-4xl px-4 mx-auto text-center">
+      {/* Top Badge */}
+      <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 text-sm text-orange-400 border rounded-full border-orange-500/20 bg-orange-500/10">
+        <span className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></span>
+        معماری سیستم‌های مقیاس‌پذیر
+      </div>
+
+      {/* Main Title */}
+      <h1 className="mb-6 text-5xl font-bold leading-tight md:text-7xl">
+        ما گره‌های فنی شما را
+        <br />
+        باز می‌کنیم
+      </h1>
+
+      {/* Subtitle */}
+      <p className="max-w-2xl mb-10 text-lg leading-relaxed text-gray-400 md:text-xl">
+        ترکیبی از اقتدار مهندسی در زیرساخت و نوآوری مدرن در توسعه نرم‌افزار، از راه‌اندازی شبکه‌های پیچیده تا توسعه پلتفرم‌های ابری سفارشی.
+      </p>
+
+      {/* CTA Buttons */}
+      <div className="flex flex-col items-center gap-4 sm:flex-row">
+        <button className="flex items-center justify-center w-full gap-2 px-8 py-3 font-medium text-white transition-colors bg-orange-600 rounded-lg sm:w-auto hover:bg-orange-500">
+          دریافت مشاوره رایگان
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+        <button className="flex items-center justify-center w-full px-8 py-3 font-medium text-white transition-colors border rounded-lg sm:w-auto border-slate-700 bg-slate-800/50 hover:bg-slate-800">
+          مشاهده نمونه‌کارها
+        </button>
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/HomeProjects.tsx
+++ b/src/components/home/HomeProjects.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useState } from "react";
+import { ArrowUpLeft, FolderKanban } from "lucide-react";
+
+const projectsData = [
+  {
+    id: 1,
+    title: "ارتقای زیرساخت شبکه هلدینگ دارویی",
+    category: "شبکه",
+    description: "طراحی مجدد توپولوژی شبکه و پیاده‌سازی فایروال‌های سخت‌افزاری برای امنیت حداکثری.",
+    image: "bg-slate-800", // در پروژه واقعی از آدرس تصویر استفاده کنید
+  },
+  {
+    id: 2,
+    title: "پلتفرم مدیریت منابع انسانی (HRM)",
+    category: "نرم‌افزار",
+    description: "توسعه سیستم جامع مدیریت پرسنل با استفاده از Next.js و .NET Core.",
+    image: "bg-slate-800",
+  },
+  {
+    id: 3,
+    title: "طراحی هویت بصری استارتاپ فین‌تک",
+    category: "برندینگ",
+    description: "طراحی کامل UI/UX اپلیکیشن موبایل و دیزاین سیستم سازمانی.",
+    image: "bg-slate-800",
+  },
+];
+
+const tabs = ["همه", "شبکه", "نرم‌افزار", "برندینگ"];
+
+export default function HomeProjects() {
+  const [activeTab, setActiveTab] = useState("همه");
+
+  const filteredProjects = projectsData.filter((project) => (activeTab === "همه" ? true : project.category === activeTab));
+
+  return (
+    <section className="py-12 border-t border-slate-800/50">
+      <div className="flex flex-col justify-between gap-6 mb-12 md:flex-row md:items-end">
+        <div>
+          <h2 className="flex items-center gap-3 mb-4 text-3xl font-bold text-white">
+            <FolderKanban className="text-orange-500" />
+            پروژه‌های منتخب
+          </h2>
+          <p className="text-gray-400">گزیده‌ای از چالش‌هایی که با موفقیت پشت سر گذاشتیم.</p>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex flex-wrap items-center gap-2 p-1 border bg-slate-900/50 rounded-xl border-slate-800 w-fit">
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                activeTab === tab ? "bg-orange-500 text-white shadow-lg shadow-orange-500/20" : "text-gray-400 hover:text-white hover:bg-slate-800/50"
+              }`}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {filteredProjects.map((project) => (
+          <div
+            key={project.id}
+            className="overflow-hidden transition-all duration-300 border cursor-pointer group bg-slate-900/30 border-slate-800 rounded-2xl hover:border-orange-500/50"
+          >
+            {/* Image placeholder */}
+            <div className={`h-48 w-full ${project.image} relative overflow-hidden`}>
+              <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent opacity-80"></div>
+              <div className="absolute px-3 py-1 text-xs text-gray-300 border rounded-full top-4 right-4 bg-black/50 backdrop-blur-sm border-slate-700">
+                {project.category}
+              </div>
+            </div>
+
+            <div className="p-6">
+              <h3 className="mb-2 text-xl font-bold text-white transition-colors group-hover:text-orange-500">{project.title}</h3>
+              <p className="mb-6 text-sm text-gray-400 line-clamp-2">{project.description}</p>
+
+              <div className="flex items-center justify-between text-sm font-medium text-orange-500">
+                <span>مشاهده پروژه</span>
+                <ArrowUpLeft className="w-5 h-5 transition-transform group-hover:-translate-y-1 group-hover:translate-x-1" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/TechMarquee.tsx
+++ b/src/components/home/TechMarquee.tsx
@@ -0,0 +1,21 @@
+export default function TechMarquee() {
+  const techs = ["Node.js", "Next.js", "MikroTik", "Figma", "Ollama AI", "Docker & Coolify", ".NET"];
+
+  return (
+    <div className="relative w-full py-4 overflow-hidden border-y border-slate-800/50 bg-slate-900/20">
+      {/* Gradient masks for fading edges */}
+      <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-[#0B1120] to-transparent z-10"></div>
+      <div className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-[#0B1120] to-transparent z-10"></div>
+
+      <div className="flex flex-wrap justify-center gap-12 px-4 opacity-50 whitespace-nowrap">
+        {/* In a real app, you'd use a CSS animation here for infinite scrolling */}
+        {techs.map((tech, index) => (
+          <div key={index} className="flex items-center gap-2 text-lg font-medium text-gray-400">
+            <span className="flex items-center justify-center w-6 h-6 text-xs border rounded bg-slate-800 border-slate-700"></span>
+            {tech}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/components/network/Consultation.tsx
+++ b/src/components/network/Consultation.tsx
@@ -0,0 +1,67 @@
+export default function Consultation() {
+  return (
+    <div className="w-full max-w-6xl px-5 mx-auto mt-10">
+      <div className="relative grid grid-cols-1 gap-10 p-10 overflow-hidden border border-b-0 shadow-2xl bg-panel border-border rounded-t-3xl lg:grid-cols-2">
+        <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-[80%] h-[100px] bg-[radial-gradient(ellipse,rgba(199,92,67,0.15),transparent_70%)] pointer-events-none" />
+
+        <div className="relative z-10">
+          <span className="inline-block text-accent border border-accent/50 bg-accent/5 px-3 py-1.5 rounded-full text-xs mb-5">
+            📞 مشاوره تخصصی رابین شبکه
+          </span>
+          <h2 className="mb-4 text-3xl font-bold">آماده ارتقای زیرساخت شبکه هستید؟</h2>
+          <p className="mb-8 text-sm leading-relaxed text-muted">
+            نیازت رو ثبت کن تا تیم رابین شبکه بر اساس مسئله واقعی کسب‌وکارت، مسیر اجرای فنی و زمانی پیشنهادی ارائه بده.
+          </p>
+          <ul className="space-y-4 text-sm text-muted">
+            <li className="flex items-center gap-2">
+              <span className="font-bold text-accent">✓</span> تماس اولیه در کمتر از ۲۴ ساعت کاری
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="font-bold text-accent">✓</span> تحلیل اولیه متناسب با نوع پروژه
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="font-bold text-accent">✓</span> نقشه اجرا + برآورد زمان‌بندی
+            </li>
+          </ul>
+        </div>
+
+        <div className="z-10 p-6 border bg-white/5 border-border rounded-2xl">
+          <div className="flex flex-col gap-4 mb-4 md:flex-row">
+            <div className="flex flex-col flex-1 gap-2">
+              <label className="text-xs text-muted">نام و نام خانوادگی</label>
+              <input
+                type="text"
+                className="px-4 py-3 text-sm border rounded-lg outline-none bg-bg border-border text-foreground focus:border-muted"
+                placeholder="مثلاً: علی احمدی"
+              />
+            </div>
+            <div className="flex flex-col flex-1 gap-2">
+              <label className="text-xs text-muted">شماره تماس</label>
+              <input
+                type="text"
+                className="px-4 py-3 text-sm border rounded-lg outline-none bg-bg border-border text-foreground focus:border-muted"
+                placeholder="09xxxxxxxxx"
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2 mb-4">
+            <label className="text-xs text-muted">نوع خدمت</label>
+            <select className="px-4 py-3 text-sm border rounded-lg outline-none bg-bg border-border text-foreground focus:border-muted">
+              <option>انتخاب کنید</option>
+            </select>
+          </div>
+          <div className="flex flex-col gap-2 mb-4">
+            <label className="text-xs text-muted">توضیح کوتاه پروژه</label>
+            <textarea
+              className="h-24 px-4 py-3 text-sm border rounded-lg outline-none resize-none bg-bg border-border text-foreground focus:border-muted"
+              placeholder="مسئله اصلی شما چیست و چه خروجی ای می خواهید؟"
+            />
+          </div>
+          <button className="flex items-center gap-2 px-6 py-3 mt-2 text-sm transition border rounded-lg border-border hover:border-muted w-fit">
+            ارسال درخواست <span>&lt;</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/network/ContactFooter.tsx
+++ b/src/components/network/ContactFooter.tsx
@@ -0,0 +1,34 @@
+export default function ContactFooter() {
+  return (
+    <footer className="w-full max-w-6xl px-5 mx-auto">
+      <div className="flex flex-col items-start justify-between gap-8 p-8 border border-t-0 bg-panel border-border rounded-b-3xl md:flex-row">
+        <div className="max-w-[300px]">
+          <h3 className="mb-3 text-xl font-bold">رابین شبکه</h3>
+          <p className="text-xs leading-relaxed text-muted">معماری سیستم، تولید محتوا و اجرای راهکارهای فنی برای رشد پایدار کسب‌وکارها.</p>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <a href="#" className="text-sm text-muted hover:text-foreground">
+            صفحه اصلی
+          </a>
+          <a href="#" className="text-sm text-muted hover:text-foreground">
+            خدمات
+          </a>
+          <a href="#" className="text-sm text-muted hover:text-foreground">
+            پروژه‌ها
+          </a>
+          <a href="#" className="text-sm text-muted hover:text-foreground">
+            زیرساخت
+          </a>
+        </div>
+
+        <div className="flex flex-col items-end gap-3 text-sm text-muted">
+          <span>۰۹۱۲-۰۰۰-۰۰۰۰ 📱</span>
+          <span>info@rabinnetwork.ir ✉️</span>
+          <button className="px-4 py-2 mt-2 transition border rounded-lg border-border text-foreground hover:bg-card">مشاهده همه پروژه‌ها</button>
+        </div>
+      </div>
+      <div className="py-5 text-xs text-center text-muted">© ۲۰۲۶ رابین شبکه. تمامی حقوق محفوظ است.</div>
+    </footer>
+  );
+}
--- a/src/components/network/Hero.tsx
+++ b/src/components/network/Hero.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export default function Hero() {
+  const [activeIndicators, setActiveIndicators] = useState({ sys: true, act: false, pwr: true });
+  const [activeSfp, setActiveSfp] = useState([true, false]);
+  const [activeRj45, setActiveRj45] = useState<boolean[]>(Array(24).fill(false));
+
+  useEffect(() => {
+    setActiveRj45(Array.from({ length: 24 }, () => Math.random() > 0.7));
+  }, []);
+
+  const toggleRj45 = (index: number) => {
+    setActiveRj45((prev) => {
+      const newActive = [...prev];
+      newActive[index] = !newActive[index];
+      return newActive;
+    });
+  };
+
+  return (
+    <div className="flex flex-col items-center text-center mt-8 md:mt-16 px-4 md:px-5 w-full max-w-[1440px] mx-auto">
+      <div className="bg-accent/10 border border-accent/20 text-accent px-4 py-1.5 rounded-full text-[10px] md:text-xs mb-4 md:mb-6">
+        مهندسی شبکه و امنیت
+      </div>
+
+      <h1 className="mb-4 text-3xl font-bold leading-tight sm:text-4xl md:text-5xl lg:text-6xl">
+        زیرساخت شبکه <span className="block mt-1 text-accent md:mt-2">پایدار و امن</span>
+      </h1>
+      <p className="max-w-2xl px-2 mb-8 text-sm text-muted md:text-base md:mb-12">
+        طراحی، پیاده‌سازی و مدیریت زیرساخت‌های شبکه پیچیده با تمرکز بر امنیت، پایداری و مقیاس‌پذیری
+      </p>
+
+      {/* روتر با max-width برای محدود کردن سایز در دسکتاپ و overflow-x-auto برای موبایل */}
+      <div className="relative mb-12 md:mb-16 w-full max-w-4xl mx-auto shadow-[0_15px_40px_-10px_rgba(0,0,0,0.8)] md:shadow-[0_25px_60px_-10px_rgba(0,0,0,0.9)] rounded-2xl overflow-x-auto pb-4 scrollbar-thin scrollbar-thumb-[#2a2d36] scrollbar-track-transparent">
+        <div className="min-w-[700px] w-full bg-[#181a1f] border border-[#2a2d36] rounded-2xl p-6 md:p-8 flex flex-col relative z-10">
+          <div className="flex items-center justify-between mb-3">
+            <div className="text-[#5c616f] font-mono text-xs md:text-sm tracking-wider">+CRS326-24G-2S</div>
+            <div className="font-sans text-xl font-extrabold tracking-widest text-accent md:text-2xl">MIKROTIK</div>
+          </div>
+          <div className="h-px bg-[#2a2d36] mb-5 w-full" />
+
+          <div className="flex justify-end gap-3 pr-2 mb-4 md:gap-5 md:pr-5">
+            {(["sys", "act", "pwr"] as const).map((key) => (
+              <div
+                key={key}
+                onClick={() => setActiveIndicators((prev) => ({ ...prev, [key]: !prev[key] }))}
+                className="flex items-center gap-1.5 md:gap-2 text-[#5c616f] text-[10px] md:text-xs font-sans cursor-pointer select-none"
+              >
+                <div
+                  className={`w-2 h-2 md:w-2.5 md:h-2.5 rounded-full transition-all duration-200 ${activeIndicators[key] ? (key === "act" ? "bg-accent shadow-[0_0_10px_var(--color-accent)]" : "bg-success shadow-[0_0_10px_var(--color-success)]") : "bg-[#2a2d36]"}`}
+                />
+                {key.toUpperCase()}
+              </div>
+            ))}
+          </div>
+
+          <div className="flex items-stretch gap-3 md:gap-5">
+            <div className="flex flex-col gap-2 md:gap-2.5 w-16 md:w-20">
+              {activeSfp.map((isActive, i) => (
+                <div
+                  key={i}
+                  onClick={() => {
+                    const newSfp = [...activeSfp];
+                    newSfp[i] = !newSfp[i];
+                    setActiveSfp(newSfp);
+                  }}
+                  className="flex-1 border border-[#30333d] rounded-md flex flex-col justify-center items-center text-[#5c616f] text-[8px] md:text-[10px] cursor-pointer"
+                >
+                  <span>SFP+ {i + 1}</span>
+                  <div
+                    className={`w-[20px] md:w-[30px] h-1 rounded-sm mt-1.5 md:mt-2 transition-all ${isActive ? "bg-accent shadow-[0_0_8px_var(--color-accent)]" : "bg-[#2a2d36]"}`}
+                  />
+                </div>
+              ))}
+            </div>
+            <div className="flex-1 bg-[#090a0c] rounded-lg md:rounded-xl p-3 md:p-4 grid grid-cols-12 grid-rows-2 gap-2 md:gap-3 border border-[#1a1c21]">
+              {activeRj45.map((isActive, i) => (
+                <div
+                  key={i}
+                  onClick={() => toggleRj45(i)}
+                  className={`aspect-square border rounded-sm flex justify-center items-center cursor-pointer transition-all ${isActive ? "border-[#3e2823] bg-[#121418]" : "border-[#2a2d36] bg-[#121418]"}`}
+                >
+                  <div
+                    className={`w-[60%] h-[60%] rounded-[3px] flex justify-center items-center transition-all ${isActive ? "shadow-[inset_0_0_8px_rgba(232,107,53,0.4)] bg-accent/10" : "bg-transparent"}`}
+                  >
+                    <div
+                      className={`w-1 h-1 rounded-full transition-all ${isActive ? "bg-accent shadow-[0_0_6px_var(--color-accent)]" : "bg-[#30333d]"}`}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col w-full gap-3 mb-12 sm:flex-row sm:w-auto md:gap-4 md:mb-16">
+        <button className="justify-center w-full px-6 py-3 text-sm font-bold text-center transition border rounded-lg sm:w-auto border-border text-muted hover:text-foreground hover:bg-white/5">
+          مشاهده نمونه‌کارها
+        </button>
+        <button className="w-full sm:w-auto px-6 py-3 rounded-lg text-sm font-bold border border-border bg-panel text-foreground hover:bg-[#1a2030] hover:border-accent transition flex items-center justify-center gap-2">
+          دریافت مشاوره رایگان <span>&#x2039;</span>
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/src/components/network/Projects.tsx
+++ b/src/components/network/Projects.tsx
@@ -0,0 +1,172 @@
+"use client";
+import { useRef, useState } from "react";
+
+export default function Projects() {
+  const projects = [
+    {
+      category: "شبکه بی‌سیم",
+      client: "هتل پارسیان",
+      title: "WiFi سراسری هتل",
+      desc: "پوشش کامل WiFi با امنیت بالا و تفکیک شبکه مهمان",
+      tag: "Wireless 📡",
+      year: "۲۰۲۵",
+    },
+    {
+      category: "امنیتی",
+      client: "بانک سامان",
+      title: "پیاده‌سازی فایروال",
+      desc: "نصب و پیکربندی تجهیزات Fortinet جهت ارتقای امنیت شبکه",
+      tag: "Security 🛡️",
+      year: "۲۰۲۴",
+    },
+    {
+      category: "سازمانی",
+      client: "شرکت مپنا",
+      title: "زیرساخت دیتاسنتر",
+      desc: "طراحی و اجرای پسیو و اکتیو شبکه دیتاسنتر مرکزی",
+      tag: "Data Center 🏢",
+      year: "۲۰۲۴",
+    },
+    {
+      category: "ارتباطات",
+      client: "بیمه پاسارگاد",
+      title: "ارتباط شعب",
+      desc: "برقراری ارتباط امن بین شعب از طریق تونل‌های IPsec",
+      tag: "VPN 🔗",
+      year: "۲۰۲۳",
+    },
+    {
+      category: "امنیتی",
+      client: "بانک سامان",
+      title: "پیاده‌سازی فایروال",
+      desc: "نصب و پیکربندی تجهیزات Fortinet جهت ارتقای امنیت شبکه",
+      tag: "Security 🛡️",
+      year: "۲۰۲۴",
+    },
+    {
+      category: "سازمانی",
+      client: "شرکت مپنا",
+      title: "زیرساخت دیتاسنتر",
+      desc: "طراحی و اجرای پسیو و اکتیو شبکه دیتاسنتر مرکزی",
+      tag: "Data Center 🏢",
+      year: "۲۰۲۴",
+    },
+    {
+      category: "ارتباطات",
+      client: "بیمه پاسارگاد",
+      title: "ارتباط شعب",
+      desc: "برقراری ارتباط امن بین شعب از طریق تونل‌های IPsec",
+      tag: "VPN 🔗",
+      year: "۲۰۲۳",
+    },
+  ];
+
+  const sliderRef = useRef<any>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const nextSlide = () => {
+    if (sliderRef.current) {
+      sliderRef.current.scrollBy({ left: -320, behavior: "smooth" });
+    }
+  };
+
+  const prevSlide = () => {
+    if (sliderRef.current) {
+      sliderRef.current.scrollBy({ left: 320, behavior: "smooth" });
+    }
+  };
+
+  // Mouse drag handlers for desktop
+  const handleMouseDown = (e: any) => {
+    setIsDragging(true);
+    setStartX(e.pageX - sliderRef.current.offsetLeft);
+    setScrollLeft(sliderRef.current.scrollLeft);
+  };
+
+  const handleMouseLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleMouseMove = (e: any) => {
+    if (!isDragging) return;
+    e.preventDefault();
+    const x = e.pageX - sliderRef.current.offsetLeft;
+    const walk = (x - startX) * 2; // Scroll speed multiplier
+    sliderRef.current.scrollLeft = scrollLeft - walk;
+  };
+
+  return (
+    <div className="flex justify-center w-full px-5 py-20 bg-bg">
+      <div className="w-full max-w-6xl">
+        <div className="mb-8 text-right">
+          <h2 className="mb-2 text-3xl font-bold">پروژه‌های شبکه</h2>
+          <p className="text-sm text-muted">نمونه‌ای از پروژه‌های شبکه اجرا شده</p>
+        </div>
+
+        <div className="flex flex-wrap items-center justify-between gap-4 mb-8">
+          <div className="flex gap-2">
+            {["همه", "سازمانی", "امنیتی", "بی‌سیم"].map((tab, i) => (
+              <button
+                key={i}
+                className={`px-4 py-2 rounded-lg text-sm border transition ${
+                  i === 0 ? "bg-accent text-white border-accent" : "bg-transparent border-border text-muted hover:text-white"
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+          <div className="flex gap-2">
+            <button className="px-4 py-2 text-sm bg-transparent border rounded-lg border-border text-foreground hover:bg-card">
+              مشاهده همه پروژه‌ها
+            </button>
+            <button onClick={prevSlide} className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">
+              &lt;
+            </button>
+            <button onClick={nextSlide} className="flex items-center justify-center transition border rounded-lg w-9 h-9 border-border hover:bg-card">
+              &gt;
+            </button>
+          </div>
+        </div>
+
+        {/* Slider Container with Drag Events */}
+        <div
+          ref={sliderRef}
+          onMouseDown={handleMouseDown}
+          onMouseLeave={handleMouseLeave}
+          onMouseUp={handleMouseUp}
+          onMouseMove={handleMouseMove}
+          className={`flex gap-5 overflow-x-auto pb-4 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] ${
+            isDragging ? "cursor-grabbing snap-none" : "cursor-grab snap-x snap-mandatory scroll-smooth"
+          }`}
+        >
+          {projects.map((proj, i) => (
+            <div
+              key={i}
+              // Changed mobile width to 85% to show 1.5 items
+              className="bg-card border border-border rounded-2xl p-6 relative overflow-hidden shadow-2xl flex flex-col group min-h-[200px] shrink-0 snap-start select-none w-[85%] sm:w-[calc(50%-10px)] lg:w-[calc(25%-15px)]"
+            >
+              <div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(circle_at_top_right,rgba(199,92,67,0.15),transparent_60%)] pointer-events-none" />
+              <div className="flex items-center justify-between mb-5 text-xs">
+                <span className="px-3 py-1 border rounded-full text-accent bg-accent/10 border-accent/30">{proj.category}</span>
+                <span className="text-muted">{proj.client}</span>
+              </div>
+              <h3 className="mb-3 text-lg">{proj.title}</h3>
+              <p className="flex-grow mb-5 text-sm text-muted">{proj.desc}</p>
+              <div className="flex items-center justify-between pt-4 mt-auto text-xs border-t border-border text-muted">
+                <span>{proj.tag}</span>
+                <span>{proj.year}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/network/Services.tsx
+++ b/src/components/network/Services.tsx
@@ -0,0 +1,33 @@
+export default function ServicesSection() {
+  const services = [
+    { title: "شبکه بی‌سیم", subtitle: "WIFI Enterprise", icon: "📶" },
+    { title: "امنیت", subtitle: "IDS/IPS و Firewall", icon: "🛡️" },
+    { title: "طراحی شبکه", subtitle: "معماری و توپولوژی", icon: "📐" },
+    { title: "پشتیبانی", subtitle: "Support ۲۴/۷", icon: "🎧" },
+    { title: "VPN & WAN", subtitle: "اتصال بین سایت", icon: "🔗" },
+    { title: "مانیتورینگ", subtitle: "نظارت ۲۴/۷", icon: "📈" },
+  ];
+
+  return (
+    <section className="relative w-full px-5 pt-20 pb-10 border-t border-border/50 bg-bg">
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[400px] bg-[radial-gradient(ellipse_at_center,rgba(160,45,20,0.15)_0%,transparent_60%)] pointer-events-none" />
+      <div className="relative z-10 max-w-6xl mx-auto">
+        <div className="mb-12 text-right">
+          <h2 className="mb-2 text-3xl font-bold">خدمات شبکه</h2>
+          <p className="text-sm text-muted">راهکارهای جامع برای زیرساخت شبکه سازمان شما</p>
+        </div>
+        <div className="grid grid-cols-1 gap-5 mb-20 md:grid-cols-2 lg:grid-cols-3">
+          {services.map((svc, i) => (
+            <div key={i} className="flex flex-col items-center p-10 text-center border bg-card rounded-xl border-border">
+              <div className="flex items-center justify-center mb-5 text-2xl w-14 h-14 rounded-2xl bg-gradient-to-br from-accent-light to-accent">
+                {svc.icon}
+              </div>
+              <h3 className="text-lg mb-1.5">{svc.title}</h3>
+              <p className="font-sans text-xs tracking-wide text-muted">{svc.subtitle}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/network/Technologies.tsx
+++ b/src/components/network/Technologies.tsx
@@ -0,0 +1,72 @@
+export default function Technologies() {
+  const techs = [
+    {
+      name: "VPN",
+      icon: (
+        <svg className="w-8 h-8 fill-none stroke-accent stroke-[1.5] rounded-linecap rounded-linejoin" viewBox="0 0 24 24">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+        </svg>
+      ),
+    },
+    {
+      name: "Cloud",
+      icon: (
+        <svg className="w-8 h-8 fill-none stroke-accent stroke-[1.5] rounded-linecap rounded-linejoin" viewBox="0 0 24 24">
+          <path d="M17.5 19H9a7 7 0 1 1 6.71-5h1.79a4.5 4.5 0 1 1 0 9Z" />
+        </svg>
+      ),
+    },
+    {
+      name: "Monitoring",
+      icon: (
+        <svg className="w-8 h-8 fill-none stroke-accent stroke-[1.5] rounded-linecap rounded-linejoin" viewBox="0 0 24 24">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+          <line x1="8" y1="12" x2="8" y2="16" />
+          <line x1="12" y1="8" x2="12" y2="16" />
+          <line x1="16" y1="14" x2="16" y2="16" />
+        </svg>
+      ),
+    },
+    {
+      name: "Fortinet",
+      icon: (
+        <svg className="w-8 h-8 fill-none stroke-accent stroke-[1.5] rounded-linecap rounded-linejoin" viewBox="0 0 24 24">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+      ),
+    },
+    {
+      name: "Ubiquiti",
+      icon: (
+        <svg className="w-8 h-8 fill-none stroke-accent stroke-[1.5] rounded-linecap rounded-linejoin" viewBox="0 0 24 24">
+          <path d="M5 12.55a11 11 0 0 1 14.08 0" />
+          <path d="M1.42 9a16 16 0 0 1 21.16 0" />
+          <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
+          <line x1="12" y1="20" x2="12.01" y2="20" />
+        </svg>
+      ),
+    },
+    { name: "MikroTik", icon: null },
+  ];
+
+  return (
+    <div className="w-full bg-[#0e131d] border-t border-white/5 py-20 px-5 flex justify-center">
+      <div className="w-full max-w-6xl mx-auto">
+        <div className="mb-12 text-right">
+          <h2 className="mb-2 text-3xl font-bold">تکنولوژی‌ها</h2>
+          <p className="text-sm text-muted">تجهیزات و فناوری‌های مورد استفاده</p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+          {techs.map((tech, i) => (
+            <div key={i} className="bg-transparent p-4 rounded-xl border border-border flex flex-col items-center justify-center gap-4 h-[140px]">
+              {tech.icon}
+              <span className="font-sans text-xs font-semibold tracking-wide text-foreground">{tech.name}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/shared/Navbar.tsx
+++ b/src/components/shared/Navbar.tsx
@@ -1,11 +1,19 @@
+"use client";
+
+import { useState } from "react";
+
 export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false);
+
  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">
+        {/* Logo */}
        <div className="text-xl font-bold">
-          رایین <span className="text-accent">شبکه</span>
+          رابین <span className="text-accent">شبکه</span>
        </div>

+        {/* Desktop Navigation */}
        <nav className="hidden md:block">
          <ul className="flex gap-8 text-sm text-muted">
            <li className="transition cursor-pointer hover:text-foreground">صفحه اصلی</li>
@@ -16,11 +24,48 @@ export default function Navbar() {
          </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>
+        {/* Desktop Actions & Mobile Menu Toggle */}
+        <div className="flex items-center gap-3">
+          <div className="hidden gap-3 md:flex">
+            <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>
+
+          {/* Mobile Menu Button */}
+          <button className="p-1 transition md:hidden text-muted hover:text-foreground" onClick={() => setIsOpen(!isOpen)} aria-label="Toggle menu">
+            {isOpen ? (
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+            )}
+          </button>
        </div>
      </div>
+
+      {/* Mobile Dropdown Menu */}
+      {isOpen && (
+        <div className="border-t md:hidden border-white/5 bg-bg/95 backdrop-blur-lg">
+          <nav className="px-6 py-4">
+            <ul className="flex flex-col gap-4 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>
+
+            {/* Mobile Actions */}
+            <div className="flex gap-3 pt-4 mt-6 border-t border-white/5">
+              <button className="border border-border px-3 py-1.5 rounded-md text-sm hover:bg-card transition flex-1">EN</button>
+              <button className="border border-border px-3 py-1.5 rounded-md text-sm hover:bg-card transition flex-1">☾</button>
+            </div>
+          </nav>
+        </div>
+      )}
    </header>
  );
 }
--- a/src/components/single-academy/ArticleBody.tsx
+++ b/src/components/single-academy/ArticleBody.tsx
@@ -0,0 +1,152 @@
+import React from "react";
+import { List, BarChart2, Tag, Lightbulb, CheckCircle2, Share2, Copy } from "lucide-react";
+
+export default function ArticleBody() {
+  return (
+    <div className="flex flex-col gap-12 mb-20 lg:flex-row">
+      {/* Sidebar */}
+      <aside className="w-full lg:w-1/4 shrink-0">
+        <div className="sticky space-y-6 top-24">
+          {/* Table of Contents */}
+          <div className="p-5 border bg-slate-900/50 border-slate-800 rounded-xl">
+            <div className="flex items-center gap-2 mb-4 text-sm font-medium text-gray-300">
+              <List className="w-4 h-4 text-orange-500" />
+              فهرست مطالب
+            </div>
+            <ul className="space-y-3 text-sm text-gray-500">
+              <li className="transition-colors cursor-pointer hover:text-orange-400">مسئله اصلی: نمادها، نه مقدار</li>
+              <li className="transition-colors cursor-pointer hover:text-orange-400">مرحله اضافی مغز</li>
+              <li className="transition-colors cursor-pointer hover:text-orange-400">دیسکلکولیا چیست؟</li>
+            </ul>
+          </div>
+
+          {/* Reading Progress */}
+          <div className="p-5 border bg-slate-900/50 border-slate-800 rounded-xl">
+            <div className="flex items-center gap-2 mb-4 text-sm font-medium text-gray-300">
+              <BarChart2 className="w-4 h-4 text-orange-500" />
+              پیشرفت مطالعه
+            </div>
+            <div className="w-full bg-slate-800 rounded-full h-1.5 mb-2">
+              <div className="bg-orange-500 h-1.5 rounded-full w-[35%]"></div>
+            </div>
+          </div>
+
+          {/* Tags */}
+          <div className="p-5 border bg-slate-900/50 border-slate-800 rounded-xl">
+            <div className="flex items-center gap-2 mb-4 text-sm font-medium text-gray-300">
+              <Tag className="w-4 h-4 text-orange-500" />
+              برچسب‌ها
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <span className="text-xs px-2.5 py-1 rounded-md border border-slate-700 text-gray-400 hover:text-white hover:border-orange-500/50 transition-colors cursor-pointer">
+                دیسکلکولیا
+              </span>
+              <span className="text-xs px-2.5 py-1 rounded-md border border-slate-700 text-gray-400 hover:text-white hover:border-orange-500/50 transition-colors cursor-pointer">
+                علوم اعصاب
+              </span>
+              <span className="text-xs px-2.5 py-1 rounded-md border border-slate-700 text-gray-400 hover:text-white hover:border-orange-500/50 transition-colors cursor-pointer">
+                یادگیری
+              </span>
+              <span className="text-xs px-2.5 py-1 rounded-md border border-slate-700 text-gray-400 hover:text-white hover:border-orange-500/50 transition-colors cursor-pointer">
+                کودکان
+              </span>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <article className="w-full space-y-8 leading-8 text-gray-300 lg:w-3/4">
+        <p>
+          برخی کودکان در یادگیری ریاضی مشکل دارند و حل مسائل برایشان سخت است، در حالی که هم‌کلاسی‌هایشان همان مسائل را راحت انجام می‌دهند. سال‌هاست که
+          پژوهشگران متوجه شده‌اند بخشی از این تفاوت به چیزی به نام «اختلال یادگیری ریاضی» یا <strong>دیسکلکولیا</strong> مربوط می‌شود.
+        </p>
+        <p>
+          این وضعیت باعث می‌شود کودک در درک و کار با اعداد مشکل داشته باشد، حتی اگر هوش کلی او طبیعی باشد. اکنون مطالعه‌ای تازه با استفاده از
+          تصویربرداری مغزی، سرنخ‌های دقیق‌تری از دلیل این اختلاف‌ها ارائه کرده است.
+        </p>
+
+        {/* Highlight Box */}
+        <div className="flex items-start gap-4 p-6 border bg-orange-500/5 border-orange-500/20 rounded-xl">
+          <Lightbulb className="w-6 h-6 mt-1 text-orange-500 shrink-0" />
+          <p className="m-0 font-medium leading-relaxed text-orange-100/90">
+            دانشمندان نشان داده‌اند کودکانی که اختلال یادگیری ریاضی دارند، هنگام کار با نمادهای عددی رویکرد متفاوتی نسبت به دیگر کودکان دارند.
+          </p>
+        </div>
+
+        <p>
+          آن‌ها در پاسخ‌دادن احتیاط کمتری نشان می‌دهند و وقتی اشتباه می‌کنند، برخلاف همسالانشان سرعت خود را کم نمی‌کنند تا عملکردشان را اصلاح کنند.
+          اما نکته جالب اینجاست: وقتی همان مسئله‌ها به جای عدد، با «نقطه» نمایش داده شد، این تفاوت‌ها از بین رفت.
+        </p>
+
+        <h2 className="pr-3 mt-12 mb-6 text-2xl font-bold text-white border-r-4 border-orange-500">مسئله اصلی: نمادها، نه مقدار</h2>
+
+        <p>
+          این ایده که «نمادهای عددی» برای برخی کودکان چالش‌برانگیز است، موضوع تازه‌ای نیست. <strong>برت دسمت</strong>، عصب‌پژوه آموزشی در دانشگاه
+          کی‌یو لوون بلژیک که در پژوهش حضور نداشت، می‌گوید سال‌هاست مشاهده می‌شود که مشکل اصلی این کودکان بیشتر در «پردازش نمادین» است؛ یعنی درک اینکه
+          یک علامت نوشتاری مثل «۷» نماینده یک مقدار مشخص است.
+        </p>
+
+        {/* Blockquote */}
+        <blockquote className="p-6 my-8 border-r-2 border-orange-500/50 bg-slate-900/50 rounded-l-xl">
+          <p className="mb-4 text-lg font-medium leading-relaxed text-white">
+            مشکل اصلی این کودکان بیشتر در «پردازش نمادین» است؛ یعنی درک اینکه یک علامت نوشتاری مثل «۷» نماینده یک مقدار مشخص است.
+          </p>
+          <footer className="flex items-center gap-2 text-sm text-orange-500/80">
+            <div className="w-4 h-[1px] bg-orange-500/50"></div>
+            برت دسمت — عصب‌پژوه آموزشی، دانشگاه کی‌یو لوون
+          </footer>
+        </blockquote>
+
+        <h2 className="pr-3 mt-12 mb-6 text-2xl font-bold text-white border-r-4 border-orange-500">مرحله اضافی مغز</h2>
+        <p>
+          به بیان ساده، بسیاری از کودکان می‌توانند وقتی با چند شیء واقعی یا چند نقطه روبه‌رو می‌شوند، مقدار را حدس بزنند یا مقایسه کنند؛ اما وقتی همان
+          مقدار به شکل یک نماد انتزاعی نوشته می‌شود، مغزشان باید یک مرحله اضافی برای ترجمه آن نماد به مفهوم عدد طی کند.
+        </p>
+
+        {/* Info List Box */}
+        <div className="p-8 my-10 border bg-slate-900/40 border-slate-800 rounded-xl">
+          <h3 className="flex items-center gap-2 mb-6 text-xl font-bold text-white">
+            <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
+            دیسکلکولیا چیست؟
+          </h3>
+          <ul className="space-y-4">
+            <li className="flex items-center gap-3 text-gray-300">
+              <CheckCircle2 className="w-5 h-5 text-orange-500 shrink-0" />
+              <span>اختلال یادگیری خاص در حوزه ریاضی</span>
+            </li>
+            <li className="flex items-center gap-3 text-gray-300">
+              <CheckCircle2 className="w-5 h-5 text-orange-500 shrink-0" />
+              <span>ربطی به هوش کلی کودک ندارد</span>
+            </li>
+            <li className="flex items-center gap-3 text-gray-300">
+              <CheckCircle2 className="w-5 h-5 text-orange-500 shrink-0" />
+              <span>ریشه در پردازش نمادین اعداد دارد</span>
+            </li>
+            <li className="flex items-center gap-3 text-gray-300">
+              <CheckCircle2 className="w-5 h-5 text-orange-500 shrink-0" />
+              <span>با روش‌های آموزشی مناسب قابل مدیریت است</span>
+            </li>
+          </ul>
+        </div>
+
+        {/* Article Footer Actions */}
+        <div className="flex flex-wrap items-center justify-between gap-4 pt-8 border-t border-slate-800">
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-gray-400">اشتراک‌گذاری:</span>
+            <button className="flex items-center justify-center text-gray-400 transition-colors border rounded w-9 h-9 border-slate-700 hover:text-white hover:border-slate-500">
+              <Share2 className="w-4 h-4" />
+            </button>
+            <button className="flex items-center justify-center text-gray-400 transition-colors border rounded w-9 h-9 border-slate-700 hover:text-white hover:border-slate-500">
+              <Copy className="w-4 h-4" />
+            </button>
+          </div>
+          <div className="flex gap-2">
+            <span className="text-xs px-3 py-1.5 rounded bg-slate-900 border border-slate-800 text-gray-400">دیسکلکولیا</span>
+            <span className="text-xs px-3 py-1.5 rounded bg-slate-900 border border-slate-800 text-gray-400">علوم اعصاب</span>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}
--- a/src/components/single-academy/ArticleHeader.tsx
+++ b/src/components/single-academy/ArticleHeader.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { ChevronRight, Clock, Calendar, Bookmark, Share2, User } from "lucide-react";
+
+export default function ArticleHeader() {
+  return (
+    <header className="mb-16">
+      {/* Back Button */}
+      <a href="/academy" className="inline-flex items-center mb-8 text-sm text-gray-400 transition-colors hover:text-orange-500">
+        <ChevronRight className="w-4 h-4 ml-1" />
+        بازگشت به آکادمی
+      </a>
+
+      {/* Meta Info */}
+      <div className="flex flex-wrap items-center gap-4 mb-6 text-xs text-gray-400">
+        <span className="px-3 py-1 text-orange-500 border rounded-full bg-orange-500/10 border-orange-500/20">علوم اعصاب</span>
+        <div className="flex items-center">
+          <Clock className="w-4 h-4 ml-1.5 text-orange-500" />۸ دقیقه مطالعه
+        </div>
+        <div className="flex items-center">
+          <Calendar className="w-4 h-4 ml-1.5 text-orange-500" />
+          ۱۰ فروردین ۱۴۰۴
+        </div>
+      </div>
+
+      {/* Title & Excerpt */}
+      <h1 className="mb-6 text-4xl font-bold leading-tight md:text-5xl">دیسکلکولیا: وقتی مغز با اعداد کنار نمی‌آید</h1>
+      <div className="pr-4 mb-8 border-r-2 border-orange-500">
+        <p className="text-lg leading-relaxed text-gray-300">
+          پژوهش جدید با تصویربرداری مغزی نشان می‌دهد مشکل اصلی کودکان مبتلا به اختلال یادگیری ریاضی، نه در درک مقدار، بلکه در پردازش نمادهای عددی
+          نهفته است.
+        </p>
+      </div>
+
+      {/* Author & Actions */}
+      <div className="flex items-center justify-between mb-12">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center justify-center w-10 h-10 text-orange-500 border rounded-full bg-slate-800 border-slate-700">
+            <User className="w-5 h-5" />
+          </div>
+          <div>
+            <div className="text-sm font-medium">تیم آکادمی رابین</div>
+            <div className="text-xs text-gray-400">علم و فناوری</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button className="flex items-center justify-center w-10 h-10 text-gray-400 transition-all border rounded-lg border-slate-800 bg-slate-900/50 hover:text-white hover:border-slate-600">
+            <Share2 className="w-4 h-4" />
+          </button>
+          <button className="flex items-center justify-center w-10 h-10 text-gray-400 transition-all border rounded-lg border-slate-800 bg-slate-900/50 hover:text-white hover:border-slate-600">
+            <Bookmark className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Hero Image */}
+      <div className="w-full aspect-[21/9] rounded-2xl border border-slate-800 bg-gradient-to-br from-slate-900 to-slate-800 relative overflow-hidden flex items-center justify-center">
+        {/* Placeholder for actual image - representing the brain and numbers network */}
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-orange-500/10 via-transparent to-transparent"></div>
+        <div className="flex flex-col items-center text-orange-500/50">
+          <span className="mb-4 text-6xl">🧠</span>
+          <div className="absolute p-2 text-sm border rounded-lg top-1/4 left-1/3 border-slate-700 bg-slate-800/50">۳</div>
+          <div className="absolute p-2 text-sm border rounded-lg bottom-1/3 right-1/4 border-slate-700 bg-slate-800/50">۷</div>
+          <div className="absolute p-2 text-sm border rounded-lg top-1/2 left-1/4 border-slate-700 bg-slate-800/50">۵</div>
+          <div className="absolute p-2 text-sm border rounded-lg top-1/3 right-1/3 border-slate-700 bg-slate-800/50">۹</div>
+        </div>
+      </div>
+    </header>
+  );
+}
--- a/src/components/single-academy/RelatedArticles.tsx
+++ b/src/components/single-academy/RelatedArticles.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { BookOpen, Clock } from "lucide-react";
+
+export default function RelatedArticles() {
+  const articles = [
+    {
+      id: 1,
+      category: "امنیت",
+      title: "۱۰ نکته طلایی برای امن‌سازی Firewall",
+      time: "۱۲ دقیقه",
+      gradient: "from-slate-800 to-slate-900",
+    },
+    {
+      id: 2,
+      category: "شبکه",
+      title: "راهنمای کامل پیکربندی MikroTik",
+      time: "۱۵ دقیقه",
+      gradient: "from-slate-800 to-slate-900",
+    },
+    {
+      id: 3,
+      category: "DEVOPS",
+      title: "راه‌اندازی CI/CD Pipeline با GitHub Actions",
+      time: "۲۵ دقیقه",
+      gradient: "from-orange-900/20 to-slate-900",
+    },
+  ];
+
+  return (
+    <section className="pt-16 mb-16 border-t border-slate-800">
+      <div className="flex items-center justify-between mb-8">
+        <h2 className="flex items-center gap-2 text-xl font-bold text-white">
+          <BookOpen className="w-5 h-5 text-orange-500" />
+          مقالات مرتبط
+        </h2>
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        {articles.map((article) => (
+          <div
+            key={article.id}
+            className="overflow-hidden transition-all duration-300 border cursor-pointer group rounded-2xl border-slate-800 bg-slate-900/50 hover:border-orange-500/50"
+          >
+            <div className={`w-full h-32 bg-gradient-to-br ${article.gradient} opacity-50 group-hover:opacity-100 transition-opacity`}></div>
+            <div className="p-5">
+              <span className="block mb-3 text-xs font-medium text-orange-500">{article.category}</span>
+              <h3 className="mb-4 font-medium text-white transition-colors group-hover:text-orange-400 line-clamp-2">{article.title}</h3>
+              <div className="flex items-center text-xs text-gray-500">
+                <Clock className="w-3.5 h-3.5 ml-1" />
+                {article.time}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/src/components/software/TechStack.tsx
+++ b/src/components/software/TechStack.tsx
@@ -159,8 +159,8 @@ export default function TechStack() {
          }}
        >
          {/* Sun (Center) */}
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 text-2xl sm:text-3xl lg:text-4xl rounded-full bg-accent shadow-[0_0_40px_rgba(249,115,22,0.6)] sm:shadow-[0_0_60px_rgba(249,115,22,0.6)]">
-            ☀️
+          <div className="absolute text-center text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 lg:w-24 lg:h-24 sm:text-base lg:text-lg rounded-full bg-accent shadow-[0_0_40px_rgba(249,115,22,0.6)] sm:shadow-[0_0_60px_rgba(249,115,22,0.6)]">
+            Tech Stack
          </div>

          {/* Orbits (Rings 1 to 4) */}