<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مقالات - سایت من</title>
  <link href="/css/output.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 dark:bg-black transition-colors duration-300 pt-24 md:pt-0 pb-20 md:pb-0">
  <%- include('../components/header') %>

  <main class="py-16">
    <div class="container mx-auto px-4 mt-6 mb-6">
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">مقالات</h1>
        <p class="text-xl text-gray-600 dark:text-gray-400">آخرین مقالات و نوشته‌های تخصصی</p>
      </div>

      <!-- Featured Article -->
      <div class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 mb-12">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
          <div>
            <img src="https://picsum.photos/600/400?random=424" alt="مقاله ویژه" class="w-full h-64 object-cover rounded-lg">
          </div>
          <div>
            <span class="inline-block bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400 px-3 py-1 rounded-full text-sm font-medium mb-4">
              ویژه
            </span>
            <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-4">راهنمای کامل شروع کسب‌وکار آنلاین</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
              در این مقاله جامع، همه‌چیز را که برای شروع یک کسب‌وکار آنلاین موفق نیاز دارید بیاموزید. از ایده تا اجرا، تمام مراحل را پوشش می‌دهیم.
            </p>
            <div class="flex items-center space-x-4 space-x-reverse text-sm text-gray-500 dark:text-gray-400 mb-6">
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-calendar text-primary-500"></i>
                <span>۱۵ مهر ۱۴۰۳</span>
              </div>
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-user text-primary-500"></i>
                <span>علی احمدی</span>
              </div>
            </div>
            <a href="#" class="btn-primary hover:shadow-lg dark:hover:shadow-glow">ادامه مطالعه</a>
          </div>
        </div>
      </div>

      <!-- Articles Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Article 1 -->
        <article class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 group hover:shadow-xl transition-shadow">
          <img src="https://picsum.photos/400/250?random=962" alt="مقاله" class="w-full h-48 object-cover rounded-lg mb-4">
          <div class="space-y-3">
            <span class="inline-block bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 px-3 py-1 rounded-full text-sm font-medium">
              فناوری
            </span>
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
              نوآوری‌های جدید در هوش مصنوعی
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              بررسی آخرین پیشرفت‌ها در زمینه هوش مصنوعی و تأثیرات آن بر آینده صنعت...
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-calendar text-primary-500"></i>
                <span>۱۰ مهر ۱۴۰۳</span>
              </div>
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-eye text-primary-500"></i>
                <span>۱۲۰</span>
              </div>
            </div>
          </div>
        </article>

        <!-- Article 2 -->
        <article class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 group hover:shadow-xl transition-shadow">
          <img src="https://picsum.photos/400/250?random=626" alt="مقاله" class="w-full h-48 object-cover rounded-lg mb-4">
          <div class="space-y-3">
            <span class="inline-block bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400 px-3 py-1 rounded-full text-sm font-medium">
              کسب‌وکار
            </span>
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
              استراتژی‌های بازاریابی دیجیتال
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              چگونه با استفاده از روش‌های مدرن بازاریابی دیجیتال، فروش خود را افزایش دهید...
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-calendar text-primary-500"></i>
                <span>۸ مهر ۱۴۰۳</span>
              </div>
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-eye text-primary-500"></i>
                <span>۹۵</span>
              </div>
            </div>
          </div>
        </article>

        <!-- Article 3 -->
        <article class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 group hover:shadow-xl transition-shadow">
          <img src="https://picsum.photos/400/250?random=580" alt="مقاله" class="w-full h-48 object-cover rounded-lg mb-4">
          <div class="space-y-3">
            <span class="inline-block bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400 px-3 py-1 rounded-full text-sm font-medium">
              طراحی
            </span>
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
              اصول طراحی رابط کاربری مدرن
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              آشنایی با جدیدترین ترندها و اصول طراحی رابط کاربری که تجربه کاربری بهتری ایجاد می‌کند...
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-calendar text-primary-500"></i>
                <span>۵ مهر ۱۴۰۳</span>
              </div>
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-eye text-primary-500"></i>
                <span>۸۷</span>
              </div>
            </div>
          </div>
        </article>

        <!-- More Articles -->
        <article class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 group hover:shadow-xl transition-shadow">
          <img src="https://picsum.photos/400/250?random=787" alt="مقاله" class="w-full h-48 object-cover rounded-lg mb-4">
          <div class="space-y-3">
            <span class="inline-block bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400 px-3 py-1 rounded-full text-sm font-medium">
              آموزش
            </span>
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
              راهنمای کامل یادگیری برنامه‌نویسی
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              از کجا شروع کنید و چه مسیری را برای یادگیری برنامه‌نویسی انتخاب کنید...
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-calendar text-primary-500"></i>
                <span>۲ مهر ۱۴۰۳</span>
              </div>
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-eye text-primary-500"></i>
                <span>۱۵۰</span>
              </div>
            </div>
          </div>
        </article>

        <article class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 group hover:shadow-xl transition-shadow">
          <img src="https://picsum.photos/400/250?random=709" alt="مقاله" class="w-full h-48 object-cover rounded-lg mb-4">
          <div class="space-y-3">
            <span class="inline-block bg-cyan-100 dark:bg-cyan-900 text-cyan-600 dark:text-cyan-400 px-3 py-1 rounded-full text-sm font-medium">
              سلامت
            </span>
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
              نکات مهم برای سلامت در محیط کار
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              چگونه در محیط کار سالم بمانید و از آسیب‌های ناشی از کار طولانی مدت جلوگیری کنید...
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-calendar text-primary-500"></i>
                <span>۳۰ شهریور ۱۴۰۳</span>
              </div>
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-eye text-primary-500"></i>
                <span>۷۳</span>
              </div>
            </div>
          </div>
        </article>

        <article class="card hover:shadow-xl dark:hover:shadow-dark-xl transition-all duration-300 group hover:shadow-xl transition-shadow">
          <img src="https://picsum.photos/400/250?random=962" alt="مقاله" class="w-full h-48 object-cover rounded-lg mb-4">
          <div class="space-y-3">
            <span class="inline-block bg-pink-100 dark:bg-pink-900 text-pink-600 dark:text-pink-400 px-3 py-1 rounded-full text-sm font-medium">
              سرگرمی
            </span>
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
              بازی‌های جدید سال ۲۰۲۴
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
              معرفی بهترین بازی‌های منتشر شده در سال جاری و آنچه که در انتظار آن‌هاست...
            </p>
            <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-calendar text-primary-500"></i>
                <span>۲۸ شهریور ۱۴۰۳</span>
              </div>
              <div class="flex items-center space-x-2 space-x-reverse">
                <i class="fas fa-eye text-primary-500"></i>
                <span>۱۱۲</span>
              </div>
            </div>
          </div>
        </article>
      </div>

      <!-- Pagination -->
      <div class="flex justify-center mt-12">
        <nav class="flex space-x-2 space-x-reverse">
          <button class="px-4 py-2 text-gray-500 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
            قبلی
          </button>
          <button class="px-4 py-2 bg-primary-600 text-white rounded-lg">1</button>
          <button class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">2</button>
          <button class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">3</button>
          <button class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
            بعدی
          </button>
        </nav>
      </div>
    </div>
  </main>

  <%- include('../components/footer') %>

  <script src="/js/theme.js"></script>
  <script src="/js/header.js"></script>
</body>
</html>