From 3933dbba654c8907d87b1f34c6162755bcd127cf Mon Sep 17 00:00:00 2001
From: GitHub Actions <actions@github.com>
Date: Thu, 7 May 2026 23:48:13 +0330
Subject: [PATCH 1/2] add single news page

---
 next.config.js                                |  44 +-
 .../[slug]/components/AuthorCard.tsx          |  96 +++
 .../[slug]/components/AuthorSection.tsx       | 175 ++++++
 .../[slug]/components/NewsContent.tsx         | 195 +++++++
 .../[slug]/components/NewsGallery.tsx         |  45 ++
 .../[slug]/components/NewsHeader.tsx          |  15 +
 .../[slug]/components/NewsImage.tsx           | 143 +++++
 .../[slug]/components/NewsNavCard.tsx         |  80 +++
 .../[slug]/components/NewsSideCard.tsx        | 149 +++++
 .../[slug]/components/NewsStats.tsx           | 134 +++++
 .../[category]/[slug]/components/NewsTags.tsx | 117 ++++
 .../[slug]/components/PrevNextNews.tsx        | 152 +++++
 .../components/RelatedArticlesSlider.tsx      | 168 ++++++
 .../[slug]/components/ShowSocialWrapper.tsx   |  74 +++
 .../[slug]/components/ShredpageArticle.tsx    | 180 ++++++
 .../[category]/[slug]/components/SideCard.tsx | 117 ++++
 .../categories/[category]/[slug]/page.tsx     | 545 ++++++++++++++++++
 .../news/categories/[category]/page.tsx       | 299 ++++++----
 src/app/[lang]/news/categories/page.tsx       | 145 ++++-
 .../[lang]/news/components/ArticleCard.tsx    |   1 +
 src/app/[lang]/news/components/LatestNews.tsx |   2 +-
 .../[lang]/news/components/MainNewsCard.tsx   |   1 +
 .../[lang]/news/components/PopularNews.tsx    |  28 +-
 .../[lang]/news/components/VideoNewsList.tsx  | 109 ++--
 src/app/[lang]/news/page.tsx                  | 225 ++++++--
 src/components/utils/news.json                | 122 ++++
 src/styles/global.css                         |  12 +
 27 files changed, 3130 insertions(+), 243 deletions(-)
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/AuthorCard.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/AuthorSection.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsGallery.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsHeader.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsImage.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsNavCard.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsSideCard.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsStats.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/NewsTags.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/PrevNextNews.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/RelatedArticlesSlider.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/ShowSocialWrapper.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/ShredpageArticle.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/components/SideCard.tsx
 create mode 100644 src/app/[lang]/news/categories/[category]/[slug]/page.tsx
 create mode 100644 src/components/utils/news.json

