added all new chanes

app/blog/[slug]/page.tsx

@@ -0,0 +1,546 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import { Calendar, Clock, ArrowRight, ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+// Blog posts data - placeholder content
+export const blogPosts: Record<
+  string,
+  {
+    title: string;
+    content: string;
+    date: string;
+    readTime: string;
+    category: string;
+    image: string;
+  }
+> = {
+  "system-integration-guide": {
+    title: "راهنمای جامع یکپارچه‌سازی سیستم‌ها: از صفر تا صد",
+    category: "یکپارچه‌سازی",
+    date: "۱۴۰۳/۰۹/۲۰",
+    readTime: "۱۲",
+    image: "/assets/main-pic/4section/Systems Integration.jpg",
+    content: `
+# راهنمای جامع یکپارچه‌سازی سیستم‌ها: از صفر تا صد
+
+یکپارچه‌سازی سیستم‌ها یکی از مهم‌ترین مفاهیم در دنیای فناوری اطلاعات و کسب‌وکارهای مدرن است. در این مقاله، به صورت کامل و جامع با این مفهوم آشنا می‌شوید.
+
+## مقدمه
+
+در دنیای امروز، کسب‌وکارها از سیستم‌های مختلفی استفاده می‌کنند: CRM، حسابداری، فروش، بازاریابی و... هر کدام از این سیستم‌ها به تنهایی کار می‌کنند، اما مشکل زمانی شروع می‌شود که بخواهیم این سیستم‌ها با یکدیگر ارتباط برقرار کنند.
+
+## یکپارچه‌سازی چیست؟
+
+یکپارچه‌سازی سیستم‌ها به معنای اتصال نرم‌افزارها و سیستم‌های مختلف به یکدیگر است تا داده‌ها و اطلاعات به صورت خودکار و بدون دخالت انسان بین آن‌ها جابه‌جا شوند.
+
+### مزایای یکپارچه‌سازی
+
+- کاهش خطای انسانی
+- صرفه‌جویی در وقت
+- بهبود دقت داده‌ها
+- افزایش بهره‌وری
+
+### چالش‌های پیش رو
+
+- پیچیدگی فنی
+- هزینه‌های اولیه
+- نیاز به تخصص
+- امنیت اطلاعات
+
+## انواع یکپارچه‌سازی
+
+### یکپارچه‌سازی افقی
+
+این نوع یکپارچه‌سازی شامل اتصال سیستم‌های یک سطح در سازمان است.
+
+### یکپارچه‌سازی عمودی
+
+یکپارچه‌سازی عمودی شامل اتصال سیستم‌های مختلف سطوح سازمانی است.
+
+## نتیجه‌گیری
+
+یکپارچه‌سازی سیستم‌ها نه تنها یک نیاز، بلکه یک ضرورت برای کسب‌وکارهای مدرن است. با برنامه‌ریزی درست و انتخاب راهکار مناسب، می‌توانید از مزایای آن بهره‌مند شوید.
+    `,
+  },
+  "automation-best-practices": {
+    title: "بهترین روش‌های اتوماسیون فرآیندهای کسب‌وکار",
+    category: "اتوماسیون",
+    date: "۱۴۰۳/۰۹/۱۵",
+    readTime: "۱۰",
+    image: "/assets/main-pic/4section/Process Automation.jpg",
+    content: `
+# بهترین روش‌های اتوماسیون فرآیندهای کسب‌وکار
+
+اتوماسیون فرآیندها یکی از مؤثرترین روش‌های بهبود عملکرد و افزایش بهره‌وری در کسب‌وکارهای مدرن است.
+
+## مقدمه
+
+در این مقاله، با بهترین روش‌ها و نکات مهم در زمینه اتوماسیون فرآیندهای کسب‌وکار آشنا می‌شوید.
+
+## اصول اتوماسیون موفق
+
+### شروع با فرآیندهای ساده
+
+همیشه بهتر است با فرآیندهای ساده و قابل پیش‌بینی شروع کنید. این کار به شما کمک می‌کند تا تجربه لازم را کسب کنید.
+
+### تمرکز بر ارزش
+
+قبل از اتوماسیون هر فرآیندی، مطمئن شوید که این کار ارزش اضافه می‌کند.
+
+### تست و بهبود مستمر
+
+اتوماسیون یک فرآیند یکباره نیست. باید به طور مستمر سیستم را تست و بهبود دهید.
+
+## نتیجه‌گیری
+
+با رعایت این اصول، می‌توانید فرآیندهای کسب‌وکار خود را به طور مؤثر اتوماسیون کنید.
+    `,
+  },
+  "social-media-integration": {
+    title: "یکپارچه‌سازی شبکه‌های اجتماعی: راهنمای عملی",
+    category: "شبکه‌های اجتماعی",
+    date: "۱۴۰۳/۰۹/۱۰",
+    readTime: "۸",
+    image: "/assets/main-pic/4section/Interaction with Social Networks.jpg",
+    content: `
+# یکپارچه‌سازی شبکه‌های اجتماعی: راهنمای عملی
+
+یادگیری نحوه اتصال و مدیریت پلتفرم‌های مختلف شبکه‌های اجتماعی می‌تواند به شما کمک کند تا ارتباط مؤثرتری با مشتریان خود برقرار کنید.
+
+## مزایای یکپارچه‌سازی شبکه‌های اجتماعی
+
+- مدیریت متمرکز
+- انتشار خودکار محتوا
+- نظارت و تحلیل یکپارچه
+- بهبود تعامل با مخاطبان
+
+## راهکارهای عملی
+
+در این بخش با روش‌های عملی یکپارچه‌سازی شبکه‌های اجتماعی آشنا می‌شوید.
+    `,
+  },
+  "management-dashboards": {
+    title: "طراحی و پیاده‌سازی پنل‌های مدیریتی پیشرفته",
+    category: "مدیریت داده",
+    date: "۱۴۰۳/۰۹/۰۵",
+    readTime: "۹",
+    image: "/assets/main-pic/4section/Powerful Management panels.jpg",
+    content: `
+# طراحی و پیاده‌سازی پنل‌های مدیریتی پیشرفته
+
+پنل‌های مدیریتی قدرتمند به شما امکان می‌دهند تا داده‌های خود را به صورت مؤثر مدیریت و تحلیل کنید.
+
+## ویژگی‌های کلیدی
+
+پنل‌های مدیریتی پیشرفته باید دارای ویژگی‌های خاصی باشند تا بتوانند نیازهای کاربران را برطرف کنند.
+
+## طراحی UX/UI
+
+طراحی تجربه کاربری و رابط کاربری مناسب در موفقیت یک پنل مدیریتی بسیار مهم است.
+    `,
+  },
+  "api-integration-fundamentals": {
+    title: "مبانی یکپارچه‌سازی API: راهنمای مبتدیان",
+    category: "توسعه",
+    date: "۱۴۰۳/۰۸/۲۸",
+    readTime: "۷",
+    image: "/assets/main-pic/4section/Systems Integration.jpg",
+    content: `
+# مبانی یکپارچه‌سازی API: راهنمای مبتدیان
+
+APIها پایه و اساس اتصال سیستم‌های مدرن هستند. در این مقاله با مفاهیم پایه آشنا می‌شوید.
+
+## API چیست؟
+
+API یا رابط برنامه‌نویسی کاربردی، به برنامه‌ها اجازه می‌دهد تا با یکدیگر ارتباط برقرار کنند.
+
+## انواع API
+
+انواع مختلفی از API وجود دارد که هر کدام برای کاربردهای خاصی طراحی شده‌اند.
+    `,
+  },
+  "workflow-automation": {
+    title: "خودکارسازی Workflow: از ایده تا اجرا",
+    category: "اتوماسیون",
+    date: "۱۴۰۳/۰۸/۲۰",
+    readTime: "۱۱",
+    image: "/assets/main-pic/4section/Process Automation.jpg",
+    content: `
+# خودکارسازی Workflow: از ایده تا اجرا
+
+یادگیری نحوه طراحی و پیاده‌سازی workflowهای خودکار می‌تواند به طور قابل توجهی کارایی کسب‌وکار شما را افزایش دهد.
+
+## مراحل طراحی Workflow
+
+1. شناسایی فرآیند
+2. تحلیل نیازها
+3. طراحی workflow
+4. پیاده‌سازی
+5. تست و بهبود
+
+## نتیجه‌گیری
+
+با رعایت این مراحل، می‌توانید workflowهای مؤثری برای کسب‌وکار خود طراحی کنید.
+    `,
+  },
+};
+
+// Generate static params for all blog posts
+export async function generateStaticParams() {
+  return Object.keys(blogPosts).map((slug) => ({
+    slug: slug,
+  }));
+}
+
+// Generate metadata for SEO
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }> | { slug: string };
+}) {
+  // Handle both sync and async params
+  const resolvedParams =
+    params instanceof Promise ? await params : await Promise.resolve(params);
+  const post = blogPosts[resolvedParams.slug];
+
+  if (!post) {
+    return {
+      title: "پست یافت نشد",
+    };
+  }
+
+  return {
+    title: post.title,
+    description: post.content.substring(0, 160),
+  };
+}
+
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ slug: string }> | { slug: string };
+}) {
+  // Handle both sync and async params (works with Next.js 13, 14, 15, 16)
+  const resolvedParams =
+    params instanceof Promise ? await params : await Promise.resolve(params);
+  const post = blogPosts[resolvedParams.slug];
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <>
+      {/* Title Section */}
+      <section className="bg-background pt-32 pb-8 md:pt-40 md:pb-12">
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="space-y-6">
+            <Link
+              href="/blog"
+              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors dark:hover:text-[#FCC61D]"
+            >
+              <ArrowRight className="size-4" />
+              بازگشت به وبلاگ
+            </Link>
+
+            <div className="space-y-4">
+              <div>
+                <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary">
+                  {post.category}
+                </span>
+              </div>
+
+              <h1 className="text-3xl font-bold md:text-4xl lg:text-5xl leading-tight tracking-normal">
+                {post.title}
+              </h1>
+
+              <div className="flex flex-wrap items-center gap-6 text-sm text-muted-foreground pt-2">
+                <div className="flex items-center gap-2">
+                  <Calendar className="size-4" />
+                  <span>{post.date}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Clock className="size-4" />
+                  <span>{post.readTime} دقیقه مطالعه</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured Image with 3:2 aspect ratio */}
+      <section className="bg-background pb-12">
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="relative aspect-[3/2] w-full overflow-hidden rounded-2xl border dark:border-transparent shadow-lg">
+            <Image
+              src={post.image}
+              alt={post.title}
+              fill
+              className="object-cover"
+              priority
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 90vw, 896px"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Content Section */}
+      <section className="bg-background pb-12 md:pb-20">
+        <div className="mx-auto max-w-4xl px-6">
+          <article className="prose prose-lg dark:prose-invert max-w-none">
+            <div className="space-y-6 leading-relaxed tracking-normal text-foreground">
+              {(() => {
+                const lines = post.content.split("\n");
+                const elements: JSX.Element[] = [];
+                let listItems: string[] = [];
+                let numberedListItems: string[] = [];
+                let isNumberedList = false;
+
+                lines.forEach((line, index) => {
+                  const trimmedLine = line.trim();
+
+                  // Close lists if empty line
+                  if (!trimmedLine) {
+                    if (listItems.length > 0) {
+                      elements.push(
+                        <ul
+                          key={`list-${index}`}
+                          className="list-disc list-inside ml-6 space-y-2 my-6"
+                        >
+                          {listItems.map((item, i) => (
+                            <li key={i} className="leading-relaxed">
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      );
+                      listItems = [];
+                    }
+                    if (numberedListItems.length > 0) {
+                      elements.push(
+                        <ol
+                          key={`ol-${index}`}
+                          className="list-decimal list-inside ml-6 space-y-2 my-6"
+                        >
+                          {numberedListItems.map((item, i) => (
+                            <li key={i} className="leading-relaxed">
+                              {item}
+                            </li>
+                          ))}
+                        </ol>
+                      );
+                      numberedListItems = [];
+                      isNumberedList = false;
+                    }
+                    return;
+                  }
+
+                  // Process numbered lists
+                  if (/^\d+\.\s/.test(trimmedLine)) {
+                    const content = trimmedLine.replace(/^\d+\.\s/, "");
+                    // Close bullet list if exists
+                    if (listItems.length > 0) {
+                      elements.push(
+                        <ul
+                          key={`list-${index}`}
+                          className="list-disc list-inside ml-6 space-y-2 my-6"
+                        >
+                          {listItems.map((item, i) => (
+                            <li key={i} className="leading-relaxed">
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      );
+                      listItems = [];
+                    }
+                    numberedListItems.push(content);
+                    isNumberedList = true;
+                    return;
+                  }
+
+                  // Process bullet lists
+                  if (
+                    trimmedLine.startsWith("• ") ||
+                    trimmedLine.startsWith("- ") ||
+                    trimmedLine.startsWith("* ")
+                  ) {
+                    const content = trimmedLine.substring(2);
+                    // Close numbered list if exists
+                    if (numberedListItems.length > 0) {
+                      elements.push(
+                        <ol
+                          key={`ol-${index}`}
+                          className="list-decimal list-inside ml-6 space-y-2 my-6"
+                        >
+                          {numberedListItems.map((item, i) => (
+                            <li key={i} className="leading-relaxed">
+                              {item}
+                            </li>
+                          ))}
+                        </ol>
+                      );
+                      numberedListItems = [];
+                      isNumberedList = false;
+                    }
+                    listItems.push(content);
+                    return;
+                  }
+
+                  // Close lists before other content
+                  if (listItems.length > 0) {
+                    elements.push(
+                      <ul
+                        key={`list-${index}`}
+                        className="list-disc list-inside ml-6 space-y-2 my-6"
+                      >
+                        {listItems.map((item, i) => (
+                          <li key={i} className="leading-relaxed">
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    );
+                    listItems = [];
+                  }
+                  if (numberedListItems.length > 0) {
+                    elements.push(
+                      <ol
+                        key={`ol-${index}`}
+                        className="list-decimal list-inside ml-6 space-y-2 my-6"
+                      >
+                        {numberedListItems.map((item, i) => (
+                          <li key={i} className="leading-relaxed">
+                            {item}
+                          </li>
+                        ))}
+                      </ol>
+                    );
+                    numberedListItems = [];
+                    isNumberedList = false;
+                  }
+
+                  // Process headings
+                  if (trimmedLine.startsWith("# ")) {
+                    elements.push(
+                      <h1
+                        key={index}
+                        className="text-3xl md:text-4xl font-bold leading-tight tracking-normal mt-12 mb-6 text-foreground"
+                      >
+                        {trimmedLine.substring(2)}
+                      </h1>
+                    );
+                    return;
+                  }
+                  if (trimmedLine.startsWith("## ")) {
+                    elements.push(
+                      <h2
+                        key={index}
+                        className="text-2xl md:text-3xl font-bold leading-tight tracking-normal mt-10 mb-4 text-foreground"
+                      >
+                        {trimmedLine.substring(3)}
+                      </h2>
+                    );
+                    return;
+                  }
+                  if (trimmedLine.startsWith("### ")) {
+                    elements.push(
+                      <h3
+                        key={index}
+                        className="text-xl md:text-2xl font-bold leading-tight tracking-normal mt-8 mb-3 text-foreground"
+                      >
+                        {trimmedLine.substring(4)}
+                      </h3>
+                    );
+                    return;
+                  }
+
+                  // Process links
+                  if (trimmedLine.startsWith("[") && trimmedLine.includes("](")) {
+                    const match = trimmedLine.match(/\[([^\]]+)\]\(([^)]+)\)/);
+                    if (match) {
+                      elements.push(
+                        <p
+                          key={index}
+                          className="leading-relaxed tracking-normal my-6"
+                        >
+                          <a
+                            href={match[2]}
+                            className="text-primary hover:text-secondary hover:underline transition-colors dark:hover:text-[#FCC61D]"
+                          >
+                            {match[1]}
+                          </a>
+                        </p>
+                      );
+                      return;
+                    }
+                  }
+
+                  // Process regular text
+                  elements.push(
+                    <p
+                      key={index}
+                      className="leading-relaxed tracking-normal my-6 text-foreground"
+                    >
+                      {trimmedLine}
+                    </p>
+                  );
+                });
+
+                // Close any remaining lists
+                if (listItems.length > 0) {
+                  elements.push(
+                    <ul
+                      key={`list-end`}
+                      className="list-disc list-inside ml-6 space-y-2 my-6"
+                    >
+                      {listItems.map((item, i) => (
+                        <li key={i} className="leading-relaxed">
+                          {item}
+                        </li>
+                      ))}
+                    </ul>
+                  );
+                }
+                if (numberedListItems.length > 0) {
+                  elements.push(
+                    <ol
+                      key={`ol-end`}
+                      className="list-decimal list-inside ml-6 space-y-2 my-6"
+                    >
+                      {numberedListItems.map((item, i) => (
+                        <li key={i} className="leading-relaxed">
+                          {item}
+                        </li>
+                      ))}
+                    </ol>
+                  );
+                }
+
+                return elements;
+              })()}
+            </div>
+          </article>
+        </div>
+      </section>
+
+      {/* Back to Blog */}
+      <section className="bg-muted/30 py-12 md:py-20">
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="flex justify-center">
+            <Button asChild size="lg" variant="outline">
+              <Link href="/blog" className="flex items-center gap-2">
+                <ArrowLeft className="size-4" />
+                مشاهده سایر مقالات
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+

app/blog/page.tsx

@@ -0,0 +1,99 @@
+import { BlogCard } from "@/components/blog-card";
+
+// Blog posts data - placeholder content
+const blogPosts = [
+  {
+    slug: "system-integration-guide",
+    title: "راهنمای جامع یکپارچه‌سازی سیستم‌ها: از صفر تا صد",
+    excerpt:
+      "در این مقاله، به بررسی جامع فرآیند یکپارچه‌سازی سیستم‌ها می‌پردازیم. از تعاریف پایه تا روش‌های پیشرفته و بهترین روش‌های پیاده‌سازی را پوشش می‌دهیم.",
+    date: "۱۴۰۳/۰۹/۲۰",
+    readTime: "۱۲",
+    category: "یکپارچه‌سازی",
+    image: "/assets/main-pic/4section/Systems Integration.jpg",
+  },
+  {
+    slug: "automation-best-practices",
+    title: "بهترین روش‌های اتوماسیون فرآیندهای کسب‌وکار",
+    excerpt:
+      "اتوماسیون فرآیندها یکی از کلیدی‌ترین راهکارهای بهبود بهره‌وری در کسب‌وکارها است. در این مقاله با اصول، چالش‌ها و راهکارهای عملی آشنا می‌شوید.",
+    date: "۱۴۰۳/۰۹/۱۵",
+    readTime: "۱۰",
+    category: "اتوماسیون",
+    image: "/assets/main-pic/4section/Process Automation.jpg",
+  },
+  {
+    slug: "social-media-integration",
+    title: "یکپارچه‌سازی شبکه‌های اجتماعی: راهنمای عملی",
+    excerpt:
+      "یادگیری نحوه اتصال و مدیریت پلتفرم‌های مختلف شبکه‌های اجتماعی می‌تواند به شما کمک کند تا ارتباط مؤثرتری با مشتریان خود برقرار کنید.",
+    date: "۱۴۰۳/۰۹/۱۰",
+    readTime: "۸",
+    category: "شبکه‌های اجتماعی",
+    image: "/assets/main-pic/4section/Interaction with Social Networks.jpg",
+  },
+  {
+    slug: "management-dashboards",
+    title: "طراحی و پیاده‌سازی پنل‌های مدیریتی پیشرفته",
+    excerpt:
+      "پنل‌های مدیریتی قدرتمند به شما امکان می‌دهند تا داده‌های خود را به صورت مؤثر مدیریت و تحلیل کنید. در این مقاله ویژگی‌های کلیدی را بررسی می‌کنیم.",
+    date: "۱۴۰۳/۰۹/۰۵",
+    readTime: "۹",
+    category: "مدیریت داده",
+    image: "/assets/main-pic/4section/Powerful Management panels.jpg",
+  },
+  {
+    slug: "api-integration-fundamentals",
+    title: "مبانی یکپارچه‌سازی API: راهنمای مبتدیان",
+    excerpt:
+      "APIها پایه و اساس اتصال سیستم‌های مدرن هستند. در این مقاله با مفاهیم پایه، انواع APIها و نحوه استفاده از آن‌ها آشنا می‌شوید.",
+    date: "۱۴۰۳/۰۸/۲۸",
+    readTime: "۷",
+    category: "توسعه",
+    image: "/assets/main-pic/4section/Systems Integration.jpg",
+  },
+  {
+    slug: "workflow-automation",
+    title: "خودکارسازی Workflow: از ایده تا اجرا",
+    excerpt:
+      "یادگیری نحوه طراحی و پیاده‌سازی workflowهای خودکار می‌تواند به طور قابل توجهی کارایی کسب‌وکار شما را افزایش دهد.",
+    date: "۱۴۰۳/۰۸/۲۰",
+    readTime: "۱۱",
+    category: "اتوماسیون",
+    image: "/assets/main-pic/4section/Process Automation.jpg",
+  },
+];
+
+export default function BlogPage() {
+  return (
+    <>
+      {/* Hero Section */}
+      <section className="bg-background pt-32 pb-20 md:pt-40 md:pb-28">
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="text-center space-y-6">
+            <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
+              وبلاگ
+            </h1>
+            <p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
+              آخرین مقالات، راهنماها و نکات مفید در زمینه یکپارچه‌سازی، اتوماسیون و مدیریت سیستم‌ها
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Blog Posts Grid */}
+      <section className="bg-background pb-20 md:pb-28">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {blogPosts.map((post) => (
+              <BlogCard key={post.slug} {...post} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+
+