---
import Layout from '../../layouts/Layout.astro'
---

<Layout title="เรื่องน่ารู้ SEO | MoreminiMore">
  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
        เรื่องน่ารู้ SEO
      </h1>
      <p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
        บทความและเกร็ดความรู้เกี่ยวกับ SEO และการตลาดดิจิตอล
      </p>
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
        <!-- Blog Post 1 -->
        <article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
          <div class="p-6">
            <div class="text-sm text-primary font-bold mb-2">SEO</div>
            <h2 class="text-xl font-bold mb-3 hover:text-primary transition">
              <a href="/core-web-vitals-ux-google-ranking-factors-4">
                Core Web Vitals และ UX ปัจจัยการจัดอันดับ Google
              </a>
            </h2>
            <p class="text-gray-600 text-sm mb-4">
              ทำความเข้าใจ Core Web Vitals และ User Experience ที่มีผลต่อการจัดอันดับเว็บไซต์บน Google
            </p>
            <a href="/core-web-vitals-ux-google-ranking-factors-4" class="text-primary font-medium hover:underline">
              อ่านเพิ่มเติม →
            </a>
          </div>
        </article>

        <!-- Blog Post 2 -->
        <article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
          <div class="p-6">
            <div class="text-sm text-primary font-bold mb-2">SEO</div>
            <h2 class="text-xl font-bold mb-3 hover:text-primary transition">
              <a href="/alt-text-seo-google-ranking-factors-3">
                ALT Text กับ SEO ปัจจัยที่ 3 ของ Google
              </a>
            </h2>
            <p class="text-gray-600 text-sm mb-4">
              การเขียน ALT Text สำหรับรูปภาพ ช่วย SEO อย่างไร และทำไม Google ให้ความสำคัญ
            </p>
            <a href="/alt-text-seo-google-ranking-factors-3" class="text-primary font-medium hover:underline">
              อ่านเพิ่มเติม →
            </a>
          </div>
        </article>

        <!-- Blog Post 3 -->
        <article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
          <div class="p-6">
            <div class="text-sm text-primary font-bold mb-2">SEO</div>
            <h2 class="text-xl font-bold mb-3 hover:text-primary transition">
              <a href="/8-seo-google-ranking-factors-2">
                8 ปัจจัย SEO สำหรับ Google Ranking
              </a>
            </h2>
            <p class="text-gray-600 text-sm mb-4">
              8 ปัจจัยสำคัญที่ Google ใช้ในการจัดอันดับเว็บไซต์ คุณทำครบหรือยัง?
            </p>
            <a href="/8-seo-google-ranking-factors-2" class="text-primary font-medium hover:underline">
              อ่านเพิ่มเติม →
            </a>
          </div>
        </article>

        <!-- Blog Post 4 -->
        <article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
          <div class="p-6">
            <div class="text-sm text-primary font-bold mb-2">SEO</div>
            <h2 class="text-xl font-bold mb-3 hover:text-primary transition">
              <a href="/google-ranking-factors-1">
                Google Ranking Factors พื้นฐาน SEO ที่ต้องรู้
              </a>
            </h2>
            <p class="text-gray-600 text-sm mb-4">
              เรียนรู้ปัจจัยพื้นฐานที่ Google ใช้ในการจัดอันดับเว็บไซต์ เริ่มต้นทำ SEO ให้ถูกต้อง
            </p>
            <a href="/google-ranking-factors-1" class="text-primary font-medium hover:underline">
              อ่านเพิ่มเติม →
            </a>
          </div>
        </article>
      </div>

      <div class="text-center mt-12">
        <p class="text-gray-500">
          กำลังอัปเดตบทความใหม่เร็ว ๆ นี้...
        </p>
      </div>
    </div>
  </section>
</Layout>
