added all new chanes

2026-02-05 14:32:31 +03:30
parent 5e6c788b54
commit bde1a8e517
8 changed files with 723 additions and 1 deletions
@@ -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>
+    </>
+  );
+}
+
@@ -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>
+    </>
+  );
+}
+
+
+
@@ -0,0 +1,73 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Calendar, Clock, ArrowLeft } from "lucide-react";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
+
+interface BlogCardProps {
+  slug: string;
+  title: string;
+  excerpt: string;
+  date: string;
+  readTime: string;
+  category: string;
+  image: string;
+}
+
+export function BlogCard({
+  slug,
+  title,
+  excerpt,
+  date,
+  readTime,
+  category,
+  image,
+}: BlogCardProps) {
+  return (
+    <Link href={`/blog/${slug}`} className="group block h-full">
+      <Card className="h-full flex flex-col overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1 dark:border-transparent">
+        {/* Image with 3:2 aspect ratio */}
+        <div className="relative aspect-[3/2] w-full overflow-hidden bg-muted">
+          <Image
+            src={image}
+            alt={title}
+            fill
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+          />
+          {/* Category Badge */}
+          <div className="absolute top-4 right-4">
+            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/90 text-primary-foreground backdrop-blur-sm">
+              {category}
+            </span>
+          </div>
+        </div>
+
+        <CardHeader className="flex-1 flex flex-col">
+          <h3 className="text-xl font-bold leading-tight tracking-normal group-hover:text-primary transition-colors line-clamp-2">
+            {title}
+          </h3>
+        </CardHeader>
+
+        <CardContent className="flex-1">
+          <p className="text-muted-foreground leading-relaxed tracking-normal line-clamp-3 text-sm">
+            {excerpt}
+          </p>
+        </CardContent>
+
+        <CardFooter className="flex items-center justify-between gap-4 text-xs text-muted-foreground border-t pt-4">
+          <div className="flex items-center gap-2">
+            <Calendar className="size-4" />
+            <span>{date}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Clock className="size-4" />
+            <span>{readTime} دقیقه</span>
+          </div>
+        </CardFooter>
+      </Card>
+    </Link>
+  );
+}
+
+
+
@@ -12,6 +12,7 @@ const menuItems = [
    { name: 'درباره ما', href: '/about' },
    { name: 'راه حل‌ها', href: '/solutions' },
    { name: 'قیمت‌گذاری', href: '/pricing' },
+    { name: 'وبلاگ', href: '/blog' },
 ]

 export const HeroHeader = () => {
@@ -26,7 +26,7 @@ export const LogoIcon = ({
 }) => {
  return (
    <Image 
-      src="/assets/feeplogo.svg" 
+      src="/assets/feep-Logo.svg" 
      alt="Logo" 
      width={50} 
      height={50} 
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 50 50">
+  <image id="ChatGPT_Image_Feb_5_2026_02_12_42_PM" data-name="ChatGPT Image Feb 5, 2026, 02_12_42 PM" x="11" y="9" width="30" height="32" xlink:href="data:img/png;base64,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"/>
+</svg>