Before EmDash migration - plain Astro site with 22 pages, unique hero layouts per page, Thai content

src/pages/blog/[slug].astro

@@ -0,0 +1,241 @@
+---
+import Base from '../../layouts/Base.astro';
+import Navigation from '../../components/Navigation.astro';
+import Hero from '../../components/Hero.astro';
+import Footer from '../../components/Footer.astro';
+
+export function getStaticPaths() {
+  const posts = [
+    { slug: "5-ways-ai-increase-sales", title: "5 วิธี AI เพิ่มยอดขาย", image: "/images/blog/5-ways-ai-increase-sales.jpg" },
+    { slug: "ai-content-google-love", title: "AI Content ที่ Google รัก", image: "/images/blog/ai-content-google-love.jpg" },
+    { slug: "ai-for-sme-thailand", title: "AI สำหรับ SME ไทย", image: "/images/blog/ai-for-sme-thailand.jpg" },
+    { slug: "back-office-automation", title: "Back Office Automation", image: "/images/blog/back-office-automation.jpg" },
+    { slug: "chatbot-business-case-study", title: "Chatbot Business Case Study", image: "/images/blog/chatbot-business-case-study.jpg" },
+    { slug: "data-driven-marketing", title: "Data Driven Marketing", image: "/images/blog/data-driven-marketing.jpg" },
+    { slug: "digital-transformation-guide", title: "Digital Transformation Guide", image: "/images/blog/digital-transformation.jpg" },
+    { slug: "marketing-automation-guide", title: "Marketing Automation Guide", image: "/images/blog/marketing-automation-guide.jpg" },
+    { slug: "seo-2026-business-guide", title: "SEO 2026 สำหรับ Business", image: "/images/blog/seo-2026-business-guide.jpg" },
+    { slug: "website-2026-must-have", title: "Website 2026 Must Have", image: "/images/blog/website-2026-must-have.jpg" }
+  ];
+
+  return posts.map(post => ({
+    params: { slug: post.slug },
+    props: { post }
+  }));
+}
+
+const { post } = Astro.props;
+---
+
+<Base title={`${post.title} | MoreminiMore`}>
+  <Navigation />
+
+  <Hero
+    title={post.title}
+    subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
+    badge="บทความ"
+    image={post.image}
+    theme="yellow"
+    showCTA={false}
+  />
+
+  <!-- Article Section -->
+  <section class="section article-section">
+    <div class="container">
+      <div class="article-layout">
+        <article class="article-content">
+          <div class="article-hero">
+            <img src={post.image} alt={post.title} />
+          </div>
+          <div class="article-body">
+            <p class="article-lead">
+              ในยุคที่ AI กลายเป็นเครื่องมือสำคัญในการทำธุรกิจ หลายคนอาจสงสัยว่า AI สามารถช่วยเพิ่มยอดขายได้อย่างไร
+            </p>
+
+            <h2>AI กับการเพิ่มยอดขาย</h2>
+            <p>
+              AI สามารถช่วยเพิ่มยอดขายได้หลายวิธี ไม่ว่าจะเป็นการวิเคราะห์พฤติกรรมลูกค้า การทำ Personalization
+              การ automate การตลาด และการให้บริการลูกค้าตลอด 24 ชั่วโมง
+            </p>
+
+            <h2>วิธีที่ 1: Chatbot ตอบคำถามลูกค้า</h2>
+            <p>
+              Chatbot ที่ขับเคลื่อนด้วย AI สามารถตอบคำถามลูกค้าได้ตลอด 24 ชั่วโมง โดยไม่ต้องมีพนักงาน wake อยู่
+              นอกจากนี้ยังสามารถเก็บข้อมูลลูกค้าและแนะนำสินค้าที่เหมาะสมได้อีกด้วย
+            </p>
+
+            <h2>วิธีที่ 2: วิเคราะห์ข้อมูลลูกค้า</h2>
+            <p>
+              AI สามารถวิเคราะห์ข้อมูลลูกค้าเพื่อหา pattern และ insights ที่ซ่อนอยู่ ทำให้ธุรกิจเข้าใจลูกค้าได้ลึกขึ้น
+              และสามารถนำไปปรับปรุงสินค้าหรือบริการได้ตรงจุด
+            </p>
+
+            <h2>วิธีที่ 3: Personalization</h2>
+            <p>
+              AI สามารถสร้างประสบการณ์ที่ personalized ให้กับลูกค้าแต่ละคน ไม่ว่าจะเป็นการแนะนำสินค้าที่สนใจ
+              การส่ง offer ที่เหมาะสม หรือการปรับ content ให้ตรงกับความต้องการ
+            </p>
+
+            <h2>สรุป</h2>
+            <p>
+              AI สามารถช่วยเพิ่มยอดขายได้อย่างมาก สิ่งสำคัญคือการเลือกใช้ AI ให้เหมาะกับธุรกิจของคุณ
+              และเริ่มต้นจากจุดที่มี impact สูงสุดก่อน
+            </p>
+          </div>
+        </article>
+
+        <aside class="article-sidebar">
+          <div class="sidebar-widget">
+            <h3>บริการที่เกี่ยวข้อง</h3>
+            <ul class="related-services">
+              <li><a href="/services/ai">AI Automation</a></li>
+              <li><a href="/services/marketing">Marketing Automation</a></li>
+              <li><a href="/services/webdev">พัฒนาเว็บไซต์</a></li>
+            </ul>
+          </div>
+
+          <div class="sidebar-widget">
+            <h3>ติดต่อปรึกษา</h3>
+            <p>สนใจใช้ AI ในธุรกิจของคุณ?</p>
+            <a href="/contact" class="btn btn-primary">ปรึกษาฟรี</a>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </section>
+
+  <Footer />
+</Base>
+
+<style>
+  .hero {
+    padding: 140px 0 60px;
+    background: var(--color-black);
+  }
+
+  .back-link {
+    display: inline-block;
+    color: var(--color-primary);
+    font-size: 14px;
+    margin-bottom: 24px;
+    transition: opacity 0.2s;
+  }
+
+  .back-link:hover {
+    opacity: 0.8;
+  }
+
+  .hero-title {
+    font-size: clamp(32px, 5vw, 48px);
+    font-weight: 800;
+    color: var(--color-white);
+    max-width: 800px;
+  }
+
+  .article-section {
+    background: var(--color-white);
+  }
+
+  .article-layout {
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 64px;
+  }
+
+  .article-hero {
+    margin-bottom: 48px;
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  .article-hero img {
+    width: 100%;
+    height: auto;
+  }
+
+  .article-body {
+    max-width: 720px;
+  }
+
+  .article-lead {
+    font-size: 20px;
+    color: var(--color-medium-gray);
+    line-height: 1.8;
+    margin-bottom: 32px;
+    padding-bottom: 32px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .article-body h2 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 40px 0 16px;
+  }
+
+  .article-body p {
+    font-size: 16px;
+    color: var(--color-medium-gray);
+    line-height: 1.8;
+    margin-bottom: 20px;
+  }
+
+  .article-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .sidebar-widget {
+    background: var(--color-light-gray);
+    border-radius: 16px;
+    padding: 28px;
+  }
+
+  .sidebar-widget h3 {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+
+  .related-services {
+    list-style: none;
+    padding: 0;
+  }
+
+  .related-services li {
+    margin-bottom: 12px;
+  }
+
+  .related-services a {
+    color: var(--color-medium-gray);
+    font-size: 14px;
+    transition: color 0.2s;
+  }
+
+  .related-services a:hover {
+    color: var(--color-primary);
+  }
+
+  .sidebar-widget p {
+    font-size: 14px;
+    color: var(--color-medium-gray);
+    margin-bottom: 16px;
+  }
+
+  @media (max-width: 1024px) {
+    .article-layout {
+      grid-template-columns: 1fr;
+    }
+
+    .article-sidebar {
+      order: -1;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .sidebar-widget {
+      flex: 1;
+      min-width: 280px;
+    }
+  }
+</style>

src/pages/blog/index.astro

@@ -0,0 +1,343 @@
+---
+import Base from '../../layouts/Base.astro';
+import Navigation from '../../components/Navigation.astro';
+import Hero from '../../components/Hero.astro';
+import Footer from '../../components/Footer.astro';
+
+const blogPosts = [
+  {
+    slug: "5-ways-ai-increase-sales",
+    title: "5 วิธี AI เพิ่มยอดขาย",
+    excerpt: "เรียนรู้ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายของคุณได้อย่างมีประสิทธิภาพ",
+    image: "/images/blog/5-ways-ai-increase-sales.jpg",
+    date: "2026-01-15",
+    category: "AI"
+  },
+  {
+    slug: "ai-content-google-love",
+    title: "AI Content ที่ Google รัก",
+    excerpt: "วิธีสร้าง AI Content ที่ท z้ both user-friendly และ SEO-friendly",
+    image: "/images/blog/ai-content-google-love.jpg",
+    date: "2026-01-10",
+    category: "AI"
+  },
+  {
+    slug: "ai-for-sme-thailand",
+    title: "AI สำหรับ SME ไทย",
+    excerpt: "คู่มือการใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน",
+    image: "/images/blog/ai-for-sme-thailand.jpg",
+    date: "2026-01-05",
+    category: "AI"
+  },
+  {
+    slug: "back-office-automation",
+    title: "Back Office Automation",
+    excerpt: "ลดต้นทุนและเพิ่มประสิทธิภาพด้วยระบบอัตโนมัติ",
+    image: "/images/blog/back-office-automation.jpg",
+    date: "2025-12-28",
+    category: "Automation"
+  },
+  {
+    slug: "chatbot-business-case-study",
+    title: "Chatbot Business Case Study",
+    excerpt: "กรณีศึกษาการใช้ Chatbot เพื่อเพิ่มยอดขายและลดต้นทุนการให้บริการ",
+    image: "/images/blog/chatbot-business-case-study.jpg",
+    date: "2025-12-20",
+    category: "Chatbot"
+  },
+  {
+    slug: "data-driven-marketing",
+    title: "Data Driven Marketing",
+    excerpt: "การตลาดที่ขับเคลื่อนด้วยข้อมูลเพื่อผลลัพธ์ที่ดีที่สุด",
+    image: "/images/blog/data-driven-marketing.jpg",
+    date: "2025-12-15",
+    category: "Marketing"
+  },
+  {
+    slug: "digital-transformation-guide",
+    title: "Digital Transformation Guide",
+    excerpt: "คู่มือฉบับสมบูรณ์สำหรับการ transform ธุรกิจของคุณสู่ดิจิทัล",
+    image: "/images/blog/digital-transformation.jpg",
+    date: "2025-12-10",
+    category: "Business"
+  },
+  {
+    slug: "marketing-automation-guide",
+    title: "Marketing Automation Guide",
+    excerpt: "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้น",
+    image: "/images/blog/marketing-automation-guide.jpg",
+    date: "2025-12-05",
+    category: "Marketing"
+  },
+  {
+    slug: "seo-2026-business-guide",
+    title: "SEO 2026 Business Guide",
+    excerpt: "การทำ SEO สำหรับธุรกิจในยุค 2026 ต้องรู้อะไรบ้าง",
+    image: "/images/blog/seo-2026-business-guide.jpg",
+    date: "2025-11-28",
+    category: "SEO"
+  },
+  {
+    slug: "website-2026-must-have",
+    title: "Website 2026 Must Have",
+    excerpt: "ฟีเจอร์ที่เว็บไซต์ต้องมีในปี 2026",
+    image: "/images/blog/website-2026-must-have.jpg",
+    date: "2025-11-20",
+    category: "Web Dev"
+  }
+];
+
+const categories = ["ทั้งหมด", "AI", "Marketing", "Automation", "SEO", "Web Dev", "Business", "Chatbot"];
+
+function formatDate(dateStr: string) {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' });
+}
+---
+
+<Base title="บทความ | MoreminiMore">
+  <Navigation />
+
+  <!-- Hero Section -->
+  <Hero
+    title="ความรู้ด้านดิจิทัล"
+    subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
+    badge="บทความ"
+    image="/images/hero/blog-hero.jpg"
+    theme="yellow"
+    showCTA={false}
+    variant="centered"
+    size="compact"
+  />
+
+  <!-- Blog Section -->
+  <section class="section blog-section">
+    <div class="container">
+      <!-- Featured Post -->
+      <div class="featured-post">
+        <a href={`/blog/${blogPosts[0].slug}`} class="featured-card">
+          <div class="featured-image">
+            <img src={blogPosts[0].image} alt={blogPosts[0].title} />
+          </div>
+          <div class="featured-content">
+            <span class="category-badge">{blogPosts[0].category}</span>
+            <h2 class="featured-title">{blogPosts[0].title}</h2>
+            <p class="featured-excerpt">{blogPosts[0].excerpt}</p>
+            <span class="read-more">อ่านต่อ →</span>
+          </div>
+        </a>
+      </div>
+
+      <!-- Blog Grid -->
+      <div class="blog-grid">
+        {blogPosts.slice(1).map((post) => (
+          <a href={`/blog/${post.slug}`} class="blog-card card">
+            <div class="blog-image">
+              <img src={post.image} alt={post.title} loading="lazy" />
+            </div>
+            <div class="blog-content">
+              <span class="category-badge">{post.category}</span>
+              <h3 class="blog-title">{post.title}</h3>
+              <p class="blog-excerpt">{post.excerpt}</p>
+              <span class="blog-date">{formatDate(post.date)}</span>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="section section-primary cta-section">
+    <div class="container">
+      <div class="cta-content">
+        <h2 class="cta-title">ต้องการความช่วยเหลือ?</h2>
+        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และให้คำแนะนำ</p>
+        <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
+      </div>
+    </div>
+  </section>
+
+  <Footer />
+</Base>
+
+<style>
+  
+  .blog-section {
+    background: var(--color-white);
+  }
+
+  .featured-post {
+    margin-bottom: 60px;
+  }
+
+  .featured-card {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr;
+    gap: 48px;
+    background: var(--color-light-gray);
+    border-radius: 24px;
+    overflow: hidden;
+  }
+
+  .featured-image {
+    aspect-ratio: 16/10;
+    overflow: hidden;
+  }
+
+  .featured-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s;
+  }
+
+  .featured-card:hover .featured-image img {
+    transform: scale(1.05);
+  }
+
+  .featured-content {
+    padding: 48px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .category-badge {
+    display: inline-block;
+    background: var(--color-primary);
+    color: var(--color-black);
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    align-self: flex-start;
+    margin-bottom: 16px;
+  }
+
+  .featured-title {
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    line-height: 1.3;
+  }
+
+  .featured-excerpt {
+    font-size: 16px;
+    color: var(--color-medium-gray);
+    line-height: 1.7;
+    margin-bottom: 24px;
+  }
+
+  .read-more {
+    color: var(--color-primary);
+    font-weight: 600;
+    font-size: 16px;
+  }
+
+  .blog-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
+  }
+
+  .blog-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .blog-image {
+    aspect-ratio: 16/10;
+    overflow: hidden;
+  }
+
+  .blog-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s;
+  }
+
+  .blog-card:hover .blog-image img {
+    transform: scale(1.05);
+  }
+
+  .blog-content {
+    padding: 24px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .blog-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    line-height: 1.4;
+  }
+
+  .blog-excerpt {
+    font-size: 14px;
+    color: var(--color-medium-gray);
+    line-height: 1.6;
+    margin-bottom: 16px;
+    flex-grow: 1;
+  }
+
+  .blog-date {
+    font-size: 12px;
+    color: #999;
+  }
+
+  .cta-section {
+    padding: 100px 0;
+  }
+
+  .cta-content {
+    text-align: center;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .cta-title {
+    font-size: clamp(28px, 4vw, 40px);
+    font-weight: 800;
+    margin-bottom: 16px;
+  }
+
+  .cta-desc {
+    font-size: 18px;
+    margin-bottom: 32px;
+    opacity: 0.8;
+  }
+
+  .btn-lg {
+    padding: 18px 40px;
+    font-size: 16px;
+  }
+
+  @media (max-width: 1024px) {
+    .featured-card {
+      grid-template-columns: 1fr;
+    }
+
+    .blog-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .blog-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .featured-content {
+      padding: 32px;
+    }
+
+    .featured-title {
+      font-size: 24px;
+    }
+  }
+</style>