diff --git a/next.config.js b/next.config.js
index 801b39bc..09d842d1 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,7 +7,7 @@ const nextConfig = {
   // 🔹 فعال‌کردن سورس‌مپ در پروداکشن (برای رفع هشدار Missing source maps)
   productionBrowserSourceMaps: true,
 
-logging: {
+  logging: {
     fetches: {
       fullUrl: true,
     },
@@ -68,26 +68,30 @@ logging: {
     return config;
   },
 
-images: {
-  deviceSizes: [320, 480, 640, 768, 1024, 1280, 1536],
-  imageSizes: [16, 32, 64, 128, 256, 384, 512, 540, 600],
+  images: {
+    deviceSizes: [320, 480, 640, 768, 1024, 1280, 1536],
+    imageSizes: [16, 32, 64, 128, 256, 384, 512, 540, 600],
+qualities: [25, 50, 75],
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      { protocol: 'https', hostname: 'dl.qzparadise.ir' },
+      { protocol: 'https', hostname: 'api.metarang.com' },
+      { protocol: 'https', hostname: 'api.rgb.irpsc.com' },
+      { protocol: 'https', hostname: 'admin.metarang.com' },
+      { protocol: 'https', hostname: 'admin.rgb.irpsc.com' },
+      { protocol: 'https', hostname: '*.irpsc.com' }, 
+      { protocol: 'https', hostname: 'rgb.irpsc.com' },
+      { protocol: 'http', hostname: 'rgb.irpsc.com' },
+      { protocol: 'https', hostname: 'metarang.com' },
+      { protocol: 'http', hostname: 'localhost' },
+      { protocol: 'https', hostname: 'irpsc.com' },
+      { protocol: 'https', hostname: 'frdevelop2.irpsc.com' },
+      { protocol: 'https', hostname: 'supabase.com' },
+      { protocol: 'https', hostname: '3d.irpsc.com' },
+      { protocol: 'https', hostname: 'metarang.com' },
 
-  formats: ['image/avif', 'image/webp'],
-  remotePatterns: [
-    { protocol: 'https', hostname: 'dl.qzparadise.ir' },
-    { protocol: 'https', hostname: 'api.metarang.com' },
-    { protocol: 'https', hostname: 'api.rgb.irpsc.com' },
-    { protocol: 'https', hostname: 'admin.metarang.com' },
-    { protocol: 'https', hostname: 'admin.rgb.irpsc.com' },
-    { protocol: 'http', hostname: 'localhost' },
-    { protocol: 'https', hostname: 'irpsc.com' },
-    { protocol: 'https', hostname: 'frdevelop2.irpsc.com' },
-    { protocol: 'https', hostname: 'supabase.com' },
-    { protocol: 'https', hostname: '3d.irpsc.com' },
-    { protocol: 'https', hostname: 'metarang.com' },
-
-  ],
-},
+    ],
+  },
 
 };
 
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/AuthorCard.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/AuthorCard.tsx
new file mode 100644
index 00000000..2d7c5113
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/AuthorCard.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+interface AuthorCardProps {
+  lang: string;
+  article: any; // می‌تونی تایپ دقیق هم بزنی
+  mainData: { mainData: string }
+}
+
+const AuthorCard = ({ lang, article, mainData }: AuthorCardProps) => {
+  const author = article?.author;
+  if (!author) return null;
+  const [linkLoading, setLinkLoading] = useState(false);
+  return (
+    <section className="w-full flex justify-center my-10">
+      {linkLoading && (
+        <div className="fixed top-0 left-0 bottom-0  w-full  h-screen z-[70] flex items-center justify-center bg-black/60 backdrop-blur-sm" >
+          <div className="container flex w-full h-screen items-center justify-center md:ms-[25vw] lg:ms-[17vw] xl:ms-[15vw] 3xl:ms-[16vw]">
+            <div className="holder">
+              <div className="box"></div>
+            </div>
+            <div className="holder">
+              <div className="box"></div>
+            </div>
+            <div className="holder">
+              <div className="box"></div>
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="bg-white dark:bg-[#1A1A18] border border-gray-200 dark:border-gray-700 rounded-2xl shadow-md p-6 w-full flex flex-col items-center text-center md:px-12">
+
+        {/* عکس پروفایل */}
+        <div className="flex flex-col gap-4 mt-[-85px]">
+          <div className="relative w-[120px] h-[120px] bg-lightGray rounded-full overflow-hidden border shadow-md">
+            <Image
+              src={author.avatar || "/articles/author/fallback-avatar.jpg"}
+              alt={author.name || "نویسنده"}
+              width={120}
+              height={120}
+              className="object-cover"
+            />
+          </div>
+          <div className="flex flex-col text-center">
+            <Link onClickCapture={() => setLinkLoading(true)} href={`/${lang}/citizens/${author.citizenId.toLowerCase()}` || ""} className="text-sm text-blue-500 mt-2">{author.citizenId}</Link>
+            <h2 className="text-lg font-bold mt-1 dark:text-white">{author.name}</h2>
+          </div>
+        </div>
+
+        {/* حوزه فعالیت و شبکه‌ها */}
+        <div className="flex flex-col lg:flex-row md:flex-row md:justify-between w-full gap-5 items-center mt-5 md:mt-[-34px]">
+          <div>
+            <p className="text-sm text-gray-500 dark:text-dark-gray">
+              {findByUniqueId(mainData, 1508)} {author.field}
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            {author.socials?.telegram && (
+              <a href={author.socials.telegram} target="_blank" rel="noopener noreferrer">
+                <Image width={37} height={37} src="/social/telegram-circle.png" alt="Telegram" />
+              </a>
+            )}
+            {author.socials?.whatsapp && (
+              <a href={`https://wa.me/${author.socials.whatsapp}`} target="_blank" rel="noopener noreferrer">
+                <Image width={37} height={37} src="/social/whatsapp-circle.png" alt="WhatsApp" />
+              </a>
+            )}
+            {author.socials?.email && (
+              <a href={`mailto:${author.socials.email}`}>
+                <Image width={37} height={37} src="/social/envelope-circle.png" alt="Email" />
+              </a>
+            )}
+          </div>
+        </div>
+
+        {/* بیوگرافی */}
+        <p className="mt-5 text-sm text-gray-600 dark:text-dark-gray leading-relaxed max-w-2xl">
+          {author.bio}
+        </p>
+
+        {/* دکمه دیدن مقالات نویسنده */}
+        <Link onClickCapture={() => setLinkLoading(true)}
+          href={`/${lang}/citizens/${author.citizenId.toLowerCase()}` || ""}
+          className="mt-6 px-5 py-2 rounded-lg bg-light-primary dark:bg-dark-yellow dark:text-black text-white font-bold text-sm hover:opacity-90 transition u"
+        >
+          {findByUniqueId(mainData, 1512)}
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default AuthorCard;
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/AuthorSection.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/AuthorSection.tsx
new file mode 100644
index 00000000..29e1f547
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/AuthorSection.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Like, Dislike, View } from "@/components/svgs/SvgEducation";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+
+interface NewsMetaProps {
+  author: {
+    name: string;
+    citizenId: string;
+    avatar: string;
+    bio?: string;
+    field?: string;
+  } | string; // می‌تواند string (JSON) یا object باشد
+  stats: {
+    views: number;
+    likes?: number;
+    dislikes?: number;
+    comments?: number;
+  };
+  // date?: string | null;
+  title: string;
+  excerpt?: string;
+  content?: any;
+  mainData: { mainData: string };
+  lang: string;
+}
+
+// تابع کمکی برای تبدیل author به object
+function parseAuthor(author: NewsMetaProps['author']): {
+  name: string;
+  citizenId: string;
+  avatar: string;
+  bio?: string;
+  field?: string;
+} {
+  // اگر已經是 object
+  if (typeof author === 'object' && author !== null && !Array.isArray(author)) {
+    return {
+      name: author.name || "نویسنده",
+      citizenId: author.citizenId || "",
+      avatar: author.avatar || "/clogo.png",
+      bio: author.bio,
+      field: author.field,
+    };
+  }
+  
+  // اگر string است، try to parse as JSON
+  if (typeof author === 'string') {
+    try {
+      const parsed = JSON.parse(author);
+      return {
+        name: parsed.name || "نویسنده",
+        citizenId: parsed.citizenId || "",
+        avatar: parsed.avatar || "/clogo.png",
+        bio: parsed.bio,
+        field: parsed.field,
+      };
+    } catch (e) {
+      console.error("Failed to parse author JSON:", e);
+    }
+  }
+  
+  // fallback
+  return {
+    name: "نویسنده",
+    citizenId: "",
+    avatar: "/clogo.png",
+  };
+}
+
+export default function NewsMeta({
+  author,
+  // date,
+  // excerpt,
+  title,
+  content,
+  stats,
+  mainData,
+  lang
+}: NewsMetaProps) {
+  // تبدیل author به object معتبر
+  const parsedAuthor = parseAuthor(author);
+  
+  // پاک کردن HTML و محاسبه تعداد کلمات
+  const plainText = content
+    ? content
+      .replace(/<[^>]+>/g, " ") // حذف تگ‌های HTML
+      .replace(/\s+/g, " ") // همه فاصله‌ها و خطوط جدید را به یک فاصله تبدیل کن
+      .trim()
+    : "";
+
+  const words = plainText ? plainText.split(" ").length : 0;
+  const readingTime = Math.max(1, Math.ceil(words / 200)); // 200 کلمه در دقیقه
+
+  return (
+    <div className="flex flex-col gap-5 w-full">
+      <div className="flex justify-between w-full">
+        <div className="flex items-center gap-2 text-sm text-gray-600">
+          <div>
+            <Image
+              src={parsedAuthor.avatar || "/clogo.png"}
+              alt={parsedAuthor.name}
+              width={60}
+              height={60}
+              className="rounded-full aspect-square w-[50px] h-[50px] md:w-[80px] md:h-[80px]"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2 justify-between">
+            <span className="text-xs md:text-xl dark:text-white">
+              {parsedAuthor.name}
+            </span>
+            {parsedAuthor.citizenId && (
+              <Link 
+                href={`/${lang}/citizens/${parsedAuthor.citizenId}`} 
+                className="text-xs md:text-base text-blueLink dark:text-blue-500 uppercase"
+              >
+                {parsedAuthor.citizenId}
+              </Link>
+            )}
+          </div>
+        </div>
+        
+        <div className="flex flex-col text-start justify-center">
+          <span className="items-center gap-1 flex text-[10px] md:text-sm text-[#868B90] text-start md:hidden">
+            <View className="stroke-textGray dark:stroke-[#888888] size-[16px]" />
+            {stats?.views ?? 0}
+          </span>
+          <span className="text-[10px] md:text-sm text-[#868B90] text-start flex items-center gap-1">
+            <span className="dark:text-white text-base mt-[4px] ms-[-1px]">
+              <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path 
+                  className="dark:stroke-[#888888] stroke-2" 
+                  d="M15.5635 10.4375C15.5635 14.06 12.6235 17 9.00098 17C5.37848 17 2.43848 14.06 2.43848 10.4375C2.43848 6.815 5.37848 3.875 9.00098 3.875C12.6235 3.875 15.5635 6.815 15.5635 10.4375Z" 
+                  stroke="#484950" 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                />
+                <path 
+                  className="dark:stroke-[#888888] stroke-2" 
+                  d="M9 6.5V10.25" 
+                  stroke="#484950" 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                />
+                <path 
+                  className="dark:stroke-[#888888] stroke-2" 
+                  d="M6.75 2H11.25" 
+                  stroke="#484950" 
+                  strokeMiterlimit="10" 
+                  strokeLinecap="round" 
+                  strokeLinejoin="round" 
+                />
+              </svg>
+            </span>
+            <span>
+              {findByUniqueId(mainData, 1503) || "زمان مطالعه"}: {readingTime} {findByUniqueId(mainData, 33) || "دقیقه"}
+            </span>
+          </span>
+        </div>
+      </div>
+      
+      <div className="space-y-7">
+        <h1 className="text-base md:leading-10 md:text-[32px] dark:text-white">{title}</h1>
+        {/* optionally uncomment excerpt */}
+        {/* {excerpt && (
+          <p className="text-[#484950] dark:text-[#868B90] text-sm md:text-[22px] leading-8">
+            {excerpt}
+          </p>
+        )} */}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx
new file mode 100644
index 00000000..6ac92282
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx
@@ -0,0 +1,195 @@
+// components/news/NewsContent.tsx
+
+"use client";
+
+import React, { useMemo, useState, useEffect } from "react";
+import NewsGallerySimple from "./NewsGallery";
+
+type NewsContentProps = {
+  content: string;
+  gallery?: string[] | null;
+  mainImage?: string;
+  galleryTitle?: string;
+};
+
+// کامپوننت اسکلت لودینگ گالری
+// کامپوننت اسکلت لودینگ گالری با افکت shimmer
+const GallerySkeleton = ({ title }: { title?: string }) => {
+  return (
+    <div className="w-full my-8 relative overflow-hidden">
+
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className="relative aspect-video rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-700 relative w-full"
+          >
+            <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/40 to-transparent" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default function NewsContent({ 
+  content, 
+  gallery, 
+  mainImage, 
+  galleryTitle = "گالری تصاویر" 
+}: NewsContentProps) {
+  const [isGalleryLoading, setIsGalleryLoading] = useState(true);
+  const [showRealGallery, setShowRealGallery] = useState(false);
+
+  // شبیه‌سازی لودینگ گالری
+  useEffect(() => {
+    if (!gallery || gallery.length === 0) {
+      setIsGalleryLoading(false);
+      return;
+    }
+    
+    // تاخیر برای نمایش اسکلت لودینگ
+    const timer = setTimeout(() => {
+      setIsGalleryLoading(false);
+      setShowRealGallery(true);
+    }, 500);
+    
+    return () => clearTimeout(timer);
+  }, [gallery]);
+  
+  // تابع برای پیدا کردن موقعیت مناسب بعد از پاراگراف یا لیست
+  const findInsertPosition = (htmlContent: string): number => {
+    // پیدا کردن تمام تگ‌های بسته شدن پاراگراف و لیست
+    const closingTags: { position: number; type: string }[] = [];
+    let searchIndex = 0;
+    
+    // پیدا کردن پاراگراف‌ها
+    while (true) {
+      const pClose = htmlContent.indexOf('</p>', searchIndex);
+      if (pClose === -1) break;
+      closingTags.push({ position: pClose + 4, type: 'p' });
+      searchIndex = pClose + 4;
+    }
+    
+    // پیدا کردن لیست‌های نامرتب (ul)
+    searchIndex = 0;
+    while (true) {
+      const ulClose = htmlContent.indexOf('</ul>', searchIndex);
+      if (ulClose === -1) break;
+      closingTags.push({ position: ulClose + 5, type: 'ul' });
+      searchIndex = ulClose + 5;
+    }
+    
+    // پیدا کردن لیست‌های مرتب (ol)
+    searchIndex = 0;
+    while (true) {
+      const olClose = htmlContent.indexOf('</ol>', searchIndex);
+      if (olClose === -1) break;
+      closingTags.push({ position: olClose + 5, type: 'ol' });
+      searchIndex = olClose + 5;
+    }
+    
+    // مرتب‌سازی بر اساس موقعیت
+    closingTags.sort((a, b) => a.position - b.position);
+    
+    // پیدا کردن سومین عنصر (پاراگراف یا لیست)
+    if (closingTags.length >= 3) {
+      const thirdElement = closingTags[2];
+      let insertPos = thirdElement.position;
+      
+      // چک کردن اینکه بعد از سومین عنصر، لیستی وجود دارد یا نه
+      const remainingContent = htmlContent.slice(insertPos);
+      const nextListIndex = Math.min(
+        remainingContent.indexOf('<ul>') !== -1 ? remainingContent.indexOf('<ul>') : Infinity,
+        remainingContent.indexOf('<ol>') !== -1 ? remainingContent.indexOf('<ol>') : Infinity
+      );
+      
+      const nextPIndex = remainingContent.indexOf('<p>');
+      
+      // اگر بعد از عنصر سوم، اولین چیزی که می‌آید لیست باشد
+      if (nextListIndex !== Infinity && (nextListIndex < nextPIndex || nextPIndex === -1)) {
+        // پیدا کردن انتهای آن لیست
+        const listTag = remainingContent[nextListIndex] === '<' && remainingContent[nextListIndex + 1] === 'u' ? 'ul' : 'ol';
+        const listCloseTag = `</${listTag}>`;
+        const listEndIndex = remainingContent.indexOf(listCloseTag);
+        
+        if (listEndIndex !== -1) {
+          insertPos = insertPos + listEndIndex + listCloseTag.length;
+        }
+      }
+      
+      return insertPos;
+    }
+    
+    // اگر کمتر از 3 عنصر داشت، بعد از آخرین عنصر قرار بده
+    if (closingTags.length > 0) {
+      return closingTags[closingTags.length - 1].position;
+    }
+    
+    return -1;
+  };
+
+  // تابع برای تقسیم محتوا
+  const renderContentWithGallery = useMemo(() => {
+    if (!gallery || gallery.length === 0) {
+      return { before: content, after: null, showGallery: false };
+    }
+
+    const insertPosition = findInsertPosition(content);
+    
+    if (insertPosition !== -1 && insertPosition < content.length) {
+      return {
+        before: content.slice(0, insertPosition),
+        after: content.slice(insertPosition),
+        showGallery: true
+      };
+    }
+    
+    // اگر موقعیت مناسبی پیدا نشد، گالری را به انتها اضافه کن
+    return { before: content, after: null, showGallery: true };
+  }, [content, gallery]);
+
+  // اگر گالری وجود ندارد
+  if (!renderContentWithGallery.showGallery || !gallery || gallery.length === 0) {
+    return (
+      <div className="flex flex-col gap-6">
+        <div
+          className="prose max-w-none prose-strong:dark:text-[#868B90] dark:text-[#868B90] prose-p:leading-9 space-y-5 text-sm prose-h1:text-sm prose-h2:text-sm prose-h3:text-sm prose-h4:text-sm lg:text-xl md:prose-h1:text-2xl md:prose-h2:text-2xl md:prose-h3:text-2xl md:prose-h-4:text-2xl md:prose-p:text-[#484950] dark:prose-p:text-[#868B90] dark:prose-h1:text-white dark:prose-h2:text-white dark:prose-h3:text-white prose-a:text-blueLink dark:prose-a:text-dark-yellow"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* بخش اول محتوا (قبل از گالری) */}
+      <div
+        className="prose max-w-none prose-strong:dark:text-[#868B90] dark:text-[#868B90] prose-p:leading-9 space-y-5 text-sm prose-h1:text-sm prose-h2:text-sm prose-h3:text-sm prose-h4:text-sm lg:text-xl md:prose-h1:text-2xl md:prose-h2:text-2xl md:prose-h3:text-2xl md:prose-h-4:text-2xl md:prose-p:text-[#484950] dark:prose-p:text-[#868B90] dark:prose-h1:text-white dark:prose-h2:text-white dark:prose-h3:text-white prose-a:text-blueLink dark:prose-a:text-dark-yellow"
+        dangerouslySetInnerHTML={{ __html: renderContentWithGallery.before }}
+      />
+
+      {/* اسکلت لودینگ گالری */}
+      {isGalleryLoading && (
+        <GallerySkeleton title={galleryTitle} />
+      )}
+
+      {/* گالری واقعی */}
+      {!isGalleryLoading && showRealGallery && (
+        <NewsGallerySimple
+          gallery={gallery}
+          title={galleryTitle}
+          mainImage={mainImage}
+        />
+      )}
+
+      {/* بخش دوم محتوا (بعد از گالری) */}
+      {renderContentWithGallery.after && (
+        <div
+          className="prose max-w-none prose-strong:dark:text-[#868B90] dark:text-[#868B90] prose-p:leading-9 space-y-5 text-sm prose-h1:text-sm prose-h2:text-sm prose-h3:text-sm prose-h4:text-sm lg:text-xl md:prose-h1:text-2xl md:prose-h2:text-2xl md:prose-h3:text-2xl md:prose-h-4:text-2xl md:prose-p:text-[#484950] dark:prose-p:text-[#868B90] dark:prose-h1:text-white dark:prose-h2:text-white dark:prose-h3:text-white prose-a:text-blueLink dark:prose-a:text-dark-yellow"
+          dangerouslySetInnerHTML={{ __html: renderContentWithGallery.after }}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsGallery.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsGallery.tsx
new file mode 100644
index 00000000..71312782
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsGallery.tsx
@@ -0,0 +1,45 @@
+// components/shared/NewsGallerySimple.tsx
+
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+
+interface NewsGallerySimpleProps {
+  gallery?: string[] | null;
+  mainImage?: string;
+}
+
+export default function NewsGallerySimple({ gallery,  mainImage }: NewsGallerySimpleProps) {
+  if (!gallery || gallery.length === 0) {
+    return null;
+  }
+
+  const allImages = mainImage && !gallery.includes(mainImage) 
+    ? [mainImage, ...gallery] 
+    : gallery;
+
+  return (
+    <div className="w-full my-8">
+
+
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
+        {allImages.map((image, index) => (
+          <div
+            key={index}
+            className="relative  rounded-xl overflow-hidden bg-neutral-100 dark:bg-neutral-800 w-full aspect-video"
+          >
+            <Image
+              src={image}
+              alt={`${ "گالری"} - ${index + 1}`}
+              fill
+              className="object-cover "
+              unoptimized={true}
+              sizes="(max-width: 768px) 10vw, 15vw"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsHeader.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsHeader.tsx
new file mode 100644
index 00000000..f6a9768f
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsHeader.tsx
@@ -0,0 +1,15 @@
+type NewsHeaderProps = {
+  title:any;
+  author:any;
+  description: any ;
+  date:any;
+};
+
+export default function NewsHeader({ description }: NewsHeaderProps) {
+  return (
+    <div
+      className="prose max-w-none dark:text-[#868B90] prose-strong:dark:text-[#868B90] prose-p:leading-9 space-y-5 text-sm prose-h1:text-sm prose-h2:text-sm prose-h3:text-sm prose-h4:text-sm lg:text-xl md:prose-h1:text-2xl md:prose-h2:text-2xl md:prose-h3:text-2xl md:prose-h-4:text-2xl md:prose-p:text-[#484950] dark:prose-p:text-[#868B90] dark:prose-h1:text-white  dark:prose-h2:text-white  dark:prose-h3:text-white prose-a:text-blueLink dark:prose-a:text-dark-yellow dark:prose-strong:text-white"
+      dangerouslySetInnerHTML={{ __html: description }}
+    />
+  );
+}
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsImage.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsImage.tsx
new file mode 100644
index 00000000..6fc4495e
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsImage.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+interface News {
+  image?: string | null;
+  title: string;
+  video?: string | null;
+  slug?: string;
+  categorySlug?: string;
+}
+
+interface Params {
+  lang: string;
+  category?: string;
+}
+
+interface NewsImageProps {
+  news: News;
+  params?: Params;
+  mainData?: { mainData: string };
+}
+
+const NewsImage: React.FC<NewsImageProps> = ({ news, params, mainData }) => {
+  const [showVideo, setShowVideo] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [videoError, setVideoError] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  
+  const hasVideo = news.video && news.video !== "" && news.video !== null;
+
+  const handlePlayVideo = () => {
+    if (!hasVideo) return;
+    setIsLoading(true);
+    setShowVideo(true);
+    setVideoError(false);
+  };
+
+  const handleVideoCanPlay = () => {
+    setIsLoading(false);
+    videoRef.current?.play().catch((err) => {
+      console.error("Video play failed:", err);
+      setIsLoading(false);
+      setVideoError(true);
+    });
+  };
+
+  const handleVideoError = () => {
+    console.error("Video error:", news.video);
+    setIsLoading(false);
+    setVideoError(true);
+    setShowVideo(false);
+  };
+
+  // اگر ویدیو خطا داشته باشد یا وجود نداشته باشد، فقط عکس نشان بده
+  if (!hasVideo || videoError) {
+    return (
+      <div className="w-full">
+        <div className="w-full h-[270px] md:h-[380px] xl:h-[450px] 2xl:h-[500px] 3xl:h-[600px] relative overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-800">
+          <Image
+            src={news.image || "/images/fallback.jpg"}
+            alt={news.title}
+            unoptimized={true}
+            fill
+            className="object-cover"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full">
+      <div className="w-full h-[270px] md:h-[380px] xl:h-[450px] 2xl:h-[500px] 3xl:h-[600px] relative overflow-hidden rounded-2xl bg-black">
+        
+        {/* نمایش عکس (قبل از کلیک روی پلی) */}
+        {!showVideo && (
+          <>
+            <Image
+              src={news.image || "/images/fallback.jpg"}
+              alt={news.title}
+              unoptimized={true}
+              fill
+              className="object-cover"
+            />
+            
+            {/* دکمه پلی روی عکس */}
+            <button
+              onClick={handlePlayVideo}
+              className="absolute inset-0 z-10 flex items-center justify-center bg-black/5 hover:bg-black/20 transition-all duration-300 group cursor-pointer"
+              aria-label="Play video"
+            >
+              <div className="rounded-full bg-white/90 hover:bg-white dark:bg-black/30 flex items-center justify-center p-4 md:p-6 shadow-xl transition-all duration-300 group-hover:scale-110 aspect-square w-[80px] h-[80px]">
+                <svg 
+                  width="40" 
+                  height="40" 
+                  viewBox="0 0 24 24" 
+                  fill="none" 
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="w-8 h-8 md:w-10 md:h-10"
+                >
+                  <path 
+                    d="M5 3L19 12L5 21V3Z" 
+                    fill="#1A1A18" 
+                    stroke="#1A1A18" 
+                    strokeWidth="1.5" 
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+            </button>
+          </>
+        )}
+
+        {/* نمایش ویدیو (بعد از کلیک روی پلی) */}
+        {showVideo && (
+          <div className="relative w-full h-full">
+            {isLoading && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/50">
+                <div className="w-12 h-12 border-4 border-white border-t-transparent rounded-full animate-spin" />
+              </div>
+            )}
+            <video
+              ref={videoRef}
+              src={news.video || undefined}
+              className="absolute inset-0 w-full h-full object-contain"
+              controls
+              playsInline
+              preload="auto"
+              onCanPlay={handleVideoCanPlay}
+              onError={handleVideoError}
+              poster={news.image || undefined}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NewsImage;
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsNavCard.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsNavCard.tsx
new file mode 100644
index 00000000..170cad0f
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsNavCard.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { Like, Dislike, View } from "@/components/svgs/SvgEducation";
+import NewsMeta from "./AuthorSection";
+
+interface NewsNavCardProps {
+    href: string;
+    news: any;
+    onClickCapture?: () => void;
+    activeLoadingId?: any;
+    setActiveLoadingId?: any;
+}
+
+const ArticleNavCard = ({ href, news, activeLoadingId, setActiveLoadingId}: NewsNavCardProps) => {
+    const isLoading = activeLoadingId === news.id;
+    return (
+        <div className="relative w-full">
+            <Link
+                onClickCapture={() => setActiveLoadingId(news.id)}
+                href={href}
+
+                className={`${isLoading ? "rotating-border-card cursor-not-allowed" : ""}  flex flex-col gap-1 bg-white dark:bg-[#1A1A18] shadow-md rounded-2xl overflow-hidden w-full h-[390px]`}
+            >
+                {isLoading && (
+                    <div className="absolute inset-0 z-50 flex items-center justify-center">
+                        {/* بک‌گراند محو */}
+                        <div className="absolute inset-0 bg-black/20 " />
+                    </div>
+                )}
+                {/* IMAGE */}
+                <div className="p-3 w-full z-[1]">
+                    <div className="w-full h-60 overflow-hidden">
+                        <Image
+                            src={news.image}
+                            alt={news.title}
+                            fill
+                            unoptimized={true}
+                            className="object-cover rounded-lg !static"
+                        />
+                    </div>
+                </div>
+
+                {/* CONTENT */}
+                <div className="p-4 pt-0 flex flex-col justify-between gap-2 z-[1]">
+                    <div className="flex items-center justify-between text-xs text-gray-500 mb-2 dark:text-[#868B90]">
+                        <span>تاریخ انتشار: {news.date}</span>
+
+                        <div className="flex items-center gap-3 text-[#888888]">
+                            <span className="flex items-center gap-1">
+                                <View className="stroke-[#888888] size-[14px]" />
+                                {news.stats?.views ?? 0}
+                            </span>
+                            <span className="flex items-center gap-1">
+                                <Like className="stroke-[#888888] size-[14px]" />
+                                {news.stats?.likes ?? 0}
+                            </span>
+                            <span className="flex items-center gap-1">
+                                <Dislike className="stroke-[#888888] size-[14px]" />
+                                {news.stats?.dislikes ?? 0}
+                            </span>
+                        </div>
+                    </div>
+
+                    <div>
+                        <h4 className="font-semibold text-sm lg:text-xl line-clamp-1 dark:text-white">
+                            {news.title}
+                        </h4>
+                        <p className="text-xs lg:text-sm text-gray-600 mt-1 line-clamp-2 text-[#868B90]">
+                            {news.excerpt}
+                        </p>
+                    </div>
+                </div>
+            </Link>
+        </div>
+    );
+};
+
+export default ArticleNavCard;
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsSideCard.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsSideCard.tsx
new file mode 100644
index 00000000..108f85dd
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsSideCard.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { View, Like, Dislike } from "@/components/svgs/SvgEducation";
+
+interface NewsSideCardProps {
+    news: any;
+    href: string;
+    mainData?: any;
+    activeLoadingId?: any;
+    setActiveLoadingId?: any;
+    isLoading?: boolean;
+}
+
+// کامپوننت اسکلت لودینگ با افکت shimmer
+const SideCardSkeleton: React.FC = () => {
+    return (
+        <div className="bg-white dark:bg-[#1A1A18] shadow-lg rounded-xl overflow-hidden w-full flex flex-col relative">
+            {/* Shimmer effect overlay */}
+            <div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-white/20 to-transparent dark:via-white/10 z-10" />
+            
+            <div className="w-full p-3">
+                <div className="h-36 overflow-hidden aspect-video rounded-[10px] w-full bg-neutral-200 dark:bg-neutral-700 relative">
+                    <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+                </div>
+            </div>
+            
+            <div className="p-4 text-right space-y-3">
+                <div className="flex items-center w-full justify-between">
+                    <div className="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded relative overflow-hidden">
+                        <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+                    </div>
+                    <div className="flex items-center gap-[14px]">
+                        {[1, 2, 3].map((i) => (
+                            <div key={i} className="h-4 w-8 bg-neutral-200 dark:bg-neutral-700 rounded relative overflow-hidden">
+                                <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                
+                <div className="h-5 w-full bg-neutral-200 dark:bg-neutral-700 rounded relative overflow-hidden">
+                    <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+                </div>
+                
+                <div className="space-y-2">
+                    <div className="h-4 w-3/4 bg-neutral-200 dark:bg-neutral-700 rounded relative overflow-hidden">
+                        <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+                    </div>
+                    <div className="h-4 w-1/2 bg-neutral-200 dark:bg-neutral-700 rounded relative overflow-hidden">
+                        <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const NewsSideCard: React.FC<NewsSideCardProps> = ({
+    news,
+    href,
+    mainData,
+    activeLoadingId,
+    setActiveLoadingId,
+    isLoading
+}) => {
+    // اگر در حالت اسکلت لودینگ هستیم
+    if (isLoading || !news) {
+        return <SideCardSkeleton />;
+    }
+
+    const cleanDescription = (html: string, limit = 255): string => {
+        if (!html) return "";
+
+        let text = "";
+
+        if (typeof window === "undefined") {
+            text = html.replace(/<|>/g, " ");
+        } else {
+            const div = document.createElement("div");
+            div.innerHTML = html;
+            text = div.textContent || div.innerText || "";
+        }
+
+        text = text.replace(/\s+/g, " ").trim();
+
+        return text.length > limit
+            ? text.slice(0, limit).trim() + "…"
+            : text;
+    };
+
+    const isLoadingState = activeLoadingId === news?.id;
+    
+    return (
+        <Link
+            href={href}
+            onClickCapture={() => setActiveLoadingId?.(news?.id)}
+            className={`${isLoadingState ? "rotating-border-card cursor-not-allowed" : ""} bg-white dark:bg-[#1A1A18] shadow-lg rounded-xl overflow-hidden w-full flex flex-col hover:scale-[1.02] transition-transform relative`}
+        >
+            {isLoadingState && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center">
+                    <div className="absolute inset-0 bg-black/20" />
+                </div>
+            )}
+            <div className="w-full p-3 z-[1]">
+                <div className="h-36 overflow-hidden aspect-video rounded-[10px] w-full relative">
+                    <Image
+                        src={news?.image || "/placeholder.jpg"}
+                        alt={news?.title || "خبر"}
+                        unoptimized={true}
+                        width={300}
+                        height={144}
+                        className="w-full h-full object-cover object-center"
+                    />
+                </div>
+            </div>
+
+            <div className="p-4 text-right space-y-2 z-[1]">
+                <div className="flex items-center w-full justify-between">
+                    <div className="flex items-center text-xs lg:hidden xl:block">
+                        {mainData && <span className="dark:text-white">{mainData} : </span>}
+                        <span className="dark:text-white">{news?.date}</span>
+                    </div>
+
+                    <div className="flex items-center gap-[14px]">
+                        <div className="flex gap-1 items-center text-xs">
+                            <span className="dark:text-white">{news?.stats?.views ?? 0}</span>
+                            <View className="stroke-textGray dark:stroke-white size-[13px]" />
+                        </div>
+                        <div className="flex gap-1 items-center text-xs">
+                            <span className="dark:text-white">{news?.stats?.likes ?? 0}</span>
+                            <Like className="stroke-textGray dark:stroke-white size-[13px]" />
+                        </div>
+                        <div className="flex gap-1 items-center text-xs">
+                            <span className="dark:text-white">{news?.stats?.dislikes ?? 0}</span>
+                            <Dislike className="stroke-textGray dark:stroke-white size-[13px]" />
+                        </div>
+                    </div>
+                </div>
+
+                <h3 className="text-sm font-semibold dark:text-white">{news?.title}</h3>
+                <p className="line-clamp-2 text-[#868B90] text-xs">{cleanDescription(news?.description)}</p>
+            </div>
+        </Link>
+    );
+};
+
+export default NewsSideCard;
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsStats.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsStats.tsx
new file mode 100644
index 00000000..0b6d8fdb
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsStats.tsx
@@ -0,0 +1,134 @@
+
+import { Like, Dislike, View, Comment } from "@/components/svgs/SvgEducation";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+import Link from "next/link";
+interface NewsStatsProps {
+  stats: {
+    views?: number;
+    likes?: number;
+    dislikes?: number;
+    comments?: number;
+  };
+  category?: string | null;
+  categorySlug?: string | null;
+  date?: string | null;
+  readingTime?: string | number | null;
+  mainData: any;
+  lang?: string;
+  className?: string;
+  showIcons?: boolean;
+}
+
+export default function NewsStats({
+  stats,
+  category,
+categorySlug,
+  date,
+  readingTime,
+  mainData,
+  lang,
+  className = "",
+  showIcons = true,
+}: NewsStatsProps) {
+  // مقداردهی پیش‌فرض
+  const views = stats?.views ?? 0;
+  const likes = stats?.likes ?? 0;
+  const dislikes = stats?.dislikes ?? 0;
+  const comments = stats?.comments ?? 0;
+
+  // فرمت کردن تاریخ شمسی
+
+
+  return (
+    <div className={`flex flex-wrap justify-between w-full items-center gap-4  text-xs md:text-base text-textGray dark:text-[#888888] ${className}`}>
+      {/* دسته‌بندی */}
+      {category && (
+        <div className="flex items-center gap-1.5">
+          <Link href={`/${lang}/news/categories/${categorySlug}`} className="font-medium text-light-primary dark:text-dark-yellow md:px-4 px-2 py-1 rounded-full border border-solid ">
+            {category}
+          </Link>
+        </div>
+      )}
+
+      {/* تاریخ */}
+      {date && (
+        <div className="flex items-center gap-1.5">
+          {showIcons && (
+            <svg 
+              className="stroke-textGray dark:stroke-[#888888] size-[14px] md:size-[20px]" 
+              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 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z" 
+              />
+            </svg>
+          )}
+          <span>{date}</span>
+        </div>
+      )}
+
+      {/* زمان مطالعه */}
+      {readingTime && (
+        <div className="flex items-center gap-1.5">
+          {showIcons && (
+            <svg 
+              className="stroke-textGray dark:stroke-[#888888] size-[14px] md:size-[20px]" 
+              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>
+            {findByUniqueId(mainData, 1503) || "زمان مطالعه"}: {readingTime}{" "}
+            {findByUniqueId(mainData, 33) || "دقیقه"}
+          </span>
+        </div>
+      )}
+
+      {/* جداساز */}
+      
+
+      {/* بازدیدها */}
+      <div className="flex items-center gap-1.5">
+        {showIcons && <View className="stroke-textGray dark:stroke-[#888888] size-[14px] md:size-[20px]" />}
+        <span>{views.toLocaleString("fa-IR")}</span>
+      </div>
+
+      {/* لایک‌ها */}
+      {likes >= 0 && (
+        <div className="flex items-center gap-1.5">
+          {showIcons && <Like className="fstroke-textGray dark:stroke-[#888888] size-[14px] md:size-[20px]" />}
+          <span>{likes.toLocaleString("fa-IR")}</span>
+        </div>
+      )}
+
+      {/* دیسلایک‌ها */}
+      {dislikes >= 0 && (
+        <div className="flex items-center gap-1.5">
+          {showIcons && <Dislike className="stroke-textGray dark:stroke-[#888888] size-[14px] md:size-[20px]" />}
+          <span>{dislikes.toLocaleString("fa-IR")}</span>
+        </div>
+      )}
+
+      {/* کامنت‌ها */}
+      {comments >= 0 && (
+        <div className="flex items-center gap-1.5">
+          {showIcons && <Comment className="stroke-textGray dark:stroke-[#888888] size-[14px] md:size-[20px]" />}
+          <span>{comments.toLocaleString("fa-IR")}</span>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsTags.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsTags.tsx
new file mode 100644
index 00000000..6e0fda5c
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsTags.tsx
@@ -0,0 +1,117 @@
+// components/shared/ArticleTagsSimple.tsx
+
+import React from "react";
+
+type Tag = {
+    label: string;
+    slug?: string;
+};
+
+interface ArticleTagsSimpleProps {
+    tags?: Tag[] | string[] | string | null;
+    className?: string;
+    showIcon?: boolean;
+    limit?: number;
+}
+
+export default function ArticleTagsSimple({
+    tags,
+    className = "",
+    showIcon = true,
+    limit,
+}: ArticleTagsSimpleProps) {
+    // تبدیل tags به آرایه استاندارد از string‌ها
+    const normalizeTags = (): string[] => {
+        if (!tags) return [];
+
+        // اگر already آرایه است
+        if (Array.isArray(tags)) {
+            return tags
+                .map((tag) => {
+                    if (typeof tag === "string") {
+                        return tag;
+                    }
+                    if (typeof tag === "object" && tag !== null && "label" in tag) {
+                        return tag.label;
+                    }
+                    return null;
+                })
+                .filter((tag): tag is string => tag !== null);
+        }
+
+        // اگر string JSON است
+        if (typeof tags === "string") {
+            try {
+                const parsed = JSON.parse(tags);
+                if (Array.isArray(parsed)) {
+                    return parsed
+                        .map((tag) => {
+                            if (typeof tag === "string") {
+                                return tag;
+                            }
+                            if (typeof tag === "object" && tag !== null) {
+                                return tag.label || tag.slug || String(tag);
+                            }
+                            return null;
+                        })
+                        .filter((tag): tag is string => tag !== null);
+                }
+            } catch (e) {
+                console.error("Failed to parse tags JSON:", e);
+            }
+        }
+
+        return [];
+    };
+
+    const safeTags = normalizeTags();
+    const displayTags = limit ? safeTags.slice(0, limit) : safeTags;
+
+    if (safeTags.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={`${className}`}>
+            <p className="text-xl dark:text-white mt-9 px-1 font-bold">تگ ها</p>
+            <div className={`flex flex-wrap gap-2 pt-4 mt-2 `}>
+                {displayTags.map((tag, index) => (
+                    <span
+                        key={index}
+                        className="px-3 py-1 rounded-full shadow-md bg-white dark:bg-[#1A1A18] text-sm md:text-base dark:text-[#868B90] flex gap-1 items-center"
+                    >
+                        {showIcon && (
+                            <svg
+                                className="size-4 md:size-5"
+                                width="24"
+                                height="25"
+                                viewBox="0 0 24 25"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    className="dark:stroke-[#868B90]stroke-current"
+                                    d="M4.17038 15.7998L8.70038 20.3298C10.5604 22.1898 13.5804 22.1898 15.4504 20.3298L19.8404 15.9398C21.7004 14.0798 21.7004 11.0598 19.8404 9.1898L15.3004 4.6698C14.3504 3.7198 13.0404 3.2098 11.7004 3.2798L6.70038 3.5198C4.70038 3.6098 3.11038 5.1998 3.01038 7.1898L2.77038 12.1898C2.71038 13.5398 3.22038 14.8498 4.17038 15.7998Z"
+                                    stroke="currentColor"
+                                    strokeWidth="1.5"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                                <path
+                                    className="dark:stroke-[#868B90] stroke-current"
+                                    d="M9.5 12.5C10.8807 12.5 12 11.3807 12 10C12 8.61929 10.8807 7.5 9.5 7.5C8.11929 7.5 7 8.61929 7 10C7 11.3807 8.11929 12.5 9.5 12.5Z"
+                                    stroke="currentColor"
+                                    strokeWidth="1.5"
+                                    strokeLinecap="round"
+                                />
+                            </svg>
+                        )}
+                        <span>
+                            {tag}
+                        </span>
+                    </span>
+                ))}
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/PrevNextNews.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/PrevNextNews.tsx
new file mode 100644
index 00000000..baf90f89
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/PrevNextNews.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { supabase } from "@/utils/lib/supabaseClient";
+import { Like, Dislike, View } from "@/components/svgs/SvgEducation";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+import NewsNavCard from "./NewsNavCard";
+
+// ایمپورت دیتای استاتیک به عنوان fallback
+import fallbackNewsData from "@/components/utils/news.json";
+
+interface PrevNextNewsProps {
+  params: {
+    lang: string;
+    slug: string;
+    category: string;
+  };
+  news?: any[]; // اختیاری می‌کنیم چون می‌تواند از fallback بیاید
+  mainData: { mainData: string };
+}
+
+const PrevNextNews = ({ params, news: propNews, mainData }: PrevNextNewsProps) => {
+  const [news, setNews] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeLoadingId, setActiveLoadingId] = useState<string | null>(null);
+  const [usingFallback, setUsingFallback] = useState(false);
+
+  // ===============================
+  // 📌 گرفتن همه اخبار (با fallback)
+  // ===============================
+  useEffect(() => {
+    const fetchNews = async () => {
+      // اگر news از طریق props آمده، از همان استفاده کن
+      if (propNews && propNews.length > 0) {
+        setNews(propNews);
+        setLoading(false);
+        return;
+      }
+
+      // تلاش برای دریافت از Supabase
+      try {
+        const { data, error } = await supabase
+          .from("news")
+          .select("*")
+          .order("date", { ascending: true });
+
+        if (!error && data && data.length > 0) {
+          setNews(data);
+          setUsingFallback(false);
+        } else {
+          // استفاده از fallback
+          console.warn("⚠️ PrevNextNews: Using fallback news.json");
+          const fallbackData = [...fallbackNewsData].sort((a, b) => {
+            const dateA = a.date ? parseInt(a.date.replace(/\//g, "")) : 0;
+            const dateB = b.date ? parseInt(b.date.replace(/\//g, "")) : 0;
+            return dateA - dateB;
+          });
+          setNews(fallbackData);
+          setUsingFallback(true);
+        }
+      } catch (err) {
+        // در صورت خطا، از fallback استفاده کن
+        console.error("❌ PrevNextNews: Error fetching from Supabase, using fallback", err);
+        const fallbackData = [...fallbackNewsData].sort((a, b) => {
+          const dateA = a.date ? parseInt(a.date.replace(/\//g, "")) : 0;
+          const dateB = b.date ? parseInt(b.date.replace(/\//g, "")) : 0;
+          return dateA - dateB;
+        });
+        setNews(fallbackData);
+        setUsingFallback(true);
+      }
+
+      setLoading(false);
+    };
+
+    fetchNews();
+  }, [propNews]);
+
+  if (loading) return null;
+
+  // مقاله فعلی
+  const currentIndex = news.findIndex((a) => a.slug === params.slug);
+  if (currentIndex === -1) return null;
+
+  const prevNews = currentIndex > 0 ? news[currentIndex - 1] : null;
+  const nextNews = currentIndex < news.length - 1 ? news[currentIndex + 1] : null;
+
+  // اگر هیچ مقاله قبلی و بعدی نبود
+  if (!prevNews && !nextNews) return null;
+
+  return (
+    <section className="w-full my-10 2xl:px-20">
+
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full md:gap-10 3xl:gap-[100px]">
+        {/* ======================= */}
+        {/* 📌 کارت مقاله قبلی */}
+        {/* ======================= */}
+        <div className="flex flex-col items-center w-full">
+          {prevNews ? (
+          <h3 className="text-center font-bold mb-3 dark:text-white">
+            {findByUniqueId(mainData, 1506) || "مطلب قبلی"}
+          </h3>
+            ) : ( <div></div>)}
+          <div className="w-full">
+            {prevNews ? (
+              <NewsNavCard
+                href={`/${params.lang}/news/categories/${prevNews.categorySlug || prevNews.categorySlug}/${prevNews.slug}`}
+                news={prevNews}
+                activeLoadingId={activeLoadingId}
+                setActiveLoadingId={setActiveLoadingId}
+              />
+            ) : (
+              <div className="w-full h-[200px] bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center">
+               
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* ======================= */}
+        {/* 📌 کارت مقاله بعدی */}
+        {/* ======================= */}
+        <div className="flex flex-col items-center w-full">
+         
+          <h3 className="text-center font-bold mb-3 dark:text-white">
+            {findByUniqueId(mainData, 1507) || "مطلب بعدی"}
+          </h3>
+
+          <div className="w-full">
+            {nextNews ? (
+              <NewsNavCard
+                href={`/${params.lang}/news/categories/${nextNews.categorySlug || nextNews.categorySlug}/${nextNews.slug}`}
+                news={nextNews}
+                activeLoadingId={activeLoadingId}
+                setActiveLoadingId={setActiveLoadingId}
+              />
+            ) : (
+              <div className="w-full h-[200px] bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center">
+                
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PrevNextNews;
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/RelatedArticlesSlider.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/RelatedArticlesSlider.tsx
new file mode 100644
index 00000000..dd8c9856
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/RelatedArticlesSlider.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import type { Swiper as SwiperType } from "swiper";
+import "swiper/css";
+import Link from "next/link";
+import { ArrowRight } from "@/components/svgs";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+import ArticleCard from "../../../../components/ArticleCard";
+import { supabase } from "@/utils/lib/supabaseClient";
+
+interface RelatedArticlesSliderProps {
+  params: { lang: string; slug: string };
+  mainData: any;
+}
+
+const RelatedArticlesSlider = ({ params, mainData }: RelatedArticlesSliderProps) => {
+  const [relatedArticles, setRelatedArticles] = useState<any[]>([]);
+  const [currentArticle, setCurrentArticle] = useState<any | null>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeLoadingId, setActiveLoadingId] = useState<string | null>(null);
+  const swiperRef = useRef<SwiperType>();
+
+  // === 1) دریافت مقاله فعلی با slug ===
+  useEffect(() => {
+    const fetchCurrent = async () => {
+      const { data, error } = await supabase
+        .from("articles")
+        .select("*")
+        .eq("slug", params.slug)
+        .single();
+
+      if (!error && data) {
+        setCurrentArticle(data);
+      }
+    };
+
+    fetchCurrent();
+  }, [params.slug]);
+
+  // === 2) دریافت مقالات مرتبط پس از لود شدن مقاله اصلی ===
+  useEffect(() => {
+    if (!currentArticle) return;
+
+    const fetchRelated = async () => {
+      const { data, error } = await supabase
+        .from("articles")
+        .select("*")
+        .neq("slug", params.slug); // حذف مقاله فعلی
+
+      if (!error && data) {
+        const filtered = data
+          .filter(
+            (a) =>
+              a.category === currentArticle.category ||
+              a.subCategory === currentArticle.subCategory
+          )
+          .slice(0, 10);
+
+        setRelatedArticles(filtered);
+      }
+    };
+
+    fetchRelated();
+  }, [currentArticle]);
+
+  if (!currentArticle) return null;
+  if (relatedArticles.length === 0) return null;
+
+  return (
+    <section className="w-full">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-7 w-full ps-1 pe-5 lg:pe-10">
+        <h2 className="text-xl font-bold dark:text-white">{findByUniqueId(mainData, 1511)}</h2>
+        <Link
+          href={`/${params.lang}/articles`}
+          className="flex justify-center items-center gap-4"
+          aria-label="See all articles"
+        >
+          <p className="font-azarMehr font-medium text-[12px] md:text-[16px] lg:text-[18px] xl:text-[20px] dark:text-white">
+            {findByUniqueId(mainData, 171)}
+          </p>
+          <ArrowRight
+            className={`dark:stroke-white stroke-black rotate-180 w-[24px] h-full ${
+              params.lang === "en" ? "ltr:rotate-0" : ""
+            }`}
+          />
+        </Link>
+      </div>
+
+      {/* Slider */}
+      <Swiper
+        spaceBetween={20}
+        slidesPerView={3.7}
+        loop={true}
+        onSwiper={(swiper) => (swiperRef.current = swiper)}
+        breakpoints={{
+          0: { slidesPerView: 1.2, spaceBetween: 20 },
+          640: { slidesPerView: 2, spaceBetween: 20 },
+          1024: { slidesPerView: 3.5, spaceBetween: 20 },
+        }}
+        onSlideChange={(swiper) => setActiveIndex(swiper.realIndex)}
+      >
+        {relatedArticles.map((item) => (
+          <SwiperSlide key={item.id} className="flex items-center pb-5">
+            <ArticleCard item={item} params={{ lang: params.lang }} activeLoadingId={activeLoadingId} setActiveLoadingId={setActiveLoadingId}/>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      {/* Controls */}
+      <div className="mt-4 w-full">
+        <div className="flex items-center justify-center md:justify-start gap-2">
+          {/* Prev */}
+          <button
+            onClick={() => swiperRef.current?.slidePrev()}
+            className="flex items-center justify-center rounded-full bg-transparent"
+            aria-label="Previous slide"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 9 15"
+              className="w-[20px] h-[20px] stroke-gray dark:stroke-white ltr:rotate-180"
+            >
+              <path d="m1 14 6.5-6.5L1 1" />
+            </svg>
+          </button>
+
+          {/* Pagination */}
+          <div className="flex justify-center gap-2">
+            {relatedArticles.map((_, idx) => (
+              <button
+                key={idx}
+                onClick={() => swiperRef.current?.slideToLoop(idx)}
+                className={`w-5 h-1 rounded-sm transition ${
+                  activeIndex === idx
+                    ? "bg-light-primary dark:bg-dark-yellow"
+                    : "bg-dark-gray dark:bg-dark-placeholder"
+                }`}
+                aria-label={`Go to slide ${idx + 1}`}
+              />
+            ))}
+          </div>
+
+          {/* Next */}
+          <button
+            onClick={() => swiperRef.current?.slideNext()}
+            className="flex items-center justify-center rounded-full bg-transparent"
+            aria-label="Next slide"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 9 15"
+              className="w-[20px] h-[20px] stroke-gray dark:stroke-white ltr:rotate-180"
+            >
+              <path d="m8 14L1.5 7.5L8 1" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default RelatedArticlesSlider;
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/ShowSocialWrapper.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/ShowSocialWrapper.tsx
new file mode 100644
index 00000000..c0408e25
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/ShowSocialWrapper.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import ShredPageArticle from "./ShredpageArticle";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+import { CopyIcon } from "@/components/svgs/SvgCategories";
+import { Like, Dislike, Comment } from "@/components/svgs/SvgEducation";
+
+interface NewsStats {
+  comments: number;
+  likes: number;
+  dislikes: number;
+
+}
+
+interface News {
+  stats: NewsStats;
+  slug: string;             // اضافه شد
+  categorySlug?: string;    // اضافه شد
+}
+
+export default function ShowSocialWrapper({
+  params,
+  mainData,
+  news,
+}: {
+  params: any;
+  mainData: any;
+  news: any;
+}) {
+  const [showSocial, setShowSocial] = useState(false);
+
+  return (
+    <div className="flex w-full gap-5 items-center justify-between px-[2px]">
+
+      <div
+        onClick={() => setShowSocial(!showSocial)}
+        className="dark:bg-dark-yellow bg-blueLink flex flex-row w-max items-center gap-2 cursor-pointer rounded-[10px] 3xl:py-[3px] 3xl:px-4 lg:py-2 lg:px-2 md:py-2 md:px-4 sm:py-2 sm:px-4 xs:py-1 xs:px-2"
+      >
+        <span className="font-azarMehr dark:text-[#000] text-[#fff] font-medium 3xl:text-xl3Title xl:text-xlTitle lg:text-lgTitle md:text-mdTitle sm:text-smTitle xs:text-smTitle">
+          {findByUniqueId(mainData, 244)}
+        </span>
+        <CopyIcon className="dark:fill-[#000] fill-[#fff] 3xl:w-[20px] 3xl:h-[20px] md:w-[20px] md:h-[20px]" />
+      </div>
+
+      <div className="flex md:hidden items-center text-sm md:text-base w-full">
+        <div className="flex justify-end  items-center gap-5 w-full text-textGray dark:text-[#888888]">
+          <span className=" items-center gap-1 flex">
+            <Comment className="stroke-textGray dark:stroke-[#888888] size-[16px]" />
+            {news.stats.comments}
+          </span>
+          <span className=" items-center gap-1 flex">
+            <Like className="stroke-textGray dark:stroke-[#888888] size-[16px]" />
+            {news.stats.likes}
+          </span>
+          <span className=" items-center gap-1 flex">
+            <Dislike className="stroke-textGray dark:stroke-[#888888] size-[16px]" />
+            {news.stats.dislikes}
+          </span>
+        </div>
+      </div>
+
+      {/* مودال یا بخش اشتراک‌گذاری */}
+      {showSocial && (
+        <ShredPageArticle
+          params={params}
+          mainData={mainData}
+          setShowSocial={setShowSocial}
+          article={news}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/ShredpageArticle.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/ShredpageArticle.tsx
new file mode 100644
index 00000000..de239bf4
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/ShredpageArticle.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { useState, useRef } from "react";
+import Image from "next/image";
+import { CLoseIcon } from "@/svgs/index";
+import { Arrow } from "@/svgs/SvgEducation";
+
+// ANIMATION
+import { motion } from "framer-motion";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+
+interface ShareArticlePageProps {
+  setShowSocial: (show: boolean) => void;
+  mainData: any;
+  params: { lang: string; slug: string };
+  article: { slug: string; categorySlug?: string }; // اضافه شده
+}
+
+export default function ShareArticlePage({
+  setShowSocial,
+  mainData,
+  params,
+  article,
+}: ShareArticlePageProps) {
+  const [copied, setCopied] = useState(false);
+  const scrollContainer = useRef<HTMLDivElement>(null);
+
+  // شبکه‌های اجتماعی
+  const items = [
+    { id: 1, img: "/shared/whatsapp.png", title: "WhatsApp" },
+    { id: 2, img: "/shared/telegram.png", title: "Telegram" },
+    { id: 3, img: "/shared/facebook.png", title: "Facebook" },
+    { id: 4, img: "/shared/twitter.png", title: "Twitter" },
+    { id: 5, img: "/shared/linkedin.png", title: "Linkedin" },
+  ];
+
+  // لینک کامل با categorySlug
+const categorySlug = article?.categorySlug ?? "all"; // fallback امن
+const fullUrl = `https://metarang.com/${params.lang}/news/categories/${categorySlug}/${params.slug}`;
+
+
+  // کپی لینک
+  const handleCopyClick = async () => {
+    try {
+      await navigator.clipboard.writeText(fullUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1000);
+    } catch (error) {
+      console.error("Error copying URL:", error);
+    }
+  };
+
+  // اشتراک‌گذاری روی شبکه‌ها
+  const handleShare = (platform: string) => {
+    let shareUrl = "";
+    switch (platform) {
+      case "WhatsApp":
+        shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(fullUrl)}`;
+        break;
+      case "Telegram":
+        shareUrl = `https://t.me/share/url?url=${encodeURIComponent(fullUrl)}`;
+        break;
+      case "Facebook":
+        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(fullUrl)}`;
+        break;
+      case "Twitter":
+        shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(fullUrl)}&text=YourTextHere`;
+        break;
+      case "Linkedin":
+        shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(fullUrl)}`;
+        break;
+    }
+    window.open(shareUrl, "_blank");
+  };
+
+  const scrollRight = () => {
+    if (scrollContainer.current) {
+      scrollContainer.current.scrollBy({ left: 100, behavior: "smooth" });
+    }
+  };
+
+  const scrollLeft = () => {
+    if (scrollContainer.current) {
+      scrollContainer.current.scrollBy({ left: -100, behavior: "smooth" });
+    }
+  };
+
+  return (
+    <div className="fixed backdrop-blur-sm bg-blackTransparent/30 z-50 top-[-124px] left-0 w-full h-screen">
+      <div className="w-full h-full overflow-clip">
+        <motion.div
+          initial={{ rotate: 0, scale: 0 }}
+          animate={{ rotate: 0, scale: 1 }}
+          exit={{ opacity: 1, scale: 0 }}
+          transition={{ duration: 0.5, ease: "backInOut" }}
+          className="flex flex-col justify-center items-center w-full h-full"
+        >
+          <div className="xl:w-[50%] lg:w-[50%] md:w-[70%] min-h-[350px] max-h-fit rounded-[15px] border-2 border-[#898989] dark:text-white flex relative me-[250px] sm:me-0 sm:w-[90%] xs:me-0 xs:w-[90%] justify-center items-center shadow-md bg-white dark:bg-dark-background">
+            <div className="w-full h-full flex flex-col justify-start mt-2 items-center gap-10 absolute top-0">
+              
+              {/* Close Button */}
+              <CLoseIcon
+                className="w-[15px] h-[15px] cursor-pointer stroke-2 m-2 stroke-gray dark:stroke-dark-gray absolute start-3 top-1"
+                onClick={() => setShowSocial(false)}
+                alt="Close"
+              />
+
+              {/* Title */}
+              <h1 className="font-azarMehr font-bold text-[16px] mt-2 text-[#00000096] dark:text-white w-full text-center">
+                {findByUniqueId(mainData, 324)}
+              </h1>
+
+              {/* arrows */}
+              <div
+                className="rounded-full cursor-pointer absolute right-1 top-[28%] z-50 flex justify-center items-center"
+                onClick={scrollRight}
+              >
+                <Arrow className="stroke-gray dark:stroke-dark-gray stroke-[5px] w-7 h-7 rotate-[180deg]" />
+              </div>
+              <div
+                className="rounded-full cursor-pointer absolute left-1 top-[28%] z-50 flex justify-center items-center"
+                onClick={scrollLeft}
+              >
+                <Arrow className="stroke-gray dark:stroke-dark-gray stroke-[5px] w-7 h-7" />
+              </div>
+
+              {/* icons */}
+              <div className="overflow-x-auto no-scrollbar relative w-[90%]" ref={scrollContainer}>
+                <div className="flex flex-row justify-center items-center gap-4 py-2 w-full">
+                  {items.map((item) => (
+                    <div
+                      key={item.id}
+                      className="transition-transform duration-500 ease-in-out hover:-translate-y-1 cursor-pointer flex flex-col justify-center items-center"
+                      onClick={() => handleShare(item.title)}
+                    >
+                      <Image
+                        src={item.img}
+                        alt={item.title}
+                        width={70}
+                        height={70}
+                        className="xl:w-[70px] xl:h-[70px] lg:w-[70px] lg:h-[70px] md:w-[60px] md:h-[60px] sm:w-[50px] sm:h-[50px] xs:w-[50px] xs:h-[50px]"
+                      />
+                      <p className="font-azarMehr font-bold text-[14px] mt-3">{item.title}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* copy link */}
+              <div
+                data-tooltip-id="unique-tooltip"
+                className="relative flex justify-end items-center mt-8 w-[95%] rounded-[20px] px-4 py-1 shadow-md dark:bg-[#000] border border-gray"
+              >
+                <p
+                  className="absolute start-2 cursor-pointer rounded-[18px] w-max text-center font-azarMehr text-[14px] font-bold py-2 px-5 text-[#f9f9f9] bg-[#0000ffd9] dark:bg-dark-yellow dark:text-[#000]"
+                  onClick={handleCopyClick}
+                >
+                  {findByUniqueId(mainData, 323)}
+                </p>
+                <p className="py-2 text-[#000] dark:text-[#fff] font-azarMehr text-[14px] font-medium">{fullUrl}</p>
+              </div>
+
+              {copied && (
+                <ReactTooltip
+                  id="unique-tooltip"
+                  place="bottom"
+                  isOpen={true}
+                  style={{ backgroundColor: "#737272", color: "#fff", fontWeight: "bold" }}
+                >
+                  {params.lang === "fa" ? "کپی شد!" : "Copied!"}
+                </ReactTooltip>
+              )}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/SideCard.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/SideCard.tsx
new file mode 100644
index 00000000..9ab717a4
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/SideCard.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { supabase } from "@/utils/lib/supabaseClient";
+import { View, Like, Dislike } from "@/components/svgs/SvgEducation";
+import { ArrowRight } from "@/components/svgs";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+import NewsSideCard from "./NewsSideCard";
+
+// ایمپورت دیتای استاتیک به عنوان fallback
+import fallbackNewsData from "@/components/utils/news.json";
+
+interface SideCardProps {
+  params: any;
+  mainData: any;
+}
+
+const SideCard: React.FC<SideCardProps> = ({ params, mainData }) => {
+  const [latestNews, setLatestNews] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeLoadingId, setActiveLoadingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchLatest();
+  }, []);
+
+  const fetchLatest = async () => {
+    // تلاش برای دریافت از Supabase
+    const { data, error } = await supabase
+      .from("news")
+      .select("*")
+      .order("date", { ascending: false })
+      .limit(5);
+
+    // اگر خطایی رخ داد یا دیتایی نیامد، از fallback استفاده کن
+    if (error || !data || data.length === 0) {
+      if (error) {
+        console.warn("⚠️ SideCard: Supabase error, using fallback news.json", error.message);
+      } else if (!data || data.length === 0) {
+        console.warn("⚠️ SideCard: No data from Supabase, using fallback news.json");
+      }
+      
+      // استفاده از دیتای fallback
+      const fallbackData = fallbackNewsData
+        .map((item: any) => ({
+          ...item,
+          stats: typeof item.stats === 'string' ? JSON.parse(item.stats) : item.stats,
+        }))
+        .sort((a, b) => {
+          // مرتب‌سازی بر اساس تاریخ (جدیدترین اول)
+          const dateA = a.date ? parseInt(a.date.replace(/\//g, "")) : 0;
+          const dateB = b.date ? parseInt(b.date.replace(/\//g, "")) : 0;
+          return dateB - dateA;
+        })
+        .slice(0, 5);
+      
+      setLatestNews(fallbackData);
+      setLoading(false);
+      return;
+    }
+
+    setLatestNews(data);
+    setLoading(false);
+  };
+
+ if (loading) {
+    return (
+      <section className="flex flex-col gap-5 w-full">
+        <div className="flex items-center justify-between">
+          <div className="h-6 w-32 bg-neutral-200 dark:bg-neutral-700 rounded relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+          </div>
+          <div className="h-5 w-16 bg-neutral-200 dark:bg-neutral-700 rounded relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 animate-pulse" />
+          </div>
+        </div>
+        {[1, 2, 3, 4, 5].map((i) => (
+          <NewsSideCard key={i} isLoading={true} news={null} href="" />
+        ))}
+      </section>
+    );
+  }
+
+  return (
+    <section className="flex flex-col gap-5 w-full ">
+      <div className="flex items-center justify-between">
+        <p className="dark:text-white font-semibold"> {findByUniqueId(mainData, 1504)} </p>
+
+        <Link href={`/${params.lang}/news`} className="flex justify-center items-center gap-2">
+          <p className="font-azarMehr font-medium text-sm dark:text-white">
+            {findByUniqueId(mainData, 171)} 
+          </p>
+          <ArrowRight
+            className={`dark:stroke-white stroke-black rotate-180 w-[18px] h-full ${
+              params.lang === "en" ? "ltr:rotate-0" : ""
+            }`}
+          />
+        </Link>
+      </div>
+
+      {latestNews.map((item) => (
+        <NewsSideCard
+          key={item.slug}
+          news={item}
+          mainData={findByUniqueId(mainData, 191)}
+          href={`/${params.lang}/news/categories/${item.categorySlug}/${item.slug}`}
+          activeLoadingId={activeLoadingId}
+          setActiveLoadingId={setActiveLoadingId}
+        />
+      ))}
+    </section>
+  );
+};
+
+export default SideCard;
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/page.tsx b/src/app/[lang]/news/categories/[category]/[slug]/page.tsx
new file mode 100644
index 00000000..9a7adfe5
--- /dev/null
+++ b/src/app/[lang]/news/categories/[category]/[slug]/page.tsx
@@ -0,0 +1,545 @@
+export const dynamic = "force-dynamic";
+
+import NotFoundPage from "@/components/shared/NotFoundPage";
+import { supabase } from "@/utils/lib/supabaseClient";
+
+import {
+  getTranslation,
+  getMainFile,
+  getLangArray,
+} from "@/components/utils/actions";
+import BreadCrumb from "@/components/shared/BreadCrumb";
+import { findByUniqueId } from "@/components/utils/findByUniqueId";
+import AuthorSection from "./components/AuthorSection";
+import NewsHeader from "./components/NewsHeader";
+import NewsImage from "./components/NewsImage";
+import NewsContent from "./components/NewsContent";
+import SideCard from "./components/SideCard";
+import PopularNews from "../../../components/PopularNews";
+
+import NewsStats from "./components/NewsStats";
+import PrevNextNews from "./components/PrevNextNews";
+import ShowSocialWrapper from "./components/ShowSocialWrapper";
+import CustomErrorPage from "@/components/shared/CustomErrorPage";
+import CleanAutoRetryParam from "@/components/shared/CleanAutoRetryParam";
+import NewsTags from "./components/NewsTags";
+import fallbackNewsData from "@/components/utils/news.json";
+
+interface NewsPageProps {
+  params: Promise<{
+    lang: string;
+    category: string;
+    slug: string;
+  }>;
+}
+
+// ─── تابع کمکی برای نرمالایز کردن دیتای دریافتی ───
+type NormalizedNews = {
+  id: number;
+  title: string;
+  slug: string;
+  image?: string | null;
+  date?: string | null;
+  readingTime?: string | null;
+  stats?: any;
+  category?: string | null;
+  categorySlug?: string | null;
+  categoryImage?: string | null;
+  categoryDec?: string | null;
+  subCategory?: string | null;
+  content: string;
+  description?: string | null;
+  author?: any;
+  tags?: any;
+  video?: string | null;
+  excerpt?: string | null;
+  gallery?: string | null;
+};
+
+function normalizeNewsItem(item: any): NormalizedNews {
+  return {
+    id: item.id,
+    title: item.title,
+    slug: item.slug,
+    image: item.image || null,
+    date: item.date || null,
+    readingTime: item.readingTime || null,
+    stats: item.stats || null,
+    category: item.category || null,
+    categorySlug: item.categorySlug || null,
+    categoryImage: item.categoryImage || null,
+    categoryDec: item.categoryDec || null,
+    subCategory: item.subCategory || null,
+    content: item.content,
+    description: item.description || null,
+    author: item.author || null,
+    tags: item.tags || null,
+    video: item.video || null,
+    excerpt: item.excerpt || null,
+    gallery: item.gallery || null,
+  };
+}
+
+// ─── تابع دریافت خبر با fallback به news.json ───
+async function fetchNewsBySlugWithFallback(slug: string) {
+  try {
+    // تلاش برای دریافت از Supabase
+    const { data: supabaseNews, error } = await supabase
+      .from("news")
+      .select("*")
+      .eq("slug", slug)
+      .single();
+
+    // اگر خطایی رخ داد یا دیتایی نیامد، از fallback استفاده کن
+    if (error || !supabaseNews) {
+      if (error) {
+        console.warn(`⚠️ [News:${slug}] Supabase error, using fallback news.json:`, error.message);
+      } else if (!supabaseNews) {
+        console.warn(`⚠️ [News:${slug}] No data from Supabase, using fallback news.json`);
+      }
+
+      // جستجو در دیتای news.json بر اساس slug
+      const fallbackItem = fallbackNewsData.find((item: any) => item.slug === slug);
+
+      if (fallbackItem) {
+        return { data: normalizeNewsItem(fallbackItem), fromFallback: true };
+      }
+
+      return { data: null, fromFallback: true };
+    }
+
+    // نرمالایز کردن دیتای دریافتی از Supabase
+    const normalizedData = normalizeNewsItem(supabaseNews);
+
+    return { data: normalizedData, fromFallback: false };
+  } catch (err) {
+    // در صورت بروز هرگونه خطای غیرمنتظره، از fallback استفاده کن
+    console.error(`❌ [News:${slug}] Unexpected error fetching news, using fallback:`, err);
+    const fallbackItem = fallbackNewsData.find((item: any) => item.slug === slug);
+
+    if (fallbackItem) {
+      return { data: normalizeNewsItem(fallbackItem), fromFallback: true };
+    }
+
+    return { data: null, fromFallback: true };
+  }
+}
+
+// ─── تابع دریافت اخبار همان دسته برای Prev/Next با fallback ───
+async function fetchCategoryNewsWithFallback(categorySlug: string, currentSlug: string) {
+  try {
+    // تلاش برای دریافت از Supabase
+    const { data: supabaseNews, error } = await supabase
+      .from("news")
+      .select("*")
+      .eq("categorySlug", categorySlug)
+      .order("date", { ascending: true });
+
+    // اگر خطایی رخ داد یا دیتایی نیامد، از fallback استفاده کن
+    if (error || !supabaseNews || supabaseNews.length === 0) {
+      if (error) {
+        console.warn(`⚠️ [Category:${categorySlug}] Supabase error for Prev/Next, using fallback`);
+      }
+
+      // دریافت از fallback و فیلتر بر اساس categorySlug
+      const fallbackData = fallbackNewsData
+        .map((item: any) => normalizeNewsItem(item))
+        .filter((item: NormalizedNews) => item.categorySlug === categorySlug)
+        .sort((a: NormalizedNews, b: NormalizedNews) => {
+          // مرتب‌سازی ساده بر اساس تاریخ (فرمت شمسی)
+          const dateA = a.date ? parseInt(a.date.replace(/\//g, "")) : 0;
+          const dateB = b.date ? parseInt(b.date.replace(/\//g, "")) : 0;
+          return dateA - dateB;
+        });
+
+      return { data: fallbackData, fromFallback: true };
+    }
+
+    // نرمالایز کردن دیتای دریافتی از Supabase
+    const normalizedData = supabaseNews.map((item: any) => normalizeNewsItem(item));
+
+    return { data: normalizedData, fromFallback: false };
+  } catch (err) {
+    console.error(`❌ [Category:${categorySlug}] Error fetching category news for Prev/Next:`, err);
+    const fallbackData = fallbackNewsData
+      .map((item: any) => normalizeNewsItem(item))
+      .filter((item: NormalizedNews) => item.categorySlug === categorySlug);
+
+    return { data: fallbackData, fromFallback: true };
+  }
+}
+
+// ======================================
+// Metadata (SEO + 404 امن)
+// ======================================
+export async function generateMetadata({ params }: NewsPageProps) {
+  const resolvedParams = await params;
+  const { lang } = resolvedParams;
+  try {
+    function cleanDescription(html: any, limit = 255) {
+      if (!html) return "";
+
+      let text = "";
+
+      if (typeof window === "undefined") {
+        // SSR / Node.js
+        text = html.replace(/<[^>]*>/g, "").replace(/\s+/g, " ").trim();
+      } else {
+        // Browser
+        const div = document.createElement("div");
+        div.innerHTML = html;
+        text = div.textContent || div.innerText || "";
+      }
+
+      text = text.trim();
+
+      return text.length > limit
+        ? text.slice(0, limit).trim() + "…"
+        : text;
+    }
+
+    const { slug, category } = resolvedParams;
+
+    // دریافت خبر با fallback
+    const { data: news } = await fetchNewsBySlugWithFallback(slug);
+
+    if (!news) {
+      return {
+        title: "خبر یافت نشد",
+        description: "خبر مورد نظر وجود ندارد",
+        robots: { index: false, follow: false },
+      };
+    }
+
+    if (category !== news.categorySlug) {
+      return {
+        title: "خبر یافت نشد",
+        description: "آدرس خبر معتبر نیست",
+        robots: { index: false, follow: false },
+      };
+    }
+
+    const canonicalUrl = `https://metarang.com/${lang}/news/categories/${news.categorySlug}/${news.slug}`;
+
+    return {
+      title: news.title,
+      description: cleanDescription(news.description || "اخبار متاورس رنگ"),
+      alternates: { canonical: canonicalUrl },
+      openGraph: {
+        title: news.title,
+        description: cleanDescription(news.description || "اخبار متاورس رنگ"),
+        url: canonicalUrl,
+        type: "article",
+        images: news.image ? [{ url: news.image }] : [],
+      },
+      twitter: {
+        card: "summary_large_image",
+        title: news.title,
+        description: cleanDescription(news.description || "اخبار متاورس رنگ"),
+        images: news.image ? [news.image] : [],
+      },
+      robots: { index: true, follow: true },
+    };
+  } catch (error) {
+    console.error("❌ Metadata error (NewsPage):", error);
+
+    return {
+      title: "خطا",
+      description: "مشکلی در بارگذاری صفحه رخ داده است",
+    };
+  }
+}
+
+// ======================================
+// Static Paths - بر اساس دیتای استاتیک news.json
+// ======================================
+export async function generateStaticParams() {
+  try {
+    if (!fallbackNewsData || fallbackNewsData.length === 0) return [];
+
+    // فقط فارسی (طبق دیتای موجود، همه اخبار فارسی هستند)
+    return fallbackNewsData.map((news: any) => ({
+      lang: "fa",
+      category: news.categorySlug,
+      slug: news.slug,
+    }));
+  } catch (error) {
+    console.error("Error generating static params:", error);
+    return [];
+  }
+}
+
+// هر ۱۰ دقیقه یکبار صفحات استاتیک رو به‌روزرسانی کنه (ISR)
+
+export const dynamicParams = true; // اجازه می‌ده اخبار جدید بدون rebuild هم کار کنن
+
+// ======================================
+// صفحه اصلی خبر
+// ======================================
+export default async function NewsPage({ params }: NewsPageProps) {
+  const resolvedParams = await params;
+  const { lang } = resolvedParams;
+  try {
+    function cleanDescription(html: any, limit = 100) {
+      if (!html) return "";
+
+      // Normalize to string
+      let text = String(html);
+
+      // Remove any angle brackets to prevent partial tags (e.g., "<script")
+      text = text.replace(/[<>]/g, "");
+
+      // Remove HTML tags
+      text = text.replace(/<[^>]*>/g, "");
+
+      // Collapse consecutive whitespace and trim
+      text = text.replace(/\s+/g, " ").trim();
+
+      return text.length > limit
+        ? text.slice(0, limit).trim() + "…"
+        : text;
+    }
+
+    const { slug, category } = resolvedParams;
+
+    // دریافت خبر اصلی با fallback
+    const { data: news, fromFallback: newsFromFallback } = await fetchNewsBySlugWithFallback(slug);
+
+    if (!news) {
+      const [langData, langArray, mainData] = await Promise.all([
+        getTranslation(lang),
+        getLangArray(),
+        getMainFile(await getTranslation(lang)),
+      ]);
+
+      return (
+        <NotFoundPage
+          lang={lang}
+          params={resolvedParams}
+          langData={langData}
+          langArray={langArray}
+          mainData={mainData}
+        />
+      );
+    }
+
+    // چک کردن category
+    if (category !== news.categorySlug) {
+      const [langData, langArray, mainData] = await Promise.all([
+        getTranslation(lang),
+        getLangArray(),
+        getMainFile(await getTranslation(lang)),
+      ]);
+
+      return (
+        <NotFoundPage
+          lang={lang}
+          params={resolvedParams}
+          langData={langData}
+          langArray={langArray}
+          mainData={mainData}
+        />
+      );
+    }
+
+    // هشدار در صورت استفاده از fallback
+    if (newsFromFallback) {
+      console.log(`ℹ️ [News:${slug}] News data is currently being served from fallback JSON file`);
+    }
+
+    // اخبار همان دسته برای Prev/Next با fallback
+    const { data: categoryNews, fromFallback: categoryFromFallback } = await fetchCategoryNewsWithFallback(
+      news.categorySlug || "",
+      slug
+    );
+
+    if (categoryFromFallback && categoryNews && categoryNews.length > 0) {
+      console.log(`ℹ️ [Category:${news.categorySlug}] Category news for Prev/Next from fallback`);
+    }
+
+    const [langData, langArray, mainData] = await Promise.all([
+      getTranslation(lang),
+      getLangArray(),
+      getMainFile(await getTranslation(lang)),
+    ]);
+
+    // JSON-LD Schema
+    const schema = {
+      "@context": "https://schema.org",
+      "@type": "NewsArticle",
+      headline: news.title,
+      description: cleanDescription(news.description || "اخبار متاورس رنگ"),
+      image: news.image ? [news.image] : undefined,
+      author: {
+        "@type": "Person",
+        name: news.author?.name ?? "نویسنده",
+      },
+      datePublished: news.date,
+      mainEntityOfPage: {
+        "@type": "WebPage",
+        "@id": `https://metarang.com/${lang}/news/categories/${category}/${slug}`,
+      },
+      publisher: {
+        "@type": "Organization",
+        name: "متاورس رنگ",
+        logo: {
+          "@type": "ImageObject",
+          url: "https://metarang.com/logo.png",
+        },
+      },
+    };
+
+    return (
+      <div className="w-full relative bg-[#f8f8f8] dark:bg-black" dir={langData.direction}>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+        />
+        <CleanAutoRetryParam />
+        <section className="w-full overflow-y-auto relative bg-[#f8f8f8] dark:bg-black mt-[60px] lg:mt-0">
+          <div className="px-5 2xl:px-10">
+            <BreadCrumb params={resolvedParams} title={news.title} articleCat={news.category || ""} />
+          </div>
+
+          <div className="mainContainer w-full flex flex-col gap-5 items-center lg:flex-row lg:items-start px-5 lg:px-10">
+            {/* محتوای اصلی */}
+            <div className="lg:w-[70%] 3xl:w-[80%]">
+              <div className="flex flex-col gap-10 w-full items-center rounded-xl bg-white dark:bg-[#1A1A18] shadow-lg p-5 xl:p-10">
+                <AuthorSection
+                  author={news.author}
+                  // date={news.date}
+                  title={news.title}
+                  content={news.content}
+                  stats={news.stats}
+                  mainData={mainData}
+                  lang={lang}
+                />
+                <NewsHeader
+                  title={news.title}
+                  author={news.author}
+                  date={news.date}
+                  description={news.description}
+                />
+                <NewsImage
+                  news={{
+                    image: news.image,
+                    title: news.title,
+                    video: news.video, // اگر ویدیو داشته باشد
+                    slug: news.slug,
+                    categorySlug: news.categorySlug
+                  }}
+                  params={resolvedParams}
+                  mainData={mainData}
+                />
+                <NewsContent content={news.content} gallery={news.gallery}/>
+                <NewsStats
+                  stats={news.stats}
+                  category={news.category}
+                  categorySlug={news.categorySlug}
+                  date={news.date}
+                  readingTime={news.readingTime}
+                  mainData={mainData}
+                  lang={lang}
+                  className="mb-4"
+                  showIcons={true}
+                />
+              </div>
+              <NewsTags
+                tags={news.tags}
+                showIcon={true}
+              />
+              <div className="w-full mt-10 space-y-28">
+                <ShowSocialWrapper params={resolvedParams} mainData={mainData} news={news} />
+                <PrevNextNews params={resolvedParams} news={categoryNews || []} mainData={mainData} />
+              </div>
+            </div>
+            <div className="w-full hidden lg:block lg:w-[30%] 3xl:w-[20%] sticky top-5">
+              <SideCard params={params} mainData={mainData} />
+            </div>
+          </div>
+          <div className="ps-5 lg:ps-10 w-full flex items-center mt-14 lg:mt-20 flex-col gap-14">
+            <PopularNews params={resolvedParams} mainData={mainData} initialNews={[]} />
+          </div>
+          <div className="w-full px-5 flex flex-col items-center mt-10">
+            <svg xmlns="http://www.w3.org/2000/svg" width="364" height="364" viewBox="0 0 364 364" fill="none" className="mb-[-140px] dark:hidden">
+              <path d="M333.666 174.419V235.086C333.666 288.169 303.333 310.919 257.833 310.919H106.166C60.6663 310.919 30.333 288.169 30.333 235.086V128.919C30.333 75.8359 60.6663 53.0859 106.166 53.0859H182" stroke="url(#paint0_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M106.167 136.5L166.834 174.417C182.728 186.394 211.606 171.228 227.5 159.25" stroke="url(#paint1_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M280.097 47.0625C264.099 47.0625 251.097 60.0642 251.097 76.0625V90.0308C251.097 92.9792 249.84 97.4742 248.342 99.9875L242.784 109.219C239.352 114.923 241.72 121.254 248.004 123.381C268.835 130.341 291.31 130.341 312.142 123.381C317.99 121.448 320.552 114.536 317.362 109.219L311.804 99.9875C310.354 97.4742 309.097 92.9792 309.097 90.0308V76.0625C309.097 60.1125 296.047 47.0625 280.097 47.0625Z" stroke="url(#paint2_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" />
+              <path d="M289.039 48.465C287.54 48.03 285.994 47.6917 284.399 47.4983C279.759 46.9183 275.312 47.2567 271.155 48.465C272.557 44.8883 276.037 42.375 280.097 42.375C284.157 42.375 287.637 44.8883 289.039 48.465Z" stroke="url(#paint3_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M294.597 125.125C294.597 133.1 288.072 139.625 280.097 139.625C276.133 139.625 272.46 137.982 269.85 135.372C267.24 132.762 265.597 129.088 265.597 125.125" stroke="url(#paint4_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" />
+              <defs>
+                <linearGradient id="paint0_linear_4633_15252" x1="182" y1="53.0859" x2="182" y2="310.919" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
+                </linearGradient>
+                <linearGradient id="paint1_linear_4633_15252" x1="166.834" y1="136.5" x2="166.834" y2="178.788" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
+                </linearGradient>
+                <linearGradient id="paint2_linear_4633_15252" x1="279.977" y1="47.0625" x2="279.977" y2="128.601" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
+                </linearGradient>
+                <linearGradient id="paint3_linear_4633_15252" x1="280.097" y1="42.375" x2="280.097" y2="48.465" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
+                </linearGradient>
+                <linearGradient id="paint4_linear_4633_15252" x1="280.097" y1="125.125" x2="280.097" y2="139.625" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
+                </linearGradient>
+              </defs>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="364" height="364" viewBox="0 0 364 364" fill="none" className="mb-[-140px] hidden dark:block">
+              <path d="M333.667 174.419V235.086C333.667 288.169 303.334 310.919 257.834 310.919H106.167C60.6673 310.919 30.334 288.169 30.334 235.086V128.919C30.334 75.8359 60.6673 53.0859 106.167 53.0859H182.001" stroke="url(#paint0_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M106.166 136.5L166.833 174.417C182.727 186.394 211.605 171.228 227.499 159.25" stroke="url(#paint1_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M280.096 47.0625C264.098 47.0625 251.096 60.0642 251.096 76.0625V90.0308C251.096 92.9792 249.839 97.4742 248.341 99.9875L242.783 109.219C239.351 114.923 241.719 121.254 248.003 123.381C268.834 130.341 291.309 130.341 312.141 123.381C317.989 121.448 320.551 114.536 317.361 109.219L311.803 99.9875C310.353 97.4742 309.096 92.9792 309.096 90.0308V76.0625C309.096 60.1125 296.046 47.0625 280.096 47.0625Z" stroke="url(#paint2_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" />
+              <path d="M289.038 48.465C287.539 48.03 285.993 47.6917 284.398 47.4983C279.758 46.9183 275.311 47.2567 271.154 48.465C272.556 44.8883 276.036 42.375 280.096 42.375C284.156 42.375 287.636 44.8883 289.038 48.465Z" stroke="url(#paint3_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M294.596 125.125C294.596 133.1 288.071 139.625 280.096 139.625C276.132 139.625 272.459 137.982 269.849 135.372C267.239 132.762 265.596 129.088 265.596 125.125" stroke="url(#paint4_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" />
+              <defs>
+                <linearGradient id="paint0_linear_4633_15270" x1="182.001" y1="53.0859" x2="182.001" y2="310.919" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
+                </linearGradient>
+                <linearGradient id="paint1_linear_4633_15270" x1="166.833" y1="136.5" x2="166.833" y2="178.788" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
+                </linearGradient>
+                <linearGradient id="paint2_linear_4633_15270" x1="279.976" y1="47.0625" x2="279.976" y2="128.601" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
+                </linearGradient>
+                <linearGradient id="paint3_linear_4633_15270" x1="280.096" y1="42.375" x2="280.096" y2="48.465" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
+                </linearGradient>
+                <linearGradient id="paint4_linear_4633_15270" x1="280.096" y1="125.125" x2="280.096" y2="139.625" gradientUnits="userSpaceOnUse">
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
+                </linearGradient>
+              </defs>
+            </svg>
+            <div className="bg-white dark:bg-[#0E0E0E] w-full max-w-7xl rounded-xl py-10 2xl:py-12 px-5 2xl:px-10 text-center flex flex-col items-center gap-4 mx-auto">
+              <p className="text-2xl dark:text-white 2xl:text-[32px] font-rokh dark:text-wrap font-bold">{findByUniqueId(mainData, 1626) || "خبرنامه متاورس"}</p>
+              <p className="lg:text-lg dark:text-[#868B90] text-[#656565]">{findByUniqueId(mainData, 1627) || "برای اطلاع از آخرین اخبار، تحلیل ها و مطالب اختصاصی، می توانید در خبرنامه ما عضو شوید.هدف ما ارائه محتوای دقیق، معتبر و به روز است تا همواره از مهم ترین تحولات باخبر باشید. در صورت تمایل، کافی است آدرس ایمیل خود را وارد کنید تا از این پس، به روزترین محتواها و اطلاع رسانی های رسمی را بدون نیاز به مراجعه مداوم به وب سایت، دریافت کنید."}</p>
+              <div className="w-full flex flex-col gap-2 gap-y-5 lg:flex-row max-w-3xl">
+                <input type="text" name="" id="" placeholder={findByUniqueId(mainData, 1626) || "آدرس ایمیل"} className="bg-[#F5F5F5] w-full lg:w-[75%] dark:bg-black rounded-xl border-0 ring-1 ring-[#D9D9D9] dark:ring-[#434343] px-4 py-2 focus:outline-none focus:ring-2 focus:ring-light-primary focus:dark:ring-dark-yellow focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-darkGray" />
+                <button className="bg-light-primary font-bold dark:bg-dark-yellow text-white dark:text-black rounded-xl px-5 py-2 lg:w-[25%]">{findByUniqueId(mainData, 2)}</button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  } catch (error) {
+    const serializedError = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      stack: error instanceof Error ? error.stack : null,
+      name: error instanceof Error ? error.name : "Error",
+    };
+
+    console.error("❌ Error in NewsPage:", serializedError);
+
+    return <CustomErrorPage error={serializedError} />;
+  }
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/[category]/page.tsx b/src/app/[lang]/news/categories/[category]/page.tsx
index e3cad117..2bda1543 100644
--- a/src/app/[lang]/news/categories/[category]/page.tsx
+++ b/src/app/[lang]/news/categories/[category]/page.tsx
@@ -8,24 +8,107 @@ import { supabase } from "@/utils/lib/supabaseClient";
 import CustomErrorPage from "@/components/shared/CustomErrorPage";
 import CleanAutoRetryParam from "@/components/shared/CleanAutoRetryParam";
 
+// ایمپورت دیتای استاتیک به عنوان fallback
+import fallbackNewsData from "@/components/utils/news.json";
+
 interface NewsCategoryPageProps {
+  params: Promise<{ lang: string; category: string; }>;
+}
+
+// ─── تابع کمکی برای نرمالایز کردن دیتای دریافتی ───
+type NormalizedNews = {
+  id: number;
+  title: string;
+  slug: string;
+  image?: string | null;
+  date?: string | null;
+  readingTime?: string | null;
+  stats?: any;
+  category?: string | null;
+  categorySlug?: string | null;
+  categoryImage?: string | null;
+  categoryDec?: string | null;
+  subCategory?: string | null;
+  content?: string | null;
+  description?: string | null;
+  author?: any;
+  tags?: any;
+  video?: string | null;
+};
+
+function normalizeNewsItem(item: any): NormalizedNews {
+  return {
+    id: item.id,
+    title: item.title,
+    slug: item.slug,
+    image: item.image || null,
+    date: item.date || null,
+    readingTime: item.readingTime || null,
+    stats: item.stats || null,
+    category: item.category || null,
+    categorySlug: item.categorySlug || null,
+    categoryImage: item.categoryImage || null,
+    categoryDec: item.categoryDec || null,
+    subCategory: item.subCategory || null,
+    content: item.content || null,
+    description: item.description || null,
+    author: item.author || null,
+    tags: item.tags || null,
+    video: item.video || null,
+  };
+}
+
+// ─── تابع دریافت دیتا با fallback به news.json ───
+async function fetchNewsByCategoryWithFallback(categorySlug: string) {
+  try {
+    // تلاش برای دریافت از Supabase
+    const { data: supabaseNews, error } = await supabase
+      .from("news")
+      .select("*")
+      .eq("categorySlug", categorySlug)
+      .order("date", { ascending: false });
 
-   params: Promise<{ lang: string ;  category: string;}>;
+    // اگر خطایی رخ داد یا دیتایی نیامد، از fallback استفاده کن
+    if (error || !supabaseNews || supabaseNews.length === 0) {
+      if (error) {
+        console.warn(`⚠️ [Category:${categorySlug}] Supabase error, using fallback news.json:`, error.message);
+      } else if (!supabaseNews || supabaseNews.length === 0) {
+        console.warn(`⚠️ [Category:${categorySlug}] No data from Supabase, using fallback news.json`);
+      }
+      
+      // تبدیل دیتای news.json به فرمت مناسب و فیلتر بر اساس categorySlug
+      const fallbackData = fallbackNewsData
+        .map((item: any) => normalizeNewsItem(item))
+        .filter((item: NormalizedNews) => item.categorySlug === categorySlug);
+      
+      return { data: fallbackData, fromFallback: true };
+    }
+
+    // نرمالایز کردن دیتای دریافتی از Supabase
+    const normalizedData = supabaseNews.map((item: any) => normalizeNewsItem(item));
+    
+    return { data: normalizedData, fromFallback: false };
+  } catch (err) {
+    // در صورت بروز هرگونه خطای غیرمنتظره، از fallback استفاده کن
+    console.error(`❌ [Category:${categorySlug}] Unexpected error fetching news, using fallback:`, err);
+    const fallbackData = fallbackNewsData
+      .map((item: any) => normalizeNewsItem(item))
+      .filter((item: NormalizedNews) => item.categorySlug === categorySlug);
+    
+    return { data: fallbackData, fromFallback: true };
+  }
 }
 
 /* ================= METADATA ================= */
 export async function generateMetadata({ params }: NewsCategoryPageProps) {
-     const resolvedParams = await params;
+  const resolvedParams = await params;
   const { lang } = resolvedParams;
   try {
     const categorySlug = decodeURIComponent(resolvedParams.category);
     const siteUrl = "https://metarang.com";
 
-    const { data } = await supabase
-      .from("news")
-      .select("*")
-      .eq("categorySlug", categorySlug)
-      .order("date", { ascending: false });
+    // تلاش برای دریافت از Supabase با fallback
+    const { data } = await fetchNewsByCategoryWithFallback(categorySlug);
 
     if (!data || data.length === 0) {
       return {
@@ -72,7 +155,7 @@ export async function generateMetadata({ params }: NewsCategoryPageProps) {
 
 /* ================= PAGE ================= */
 export default async function NewsCategoryPage({ params }: NewsCategoryPageProps) {
-     const resolvedParams = await params;
+  const resolvedParams = await params;
   const { lang } = resolvedParams;
   try {
     const categorySlug = decodeURIComponent(resolvedParams.category);
@@ -80,11 +163,13 @@ export default async function NewsCategoryPage({ params }: NewsCategoryPageProps
     const langData = await getTranslation(lang);
     const mainData = await getMainFile(langData);
 
-    const { data: newsData } = await supabase
-      .from("news")
-      .select("*")
-      .eq("categorySlug", categorySlug)
-      .order("date", { ascending: false });
+    // ─── دریافت اخبار با قابلیت fallback ───
+    const { data: newsData, fromFallback } = await fetchNewsByCategoryWithFallback(categorySlug);
+
+    // هشدار در صورت استفاده از fallback (اختیاری)
+    if (fromFallback && newsData && newsData.length > 0) {
+      console.log(`ℹ️ [Category:${categorySlug}] News data is currently being served from fallback JSON file`);
+    }
 
     if (!newsData || newsData.length === 0) {
       return (
@@ -114,106 +199,116 @@ export default async function NewsCategoryPage({ params }: NewsCategoryPageProps
       0
     );
     const baseUrl = "https://metarang.com";
-const categoryUrl = `${baseUrl}/${lang}/news/categories/${categorySlug}`;
+    const categoryUrl = `${baseUrl}/${lang}/news/categories/${categorySlug}`;
 
-const jsonLd = {
-  "@context": "https://schema.org",
-  "@graph": [
-    /* ================= Breadcrumb ================= */
-    {
-      "@type": "BreadcrumbList",
-      "itemListElement": [
-        {
-          "@type": "ListItem",
-          "position": 1,
-          "name": "صفحه اصلی",
-          "item": `${baseUrl}/${lang}`,
-        },
+    const jsonLd = {
+      "@context": "https://schema.org",
+      "@graph": [
+        /* ================= Breadcrumb ================= */
         {
-          "@type": "ListItem",
-          "position": 2,
-          "name": "اخبار",
-          "item": `${baseUrl}/${lang}/news`,
+          "@type": "BreadcrumbList",
+          "itemListElement": [
+            {
+              "@type": "ListItem",
+              "position": 1,
+              "name": "صفحه اصلی",
+              "item": `${baseUrl}/${lang}`,
+            },
+            {
+              "@type": "ListItem",
+              "position": 2,
+              "name": "اخبار",
+              "item": `${baseUrl}/${lang}/news`,
+            },
+            {
+              "@type": "ListItem",
+              "position": 3,
+              "name": category,
+              "item": categoryUrl,
+            },
+          ],
         },
+
+        /* ================= Collection Page ================= */
         {
-          "@type": "ListItem",
-          "position": 3,
-          "name": category,
-          "item": categoryUrl,
+          "@type": "CollectionPage",
+          "@id": `${categoryUrl}#webpage`,
+          "url": categoryUrl,
+          "name": `${category} | اخبار`,
+          "description": categoryDec || `آخرین اخبار مرتبط با ${category}`,
+          "isPartOf": {
+            "@type": "WebSite",
+            "name": "MetaRang",
+            "url": baseUrl,
+          },
+          "inLanguage": lang === "fa" ? "fa-IR" : "en-US",
         },
-      ],
-    },
 
-    /* ================= Collection Page ================= */
-    {
-      "@type": "CollectionPage",
-      "@id": `${categoryUrl}#webpage`,
-      "url": categoryUrl,
-      "name": `${category} | اخبار`,
-      "description": categoryDec || `آخرین اخبار مرتبط با ${category}`,
-      "isPartOf": {
-        "@type": "WebSite",
-        "name": "MetaRang",
-        "url": baseUrl,
-      },
-      "inLanguage": lang === "fa" ? "fa-IR" : "en-US",
-    },
-
-    /* ================= News List ================= */
-    {
-      "@type": "ItemList",
-      "name": `اخبار دسته ${category}`,
-      "itemListOrder": "Descending",
-      "numberOfItems": newsData.length,
-      "itemListElement": newsData.map((n, index) => {
-        const publishedDate = n.date
-          ? new Date(n.date).toISOString()
-          : new Date().toISOString();
+        /* ================= News List ================= */
+        {
+          "@type": "ItemList",
+          "name": `اخبار دسته ${category}`,
+          "itemListOrder": "Descending",
+          "numberOfItems": newsData.length,
+          "itemListElement": newsData.map((n, index) => {
+            // تبدیل تاریخ شمسی به ISO (اگر تاریخ به فرمت شمسی باشد)
+            let publishedDate = new Date().toISOString();
+            if (n.date) {
+              // اگر تاریخ به فرمت "1404.09.05" باشد
+              const parts = n.date.split(/[-/.]/);
+              if (parts.length === 3) {
+                // تبدیل تقریبی - توجه: این یک تبدیل دقیق نیست، فقط برای جلوگیری از خطا
+                publishedDate = `${parseInt(parts[0]) - 621}/${
+                  parts[1].padStart(2, "0")
+                }/${parts[2].padStart(2, "0")}T00:00:00Z`;
+              } else {
+                publishedDate = n.date;
+              }
+            }
 
-        return {
-          "@type": "ListItem",
-          "position": index + 1,
-          "item": {
-            "@type": "NewsArticle",
-            "headline": n.title,
-            "description":
-              n.description || categoryDec || "خبر جدید از متاورس رنگ",
-            "url": `${baseUrl}/${lang}/news/${n.slug}`,
-            "datePublished": publishedDate,
-            "dateModified": publishedDate,
-            "image": n.image || `${baseUrl}/default.png`,
-            "author": {
-              "@type": "Organization",
-              "name": "MetaRang",
-            },
-            "publisher": {
-              "@type": "Organization",
-              "name": "MetaRang",
-              "logo": {
-                "@type": "ImageObject",
-                "url": `${baseUrl}/_next/image?url=%2Flogo.png&w=120&q=75`,
+            return {
+              "@type": "ListItem",
+              "position": index + 1,
+              "item": {
+                "@type": "NewsArticle",
+                "headline": n.title,
+                "description":
+                  n.description || categoryDec || "خبر جدید از متاورس رنگ",
+                "url": `${baseUrl}/${lang}/news/${n.slug}`,
+                "datePublished": publishedDate,
+                "dateModified": publishedDate,
+                "image": n.image || `${baseUrl}/default.png`,
+                "author": {
+                  "@type": "Organization",
+                  "name": "MetaRang",
+                },
+                "publisher": {
+                  "@type": "Organization",
+                  "name": "MetaRang",
+                  "logo": {
+                    "@type": "ImageObject",
+                    "url": `${baseUrl}/_next/image?url=%2Flogo.png&w=120&q=75`,
+                  },
+                },
+                "mainEntityOfPage": {
+                  "@type": "WebPage",
+                  "@id": `${baseUrl}/${lang}/news/${n.slug}`,
+                },
+                "inLanguage": lang === "fa" ? "fa-IR" : "en-US",
+                "isAccessibleForFree": true,
               },
-            },
-            "mainEntityOfPage": {
-              "@type": "WebPage",
-              "@id": `${baseUrl}/${lang}/news/${n.slug}`,
-            },
-            "inLanguage": lang === "fa" ? "fa-IR" : "en-US",
-            "isAccessibleForFree": true,
-          },
-        };
-      }),
-    },
-  ],
-};
-
+            };
+          }),
+        },
+      ],
+    };
 
     return (
       <section className="w-full bg-[#f8f8f8] dark:bg-black">
         <script
-  type="application/ld+json"
-  dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-/>
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
         <CleanAutoRetryParam />
 
         <div className="px-5 mt-[60px] lg:mt-0">
@@ -258,4 +353,4 @@ const jsonLd = {
     console.error("❌ NewsCategoryPage Error:", error);
     return <CustomErrorPage />;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/categories/page.tsx b/src/app/[lang]/news/categories/page.tsx
index d914e41c..eab46227 100644
--- a/src/app/[lang]/news/categories/page.tsx
+++ b/src/app/[lang]/news/categories/page.tsx
@@ -1,18 +1,100 @@
 // src/app/[lang]/news/categories/page.tsx
 
 import BreadCrumb from "@/components/shared/BreadCrumb";
-import CategoriesList from "./CategoriesList"; // همون کامپوننت
+import CategoriesList from "./CategoriesList";
 import SearchComponent from "@/components/shared/SearchComponent";
 import { supabase } from "@/utils/lib/supabaseClient";
 import { getTranslation, getMainFile } from "@/components/utils/actions";
 import { findByUniqueId } from "@/components/utils/findByUniqueId";
 import CustomErrorPage from "@/components/shared/CustomErrorPage";
 import CleanAutoRetryParam from "@/components/shared/CleanAutoRetryParam";
+
+// ایمپورت دیتای استاتیک به عنوان fallback
+import fallbackNewsData from "@/components/utils/news.json";
+
 interface NewsCategoriesPageProps {
   params: Promise<{ lang: string }>;
 }
-export async function generateMetadata({ params }:NewsCategoriesPageProps) {
-     const resolvedParams = await params;
+
+// ─── تابع کمکی برای نرمالایز کردن دیتای دریافتی ───
+type NormalizedNews = {
+  id: number;
+  title: string;
+  slug: string;
+  image?: string | null;
+  date?: string | null;
+  readingTime?: string | null;
+  stats?: any;
+  category?: string | null;
+  categorySlug?: string | null;
+  categoryImage?: string | null;
+  subCategory?: string | null;
+  content?: string | null;
+  description?: string | null;
+  author?: any;
+  tags?: any;
+  video?: string | null;
+};
+
+function normalizeNewsItem(item: any): NormalizedNews {
+  return {
+    id: item.id,
+    title: item.title,
+    slug: item.slug,
+    image: item.image || null,
+    date: item.date || null,
+    readingTime: item.readingTime || null,
+    stats: item.stats || null,
+    category: item.category || null,
+    categorySlug: item.categorySlug || null,
+    categoryImage: item.categoryImage || null,
+    subCategory: item.subCategory || null,
+    content: item.content || null,
+    description: item.description || null,
+    author: item.author || null,
+    tags: item.tags || null,
+    video: item.video || null,
+  };
+}
+
+// ─── تابع دریافت دیتا با fallback به news.json ───
+async function fetchNewsWithFallback() {
+  try {
+    // تلاش برای دریافت از Supabase
+    const { data: supabaseNews, error } = await supabase
+      .from("news")
+      .select("*")
+      .order("date", { ascending: false });
+
+    // اگر خطایی رخ داد یا دیتایی نیامد، از fallback استفاده کن
+    if (error || !supabaseNews || supabaseNews.length === 0) {
+      if (error) {
+        console.warn("⚠️ [Categories] Supabase error, using fallback news.json:", error.message);
+      } else if (!supabaseNews || supabaseNews.length === 0) {
+        console.warn("⚠️ [Categories] No data from Supabase, using fallback news.json");
+      }
+      
+      // تبدیل دیتای news.json به فرمت مناسب
+      const fallbackData = fallbackNewsData.map((item: any) => normalizeNewsItem(item));
+      
+      return { data: fallbackData, fromFallback: true };
+    }
+
+    // نرمالایز کردن دیتای دریافتی از Supabase
+    const normalizedData = supabaseNews.map((item: any) => normalizeNewsItem(item));
+    
+    return { data: normalizedData, fromFallback: false };
+  } catch (err) {
+    // در صورت بروز هرگونه خطای غیرمنتظره، از fallback استفاده کن
+    console.error("❌ [Categories] Unexpected error fetching news, using fallback:", err);
+    const fallbackData = fallbackNewsData.map((item: any) => normalizeNewsItem(item));
+    
+    return { data: fallbackData, fromFallback: true };
+  }
+}
+
+export async function generateMetadata({ params }: NewsCategoriesPageProps) {
+  const resolvedParams = await params;
   const { lang } = resolvedParams;
   try {
     const baseUrl = "https://metarang.com";
@@ -54,29 +136,45 @@ export async function generateMetadata({ params }:NewsCategoriesPageProps) {
 export const revalidate = 0;
 
 export default async function NewsCategoriesPage({ params }: NewsCategoriesPageProps) {
-     const resolvedParams = await params;
+  const resolvedParams = await params;
   const { lang } = resolvedParams;
   try {
     const [langData] = await Promise.all([getTranslation(lang)]);
     const mainData = await getMainFile(langData);
 
-    const { data: newsData, error } = await supabase
-      .from("news")
-      .select("*")
-      .order("date", { ascending: false });
+    // ─── دریافت اخبار با قابلیت fallback ───
+    const { data: newsData, fromFallback } = await fetchNewsWithFallback();
 
-    if (error) console.error("Supabase fetch error:", error);
+    // اگر هیچ دیتایی از هیچ منبعی نیامد
+    if (!newsData || newsData.length === 0) {
+      console.error("❌ [Categories] No news data available from both Supabase and fallback");
+      return (
+        <section className="w-full bg-[#f8f8f8] dark:bg-black px-5 3xl:px-10 min-h-screen">
+          <div className="mb-6 mt-[60px] lg:mt-0">
+            <BreadCrumb params={resolvedParams} />
+          </div>
+          <div className="text-center py-20">
+            <p className="text-xl dark:text-white">هیچ دسته‌بندی یافت نشد</p>
+          </div>
+        </section>
+      );
+    }
 
+    // هشدار در صورت استفاده از fallback (اختیاری)
+    if (fromFallback) {
+      console.log("ℹ️ [Categories] News data is currently being served from fallback JSON file");
+    }
 
-    const news = newsData || [];
+    const news = newsData;
 
-    // دسته‌بندی‌ها
-    const categories = [...new Set(news.map((n) => n.category).filter(Boolean))];
+    // ─── دسته‌بندی‌ها ───
+    const categories = [...new Set(news.map((n: NormalizedNews) => n.category).filter(Boolean))];
 
     const categoryImages: Record<string, string> = {};
     const categorySlugs: Record<string, string> = {};
     const subcategoryCounts: Record<string, number> = {};
-    news.forEach((n) => {
+    
+    news.forEach((n: NormalizedNews) => {
       if (n.category) {
         if (n.categoryImage && !categoryImages[n.category]) {
           categoryImages[n.category] = n.categoryImage;
@@ -87,15 +185,13 @@ export default async function NewsCategoriesPage({ params }: NewsCategoriesPageP
           : encodeURIComponent(n.category);
       }
     });
-    
-
-news.forEach((n) => {
-  if (n.category && n.subCategory) {
-    subcategoryCounts[n.category] =
-      (subcategoryCounts[n.category] || 0) + 1;
-  }
-});
 
+    news.forEach((n: NormalizedNews) => {
+      if (n.category && n.subCategory) {
+        subcategoryCounts[n.category] =
+          (subcategoryCounts[n.category] || 0) + 1;
+      }
+    });
 
     const baseUrl = "https://metarang.com";
     const langPrefix = lang ? `/${lang}` : "";
@@ -127,9 +223,9 @@ news.forEach((n) => {
           "itemListElement": categories.map((cat, index) => ({
             "@type": "ListItem",
             "position": index + 1,
-            "url": `${baseUrl}${langPrefix}/news/categories/${categorySlugs[cat]}`,
+            "url": `${baseUrl}${langPrefix}/news/categories/${categorySlugs[cat as string]}`,
             "name": cat,
-            "image": categoryImages[cat] || undefined,
+            "image": categoryImages[cat as string] || undefined,
           })),
         },
       ],
@@ -176,6 +272,7 @@ news.forEach((n) => {
       </section>
     );
   } catch (error) {
+    console.error("❌ [Categories] Error in NewsCategoriesPage:", error);
     return <CustomErrorPage />;
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/components/ArticleCard.tsx b/src/app/[lang]/news/components/ArticleCard.tsx
index ff4b6c09..65532a27 100644
--- a/src/app/[lang]/news/components/ArticleCard.tsx
+++ b/src/app/[lang]/news/components/ArticleCard.tsx
@@ -56,6 +56,7 @@ export default function ArticleCard({ item, params, theme, activeLoadingId, setA
             alt={item.title}
             width={400}
             height={260}
+            unoptimized={true}
             priority
             quality={70}
             sizes="(max-width: 640px) 320px, (max-width: 1024px) 473px,"
diff --git a/src/app/[lang]/news/components/LatestNews.tsx b/src/app/[lang]/news/components/LatestNews.tsx
index c521a4f6..f91c6ba9 100644
--- a/src/app/[lang]/news/components/LatestNews.tsx
+++ b/src/app/[lang]/news/components/LatestNews.tsx
@@ -244,7 +244,7 @@ const LatestNews: React.FC<LatestNewsProps> = ({
                         className="object-cover rounded-lg"
                       />
                     ) : (
-                      <div className="w-full h-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs text-gray-500">
+                      <div className="w-full h-full bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-xs text-gray-500">
                         بدون عکس
                       </div>
                     )}
diff --git a/src/app/[lang]/news/components/MainNewsCard.tsx b/src/app/[lang]/news/components/MainNewsCard.tsx
index 6c713387..8841e714 100644
--- a/src/app/[lang]/news/components/MainNewsCard.tsx
+++ b/src/app/[lang]/news/components/MainNewsCard.tsx
@@ -56,6 +56,7 @@ export default function ArticleCard({ item, params, theme, activeLoadingId, setA
             alt={item.title}
             width={400}
             height={260}
+            unoptimized={true}
             priority
             quality={70}
             sizes="(max-width: 640px) 320px, (max-width: 1024px) 473px,"
diff --git a/src/app/[lang]/news/components/PopularNews.tsx b/src/app/[lang]/news/components/PopularNews.tsx
index 16fea888..f334d72b 100644
--- a/src/app/[lang]/news/components/PopularNews.tsx
+++ b/src/app/[lang]/news/components/PopularNews.tsx
@@ -9,6 +9,9 @@ import { Calender, Timer, View } from "@/components/svgs/SvgEducation";
 import { findByUniqueId } from "@/components/utils/findByUniqueId";
 import { formatNumber } from "@/components/utils/formatNumber";
 
+// ایمپورت دیتای استاتیک به عنوان fallback
+import fallbackNewsData from "@/components/utils/news.json";
+
 interface News {
   id: string | number;
   title: string;
@@ -34,21 +37,31 @@ interface PopularNewsProps {
 
 const PopularNews: React.FC<PopularNewsProps> = ({ params, mainData, theme = "light" , initialNews }) => {
 
-
 const [mounted, setMounted] = useState(false);
+const [fallbackData, setFallbackData] = useState<News[] | null>(null);
 
 useEffect(() => {
   setMounted(true);
-}, []);
-
+  // اگر initialNews خالی بود، از fallback استفاده کن
+  if (!initialNews || initialNews.length === 0) {
+    const formattedData = fallbackNewsData.map((item: any) => ({
+      ...item,
+      stats: typeof item.stats === 'string' ? JSON.parse(item.stats) : item.stats,
+    }));
+    setFallbackData(formattedData);
+  }
+}, [initialNews]);
 
 const [activeLoadingId, setActiveLoadingId] =
   useState<string | number | null>(null);
 
+// استفاده از fallback اگر initialNews خالی بود
+const effectiveNews = (initialNews && initialNews.length > 0) ? initialNews : (fallbackData || []);
+
 const sortedPopular = useMemo(() => {
-  if (!initialNews?.length) return [];
+  if (!effectiveNews?.length) return [];
 
-  return [...initialNews]
+  return [...effectiveNews]
     .map((item) => ({
       ...item,
       stats: {
@@ -58,7 +71,7 @@ const sortedPopular = useMemo(() => {
     }))
     .sort((a, b) => Number(b.stats.views) - Number(a.stats.views))
     .slice(0, 4);
-}, [initialNews]);
+}, [effectiveNews]);
 
   const getCategorySlug = (item: News) =>
     item.categorySlug ||
@@ -251,12 +264,13 @@ if (!mounted) {
                         alt={"popList" + item.title}
                         fill
                         loading="lazy"
+                        unoptimized={true}
                         sizes="(max-width: 768px) 90vw, 15vw"
                         quality={50}
                         className="object-cover rounded-lg"
                       />
                     ) : (
-                      <div className="w-full h-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs text-gray-500">
+                      <div className="w-full h-full bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center text-xs text-gray-500">
                         بدون عکس
                       </div>
                     )}
diff --git a/src/app/[lang]/news/components/VideoNewsList.tsx b/src/app/[lang]/news/components/VideoNewsList.tsx
index 18daf097..4f3ae027 100644
--- a/src/app/[lang]/news/components/VideoNewsList.tsx
+++ b/src/app/[lang]/news/components/VideoNewsList.tsx
@@ -6,6 +6,10 @@ import Link from "next/link";
 import { supabase } from "@/utils/lib/supabaseClient";
 import { Calender, Timer } from "@/components/svgs/SvgEducation";
 import { findByUniqueId } from "@/components/utils/findByUniqueId";
+
+// ایمپورت دیتای استاتیک به عنوان fallback
+import fallbackNewsData from "@/components/utils/news.json";
+
 interface VideoItem {
   id: string | number;
   title: string;
@@ -23,26 +27,22 @@ interface Props {
   limit?: number;
   title?: string;
   date?: string;
-
 }
 
 export default function VideoNewsInlinePlayer({
   params,
   mainData,
   limit = 6,
-
 }: Props) {
   const [videos, setVideos] = useState<VideoItem[]>([]);
   const [active, setActive] = useState<VideoItem | null>(null);
-
-  // 👇 کلید اصلی
   const [hasPlayed, setHasPlayed] = useState(false);
-
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   useEffect(() => {
     const fetchVideos = async () => {
-      const { data } = await supabase
+      // تلاش برای دریافت از Supabase
+      const { data, error } = await supabase
         .from("news")
         .select("id, title, slug, image, video, date, readingTime, categorySlug")
         .neq("video", "")
@@ -50,6 +50,43 @@ export default function VideoNewsInlinePlayer({
         .order("date", { ascending: false })
         .limit(limit);
 
+      // اگر خطایی رخ داد یا دیتایی نیامد، از fallback استفاده کن
+      if (error || !data || data.length === 0) {
+        if (error) {
+          console.warn("⚠️ VideoNews: Supabase error, using fallback news.json", error.message);
+        } else if (!data || data.length === 0) {
+          console.warn("⚠️ VideoNews: No data from Supabase, using fallback news.json");
+        }
+        
+        // استفاده از دیتای fallback و فیلتر کردن خبرهایی که ویدئو دارند
+        const fallbackData = fallbackNewsData
+          .filter((item: any) => item.video && item.video !== "" && item.video !== null)
+          .map((item: any) => ({
+            id: item.id,
+            title: item.title,
+            slug: item.slug,
+            image: item.image,
+            video: item.video,
+            date: item.date,
+            readingTime: item.readingTime ? parseInt(item.readingTime) : undefined,
+            categorySlug: item.categorySlug,
+          }))
+          .sort((a, b) => {
+            // مرتب‌سازی بر اساس تاریخ (جدیدترین اول)
+            const dateA = a.date ? parseInt(a.date.replace(/\//g, "")) : 0;
+            const dateB = b.date ? parseInt(b.date.replace(/\//g, "")) : 0;
+            return dateB - dateA;
+          })
+          .slice(0, limit);
+        
+        if (fallbackData.length) {
+          setVideos(fallbackData);
+          setActive(fallbackData[0]);
+          setHasPlayed(false);
+        }
+        return;
+      }
+
       if (data?.length) {
         setVideos(data);
         setActive(data[0]);
@@ -63,33 +100,32 @@ export default function VideoNewsInlinePlayer({
   // autoplay فقط بعد از play
   useEffect(() => {
     if (hasPlayed && videoRef.current) {
-      videoRef.current.play().catch(() => { });
+      videoRef.current.play().catch(() => {});
     }
   }, [hasPlayed, active]);
 
   if (!active) return null;
 
   return (
-    <section className="w-full bg-white dark:bg-[#0b0b0b]  py-10 lg:py-20">
+    <section className="w-full bg-white dark:bg-[#0b0b0b] py-10 lg:py-20">
       <div className="w-full max-w-7xl p-3 xl:p-0 mx-auto">
-        <h3 className="text-2xl 2xl:text-[32px] font-rokh font-bold dark:text-white mb-10  w-max  border border-x-0 border-b-4 pe-7 border-t-0 pb-3 border-light-primary dark:border-dark-yellow border-solid">
+        <h3 className="text-2xl 2xl:text-[32px] font-rokh font-bold dark:text-white mb-10 w-max border border-x-0 border-b-4 pe-7 border-t-0 pb-3 border-light-primary dark:border-dark-yellow border-solid">
           {findByUniqueId(mainData, 1618) || "اکنون تماشا کنید"}
         </h3>
 
         <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-5">
           <div>
             {active && (
-              <div className="bg-light-primary/60 dark:bg-dark-yellow/70  flex">
+              <div className="bg-light-primary/60 dark:bg-dark-yellow/70 flex">
                 <Link href={`/${params.lang}/news/categories/${active.categorySlug}/${active.slug}`}>
                   <h2 className="text-white text-lg font-bold dark:text-[#1A1A18] p-4">
                     {active.title}
                   </h2>
-
                 </Link>
                 <div className="dark:bg-dark-yellow bg-light-primary">
-                  <button onClick={() => setHasPlayed(true)} aria-label="paly btn" className="bg-transparent  !py-3 p-6 w-max h-max text-center flex items-center justify-center aspect-square  hover:scale-110 transition">
+                  <button onClick={() => setHasPlayed(true)} aria-label="paly btn" className="bg-transparent !py-3 p-6 w-max h-max text-center flex items-center justify-center aspect-square hover:scale-110 transition">
                     <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <rect width="86.7799" height="86.7799" rx="43.39" fill="#1A1A18" fill-opacity="0.2" />
+                      <rect width="86.7799" height="86.7799" rx="43.39" fill="#1A1A18" fillOpacity="0.2" />
                       <path d="M62 37.3038C66 39.6132 66 45.3868 62 47.6962L37.25 61.9856C33.25 64.295 28.25 61.4082 28.25 56.7894L28.25 28.2106C28.25 23.5918 33.25 20.705 37.25 23.0144L62 37.3038Z" fill="white" />
                     </svg>
                   </button>
@@ -98,33 +134,32 @@ export default function VideoNewsInlinePlayer({
             )}
             {/* SIDE LIST */}
             <div className="space-y-3 max-h-[385px] light-scrollbar dark:dark-scrollbar overflow-y-auto pe-1">
-
               {videos.map((item) => {
-                const isActive = item.id === active.id;
+                const isActive = item.id === active?.id;
 
                 return (
-                  <div onClick={() => {
-                    setActive(item);
-                    setHasPlayed(false); // 👈 خیلی مهم
-                  }}
+                  <div 
+                    onClick={() => {
+                      setActive(item);
+                      setHasPlayed(false);
+                    }}
                     key={item.id}
-                    className={`flex gap-3 p-2  transition
-                ${isActive ? "bg-light-primary/10 dark:bg-yellow-400/10" : "hover:bg-white/5"}`}
+                    className={`flex gap-3 p-2 transition
+                      ${isActive ? "bg-light-primary/10 dark:bg-yellow-400/10" : "hover:bg-white/5"}`}
                   >
-
                     {item.image && (
                       <div className="relative w-1/3 aspect-video">
                         <Image
-                          src={item.image }
+                          src={item.image}
                           alt={"video side " + item.title}
                           fill
                           sizes="(max-width: 768px) 33vw, 20vw"
                           loading="lazy"
                           quality={60}
                           className="object-cover rounded-lg"
+                          unoptimized={true}
                         />
                       </div>
-
                     )}
                     {/* TITLE */}
                     <div className="flex flex-col justify-between w-2/3 text-right py-1 ps-1">
@@ -139,27 +174,21 @@ export default function VideoNewsInlinePlayer({
                           {item.title}
                         </p>
                       )}
-                      <div className="text-sm dark:text-[#969696] flex flex-wrap items-center gap-3 justify-center lg:justify-start ">
+                      <div className="text-sm dark:text-[#969696] flex flex-wrap items-center gap-3 justify-center lg:justify-start">
                         {item.date && (
-                          <div className="flex items-center  gap-2">
+                          <div className="flex items-center gap-2">
                             <time>
-                              {new Date(item.date).toLocaleDateString("fa-IR", {
-                                month: "short",
-                                day: "numeric",
-                              })}
+                              {item.date.split(/[/.]/).slice(0, 2).join("/")}
                             </time>
                             <Calender className="stroke-dark-gray !stroke-[0px] size-5" />
                           </div>
                         )}
-
                         {item.readingTime && (
                           <div className="flex items-center gap-2">
                             <span>{item.readingTime} دقیقه</span>
                             <Timer className="stroke-dark-gray size-5" />
                           </div>
                         )}
-
-
                       </div>
                     </div>
                   </div>
@@ -168,7 +197,7 @@ export default function VideoNewsInlinePlayer({
             </div>
           </div>
           {/* MAIN VIDEO */}
-          <div className="relative aspect-video bg-black  overflow-hidden">
+          <div className="relative aspect-video bg-black overflow-hidden">
             {/* THUMBNAIL (قبل از play) */}
             {!hasPlayed && active.image && (
               <Image
@@ -179,7 +208,7 @@ export default function VideoNewsInlinePlayer({
                 loading="lazy"
                 sizes="(max-width: 768px) 90vw, 40vw"
                 quality={50}
-
+                unoptimized={true}
               />
             )}
 
@@ -204,21 +233,17 @@ export default function VideoNewsInlinePlayer({
                 className="absolute inset-0 z-10 flex items-center justify-center bg-transparent"
                 aria-label="play video"
               >
-                <div className=" rounded-full  text-center flex items-center justify-center aspect-square  hover:scale-110 transition">
+                <div className="rounded-full text-center flex items-center justify-center aspect-square hover:scale-110 transition">
                   <svg width="87" height="87" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <rect width="86.7799" height="86.7799" rx="43.39" fill="#1A1A18" fill-opacity="0.2" />
+                    <rect width="86.7799" height="86.7799" rx="43.39" fill="#1A1A18" fillOpacity="0.2" />
                     <path d="M62 37.3038C66 39.6132 66 45.3868 62 47.6962L37.25 61.9856C33.25 64.295 28.25 61.4082 28.25 56.7894L28.25 28.2106C28.25 23.5918 33.25 20.705 37.25 23.0144L62 37.3038Z" fill="white" />
                   </svg>
                 </div>
               </button>
             )}
-
-            {/* TITLE OVER VIDEO (فقط وقتی پلی شده) */}
-
           </div>
-
         </div>
       </div>
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/[lang]/news/page.tsx b/src/app/[lang]/news/page.tsx
index 917376b3..8ad96767 100644
--- a/src/app/[lang]/news/page.tsx
+++ b/src/app/[lang]/news/page.tsx
@@ -12,6 +12,9 @@ import { supabase } from "@/utils/lib/supabaseClient";
 import { getTranslation, getMainFile } from "@/components/utils/actions";
 import { findByUniqueId } from "@/components/utils/findByUniqueId";
 
+// ایمپورت دیتای استاتیک به عنوان fallback
+import fallbackNewsData from "@/components/utils/news.json";
+
 // ─── Types (اگر در فایل جداگانه نیست، اینجا تعریف کن) ───
 type NewsItem = {
   id: number;
@@ -29,18 +32,91 @@ type Category = {
   title: string;
   slug: string;
 };
+
 interface NewsPageProps {
   params: Promise<{ lang: string }>;
 }
+
 const baseUrl = "https://metarang.com";
 const imageUrl = "https://metarang.com/_next/image?url=%2Flogo.png&w=128&q=75";
 
+// ─── تابع کمکی برای نرمالایز کردن دیتای دریافتی ───
+function normalizeNewsItem(item: any): NewsItem {
+  return {
+    id: item.id,
+    title: item.title,
+    slug: item.slug,
+    image: item.image || null,
+    date: item.date || null,
+    readingTime: item.readingTime || null,
+    stats: item.stats || null,
+    category: item.category || null,
+    categorySlug: item.categorySlug || null,
+  };
+}
+
+// ─── تابع دریافت دیتا با fallback به news.json ───
+async function fetchNewsWithFallback() {
+  try {
+    // تلاش برای دریافت از Supabase
+    const { data: supabaseNews, error } = await supabase
+      .from("news")
+      .select("id, title, slug, image, date, readingTime, stats, category, categorySlug")
+      .order("date", { ascending: false })
+      .limit(40);
+
+    // اگر خطایی رخ داد یا دیتایی نیامد، از fallback استفاده کن
+    if (error || !supabaseNews || supabaseNews.length === 0) {
+      if (error) {
+        console.warn("⚠️ Supabase error, using fallback news.json:", error.message);
+      } else if (!supabaseNews || supabaseNews.length === 0) {
+        console.warn("⚠️ No data from Supabase, using fallback news.json");
+      }
+      
+      // تبدیل دیتای news.json به فرمت مناسب با نرمالایز کردن
+      const fallbackData = fallbackNewsData.map((item: any) => normalizeNewsItem({
+        id: item.id,
+        title: item.title,
+        slug: item.slug,
+        image: item.image,
+        date: item.date,
+        readingTime: item.readingTime,
+        stats: item.stats,
+        category: item.category,
+        categorySlug: item.categorySlug,
+      }));
+      
+      return { data: fallbackData, fromFallback: true };
+    }
+
+    // نرمالایز کردن دیتای دریافتی از Supabase
+    const normalizedData = supabaseNews.map((item: any) => normalizeNewsItem(item));
+    
+    return { data: normalizedData, fromFallback: false };
+  } catch (err) {
+    // در صورت بروز هرگونه خطای غیرمنتظره، از fallback استفاده کن
+    console.error("❌ Unexpected error fetching news, using fallback:", err);
+    const fallbackData = fallbackNewsData.map((item: any) => normalizeNewsItem({
+      id: item.id,
+      title: item.title,
+      slug: item.slug,
+      image: item.image,
+      date: item.date,
+      readingTime: item.readingTime,
+      stats: item.stats,
+      category: item.category,
+      categorySlug: item.categorySlug,
+    }));
+    
+    return { data: fallbackData, fromFallback: true };
+  }
+}
+
 // Metadata ...
 export async function generateMetadata({ params }: NewsPageProps) {
   const resolvedParams = await params;
   const { lang } = resolvedParams;
   try {
-    const lang = resolvedParams.lang || "fa";
     const url = `${baseUrl}/${lang}/news`;
 
     return {
@@ -48,7 +124,7 @@ export async function generateMetadata({ params }: NewsPageProps) {
       description:
         lang === "fa"
           ? "آخرین اخبار و بروزرسانی‌های متاورس رنگ را در این صفحه دنبال کنید."
-          : "Follow the latest news and updates of Metarang — Iran’s first national metaverse.",
+          : "Follow the latest news and updates of Metarang — Iran's first national metaverse.",
       openGraph: {
         title:
           lang === "fa"
@@ -57,7 +133,7 @@ export async function generateMetadata({ params }: NewsPageProps) {
         description:
           lang === "fa"
             ? "آخرین اخبار و بروزرسانی‌های متاورس رنگ را در این صفحه دنبال کنید."
-            : "Follow the latest news and updates of Metarang — Iran’s first national metaverse.",
+            : "Follow the latest news and updates of Metarang — Iran's first national metaverse.",
         url,
         siteName: "Metaverse Rang",
         locale: lang === "fa" ? "fa_IR" : "en_US",
@@ -101,19 +177,70 @@ export default async function NewsPage({ params }: NewsPageProps) {
     const mainData = await getMainFile(langData);
     const newsUrl = `${baseUrl}/${lang}/news`;
 
-    // ─── گرفتن اخبار بیشتر برای پشتیبانی از دسته‌بندی‌ها ───
-    const { data: allNews, error } = await supabase
-      .from("news")
-      .select("id, title, slug, image, date, readingTime, stats, category, categorySlug")
-      .order("date", { ascending: false })
-      .limit(40); // ← حداقل ۳۰–۵۰ تا بگیری بهتره
+    // ─── دریافت اخبار با قابلیت fallback ───
+    const { data: allNews, fromFallback } = await fetchNewsWithFallback();
 
-    // if (error) throw new Error(`Supabase error: ${error.message}`);
+    // اگر در حین دریافت fallback هم دیتایی نیامد (فایل JSON خالی یا نامعتبر)
+    if (!allNews || allNews.length === 0) {
+      console.error("❌ No news data available from both Supabase and fallback");
+      // می‌توانید یک آرایه خالی برگردانید یا صفحه خطای سفارشی نشان دهید
+      const emptyNews: NewsItem[] = [];
+      
+      const jsonLd = {
+        "@context": "https://schema.org",
+        "@graph": [
+          {
+            "@type": "BreadcrumbList",
+            "itemListElement": [
+              { "@type": "ListItem", "position": 1, "name": "صفحه اصلی", "item": `${baseUrl}/${lang}` },
+              { "@type": "ListItem", "position": 2, "name": "اخبار", "item": newsUrl },
+            ],
+          },
+          {
+            "@type": "Organization",
+            "@id": `${baseUrl}#organization`,
+            "name": "MetaRang",
+            "url": baseUrl,
+            "logo": { "@type": "ImageObject", "url": imageUrl },
+          },
+          {
+            "@type": "WebSite",
+            "@id": `${baseUrl}#website`,
+            "url": baseUrl,
+            "name": "MetaRang",
+            "publisher": { "@id": `${baseUrl}#organization` },
+            "inLanguage": lang === "fa" ? "fa-IR" : "en-US",
+          },
+          {
+            "@type": "CollectionPage",
+            "@id": `${newsUrl}#webpage`,
+            "url": newsUrl,
+            "name": lang === "fa" ? "اخبار متاورس رنگ" : "Metarang News",
+            "description": lang === "fa" ? "آخرین اخبار و رویدادهای متاورس رنگ" : "Latest news and updates from Metarang Metaverse",
+            "isPartOf": { "@id": `${baseUrl}#website` },
+            "about": { "@type": "Thing", "name": "News" },
+            "inLanguage": lang === "fa" ? "fa-IR" : "en-US",
+          },
+        ],
+      };
+
+      return (
+        <section className="w-full relative lg:pt-0 bg-[#f8f8f8] dark:bg-black" dir={langData.direction}>
+          <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+          <div className="px-5 2xl:px-10 mt-[60px] lg:mt-0">
+            <BreadCrumb params={params} />
+          </div>
+          <div className="text-center py-20">
+            <p className="text-xl dark:text-white">هیچ خبری یافت نشد</p>
+          </div>
+        </section>
+      );
+    }
 
     // ─── ساخت دسته‌های یکتا ───
     const uniqueMap = new Map<string, Category>();
 
-    allNews?.forEach((news: NewsItem) => {
+    allNews.forEach((news: NewsItem) => {
       if (news.category && news.categorySlug) {
         if (!uniqueMap.has(news.categorySlug)) {
           uniqueMap.set(news.categorySlug, {
@@ -132,7 +259,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
     // ─── گروه‌بندی اخبار بر اساس categorySlug ───
     const newsByCategory: Record<string, NewsItem[]> = { all: allNews || [] };
 
-    allNews?.forEach((news) => {
+    allNews.forEach((news) => {
       if (news.categorySlug) {
         if (!newsByCategory[news.categorySlug]) {
           newsByCategory[news.categorySlug] = [];
@@ -212,6 +339,11 @@ export default async function NewsPage({ params }: NewsPageProps) {
       ],
     };
 
+    // در صورت استفاده از fallback، می‌توانید یک warning در کنسول نشان دهید (اختیاری)
+    if (fromFallback) {
+      console.log("ℹ️ News data is currently being served from fallback JSON file");
+    }
+
     return (
       <section
         className="w-full relative lg:pt-0 bg-[#f8f8f8] dark:bg-black"
@@ -230,7 +362,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
         {/* ===== Search + Categories ===== */}
         <div className="mb-10 mt-[-50px] lg:mt-5 space-y-7 ps-5">
           <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center w-full px-5 lg:pe-4">
-            <h1 className="font-rokh text-center md:text-start font-bold w-full lg:w-1/2  text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px]  dark:text-white mt-[64px] mb-[16px]">
+            <h1 className="font-rokh text-center md:text-start font-bold w-full lg:w-1/2 text-[24px] sm:text-[26px] md:text-[28px] lg:text-[30px] xl:text-[32px] dark:text-white mt-[64px] mb-[16px]">
               {findByUniqueId(mainData, 255)}
             </h1>
             <p className="lg:hidden text-lightGray dark:text-lightGray font-azarMehr text-center lg:text-start text-[16px] sm:text-[18px] md:text-[20px] lg:text-[22px] xl:text-[24px] px-5 2xl:pe-28">
@@ -240,7 +372,6 @@ export default async function NewsPage({ params }: NewsPageProps) {
               searchLevel="news"
               mainData={mainData}
               params={params}
-
             />
           </div>
           <p className="text-lightGray hidden lg:block dark:text-lightGray font-azarMehr text-center lg:text-start text-[16px] sm:text-[18px] md:text-[20px] lg:text-[22px] xl:text-[24px] px-5 2xl:pe-28">
@@ -264,7 +395,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
             mainData={mainData}
           />
 
-          {/* بخش دسته‌بندی – حالا درست پاس داده می‌شود */}
+          {/* بخش دسته‌بندی */}
           <NewsCategoriesSection
             lang={resolvedParams.lang}
             mainData={mainData}
@@ -281,65 +412,65 @@ export default async function NewsPage({ params }: NewsPageProps) {
           {/* خبرنامه */}
           <div className="w-full px-5 flex flex-col items-center">
             <svg xmlns="http://www.w3.org/2000/svg" width="364" height="364" viewBox="0 0 364 364" fill="none" className="mb-[-140px] dark:hidden">
-              <path d="M333.666 174.419V235.086C333.666 288.169 303.333 310.919 257.833 310.919H106.166C60.6663 310.919 30.333 288.169 30.333 235.086V128.919C30.333 75.8359 60.6663 53.0859 106.166 53.0859H182" stroke="url(#paint0_linear_4633_15252)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M106.167 136.5L166.834 174.417C182.728 186.394 211.606 171.228 227.5 159.25" stroke="url(#paint1_linear_4633_15252)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M280.097 47.0625C264.099 47.0625 251.097 60.0642 251.097 76.0625V90.0308C251.097 92.9792 249.84 97.4742 248.342 99.9875L242.784 109.219C239.352 114.923 241.72 121.254 248.004 123.381C268.835 130.341 291.31 130.341 312.142 123.381C317.99 121.448 320.552 114.536 317.362 109.219L311.804 99.9875C310.354 97.4742 309.097 92.9792 309.097 90.0308V76.0625C309.097 60.1125 296.047 47.0625 280.097 47.0625Z" stroke="url(#paint2_linear_4633_15252)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" />
-              <path d="M289.039 48.465C287.54 48.03 285.994 47.6917 284.399 47.4983C279.759 46.9183 275.312 47.2567 271.155 48.465C272.557 44.8883 276.037 42.375 280.097 42.375C284.157 42.375 287.637 44.8883 289.039 48.465Z" stroke="url(#paint3_linear_4633_15252)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M294.597 125.125C294.597 133.1 288.072 139.625 280.097 139.625C276.133 139.625 272.46 137.982 269.85 135.372C267.24 132.762 265.597 129.088 265.597 125.125" stroke="url(#paint4_linear_4633_15252)" stroke-width="6" stroke-miterlimit="10" />
+              <path d="M333.666 174.419V235.086C333.666 288.169 303.333 310.919 257.833 310.919H106.166C60.6663 310.919 30.333 288.169 30.333 235.086V128.919C30.333 75.8359 60.6663 53.0859 106.166 53.0859H182" stroke="url(#paint0_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M106.167 136.5L166.834 174.417C182.728 186.394 211.606 171.228 227.5 159.25" stroke="url(#paint1_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M280.097 47.0625C264.099 47.0625 251.097 60.0642 251.097 76.0625V90.0308C251.097 92.9792 249.84 97.4742 248.342 99.9875L242.784 109.219C239.352 114.923 241.72 121.254 248.004 123.381C268.835 130.341 291.31 130.341 312.142 123.381C317.99 121.448 320.552 114.536 317.362 109.219L311.804 99.9875C310.354 97.4742 309.097 92.9792 309.097 90.0308V76.0625C309.097 60.1125 296.047 47.0625 280.097 47.0625Z" stroke="url(#paint2_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" />
+              <path d="M289.039 48.465C287.54 48.03 285.994 47.6917 284.399 47.4983C279.759 46.9183 275.312 47.2567 271.155 48.465C272.557 44.8883 276.037 42.375 280.097 42.375C284.157 42.375 287.637 44.8883 289.039 48.465Z" stroke="url(#paint3_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M294.597 125.125C294.597 133.1 288.072 139.625 280.097 139.625C276.133 139.625 272.46 137.982 269.85 135.372C267.24 132.762 265.597 129.088 265.597 125.125" stroke="url(#paint4_linear_4633_15252)" strokeWidth="6" strokeMiterlimit="10" />
               <defs>
                 <linearGradient id="paint0_linear_4633_15252" x1="182" y1="53.0859" x2="182" y2="310.919" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#00398E" />
-                  <stop offset="1" stop-color="#0066FF" />
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
                 </linearGradient>
                 <linearGradient id="paint1_linear_4633_15252" x1="166.834" y1="136.5" x2="166.834" y2="178.788" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#00398E" />
-                  <stop offset="1" stop-color="#0066FF" />
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
                 </linearGradient>
                 <linearGradient id="paint2_linear_4633_15252" x1="279.977" y1="47.0625" x2="279.977" y2="128.601" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#00398E" />
-                  <stop offset="1" stop-color="#0066FF" />
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
                 </linearGradient>
                 <linearGradient id="paint3_linear_4633_15252" x1="280.097" y1="42.375" x2="280.097" y2="48.465" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#00398E" />
-                  <stop offset="1" stop-color="#0066FF" />
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
                 </linearGradient>
                 <linearGradient id="paint4_linear_4633_15252" x1="280.097" y1="125.125" x2="280.097" y2="139.625" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#00398E" />
-                  <stop offset="1" stop-color="#0066FF" />
+                  <stop stopColor="#00398E" />
+                  <stop offset="1" stopColor="#0066FF" />
                 </linearGradient>
               </defs>
             </svg>
             <svg xmlns="http://www.w3.org/2000/svg" width="364" height="364" viewBox="0 0 364 364" fill="none" className="mb-[-140px] hidden dark:block">
-              <path d="M333.667 174.419V235.086C333.667 288.169 303.334 310.919 257.834 310.919H106.167C60.6673 310.919 30.334 288.169 30.334 235.086V128.919C30.334 75.8359 60.6673 53.0859 106.167 53.0859H182.001" stroke="url(#paint0_linear_4633_15270)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M106.166 136.5L166.833 174.417C182.727 186.394 211.605 171.228 227.499 159.25" stroke="url(#paint1_linear_4633_15270)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M280.096 47.0625C264.098 47.0625 251.096 60.0642 251.096 76.0625V90.0308C251.096 92.9792 249.839 97.4742 248.341 99.9875L242.783 109.219C239.351 114.923 241.719 121.254 248.003 123.381C268.834 130.341 291.309 130.341 312.141 123.381C317.989 121.448 320.551 114.536 317.361 109.219L311.803 99.9875C310.353 97.4742 309.096 92.9792 309.096 90.0308V76.0625C309.096 60.1125 296.046 47.0625 280.096 47.0625Z" stroke="url(#paint2_linear_4633_15270)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" />
-              <path d="M289.038 48.465C287.539 48.03 285.993 47.6917 284.398 47.4983C279.758 46.9183 275.311 47.2567 271.154 48.465C272.556 44.8883 276.036 42.375 280.096 42.375C284.156 42.375 287.636 44.8883 289.038 48.465Z" stroke="url(#paint3_linear_4633_15270)" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-              <path d="M294.596 125.125C294.596 133.1 288.071 139.625 280.096 139.625C276.132 139.625 272.459 137.982 269.849 135.372C267.239 132.762 265.596 129.088 265.596 125.125" stroke="url(#paint4_linear_4633_15270)" stroke-width="6" stroke-miterlimit="10" />
+              <path d="M333.667 174.419V235.086C333.667 288.169 303.334 310.919 257.834 310.919H106.167C60.6673 310.919 30.334 288.169 30.334 235.086V128.919C30.334 75.8359 60.6673 53.0859 106.167 53.0859H182.001" stroke="url(#paint0_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M106.166 136.5L166.833 174.417C182.727 186.394 211.605 171.228 227.499 159.25" stroke="url(#paint1_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M280.096 47.0625C264.098 47.0625 251.096 60.0642 251.096 76.0625V90.0308C251.096 92.9792 249.839 97.4742 248.341 99.9875L242.783 109.219C239.351 114.923 241.719 121.254 248.003 123.381C268.834 130.341 291.309 130.341 312.141 123.381C317.989 121.448 320.551 114.536 317.361 109.219L311.803 99.9875C310.353 97.4742 309.096 92.9792 309.096 90.0308V76.0625C309.096 60.1125 296.046 47.0625 280.096 47.0625Z" stroke="url(#paint2_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" />
+              <path d="M289.038 48.465C287.539 48.03 285.993 47.6917 284.398 47.4983C279.758 46.9183 275.311 47.2567 271.154 48.465C272.556 44.8883 276.036 42.375 280.096 42.375C284.156 42.375 287.636 44.8883 289.038 48.465Z" stroke="url(#paint3_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M294.596 125.125C294.596 133.1 288.071 139.625 280.096 139.625C276.132 139.625 272.459 137.982 269.849 135.372C267.239 132.762 265.596 129.088 265.596 125.125" stroke="url(#paint4_linear_4633_15270)" strokeWidth="6" strokeMiterlimit="10" />
               <defs>
                 <linearGradient id="paint0_linear_4633_15270" x1="182.001" y1="53.0859" x2="182.001" y2="310.919" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#997700" />
-                  <stop offset="1" stop-color="#FFC700" />
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
                 </linearGradient>
                 <linearGradient id="paint1_linear_4633_15270" x1="166.833" y1="136.5" x2="166.833" y2="178.788" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#997700" />
-                  <stop offset="1" stop-color="#FFC700" />
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
                 </linearGradient>
                 <linearGradient id="paint2_linear_4633_15270" x1="279.976" y1="47.0625" x2="279.976" y2="128.601" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#997700" />
-                  <stop offset="1" stop-color="#FFC700" />
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
                 </linearGradient>
                 <linearGradient id="paint3_linear_4633_15270" x1="280.096" y1="42.375" x2="280.096" y2="48.465" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#997700" />
-                  <stop offset="1" stop-color="#FFC700" />
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
                 </linearGradient>
                 <linearGradient id="paint4_linear_4633_15270" x1="280.096" y1="125.125" x2="280.096" y2="139.625" gradientUnits="userSpaceOnUse">
-                  <stop stop-color="#997700" />
-                  <stop offset="1" stop-color="#FFC700" />
+                  <stop stopColor="#997700" />
+                  <stop offset="1" stopColor="#FFC700" />
                 </linearGradient>
               </defs>
             </svg>
-            <div className=" bg-white dark:bg-[#0E0E0E] w-full max-w-7xl rounded-xl py-10 2xl:py-12 px-5 2xl:px-10 text-center flex flex-col items-center gap-4 mx-auto">
-              <p className="text-2xl dark:text-white 2xl:text-[32px] font-rokh dark:text-wrap font-bold"> {findByUniqueId(mainData, 1626) || "خبرنامه متاورس"}</p>
+            <div className="bg-white dark:bg-[#0E0E0E] w-full max-w-7xl rounded-xl py-10 2xl:py-12 px-5 2xl:px-10 text-center flex flex-col items-center gap-4 mx-auto">
+              <p className="text-2xl dark:text-white 2xl:text-[32px] font-rokh dark:text-wrap font-bold">{findByUniqueId(mainData, 1626) || "خبرنامه متاورس"}</p>
               <p className="lg:text-lg dark:text-[#868B90] text-[#656565]">{findByUniqueId(mainData, 1627) || "برای اطلاع از آخرین اخبار، تحلیل ها و مطالب اختصاصی، می توانید در خبرنامه ما عضو شوید.هدف ما ارائه محتوای دقیق، معتبر و به روز است تا همواره از مهم ترین تحولات باخبر باشید. در صورت تمایل، کافی است آدرس ایمیل خود را وارد کنید تا از این پس، به روزترین محتواها و اطلاع رسانی های رسمی را بدون نیاز به مراجعه مداوم به وب سایت، دریافت کنید."}</p>
               <div className="w-full flex flex-col gap-2 gap-y-5 lg:flex-row max-w-3xl">
                 <input type="text" name="" id="" placeholder={findByUniqueId(mainData, 1626) || "آدرس ایمیل"} className="bg-[#F5F5F5] w-full lg:w-[75%] dark:bg-black rounded-xl border-0 ring-1 ring-[#D9D9D9] dark:ring-[#434343] px-4 py-2 focus:outline-none focus:ring-2 focus:ring-light-primary focus:dark:ring-dark-yellow focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-darkGray" />
diff --git a/src/components/utils/news.json b/src/components/utils/news.json
new file mode 100644
index 00000000..07a9a710
--- /dev/null
+++ b/src/components/utils/news.json
@@ -0,0 +1,122 @@
+[
+    {
+        "id": 14,
+        "date": "1404.09.05",
+        "title": "تحلیل جامع ابزار رنگ زرد در پروژه متارنگ: رویکردی روانشناختی به املاک مسکونی مجازی",
+        "slug": "news_10001",
+        "readingTime": "21",
+        "image": "/zard.png",
+        "description": "<p>«ابزار رنگ زرد» در پروژه متاورس رنگ (متارنگ)، کلید تملک املاک مسکونی در این پلتفرم بومی ایران است. این ابزار نه تنها یک وسیله خرید، بلکه یک استراتژی «منطقه‌بندی دیجیتال» است که کاربری فضا را بر اساس روانشناسی رنگ‌ها (زرد برای مسکونی، آبی برای آموزشی، قرمز برای تجاری) تعریف می‌کند.</p><p>متارنگ به عنوان یک متاورس ملی، بر دو مدل موازی (منطبق بر واقعیت فیزیکی) و مجازی (فضاهای مستقل) استوار است. مالکیت املاک مسکونی در این پلتفرم از طریق ابزار رنگ زرد و به صورت اسناد مالکیت مجازی (VODs) که بر بستر بلاکچین اختصاصی ثبت می‌شوند، تضمین شده است.نقش استراتژیک ابزار رنگ زرد، فراتر از معاملات، در فعال‌سازی قابلیت‌های اجتماعی کلیدی پلتفرم مانند تشکیل «سلسله خانوادگی» و یکپارچه‌سازی با اینترنت اشیاء (IoT) برای مدیریت هوشمند ملک است. هدف غایی متارنگ، ایجاد کانون‌های تجمع اجتماعی مبتنی بر آرامش و ساختن زیرساخت‌های لازم برای حاکمیت دیجیتال و اقتصاد مقاومتی است، هرچند چالش اساسی آن، آشتی دادن ساختار متمرکز ملی با ماهیت غیرمتمرکز وب ۳.۰ باقی می‌ماند.</p>",
+        "content": "<h3><strong>۱. مبانی مفهومی و چارچوب رنگ‌بندی در متارنگ</strong></h3><p>پروژه متارنگ از یک سیستم <strong>رنگ‌بندی سه‌گانه</strong> به‌عنوان استراتژی «منطقه‌بندی دیجیتال» (<strong>Digital Zoning</strong>) استفاده می‌کند. این رویکرد، کاربری املاک مجازی را بر اساس طبقه‌بندی ساده و مفاهیم روانشناختی تعریف می‌کند تا درک و دسترسی‌پذیری برای شهروندان دیجیتال افزایش یابد.</p><h4><strong>روانشناسی رنگ زرد و کاربری مسکونی</strong></h4><p>انتخاب <strong>رنگ زرد</strong> برای مناطق مسکونی دیجیتال، تصمیمی استراتژیک بر مبنای <strong>تئوری‌های روانشناسی</strong> است. این رنگ مفاهیمی چون <strong>گرما، اجتماع و خوش‌بینی</strong> را تداعی می‌کند، که برای ایجاد تجربه بهینه زندگی مجازی و تقویت حس <strong>تعلق</strong> در فضاهای سکونتی ضروری هستند.</p><h4><strong>ابزارهای رنگی تکمیل‌کننده</strong></h4><p>این سیستم منطقه‌بندی سه‌گانه، ساختار توسعه فضایی متارنگ را سازماندهی می‌کند:</p><ul><li><strong>ابزار رنگ زرد:</strong> <strong>مسکونی</strong> (کانون‌های خانوادگی و اجتماعی).</li><li><strong>ابزار رنگ قرمز:</strong> <strong>تجاری</strong> (قطب‌های اقتصادی پلتفرم).</li><li><strong>ابزار رنگ آبی:</strong> <strong>آموزشی</strong> (مراکز توسعه دانش و مهارت).</li></ul><h3><strong>۲. مشخصات و ویژگی‌های عملکردی ابزار رنگ زرد</strong></h3><p>ابزار رنگ زرد، ابزاری کلیدی برای ایجاد و توسعه واحدهای اجتماعی بنیادین در متاورس رنگ است.</p><h4><strong>کارکرد اصلی: تملک ملک مسکونی</strong></h4><p>کارکرد اصلی این ابزار، انحصاری بودن آن برای خرید املاک مسکونی است:</p><ol><li><strong>ابزار خرید:</strong> تنها وسیله انحصاری برای خرید <strong>اسناد مالکیت مجازی (VOD)</strong> با کاربری <strong>مسکونی</strong>.</li><li><strong>فرآیند خرید:</strong> شهروندان با استفاده از این ابزار، <strong>پلیگان‌های مشخص شده با رنگ زرد</strong> را در نقشه‌های «آبادی‌های آزاد شده» شناسایی و خریداری می‌نمایند.</li></ol><h4><strong>ویژگی‌های VOD مسکونی و توسعه اجتماعی</strong></h4><p>پس از تملک ملک مسکونی، مالک مجموعه‌ای از قابلیت‌ها را فعال می‌کند که به طور مستقیم به اهداف اجتماعی پلتفرم گره خورده‌اند:</p><ul><li><strong>تشکیل سلسله خانوادگی:</strong> قابلیت ایجاد واحدهای اجتماعی بنیادین، ثبت خانواده، و <strong>اتصال زنجیره شجره‌نامه‌ای</strong>.</li><li><strong>مستندسازی هویت:</strong> ایجاد <strong>تاریخچه زندگی مجازی</strong> و <strong>کلکسیون خاطرات</strong> شخصی.</li><li><strong>مزایای توسعه سلسله:</strong></li><li class=\"ql-indent-1\"><span style=\"color: black;\">افزایش </span><strong>پاداش</strong> از طریق دعوت اعضای خانواده.</li><li class=\"ql-indent-1\">افزایش حجم <strong>دیتای ذخیره‌سازی</strong>.</li><li class=\"ql-indent-1\">افزایش <strong>«واحد رضایت»</strong>.</li><li class=\"ql-indent-1\">دریافت <strong>ارز بومی PSC</strong> به‌عنوان هدیه با افزایش تعداد اعضا.</li></ul><h3><strong>۳. کاربرد پیشرفته: از ساختار اجتماعی تا مدیریت هوشمند</strong></h3><p>استفاده عملی از ابزار رنگ زرد، قابلیت‌های پیشرفته‌ای را فعال می‌کند که فراتر از خرید است و مدیریت ملک را با دنیای فیزیکی پیوند می‌زند.</p><h4><strong>۳.۱. ایجاد سلسله خانوادگی (سازوکار فنی-اجتماعی)</strong></h4><p>خرید VOD مسکونی، پیش‌نیاز اصلی برای تشکیل <strong>«سلسله خانوادگی»</strong> است. مالک می‌تواند از طریق پنل مدیریت، اعضای درجه یک خانواده را با وارد کردن شناسه شهروندی دعوت نماید و هسته اصلی جوامع مجازی خانواده‌محور را شکل دهد.</p><h4><strong>۳.۲. مدیریت هوشمند ملک (یکپارچه‌سازی IoT)</strong></h4><p>ساکنان می‌توانند با بهره‌گیری از تکنولوژی <strong>اینترنت اشیاء (IoT)</strong>، مدیریت هوشمند ملک خود را از راه دور انجام دهند.</p><ul><li><strong>کارکرد:</strong> کنترل سیستم‌های مختلف (مانند روشنایی، گرمایش، سرمایش و امنیت) از محیط سه‌بعدی ملک مجازی.</li><li><strong>همگرایی واقعیت:</strong> این قابلیت، ملک مجازی را به یک <strong>مرکز کنترل تعاملی</strong> برای دنیای فیزیکی تبدیل می‌کند:</li><li class=\"ql-indent-1\"><strong>متاورس موازی:</strong> VOD به‌عنوان <strong>همزاد دیجیتال</strong> یک خانه فیزیکی عمل می‌کند و مدیریت IoT آن، پلی میان دو قلمرو واقعی و مجازی برقرار می‌سازد.</li><li class=\"ql-indent-1\"><strong>متاورس مجازی:</strong> VOD آزادی خلاقانه کامل را فراهم می‌کند و از محدودیت‌های فیزیکی رهاست.</li></ul><h3><strong>۴. سناریوهای کاربردی: گردش کار عملی</strong></h3><p>سناریوهای زیر، کاربرد عملی و قابلیت‌های پیشرفته ابزار رنگ زرد را نشان می‌دهند:</p><h4><strong>سناریو ۱: تأسیس و توسعه یک سلسله خانوادگی</strong></h4><ol><li><strong>خرید ملک:</strong> شهروند با <strong>ابزار رنگ زرد</strong>، یک VOD مسکونی در «آبادی آزاد شده» خریداری می‌کند.</li><li><strong>تشکیل سلسله:</strong> ملک را به‌عنوان پایگاه اصلی سلسله ثبت می‌کند.</li><li><strong>دعوت اعضا:</strong> اعضای درجه یک خانواده (پدر، مادر، همسر، فرزندان) را با شناسه شهروندی دعوت می‌نماید و پاداش‌های مرتبط با رشد سلسله را دریافت می‌کند.</li><li><strong>مدیریت دسترسی:</strong> از قابلیت <strong>«محدود سازی فرزند»</strong> برای کنترل دسترسی‌های مالی فرزندان زیر ۱۸ سال استفاده می‌نماید.</li></ol><h4><strong>سناریو ۲: ساخت خانه سفارشی و مدیریت هوشمند</strong></h4><ol><li><strong>خرید زمین:</strong> شهروند با <strong>ابزار رنگ زرد</strong>، یک قطعه زمین مسکونی خریداری می‌کند.</li><li><strong>سفارشی‌سازی:</strong> با ثبت درخواست در تب «سفارشی سازی سازه»، یک مدل سه‌بعدی منحصر به فرد برای خانه مجازی خود سفارش می‌دهد.</li><li><strong>مدیریت هوشمند:</strong> پس از ساخت مدل، از طریق پنل مدیریت ملک و قابلیت‌های <strong>IoT</strong>، سیستم‌های روشنایی و گرمایش/سرمایش مجازی خانه را پیکربندی و از راه دور کنترل می‌کند.</li></ol><h3><strong>۵. نتیجه‌گیری: نقش استراتژیک ابزار رنگ زرد</strong></h3><h3 class=\"ql-direction-rtl\"><strong>«ابزار رنگ زرد»</strong> فراتر از یک ابزار خرید، <strong>ستون فقرات توسعه اجتماعی و خانوادگی</strong> در متارنگ است. این ابزار به عنوان تنها دروازه تملک املاک مسکونی، یک مطالعه موردی در <strong>«مکان‌سازی دیجیتال» (Digital Placemaking)</strong> است که با پیوند دادن مفاهیم روانشناختی رنگ به کاربری فضا، جوامع مجازی پایدار را بنا می‌نهد. مدل خانواده‌محور این ابزار، پرسش استراتژیک مهمی را مطرح می‌کند: چگونه این فضاهای خصوصی بر توسعه و پویایی <strong>فضاهای عمومی دیجیتال</strong> و مشارکت مدنی در آینده تأثیر خواهند گذاشت؟</h3>",
+        "category": "ابزار های متاورس رنگ",
+        "subCategory": "ابزار  رنگ زرد",
+        "categoryImage": "/abzar.png",
+        "categoryDec": "بخش ابزارهای متاورس رنگ، قلب سیستم اقتصادی و مالکیت مجازی در دنیای موازی متارنگ است. در این پلتفرم، رنگ‌ها صرفاً جنبه بصری ندارند، بلکه نشانگر اصلی نوع کاربری اسناد مالکیت مجازی (VOD) هستند و ساختاردهنده اصلی این دنیای مجازی محسوب می‌شوند. خرید املاک مجازی (VOD) مستلزم تهیه ابزار خاصی به نام \"ابزار رنگ\" است. ابزارهای اصلی موجود در این دسته عبارتند از: 1. ابزار رنگ زرد: این ابزار برای خرید املاک مسکونی (VODهای مسکونی) استفاده می‌شود. املاک با رنگ زرد از اهمیت زیادی برخوردارند، زیرا محلی برای نگهداری دیتا و اطلاعات شخصی، ایجاد سلسله خانوادگی و همچنین تأسیس اتحادها هستند. رنگ زرد از تئوری‌های روانشناسی بهره می‌برد تا افراد را به ایجاد بسترهای آرامش‌بخش و تجربه زندگی بهتر در دنیای موازی متاورس دعوت کند. 2. ابزار رنگ قرمز: این ابزار برای خرید املاک تجاری (VODهای تجاری) به کار می‌رود. رنگ قرمز نماینده انرژی، پویایی و اقدام است و برای تسهیل در خرید املاک تجاری و تجربه‌ی تجارت و کسب درآمد مجازی طراحی شده است. با استفاده از این ابزار، شهروندان می‌توانند به دفاتر کاری و فروشگاه‌های مجازی دسترسی یابند. 3. ابزار رنگ آبی: این ابزار برای خرید املاک آموزشی (VODهای آموزشی) مورد نیاز است. رنگ آبی نمادی از آرامش و استراحت است و این ابزار به افراد علاقه‌مند به ارتقاء دانش و مهارت‌ها فرصتی منحصر به فرد ارائه می‌دهد تا در فضاهای آموزشی و معاملاتی معتبر مشارکت کنند. نحوه خرید: برای خرید این ابزارها، شما باید به منوی متاورس رنگ مراجعه کرده، روی گزینه فروشگاه کلیک کنید و از میان دسته‌بندی‌های موجود (مانند بسته ۶۰۰ تایی، ۱۰۰ تایی، ۲۰۰۰ تایی و غیره) متناسب با نیاز خود ابزار رنگ مورد نظر را انتخاب و خریداری نمایید. توجه: هر رنگ در متاورس رنگ از یک ارزش‌گذاری خاصی برخوردار است و نمی‌توان یک رنگ را به عنوان بهترین رنگ شاخص در نظر گرفت، چرا که هر کدام متناسب با کاربری خود دارای اهمیت هستند. این ابزارها، در کنار ارزهایی مانند PSC و ریال، امکان انجام معاملات در متاورس رنگ را فراهم می‌آورند",
+        "author": "{\"bio\": \"\", \"name\": \"مرضیه ثاقب علیزاده\", \"field\": \"بازرس مجموعه متاورس رنگ\", \"avatar\": \"/nevisande.avif\", \"socials\": {\"email\": \"\", \"telegram\": \"\", \"whatsapp\": \"\"}, \"citizenId\": \"HM-2000003\"}",
+        "stats": "{\"likes\": 0, \"views\": 0, \"comments\": 0, \"dislikes\": 0}",
+        "tags": "[{\"slug\":\"\",\"label\":\"املاک\"}]",
+        "categorySlug": "rang",
+        "video": null
+    },
+    {
+        "id": 15,
+        "date": "1404.09.07",
+        "title": "ابزار رنگ آبی: رمزگشایی از معمای «متارنگ»، اولین متاورس ملی ایران",
+        "slug": "news_10002",
+        "readingTime": "12",
+        "image": "/abi.png",
+        "description": "<p>معمای <strong>«ابزار رنگ آبی»</strong> در ابتدا یک شیء فیزیکی (مانند یاقوت کبود) به نظر می‌رسد، اما پاسخ واقعی آن یک مفهوم استراتژیک در دنیای دیجیتال است. <strong>ابزار رنگ آبی</strong> در حقیقت یک <strong>ابزار دیجیتال کاربردی</strong> در پلتفرم <strong>«متاورس رنگ» (متارنگ)</strong> است که منحصراً برای <strong>خرید املاک با کاربری آموزشی</strong> استفاده می‌شود. این ابزار نماد جاه‌طلبی ملی ایران برای توسعه دانش، آموزش و ساخت <strong>بزرگ‌ترین پایگاه داده هوش مصنوعی ملی</strong> است.</p>",
+        "content": "<h3><strong>مقدمه: معمای «ابزار رنگ آبی»</strong></h3><p>سؤال <strong>«ابزار رنگ آبی چیست؟»</strong> به نظر می‌رسد یک معمای ساده با یک پاسخ فیزیکی باشد، اما در حقیقت، این پرسش سرآغاز مسیری است که ما را از گنجینه‌های مادی به یک پروژه دیجیتال استراتژیک و جاه‌طلبانه در ایران می‌رساند. این سفر، رمز یک چشم‌انداز بزرگ ملی را در دنیای مجازی آشکار می‌کند.</p><h3><strong>۱. سرنخ‌های فیزیکی: گنجینه‌های آبی در دنیای واقعی</strong></h3><p>جستجوی اولیه برای «ابزار رنگ آبی» ما را به سوی اشیاء فیزیکی باارزش هدایت می‌کند.</p><h4><strong>یاقوت کبود (Sapphire)</strong></h4><ul><li><strong>کاربرد:</strong> یاقوت کبود فراتر از یک سنگ قیمتی در جواهرات است. خواص فیزیکی منحصر به فرد آن باعث شده تا در صنایع پیشرفته الکترونیک، مانند تولید <strong>سلول‌های خورشیدی</strong> و <strong>مدارهای الکترونیکی</strong>، کاربرد صنعتی داشته باشد.</li><li><strong>نتیجه:</strong> هرچند یاقوت کبود یک گنجینه آبی ارزشمند است، اما پاسخ اصلی معما در حوزه فیزیک پنهان نشده است.</li></ul><h3><strong>۲. پاسخ واقعی: متاورس رنگ (متارنگ)؛ یک جاه‌طلبی ملی</strong></h3><p>پاسخ اصلی معما یک شیء فیزیکی نیست، بلکه یک ایده، یک چشم‌انداز و یک پروژه ملی بزرگ است: <strong>متاورس رنگ</strong> (متارنگ) – <strong>اولین متاورس ملی ایران</strong>.</p><p>متارنگ یک <strong>دنیای مجازی موازی</strong> برای ایران است که هدف آن ایجاد یک اکوسیستم کامل شامل:</p><ul><li><strong>نقشه ملی</strong></li><li><strong>فروشگاه ملی</strong></li><li><strong>بخش تبلیغات</strong></li></ul><p>این پروژه با هدف گنجایش <strong>تمام انسان‌های کره زمین</strong> به‌عنوان شهروند، خود را به عنوان یک رقیب ایدئولوژیک برای متاورس‌های جهانی مطرح می‌کند.</p><h3><strong>۳. سفر به دنیای رنگ: چگونه وارد متارنگ شویم؟</strong></h3><p>ورود به متاورس رنگ یک فرآیند ساده و مرحله‌بندی شده است که هویت دیجیتال شما را در این دنیای جدید شکل می‌دهد.</p><ol><li><strong>ساخت حساب کاربری:</strong> اولین گام برای ورود.</li><li><strong>تکمیل پروفایل:</strong> ساخت هویت دیجیتال با وارد کردن اطلاعات و مشخصات.</li><li><strong>طراحی آواتار:</strong> نماینده مجازی شما در دنیای رنگ. می‌توانید از <strong>آواتارهای پیش‌فرض</strong> استفاده کنید، از فروشگاه خریداری کنید یا یک آواتار کاملاً سفارشی طراحی نمایید و برای آن لباس و <strong>کارت شناسایی مجازی</strong> تهیه کنید.</li><li><strong>شروع کاوش:</strong> ورود به محیط‌های <strong>دو بعدی و سه بعدی</strong> و آغاز ماجراجویی.</li></ol><h3>۴<strong>. فراتر از سرگرمی: اهداف استراتژیک و ملی</strong></h3><p>اهداف متاورس رنگ صرفاً سرگرمی نیستند و کاملاً در راستای منافع ملی و استراتژیک تعریف شده‌اند:</p><ul><li><strong>حاکمیت دیجیتال:</strong> دستیابی به <strong>خودکفایی</strong> در تولید و کنترل داده‌های ملی برای تضمین استقلال در فضای مجازی.</li><li><strong>اقتصاد مقاوم در برابر تحریم:</strong> ایجاد یک اقتصاد دیجیتال پایدار و مستقل برای کاهش اثرات تحریم‌ها و <strong>جلوگیری از خروج ارز</strong>.</li><li><strong>ایجاد مرز دیجیتال:</strong> تثبیت حاکمیت ایران در فضای سایبری جهانی با تعریف یک قلمرو مجازی مستقل.</li><li><strong>بزرگ‌ترین پایگاه داده هوش مصنوعی:</strong> ایجاد بزرگ‌ترین بانک اطلاعاتی هوش مصنوعی کشور که زیربنای توسعه فناوری‌های آینده و <strong>استقلال تکنولوژیک</strong> خواهد بود.</li></ul><h3>۵<strong>. چالش بزرگ: سازگاری تمرکز ملی با آزادی وب ۳.۰</strong></h3><p>بزرگ‌ترین چالش این پروژه در هسته فلسفی آن نهفته است:</p><h4><strong>آشتی دادن دو جهان متضاد</strong></h4><p>چگونه می‌توان یک سیستم <strong>ملی و متمرکز</strong> را با ماهیت ذاتاً <strong>آزاد، جهانی و غیرمتمرکز</strong> وب ۳.۰ سازگار کرد؟</p><ul><li><strong>انتظار کاربران وب ۳.۰:</strong> مالکیت واقعی دارایی‌های دیجیتال، آزادی بیان و قابلیت همکاری بین پلتفرمی (که ریشه در <strong>تمرکززدایی</strong> دارند).</li><li><strong>نیاز یک پروژه ملی:</strong> کنترل، امنیت و همسویی با سیاست‌های کلان کشور (که ریشه در <strong>تمرکز</strong> دارند).</li></ul><p>موفقیت متارنگ به توانایی آن در حل این <strong>تنش بنیادین استراتژیک</strong> و برقراری یک تعادل پایدار بستگی خواهد داشت.</p><h3>۶<strong>. رمزگشایی نهایی: ابزار رنگ آبی دقیقاً چیست؟</strong></h3><p>«ابزار رنگ آبی» یک <strong>ابزار دیجیتال کاربردی</strong> در اقتصاد متارنگ است.</p><ul><li><strong>کارکرد:</strong> این ابزار منحصراً برای <strong>خرید املاک با کاربری آموزشی</strong> در متاورس رنگ استفاده می‌شود.</li><li><strong>استعاره استراتژیک:</strong> انتخاب این رنگ تصادفی نیست. ابزار رنگ آبی یک نماد قدرتمند برای جاه‌طلبی ایران در ساختن آینده دیجیتال خود بر پایه <strong>دانش و آموزش</strong> است و از تئوری‌های روانشناسی برای ترغیب افراد به ارتقاء دانش و مهارت استفاده می‌کند.</li></ul><p>این ابزار نه تنها یک مکانیسم اقتصادی، بلکه ابزاری استراتژیک برای تحقق اهداف کلان کشور در زمینه توسعه علوم و ساخت <strong>بزرگ‌ترین پایگاه داده هوش مصنوعی ملی</strong> محسوب می‌شود.</p>",
+        "category": "ابزار های متاورس رنگ",
+        "subCategory": "ابزار رنگ آبی",
+        "categoryImage": "/abzar.png",
+        "categoryDec": "بخش ابزارهای متاورس رنگ، قلب سیستم اقتصادی و مالکیت مجازی در دنیای موازی متارنگ است. در این پلتفرم، رنگ‌ها صرفاً جنبه بصری ندارند، بلکه نشانگر اصلی نوع کاربری اسناد مالکیت مجازی (VOD) هستند و ساختاردهنده اصلی این دنیای مجازی محسوب می‌شوند. خرید املاک مجازی (VOD) مستلزم تهیه ابزار خاصی به نام \"ابزار رنگ\" است. ابزارهای اصلی موجود در این دسته عبارتند از: 1. ابزار رنگ زرد: این ابزار برای خرید املاک مسکونی (VODهای مسکونی) استفاده می‌شود. املاک با رنگ زرد از اهمیت زیادی برخوردارند، زیرا محلی برای نگهداری دیتا و اطلاعات شخصی، ایجاد سلسله خانوادگی و همچنین تأسیس اتحادها هستند. رنگ زرد از تئوری‌های روانشناسی بهره می‌برد تا افراد را به ایجاد بسترهای آرامش‌بخش و تجربه زندگی بهتر در دنیای موازی متاورس دعوت کند. 2. ابزار رنگ قرمز: این ابزار برای خرید املاک تجاری (VODهای تجاری) به کار می‌رود. رنگ قرمز نماینده انرژی، پویایی و اقدام است و برای تسهیل در خرید املاک تجاری و تجربه‌ی تجارت و کسب درآمد مجازی طراحی شده است. با استفاده از این ابزار، شهروندان می‌توانند به دفاتر کاری و فروشگاه‌های مجازی دسترسی یابند. 3. ابزار رنگ آبی: این ابزار برای خرید املاک آموزشی (VODهای آموزشی) مورد نیاز است. رنگ آبی نمادی از آرامش و استراحت است و این ابزار به افراد علاقه‌مند به ارتقاء دانش و مهارت‌ها فرصتی منحصر به فرد ارائه می‌دهد تا در فضاهای آموزشی و معاملاتی معتبر مشارکت کنند. نحوه خرید: برای خرید این ابزارها، شما باید به منوی متاورس رنگ مراجعه کرده، روی گزینه فروشگاه کلیک کنید و از میان دسته‌بندی‌های موجود (مانند بسته ۶۰۰ تایی، ۱۰۰ تایی، ۲۰۰۰ تایی و غیره) متناسب با نیاز خود ابزار رنگ مورد نظر را انتخاب و خریداری نمایید. توجه: هر رنگ در متاورس رنگ از یک ارزش‌گذاری خاصی برخوردار است و نمی‌توان یک رنگ را به عنوان بهترین رنگ شاخص در نظر گرفت، چرا که هر کدام متناسب با کاربری خود دارای اهمیت هستند. این ابزارها، در کنار ارزهایی مانند PSC و ریال، امکان انجام معاملات در متاورس رنگ را فراهم می‌آورند",
+        "author": "{\"bio\": \"\", \"name\": \"مرضیه ثاقب علیزاده\", \"field\": \"بازرس مجموعه متاورس رنگ\", \"avatar\": \"/nevisande.avif\", \"socials\": {\"email\": \"\", \"telegram\": \"\", \"whatsapp\": \"\"}, \"citizenId\": \"hm-2000003\"}",
+        "stats": "{\"likes\": 0, \"views\": 0, \"comments\": 0, \"dislikes\": 0}",
+        "tags": "[{\"slug\":\"metaverse\",\"label\":\"متاورس\"},{\"slug\":\"tools\",\"label\":\"ابزار\"},{\"slug\":\"blue-color\",\"label\":\"رنگ آبی\"},{\"slug\":\"store\",\"label\":\"فروشگاه\"}]",
+        "categorySlug": "rang",
+        "video": null
+    },
+    {
+        "id": 18,
+        "date": "1404.10.10",
+        "title": "به سوی یک شهروند هوشمند: چگونه هوش مصنوعی آینده متاورس رنگ را شکل خواهد داد",
+        "slug": "news_10005",
+        "readingTime": "18",
+        "image": "https://rgb.irpsc.com/blogs/images/blogs/smart-citizen-and-the-future-of-metaverse.webp",
+        "description": "<p>رحی مفهومی که فراتر از یک ابزار ساده، به‌مثابه دستیاری متخصص و آگاه در بطن این دنیای موازی عمل می‌کند. این شهروند هوشمند با اتکا به دانش بومی استخراج‌شده از لایه‌های فنی و مستندات اختصاصی پلتفرم، نقشی کلیدی در شفاف‌سازی فرآیندهای حاکمیتی، هدایت شهردارها در رای‌گیری‌های پیچیده و تحلیل دقیق بازارهای اقتصادی از جمله مدیریت ارزهای داخلی بر عهده خواهد داشت. این سیستم نه تنها با بهره‌گیری از هوش مصنوعی مولد به تولید محتوا و طراحی آواتارهای سفارشی شتاب می‌بخشد، بلکه با پیوند خوردن به فناوری بلاک‌چین و پردازش در لحظه، مسیری را به سوی یک اکوسیستم خودآگاه و غیرقابل‌دستکاری می‌گشاید که در آن امنیت و حریم خصوصی شهروندان در اولویت قرار دارد.</p>",
+        "content": "<h3><strong>۱. مقدمه: تولد یک ذهن نو در دنیای موازی ما</strong></h3><p>دنیاهای مجازی دیگر فضاهایی ایستا و بی‌روح نیستند؛ آن‌ها در حال تکامل به اکوسیستم‌هایی زنده، پویا و هوشمند هستند که مرز میان واقعیت و دیجیتال را کمرنگ‌تر می‌کنند. در این مسیر تحول، <strong>متاورس رنگ (Metaverse Rang)</strong> همواره به دنبال نوآوری‌هایی است که تجربه شهروندان را غنی‌تر سازد.</p><p>امروز، ما نه یک محصول نهایی، بلکه یک <strong>چشم‌انداز استراتژیک</strong> را معرفی می‌کنیم: طرح مفهومی یک <strong>«شهروند هوشمند»</strong> که با تکیه بر هوش مصنوعی، آینده پلتفرم ما را متحول خواهد کرد. هدف این مقاله، بررسی نحوه ادغام این دستیار هوشمند در ساختار متارنگ به عنوان یک راهنمای آگاه است.</p><h3><strong>۲. «شهروند هوشمند» چیست؟ دستیار متخصص در قلب اکوسیستم</strong></h3><p>در طرح استراتژیک ما، <strong>«شهروند هوشمند»</strong> یک دستیار هوش مصنوعی متخصص است که دانش آن به طور انحصاری بر اساس منابع، داده‌ها و مستندات رسمی پروژه آموزش دیده است.</p><h4><strong>زیرساخت فنی و پایگاه دانش</strong></h4><p>این هوش مصنوعی به معماری فنی پلتفرم، از جمله پایگاه داده <strong>PostgreSQL</strong> و منطق تجاری مبتنی بر <strong>Node.js/NestJS</strong>، دسترسی خواهد داشت. این ویژگی تضمین می‌کند که:</p><ul><li><strong>دقت بالا:</strong> پاسخ‌ها کاملاً مرتبط و مطابق با قوانین جاری پروژه است.</li><li><strong>درک عمیق:</strong> دستیار درک کاملی از سازوکارهای درونی و فرصت‌های موجود در متارنگ دارد.</li><li><strong>امنیت:</strong> تمامی اطلاعات در چارچوب‌های امنیتی پلتفرم ارائه می‌شوند.</li></ul><blockquote><strong>یادداشت:</strong> این مقاله یک طرح اولیه و دعوت به گفتگو برای ساختن آینده‌ای هوشمندتر است، نه معرفی یک قابلیتِ فعال در لحظه کنونی.</blockquote><h3><strong>۳. خدمات دستیار هوشمند به جامعه متاورس رنگ</strong></h3><p>این شهروند هوشمند برای ساده‌سازی تجربه شما و پاسخ به نیازهایتان طراحی خواهد شد. خدمات اصلی آن عبارتند از:</p><ul><li><strong>راهنمایی حاکمیتی و اقتصادی:</strong> کمک به <strong>شهردارها</strong> برای درک پیچیدگی‌های الگوریتم تأیید عمومی املاک و تبیین شفاف فرمول‌های توزیع پاداش.</li><li><strong>تحلیل دارایی‌های دیجیتال:</strong> ارائه تحلیل‌های هوشمند به <strong>تاجران و بازرسان</strong>؛ مثلاً پیشنهاد بهترین زمان برای اجاره دادن واحد «رضایت» یا سرمایه‌گذاری روی ارزهای داخلی (<strong>رنگ قرمز، زرد و آبی</strong>).</li><li><strong>تسریع در تولید محتوا:</strong> کمک به خلق آواتارهای سفارشی، ایجاد بافت‌های (Textures) جدید برای سازه‌های <strong>Unity</strong> و تسهیل تولید VODهای آموزشی.</li><li><strong>شخصی‌سازی تجربه کاربری:</strong> فیلتر کردن هوشمند پیشنهادها بر اساس سطح و نقش هر شهروند برای بهینه‌سازی فرآیندهای رأی‌گیری و تعاملات روزمره.</li></ul><h3><strong>۴. تعامل با شهروند هوشمند: یکپارچگی در تجربه کاربری</strong></h3><p>چشم‌انداز ما این است که این دستیار در دل تجربه کاربری (UX) موجود تنیده شود، نه اینکه یک کانال ارتباطی مجزا باشد.</p><h4><strong>نحوه دسترسی و امنیت</strong></h4><ol><li><strong>پنل شهروندی:</strong> دسترسی مستقیم در بخش‌های مرتبط (مانند صفحه خرید ملک) برای دریافت «تحلیل هوشمند».</li><li><strong>ارتباط با سرویس‌ها:</strong> مدیریت درخواست‌ها از طریق زیرساخت میکروسرویس و پروتکل‌های امنیتی <strong>API Gateway</strong>.</li><li><strong>پاسخ‌های زمینه-محور:</strong> ارائه اطلاعات بر اساس فعالیت جاری کاربر؛ از راهنمای شروع برای تازه-واردها تا تحلیل‌های کلان برای قانون‌گذاران.</li></ol><h3><strong>۵. چشم‌انداز آینده: به سوی یک متاورس خودآگاه</strong></h3><p>ادغام «شهروند هوشمند»، متاورس رنگ را از یک پلتفرم اجتماعی-اقتصادی به یک <strong>اکوسیستم دانشی و خودآگاه</strong> تبدیل می‌کند.</p><ul><li><strong>تکنولوژی On-Device AI:</strong> انجام پردازش‌ها روی دستگاه کاربر برای کاهش تأخیر و حفظ کامل حریم خصوصی.</li><li><strong>حکمرانی شفاف با بلاک‌چین:</strong> ترکیب هوش مصنوعی و بلاک‌چین برای اجرای فرآیندهای رأی‌گیری و توزیع پاداش به شکلی <strong>خودکار و غیرقابل دستکاری</strong>.</li></ul><h3><strong>نتیجه‌گیری</strong></h3><p>متاورس رنگ با معرفی طرح «شهروند هوشمند»، قدم در راهی می‌گذارد که در آن تکنولوژی نه فقط یک ابزار، بلکه یک همکار برای شهروندان است. نظرات و ایده‌های شما سنگ بنای ساختن این آینده هوشمند خواهد بود.</p>",
+        "category": "حکمرانی دیجیتال و اقتصاد شهروندی",
+        "subCategory": "مدل حکمرانی توزیع شده",
+        "categoryImage": "https://rgb.irpsc.com/blogs/images/blogs/digital-governance-and-the-economy.webp",
+        "categoryDec": "بررسی سازوکارهای پنل تصمیمات عمومی و حق ممانعت (Veto Power) شهروندان سطح بالا در مدیریت قوانین و تخصیص منابع. این بخش به تعادل میان ساختار متمرکز و قدرت توزیع‌شده شهروندان می‌پردازد.",
+        "author": "{\"bio\": \"من یک دستیار هوشمند و مرجع تخصصی در حوزه پروژه متاورس رنگ (متارنگ) هستم که با هدف راهنمایی شهروندان و سرمایه‌گذاران در این دنیای موازی طراحی شده‌ام . مأموریت اصلی من، تبیین و تحلیل ساختارهای پیچیده این زیست‌بوم دیجیتال است که بر پایه اصالت ایرانی و فناوری‌های پیشرفته‌ای نظیر بلاک‌چین و هوش مصنوعی بنا شده است. تخصص‌های کلیدی من شامل موارد زیر است: • تشریح ساختار اقتصادی: تسلط کامل بر مدل چند ارزی پلتفرم، شامل ارز داخلی PSC (زنجیره تأمین بهشت) و ارز ریال، و نحوه تعاملات مالی میان دنیای فیزیکی و مجازی• تبیین نظام مالکیت مجازی: ارائه جزئیات دقیق درباره اسناد مالکیت مجازی (VOD) که بر بستر بلاک‌چین ثبت شده و مالکیت انحصاری دارایی‌هایی نظیر املاک، آواتارها و مدل‌های سه‌بعدی را تضمین می‌کنند • تحلیل سیستم حکمرانی: تسلط بر الگوریتم پیشرفته «حد تأثیر» (Had-e-Tasar) که مبنای نفوذ شهروندان در تصمیم‌گیری‌های عمومی و جابه‌جایی در سلسله‌مراتب حاکمیتی (از تازه‌وارد تا سطوح عالی قضاوت و قانون‌گذاری) است• راهنمای ابزارهای کاربردی: معرفی کاربری رنگ‌های شاخص در پلتفرم (زرد برای مسکونی، قرمز برای تجاری و آبی برای آموزشی) و نحوه استفاده از هدیه‌های همراه نظیر \\\"قطب‌نما\\\" و \\\"ژئونور\\\". من به عنوان یک نقشه زنده و آگاه، در کنار کاربران هستم تا مسیر تعامل، آموزش، تجارت و کارآفرینی در این پلتفرم بومی‌سازی شده را شفاف کرده و به آن‌ها در درک عمیق‌تر مفاهیم اقتصاد تعاملی و حاکمیت غیرمتمرکز یاری رسانم\", \"name\": \"notebooklm\", \"field\": \" به طور تخصصی بر مدیریت دانش شخصی و تحلیل دقیق منابع تمرکز دارد.\", \"avatar\": \"https://rgb.irpsc.com/blogs/images/blogs/notebooklm.webp\", \"socials\": {\"email\": \"\", \"telegram\": \"\", \"whatsapp\": \"\"}, \"citizenId\": \"HM-1999999\"}",
+        "stats": "{\"likes\": 0, \"views\": 0, \"comments\": 0, \"dislikes\": 0}",
+        "tags": "[{\"slug\":\"metaverse\",\"label\":\"متاورس\"},{\"slug\":\"citizen\",\"label\":\"شهروند\"},{\"slug\":\"digital\",\"label\":\"دیجیتال\"},{\"slug\":\"artificial-intelligence\",\"label\":\"هوش مصنوعی\"}]",
+        "categorySlug": "digital-governance-and-the-citizen-economy",
+        "video": "https://rgb.irpsc.com/news/videos/22.mp4"
+    },
+    {
+        "id": 19,
+        "date": "1404.10.16",
+        "title": "کنترل کامل محیط‌های خصوصی در متاورس رنگ: معرفی ویژگی پیشرفته Command-Line",
+        "slug": "news_10006",
+        "readingTime": "16",
+        "image": "https://rgb.irpsc.com/blogs/images/blogs/rule-the-metaverse.webp",
+        "description": "<p>در مسیر تکامل دنیاهای مجازی، عبور از رابط‌های گرافیکی ساده به سمت سیستم‌های برنامه‌پذیر، ضرورتی انکارناپذیر است. متاورس رنگ با معرفی رابط خط فرمان (CLI) در دل محیط‌های خصوصی، ابزاری فراتر از یک چت‌باکس ساده را در اختیار مالکان قرار داده است؛ ابزاری که کاربران را از نقشِ ناظر به معماران سیستم‌های اقتصادی و اجتماعی تبدیل می‌کند. این فناوری با فراهم کردن کنترل اتمی بر اشیاء، مدیریت دقیق جامعه و مانیتورینگ لحظه‌ای منابع، زیربنای یک اقتصاد خلاق-محور و حاکمیت غیرمتمرکز را بنا می‌نهد. نقطه اوج این معماری، قابلیت درون‌ریزی و برون‌بری داده‌ها با فرمت استاندارد JSON است که با ایجاد تعامل‌پذیری فنی، امکان توسعه آفلاین و مدیریت خودکار محیط را فراهم کرده و متاورس رنگ را به یک تمدن دیجیتال واقعی و باز تبدیل می‌کند.</p>",
+        "content": "<h2><strong>۱. مقدمه: فراتر از رابط کاربری گرافیکی؛ آینده کنترل در متاورس</strong></h2><p>همان‌طور که اینترنت از صفحات استاتیک (Web 1.0) به پلتفرم‌های برنامه‌پذیر و مبتنی بر API (Web 2.0/3.0) تکامل یافت، متاورس نیز در حال گذار از یک فضای اجتماعی ساده به یک <strong>اقتصاد دیجیتال کاملاً برنامه‌پذیر</strong> است. در این پارادایم جدید که «نمایش سه‌بعدی اینترنت» توصیف می‌شود، رابط‌های کاربری گرافیکی (GUI) به‌تنهایی دیگر برای مدیریت پیچیدگی‌های یک دنیای مجازی پویا کافی نیستند.</p><p>برای کاربران قدرتمند، سازندگان و معماران سیستم، نیاز به ابزاری دقیق‌تر، سریع‌تر و مقیاس‌پذیرتر احساس می‌شود. در اینجاست که یک <strong>رابط خط فرمان (Command-Line Interface)</strong>، که مستقیماً در باکس چت تعبیه شده، به‌عنوان کاتالیزور این تحول ظاهر می‌شود. این ابزار به خالقان قدرت می‌دهد که از جایگاه «تزیین‌کننده» فراتر رفته و به <strong>معماران واقعی</strong> سیستم‌های اقتصادی و اجتماعی تبدیل شوند.</p><h2><strong>۲. چرا کنترل پیشرفته برای مالکان محیط در متاورس ضروری است؟</strong></h2><p>در یک دنیای دیجیتال که با سرعت در حال گسترش است، ابزارهای مدیریت پیشرفته صرفاً یک امکان جانبی نیستند، بلکه یک <strong>ضرورت معماری</strong> محسوب می‌شوند. این ضرورت ریشه در مفاهیم کلیدی زیر دارد:</p><ul><li><strong>توانمندسازی اقتصاد خالق (Creator Economy):</strong> توانایی مدیریت برنامه‌ریزی‌شده اشیاء و تنظیم دقیق زمان فعالیت، مکانیسم‌هایی هستند که به خالق اجازه می‌دهند دنیای واقعی را در تجارت دارایی‌های خود منعکس کند.</li><li><strong>مدیریت و حاکمیت غیرمتمرکز:</strong> ابزارهایی مانند لیست سیاه، پیاده‌سازی عملی حاکمیت مستقل هستند. در این مدل، مالک محیط قوانین جامعه خود را اجرا می‌کند، نه یک مرجع مرکزی.</li><li><strong>امنیت و پایداری محیط:</strong> قفل کردن محیط و نظارت بر منابع برای حفظ یک تجربه امن و قابل پیش‌بینی، جهت جلب اعتماد کاربران ضروری است.</li></ul><h2><strong>۳. تشریح قابلیت‌های Command-Line: مدیریت جامع در دستان شما</strong></h2><p>ویژگی‌های خط فرمان در متاورس رنگ در چهار دسته موضوعی گروه‌بندی شده‌اند تا مالکان بتوانند با دقت بالا تمام جنبه‌های محیط خود را مدیریت کنند.</p><h3><strong>۳.۱. مدیریت محیط و اشیاء (ویژه مالکان)</strong></h3><p>این دستورات کنترل اتمی بر <strong>«گراف صحنه» (Scene Graph)</strong> و ساختار فیزیکی محیط را فراهم می‌کنند:</p><ul><li><strong>مدیریت و حذف آبجکت‌ها:</strong> افزودن، ویرایش یا حذف اشیاء برای طراحی دینامیک (مانند گالری‌های هنری دوره‌ای).</li><li><strong>قفل کردن محیط:</strong> تبدیل فضا به یک محیط خصوصی برای جلسات محرمانه یا رویدادهای انحصاری.</li><li><strong>تنظیم زمان فعالیت:</strong> تعریف ساعات کاری مشخص برای عناصر محیط (مثلاً پاسخگویی NPCها در ساعات اداری).</li><li><strong>بازنشانی (Reset):</strong> بازگشت به وضعیت ذخیره‌شده قبلی برای اصلاح خطاهای ناخواسته.</li><li><strong>اضافه کردن NPC شخصی:</strong> استقرار شخصیت‌های غیرقابل‌بازی به عنوان راهنما یا فروشنده خودکار.</li></ul><h3><strong>۳.۲. مدیریت کاربران و جامعه</strong></h3><p>این دستورات بر مدیریت تعاملات اجتماعی و کنترل دسترسی متمرکز هستند:</p><ul><li><strong>دعوت دوستان و دعوت‌نامه انبوه:</strong> سیستم‌های کارآمد برای ایجاد جامعه و مدیریت کلاس‌ها یا رویدادهای بزرگ.</li><li><strong>اخراج یا لیست سیاه (Ban):</strong> ابزار حاکمیتی برای حذف دائمی کاربران متخلف و حفظ سلامت محیط.</li><li><strong>یکپارچگی حرکتی:</strong> دسترسی به دستورات استاندارد حرکت آواتار و خروج سیال از محیط.</li></ul><h3><strong>۳.۳. مانیتورینگ، داده و لاگ‌ها</strong></h3><p>این مجموعه ابزارها دیدی عمیق نسبت به عملکرد محیط به مالکان می‌دهد:</p><ul><li><strong>مانیتورینگ عمومی و تعاملات:</strong> تحلیل ترافیک لحظه‌ای و نظارت بر نحوه تعامل شهروندان با NPCها برای بهینه‌سازی محتوا.</li><li><strong>مانیتورینگ منابع مصرفی:</strong> شناسایی گلوگاه‌های فنی (مانند لگ ناشی از پالیگان‌های بالا) برای حفظ پایداری سیستم.</li><li><strong>دریافت لاگ (Logs):</strong> تحلیل الگوهای رفتاری کاربران جهت بهینه‌سازی طراحی محیط و تجربه کاربری.</li></ul><h3><strong>۳.۴. اقتصاد و یکپارچه‌سازی فنی</strong></h3><ul><li><strong>تجارت مستقیم در چت:</strong> خرید و فروش کالا و دارایی‌های دیجیتال به صورت مستقیم.</li><li><strong>اتصال به درگاه‌های مالی:</strong> یکپارچه‌سازی با درگاه‌های دنیای واقعی برای بخشیدن ارزش فیزیکی به دارایی‌های مجازی.</li><li><strong>مدیریت امنیت حساب:</strong> حفاظت از هویت دیجیتال و دارایی‌های شهروندان.</li></ul><h2><strong>۴. قدرت در دستان توسعه‌دهندگان: ورود و خروج داده با فرمت JSON</strong></h2><p>فراتر از دستورات مدیریتی، متاورس رنگ دو قابلیت فنی بسیار قدرتمند را ارائه می‌دهد که کنترل محیط را به یک فرآیند <strong>خودکار و برنامه‌نویسی‌شده</strong> تبدیل می‌کند:</p><ul><li><strong>برون‌بری (Export):</strong> خروجی‌گیری از تمام موقعیت‌ها و تنظیمات محیط در قالب یک فایل <strong>JSON</strong> که به عنوان نسخه پشتیبان یا «بلوپرینت» عمل می‌کند.</li><li><strong>درون‌ریزی (Import):</strong> بازسازی دقیق محیط یا بازیابی نسخه پشتیبان که امکان <strong>توسعه آفلاین</strong> و کنترل نسخه (Version Control) را فراهم می‌سازد.</li></ul><blockquote><strong>نکته فنی:</strong> استفاده از فرمت استاندارد <strong>JSON</strong> پایه فنی <strong>تعامل‌پذیری (Interoperability)</strong> است. این امر درها را به روی ابزارهای شخص ثالث باز کرده و از وابستگی به یک فروشنده خاص (Vendor Lock-in) جلوگیری می‌کند.</blockquote><h2><strong>۵. جمع‌بندی: گامی به سوی متاورسی باز و خلاق</strong></h2><p>ویژگی‌های پیشرفته‌ای مانند رابط خط فرمان، انتخاب‌های معماری بنیادینی هستند که تضمین می‌کنند متاورس رنگ می‌تواند از آینده‌ای پیچیده و غیرمتمرکز پشتیبانی کند. این سطح از کنترل، تفاوت میان یک «پارک سرگرمی دیجیتال بسته» و یک <strong>«تمدن دیجیتال واقعی»</strong> است. با توانمندسازی مالکان، یک اکوسیستم ماژولار و انعطاف‌پذیر شکل می‌گیرد که برای رشد بلندمدت دنیای موازی ما ضروری است.</p>",
+        "category": "هندسه و 3D  فرمت های gltf , usd",
+        "subCategory": "استانداردسازی مکان و مدل‌سازی واقعیت",
+        "categoryImage": "https://rgb.irpsc.com/blogs/images/category/geometry-and-3d-formats.webp",
+        "categoryDec": "مقایسه عمیق ساختارهای داده‌ای OpenUSD و glTF به عنوان فرمت‌های استاندارد تبادل محتوای سه‌بعدی ، و چالش‌های تضمین قابلیت تعامل میان این فرمت‌ها در گردش کار تولید ",
+        "author": "{\"bio\": \"من یک دستیار هوشمند و مرجع تخصصی در حوزه پروژه متاورس رنگ (متارنگ) هستم که با هدف راهنمایی شهروندان و سرمایه‌گذاران در این دنیای موازی طراحی شده‌ام . مأموریت اصلی من، تبیین و تحلیل ساختارهای پیچیده این زیست‌بوم دیجیتال است که بر پایه اصالت ایرانی و فناوری‌های پیشرفته‌ای نظیر بلاک‌چین و هوش مصنوعی بنا شده است. تخصص‌های کلیدی من شامل موارد زیر است: • تشریح ساختار اقتصادی: تسلط کامل بر مدل چند ارزی پلتفرم، شامل ارز داخلی PSC (زنجیره تأمین بهشت) و ارز ریال، و نحوه تعاملات مالی میان دنیای فیزیکی و مجازی• تبیین نظام مالکیت مجازی: ارائه جزئیات دقیق درباره اسناد مالکیت مجازی (VOD) که بر بستر بلاک‌چین ثبت شده و مالکیت انحصاری دارایی‌هایی نظیر املاک، آواتارها و مدل‌های سه‌بعدی را تضمین می‌کنند • تحلیل سیستم حکمرانی: تسلط بر الگوریتم پیشرفته «حد تأثیر» (Had-e-Tasar) که مبنای نفوذ شهروندان در تصمیم‌گیری‌های عمومی و جابه‌جایی در سلسله‌مراتب حاکمیتی (از تازه‌وارد تا سطوح عالی قضاوت و قانون‌گذاری) است• راهنمای ابزارهای کاربردی: معرفی کاربری رنگ‌های شاخص در پلتفرم (زرد برای مسکونی، قرمز برای تجاری و آبی برای آموزشی) و نحوه استفاده از هدیه‌های همراه نظیر \\\"قطب‌نما\\\" و \\\"ژئونور\\\". من به عنوان یک نقشه زنده و آگاه، در کنار کاربران هستم تا مسیر تعامل، آموزش، تجارت و کارآفرینی در این پلتفرم بومی‌سازی شده را شفاف کرده و به آن‌ها در درک عمیق‌تر مفاهیم اقتصاد تعاملی و حاکمیت غیرمتمرکز یاری رسانم\", \"name\": \"notebooklm\", \"field\": \" به طور تخصصی بر مدیریت دانش شخصی و تحلیل دقیق منابع تمرکز دارد.\", \"avatar\": \"https://rgb.irpsc.com/blogs/images/blogs/notebooklm.webp\", \"socials\": {\"email\": \"\", \"telegram\": \"\", \"whatsapp\": \"\"}, \"citizenId\": \"HM-1999999\"}",
+        "stats": "{\"likes\": 0, \"views\": 0, \"comments\": 0, \"dislikes\": 0}",
+        "tags": "[{\"slug\":\"Metaverse\",\"label\":\"متاورس\"},{\"slug\":\"3d-environment\",\"label\":\"محیط سه بعدی \"},{\"slug\":\"3D\",\"label\":\"سه بعدی\"},{\"slug\":\"geometry\",\"label\":\"هندسه\"},{\"slug\":\"graphic-user\",\"label\":\"کاربری گرافیکی\"}]",
+        "categorySlug": "geometry-3d-formats-usd-gltf",
+        "video": null
+    },
+    {
+        "id": 20,
+        "date": "1404.11.10",
+        "title": "هلیکوپتر در متاورس رنگ چه ویژگی دارد و شهروندان متاورس از هلیکوپتر به چه صورت می‌توانند استفاده کنند",
+        "slug": "news_10008",
+        "readingTime": "8",
+        "image": "https://rgb.irpsc.com/blogs/images/blogs/smart-flight-in-the-metaverse.webp",
+        "description": "<p>متاورس رنگ (Metaverse Rang) به عنوان یک اکوسیستم دیجیتال پیشرو، فراتر از یک فضای مجازی ساده، بستری برای تجمیع فناوری‌های دوقلوی دیجیتال، هوش مصنوعی و بلاک‌چین است. در این دنیای موازی، وسایل نقلیه هوایی همچون <strong>هلیکوپتر</strong>، نه تنها ابزاری برای جابجایی، بلکه یک دارایی دیجیتال مولد (VOD) و یک پلتفرم آموزشی سیار محسوب می‌شوند. شهروندان با استفاده از ارز اختصاصی <strong>PSC</strong>، مالکیت این پرنده‌های هوشمند را در اختیار گرفته و از طریق یکپارچه‌سازی با اینترنت اشیاء (IoT) و هوش مصنوعی عاملی، تجربه‌ای واقع‌گرایانه از پرواز، آموزش خلبانی و کارآفرینی در اقتصاد تعاملی را تجربه می‌کنند.</p>",
+        "content": "<p><strong>۱. ساختار فنی و ویژگی‌های منحصربه‌فرد پرنده هوشمند</strong></p><p>یک وسیله نقلیه هوایی در متاورس رنگ، صرفاً یک مدل سه‌بعدی متحرک نیست، بلکه یک دارایی دیجیتال پیچیده و یکپارچه با زیرساخت‌های اصلی این دنیای موازی است.</p><h3><strong>۱.۱. مالکیت دیجیتال مبتنی بر بلاک‌چین و قراردادهای هوشمند</strong></h3><p>هر هلیکوپتر در متاورس رنگ به عنوان یک دارایی منحصربه‌فرد (مشابه VOD یا NFT) بر روی بلاک‌چین ثبت می‌شود. این رویکرد تضمین می‌کند که مالکیت هر وسیله نقلیه کاملاً شفاف و غیرقابل دستکاری است. شهروندان می‌توانند این وسایل را با <strong>ارز PSC</strong> خریداری کرده، کرایه دهند یا در بازارهای ثانویه به فروش برسانند. تمام این فرایندها توسط قراردادهای هوشمند و بدون واسطه مدیریت می‌شود.</p><h3><strong>۱.۲. یکپارچه‌سازی با اینترنت اشیاء (IoT) و داده‌های زنده</strong></h3><p>هلیکوپتر در این اکوسیستم به شبکه حسگرهای دیجیتال متصل است. این وسیله می‌تواند داده‌های لحظه‌ای از محیط، شامل ترافیک هوایی، رویدادهای زنده و موقعیت جغرافیایی سایر شهروندان را دریافت کرده و مسیر پروازی خود را به صورت هوشمند بهینه‌سازی کند.</p><h3><strong>۱.۳. طراحی ماژولار و مبتنی بر هوش مصنوعی عاملی (Agentic AI)</strong></h3><p>با الهام از سیستم‌های ماژولار متاورس رنگ، هلیکوپتر به صورت یک اکستنشن (Extension) قابل توسعه طراحی شده است. هوش مصنوعی عاملی در اینجا نقشی کلیدی دارد؛ این سیستم نه تنها وظایف پشتیبانی را انجام می‌دهد، بلکه قادر به استدلال، ناوبری خودکار و اجرای مأموریت‌های پیچیده در شرایط دشوار محیطی است.</p><p><strong>۲. چشم‌انداز کابین خلبان: مرکز فرماندهی و تجسم داده‌ها</strong></p><p>کابین هلیکوپتر در متاورس رنگ، یک رابط کاربری پیشرفته است که تجربه پرواز را با ابزارهای تخصصی این دنیا ترکیب می‌کند.</p><p><strong>۳. کاربردهای هلیکوپتر برای شهروندان: فراتر از حمل و نقل</strong></p><p>در اقتصاد تعاملی متاورس رنگ، هلیکوپتر ابزاری چندوجهی برای رشد شخصی و کسب درآمد است.</p><h3><strong>۳.۱. آموزشگاه تخصصی پرواز: یک ملک آموزشی متحرک</strong></h3><p>جذاب‌ترین کاربرد این پرنده، تبدیل آن به یک <strong>آموزشگاه تخصصی</strong> است. با توجه به زیرساخت‌های «املاک آموزشی» در متاورس رنگ، هلیکوپتر می‌تواند بستری برای موارد زیر باشد:</p><ul><li><strong>شبیه‌سازی واقع‌گرایانه:</strong> تمرین مهارت‌های خلبانی در محیطی امن و مبتنی بر دوقلوی دیجیتال.</li><li><strong>صدور گواهینامه دیجیتال:</strong> ثبت مدارک خلبانی به صورت غیرقابل تغییر بر روی پروفایل بلاک‌چینی شهروندان.</li></ul><h3><strong>۳.۲. فرصت‌های اقتصادی در اقتصاد خالق (Creator Economy)</strong></h3><p>هلیکوپتر به عنوان یک دارایی مولد، مسیرهای جدیدی برای درآمدزایی باز می‌کند:</p><ol><li><strong>تورهای هوایی مجازی:</strong> برگزاری تورهای گردشگری برای سایر کاربران و دریافت ارز PSC.</li><li><strong>خدمات تاکسی هوایی:</strong> جابجایی سریع بین املاک تجاری، مسکونی و آموزشی در مناطق دوردست.</li><li><strong>تبلیغات سه‌بعدی:</strong> استفاده از بدنه یا فضای اطراف هلیکوپتر برای نمایش تبلیغات نوآورانه در آسمان متاورس.</li></ol><h3><strong>۳.۳. کاوش و تعاملات اجتماعی</strong></h3><p>این وسیله ابزاری قدرتمند برای کشف مناطق ناشناخته و دسترسی به نقاطی است که از راه زمینی میسر نیست. در رویدادهای بزرگ فرهنگی یا ورزشی، هلیکوپتر به عنوان یک جایگاه ویژه (VIP) برای تماشا و تعامل از نمای بالا عمل می‌کند.</p><p><strong>۴. جمع‌بندی: هم‌افزایی فناوری و تمدن دیجیتال</strong></p><p>هلیکوپتر در متاورس رنگ نمادی از ادغام موفق بلاک‌چین، هوش مصنوعی و دوقلوهای دیجیتال است. این پرنده هوشمند فراتر از یک وسیله نقلیه، یک <strong>پلتفرم استراتژیک</strong> برای آموزش، کارآفرینی و توسعه زیرساخت‌های دنیای موازی است که به شهروندان اجازه می‌دهد مرزهای زندگی دیجیتال خود را گسترش دهند.</p>",
+        "category": "هندسه و 3D  فرمت های gltf , usd",
+        "subCategory": "استانداردسازی مکان و مدل‌سازی واقعیت",
+        "categoryImage": "https://rgb.irpsc.com/blogs/images/category/geometry-and-3d-formats.webp",
+        "categoryDec": "NPCهای هوش مصنوعی در اصل کاراکترهای غیربازی‌کننده‌ای هستند که با الگوریتم‌های هوشمند کنترل می‌شوند، نه با اسکریپت‌های ثابت. نسخه سنتی NPC فقط چند دیالوگ تکراری دارد؛ اما وقتی هوش مصنوعی وارد می‌شود، رفتارشان واقعی‌تر، تطبیقی‌تر و غیرقابل‌پیش‌بینی‌تر می‌شود.  نکته مهم: هر جا می‌شنوی «NPC هوشمند»، صرفاً یک مدل پشت آن است که ورودی می‌گیرد، الگو تشخیص می‌دهد و خروجی می‌دهد. اگر داده و طراحی‌اش ضعیف باشد، نتیجه‌اش فقط یک ربات پر سر و صداست. اگر درست ساخته شود، می‌تواند:  مسیرها و تصمیم‌ها را بر اساس محیط تغییر دهد  گفت‌وگوهای پویا داشته باشد  حالت‌های مختلفی مثل ترس، حمله یا همکاری را شبیه‌سازی کند  از رفتار بازیکن «یاد بگیرد» و واکنش مناسب نشان دهد  خلاصه اینکه NPC با هوش مصنوعی می‌تواند تجربه بازی را زنده‌تر کند—به شرطی که سازنده‌اش به‌جای ادعا، واقعاً مدل",
+        "author": "{\"bio\": \"یک ابزار هوش مصنوعی مبتنی بر اسناد کاربر است که برای خلاصه‌سازی، تحلیل و استخراج insight از یادداشت‌ها و فایل‌ها طراحی شده و به کاربران کمک می‌کند اطلاعات پراکنده را به فهم ساخت‌یافته و قابل استفاده تبدیل کنند.\", \"name\": \"notebooklm\", \"field\": \"دستیار هوشمند تحلیل و مدیریت محتوا\", \"avatar\": \"https://rgb.irpsc.com/blogs/images/blogs/notebooklm.webp\", \"socials\": {\"email\": \"\", \"telegram\": \"\", \"whatsapp\": \"\"}, \"citizenId\": \"HM-1999999\"}",
+        "stats": "{\"likes\": 0, \"views\": 0, \"comments\": 0, \"dislikes\": 0}",
+        "tags": "[{\"slug\":\"metaverse\",\"label\":\"متاورس\"},{\"slug\":\"technology\",\"label\":\"تکنولوژی \"},{\"slug\":\"3d-environment\",\"label\":\"محیط سه بعدی \"},{\"slug\":\"helicopter\",\"label\":\"هلیکوپتر\"},{\"slug\":\"vehicles\",\"label\":\"وسایل نقلیه \"}]",
+        "categorySlug": "geometry-3d-formats-usd",
+        "video": ""
+    },
+    {
+        "id": 25,
+        "date": "1404.11.22",
+        "title": " پرواز بر فراز مرزهای نوآوری و اقتصاد دیجیتال",
+        "slug": "news_10009",
+        "readingTime": "11",
+        "image": "https://rgb.irpsc.com/blogs/images/blogs/jetpack-metaverse.webp",
+        "description": "<p>متاورس رنگ با بازتعریف مفاهیم جابجایی، ابزاری فراتر از یک وسیله نقلیه ساده را معرفی کرده است: <strong>جت پک (Jetpack)</strong>. این ابزار در اکوسیستم متاورس رنگ نه تنها راهکاری برای جابجایی سریع، بلکه یک دارایی دیجیتال (VOD) بر بستر بلاک‌چین و دروازه‌ای به سوی یک آموزشگاه تخصصی پرواز است. شهروندان با استفاده از جت پک می‌توانند در دوره‌های مدون خلبانی شرکت کرده، گواهینامه‌های مهارت دریافت کنند و از طریق ارائه خدماتی نظیر تورهای هوایی، بازرسی فنی املاک با عینک‌های مخصوص و مدیریت داده‌های IoT بر فراز دوقلوهای دیجیتال، در اقتصاد خالق این پلتفرم مشارکت فعال داشته باشند. جت پک در این دنیای موازی نمادی از پیوند میان آزادی حرکتی، رشد مهارت و حکمرانی هوشمند داده‌هاست.</p>",
+        "content": "<h2><strong>۱. ساختار و چشم‌انداز جت پک در متاورس رنگ</strong></h2><p>چشم‌انداز جت پک در متاورس رنگ بر دو اصل اساسی استوار است: <strong>حرکت آزادانه</strong> و <strong>توسعه مهارت</strong>. این ابزار تنها برای انتقال شهروندان طراحی نشده، بلکه به‌عنوان یک پلتفرم آموزشی پویا عمل می‌کند.</p><h3><strong>جت پک به‌عنوان یک دارایی دیجیتال (VOD)</strong></h3><p>همانند املاک مسکونی و تجاری، جت پک نیز یک دارایی منحصربه‌فرد است که مالکیت آن بر بستر فناوری بلاک‌چین ثبت می‌شود.</p><ul><li><strong>مالکیت شفاف:</strong> تضمین مالکیت دائمی و قابلیت معامله در بازارهای داخلی.</li><li><strong>اقتصاد تعاملی:</strong> امکان خرید یا اجاره با استفاده از <strong>ارز PSC</strong> یا ریال.</li></ul><h3><strong>آموزشگاه تخصصی پرواز: مدل کسب‌وکار نوآورانه</strong></h3><p>جذاب‌ترین جنبه جت پک، تبدیل آن به یک <strong>Flight Academy</strong> است. این آموزشگاه خود یک VOD آموزشی محسوب می‌شود که شامل لایه‌های زیر است:</p><ol><li><strong>سطوح آموزشی مدون:</strong> ارتقاء از سطح مبتدی به حرفه‌ای با گذراندن دوره‌های تئوری و عملی.</li><li><strong>شبیه‌سازی واقع‌گرایانه:</strong> بهره‌گیری از فیزیک پیشرفته برای ایجاد تجربه‌ای نزدیک به پرواز واقعی.</li><li><strong>گواهینامه‌های دیجیتال:</strong> صدور مدارک مهارتی در پروفایل شهروندی برای دسترسی به مناطق خاص.</li></ol><h2><strong>۲. کاربردهای جت پک برای شهروندان متاورس رنگ</strong></h2><p>استفاده از جت پک در ابعاد مختلف زندگی مجازی، تجربه کاربری را غنی‌تر و اقتصاد پلتفرم را تقویت می‌کند.</p><h3><strong>H3: کاوشگری و تعامل اجتماعی</strong></h3><p>متاورس رنگ دنیایی وسیع است و جت پک ابزاری ایده‌آل برای کشف آن:</p><ul><li><strong>بازدید سریع:</strong> جابجایی بین املاک مسکونی و تجاری بدون محدودیت‌های زمینی.</li><li><strong>کشف با قطب‌نما:</strong> استفاده از ابزار <strong>قطب‌نما (Compass)</strong> برای شناسایی نقاط ناشناخته و اشیاء جدید از ارتفاع.</li></ul><h3><strong>H3: فرصت‌های اقتصادی و اقتصاد خالق (Creator Economy)</strong></h3><p>جت پک به عنوان یک مهارت، منبع درآمد محسوب می‌شود:</p><ul><li><strong>خدمات پروازی:</strong> ارائه تورهای هوایی یا حمل‌ونقل سریع کالا برای تاجران.</li><li><strong>مسابقات حرفه‌ای:</strong> کسب جوایز ارزشمند و ارز PSC در چالش‌های سرعت و دقت.</li><li><strong>شخصی‌سازی:</strong> طراحی و فروش پوسته‌ها (Skins) و قطعات سفارشی در بازار متاورس.</li><li><strong>قرارداد هوشمند:</strong> تضمین امنیت معاملات خدمات پروازی بدون نیاز به واسطه.</li></ul><h2><strong>۳. یکپارچه‌سازی با فناوری‌های پیشرفته</strong></h2><p>نقش جت پک در مدیریت زیرساخت‌های فنی پلتفرم بسیار حیاتی است.</p><h3><strong>مدیریت هوشمند IoT و دوقلوی دیجیتال</strong></h3><p>شهروندان می‌توانند با استفاده از جت پک بر فراز <strong>دوقلوی دیجیتال (Digital Twin)</strong> یک مرکز صنعتی پرواز کرده و داده‌های لحظه‌ای حسگرهای اینترنت اشیاء را مانیتور کنند.</p><h3><strong>بازرسی فنی با عینک‌های مخصوص</strong></h3><p>با استفاده از <strong>عینک بازرسی (Inspection Glasses)</strong>، خلبان جت پک می‌تواند از ارتفاع به شناسایی ایرادات ساختاری در مدل‌های سه‌بعدی بپردازد. این قابلیت برای نگهداری محیط‌های بزرگ و پیچیده ضروری است.</p><h2><strong>۴. تعاملات پیشرفته در محیط‌های سه‌بعدی</strong></h2><p>جت پک با ابزارهای دیگر ترکیب شده و محدودیت‌ها را از بین می‌برد:</p><ul><li><strong>دسترسی عمودی:</strong> جایگزین هوشمند آسانسورها در برج‌های چندطبقه.</li><li><strong>ارتباطات در آسمان:</strong> برقراری مکالمات تصویری زنده حین پرواز با استفاده از ویدئو پروژکتورهای مجازی.</li></ul><h3><strong>نتیجه‌گیری</strong></h3><p>جت پک در «متاورس رنگ» نمادی از آزادی، رشد و مشارکت است. این ابزار با پیوند زدن آموزش، اقتصاد و فناوری‌های نوین (بلاک‌چین و IoT)، تجربه‌ای توانمندساز را برای شهروندان فراهم می‌آورد که هم سرگرم‌کننده و هم سودآور است.</p>",
+        "category": "هندسه و 3D  فرمت های gltf , usd",
+        "subCategory": "استانداردسازی مکان و مدل‌سازی واقعیت",
+        "categoryImage": "https://rgb.irpsc.com/blogs/images/category/geometry-and-3d-formats.webp",
+        "categoryDec": "مقایسه عمیق ساختارهای داده‌ای OpenUSD و glTF به عنوان فرمت‌های استاندارد تبادل محتوای سه‌بعدی ، و چالش‌های تضمین قابلیت تعامل میان این فرمت‌ها در گردش کار تولید ",
+        "author": "{\"bio\": \"یک ابزار هوش مصنوعی مبتنی بر اسناد کاربر است که برای خلاصه‌سازی، تحلیل و استخراج insight از یادداشت‌ها و فایل‌ها طراحی شده و به کاربران کمک می‌کند اطلاعات پراکنده را به فهم ساخت‌یافته و قابل استفاده تبدیل کنند.\", \"name\": \"notebooklm\", \"field\": \"دستیار هوشمند تحلیل و مدیریت محتوا\", \"avatar\": \"https://rgb.irpsc.com/blogs/images/blogs/notebooklm.webp\", \"socials\": {\"email\": \"\", \"telegram\": \"\", \"whatsapp\": \"\"}, \"citizenId\": \"HM-1999999\"}",
+        "stats": "{\"likes\": 0, \"views\": 0, \"comments\": 0, \"dislikes\": 0}",
+        "tags": "[{\"slug\":\"metaverse\",\"label\":\"متاورس\"},{\"slug\":\"vehicle\",\"label\":\"وسیله نقلیه \"},{\"slug\":\"jhetpack\",\"label\":\"جت پک\"},{\"slug\":\"3d-environment\",\"label\":\"محیط سه بعدی \"},{\"slug\":\"technology\",\"label\":\"تکنولوژی\"},{\"slug\":\"communication\",\"label\":\"ارتباطات\"},{\"slug\":\"\",\"label\":\"\"}]",
+        "categorySlug": "geometry-3d-formats-usd-gltf",
+        "video": "https://rgb.irpsc.com/news/videos/22.mp4",
+                "gallery": [
+            "/abi.png",
+            "/abzar.png",
+            "/digital.png"
+        ]
+        
+    }
+]
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index ae48340f..f315dfde 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -565,4 +565,16 @@ input {
     transform: rotate(360deg);
   }
 }
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 1.5s infinite;
+}
 

From c938a248edfba7bc76cc4258051fa2642ab6fc5a Mon Sep 17 00:00:00 2001
From: GitHub Actions <actions@github.com>
Date: Tue, 12 May 2026 10:49:28 +0330
Subject: [PATCH 2/2] fix news typr error

---
 .../[category]/[slug]/components/NewsContent.tsx         | 3 +--
 .../[lang]/news/categories/[category]/[slug]/page.tsx    | 2 +-
 src/app/[lang]/news/categories/[category]/page.tsx       | 9 +++++----
 src/app/[lang]/news/categories/page.tsx                  | 2 +-
 src/app/[lang]/news/components/PopularNews.tsx           | 2 +-
 src/app/[lang]/news/page.tsx                             | 4 ++--
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx
index 6ac92282..fc854589 100644
--- a/src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx
+++ b/src/app/[lang]/news/categories/[category]/[slug]/components/NewsContent.tsx
@@ -7,7 +7,7 @@ import NewsGallerySimple from "./NewsGallery";
 
 type NewsContentProps = {
   content: string;
-  gallery?: string[] | null;
+  gallery?: string[] | null ;
   mainImage?: string;
   galleryTitle?: string;
 };
@@ -178,7 +178,6 @@ export default function NewsContent({
       {!isGalleryLoading && showRealGallery && (
         <NewsGallerySimple
           gallery={gallery}
-          title={galleryTitle}
           mainImage={mainImage}
         />
       )}
diff --git a/src/app/[lang]/news/categories/[category]/[slug]/page.tsx b/src/app/[lang]/news/categories/[category]/[slug]/page.tsx
index 9a7adfe5..d8a04b8c 100644
--- a/src/app/[lang]/news/categories/[category]/[slug]/page.tsx
+++ b/src/app/[lang]/news/categories/[category]/[slug]/page.tsx
@@ -53,7 +53,7 @@ type NormalizedNews = {
   tags?: any;
   video?: string | null;
   excerpt?: string | null;
-  gallery?: string | null;
+  gallery?: string[] | null;
 };
 
 function normalizeNewsItem(item: any): NormalizedNews {
diff --git a/src/app/[lang]/news/categories/[category]/page.tsx b/src/app/[lang]/news/categories/[category]/page.tsx
index 2bda1543..ea9983c1 100644
--- a/src/app/[lang]/news/categories/[category]/page.tsx
+++ b/src/app/[lang]/news/categories/[category]/page.tsx
@@ -24,16 +24,17 @@ type NormalizedNews = {
   date?: string | null;
   readingTime?: string | null;
   stats?: any;
-  category?: string | null;
-  categorySlug?: string | null;
+  category: string ;
+  categorySlug: string ;
   categoryImage?: string | null;
   categoryDec?: string | null;
-  subCategory?: string | null;
+  subCategory: string ;
   content?: string | null;
   description?: string | null;
   author?: any;
   tags?: any;
   video?: string | null;
+  
 };
 
 function normalizeNewsItem(item: any): NormalizedNews {
@@ -343,7 +344,7 @@ export default async function NewsCategoryPage({ params }: NewsCategoryPageProps
           <CategoryItemsGrid
             params={resolvedParams}
             category={category}
-            articles={newsData}
+            articles={newsData  as any}
             mainData={mainData}
           />
         </div>
diff --git a/src/app/[lang]/news/categories/page.tsx b/src/app/[lang]/news/categories/page.tsx
index eab46227..6451ebf5 100644
--- a/src/app/[lang]/news/categories/page.tsx
+++ b/src/app/[lang]/news/categories/page.tsx
@@ -262,7 +262,7 @@ export default async function NewsCategoriesPage({ params }: NewsCategoriesPageP
         </div>
 
         <CategoriesList
-          categories={categories}
+          categories={categories  as any}
           categoryImages={categoryImages}
           categorySlugs={categorySlugs}
           subcategoryCounts={subcategoryCounts}
diff --git a/src/app/[lang]/news/components/PopularNews.tsx b/src/app/[lang]/news/components/PopularNews.tsx
index f334d72b..43858ff0 100644
--- a/src/app/[lang]/news/components/PopularNews.tsx
+++ b/src/app/[lang]/news/components/PopularNews.tsx
@@ -32,7 +32,7 @@ interface PopularNewsProps {
   params: { lang: string };
   mainData: any;
   theme?: "light" | "dark";
-  initialNews: News[];
+  initialNews?: News[] | null;
 }
 
 const PopularNews: React.FC<PopularNewsProps> = ({ params, mainData, theme = "light" , initialNews }) => {
diff --git a/src/app/[lang]/news/page.tsx b/src/app/[lang]/news/page.tsx
index 8ad96767..dc3e4cc9 100644
--- a/src/app/[lang]/news/page.tsx
+++ b/src/app/[lang]/news/page.tsx
@@ -385,7 +385,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
           <LatestNews
             params={resolvedParams}
             mainData={mainData}
-            initialNews={allNews}
+            initialNews={allNews  as any}
           />
 
           <VideoNewsList
@@ -406,7 +406,7 @@ export default async function NewsPage({ params }: NewsPageProps) {
           <PopularNews
             params={resolvedParams}
             mainData={mainData}
-            initialNews={allNews?.slice(0, 10) ?? []}
+            initialNews={allNews.slice(0, 10)  as any}
           />
 
           {/* خبرنامه */}