feat: อัพเดทเว็บไซต์ใหม่ - 5 บริการหลัก + 10 บทความ SEO

- เพิ่มบริการใหม่ 5 ด้าน: AI-Enhanced Website, Marketing Automation, SEO + AI Content, Tech Consult, AI Automation
- ลบบริการเดิมที่ไม่ใช้: AI Strategy, AI Training, AI Analytics
- สร้าง blog ใหม่ 10 บทความ พร้อม SEO/AEO optimization
- เพิ่ม blog listing page และ blog detail template
- อัพเดท layout, navigation, footer ให้สอดคล้องกับบริการใหม่
- เพิ่ม LINE contact icon (พร้อม placeholder link)
- แก้ CSS bugs: text contrast บน gradient backgrounds
- ปรับปรุง meta tags และ Schema.org structured data
- ย้ายจาก /category/seo เป็น /blog

Services:
- /web-development
- /marketing-automation
- /seo-content-system
- /tech-consult
- /ai-automation

Blog: /blog (10 articles)

src/pages/blog/index.astro

@@ -0,0 +1,259 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map(post => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const allPosts = await getCollection('blog');
+const sortedPosts = allPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+const categories = [...new Set(allPosts.map(post => post.data.category))];
+const tags = [...new Set(allPosts.flatMap(post => post.data.tags))];
+
+const formatDate = (date: Date) => {
+  return date.toLocaleDateString('th-TH', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+---
+
+<Layout 
+  title="บล็อก | MoreMiniMore - ความรู้เกี่ยวกับ AI และการตลาดดิจิทัล"
+  description="อ่านบทความและความรู้เกี่ยวกับ AI, Marketing Automation, SEO และ Digital Transformation สำหรับธุรกิจ SMEs ไทย"
+>
+  <section class="py-16 bg-gray-light">
+    <div class="container mx-auto px-4">
+      <div class="max-w-4xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
+          บล็อก & ความรู้
+        </h1>
+        <p class="text-xl text-gray-600 mb-8">
+          ความรู้เกี่ยวกับ AI, การตลาดดิจิทัล และการเปลี่ยนแปลงทางธุรกิจสำหรับ SMEs ไทย
+        </p>
+        
+        <!-- Search Box -->
+        <div class="max-w-2xl mx-auto">
+          <div class="relative">
+            <input 
+              type="text" 
+              id="blog-search" 
+              placeholder="ค้นหาบทความ..." 
+              class="w-full px-6 py-4 pr-12 rounded-full border-2 border-gray-200 focus:border-primary focus:outline-none text-lg"
+            />
+            <button class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary transition">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Category Filter -->
+  <section class="py-8 bg-white border-b">
+    <div class="container mx-auto px-4">
+      <div class="flex flex-wrap gap-3 justify-center" id="category-filters">
+        <button 
+          class="category-btn active px-5 py-2 rounded-full bg-primary text-white font-medium transition hover:bg-primary/90"
+          data-category="all"
+        >
+          ทั้งหมด
+        </button>
+        {categories.map(category => (
+          <button 
+            class="category-btn px-5 py-2 rounded-full bg-gray-100 text-gray-700 font-medium transition hover:bg-primary hover:text-white"
+            data-category={category}
+          >
+            {category}
+          </button>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- Blog Grid -->
+  <section class="py-16 bg-gray-light">
+    <div class="container mx-auto px-4">
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="blog-grid">
+        {sortedPosts.map(post => (
+          <article class="blog-card bg-white rounded-2xl overflow-hidden shadow-md card-hover" data-category={post.data.category} data-tags={JSON.stringify(post.data.tags)}>
+            <div class="h-48 gradient-ai flex items-center justify-center">
+              <div class="text-6xl">📝</div>
+            </div>
+            <div class="p-6">
+              <div class="flex items-center gap-2 mb-3">
+                <span class="text-sm text-accent-blue font-bold">{post.data.category}</span>
+                <span class="text-gray-300">|</span>
+                <span class="text-sm text-gray-500">{formatDate(post.data.pubDate)}</span>
+              </div>
+              <h2 class="text-xl font-bold mb-3 line-clamp-2 hover:text-accent-blue transition">
+                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+              </h2>
+              <p class="text-gray-600 mb-4 line-clamp-3">
+                {post.data.description}
+              </p>
+              <div class="flex flex-wrap gap-2 mb-4">
+                {post.data.tags.slice(0, 3).map(tag => (
+                  <span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">#{tag}</span>
+                ))}
+              </div>
+              <a href={`/blog/${post.slug}`} class="text-accent-blue font-medium hover:underline inline-flex items-center gap-2">
+                อ่านเพิ่มเติม →
+              </a>
+            </div>
+          </article>
+        ))}
+      </div>
+      
+      <!-- No Results Message -->
+      <div id="no-results" class="hidden text-center py-16">
+        <div class="text-6xl mb-4">🔍</div>
+        <h3 class="text-2xl font-bold mb-2">ไม่พบบทความที่ค้นหา</h3>
+        <p class="text-gray-600">ลองค้นหาด้วยคำอื่นหรือเลือกหมวดหมู่อื่น</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Tags Cloud -->
+  <section class="py-12 bg-white">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h3 class="text-2xl font-bold mb-6 text-center">หัวข้อที่น่าสนใจ</h3>
+      <div class="flex flex-wrap gap-3 justify-center">
+        {tags.map(tag => (
+          <a href={`/blog?tag=${tag}`} class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 hover:bg-primary hover:text-white transition">
+            #{tag}
+          </a>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="py-16 gradient-ai text-white">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6">
+        พร้อมเริ่มต้น Digital Transformation แล้วหรือยัง?
+      </h2>
+      <p class="text-xl mb-8 max-w-2xl mx-auto">
+        ปรึกษาผู้เชี่ยวชาญของเราฟรี เราพร้อมช่วยคุณวางกลยุทธ์ที่เหมาะกับธุรกิจ
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="/contact-us" class="bg-white text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-lg inline-flex items-center justify-center gap-2">
+          📞 ติดต่อเรา
+        </a>
+        <a href="/ai-strategy-consult" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-primary transition inline-flex items-center justify-center gap-2">
+          ปรึกษาผู้เชี่ยวชาญ
+        </a>
+      </div>
+    </div>
+  </section>
+</Layout>
+
+<script>
+  // Category Filter
+  const categoryBtns = document.querySelectorAll('.category-btn');
+  const blogCards = document.querySelectorAll('.blog-card');
+  const noResults = document.getElementById('no-results');
+  const blogGrid = document.getElementById('blog-grid');
+  
+  categoryBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      // Update active state
+      categoryBtns.forEach(b => {
+        b.classList.remove('active', 'bg-primary', 'text-white');
+        b.classList.add('bg-gray-100', 'text-gray-700');
+      });
+      btn.classList.add('active', 'bg-primary', 'text-white');
+      btn.classList.remove('bg-gray-100', 'text-gray-700');
+      
+      const category = btn.getAttribute('data-category');
+      
+      // Filter cards
+      let visibleCount = 0;
+      blogCards.forEach(card => {
+        const cardCategory = card.getAttribute('data-category');
+        if (category === 'all' || cardCategory === category) {
+          (card as HTMLElement).style.display = 'block';
+          visibleCount++;
+        } else {
+          (card as HTMLElement).style.display = 'none';
+        }
+      });
+      
+      // Show/hide no results message
+      if (visibleCount === 0) {
+        noResults?.classList.remove('hidden');
+        blogGrid?.classList.add('hidden');
+      } else {
+        noResults?.classList.add('hidden');
+        blogGrid?.classList.remove('hidden');
+      }
+    });
+  });
+  
+  // Search Functionality
+  const searchInput = document.getElementById('blog-search');
+  searchInput?.addEventListener('input', (e) => {
+    const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+    
+    let visibleCount = 0;
+    blogCards.forEach(card => {
+      const title = card.querySelector('h2')?.textContent?.toLowerCase() || '';
+      const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
+      const tags = card.getAttribute('data-tags')?.toLowerCase() || '';
+      
+      if (title.includes(searchTerm) || description.includes(searchTerm) || tags.includes(searchTerm)) {
+        (card as HTMLElement).style.display = 'block';
+        visibleCount++;
+      } else {
+        (card as HTMLElement).style.display = 'none';
+      }
+    });
+    
+    // Show/hide no results message
+    if (visibleCount === 0) {
+      noResults?.classList.remove('hidden');
+      blogGrid?.classList.add('hidden');
+    } else {
+      noResults?.classList.add('hidden');
+      blogGrid?.classList.remove('hidden');
+    }
+  });
+  
+  // URL parameter for tag filter
+  const urlParams = new URLSearchParams(window.location.search);
+  const tagParam = urlParams.get('tag');
+  if (tagParam) {
+    const searchInput = document.getElementById('blog-search') as HTMLInputElement;
+    if (searchInput) {
+      searchInput.value = tagParam;
+      searchInput.dispatchEvent(new Event('input'));
+    }
+  }
+</script>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>