fix(home): service tile colors mint · purple · coral · purple-soft

Before: .tile-link-overlay contained the .mega-cta text. Both overlay and .mega-objective were positioned at the bottom of the tile, causing visual overlap.
After: .mega-cta is a normal-flow <span> in tile-body (pushed to bottom via margin-top: auto). .tile-link-overlay is now an empty click target (no inner content, no padding, no flex).

BLOG-TOPICS.md

@@ -0,0 +1,111 @@
+# Blog Topics — 5 เรื่องที่ควรเขียน
+
+> เรียงตามลำดับที่ควรเขียน เริ่มจากเรื่องที่ "อยู่ในใจลูกค้ามากที่สุด" ก่อน
+> แต่ละเรื่องมี: ที่มา (จากคำตอบข้อไหน) + โครงสร้าง outline + เหตุผลที่ควรเขียน
+
+---
+
+## 1. "SME ไทยเสียเงินหลายแสนกับโฆษณาที่ไม่มีใครซื้อ — เรื่องจริงจากคนทำ"
+
+**ที่มา:** A6 (SME ไทยทำพลาดเรื่องเดิมซ้ำ ๆ) + เคส Dataroot + เคสเกือบพังเรื่องกลุ่มเป้าหมาย
+
+**ทำไมต้องเขียน:** คือเคส flagship ของเรา เขียนครั้งเดียวใช้ได้หลายที่ — เว็บ, LinkedIn, ใบเสนอราคา
+
+**Outline:**
+- เริ่มจากเคส Dataroot: คลิกเยอะ ยอดไม่ขยับ งบหลายแสน/เดือน
+- ดูสถิติย้อนหลัง → เจอว่าคลิกมาจากกลุ่มที่ไม่ซื้อ
+- ปรับ 3 อย่าง: ตัดกลุ่ม, ปรับ Creative, ขยายช่องทาง
+- ผลลัพธ์ (Impression ↑373%, Click ↑114%, Ad spend ↓28%)
+- เคสเกือบพัง: ยิงไปกลุ่ม "คนสนใจเรื่องเงิน" → มีแต่คนมาขอกู้
+- บทเรียน: ดู "คนที่จะซื้อ" ไม่ใช่ "คนที่คลิกง่าย"
+
+**Length:** 1,500-2,000 คำ
+
+---
+
+## 2. "AI ไม่ได้แพงเสมอไป — งาน 80% ใช้ Model ถูกก็พอ ประหยัดได้ครึ่ง"
+
+**ที่มา:** D15 (เรื่องที่ไม่เห็นด้วย) + A6 (SME ใช้ AI ผิดแบบ) + คำตอบ B7 (AI Consult)
+
+**ทำไมต้องเขียน:** ลูกค้า SME ส่วนใหญ่กลัว "AI แพง" — ถ้าเขียนเรื่องนี้ได้ดี คือ lead magnet เลย
+
+**Outline:**
+- เปิดด้วย: "ถ้าคุณจ่าย GPT-4 ทุกครั้ง คุณกำลังเปลืองเงินเปล่า ๆ"
+- งานแบ่งเป็น 3 ระดับ: งานทั่วไป, งานวิเคราะห์, งานเฉพาะทาง
+- ตารางเปรียบเทียบ: งาน X ใช้ Model Y คุณภาพ Z ราคาเท่าไหร่
+- ตัวอย่างจริง: ลูกค้าเคยใช้ GPT-4 ทุกงาน → ลดเหลือ GPT-4o-mini + Sonnet + Local LLM → ประหยัด 60%
+- Local LLM คืออะไร + เหมาะกับงานแบบไหน (PDPA, ความลับ)
+- วิธีเลือก Model: ถ้างานเป็น "ตอบคำถาม" → ใช้ของถูก / ถ้าเป็น "วิเคราะห์ข้อมูล" → ใช้ของกลาง
+
+**Length:** 1,500-2,000 คำ
+
+---
+
+## 3. "เว็บสวย vs เว็บขายได้ — ทำไมหลายเว็บที่ดูรก ๆ ถึงขายดีกว่า"
+
+**ที่มา:** D15 (เว็บสวยไม่ได้แปลว่าขายได้)
+
+**ทำไมต้องเขียน:** ลูกค้า SME ส่วนใหญ่ตัดสิน agency ด้วย "ผลงานสวยไหม" — ถ้าเขียนเรื่องนี้ได้ ลูกค้าจะเริ่มคิดใหม่
+
+**Outline:**
+- ตัวอย่าง: เว็บ A ดูหรูหรา แต่ Conversion 0.5% / เว็บ B ดูเก่า แต่ Conversion 3.2%
+- ทำไม: เว็บสวยเน้น "ภาพลักษณ์" / เว็บขายได้เน้น "ลูกค้าทำอะไรได้"
+- หลักการเว็บที่ขายได้: Clear CTA, Trust signals, Friction ต่ำ, Mobile-first
+- เคสของเรา: เว็บที่ดูไม่หรูแต่ขายได้ (Baofuling, Tuanthong, Jet Industries)
+- "เว็บสวย vs เว็บขายได้ ไม่ได้แยกกันเสมอ — แต่ถ้าต้องเลือก เราเลือกขายได้"
+
+**Length:** 1,200-1,500 คำ
+
+---
+
+## 4. "5 ค่าใช้จ่ายแฝงที่ทำให้ร้านออนไลน์ขาดทุน — แม้ยอดขายจะเติบโต"
+
+**ที่มา:** เคสเกือบพังเรื่อง Platform fees + A6 (SME ทดลองตลาดใหม่โดยไม่คำนวณค่าใช้จ่ายแฝง)
+
+**ทำไมต้องเขียน:** ลูกค้า E-commerce เจอปัญหานี้เยอะมาก แต่ไม่ค่อยมีใครเขียนเรื่องนี้
+
+**Outline:**
+- ค่าใช้จ่ายแฝง 5 อย่าง: ค่าธรรมเนียม Platform / ค่าจัดส่งที่แท้จริง / ค่าคืนสินค้า / ส่วนลดที่ไม่ได้คิด / ค่าโฆษณาต่อ Lead
+- เคสจริง: ร้านค้าออนไลน์ขายดี ยอดเดือนละ 500,000 แต่เหลือกำไร 15,000
+- วิธีคำนวณ: ทำ Spreadsheet ต้นทุนแท้จริง (เอา Template ไปด้วย)
+- วิธีแก้: ปรับราคา + เพิ่มช่องทางขายตรง
+- ผลลัพธ์: ลูกค้าเราเพิ่มกำไรต่อชิ้น 35% ใน 2 เดือน
+
+**Length:** 1,500 คำ
+
+---
+
+## 5. "GEO คืออะไร และทำไม SEO แบบเดิมอาจไม่พอในยุค ChatGPT"
+
+**ที่มา:** A6 (รูปแบบการตลาดใหม่ ๆ ที่จะเปลี่ยนไปในยุค AI) + C13 (กำลังเรียนรู้ SEO กับ GEO)
+
+**ทำไมต้องเขียน:** ยังเป็นเรื่องใหม่สำหรับ SME ส่วนใหญ่ ถ้าเขียนก่อน คุณจะเป็น authority ในเรื่องนี้
+
+**Outline:**
+- เปิดด้วย: "ปี 2024 คนเริ่มถาม ChatGPT แทน Google — เว็บคุณอยู่ในคำตอบไหม?"
+- SEO vs GEO: ต่างกันยังไง
+- ตัวอย่าง: ถาม ChatGPT "ที่ปรึกษา AI ในไทย" — ได้คำตอบแบบไหน เว็บไหนถูกอ้างอิง
+- 3 สิ่งที่ต้องทำเพื่อให้ AI อ้างอิงเว็บคุณ: โครงสร้างข้อมูล, Authority, Mention ในแหล่งอื่น
+- เคสของเรา: ทำให้ลูกค้าโผล่ใน ChatGPT/Perplexity
+- 2026 คือปีที่ GEO สำคัญกว่า SEO — เตรียมตัวยังไง
+
+**Length:** 1,500-2,000 คำ
+
+---
+
+## เขียนยังไงให้ได้ผล
+
+**Tone:** ตรง ๆ มีตัวเลข เล่าเคสจริง ไม่ขายของ — เหมือนคุยกับเพื่อนที่เป็น SME
+
+**โครงสร้าง:** ปัญหา → ตัวอย่างจริง → วิธีแก้ → ผลลัพธ์ (ถ้ามี) → บทเรียน/ข้อคิด
+
+**สิ่งที่ไม่ควรทำ:**
+- ไม่ขายบริการตรง ๆ ใน blog — ให้คนอ่านแล้วเกิดความเชื่อถือ แล้วเขาจะกลับมาเอง
+- ไม่ใช้ "ครบวงจร ทันสมัย" — ใช้ตัวเลขแทน
+- ไม่อ้างอิง source ที่ไม่มีจริง
+
+**SEO:** แต่ละ blog ควรมี:
+- Title ที่มีคีย์เวิร์ด (เช่น "AI ไม่ได้แพงเสมอไป")
+- Meta description ที่ดึงดูด
+- Internal link ไปหน้า services/portfolio
+- CTA ท้ายบทความ: "อยากให้ช่วยดูเคสของคุณ? นัดคุย 30 นาทีฟรี"

BRAND-VOICE.md

@@ -0,0 +1,80 @@
+# Brand Voice — MoreminiMore
+
+> ใช้เป็นกระดาษทดเวลาเขียน content ทุกชิ้น ถ้าเขียนแล้วผิด vibe ให้กลับมาเช็คที่นี่
+
+---
+
+## หนึ่งประโยคที่คนต้องจำ
+
+> **เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า** เพราะถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็จะสามารถใช้บริการเราต่อไปได้
+
+---
+
+## เราเป็นใครใน 1 บรรทัด
+
+ที่ปรึกษาที่ทำเว็บ + ทำการตลาด + ทำ AI ในองค์กร **โดยใช้ข้อมูลจริงเป็นตัวตั้ง** ไม่ใช่ประสบการณ์ล้วน ๆ
+
+---
+
+## เสียงของเรา (10 ข้อ)
+
+1. **ตรง แต่สุภาพ** — พูดตรง ๆ ว่าทำได้หรือทำไม่ได้ แต่ไม่ดุ ไม่หยาบ
+2. **เน้นข้อมูล** — เวลาพูดถึงผลงาน บอกตัวเลข ไม่ใช่ "ดีขึ้นมาก" แบบกำกวม
+3. **เล่าจากประสบการณ์จริง** — มีเคสพัง มีเคสสำเร็จ ไม่อวดว่าทำได้หมดทุกอย่าง
+4. **ห้ามใช้คำว่า "ครบวงจร" "ทันสมัย" "รวดเร็ว" "ไร้รอยต่อ" "เพิ่มประสิทธิภาพ"** — คำพวกนี้ทุก agency ใช้ ไม่ได้ทำให้เราต่าง
+5. **พูดถึงเรื่องที่เราไม่เชื่อด้วย** — เว็บสวยไม่ได้แปลว่าขายได้ / AI ไม่ได้แทนทุกอย่าง / จ่ายแพงไม่ได้แปลว่าดี
+6. **ยอมรับว่าเราเป็น soloprenuer** — แต่ห้ามขอโทษ ห้ามทำเป็นข้ออ่อน ให้ทำเป็นข้อได้เปรียบ: คุณคุยกับคนที่จะทำงานจริง ไม่ใช่ทีมขาย
+7. **ช่วงราคา** — ไม่ลงเว็บ แต่พร้อมบอกเมื่อถาม ถ้าลูกค้าถามแล้วเราไม่ตอบ = ลูกค้าหาย
+8. **Quote ลูกค้าใช้ของจริง** — เอาคำที่ลูกค้าพูดจริง ๆ มาวาง ไม่ใช่แต่งให้สวย
+9. **เน้นว่าเราเลือกช่องทางให้เหมาะกับสินค้า + กลุ่มเป้าหมาย** — ไม่ยิงทุกที่ ไม่ใช้ AI ระดับ Frontier กับทุกงาน
+10. **พูดถึง "เราเขียนโค้ดเอง" และ "เราตอบแชตเอง" โดยไม่ต้องโอ้อวด** — แค่บอกตรง ๆ ว่าเราไม่ outsource
+
+---
+
+## คำที่ห้ามใช้ (Banned Words)
+
+| ❌ ห้าม | ✅ ใช้แทน |
+|---|---|
+| ครบวงจร | บอกชัดว่าทำอะไรบ้าง |
+| ทันสมัย | บอกว่าใช้เทคโนโลยีอะไร เช่น Astro / n8n / local LLM |
+| รวดเร็ว | บอกตัวเลข เช่น "ส่งมอบภายใน 14 วัน" |
+| ไร้รอยต่อ | อธิบายว่าเชื่อมต่อระบบอะไรยังไง |
+| เพิ่มประสิทธิภาพ | บอกตัวเลข เช่น "ลดเวลา 4 ชม./สัปดาห์" |
+| หลากหลาย | บอกว่ามีอะไรบ้าง |
+| มีคุณภาพ | บอกเกณฑ์วัด |
+
+---
+
+## คำที่ใช้บ่อย (ใช้ได้)
+
+- "วางแผนจากข้อมูล" / "ใช้สถิติจริง"
+- "เราเขียนเอง / ทำเอง" / "ไม่ outsource"
+- "จ่ายเมื่อใช้ / เริ่มต้นที่..."
+- "ถ้าทำไม่ได้ จะบอกตรง ๆ"
+- "เคสเราเคยพังแบบนี้" (เล่าเคสจริง)
+
+---
+
+## Tone Examples
+
+### ❌ ก่อนแก้ (AI-isms + ทั่วไปเกินไป)
+> เรามีบริการครบวงจร ทั้งเว็บไซต์ การตลาด และ AI เพื่อเพิ่มประสิทธิภาพให้ธุรกิจของคุณอย่างทันสมัยและรวดเร็ว
+
+### ✅ หลังแก้ (เสียงของมอร์มินิมอร์)
+> เราทำเว็บ ทำการตลาด และวางระบบ AI ให้องค์กร — ทั้งหมดเริ่มจากดูข้อมูลของลูกค้าก่อน ไม่ใช่เดาจากประสบการณ์
+
+---
+
+### ❌ ก่อนแก้
+> เว็บไซต์ของเราสวยงาม ทันสมัย รองรับทุกอุปกรณ์
+
+### ✅ หลังแก้
+> เว็บที่เราทำเน้นให้ขายได้ ไม่ใช่เน้นให้สวย — เพราะเว็บหลายเว็บที่ดูดีที่สุด ขายแย่ที่สุดก็มี
+
+---
+
+### ❌ ก่อนแก้
+> เราใช้ AI เพื่อเพิ่มประสิทธิภาพ
+
+### ✅ หลังแก้
+> เราเลือกใช้ AI ตามงาน — งาน 80% ใช้ Model ราคาถูกก็พอ จะได้ไม่เปลืองเงินลูกค้า

package-lock.json

@@ -988,9 +988,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1007,9 +1004,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1026,9 +1020,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1045,9 +1036,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1064,9 +1052,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1083,9 +1068,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1102,9 +1084,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1121,9 +1100,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1140,9 +1116,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1165,9 +1138,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1190,9 +1160,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1215,9 +1182,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1240,9 +1204,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1265,9 +1226,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1290,9 +1248,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1315,9 +1270,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1619,9 +1571,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1635,9 +1584,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1651,9 +1597,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1667,9 +1610,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1683,9 +1623,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1699,9 +1636,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1715,9 +1649,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1731,9 +1662,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1747,9 +1675,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1763,9 +1688,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1779,9 +1701,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1795,9 +1714,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1811,9 +1727,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

public/site.webmanifest

@@ -0,0 +1,22 @@
+{
+  "name": "MoreminiMore",
+  "short_name": "MoreminiMore",
+  "description": "ที่ปรึกษาที่วางกลยุทธ์จากข้อมูล ไม่ใช่จากประสบการณ์ล้วน ๆ — รับทำเว็บ ที่ปรึกษาการตลาด และวางระบบ AI ในองค์กร",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#fed400",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "start_url": "/",
+  "lang": "th"
+}

questions-for-content.md

@@ -0,0 +1,277 @@
+# คำถามสำหรับปรับปรุงเนื้อหาเว็บ moreminimore
+
+> ตอบข้อไหนได้ก็ตอบ ข้อไหนไม่รู้หรือไม่อยากตอบก็เว้นว่างไว้
+> พิมพ์สั้น ๆ ก็ได้ เช่น `A1: คนที่ทำเว็บแล้วดูแลต่อ ไม่ทิ้ง` — พอแล้ว เอาไปขยายต่อได้
+>
+> เมื่อเติมคำตอบเสร็จ ให้บอก path ของไฟล์นี้กลับมา เช่น `~/Desktop/questions-for-content.md` หรือ `moreminimore-astroreal/questions-for-content.md` หลัง `git push`
+
+---
+
+## 🔴 กลุ่ม A — ตัวตน & ตลาด (ตอบก่อนแตะปากกา)
+
+เรื่องพื้นฐานที่ต้องชัดก่อนเขียนอะไร — ถ้าตอบไม่ได้สักข้อ ก็เป็นสัญญาณว่าเว็บยังเขียนไม่ได้
+
+### A1 — คุณเป็นใครในมุมของลูกค้า
+ถ้าเพื่อนที่เป็น SME ถามว่า "ทำไมต้องจ้างมอร์มินิมอร์ ทั้ง ๆ ที่มีตัวเลือกเยอะ" คุณตอบยังไงใน 1 ประโยค? (ไม่ใช่ประวัติ — เป็นสิ่งที่ทำให้คุณต่าง)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### A2 — ลูกค้าที่คุณชอบทำงานด้วยที่สุด
+เป็นแบบไหน? (ขนาด, อุตสาหกรรม, ลักษณะนิสัย, งบประมาณคร่าว ๆ)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### A3 — ลูกค้าที่คุณไม่อยากรับ
+เป็นแบบไหน? (จะเอาไปเขียนเป็นส่วน "ไม่เหมาะกับ" ในเว็บ — ทำให้คนที่ใช่อยากคุยมากขึ้น และลดเคสที่เสียเวลา)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### A4 — งานชิ้นที่ภูมิใจที่สุด
+ชิ้นไหน และทำไม? (จะกลายเป็น portfolio flagship — อาจเล่าแบบเจาะลึก 1 หน้าเต็ม)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### A5 — งานชิ้นที่พังหรือเกือบพัง
+เกิดอะไรขึ้น แก้ยังไง? (เอาไปเล่าเป็นบทเรียน — แบบนี้ลูกค้าจะเชื่อถือมากกว่า "ผลงานสวยหมด" เพราะดูจริงใจ)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### A6 — SME ไทยทำพลาดเรื่องเดิมซ้ำ ๆ เรื่องอะไร
+ช่วง 5 ปีที่ผ่านมา คุณเห็นอะไรซ้ำ ๆ? (คำตอบจะกลายเป็นเสียงของคุณในเว็บ + ไอเดียเขียน blog ได้อีกหลายเรื่อง)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+---
+
+## 🟠 กลุ่ม B — เสนอคุณค่า (ตอบก่อนเขียน service page)
+
+เพื่อให้ service page แต่ละหน้าไม่ซ้ำกัน และลูกค้าเห็นว่าต้องเลือกคุณยังไง
+
+### B7 — บริการแต่ละตัวต่างกันตรงไหน
+Web / Marketing / Automation / AI Consult — กระบวนการทำงานต่างกันยังไง? ไม่ใช่ "ส่งมอบอะไร" แต่ "ทำงานยังไง"
+
+- **Web (Astro/WordPress)** — workflow เป็นยังไง กี่รอบ feedback ใช้ stack อะไร
+```
+คำตอบ:
+```
+
+- **Marketing** — ใช้ GA4 / Meta Pixel / SEO tools อะไร วัดผลยังไง
+```
+คำตอบ:
+```
+
+- **Automation** — ใช้ n8n / Make / Zapier / custom code เลือกยังไง
+```
+คำตอบ:
+```
+
+- **AI Consult** — ใช้ RAG / fine-tune / agent อะไร เหมาะกับ case ไหน
+```
+คำตอบ:
+```
+
+### B8 — ถ้าทำได้อย่างเดียว ควรเริ่มจากอะไร
+ลูกค้ามีงบจำกัด ทำได้อย่างเดียว — อันไหนคุ้มสุด? (ตอบตรง ๆ ตามจริง ไม่ใช่คำตอบที่ขายดีที่สุด — ความจริงใจตรงนี้จะกลายเป็นเครื่องมือปิดการขาย)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### B9 — คิดค่าบริการยังไง
+เหมาจ่าย / รายเดือน / เก็บตาม sprint / value-based? ช่วงราคาคร่าว ๆ ของแต่ละบริการ:
+
+- **Web Development** — โปรเจกต์ทั่วไปอยู่ที่ ____ บาท
+```
+คำตอบ:
+```
+
+- **Marketing** — ค่า setup + รายเดือน
+```
+คำตอบ:
+```
+
+- **Automation** — ค่าพัฒนา + ค่าดูแล
+```
+คำตอบ:
+```
+
+- **AI Consult** — ค่า consult / ชั่วโมง / โปรเจกต์
+```
+คำตอบ:
+```
+
+### B10 — คำถาม 5 ข้อที่ถามลูกค้าในการคุยครั้งแรก
+ตอนคุยกันครั้งแรก คุณถามอะไรบ้าง? (จะเอาไปใส่หน้า Contact เป็น "ก่อนคุย เตรียมคำตอบพวกนี้มา" — คนที่อ่านแล้วตอบได้ = lead ที่มีคุณภาพ)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+---
+
+## 🟡 กลุ่ม C — ความน่าเชื่อถือ (ตอบก่อนเขียน About / Portfolio)
+
+ทำให้ soloprenuer กลายเป็นข้อได้เปรียบ ไม่ใช่จุดอ่อน
+
+### C11 — เบื้องหลังการทำงานจริง
+นั่งทำที่ไหน ใช้เครื่องอะไร stack/workflow แบบไหน — เล่าแบบที่คนอ่านแล้วเห็นภาพ "คนคนนี้จริงจัง"
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### C12 — คำพูดลูกค้าที่จำไม่ลืม
+เคยมีลูกค้าพูดอะไรที่ทำให้คุณจำได้? (quote แบบนี้แพ้ portfolio 10 หน้า — ถ้ามีหลาย quote บอกมาหลาย ๆ อันได้)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### C13 — กำลังเรียนรู้ / ทดลองอะไรอยู่
+เช่น RAG, GEO, AI agent workflow, automation platform ใหม่ ๆ — ทำให้เห็นว่าคุณยังเดินหน้า ไม่หยุดนิ่ง
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### C14 — ตัวเลขจริง ๆ ตอนนี้
+ไม่ต้องสวย แค่ให้ calibrate เสียงและระดับความกล้าในการ claim:
+
+- ทำมากี่ปี
+- ส่งมอบกี่โปรเจกต์
+- ลูกค้าซ้ำกี่คน
+- ราคาเฉลี่ยต่อโปรเจกต์
+- (ไม่ต้องเอาลงเว็บ แค่บอกผม)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+---
+
+## 🟢 กลุ่ม D — มุมมอง & เสียง (ตอบก่อนเขียนทุกหน้า)
+
+เสียงที่จดจำได้ = มุมมองที่ชัด ไม่ใช่ถ้อยคำที่สวย
+
+### D15 — เรื่องที่ไม่เห็นด้วยในวงการ
+AI/Web agency ทำอะไรที่คุณคิดว่าผิด / เกินจำเป็น / หลอกลูกค้า? (ความเห็นต่าง = เสียงที่จดจำได้ เช่น "เราไม่เชื่อว่า SME ต้องมี chatbot ทุกเว็บ")
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### D16 — 1 ประโยคที่อยากให้คนจำ
+ถ้าเขียนเว็บได้แค่ 1 ประโยค อยากให้คนจำว่ามอร์มินิมอร์เป็นแบบไหน — ประโยคนั้นคืออะไร?
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### D17 — โทนเสียงที่อยากให้เว็บเป็น
+เลือก 1-2 ข้อ (หรือผสม):
+
+- [ ] ตรง ๆ ดุ ๆ (เหมือนคุยกับเพื่อน)
+- [ ] สุภาพ มืออาชีพ (เหมือนที่ปรึกษา)
+- [ ] ขำ ๆ มีอารมณ์ขัน
+- [ ] เน้นข้อมูล ไม่มีน้ำ
+- [ ] เล่าเรื่อง เป็นกันเอง
+- [ ] อื่น ๆ (บอกมา)
+
+```
+คำตอบ:
+
+
+
+
+```
+
+### D18 — เว็บที่ชอบ / vibe ที่อยากได้
+เว็บคู่แข่ง หรือเว็บต่างประเทศที่ชอบ vibe คล้าย ๆ — ส่งลิงก์มากี่อันก็ได้ พร้อมเหตุผลสั้น ๆ ว่าชอบอะไร
+
+```
+คำตอบ:
+
+
+
+
+```
+
+---
+
+## หลังได้คำตอบแล้ว จะทำอะไรต่อ
+
+1. สรุป "เสียงของแบรนด์" ใน 1 หน้า (ไม่เกิน 10 ข้อ)
+2. เขียน portfolio แต่ละชิ้นใหม่ — format: `[ชื่อ]. [อุตสาหกรรม]. [ปัญหา]. [สิ่งที่ทำ]. [ตัวเลข]. [เวลา]`
+3. เขียน Home page copy ใหม่ — ลด 12 problem cards เหลือ 3-4 ที่เจ็บที่สุด พร้อมเฉลย
+4. เขียน Service pages ใหม่ แยกตามเสียงและกระบวนการจริง
+5. เขียน About page ใหม่ ให้ soloprenuer กลายเป็นข้อได้เปรียบ
+6. เขียน FAQ จากคำถามที่ลูกค้าถามบ่อยจริง ๆ
+7. วางแผน Blog topics 5 เรื่อง จากคำตอบ A6 + D15

src/components/BentoGrid.astro

@@ -0,0 +1,39 @@
+---
+/**
+ * BentoGrid — 12-column asymmetric bento grid container.
+ * Use <BentoTile> as children.
+ *
+ * Example:
+ *   <BentoGrid>
+ *     <BentoTile span={6} surface="yellow">...</BentoTile>
+ *     <BentoTile span={4} surface="purple-soft">...</BentoTile>
+ *   </BentoGrid>
+ */
+---
+
+<div class="bento-grid stagger">
+  <slot />
+</div>
+
+<style>
+  .bento-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-auto-rows: minmax(80px, auto);
+    gap: 16px;
+    position: relative;
+  }
+
+  @media (max-width: 1024px) {
+    .bento-grid {
+      grid-template-columns: repeat(6, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .bento-grid {
+      grid-template-columns: 1fr;
+      gap: 12px;
+    }
+  }
+</style>

src/components/BentoTile.astro

@@ -0,0 +1,168 @@
+---
+/**
+ * BentoTile — a single bento grid cell.
+ *
+ * Props:
+ *   span:   3 | 4 | 5 | 6 | 7 | 8 | 12  (default 6)
+ *   rows:   1 | 2 | 3                    (default 1)
+ *   surface: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral'
+ *   minHeight: optional inline min-height CSS value
+ *   eyebrow: optional small uppercase label above title
+ *   title:   optional H2 title
+ *   reveal:  boolean, animate on scroll into view (default true)
+ *
+ * Example:
+ *   <BentoTile span={8} surface="yellow" eyebrow="วิธีทำงาน" title="ไม่ได้ทำงานแบบเดียวกับทุกที่">
+ *     <p>...content...</p>
+ *   </BentoTile>
+ */
+
+interface Props {
+  span?: 3 | 4 | 5 | 6 | 7 | 8 | 12;
+  rows?: 1 | 2 | 3;
+  surface?: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral';
+  minHeight?: string;
+  eyebrow?: string;
+  title?: string;
+  reveal?: boolean;
+  class?: string;
+}
+
+const {
+  span = 6,
+  rows = 1,
+  surface = 'white',
+  minHeight,
+  eyebrow,
+  title,
+  reveal = true,
+  class: className = '',
+} = Astro.props;
+
+const spanClass = `span-${span}`;
+const rowsClass = rows > 1 ? `rows-${rows}` : '';
+const surfaceClass = `surface-${surface}`;
+const revealClass = reveal ? 'reveal' : '';
+---
+
+<div
+  class:list={['bento-tile', spanClass, rowsClass, surfaceClass, revealClass, className]}
+  style={minHeight ? `min-height: ${minHeight};` : undefined}
+>
+  {eyebrow && <div class:list={['tile-eyebrow', surface === 'dark' || surface === 'purple' || surface === 'teal' || surface === 'coral' ? 'inv' : '']}>{eyebrow}</div>}
+  {title && <h2 class:list={['tile-title', surface === 'dark' || surface === 'purple' || surface === 'teal' || surface === 'coral' ? 'light' : '']}>{title}</h2>}
+  <div class="tile-body">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .bento-tile {
+    background: var(--color-white);
+    color: var(--color-black);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-xl);
+    padding: 32px;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
+    transform-style: preserve-3d;
+    min-height: 380px;
+    min-width: 0;
+    width: 100% !important;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+  .bento-tile:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
+  }
+
+  /* Spans */
+  .span-3 { grid-column: span 3; }
+  .span-4 { grid-column: span 4; }
+  .span-5 { grid-column: span 5; }
+  .span-6 { grid-column: span 6; }
+  .span-7 { grid-column: span 7; }
+  .span-8 { grid-column: span 8; }
+  .span-12 { grid-column: span 12; }
+  .rows-2 { grid-row: span 2; }
+  .rows-3 { grid-row: span 3; }
+
+  @media (max-width: 1024px) {
+    .span-3, .span-4, .span-5 { grid-column: span 3; }
+    .span-6, .span-7, .span-8 { grid-column: span 6; }
+    .span-12 { grid-column: span 6; }
+  }
+  @media (max-width: 640px) {
+    [class*="span-"] { grid-column: span 1; }
+    .rows-2, .rows-3 { grid-row: span 1; }
+  }
+
+  /* Surface variants */
+  .surface-soft { background: var(--color-bg-soft); border-color: var(--color-gray-200); }
+  .surface-yellow { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-black); }
+  .surface-purple { background: var(--color-purple); border-color: var(--color-purple); color: var(--color-white); }
+  .surface-purple-soft { background: var(--color-purple-soft); border-color: var(--color-purple-soft); }
+  .surface-teal { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
+  .surface-mint { background: var(--color-mint-soft); border-color: var(--color-mint-soft); }
+  .surface-coral { background: var(--color-coral); border-color: var(--color-coral); color: var(--color-white); }
+  .surface-dark { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }
+
+  /* Typography */
+  .tile-eyebrow {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    opacity: 0.7;
+    margin-bottom: 12px;
+  }
+  .tile-eyebrow.inv {
+    opacity: 1;
+    color: var(--color-primary);
+  }
+  .tile-title {
+    font-family: var(--font-display);
+    font-size: clamp(22px, 3vw, 36px);
+    font-weight: 900;
+    line-height: 1.1;
+    margin-bottom: 16px;
+  }
+  .tile-title.light { color: var(--color-white); }
+  .tile-body { font-size: 16px; line-height: 1.7; }
+  .tile-body :global(p) { margin-bottom: 12px; }
+  .tile-body :global(p:last-child) { margin-bottom: 0; }
+  .tile-body :global(ul) { padding-left: 20px; margin-top: 12px; }
+  .tile-body :global(li) { margin-bottom: 8px; }
+  .tile-body :global(strong) { font-weight: 800; }
+
+  /* Light text on dark/colored surface */
+  .surface-dark .tile-body,
+  .surface-purple .tile-body,
+  .surface-teal .tile-body,
+  .surface-coral .tile-body {
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+  .surface-dark .tile-body :global(strong),
+  .surface-purple .tile-body :global(strong),
+  .surface-teal .tile-body :global(strong),
+  .surface-coral .tile-body :global(strong) { color: var(--color-primary); }
+
+  /* Yellow tile — always black text */
+  .surface-yellow .tile-title,
+  .surface-yellow .tile-body,
+  .surface-yellow .tile-body :global(strong) { color: var(--color-black); }
+  .surface-yellow .tile-eyebrow { color: var(--color-black); opacity: 0.7; }
+
+  /* Checkmark list variant (for .surface-yellow with .checklist) */
+  .tile-body :global(.checklist) {
+    list-style: none;
+    padding: 0;
+  }
+  .tile-body :global(.checklist li) {
+    padding-left: 0;
+  }
+</style>

src/components/DecoOrb.astro

@@ -0,0 +1,68 @@
+---
+/**
+ * DecoOrb — decorative parallax blur orb for section backgrounds.
+ * Pure decoration, never blocks clicks, always behind content.
+ *
+ * Props:
+ *   color:    'yellow' | 'soft' | 'purple' | 'mint' | 'teal' (default 'yellow')
+ *   size:     CSS dimension (default '400px')
+ *   speed:    parallax speed 0.0–1.0 (default 0.4)
+ *   position: { top?, right?, bottom?, left? } CSS positions
+ *   blur:     CSS blur value (default '60px')
+ *   opacity:  CSS opacity 0–1 (default 0.5)
+ *
+ * Example:
+ *   <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-100px', left: '-100px' }} />
+ */
+
+interface Props {
+  color?: 'yellow' | 'soft' | 'purple' | 'mint' | 'teal';
+  size?: string;
+  speed?: number;
+  position?: { top?: string; right?: string; bottom?: string; left?: string };
+  blur?: string;
+  opacity?: number;
+}
+
+const {
+  color = 'yellow',
+  size = '400px',
+  speed = 0.4,
+  position = {},
+  blur = '60px',
+  opacity = 0.5,
+} = Astro.props;
+
+const styleStr = [
+  `width: ${size};`,
+  `height: ${size};`,
+  `filter: blur(${blur});`,
+  `opacity: ${opacity};`,
+  position.top ? `top: ${position.top};` : '',
+  position.right ? `right: ${position.right};` : '',
+  position.bottom ? `bottom: ${position.bottom};` : '',
+  position.left ? `left: ${position.left};` : '',
+].join(' ');
+---
+
+<div
+  class:list={['deco-orb', `orb-${color}`]}
+  data-parallax-speed={speed}
+  style={styleStr}
+  aria-hidden="true"
+></div>
+
+<style>
+  .deco-orb {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 0;
+    will-change: transform;
+  }
+  .orb-yellow { background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); }
+  .orb-soft { background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 70%); }
+  .orb-purple { background: radial-gradient(circle, var(--color-purple) 0%, transparent 70%); }
+  .orb-mint { background: radial-gradient(circle, var(--color-mint) 0%, transparent 70%); }
+  .orb-teal { background: radial-gradient(circle, var(--color-teal) 0%, transparent 70%); }
+</style>

src/components/Hero.astro

@@ -15,12 +15,18 @@ interface Props {
 }
 
 const {
-  badge = "AI AGENCY ในประเทศไทย",
+  badge = 'Moreminimore',
-  title = "เว็บไซต์ที่ขายได้ ไม่ใช่แค่สวย",
+  title = 'เราจะช่วยคุณเพิ่มกำไร',
-  subtitle = "เราออกแบบเว็บไซต์ + AI Chatbot + Marketing Automation ให้ธุรกิจไทย เพิ่มยอดขายเฉลี่ย 2–4 เท่า ภายใน 6 เดือน ด้วยงบที่จับต้องได้ เริ่มต้น 15,000 บาท",
+  subtitle = 'เราช่วยวางระบบงาน และใช้สถิติวางกลยุทธ์ทางการตลาด',
   showCTA = true,
-  ctaText = "เริ่มปรึกษาฟรี",
+  ctaText = 'เริ่มปรึกษาฟรี',
-  ctaLink = "/contact",
+  ctaLink = '/contact',
+  pains = [
+    { surface: 'yellow', text: 'ยิ่งขาย กำไรยิ่งลด?' },
+    { surface: 'purple-soft', text: 'มีเว็บไซต์ เหมือนไม่มี?' },
+    { surface: 'mint', text: 'พนักงานทำงานได้น้อยกว่าที่ต้องการ?' },
+    { surface: 'teal', text: 'เอา AI มาให้ใช้ แต่งานไม่ได้มากขึ้นตามที่คิด?' },
+  ],
 } = Astro.props;
 
 // Split title into words for kinetic animation
@@ -46,13 +52,17 @@ const titleWords = title.split(' ');
   </div>
 
   <div class="container hero-container">
-    <!-- Badge (data-animate for kineticHeadline words too) -->
+    <!-- 2-COLUMN LAYOUT: text (left) + pain stack (right) -->
+    <div class="hero-grid">
+      <!-- LEFT: text content -->
+      <div class="hero-text">
+        <!-- Badge -->
         <div class="hero-badge" data-animate="fade-in">
           <span class="badge-dot"></span>
           {badge}
         </div>
 
-    <!-- Main Title - Kinetic Typography (animated by lib/animations.ts kineticHeadline) -->
+        <!-- Main Title - Kinetic Typography -->
         <h1 class="hero-title kinetic-title">
           {titleWords.map((word, index) => (
             <span class="word-wrapper">
@@ -92,6 +102,18 @@ const titleWords = title.split(' ');
         <slot name="hero-trust" />
       </div>
 
+      <!-- RIGHT: pain card stack -->
+      <div class="hero-pain-stack" data-animate="fade-in-up">
+        {pains.map((p, i) => (
+          <div class={`pain-card pain-${p.surface}`} style={`--pain-delay: ${0.6 + i * 0.15}s`}>
+            <div class="pain-eyebrow">คุณกำลังเจอปัญหา</div>
+            <div class="pain-text">{p.text}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+
   <!-- Giant Background Typography -->
   <div class="hero-bg-text" aria-hidden="true">
     AI
@@ -274,7 +296,103 @@ const titleWords = title.split(' ');
     position: relative;
     z-index: 1;
     padding: 140px var(--gutter) 100px;
-    max-width: 1200px;
+    max-width: 1600px;
+  }
+
+  /* ============================================
+     HERO GRID — 2 COLUMNS (text + pain stack)
+     ============================================ */
+
+  .hero-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+  }
+
+  .hero-text {
+    min-width: 0;
+  }
+
+  .hero-pain-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    min-width: 0;
+  }
+
+  .pain-card {
+    padding: 28px 32px;
+    border-radius: var(--radius-xl);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+    border: 1px solid transparent;
+    opacity: 0;
+    transform: translateY(20px);
+    animation: painReveal 0.7s var(--ease-out-expo) var(--pain-delay, 0s) forwards;
+    transition: transform 0.4s var(--ease-out-expo);
+  }
+  .pain-card:hover {
+    transform: translateY(-4px);
+  }
+
+  @keyframes painReveal {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .pain-yellow {
+    background: var(--color-primary);
+    color: var(--color-black);
+  }
+  .pain-purple-soft {
+    background: var(--color-purple-soft);
+    color: var(--color-black);
+  }
+  .pain-mint {
+    background: var(--color-mint-soft);
+    color: var(--color-black);
+  }
+  .pain-teal {
+    background: var(--color-teal);
+    color: var(--color-white);
+  }
+  .pain-teal .pain-eyebrow { color: var(--color-primary); }
+
+  .pain-eyebrow {
+    font-family: var(--font-display);
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    opacity: 0.7;
+    margin-bottom: 8px;
+  }
+
+  .pain-text {
+    font-family: var(--font-display);
+    font-size: 22px;
+    font-weight: 800;
+    line-height: 1.3;
+  }
+
+  @media (max-width: 1024px) {
+    .hero-grid {
+      grid-template-columns: 1fr;
+      gap: 40px;
+    }
+    .hero-text {
+      order: 1;
+    }
+    .hero-pain-stack {
+      order: 2;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .pain-text { font-size: 18px; }
+    .pain-card { padding: 20px 24px; }
   }
 
   /* ============================================

src/components/PortfolioCard.astro

@@ -18,10 +18,13 @@ interface Props {
 const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props;
 ---
 
-<a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}>
+<a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}
+   ontouchstart="this.classList.toggle('tapped')"
+   onclick="if(this.classList.contains('tapped')&&window.innerWidth<768){this.classList.remove('tapped');return false;}">
   <div class="portfolio-image">
     <img src={thumbnail} alt={name} loading="lazy" />
     <div class="portfolio-overlay">
+      {what_we_did && <p class="overlay-did">{what_we_did}</p>}
       <span class="visit-btn">
         เยี่ยมชมเว็บไซต์
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -34,7 +37,6 @@ const { name, url, category, category_label, industry, thumbnail, description, w
     {industry && <span class="portfolio-industry">{industry}</span>}
     <span class="portfolio-category">{category_label}</span>
     <h3 class="portfolio-name">{name}</h3>
-    {what_we_did && <p class="portfolio-did">{what_we_did}</p>}
     {result && <p class="portfolio-result">→ {result}</p>}
     {!what_we_did && description && <p class="portfolio-desc">{description}</p>}
   </div>
@@ -84,16 +86,28 @@ const { name, url, category, category_label, industry, thumbnail, description, w
     inset: 0;
     background: rgba(254, 212, 0, 0.95);
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 20px;
+    padding: 24px;
     opacity: 0;
     transition: opacity 0.3s ease;
   }
 
-  .portfolio-card:hover .portfolio-overlay {
+  .portfolio-card:hover .portfolio-overlay,
+  .portfolio-card.tapped .portfolio-overlay {
     opacity: 1;
   }
 
+  .overlay-did {
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--color-black);
+    text-align: center;
+    max-width: 280px;
+  }
+
   .visit-btn {
     display: inline-flex;
     align-items: center;

src/content.config.ts

@@ -12,6 +12,7 @@ const services = defineCollection({
     badge: z.string(),
     category: z.string(),
     objective: z.string(),
+    short_desc: z.string().optional(), // NEW: short description
     usp_free_server: z.string().optional(),
     usp_content_edit: z.string().optional(),
   }),
@@ -25,13 +26,29 @@ const portfolio = defineCollection({
   schema: z.object({
     name: z.string(),
     url: z.string().optional(),
-    category: z.string(), // webdev | ecommerce | marketing
+    category: z.string(), // webdev | ecommerce | marketing | ai-consult | automation
     category_label: z.string(),
-    industry: z.string().optional(), // NEW: industry for filtering
+    industry: z.string().optional(), // industry for filtering
-    thumbnail: z.string(),
+    thumbnail: z.string().optional(), // optional now
-    description: z.string(),
+    description: z.string().optional(),
-    what_we_did: z.string().optional(), // NEW: separate from description
+    what_we_did: z.string().optional(),
-    result: z.string().optional(), // NEW: outcome metric
+    result: z.string().optional(),
+    featured: z.boolean().optional(), // NEW: show on home page
+    order: z.number().optional(), // NEW: display order
+    case_study: z.boolean().optional(), // NEW: full case study body
+  }),
+});
+
+// =============================================================================
+// PAGES — static page content (about, home, etc.)
+// =============================================================================
+const pages = defineCollection({
+  loader: glob({ pattern: '*.{md,mdx}', base: './src/content/pages' }),
+  schema: z.object({
+    title: z.string().optional(),
+    subtitle: z.string().optional(),
+    hero_badge: z.string().optional(),
+    badge: z.string().optional(),
   }),
 });
 
@@ -85,4 +102,5 @@ export const collections = {
   faq,
   settings,
   blog,
+  pages,
 };

src/content/faq/001-services-overview.md

@@ -2,5 +2,5 @@
 category: "บริการ"
 category_icon: "💼"
 question: "มอร์มินิมอร์ทำอะไรบ้าง?"
-answer: "4 บริการหลัก — เว็บไซต์ + AI Chatbot, AI & Workflow Automation, SEO + AI Content, และ Tech Consult (Server, Data Pipeline) ลูกค้า 80% เริ่มจากเว็บไซต์ก่อน แล้วค่อยเพิ่มบริการอื่นทีหลัง"
+answer: "4 บริการหลัก — (1) รับทำเว็บไซต์ (Astro / WordPress) (2) ที่ปรึกษาการตลาดออนไลน์ (3) Automation / เชื่อมต่อระบบ (4) AI Consult ในองค์กร ทั้งหมดเริ่มจากดูข้อมูลของลูกค้าก่อน ไม่ใช่เดาว่าควรทำอะไร"
 ---

src/content/faq/002-services-flexible.md

@@ -1,6 +1,6 @@
 ---
 category: "บริการ"
 category_icon: "💼"
-question: "รับงานแบบไหน? เลือกได้ไหม?"
+question: "ถ้ามีงบน้อย ควรเริ่มจากอะไร?"
-answer: "เลือกได้ทุกอย่าง บางลูกค้ามาขอแค่ Chatbot บางคนมาขอทำ SEO อย่างเดียว ไม่มี minimum commitment ไม่มี 'ต้องซื้อครบแพ็ค'"
+answer: "ถ้ายังไม่มีเว็บและไม่มีกิจกรรมออนไลน์เลย → เริ่มจากเว็บไซต์ก่อน เพราะเป็นบริการที่ถูกที่สุด ถ้ามีเว็บแล้วและมีกิจกรรมออนไลน์ → Marketing Consult จะคุ้มกว่า ถ้ารู้สึกยุ่งมากมีแต่ความผิดพลาด → Automation จะตอบโจทย์สุด ถ้ามีระบบพร้อมแล้วอยากรีดยอดขายหรือป้องกันปัญหาพนักงานลาออก → AI Consult"
 ---

src/content/faq/003-services-fit.md

@@ -2,5 +2,5 @@
 category: "บริการ"
 category_icon: "💼"
 question: "เหมาะกับธุรกิจแบบไหน?"
-answer: "เหมาะกับ SME ไทยที่มียอดขาย 100,000 บาทขึ้นไปต่อเดือน (ถ้ายังไม่ถึง อาจจะยังไม่คุ้ม) — เรามีลูกค้าตั้งแต่ร้านค้าออนไลน์เล็ก ๆ ไปจนถึงโรงงาน 40 ปี"
+answer: "SME ที่ต้องการคนช่วยดูเรื่อง Online Marketing และระบบ IT ลูกค้าที่ไม่มีความรู้ IT มาก แต่จำเป็นต้องใช้ระบบ IT ในการทำงาน ไม่เหมาะกับ: องค์กรขนาดใหญ่ที่มีการเมืองเยอะ คนที่อยากได้ของฟรีหรือจ่ายน้อยแต่คาดหวังงานระดับแสน และกลุ่ม IT ทั่วไป (ยกเว้นขาย Software เฉพาะทาง เช่น ERP)"
 ---

src/content/faq/004-services-industry.md

@@ -1,6 +1,6 @@
 ---
 category: "บริการ"
 category_icon: "💼"
-question: "เคยทำในอุตสาหกรรมของเราไหม?"
+question: "รับงานอุตสาหกรรมเฉพาะไหม?"
-answer: "ทำมาแล้วหลากหลาย เช่น โรงงาน, สำนักงานกฎหมาย, คลินิก, ร้านค้าออนไลน์, สถาบันสอน, สินค้าแมส ถ้าคุณอยากเห็นตัวอย่างในอุตสาหกรรมเดียวกัน → ทัก LINE บอกอุตสาหกรรมมา เราจะหาให้ดู"
+answer: "รับหลากหลาย แต่ไม่รับทุกอย่าง — เราเน้นงานที่วัดผลได้ ไม่ว่าจะเป็น E-commerce, บริการ, B2B, คลินิก, ร้านอาหาร, ผู้ผลิต, สถานศึกษา, ที่ปรึกษา ดูตัวอย่างงานได้ที่หน้า Portfolio ถ้าไม่แน่ใจว่าอุตสาหกรรมของคุณเหมาะ นัดคุย 30 นาทีฟรีได้เลย"
 ---

src/content/faq/005-price-start.md

@@ -2,5 +2,5 @@
 category: "ราคา"
 category_icon: "💰"
 question: "ราคาเริ่มต้นเท่าไหร่?"
-answer: "Landing Page เริ่ม 15,000 บาท · เว็บไซต์ธุรกิจ 35,000–80,000 บาท · ระบบ Automation 50,000 บาทขึ้นไป · SEO รายเดือน 8,000–25,000 บาท — ทั้งหมดนี้เป็นช่วง ขึ้นกับ scope จริง"
+answer: "เว็บไซต์: Astro เริ่ม 5,000 บาท / WordPress เริ่ม 30,000 บาท (ขึ้นอยู่กับความซับซ้อน) · ที่ปรึกษา Marketing และ Automation: เริ่ม 10,000 บาท/เดือน · ที่ปรึกษา AI: เริ่ม 20,000 บาท/เดือน · Host: เริ่ม 5,000 บาท/ปี ราคาจะขึ้นอยู่กับ Requirement จริง บอกได้เมื่อคุยกัน"
 ---

src/content/faq/006-price-packages.md

@@ -1,6 +1,6 @@
 ---
 category: "ราคา"
 category_icon: "💰"
-question: "มีแพ็คเกจสำเร็จรูปไหม?"
+question: "มีแพ็คเกจไหม?"
-answer: "มี — Starter, Business, Enterprise (ดูรายละเอียดที่ /pricing) แต่ถ้าไม่ตรงกับที่คุณต้องการ เราปรับให้ได้ทุกอย่าง ไม่ใช่ 'เลือกแพ็คหรือไม่ซื้อ'"
+answer: "ไม่มีแพ็คเกจตายตัว เพราะงานแต่ละชิ้นต่างกัน บางเว็บใช้เวลา 1 สัปดาห์ บางเว็บใช้ 3 เดือน เราจะส่ง Proposal เป็น PDF พร้อมรายละเอียดงาน ราคา ระยะเวลา ให้คุณอ่านก่อนเซ็น แก้ไข scope ได้"
 ---

src/content/faq/007-price-payment.md

@@ -1,6 +1,6 @@
 ---
 category: "ราคา"
 category_icon: "💰"
-question: "จ่ายเงินยังไง? ผ่อนได้ไหม?"
+question: "จ่ายยังไง?"
-answer: "โอนธนาคาร / บัตรเครดิต (3–6 งวด มีดอกเบี้ย) โปรเจกต์ใหญ่แบ่งจ่าย 3 งวด: 30% ตอนเซ็น, 40% ตอนส่ง demo, 30% ตอนส่งมอบ"
+answer: "เว็บไซต์: มัดจำ 50% ตอนเซ็น ที่เหลือจ่ายตอนส่งมอบ · ที่ปรึกษารายเดือน: จ่ายต้นเดือนของทุกเดือน เริ่มจ่ายเดือนแรกตอนเซ็นสัญญา ออกใบกำกับภาษีได้"
 ---

src/content/faq/008-price-hidden.md

@@ -1,6 +1,6 @@
 ---
 category: "ราคา"
 category_icon: "💰"
-question: "มี Hidden cost ไหม?"
+question: "มีค่าใช้จ่ายแอบแฝงไหม?"
-answer: "ไม่มี ทุกอย่างระบุในสัญญา ถ้าจะมีค่าใช้จ่ายเพิ่ม (เช่น ซื้อ Domain, SSL, ค่า API) เราจะบอกล่วงหน้าก่อนตัดสินใจ"
+answer: "ไม่มี — เราจะบอกทุกค่าใช้จ่ายใน Proposal ตั้งแต่ต้น ไม่มี \"อันนี้เพิ่มเงินนะ\" ตอนใกล้ส่งมอบ ถ้ามีงานเพิ่มจริง ๆ จะคุยและตกลงราคาก่อนทำ"
 ---

src/content/faq/009-time-website.md

@@ -1,6 +1,6 @@
 ---
 category: "ระยะเวลา"
 category_icon: "⏱️"
-question: "ใช้เวลาทำเว็บไซต์นานแค่ไหน?"
+question: "ทำเว็บเสร็จในกี่วัน?"
-answer: "Landing Page 1–2 สัปดาห์ · เว็บไซต์ธุรกิจ 2–4 สัปดาห์ · Web Application / E-commerce 4–8 สัปดาห์ · ถ้ามี content เตรียมพร้อมจะเร็วกว่านี้"
+answer: "Astro: 14-30 วัน · WordPress: 2-4 เดือน · ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน — เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata"
 ---

src/content/faq/010-time-seo.md

@@ -1,6 +1,6 @@
 ---
 category: "ระยะเวลา"
 category_icon: "⏱️"
-question: "SEO เห็นผลเมื่อไหร่?"
+question: "SEO ใช้เวลาเห็นผลกี่เดือน?"
-answer: "ขึ้นกับความยากของคีย์เวิร์ด + สถานะเว็บเดิม — เฉลี่ย 3–6 เดือนถึงหน้า 1 Google บางคีย์เวิร์ดติดใน 1–2 เดือน บางคีย์เวิร์ดใช้เวลา 9–12 เดือน เราจะบอก realistic timeline ก่อนเริ่ม"
+answer: "SEO ปกติใช้เวลา 3-6 เดือนถึงจะเห็นผลชัด ขึ้นอยู่กับคีย์เวิร์ดและคู่แข่ง เราเคยมีเคสติดหน้า 1 Google ใน 4 เดือน แต่ก็มีเคสที่ใช้เวลานานกว่านั้น จะบอกคุณตรง ๆ ตั้งแต่แรกว่าคาดว่าเห็นผลเมื่อไหร่"
 ---

src/content/faq/011-time-rush.md

@@ -1,6 +1,6 @@
 ---
 category: "ระยะเวลา"
 category_icon: "⏱️"
-question: "ถ้าเร่งด่วนได้ไหม?"
+question: "งานด่วน ทำได้ไหม?"
-answer: "ได้ — Rush Service (+30% ของราคาปกติ) เร่งได้เร็วขึ้น 50% เช่น ปกติ 4 สัปดาห์ → Rush 2 สัปดาห์ ต้องบอกล่วงหน้าอย่างน้อย 7 วัน"
+answer: "ทำได้ แต่จะคิดราคาเร่งด่วนเพิ่ม เพราะกระทบกับงานอื่นที่มีอยู่ เราจะบอกชัดว่าค่าเร่งเท่าไหร่ก่อนรับงาน"
 ---

src/content/faq/012-time-overrun.md

@@ -1,6 +1,6 @@
 ---
 category: "ระยะเวลา"
 category_icon: "⏱️"
-question: "แล้วทำไม่ทันเวลาจะเป็นยังไง?"
+question: "ถ้างานล่าช้า คืนเงินไหม?"
-answer: "ถ้าเราบอกว่าจะทันแล้วไม่ทัน (เป็นความผิดของเรา ไม่ใช่เพราะลูกค้าเพิ่ม scope) → คืนเงิน Pro-rata ตามจำนวนวันที่เกิน เคยมีเคสคืนเงิน 2 ครั้งใน 5 ปี"
+answer: "ถ้าเราส่งงานล่าช้าโดยไม่ได้แจ้งล่วงหน้า 7 วัน จะคืนเงิน Pro-rata ตามจริง เคสนี้เคยเกิดขึ้น 1-2 ครั้งในรอบหลายปี และคืนเงินไปแล้ว"
 ---

src/content/faq/013-ai-quality.md

@@ -1,6 +1,6 @@
 ---
 category: "AI & เทคนิค"
 category_icon: "🤖"
-question: "AI Chatbot ตอบลูกค้าได้จริงไหม ไม่ใช่ Bot โง่ ๆ?"
+question: "AI ใช้ของแพงหรือของถูก?"
-answer: "Chatbot ของเราเทรนด้วยข้อมูลธุรกิจจริง (สินค้า, ราคา, FAQ) ไม่ใช่ ChatGPT ทั่วไป ลูกค้า 90%+ ของเราบอกว่าลูกค้าทัก LINE มาแล้วแยกไม่ออกว่าเป็นคนหรือ Bot"
+answer: "เราเลือกตามงาน ไม่ใช่เลือกของแพงสุดเสมอ งาน 80% ใช้ Model ราคาถูก (เช่น GPT-4o-mini, Haiku, Local LLM) ก็ได้ผล ส่วนงานที่ซับซ้อนมาก ๆ ค่อยใช้ของแพง วิธีนี้ช่วยลูกค้าประหยัดค่าใช้จ่ายได้มากกว่าครึ่ง"
 ---

src/content/faq/014-ai-technical.md

@@ -1,6 +1,6 @@
 ---
 category: "AI & เทคนิค"
 category_icon: "🤖"
-question: "ต้องมีความรู้เทคนิคไหมถึงจะใช้งานได้?"
+question: "ต้องมีความรู้เทคนิคไหม?"
-answer: "ไม่ต้อง — เราอบรมทีมคุณให้ใช้งานเป็น (อัปเดต content, ดู report, แก้ Chatbot flow) หลังอบรมทีมคุณจะใช้งานได้เอง ไม่ต้องเรียกเราทุกครั้ง"
+answer: "ไม่ต้อง เราดูแลตั้งแต่ต้นจนจบ ตั้งแต่วิเคราะห์ ออกแบบ พัฒนา ไปจนถึง Deploy และดูแลหลังขาย จะสอนการใช้งานจนทีมคุณใช้เป็น"
 ---

src/content/faq/015-ai-pdpa.md

@@ -1,6 +1,6 @@
 ---
 category: "AI & เทคนิค"
 category_icon: "🤖"
-question: "ข้อมูลลูกค้าปลอดภัยไหม? (PDPA)"
+question: "ข้อมูลปลอดภัยไหม (PDPA)?"
-answer: "ปลอดภัย — ข้อมูลเก็บบน Server ในไทย/สิงคโปร์, เข้ารหัส HTTPS, มี PDPA consent form, ลูกค้าสามารถขอลบข้อมูลได้ ดู Privacy Policy เต็มที่ /privacy"
+answer: "ปลอดภัย สำหรับงานที่ต้องการความลับ เราใช้ Local LLM ที่รันในเครื่องของลูกค้า ข้อมูลไม่ออกไปไหน ส่วนงานทั่วไปใช้ API ของผู้ให้บริการที่เชื่อถือได้ พร้อมทำ NDA ได้"
 ---

src/content/faq/016-ai-which.md

@@ -1,6 +1,6 @@
 ---
 category: "AI & เทคนิค"
 category_icon: "🤖"
-question: "ใช้ AI ตัวไหน? OpenAI หรือเปล่า?"
+question: "ควรใช้ AI ตัวไหน?"
-answer: "เราเลือก AI ตามงาน — OpenAI / Anthropic / Google Gemini / Self-hosted LLM ขึ้นกับว่าลูกค้าต้องการ Privacy ระดับไหน, งบเท่าไหร่, และ context เป็นภาษาอะไร (ภาษาไทยบาง Model ดีกว่า)"
+answer: "ขึ้นอยู่กับงาน ถ้าเป็นแชทบอททั่วไป ใช้ GPT-4o-mini หรือ Claude Haiku ก็พอ ถ้าเป็นงานวิเคราะห์ข้อมูล ใช้ GPT-4o หรือ Claude Sonnet ถ้าเป็นงานที่ต้องการความลับ ใช้ Local LLM (Llama, Qwen) เรามี AI Audit ฟรี ช่วยวิเคราะห์ว่าธุรกิจคุณควรใช้ AI ตัวไหน"
 ---

src/content/faq/017-support-warranty.md

@@ -1,6 +1,6 @@
 ---
 category: "หลังการขาย"
 category_icon: "🛠️"
-question: "มีการรับประกันไหม?"
+question: "มีประกันงานไหม?"
-answer: "รับประกัน 30 วันหลังส่งมอบ — ถ้าเจอบั๊กจากการพัฒนา (ไม่ใช่การเพิ่ม feature ใหม่) แก้ฟรีไม่จำกัดครั้ง"
+answer: "มี — ถ้าเว็บมีปัญหาจากการพัฒนาของเรา จะแก้ไขให้ฟรี 30-90 วันหลังส่งมอบ (ขึ้นอยู่กับประเภทงาน) ถ้าเกิดจากการแก้ไขของลูกค้าเอง จะคิดค่าแก้ตามจริง"
 ---

src/content/faq/018-support-channels.md

@@ -1,6 +1,6 @@
 ---
 category: "หลังการขาย"
 category_icon: "🛠️"
-question: "หลังส่งงานแล้ว support ยังไง?"
+question: "ติดต่อช่องทางไหน?"
-answer: "3 ช่องทาง — LINE Official (ตอบใน 2 ชม. เวลาทำการ), Email, โทรศัพท์กรณีเร่งด่วน ลูกค้าเว็บไซต์ได้แก้ content ฟรีตลอดอายุ Server"
+answer: "LINE OA: @moreminimore (ตอบเร็วที่สุด) · โทร: 080-995-5945 · Email: contact@moreminimore.com ทีมที่ตอบคือคนที่ทำงานให้คุณ ไม่ใช่ Bot ไม่ใช่คนอื่น"
 ---

src/content/faq/019-support-monthly.md

@@ -2,5 +2,5 @@
 category: "หลังการขาย"
 category_icon: "🛠️"
 question: "มีแพ็คเกจดูแลรายเดือนไหม?"
-answer: "มี — 2,000 บาท/เดือน (Maintenance: อัปเดต, backup, security patch) · 5,000 บาท/เดือน (Maintenance + แก้ content ไม่จำกัด) · 8,000 บาท/เดือน (ทั้งหมด + ปรับ SEO รายเดือน)"
+answer: "มี เริ่ม 2,000 บาท/เดือน รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE ถ้าไม่เอาแพ็คเกจ ก็จ่ายเป็นงาน ๆ ไป แล้วแต่ความเหมาะ"
 ---

src/content/faq/020-support-refund.md

@@ -1,6 +1,6 @@
 ---
 category: "หลังการขาย"
 category_icon: "🛠️"
-question: "ถ้าไม่พอใจผลงานจะเป็นยังไง?"
+question: "ถ้าไม่พอใจ ขอเงินคืนได้ไหม?"
-answer: "ก่อนเซ็นสัญญาเราจะส่ง Proposal + Wireframe ให้ approve ก่อน — ถ้าตอนส่งงานจริงไม่ตรงตามที่ตกลง แก้ฟรีจนกว่าจะตรง กรณีที่ตกลงกันไม่ได้จริง ๆ → คืนเงิน Pro-rata (เคยมีเคส 1 ครั้งใน 5 ปี)"
+answer: "ภายใน 7 วันแรกหลังเริ่มงาน ถ้าคุณรู้สึกว่าไม่ใช่ ขอยกเลิกได้ จะคืนเงินตามส่วนงานที่ยังไม่ได้ทำ เราไม่ผูก commitment"
 ---

src/content/pages/about.md

@@ -0,0 +1,86 @@
+---
+title: "เกี่ยวกับเรา"
+subtitle: "ที่ปรึกษาที่ทำงานเอง ไม่ใช่ทีมขายที่ส่งงานต่อ"
+hero_badge: "เกี่ยวกับเรา"
+---
+
+# เกี่ยวกับมอร์มินิมอร์
+
+## เริ่มจากตรงนี้
+
+มอร์มินิมอร์ ก่อตั้งปี 2020 จากประสบการณ์ตรงที่เห็น SME ไทยเสียเงินหลายแสนไปกับ
+
+- เว็บไซต์ที่ "สวยแต่ไม่มีคนเข้า"
+- โฆษณาที่ "ยิงเยอะแต่ไม่มีคนซื้อ"
+- AI tools ที่ "ว้าวแต่ใช้ไม่เป็น"
+
+เราเลยตั้งใจว่าจะทำให้ต่าง
+
+## นโยบายของเรา
+
+**เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า** เพราะถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็จะสามารถใช้บริการเราต่อไปได้
+
+ทุกระบบที่ส่งมอบต้องตอบคำถามเดียวให้ได้: **"ลูกค้ามีกำไรเพิ่มขึ้นจริงไหม"** — ไม่ใช่แค่ส่งงานตามสัญญา
+
+## วิธีทำงานของเรา
+
+เราไม่ได้ทำงานแบบเดียวกับทุกที่ — เพราะลูกค้าแต่ละคนมีบริบท งบประมาณ และทีมต่างกัน
+
+- **งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทาง** — เราจะทำเอง เพราะถ้าเราไม่ทำเอง เราจะตอบคำถามลูกค้าไม่ได้
+- **งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะ** — เราจะใช้ bot หรือ outsource ให้คนที่เชี่ยวชาญเฉพาะด้าน เพราะเรื่องบางเรื่อง คนที่ทำเป็นอาชีพจะทำได้ดีกว่า
+- **งานที่ต้องตอบลูกค้าตลอด 24 ชั่วโมง** — เราจะใช้ bot ช่วยคัดกรองเบื้องต้น แล้วเราจะตามด้วยคน เพราะบางเรื่อง bot ตอบไม่ได้
+
+สรุปคือ — **ผลงานที่ออกมาจะขึ้นอยู่กับบริบทของลูกค้า ไม่ใช่วิธีทำงานของเรา** เราเลือกวิธีที่จะทำให้ลูกค้าได้ผลลัพธ์ที่ดีที่สุด ไม่ใช่วิธีที่เราถนัดที่สุด
+
+## เราเชื่ออะไร
+
+- **เว็บสวยไม่ได้แปลว่าขายได้** — เว็บหลายเว็บที่ดูดีที่สุด ขายแย่ที่สุดก็มี
+- **AI ไม่ได้แทนทุกอย่าง** — แต่ถ้ารู้จักใช้ จะประหยัดหรือเปิดโอกาสใหม่ที่คาดไม่ถึง
+- **จ่ายแพงไม่ได้แปลว่าดี** — งาน 80% ใช้ของถูกได้ ส่วนที่เหลือค่อยใช้ของแพง
+- **ทำเผื่อมากเกินไป** มักจะทำให้จ่ายเกินความจำเป็น
+- **"สิ่งที่ถูกต้อง" ไม่ใช่ "สิ่งที่ลูกค้าต้องการ" เสมอไป** — เราเช็คเสมอว่าสิ่งที่เราจะทำตรงกับที่ลูกค้าต้องการจริงไหม
+- **ระบบที่สุดยอดที่คนใช้ไม่เป็น = เสียเงินเปล่า** — เราเน้นให้คนใช้ได้จริง ไม่ใช่แค่ส่งของแพง ๆ
+
+## เบื้องหลังการทำงาน
+
+เรานั่งทำงานที่บ้าน ใช้ MacBook ตัวเดียว แต่มี **เครื่องมือด้าน marketing intelligence** ที่ช่วยให้เราเข้าใจตลาดได้ลึกกว่าคนทั่วไป:
+
+- **ระบบดูโฆษณาคู่แข่ง** — ดูว่าคู่แข่งยิงโฆษณาอะไร คำไหน convert ดี งบประมาณเท่าไหร่ เพื่อให้ลูกค้าวางกลยุทธ์ได้โดยไม่ต้องเดา
+- **ระบบวิเคราะห์ keyword + SEO gap** — หาโอกาสที่คู่แข่งยังไม่ได้ทำ เพื่อให้ลูกค้าได้ traffic ก่อน
+- **ระบบติดตาม trend ตลาด** — รู้ว่าตลาดกำลังไปทางไหนก่อนที่ลูกค้าจะรู้ตัว
+- **Stack:** JavaScript, Python, PHP, n8n, OpenAI API, Meta API, Google Analytics, Looker Studio — แล้วแต่งาน
+
+## เรื่องเล่าจากลูกค้า
+
+> "จ่ายไม่อั้นเปิดตลาดใหม่ให้ที"
+> — ลูกค้าหลังขยายช่องทางการตลาดสำเร็จ
+
+> "ผลตอบรับดีเกินคาดแฮะ"
+> — ลูกค้าหลังปรับกลยุทธ์โฆษณา
+
+> "ผมตามประชุมแต่ลูกค้าบอกว่า 'ไม่ต้องหรอก เพราะคนทักมาจนยุ่งไปหมดแล้ว'"
+> — ลูกค้าหลังใช้ระบบจองออนไลน์/แชทบอททำงานแทน
+
+> "พี่คนโทรมาเพิ่มขึ้นครับ แถมถามสินค้าที่ไม่เคยมีคนถามด้วย"
+> — ลูกค้าหลัง SEO ติดอันดับและมีคนเข้าเว็บเพิ่ม
+
+(เรื่องเล่าจากคำตอบลูกค้าจริง ที่ระบุไว้ในบริบทการสนทนาตอนเริ่มโปรเจกต์)
+
+## ลูกค้าที่เหมาะกับเรา
+
+- SME ที่ต้องการคนช่วยดูเรื่อง Online Marketing และระบบ IT
+- ลูกค้าที่ไม่มีความรู้ IT มาก แต่จำเป็นต้องใช้ระบบ IT
+- คนที่ต้องการที่ปรึกษาจริง ๆ ไม่ใช่คนมาขายของ
+
+## ลูกค้าที่ไม่เหมาะ
+
+- องค์กรขนาดใหญ่ที่ต้องการความเป็นทางการสูง + การเมืองเยอะ + ต้องสร้างภาพลักษณ์เกินตัว
+- คนที่อยากได้ของฟรี หรือจ่ายน้อยระดับพัน แต่คาดหวังงานระดับแสน
+- กลุ่ม IT ทั่วไป — เป็นคู่แข่งเกือบทั้งหมด ยกเว้นกลุ่มขาย Software เฉพาะทาง เช่น ERP
+
+## กระบวนการทำงาน
+
+1. **ปรึกษาฟรี 30-60 นาที** — คุยกับเจ้าของธุรกิจ ฟังปัญหา เป้าหมาย งบประมาณ ให้คำแนะนำเบื้องต้น ไม่ผูก commitment
+2. **วางแผน + ส่ง Proposal** — วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็น PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น
+3. **ดำเนินการ** — เราจะแจ้งความคืบหน้าของงานเป็นช่วง ๆ ผ่าน LINE Group ของโปรเจกต์ คุณเห็นว่าเราทำอะไรไปแล้วบ้าง และจะมี demo เมื่อเราพร้อมส่งงานรอบใหญ่ ๆ เท่านั้น — เราไม่อยากผูกมัดตัวเองกับ deadline แบบ sprint เพราะงานจริงไม่ได้แบ่งเป็นรอบสั้น ๆ ได้ตลอด
+4. **ส่งมอบ + ดูแล** — ส่งมอบงาน + อบรมทีม + มอบคู่มือ หลังส่งมอบ ถ้ามีการปรับเปลี่ยนเล็ก ๆ น้อย ๆ หรือแก้ไขจุดบกพร่อง เราจะดูแลให้โดยไม่คิดค่าใช้จ่ายเพิ่ม ยกเว้นกรณีที่เป็นการสร้าง feature ใหม่ หรือปรับแต่งครั้งใหญ่ เราจะคิดค่าใช้จ่ายเป็นครั้ง ๆ ไปตามขอบเขตงาน

src/content/pages/home.md

@@ -0,0 +1,69 @@
+---
+badge: "ที่ปรึกษาที่วางกลยุทธ์จากข้อมูล ไม่ใช่จากประสบการณ์ล้วน ๆ"
+title: "เว็บขายไม่ได้ โฆษณาเปลือง งานซ้ำเติมคน — เราแก้ให้ตรงจุด"
+subtitle: "รับทำเว็บ ที่ปรึกษาการตลาด และวางระบบ AI ในองค์กร เริ่มจากดูสถิติของคุณก่อน ไม่ใช่เดาว่าควรทำอะไร"
+problem_section_title: "4 ปัญหาที่เจอบ่อยที่สุด"
+problem_section_subtitle: "แต่ละข้อมีวิธีแก้ที่เจาะจง — เราไม่ได้บอกว่า 'เราทำได้หมด' แต่บอกว่า 'ถ้าเป็นแบบนี้ ทำแบบนี้'"
+service_section_title: "ทำอะไรได้บ้าง"
+service_section_subtitle: "เริ่มจากอันที่ปวดที่สุด ค่อยขยายไปอันอื่น"
+service_cta: "ดูบริการทั้งหมด"
+portfolio_section_badge: "ผลงานจริง ไม่ใช่ Mockup"
+portfolio_section_title: "ลูกค้าจริง ตัวเลขจริง"
+portfolio_section_subtitle: "คลิกดูเว็บจริงได้เลย"
+portfolio_cta: "ดูผลงานทั้งหมด"
+final_cta_title: "คุยกันก่อน 30 นาที ฟรี"
+final_cta_desc: "เราจะถามคำถาม 5 ข้อ แล้วบอกคุณได้เลยว่าควรเริ่มจากตรงไหน — จะบอกตรง ๆ ว่าทำได้หรือทำไม่ได้"
+final_cta_button: "นัดคุย 30 นาที"
+final_cta_line: "ทัก LINE: @moreminimore"
+final_cta_reassurance: "ไม่มี commitment · ไม่มี script sales · พูดตรง ๆ"
+---
+
+# 4 ปัญหาที่ SME ไทยเจอบ่อยที่สุด
+
+เราเจอปัญหาแบบนี้ซ้ำ ๆ กับลูกค้า 4 แบบ แต่ละแบบมีวิธีแก้ต่างกัน
+
+## 1. ลงโฆษณาแล้วยอดไม่ขยับ
+
+**อาการ:** คลิกเยอะ ยอดขายเท่าเดิม งบหม<E0B8AB>ไปกับคนที่ไม่ซื้อ
+
+**สาเหตุส่วนใหญ่:** เลือกกลุ่มเป้าหมายผิด หรือยิงทุก Platform โดยไม่ดูว่าอันไหนคุ้ม
+
+**เราแก้ยังไง:** ดูสถิติ 3 เดือนย้อนหลัง แยกว่า Platform ไหน Convert ดี ตัดอันที่เสียเงินเปล่า ปรับ Creative ให้ดึงดูดคนที่พร้อมจ่าย
+
+> ตัวอย่าง: ลูกค้ารายหนึ่งเพิ่ม Impression 373% และเพิ่ม Click 114% ในเดือนแรก โดยใช้งบน้อยลง 28% — ดูเคสเต็มได้ที่หน้า Portfolio
+
+## 2. เว็บมีคนเข้า แต่ไม่มีคนซื้อ
+
+**อาการ:** Traffic เข้าพอสมควร แต่ไม่มีใครทัก ไม่มีใครโทร ตะกร้าค้าง
+
+**สาเหตุส่วนใหญ่:** เว็บสวยแต่ไม่ได้ออกแบบมาให้คนซื้อ หรือมีจุดติดขัดที่ทำให้คนออกก่อนซื้อ
+
+**เราแก้ยังไง:** ดู Heatmap ว่าคนเข้ามาแล้วทำอะไร ตรงไหนที่คนออก ตรงไหนที่คนค้าง ปรับจุดนั้น ๆ
+
+> ตัวอย่าง: ลูกค้า B2B รายหนึ่งมีคนเข้าเว็บเยอะ แต่ไม่มี Lead — เพิ่ม Lead 2.4 เท่าใน 1 เดือน โดยไม่ต้องเพิ่มงบโฆษณา
+
+## 3. งานซ้ำ ๆ ใช้เวลาคนเป็นชั่วโมงทุกวัน
+
+**อาการ:** ทีมต้องคีย์ข้อมูล ทำรายงาน ตอบแชตเดิม ๆ จนไม่มีเวลาทำงานหลัก
+
+**สาเหตุส่วนใหญ่:** ระบบเก่าที่ไม่ได้เชื่อมกัน หรือยังทำ Manual อยู่
+
+**เราแก้ยังไง:** ดู Workflow ก่อน แล้วเลือกเครื่องมือที่เหมาะ — บางงานใช้ n8n บางงานเขียน Script บางงานใช้ AI
+
+> ตัวอย่าง: บริษัทที่ปรึกษาขนาดเล็กใช้เวลาทำรายงาน 30+ ชม./เดือน — ลดเหลือ 2 ชม./เดือน
+
+## 4. ใช้ AI แต่ไม่เห็นผล
+
+**อาการ:** จ่ายแพง ใช้ AI ระดับ Frontier กับทุกงาน แต่ผลลัพธ์ไม่คุ้มเงิน
+
+**สาเหตุส่วนใหญ่:** ใช้ AI ผิดแบบ — งานหลายอย่างใช้ Model ราคาถูกก็ได้ผลเท่า ๆ กัน
+
+**เราแก้ยังไง:** เลือก AI ตามงาน ไม่ใช่เลือกของแพงสุด — เน้น Local LLM สำหรับงานที่ต้องการความลับ
+
+> ตัวอย่าง: งาน 80% ของธุรกิจใช้ Model ราคาถูกได้ ประหยัดค่าใช้จ่ายได้มากกว่าครึ่ง
+
+---
+
+# เริ่มจากตรงไหนดี?
+
+ถ้าไม่แน่ใจว่าปัญหาของคุณตรงกับข้อไหน — นัดคุย 30 นาทีฟรี เราจะช่วยดู

src/content/portfolio/baofuling.md

@@ -1,11 +1,12 @@
 ---
-name: Baofuling Shop
+name: "Baofuling Shop"
-url: https://baofulingshop.com
+url: "https://baofulingshop.com"
-category: ecommerce
+category: "webdev"
-category_label: อีคอมเมิร์ซ
+category_label: "Website Development"
-industry: 💊 สินค้าอุปโภค
+industry: "สินค้าความงาม"
-thumbnail: /images/portfolio/baofuling.png
+what_we_did: "พัฒนาเว็บไซต์ E-commerce ขายสินค้าสกินแคร์ พร้อมระบบตะกร้า + ชำระเงิน"
-description: ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน
+result: "เว็บไซต์ขายของออนไลน์ครบวงจร ดูแลเองได้"
-what_we_did: ร้านค้าออนไลน์ + AI Chatbot แนะนำสินค้า
+thumbnail: "/images/portfolio/baofuling.png"
-result: Conversion rate 3.2% (สูงกว่าค่าเฉลี่ยอุตสาหกรรมความงาม 2 เท่า)
+featured: true
+order: 19
 ---

src/content/portfolio/dataroot.md

@@ -0,0 +1,58 @@
+---
+name: "Dataroot"
+url: "https://erp.dataroot.asia"
+category: "consult"
+category_label: "Consult"
+industry: "ตัวแทนจำหน่าย Odoo ERP ในไทย"
+thumbnail: "/images/portfolio/dataroot.png"
+description: "ตัวแทนจำหน่าย Odoo ERP ในไทย → วิเคราะห์กลุ่มเป้าหมาย + ปรับโครงสร้างแคมเปญ + ขยายช่องทาง Facebook"
+what_we_did: "วิเคราะห์ข้อมูลโฆษณา 3 เดือน + เจาะกลุ่มเป้าหมายใหม่ + ขยายช่องทาง Facebook"
+result: "Impression ↑373%, Click ↑114.2%, Ad spend ↓28.3%, Lead ใหม่จาก FB"
+featured: true
+order: 1
+case_study: true
+---
+
+# Case Study: Dataroot (ตัวแทนจำหน่าย Odoo ERP)
+
+> Flagship case study ของเรา — ผลลัพธ์ชัดเจน วัดผลได้ เป็นตัวอย่างของ "วางกลยุทธ์จากข้อมูล"
+
+## บริบท
+
+Dataroot เป็นตัวแทนจำหน่าย Odoo ERP ในไทย มีบริการอยู่แล้ว แต่โฆษณาเดิมยิงแบบกว้าง — คลิกเยอะ แต่คนที่สนใจจริง ๆ น้อย งบโฆษณากินเดือนละหลายแสนโดยไม่รู้ว่าเงินไปไหน
+
+## ปัญหา
+
+- ยิงโฆษณาแบบ "กลุ่มกว้าง" ได้คลิกเยอะ แต่คนที่กำลังมองหา ERP จริง ๆ น้อย
+- ไม่มีการแยกว่าคลิกมาจากกลุ่มไหน จึงปรับอะไรไม่ถูก
+- ค่าใช้จ่ายต่อ Lead สูงเกินจุดคุ้มทุน
+
+## สิ่งที่เราทำ
+
+เริ่มจากดูสถิติเดิม ไม่ใช่เริ่มจากอยากยิงอะไร
+
+1. **วิเคราะห์ข้อมูล 3 เดือนย้อนหลัง** — แยกว่าคลิกมาจากกลุ่มอายุ/ความสนใจไหน แล้วกลุ่มไหนมี Lead คุณภาพ
+2. **เจาะกลุ่มเป้าหมายใหม่** — ตัดกลุ่มที่คลิกเยอะแต่ไม่ซื้อออก เพิ่มงบให้กลุ่มที่ Convert ดี
+3. **ปรับโครงสร้างแคมเปญ** — แยก Awareness / Consideration / Conversion ชัดเจน
+4. **ขยายช่องทาง Facebook** — เพิ่มช่องทาง Lead ใหม่ที่ไม่เคยใช้
+
+## ผลลัพธ์ (เดือนแรก)
+
+| ตัวชี้วัด | ก่อน | หลัง (เดือนแรก) |
+|---|---|---|
+| Impression | 100% | **473%** ↑373% |
+| Click | 100% | **214%** ↑114.2% |
+| Ad spend | 100% | **71.7%** ↓28.3% |
+| Lead ใหม่ (Facebook) | 0 | เริ่มมี |
+
+**สรุป:** ใช้งบน้อยลงเกือบ 30% แต่คนเห็นโฆษณาเกือบ 5 เท่า และคนคลิกเพิ่มขึ้น 2 เท่า
+
+## เคสเกือบพัง (เรียนรู้จากงานอื่น)
+
+ในเคสอื่น ๆ เราเคยยิงโฆษณาไปกลุ่ม "คนสนใจเรื่องการเงิน" เพราะคิดว่าสินค้าลูกค้าเกี่ยวกับการลงทุน — ผลคือมีแต่คนมาขอกู้เงิน เพราะเข้าใจว่าลูกค้าเราเป็นสถาบันการเงิน
+
+**บทเรียน:** การเลือกกลุ่มเป้าหมายต้องดู "คนที่จะซื้อ" ไม่ใช่ "คนที่คลิกง่าย"
+
+## เว็บไซต์
+
+[erp.dataroot.asia](https://erp.dataroot.asia) — เว็บปัจจุบันของ Dataroot

src/content/portfolio/jet-industries.md

@@ -1,11 +1,12 @@
 ---
-name: Jet Industries
+name: "Jet Industries"
-url: https://jetindustries.co.th
+url: "https://jetindustries.co.th"
-category: webdev
+category: "webdev"
-category_label: พัฒนาเว็บไซต์
+category_label: "Website Development"
-industry: 🏭 โรงงาน
+industry: "โรงงาน / B2B"
-thumbnail: /images/portfolio/jetindustries.png
+what_we_did: "ออกแบบ + พัฒนาเว็บไซต์ B2B ทันสมัย"
-description: ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี
+result: "เว็บไซต์ที่สื่อสารตรงกับกลุ่มลูกค้า B2B สมัครใช้งานง่ายขึ้น"
-what_we_did: ออกแบบเว็บ B2B + SEO เทคนิค + Multi-language (TH/EN/JP)
+thumbnail: "/images/portfolio/jetindustries.png"
-result: ลูกค้าจากญี่ปุ่นและออสเตรเลียติดต่อเข้ามา 5–8 ราย/เดือน
+featured: true
+order: 18
 ---

src/content/portfolio/lawyernoom.md

@@ -1,11 +1,12 @@
 ---
-name: สำนักงานกฎหมาย ตถาตา
+name: "สำนักงานกฎหมาย ตถาตา"
-url: https://lawyernoom.com
+url: "https://lawyernoom.com"
-category: webdev
+category: "webdev"
-category_label: พัฒนาเว็บไซต์
+category_label: "Website Development"
-industry: ⚖️ สำนักงานกฎหมาย
+industry: "สำนักงานกฎหมาย"
-thumbnail: /images/portfolio/lawyernoom.png
+what_we_did: "ออกแบบเว็บไซต์สำนักงานกฎหมาย น่าเชื่อถือ + SEO ท้องถิ่น"
-description: สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา
+result: "เว็บไซต์มืออาชีพที่สร้างความเชื่อมั่นให้ลูกความ"
-what_we_did: เว็บไซต์มาตรฐาน + SEO คีย์เวิร์ด "ทนายความ" ในจังหวัด
+thumbnail: "/images/portfolio/lawyernoom.png"
-result: ติดหน้า 1 Google ใน 4 เดือน ลูกค้าโทรเข้ามา 10+ ราย/เดือน
+featured: true
+order: 17
 ---

src/content/portfolio/luadjob.md

@@ -1,11 +1,12 @@
 ---
 name: "เลือดจระเข้วานิไทย"
-url: "https://xn--12cail1ab7a6a8b5e5c.com"
+url: "https://เลือดจระเข้วานิไทย.com"
-category: ecommerce
+category: "consult, webdev"
-category_label: อีคอมเมิร์ซ
+category_label: "Consult + Website Development"
-industry: 💊 สินค้าอุปโภค
+industry: "สินค้าอุปโภค / สุขภาพ"
-thumbnail: /images/portfolio/luadjob.png
+what_we_did: "พัฒนาเว็บไซต์ร้านค้าสมุนไพรและผลิตภัณฑ์เพื่อสุขภาพ"
-description: ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ
+result: "เว็บไซต์ร้านค้าออนไลน์สำหรับผลิตภัณฑ์สุขภาพ"
-what_we_did: ร้านค้าออนไลน์ + LINE OA + แชทบอทตอบคำถามสินค้า
+thumbnail: "/images/portfolio/luadjob.png"
-result: ลดเวลาตอบแชต 70% ทีมเซลล์โฟกัสการปิดดีลได้เต็มที่
+featured: true
+order: 16
 ---

src/content/portfolio/lungfinler.md

@@ -1,11 +1,12 @@
 ---
-name: Lungfinler
+name: "Lungfinler"
-url: https://lungfinler.com
+url: "https://lungfinler.com"
-category: webdev
+category: "webdev"
-category_label: พัฒนาเว็บไซต์
+category_label: "Website Development"
-industry: 🎨 Digital Agency
+industry: "Digital Agency"
-thumbnail: /images/portfolio/lungfinler.png
+what_we_did: "ออกแบบ + พัฒนาเว็บไซต์เอเจนซี่ดิจิตอล พร้อมระบบ Portfolio และ Blog"
-description: Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง
+result: "เว็บไซต์เอเจนซี่ครบวงจร แสดงผลงานได้สวยงาม"
-what_we_did: พัฒนาเว็บไซต์ portfolio + เชื่อม LINE OA ตอบลูกค้าอัตโนมัติ
+thumbnail: "/images/portfolio/lungfinler.png"
-result: Lead เพิ่มขึ้น 3 เท่าใน 2 เดือนหลังเปิดเว็บ
+featured: true
+order: 15
 ---

src/content/portfolio/odooportal.md

@@ -1,11 +0,0 @@
----
-name: Odoo Portal
-url: https://odooportal.com
-category: marketing
-category_label: ที่ปรึกษาการตลาด
-industry: 📈 ที่ปรึกษาธุรกิจ
-thumbnail: /images/portfolio/odooportal.png
-description: ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย
-what_we_did: เว็บ Landing Page + Lead form + CRM integration
-result: Lead-to-customer 12% (สูงกว่าค่าเฉลี่ย SaaS 4–6% เกือบ 3 เท่า)
----

src/content/portfolio/trainersunny.md

@@ -1,11 +1,12 @@
 ---
-name: เทรนเนอร์ซันนี่
+name: "เทรนเนอร์ซันนี่"
-url: https://trainersunny.com
+url: "https://trainersunny.com"
-category: webdev
+category: "webdev"
-category_label: พัฒนาเว็บไซต์
+category_label: "Website Development"
-industry: 📚 สถาบัน / การศึกษา
+industry: "Personal Brand / การศึกษา"
-thumbnail: /images/portfolio/trainersunny.png
+what_we_did: "พัฒนาเว็บไซต์อบรมสัมมนาพัฒนาศักยภาพบุคลากร พร้อมระบบลงทะเบียน"
-description: ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill
+result: "เว็บไซต์อบรมที่ดูมืออาชีพ เพิ่มความน่าเชื่อถือ"
-what_we_did: เว็บ Personal Brand + Course landing page + Email automation
+thumbnail: "/images/portfolio/trainersunny.png"
-result: Course launch แรกทำรายได้ 280,000 บาท ใน 7 วัน
+featured: true
+order: 13
 ---

src/content/portfolio/tuanthong.md

@@ -1,11 +1,12 @@
 ---
-name: ทวนทอง 99
+name: "ทวนทอง 99"
-url: https://tuanthong99.com
+url: "https://tuanthong99.com"
-category: ecommerce
+category: "webdev"
-category_label: อีคอมเมิร์ซ
+category_label: "Website Development"
-industry: 🛒 E-commerce
+industry: "สินค้าอุปโภคบริโภค"
-thumbnail: /images/portfolio/tuanthong.png
+what_we_did: "พัฒนาเว็บไซต์ขายของออนไลน์ + ระบบตะกร้า + จัดการสินค้าด้วยตัวเอง"
-description: ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง
+result: "เว็บไซต์ขายสินค้าอุปโภคบริโภค ดูแลเองได้ สะดวกรวดเร็ว"
-what_we_did: เว็บไซต์ + ระบบสั่งซื้อ + ผูก Facebook Pixel
+thumbnail: "/images/portfolio/tuanthong.png"
-result: ROAS โฆษณาเฉลี่ย 4.8 เท่า
+featured: true
+order: 11
 ---

src/content/portfolio/underdog.md

@@ -1,11 +1,12 @@
 ---
-name: Underdog Marketing
+name: "Underdog Marketing"
-url: https://underdog.run
+url: "https://underdog.run"
-category: webdev
+category: "webdev"
-category_label: พัฒนาเว็บไซต์
+category_label: "Website Development"
-industry: 📈 Marketing Agency
+industry: "Marketing Agency"
-thumbnail: /images/portfolio/underdog.png
+what_we_did: "พัฒนาเว็บไซต์บล็อกบทความการตลาด พร้อมระบบ CMS จัดการเนื้อหา"
-description: บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู
+result: "แพลตฟอร์มบทความการตลาดที่ใช้งานง่าย SEO Friendly"
-what_we_did: พัฒนา Blog + Newsletter system
+thumbnail: "/images/portfolio/underdog.png"
-result: สมัครสมาชิก 1,200+ คนใน 6 เดือน
+featured: true
+order: 12
 ---

src/content/services/ai-consult-new.mdx

@@ -0,0 +1,72 @@
+---
+title: "AI Consult"
+subtitle: "AI ที่ใช้ในองค์กร เน้นความคุ้มค่าและรักษาความลับ"
+badge: "ที่ปรึกษาด้าน AI"
+category: "tech-consult"
+objective: "รักษาความรู้ขององค์กร"
+short_desc: "เก็บความรู้และประสบการณ์ของพนักงานให้อยู่กับองค์กร ใช้ Local LLM สำหรับงานที่ต้องการความลับ"
+---
+
+# AI Consult
+
+## เราทำ AI แบบนี้
+
+AI ไม่ได้แทนทุกอย่างได้ แต่ถ้ารู้จักใช้ จะประหยัดหรือเปิดโอกาสใหม่ที่คาดไม่ถึง
+
+**เราไม่ได้เลือก AI ที่แพงที่สุดเสมอไป** — งานหลายอย่างใช้ Model ราคาถูกก็ได้ผลเท่า ๆ กัน ช่วยประหยัดค่าใช้จ่ายได้มากกว่าครึ่ง
+
+**เราเน้น Local LLM** สำหรับงานที่ต้องการความลับ — เพราะข้อมูลของลูกค้าเป็นเรื่องสำคัญ
+
+## วัตถุประสงค์หลัก: เก็บความรู้ให้อยู่กับองค์กร (KM)
+
+ถ้าพนักงานลาออกหรือเปลี่ยน พนักงานใหม่ที่เข้ามาจะเรียนรู้งานเองได้ไว ลดการลองผิดลองถูก ทำให้การทำงานไม่สะดุด ลดความผิดพลาดในระยะยาว
+
+องค์กรจะพึ่งพนักงานที่มีความสามารถเฉพาะตัวน้อยลง เพราะข้อมูลการทำงานมีการเก็บเข้าคลังความรู้ตลอด
+
+## AI เปรียบเสมือน "พี่เลี้ยง" ในองค์กร
+
+- **พนักงานใหม่** ถาม AI ได้เลย เหมือนมีพี่เลี้ยงคอยแนะนำ
+- **ผู้บริหาร** ถามข้อมูลเชิงลึก หรือตั้งค่าให้ AI รายงานตามเวลา/เหตุการณ์ที่กำหนด
+- **ยิ่งพนักงานคุยกับ AI เยอะ** ยิ่งเก็บข้อมูลเชิงลึกได้มาก AI ก็ยิ่งฉลาดขึ้น
+
+## ใช้ AI ตัวไหน? เราเลือกให้เหมาะกับงาน
+
+| ประเภทงาน | AI ที่ใช้ | ทำไม |
+|---|---|---|
+| ตอบแชท/งานทั่วไป | Model ราคาถูก (Haiku, Mini, local) | ประหยัด ได้ผลพอ |
+| วิเคราะห์ข้อมูล/เขียนรายงาน | Model ระดับกลาง | สมดุลระหว่างคุณภาพและราคา |
+| งานที่ต้องการความลับ/PDPA | Local LLM | ข้อมูลไม่ออกจากเครื่อง |
+| งานเฉพาะทางที่ซับซ้อนมาก | Model ระดับ Frontier | ใช้เฉพาะเมื่อจำเป็น |
+
+## กระบวนการทำงาน
+
+1. **AI Audit (ฟรี)** — วิเคราะห์ว่าธุรกิจควรใช้ AI ตัวไหน ตรงไหน
+2. **วาง AI Strategy** — เลือกเครื่องมือ วาง Roadmap การใช้ AI ในองค์กร
+3. **พัฒนา + Integrate** — เชื่อม AI เข้ากับ Workflow เดิม
+4. **Train + ดูแล** — สอนทีมใช้ ปรับปรุงตามผลตอบรับ
+
+## เมื่อไหร่ที่เหมาะกับเรา
+
+- พนักงานเปลี่ยนบ่อย ความรู้สะสมหาย
+- มีข้อมูลเยอะ แต่ใช้ไม่เป็น
+- อยากใช้ AI แต่กังวลเรื่องความลับ/PDPA
+- อยากลดเวลา Onboard พนักงานใหม่
+- ผู้บริหารอยากได้ AI เหมือนเลขาส่วนตัว
+
+## เมื่อไหร่ที่ไม่เหมาะ
+
+- แค่อยากลองเล่น ChatGPT — ไม่ต้องจ้างเรา ใช้เองได้เลย
+- คิดว่า AI แทนพนักงานได้ทุกอย่าง — ยังทำไม่ได้ AI เป็นเครื่องมือ ไม่ใช่คน
+- มีข้อมูลน้อยมาก AI เรียนรู้ไม่ได้
+
+## ตัวอย่างงาน
+
+ดูตัวอย่างงานจริงทั้งหมดได้ที่หน้า Portfolio
+
+## สิ่งที่กำลังทดลอง
+
+- ระบบ Harness และ AI Memory ใหม่ ๆ
+- Model ที่ถูกกว่า เพื่อให้ได้ผลลัพธ์ใกล้เคียง Model แพง
+- รูปแบบการตลาดใหม่ ๆ เช่น SEO กับ GEO ในยุค AI
+- ความเสี่ยงที่คนจะเชื่อ AI จนไม่สนใจว่าข้อมูลถูกหรือผิด — เรื่องนี้สำคัญ
+- ช่องทางการขายใหม่ ๆ ที่นอกเหนือจากที่คนส่วนใหญ่ใช้

src/content/services/automation-new.mdx

@@ -0,0 +1,75 @@
+---
+title: "Automation Consult"
+subtitle: "ระบบอัตโนมัติที่ออกแบบเฉพาะธุรกิจคุณ ไม่ใช่ใช้ของสำเร็จรูป"
+badge: "วางระบบ Automation"
+category: "tech-consult"
+objective: "ลดต้นทุนและเวลา"
+short_desc: "เลือกเครื่องมือที่เหมาะกับงาน — n8n, Script เฉพาะทาง, หรือ AI วิเคราะห์"
+---
+
+# Automation Consult
+
+## เราทำ Automation แบบนี้
+
+เริ่มจากดู Workflow ปัจจุบันของคุณก่อน แล้วถามว่า "ขั้นตอนไหนที่ซ้ำ ทำมือ แล้วเสียเวลา"
+
+แล้วค่อยเลือกเครื่องมือที่เหมาะ — ไม่ใช่ทุกงานต้องใช้เครื่องมือเดียวกัน
+
+- **งานบางอย่าง** ใช้ n8n (Workflow automation)
+- **งานบางอย่าง** เขียน Script เฉพาะทาง
+- **งานบางอย่าง** ใช้ AI วิเคราะห์หรือตัดสินใจ
+- **งานบางอย่าง** ใช้ทั้ง 3 อย่างผสมกัน
+
+## บริการนี้เหมือนได้ AI Developer มาใช้
+
+เราไม่ได้เขียนแอปทั้งแอป เราโฟกัสที่ **งานเฉพาะจุดที่ Developer ปกติไม่อยากทำ** — แต่เป็นงานที่กินเวลาทีมเยอะ
+
+## กระบวนการทำงาน
+
+1. **รับ Requirement + ศึกษา Workflow (1-2 สัปดาห์)** — ดูว่างานไหนทำซ้ำ ตรงไหนคอขวด
+2. **เลือกเครื่องมือ + ออกแบบ (1-2 สัปดาห์)** — เลือก Tool ที่เหมาะ วางแผนว่าจะเชื่อมต่อระบบอะไร
+3. **พัฒนา + ทดสอบ (2-6 สัปดาห์)** — พัฒนาแบบ Sprint ส่ง Demo ให้ทดสอบ
+4. **Deploy + ดูแล (ต่อเนื่อง)** — ติดตั้งจริง สอนทีมใช้ ดูแลต่อ
+
+## ประเภทงานที่ทำ
+
+### งานเชื่อมต่อระบบ
+
+- เชื่อม POS + บัญชี + สต็อก เข้าด้วยกัน
+- เชื่อม CRM + Email + LINE OA
+- เชื่อม Excel/Google Sheets กับระบบภายใน
+
+### งาน Automate รายงาน
+
+- รายงานยอดขายรายวัน/สัปดาห์/เดือน
+- แจ้งเตือนอัตโนมัติเมื่อตัวเลขผิดปกติ
+- ดึงข้อมูลจากหลายแหล่งมารวมในที่เดียว
+
+### งาน Automate การสื่อสาร
+
+- Chatbot LINE OA ตอบคำถามซ้ำ
+- ตอบ DM อัตโนมัติ
+- แจ้งเตือนลูกค้า/ทีม ตามเงื่อนไข
+
+### งานเฉพาะทาง
+
+- เขียน Script สำหรับงานเฉพาะของธุรกิจ
+- AI วิเคราะห์ข้อมูล/รูปภาพ
+- ระบบจอง/คิว/นัดหมาย
+
+## เมื่อไหร่ที่เหมาะกับเรา
+
+- ทีมเสียเวลากับงานซ้ำ ๆ เป็นชั่วโมงทุกวัน
+- มีระบบหลายตัวที่ไม่คุยกัน
+- อยากลดเวลาในการทำรายงาน/ตอบแชตซ้ำ
+- มี Workflow ที่ชัดเจน แต่ขาดคนมาทำให้อัตโนมัติ
+
+## เมื่อไหร่ที่ไม่เหมาะ
+
+- Workflow ยังไม่ชัด ยังเปลี่ยนบ่อย — รอให้นิ่งก่อนแล้วค่อย Automate
+- อยากได้ระบบใหม่ทั้งหมด — เราเชี่ยว Automate ของเดิม ไม่ใช่สร้างแอปทั้งแอป
+- งานที่ต้องใช้ดุลยพินิจคนเยอะ ๆ — AI ยังทำแทนไม่ได้ทุกเรื่อง
+
+## ตัวอย่างงาน
+
+ดูตัวอย่างงานจริงทั้งหมดได้ที่หน้า Portfolio — มีเคสหลากหลายตั้งแต่คลินิก ร้านอาหาร สถานศึกษา ไปจนถึงที่ปรึกษา

src/content/services/marketing-new.mdx

@@ -0,0 +1,61 @@
+---
+title: "Online Marketing Consult"
+subtitle: "วางกลยุทธ์จากข้อมูล ไม่ใช่จากประสบการณ์ล้วน ๆ"
+badge: "ที่ปรึกษาการตลาดออนไลน์"
+category: "marketing"
+objective: "เพิ่มยอดขาย"
+short_desc: "ดูสถิติก่อนยิงโฆษณา — เลือก Platform ที่คุ้ม ตัดอันที่เสียเงินเปล่า"
+---
+
+# Marketing Consult
+
+## เราทำการตลาดแบบนี้
+
+เราไม่ได้เริ่มจากอยากยิงโฆษณาอะไร เราเริ่มจากดูข้อมูลของลูกค้าก่อน — สถิติคนเข้าเว็บ สถิติคนคลิกโฆษณา ยอดขายแยกตามสินค้าและกลุ่มลูกค้า
+
+แล้วค่อยวางกลยุทธ์ว่าจะยิงที่ไหน ใช้ Creative แบบไหน เจาะกลุ่มเป้าหมายใคร
+
+**กลยุทธ์ของเราไม่ได้จำกัดอยู่แค่เว็บ Social Media หรือโฆษณา** — เรามองภาพรวมและวางแผนในทุกช่องทางให้สอดคล้องกัน เลือกช่องทางที่เหมาะกับสินค้าและกลุ่มเป้าหมายจริง ๆ
+
+## กระบวนการทำงาน
+
+1. **ตั้งระบบเก็บข้อมูล (1-2 สัปดาห์)** — GA4, Meta Pixel, ระบบแยกยอดขายตามสินค้า/กลุ่มสินค้า/กลุ่มลูกค้า (ถ้าทำได้)
+2. **วิเคราะห์ + วางกลยุทธ์ (1-2 สัปดาห์)** — ดูว่าสินค้าไหนขายดี กลุ่มไหนซื้อ ช่องทางไหนคุ้ม → เขียนแผนกลยุทธ์
+3. **ลงมือ + วัดผล (ต่อเนื่อง)** — ปรับ Creative, ปรับกลุ่มเป้าหมาย, ขยาย/ตัดช่องทาง พร้อมดูตัวเลขทุกสัปดาห์
+4. **สอนทีม (ต่อเนื่อง)** — ถ้าทีมลูกค้าขาดความรู้ในเรื่องใด เราจะสอนเสริมให้ เพื่อให้ทำต่อได้ด้วยตัวเอง
+
+## สิ่งที่เราทำ
+
+- **วางแผนกลยุทธ์ช่องทาง** — เลือก Platform ที่เหมาะกับสินค้า ไม่ใช่ยิงทุกที่
+- **เจาะกลุ่มเป้าหมาย** — ดูข้อมูลว่าใครซื้อจริง ไม่ใช่ใครคลิกง่าย
+- **ปรับ Creative + Copy** — ให้ดึงดูดคนที่พร้อมจ่าย ไม่ใช่คนที่เทียบราคา
+- **ปรับ Funnel** — ให้คนเข้ามาแล้วเดินต่อจนซื้อ
+- **วัดผล + รายงาน** — ตัวเลขจริง ไม่ใช่ "ยอดดีขึ้น" แบบกำกวม
+
+## เมื่อไหร่ที่เหมาะกับเรา
+
+- มีเว็บไซต์และกิจกรรมออนไลน์อยู่แล้ว แต่ยอดไม่โต
+- อยากเปลี่ยนจาก "ยิงแล้วหวัง" เป็น "ยิงแล้วรู้ว่าเกิดอะไรขึ้น"
+- อยากให้ทีมเรียนรู้ไปด้วย ไม่ใช่จ้างเราตลอด
+
+## เมื่อไหร่ที่ไม่เหมาะ
+
+- งบน้อยมาก ไม่พอจะยิงโฆษณาเลย — เริ่มจาก SEO/Content ดีกว่า
+- อยากได้ผลใน 1 สัปดาห์ — เราเน้นงานที่ยั่งยืน ไม่ใช่แค่ยิงให้ขายได้แล้วหยุด
+- คิดว่า "ยิงเยอะ ๆ แล้วจะขายได้เอง" — ไม่จริงเสมอไป บางทียิงน้อยแต่ตรงกลุ่มดีกว่า
+
+## ตัวอย่างงาน
+
+- **Dataroot** (Flagship) — เพิ่ม Impression 373%, Click 114.2%, ลดงบโฆษณา 28.3% ในเดือนแรก — ดูเคสเต็มได้ที่หน้า Portfolio
+
+ดูตัวอย่างงานจริงอื่น ๆ ทั้งหมดได้ที่หน้า Portfolio
+
+## บทเรียนจากเคสที่เกือบพัง
+
+เคยยิงโฆษณาไปกลุ่ม "คนสนใจเรื่องการเงิน" เพราะคิดว่าสินค้าลูกค้าเกี่ยวกับการลงทุน — ผลคือมีแต่คนมาขอกู้เงิน เพราะเข้าใจว่าลูกค้าเราเป็นสถาบันการเงิน
+
+**บทเรียน:** เลือกกลุ่มเป้าหมายต้องดู "คนที่จะซื้อ" ไม่ใช่ "คนที่คลิกง่าย"
+
+อีกเคส — ขายสินค้าบน Platform โดยไม่ได้คำนวณค่าธรรมเนียมแฝง (ค่าธรรมเนียม Platform, ค่าจัดส่ง, ค่าคืนสินค้า, ส่วนลด) ขายได้เยอะ แต่กำไรหายเกือบหมด
+
+**บทเรียน:** ขายดี ≠ มีกำไร ต้องคำนวณต้นทุนแท้จริงก่อนวางแผน

src/content/services/webdev-new.mdx

@@ -0,0 +1,81 @@
+---
+title: "Website Development"
+subtitle: "เว็บไซต์ที่ขายได้ ไม่ใช่เว็บที่สวย"
+badge: "พัฒนาเว็บไซต์"
+category: "webdev"
+objective: "ทำเว็บให้ขายได้"
+short_desc: "เว็บไซต์ที่ออกแบบมาเพื่อให้คนซื้อ ไม่ใช่เพื่อให้คนชอบ — Astro สำหรับเว็บทั่วไป, WordPress สำหรับ E-commerce"
+
+# ไม่ได้อยู่ใน Astro case study เพราะเป็น static frontmatter
+---
+
+# Website Development
+
+## เราทำเว็บแบบนี้
+
+เริ่มจากถามว่า "เว็บนี้ทำเพื่ออะไร" ก่อน — ขายของ? เก็บ Lead? สร้างความน่าเชื่อถือ? เพราะเว็บแต่ละแบบต้องออกแบบต่างกัน
+
+เราไม่ได้เน้นให้เว็บสวย เราเน้นให้เว็บทำหน้าที่ของมันได้ เพราะเว็บหลายเว็บที่ดูดีที่สุด ขายแย่ที่สุดก็มี
+
+## เลือกระบบตามงาน
+
+### Astro — เว็บทั่วไป, Blog, เว็บบริษัท, Landing Page
+
+**เหมาะกับ:** เว็บที่ไม่ซับซ้อน เน้นความเร็ว SEO และการโหลดเร็ว
+
+**ระยะเวลา:** 14-30 วัน
+
+**ได้อะไร:**
+- เว็บไซต์ที่โหลดเร็วมาก (Google PageSpeed 90+)
+- SEO พร้อมตั้งแต่วันแรก — ติด Google ได้เร็ว
+- Chatbot AI ที่ปรับแก้เว็บไซต์ได้เอง (เฉพาะเว็บที่ใช้ Host ของเรา)
+- ระบบแก้ไขเนื้อหาด้วย AI — คุยกับ AI ให้ช่วยเขียน/แก้บทความ
+
+### WordPress — E-commerce, เว็บที่มีระบบหลังบ้านซับซ้อน
+
+**เหมาะกับ:** เว็บที่ต้องมี Database เยอะ ระบบซับซ้อน หรือมี Design มาให้แล้ว
+
+**ระยะเวลา:** 2-4 เดือน
+
+**ได้อะไร:**
+- ระบบหลังบ้านที่ลูกค้าแก้เองได้ (เพิ่มสินค้า แก้รูป เขียนบทความ)
+- E-commerce ครบชุด (ตะกร้า, ชำระเงิน, ติดตามพัสดุ)
+- Plugin เสริมได้ตามต้องการ
+
+## กระบวนการทำงาน
+
+1. **คุย Requirement (1-2 วัน)** — ถามว่าเว็บนี้ต้องทำอะไร ใครเป็นคนใช้ เน้นเรื่องอะไร
+2. **วางโครง + ออกแบบ (3-7 วัน)** — ส่ง Proposal โครงสร้างเว็บ + Mockup ให้ดูก่อนเซ็น
+3. **พัฒนา (10-20 วัน)** — ส่ง Demo ให้ดูทุกสัปดาห์ ไม่ใช่ส่งทีเดียวตอนจบ
+4. **ทดสอบ + แก้ไข (3-5 วัน)** — ทดสอบจริง แก้ตามฟีดแบ็ค
+5. **ส่งมอบ + อบรม (1 วัน)** — ส่งมอบ + สอนใช้งาน + มอบคู่มือ
+
+## เมื่อไหร่ที่เหมาะกับเรา
+
+- เว็บที่ต้องโหลดเร็ว ติด Google ง่าย
+- เว็บที่ลูกค้าต้องแก้เนื้อหาเองได้บ่อย ๆ
+- เว็บ E-commerce ที่ต้องการระบบครบ
+
+## เมื่อไหร่ที่ไม่เหมาะ
+
+- ต้องการเว็บ Landing Page ราคาถูก ๆ ไม่กี่พัน — เราไม่ทำ เราเน้นเว็บที่ต้องทำงานจริง
+- ต้องการเว็บแบบเดียวกับที่อื่น — เราชอบออกแบบให้เหมาะกับงาน ไม่ใช่ใช้ Template เดียวกับทุกคน
+- ต้องการเว็บที่ไม่ต้องดูแลต่อ — เราแนะนำให้มีแพ็คเกจดูแลรายเดือน เพราะเว็บที่ปล่อยทิ้งจะตาย
+
+## ตัวอย่างงาน
+
+ดูตัวอย่างงานจริงทั้งหมดได้ที่หน้า Portfolio
+
+## คำถามที่ลูกค้าถามบ่อย
+
+**แก้เว็บเองยากไหม?**
+ไม่ยาก — สำหรับ Astro จะคุยกับ AI ให้ช่วยแก้เนื้อหา ส่วน WordPress มีระบบหลังบ้านใช้งานง่าย เปลี่ยนข้อความ รูป สินค้า ได้ด้วยตัวเอง
+
+**มีค่าใช้จ่ายอะไรเพิ่มไหม?**
+ค่า Host + โดเมนฟรีปีแรก ปีถัดไปคิดตามจริง — เริ่มต้น 5,000 บาท/ปี
+
+**ทำเว็บ E-commerce ได้ไหม?**
+ได้ ใช้ WordPress + WooCommerce พร้อมระบบชำระเงิน ติดตามพัสดุ ครบ
+
+**GEO คืออะไร?**
+Generative Engine Optimization — ปรับเว็บให้ถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจปรากฏในคำตอบ AI

src/data/portfolio.ts

@@ -64,11 +64,11 @@ export const portfolioItems = [
     description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง"
   },
   {
-    name: "Odoo Portal",
+    name: "Dataroot",
-    url: "https://odooportal.com",
+    url: "https://erp.dataroot.asia",
     category: "marketing",
     category_label: "ที่ปรึกษาการตลาด",
-    thumbnail: "/images/portfolio/odooportal.png",
+    thumbnail: "/images/portfolio/dataroot.png",
-    description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย"
+    description: "ตัวแทนจำหน่าย Odoo ERP ในประเทศไทย"
   }
 ];

src/layouts/Base.astro

@@ -19,7 +19,18 @@ const {
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
     <meta name="theme-color" content="#fed400" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <!-- Favicon (M logo: yellow square + black M) -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+
     <title>{title}</title>
   </head>
   <body>

src/pages/about.astro

@@ -3,21 +3,78 @@ import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
-import Icon from '../components/Icon.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
+import { getEntry, render } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+
+const about = await getEntry('pages', 'about') as CollectionEntry<'pages'>;
+const { Content } = await render(about);
 ---
 
 <Base title="เกี่ยวกับเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
   <PageHero
-    badge="เกี่ยวกับเรา"
+    badge={about.data.hero_badge}
-    title="เพิ่มยอดขาย ลดต้นทุน ลดเวลา — ให้ธุรกิจคุณ"
+    title="เริ่มจากตรงนี้"
     subtitle="บริษัท มอร์มินิมอร์ จำกัด — นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น ไม่ใช่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง"
   />
 
+  <!-- ABOUT CONTENT (BENTO) -->
+  <section class="section section-bento">
+    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', left: '-150px' }} opacity={0.25} blur="80px" />
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '-100px' }} opacity={0.4} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
+      <BentoGrid>
+        <BentoTile span={12} surface="soft" eyebrow="นโยบายของเรา" title="เป้าหมายคือเพิ่มกำไรให้ลูกค้า">
+          <p>เพราะถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็จะสามารถใช้บริการเราต่อไปได้</p>
+          <p>ทุกระบบที่ส่งมอบต้องตอบคำถามเดียวให้ได้: <strong>"ลูกค้ามีกำไรเพิ่มขึ้นจริงไหม"</strong> — ไม่ใช่แค่ส่งงานตามสัญญา</p>
+        </BentoTile>
+
+        <BentoTile span={8} surface="yellow" eyebrow="วิธีทำงานของเรา" title="ไม่ได้ทำงานแบบเดียวกับทุกที่">
+          <p>เพราะลูกค้าแต่ละคนมีบริบท งบประมาณ และทีมต่างกัน</p>
+          <ul class="checklist">
+            <li>✅ <strong>งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทาง</strong> — เราทำเอง เพราะถ้าไม่ทำเอง จะตอบคำถามลูกค้าไม่ได้</li>
+            <li>✅ <strong>งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะ</strong> — เราใช้ bot หรือ outsource ให้คนเชี่ยวชาญ เพราะคนที่ทำเป็นอาชีพจะดีกว่า</li>
+            <li>✅ <strong>งานที่ต้องตอบลูกค้าตลอด 24 ชั่วโมง</strong> — bot ช่วยคัดกรองเบื้องต้น แล้วเราตามด้วยคน</li>
+          </ul>
+          <p style="margin-top: 16px;"><strong>สรุป:</strong> ผลงานที่ออกมาขึ้นอยู่กับบริบทของลูกค้า ไม่ใช่วิธีทำงานของเรา — เราเลือกวิธีที่ทำให้ลูกค้าได้ผลลัพธ์ที่ดีที่สุด ไม่ใช่วิธีที่เราถนัดที่สุด</p>
+        </BentoTile>
+
+        <BentoTile span={4} surface="purple-soft" eyebrow="ปี 2020" title="ก่อตั้งจากประสบการณ์ตรง">
+          <p>เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ "สวยแต่ไม่มีคนเข้า" และ AI tools "ว้าวแต่ใช้ไม่เป็น"</p>
+        </BentoTile>
+
+        <BentoTile span={6} surface="mint" eyebrow="เราเชื่ออะไร" title="หลักคิด 6 ข้อ">
+          <ul>
+            <li>เว็บสวยไม่ได้แปลว่าขายได้</li>
+            <li>AI ไม่ได้แทนทุกอย่าง — แต่ถ้ารู้จักใช้...</li>
+            <li>จ่ายแพงไม่ได้แปลว่าดี</li>
+            <li>"สิ่งที่ถูกต้อง" ไม่ใช่ "สิ่งที่ลูกค้าต้องการ" เสมอไป</li>
+            <li>ระบบที่คนใช้ไม่เป็น = เสียเงินเปล่า</li>
+          </ul>
+        </BentoTile>
+
+        <BentoTile span={6} surface="teal" eyebrow="เบื้องหลัง" title="Marketing intelligence ที่ใช้">
+          <p>นั่งทำงานที่บ้าน ใช้ MacBook ตัวเดียว แต่มีเครื่องมือที่ช่วยให้เข้าใจตลาดได้ลึกกว่าคนทั่วไป:</p>
+          <ul>
+            <li><strong>ระบบดูโฆษณาคู่แข่ง</strong> — ดูว่าคู่แข่งยิงโฆษณาอะไร คำไหน convert ดี</li>
+            <li><strong>วิเคราะห์ keyword + SEO gap</strong> — หาโอกาสที่คู่แข่งยังไม่ได้ทำ</li>
+            <li><strong>ติดตาม trend ตลาด</strong> — รู้ก่อนลูกค้าว่าตลาดกำลังไปทางไหน</li>
+          </ul>
+          <p style="margin-top: 12px;"><strong>Stack:</strong> JavaScript, Python, PHP, n8n, OpenAI API, Meta API, Google Analytics, Looker Studio</p>
+        </BentoTile>
+      </BentoGrid>
+    </div>
+  </section>
+
   <!-- STORY SECTION -->
-  <section class="section story-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="yellow" size="400px" speed={0.5} position={{ top: '10%', right: '-150px' }} opacity={0.3} blur="80px" />
+    <DecoOrb color="mint" size="300px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.2} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="story-grid">
         <div class="story-content">
           <span class="section-badge">นโยบายของเรา</span>
@@ -34,7 +91,7 @@ import Icon from '../components/Icon.astro';
           </p>
 
           <p class="story-text">
-            <strong>ความต่างของเรา</strong> เราเขียนโค้ดเอง ไม่ใช่เอาไป Outsource เราตอบแชตเอง ไม่ใช่ให้ Bot ตอบลูกค้า เราวางแผนเอง ไม่ใช่ใช้ Template เดียวกับทุกคน
+            <strong>วิธีทำงานของเรา</strong> เราไม่ได้ทำงานแบบเดียวกับทุกที่ — งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทางเราทำเอง งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะเราใช้ bot หรือ outsource ให้คนเชี่ยวชาญ เพราะคนที่ทำเป็นอาชีพจะดีกว่า
           </p>
 
           <div class="story-actions">
@@ -45,20 +102,20 @@ import Icon from '../components/Icon.astro';
 
         <div class="story-stats stagger-children">
           <div class="stat-card">
-            <span class="stat-number counter" data-from="0">40+</span>
+            <span class="stat-number">—</span>
             <span class="stat-label">ลูกค้าที่กลับมาใช้บริการซ้ำ</span>
           </div>
           <div class="stat-card">
-            <span class="stat-number counter" data-from="0">50+</span>
+            <span class="stat-number">—</span>
             <span class="stat-label">โปรเจกต์ที่ส่งมอบ</span>
           </div>
           <div class="stat-card">
             <span class="stat-number counter" data-from="0">5+</span>
-            <span class="stat-label">ปีของการทำงานหนัก</span>
+            <span class="stat-label">ปีของการทำงานหนัก (ก่อตั้งปี 2020)</span>
           </div>
           <div class="stat-card">
-            <span class="stat-number counter" data-from="0">100%</span>
+            <span class="stat-number">—</span>
-            <span class="stat-label">โค้ดโดยทีมเรา ไม่ Outsource</span>
+            <span class="stat-label">อุตสาหกรรมที่รับ</span>
           </div>
         </div>
       </div>
@@ -67,7 +124,9 @@ import Icon from '../components/Icon.astro';
 
   <!-- VALUES SECTION (yellow accent cards on soft) -->
   <section class="section section-soft values-section">
-    <div class="container">
+    <DecoOrb color="purple" size="500px" speed={0.4} position={{ top: '-200px', left: '20%' }} opacity={0.2} blur="100px" />
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '5%' }} opacity={0.4} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">ค่านิยมของเรา</span>
         <h2 class="section-title">
@@ -76,33 +135,25 @@ import Icon from '../components/Icon.astro';
       </div>
 
       <div class="values-grid stagger-children">
-        <div class="value-card">
+        <div class="value-card value-card-yellow">
-          <div class="value-icon">
+          <div class="value-num">01</div>
-            <Icon name="target" />
-          </div>
           <h3 class="value-title">เข้าใจธุรกิจก่อนเขียนโค้ด</h3>
           <p class="value-desc">30 นาทีแรกของทุกโปรเจกต์คือการถาม ไม่ใช่การ present เราถามจนเข้าใจว่าคุณขายให้ใคร กำไรเท่าไหร่ ปวดหัวตรงไหน แล้วค่อยแนะนำ solution</p>
         </div>
         <div class="value-card">
-          <div class="value-icon">
+          <div class="value-num">02</div>
-            <Icon name="users" />
-          </div>
           <h3 class="value-title">เป็น Partner ไม่ใช่ Vendor</h3>
           <p class="value-desc">เราแชร์ progress ทุกสัปดาห์ผ่าน LINE Group เดียวกับที่ลูกค้าใช้ คุณเห็นทุก decision ไม่มี hidden cost ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ deliver</p>
         </div>
         <div class="value-card">
-          <div class="value-icon">
+          <div class="value-num">03</div>
-            <Icon name="clock" />
-          </div>
           <h3 class="value-title">Deliver ตรงเวลา หรือบอกล่วงหน้า</h3>
           <p class="value-desc">เราไม่สัญญา deadline แบบเลื่อนได้ ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata</p>
         </div>
         <div class="value-card">
-          <div class="value-icon">
+          <div class="value-num">04</div>
-            <Icon name="shield" />
-          </div>
           <h3 class="value-title">ดูแลหลังส่งมอบ</h3>
-          <p class="value-desc">เว็บไซต์ที่ส่งแล้วทิ้งเป็นเว็บตาย เราเลยมีแพ็คเกจดูแลรายเดือนเริ่ม 2,000 บาท รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE</p>
+          <p class="value-desc">ปรับเล็ก ๆ น้อย ๆ ฟรี — คิดค่าใช้จ่ายเฉพาะ feature ใหม่หรือปรับแต่งครั้งใหญ่เท่านั้น</p>
         </div>
       </div>
     </div>
@@ -122,7 +173,9 @@ import Icon from '../components/Icon.astro';
 
   <!-- PROCESS SECTION (4 steps, white) -->
   <section class="section process-section">
-    <div class="container">
+    <DecoOrb color="soft" size="600px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.5} blur="80px" />
+    <DecoOrb color="yellow" size="300px" speed={0.3} position={{ bottom: '5%', left: '-100px' }} opacity={0.3} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">กระบวนการทำงาน</span>
         <h2 class="section-title">
@@ -140,17 +193,17 @@ import Icon from '../components/Icon.astro';
         <div class="process-step">
           <span class="step-num">02</span>
           <h3 class="step-title">วางแผน</h3>
-          <p class="step-desc">วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็นเอกสาร PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น</p>
+          <p class="step-desc">วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็น PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น</p>
         </div>
         <div class="process-step">
           <span class="step-num">03</span>
           <h3 class="step-title">ดำเนินการ</h3>
-          <p class="step-desc">พัฒนาแบบ Sprint ส่ง demo ให้ทดสอบทุก 7–14 วัน เห็นงานจริง ไม่ใช่ "เดี๋ยวส่งทีเดียวตอนจบ"</p>
+          <p class="step-desc">แจ้งความคืบหน้าเป็นช่วง ๆ ผ่าน LINE Group — demo เมื่อเราพร้อมส่งงานรอบใหญ่ ๆ ไม่ sprint ไม่ deadline ล็อก</p>
         </div>
-        <div class="process-step">
+        <div class="process-step process-step-yellow">
           <span class="step-num">04</span>
-          <h3 class="step-title">สนับสนุน</h3>
+          <h3 class="step-title">ส่งมอบ + ดูแล</h3>
-          <p class="step-desc">ส่งมอบงาน + อบรมทีม + มอบคู่มือ ติดตามผลทุกเดือน แนะนำสิ่งที่ควรปรับปรุง ต่อยอด หรือยกเลิก</p>
+          <p class="step-desc">ส่งมอบงาน + อบรมทีม + มอบคู่มือ หลังส่งมอบปรับเล็ก ๆ น้อย ๆ ฟรี — คิดค่าใช้จ่ายเฉพาะ feature ใหม่หรือปรับแต่งครั้งใหญ่</p>
         </div>
       </div>
     </div>
@@ -176,37 +229,123 @@ import Icon from '../components/Icon.astro';
 <style>
   .section-soft { background: var(--color-bg-alt); }
   .section-yellow { background: var(--color-primary); }
-
+  .section-bento {
-  .section-badge {
+    position: relative;
-    display: inline-block;
+    overflow: hidden;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 8px 20px;
-    border-radius: var(--radius-full);
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    margin-bottom: 16px;
   }
 
-  .section-title {
+  /* VALUES (keep existing classes) */
+  .values-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+  .value-card {
+    background: var(--color-white);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-xl);
+    padding: 32px;
+    transition: all 0.3s ease;
+  }
+  .value-card:hover {
+    border-color: var(--color-primary);
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-md);
+  }
+  .value-num {
     font-family: var(--font-display);
-    font-size: clamp(28px, 4vw, 44px);
+    font-size: 22px;
     font-weight: 900;
-    line-height: 1.15;
     color: var(--color-black);
+    width: 64px;
+    height: 64px;
+    border: 2px solid var(--color-black);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    letter-spacing: -1px;
+  }
+  .value-card-yellow { background: var(--color-primary); border-color: var(--color-primary); }
+  .value-card-yellow .value-num { background: var(--color-black); color: var(--color-primary); border-color: var(--color-black); }
+  .value-title {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 800;
+    color: var(--color-black);
+    margin-bottom: 10px;
+  }
+  .value-desc {
+    font-size: 14px;
+    color: var(--color-gray-700);
+    line-height: 1.6;
+  }
+  .value-card-yellow .value-desc { color: rgba(0, 0, 0, 0.85); }
+
+  /* PROCESS — clean 4x1 grid */
+  .process-section { background: var(--color-bg-alt); position: relative; overflow: hidden; }
+  .process-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+  }
+  .process-step {
+    background: var(--color-white);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-xl);
+    padding: 32px 24px;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    min-height: 280px;
+  }
+  .process-step:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--color-primary);
+  }
+  .process-step-yellow {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+  .process-step-yellow .step-num,
+  .process-step-yellow .step-title { color: var(--color-black); }
+  .process-step-yellow .step-desc { color: rgba(0, 0, 0, 0.85); }
+  .process-step-yellow:hover { border-color: var(--color-black); }
+  .step-num {
+    display: block;
+    font-family: var(--font-display);
+    font-size: clamp(40px, 4vw, 56px);
+    font-weight: 900;
+    color: var(--color-primary);
+    line-height: 1;
     margin-bottom: 16px;
   }
-  .section-title .highlight { color: var(--color-primary-dark); }
+  .step-title {
-  .section-desc {
+    font-family: var(--font-display);
-    font-size: 17px;
+    font-size: 18px;
-    color: var(--color-gray-600);
+    font-weight: 800;
+    color: var(--color-black);
+    margin-bottom: 10px;
+  }
+  .step-desc {
+    font-size: 14px;
+    color: var(--color-gray-700);
     line-height: 1.6;
   }
 
-  /* STORY */
+  @media (max-width: 1024px) {
-  .story-section { background: var(--color-white); }
+    .process-grid { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 640px) {
+    .process-grid { grid-template-columns: 1fr; }
+    .values-grid { grid-template-columns: 1fr; }
+  }
+
+  /* STORY (keep existing) */
   .story-grid {
     display: grid;
     grid-template-columns: 1.3fr 0.7fr;
@@ -233,7 +372,7 @@ import Icon from '../components/Icon.astro';
   }
   .stat-card {
     padding: 24px;
-    background: var(--color-bg-alt);
+    background: var(--color-bg-soft);
     border: 1px solid var(--color-gray-200);
     border-radius: var(--radius-xl);
     transition: all 0.3s ease;
@@ -256,82 +395,35 @@ import Icon from '../components/Icon.astro';
     color: var(--color-gray-600);
     margin-top: 8px;
   }
-
+  .section-badge {
-  /* VALUES */
+    display: inline-block;
-  .values-grid {
+    background: var(--color-primary);
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 24px;
-  }
-  .value-card {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-    text-align: center;
-    transition: all 0.3s ease;
-  }
-  .value-card:hover {
-    border-color: var(--color-primary);
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-md);
-  }
-  .value-icon { font-size: 40px; margin-bottom: 16px; }
-  .value-title {
-    font-family: var(--font-display);
-    font-size: 16px;
-    font-weight: 800;
     color: var(--color-black);
-    margin-bottom: 10px;
+    padding: 8px 20px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 16px;
   }
-  .value-desc {
+  .section-title {
-    font-size: 14px;
-    color: var(--color-gray-600);
-    line-height: 1.6;
-  }
-
-  /* PROCESS */
-  .process-section { background: var(--color-bg-alt); }
-  .process-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 24px;
-  }
-  .process-step {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-    transition: all 0.3s ease;
-  }
-  .process-step:hover {
-    border-color: var(--color-primary);
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-md);
-  }
-  .step-num {
-    display: block;
     font-family: var(--font-display);
-    font-size: 36px;
+    font-size: clamp(28px, 4vw, 44px);
     font-weight: 900;
-    color: var(--color-primary);
+    line-height: 1.15;
-    line-height: 1;
-    margin-bottom: 12px;
-  }
-  .step-title {
-    font-family: var(--font-display);
-    font-size: 18px;
-    font-weight: 800;
     color: var(--color-black);
-    margin-bottom: 10px;
+    margin-bottom: 16px;
   }
-  .step-desc {
+  .section-title .highlight { color: var(--color-primary-dark); }
-    font-size: 14px;
+  .section-desc {
+    font-size: 17px;
     color: var(--color-gray-600);
     line-height: 1.6;
   }
+  .section-header { text-align: center; margin-bottom: 48px; }
 
-  /* PULL QUOTE (dark band) */
+  /* PULL QUOTE */
   .section-dark-quote {
     background: var(--color-black);
     padding: 100px 0;
@@ -381,16 +473,25 @@ import Icon from '../components/Icon.astro';
     flex-wrap: wrap;
   }
 
-  /* RESPONSIVE */
   @media (max-width: 1024px) {
     .story-grid { grid-template-columns: 1fr; gap: 40px; }
-    .values-grid { grid-template-columns: repeat(2, 1fr); }
-    .process-grid { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 640px) {
     .story-actions, .cta-actions { flex-direction: column; }
     .story-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
-    .values-grid { grid-template-columns: 1fr; }
-    .process-grid { grid-template-columns: 1fr; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/blog/[slug].astro

@@ -3,6 +3,9 @@ import Base from '../../layouts/Base.astro';
 import Navigation from '../../components/Navigation.astro';
 import Footer from '../../components/Footer.astro';
 import PageHero from '../../components/PageHero.astro';
+import BentoGrid from '../../components/BentoGrid.astro';
+import BentoTile from '../../components/BentoTile.astro';
+import DecoOrb from '../../components/DecoOrb.astro';
 import { getCollection, render } from 'astro:content';
 
 const { slug } = Astro.params;
@@ -33,6 +36,12 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
   month: 'long',
   day: 'numeric'
 });
+
+// Surface rotation for related cards
+const surfaces = ['soft', 'yellow', 'mint'] as const;
+function surfaceFor(i: number) {
+  return surfaces[i % surfaces.length];
+}
 ---
 
 <Base title={`${post.data.title} | MoreminiMore`}>
@@ -45,104 +54,143 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
   />
 
   {post.data.image && (
+    <section class="section section-bento article-image-section">
+      <DecoOrb color="soft" size="500px" speed={0.3} position={{ top: '-100px', right: '-150px' }} opacity={0.4} blur="80px" />
+      <DecoOrb color="yellow" size="350px" speed={0.3} position={{ bottom: '-150px', left: '-100px' }} opacity={0.2} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
         <div class="article-image">
-      <div class="container">
           <img src={post.data.image} alt={post.data.title} />
         </div>
       </div>
+    </section>
   )}
 
-  <section class="section article-section">
+  <section class="section section-bento article-section">
-    <div class="container">
+    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '5%', left: '-150px' }} opacity={0.2} blur="80px" />
-      <div class="article-grid reveal">
+    <DecoOrb color="mint" size="350px" speed={0.3} position={{ bottom: '10%', right: '-100px' }} opacity={0.2} blur="80px" />
-        <article class="article-content">
+    <div class="container" style="position: relative; z-index: 1;">
+      <BentoGrid>
+        <!-- Main article body — full width bento tile -->
+        <BentoTile span={8} surface="white" eyebrow={post.data.category} title={post.data.title}>
+          <div class="article-meta">
+            <span class="article-date">{formattedDate}</span>
+          </div>
           <div class="article-body">
             <Content />
           </div>
-        </article>
+        </BentoTile>
 
-        <aside class="article-sidebar">
+        <!-- Sidebar tile: about + contact stack -->
-          <div class="sidebar-card">
+        <BentoTile span={4} surface="soft" eyebrow="เกี่ยวกับเรา" title="MoreminiMore">
-            <h3 class="sidebar-title">เกี่ยวกับ MoreminiMore</h3>
+          <p>ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่</p>
-            <p class="sidebar-text">
-              ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่
-            </p>
           <a href="/about" class="btn btn-outline-dark btn-sm">ดูเพิ่มเติม</a>
-          </div>
 
-          <div class="sidebar-card">
+          <div class="sidebar-divider"></div>
-            <h3 class="sidebar-title">สนใจบริการ?</h3>
+
-            <p class="sidebar-text">ติดต่อเราได้เลย ปรึกษาฟรี!</p>
+          <span class="tile-eyebrow-sm">สนใจบริการ?</span>
+          <p style="margin-top: 8px;">ติดต่อเราได้เลย ปรึกษาฟรี!</p>
+          <div class="sidebar-actions">
             <a href="/contact" class="btn btn-primary btn-sm">ติดต่อเรา</a>
-            <a href="tel:0809955945" class="btn btn-outline-dark btn-sm" style="margin-top: 8px;">080-995-5945</a>
+            <a href="tel:0809955945" class="btn btn-outline-dark btn-sm">080-995-5945</a>
-          </div>
-
-          {related.length > 0 && (
-            <div class="sidebar-card">
-              <h3 class="sidebar-title">บทความที่เกี่ยวข้อง</h3>
-              <div class="related-list">
-                {related.map(r => (
-                  <a href={`/blog/${r.id}`} class="related-item">
-                    <img src={r.data.image} alt={r.data.title} />
-                    <span>{r.data.title}</span>
-                  </a>
-                ))}
-              </div>
-            </div>
-          )}
-        </aside>
           </div>
+        </BentoTile>
+      </BentoGrid>
     </div>
   </section>
 
+  {related.length > 0 && (
+    <section class="section section-bento related-section">
+      <DecoOrb color="yellow" size="400px" speed={0.3} position={{ top: '10%', right: '-100px' }} opacity={0.25} blur="80px" />
+      <DecoOrb color="soft" size="350px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
+        <div class="section-header reveal">
+          <span class="section-badge">บทความที่เกี่ยวข้อง</span>
+          <h2 class="section-title">อ่านต่อ <span class="highlight">เนื้อหาใกล้เคียง</span></h2>
+        </div>
+
+        <BentoGrid>
+          {related.map((r, i) => (
+            <a href={`/blog/${r.id}`} class="related-link">
+              <BentoTile span={4} surface={surfaceFor(i)} eyebrow={r.data.category} title={r.data.title}>
+                <div class="related-card-body">
+                  {r.data.image && (
+                    <div class="related-image">
+                      <img src={r.data.image} alt={r.data.title} loading="lazy" />
+                    </div>
+                  )}
+                  <span class="related-date">
+                    {new Date(r.data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
+                  </span>
+                </div>
+              </BentoTile>
+            </a>
+          ))}
+        </BentoGrid>
+      </div>
+    </section>
+  )}
+
   <Footer />
 </Base>
 
 <style>
+  .article-image-section { background: var(--color-white); padding-top: 40px; padding-bottom: 40px; }
+  .article-section { background: var(--color-white); }
+  .related-section { background: var(--color-bg-alt); }
+  .section-bento { position: relative; overflow: hidden; }
+
+  /* Article image (hero) */
   .article-image {
-    padding: 40px 0;
+    width: 100%;
-    background: var(--color-bg-alt);
+    overflow: hidden;
+    border-radius: var(--radius-xl);
+    background: var(--color-bg-soft);
   }
   .article-image img {
     width: 100%;
     max-height: 500px;
     object-fit: cover;
-    border-radius: var(--radius-xl);
+    display: block;
   }
 
-  .article-section { background: var(--color-white); }
+  /* Main article body */
-
+  .article-meta {
-  .article-grid {
+    margin-bottom: 20px;
-    display: grid;
+    padding-bottom: 16px;
-    grid-template-columns: 1fr 360px;
+    border-bottom: 1px solid var(--color-gray-200);
-    gap: 60px;
+  }
+  .article-date {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--color-gray-600);
+    text-transform: uppercase;
+    letter-spacing: 1px;
   }
-
   .article-body {
-    font-size: 18px;
+    font-size: 17px;
     line-height: 1.8;
     color: var(--color-gray-700);
   }
   .article-body :global(h2) {
     font-family: var(--font-display);
-    font-size: 28px;
+    font-size: 26px;
     font-weight: 800;
     color: var(--color-black);
-    margin: 40px 0 20px;
+    margin: 36px 0 18px;
   }
   .article-body :global(h3) {
     font-family: var(--font-display);
-    font-size: 22px;
+    font-size: 20px;
     font-weight: 800;
     color: var(--color-black);
-    margin: 32px 0 16px;
+    margin: 28px 0 14px;
   }
-  .article-body :global(p) { margin-bottom: 20px; }
+  .article-body :global(p) { margin-bottom: 18px; }
   .article-body :global(ul), .article-body :global(ol) {
-    margin: 20px 0;
+    margin: 16px 0;
     padding-left: 24px;
   }
-  .article-body :global(li) { margin-bottom: 12px; }
+  .article-body :global(li) { margin-bottom: 10px; }
   .article-body :global(a) {
     color: var(--color-primary-dark);
     font-weight: 600;
@@ -150,40 +198,37 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
   .article-body :global(a:hover) { text-decoration: underline; }
   .article-body :global(blockquote) {
     border-left: 4px solid var(--color-primary);
-    padding-left: 24px;
+    padding-left: 20px;
-    margin: 32px 0;
+    margin: 28px 0;
     font-style: italic;
     color: var(--color-gray-700);
   }
   .article-body :global(img) {
     border-radius: var(--radius-md);
+    margin: 20px 0;
+    max-width: 100%;
+  }
+  .article-body :global(strong) { color: var(--color-black); font-weight: 800; }
+
+  /* Sidebar (soft tile) */
+  .sidebar-divider {
+    height: 1px;
+    background: var(--color-gray-200);
     margin: 24px 0;
   }
-
+  .tile-eyebrow-sm {
-  /* Sidebar */
+    font-size: 11px;
-  .article-sidebar {
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    opacity: 0.7;
+    display: block;
+  }
+  .sidebar-actions {
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: 8px;
-  }
+    margin-top: 12px;
-  .sidebar-card {
-    background: var(--color-bg-alt);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 28px;
-  }
-  .sidebar-title {
-    font-family: var(--font-display);
-    font-size: 16px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 12px;
-  }
-  .sidebar-text {
-    font-size: 14px;
-    color: var(--color-gray-600);
-    line-height: 1.6;
-    margin-bottom: 16px;
   }
   .btn-sm {
     padding: 10px 20px;
@@ -197,39 +242,75 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
     justify-content: center;
   }
 
-  .related-list {
+  /* Section header */
+  .section-header { text-align: center; margin-bottom: 48px; }
+  .section-badge {
+    display: inline-block;
+    background: var(--color-primary);
+    color: var(--color-black);
+    padding: 8px 20px;
+    border-radius: var(--radius-full);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 16px;
+  }
+  .section-title {
+    font-family: var(--font-display);
+    font-size: clamp(28px, 4vw, 40px);
+    font-weight: 900;
+    color: var(--color-black);
+  }
+  .section-title .highlight { color: var(--color-primary-dark); }
+
+  /* Related cards */
+  .related-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+  .related-card-body {
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
-  .related-item {
+  .related-image {
-    display: flex;
+    aspect-ratio: 16/10;
-    align-items: center;
+    overflow: hidden;
-    gap: 12px;
-    padding: 8px;
-    background: var(--color-white);
     border-radius: var(--radius-md);
-    transition: all 0.2s ease;
+    background: var(--color-bg-soft);
+    margin: -8px -8px 4px;
   }
-  .related-item:hover { transform: translateX(4px); }
+  .related-image img {
-  .related-item img {
+    width: 100%;
-    width: 50px;
+    height: 100%;
-    height: 50px;
     object-fit: cover;
-    border-radius: var(--radius-sm);
+    display: block;
-    flex-shrink: 0;
+    transition: transform 0.5s ease;
   }
-  .related-item span {
+  .related-link:hover .related-image img { transform: scale(1.06); }
-    font-size: 13px;
+  .related-date {
-    font-weight: 700;
+    font-size: 12px;
-    color: var(--color-black);
+    font-weight: 600;
-    line-height: 1.3;
+    opacity: 0.65;
   }
 
-  @media (max-width: 1024px) {
-    .article-grid { grid-template-columns: 1fr; }
-  }
   @media (max-width: 640px) {
     .article-body { font-size: 16px; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/blog/index.astro

@@ -3,10 +3,19 @@ import Base from '../../layouts/Base.astro';
 import Navigation from '../../components/Navigation.astro';
 import Footer from '../../components/Footer.astro';
 import PageHero from '../../components/PageHero.astro';
+import BentoGrid from '../../components/BentoGrid.astro';
+import BentoTile from '../../components/BentoTile.astro';
+import DecoOrb from '../../components/DecoOrb.astro';
 import { getCollection } from 'astro:content';
 
 const blogPosts = await getCollection('blog');
 const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+
+// Surface color rotation for variety across the post grid
+const surfaces = ['white', 'soft', 'yellow', 'mint', 'purple-soft', 'teal'] as const;
+function surfaceFor(i: number) {
+  return surfaces[i % surfaces.length];
+}
 ---
 
 <Base title="บทความ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
@@ -19,19 +28,30 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
   />
 
   {sortedPosts.length > 0 && (
-    <section class="featured-section section-soft">
+    <section class="section section-bento featured-section">
-      <div class="container">
+      <DecoOrb color="yellow" size="450px" speed={0.3} position={{ top: '-100px', right: '-100px' }} opacity={0.3} blur="80px" />
-        <a href={`/blog/${sortedPosts[0].id}`} class="featured-card">
+      <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-150px', left: '-100px' }} opacity={0.4} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
+        <a href={`/blog/${sortedPosts[0].id}`} class="featured-tile-link">
+          <BentoGrid>
+            <BentoTile span={7} surface="white" eyebrow="บทความล่าสุด" title={sortedPosts[0].data.title}>
+              <div class="featured-content">
                 <div class="featured-image">
                   {sortedPosts[0].data.image && (
                     <img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="eager" />
                   )}
-            <span class="featured-badge">บทความล่าสุด</span>
                 </div>
-          <div class="featured-content">
+              </div>
-            <span class="category-badge">{sortedPosts[0].data.category}</span>
+            </BentoTile>
-            <h2 class="featured-title">{sortedPosts[0].data.title}</h2>
+
+            <BentoTile span={5} surface="yellow" eyebrow={sortedPosts[0].data.category} title="อ่านบทความเต็ม">
+              <div class="featured-aside">
                 <p class="featured-excerpt">{sortedPosts[0].data.excerpt}</p>
+                <div class="featured-meta">
+                  <span class="featured-date">
+                    {new Date(sortedPosts[0].data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
+                  </span>
+                </div>
                 <span class="read-more">
                   อ่านต่อ
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -39,37 +59,43 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
                   </svg>
                 </span>
               </div>
+            </BentoTile>
+          </BentoGrid>
         </a>
       </div>
     </section>
   )}
 
-  <section class="section blog-section">
+  <section class="section section-bento blog-section">
-    <div class="container">
+    <DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '5%', right: '-150px' }} opacity={0.2} blur="80px" />
-      <div class="section-header">
+    <DecoOrb color="purple" size="350px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.2} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
+      <div class="section-header reveal">
         <span class="section-badge">บทความทั้งหมด</span>
         <h2 class="section-title">บทความ <span class="highlight">ล่าสุด</span></h2>
       </div>
 
-      <div class="blog-grid">
+      {sortedPosts.length > 1 && (
+        <BentoGrid>
           {sortedPosts.slice(1).map((post, i) => (
-          <a href={`/blog/${post.id}`} class="blog-card" style={`--delay: ${i * 0.1}s`}>
+            <a href={`/blog/${post.id}`} class="post-tile-link">
-            <div class="blog-image">
+              <BentoTile span={4} surface={surfaceFor(i)} eyebrow={post.data.category} title={post.data.title} reveal={true}>
+                <div class="post-card-body">
                   {post.data.image && (
+                    <div class="post-image">
                       <img src={post.data.image} alt={post.data.title} loading="lazy" />
-              )}
                     </div>
-            <div class="blog-content">
+                  )}
-              <span class="blog-category">{post.data.category}</span>
+                  <p class="post-excerpt">{post.data.excerpt}</p>
-              <h3 class="blog-title">{post.data.title}</h3>
+                  <span class="post-date">
-              <p class="blog-excerpt">{post.data.excerpt}</p>
-              <span class="blog-date">
                     {new Date(post.data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
                   </span>
                 </div>
+              </BentoTile>
             </a>
           ))}
-      </div>
+        </BentoGrid>
+      )}
     </div>
   </section>
 
@@ -92,77 +118,46 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
 <style>
   .section-soft { background: var(--color-bg-alt); }
   .section-yellow { background: var(--color-primary); }
+  .section-bento { position: relative; overflow: hidden; }
+  .featured-section { background: var(--color-bg-alt); padding-top: 60px; padding-bottom: 60px; }
+  .blog-section { background: var(--color-white); }
 
-  /* Featured */
+  /* Make the whole featured tile clickable without breaking inner link */
-  .featured-section { padding: 60px 0; }
+  .featured-tile-link {
-  .featured-card {
+    display: block;
-    display: grid;
+    text-decoration: none;
-    grid-template-columns: 1.5fr 1fr;
+    color: inherit;
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    overflow: hidden;
-    transition: all 0.4s ease;
-  }
-  .featured-card:hover {
-    transform: scale(1.01);
-    box-shadow: var(--shadow-md);
-    border-color: var(--color-primary);
   }
+
+  .featured-content { display: flex; flex-direction: column; gap: 16px; }
   .featured-image {
-    position: relative;
     aspect-ratio: 16/10;
     overflow: hidden;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-soft);
   }
   .featured-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    display: block;
   }
-  .featured-badge {
+
-    position: absolute;
+  .featured-aside {
-    top: 16px;
-    left: 16px;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 6px 14px;
-    border-radius: var(--radius-sm);
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-  .featured-content {
-    padding: 40px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    gap: 16px;
-  }
-  .category-badge {
-    display: inline-block;
-    background: var(--color-bg-alt);
-    color: var(--color-gray-600);
-    padding: 4px 12px;
-    border-radius: var(--radius-sm);
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    align-self: flex-start;
-    margin-bottom: 16px;
-  }
-  .featured-title {
-    font-family: var(--font-display);
-    font-size: clamp(22px, 3vw, 28px);
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 12px;
-    line-height: 1.3;
   }
   .featured-excerpt {
-    font-size: 14px;
+    font-size: 16px;
-    color: var(--color-gray-600);
     line-height: 1.7;
-    margin-bottom: 20px;
+    color: var(--color-black);
+  }
+  .featured-meta { font-size: 13px; }
+  .featured-date {
+    font-weight: 700;
+    color: var(--color-black);
+    opacity: 0.7;
   }
   .read-more {
     display: inline-flex;
@@ -175,9 +170,48 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
     text-transform: uppercase;
     letter-spacing: 1px;
   }
-  .read-more:hover { color: var(--color-primary-dark); }
   .read-more svg { width: 18px; height: 18px; }
 
+  /* Post grid cards */
+  .post-tile-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+  .post-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: 100%;
+  }
+  .post-image {
+    aspect-ratio: 16/10;
+    overflow: hidden;
+    border-radius: var(--radius-md);
+    background: var(--color-bg-soft);
+    margin: -8px -8px 4px;
+  }
+  .post-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.5s ease;
+  }
+  .post-tile-link:hover .post-image img { transform: scale(1.06); }
+  .post-excerpt {
+    font-size: 14px;
+    line-height: 1.6;
+    color: inherit;
+    opacity: 0.85;
+  }
+  .post-date {
+    font-size: 12px;
+    font-weight: 600;
+    opacity: 0.6;
+    margin-top: auto;
+  }
+
   /* Section header */
   .section-header { text-align: center; margin-bottom: 48px; }
   .section-badge {
@@ -200,65 +234,6 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
   }
   .section-title .highlight { color: var(--color-primary-dark); }
 
-  /* Blog grid */
-  .blog-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-  }
-  .blog-card {
-    display: block;
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    overflow: hidden;
-    transition: all 0.4s ease;
-  }
-  .blog-card:hover {
-    transform: translateY(-8px);
-    box-shadow: var(--shadow-md);
-    border-color: var(--color-primary);
-  }
-  .blog-image { aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-soft); }
-  .blog-image img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.5s ease;
-  }
-  .blog-card:hover .blog-image img { transform: scale(1.08); }
-  .blog-content { padding: 24px; }
-  .blog-category {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 4px 12px;
-    border-radius: var(--radius-sm);
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 12px;
-  }
-  .blog-title {
-    font-family: var(--font-display);
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 12px;
-    line-height: 1.3;
-  }
-  .blog-excerpt {
-    font-size: 14px;
-    color: var(--color-gray-600);
-    line-height: 1.6;
-    margin-bottom: 16px;
-  }
-  .blog-date {
-    font-size: 12px;
-    color: var(--color-gray-500);
-  }
-
   /* CTA */
   .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
   .cta-title {
@@ -280,13 +255,25 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
     flex-wrap: wrap;
   }
 
-  @media (max-width: 1024px) {
+  /* Reduce padding on bento tiles that are link wrappers so the image breathes */
-    .featured-card { grid-template-columns: 1fr; }
+  .post-tile-link :global(.bento-tile) { padding: 16px; }
-    .blog-grid { grid-template-columns: repeat(2, 1fr); }
+
-  }
   @media (max-width: 640px) {
-    .blog-grid { grid-template-columns: 1fr; }
     .cta-actions { flex-direction: column; }
     .cta-actions .btn { width: 100%; justify-content: center; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/contact.astro

@@ -4,6 +4,9 @@ import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
 import Icon from '../components/Icon.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
 
 // Service options for the form — with lucide icon names
 const serviceOptions = [
@@ -26,105 +29,43 @@ const serviceOptions = [
     subtitle="ตอบกลับภายใน 2 ชั่วโมง · เลือกช่องทางที่คุณสะดวก — LINE, โทร, Email หรือฟอร์ม"
   />
 
-  <!-- Quick Channel Picker -->
+  <!-- QUICK CHANNEL PICKER (BENTO) -->
-  <section class="section channels-pick-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
-      <div class="channels-pick-grid stagger-children">
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
-        <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-pick-card">
+    <div class="container" style="position: relative; z-index: 1;">
-          <div class="channel-pick-icon">
+      <BentoGrid>
-            <Icon name="message" size={32} />
+        <BentoTile span={4} surface="yellow" eyebrow="LINE Official" title="@moreminimore">
-          </div>
+          <div class="channel-icon"><Icon name="message" size={32} /></div>
-          <h3 class="channel-pick-name">LINE Official</h3>
+          <p>คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง</p>
-          <p class="channel-pick-best">คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง</p>
+          <p class="meta">ตอบใน 30 นาที (เวลาทำการ)</p>
-          <p class="channel-pick-time">ตอบใน 30 นาที (เวลาทำการ)</p>
+          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-dark" style="margin-top: 16px;">ทักเลย →</a>
-          <span class="channel-pick-cta">ทักเลย →</span>
+        </BentoTile>
-        </a>
+        <BentoTile span={4} surface="soft" eyebrow="โทรศัพท์" title="080-995-5945">
-        <a href="tel:0809955945" class="channel-pick-card">
+          <div class="channel-icon"><Icon name="phone" size={32} /></div>
-          <div class="channel-pick-icon">
+          <p>คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด</p>
-            <Icon name="phone" size={32} />
+          <p class="meta">รับสายทันที หรือโทรกลับภายใน 2 ชม.</p>
-          </div>
+          <a href="tel:0809955945" class="btn btn-dark" style="margin-top: 16px;">โทรเลย →</a>
-          <h3 class="channel-pick-name">โทรศัพท์</h3>
+        </BentoTile>
-          <p class="channel-pick-best">คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด</p>
+        <BentoTile span={4} surface="purple-soft" eyebrow="Email" title="contact@moreminimore.com">
-          <p class="channel-pick-time">รับสายทันที หรือโทรกลับภายใน 2 ชม.</p>
+          <div class="channel-icon"><Icon name="mail" size={32} /></div>
-          <span class="channel-pick-cta">080-995-5945</span>
+          <p>คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
-        </a>
+          <p class="meta">ตอบภายใน 1 วันทำการ</p>
-        <a href="mailto:contact@moreminimore.com" class="channel-pick-card">
+          <a href="mailto:contact@moreminimore.com" class="btn btn-dark" style="margin-top: 16px;">ส่งอีเมล →</a>
-          <div class="channel-pick-icon">
+        </BentoTile>
-            <Icon name="mail" size={32} />
+      </BentoGrid>
-          </div>
-          <h3 class="channel-pick-name">Email</h3>
-          <p class="channel-pick-best">คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
-          <p class="channel-pick-time">ตอบภายใน 1 วันทำการ</p>
-          <span class="channel-pick-cta">contact@moreminimore.com</span>
-        </a>
-      </div>
     </div>
   </section>
 
-  <!-- Contact Form Section -->
+  <!-- CONTACT FORM + INFO (BENTO) -->
-  <section class="section form-section">
+  <section class="section form-section section-bento">
-    <div class="container">
+    <DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '10%', right: '-100px' }} opacity={0.25} blur="80px" />
-      <div class="form-grid reveal">
+    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '5%', left: '-100px' }} opacity={0.2} blur="80px" />
-        <!-- Info column -->
+    <div class="container" style="position: relative; z-index: 1;">
-        <div class="info-column">
+      <BentoGrid>
-          <h2 class="info-title">ข้อมูลติดต่อ</h2>
+        <!-- FORM — big tile on the left -->
-
+        <BentoTile span={8} surface="white" eyebrow="ส่งข้อความ" title="กรอก 4 ช่อง ใช้เวลา 60 วินาที">
-          <div class="info-item">
+          <p class="form-subtitle">เราจะตอบกลับภายใน 2 ชั่วโมง (เวลาทำการ)</p>
-            <div class="info-icon">
-              <Icon name="phone" size={22} />
-            </div>
-            <div>
-              <h3>โทรศัพท์</h3>
-              <a href="tel:0809955945">080-995-5945</a>
-              <p>โทรคุยสดได้เลย จ-ศ 09:00-18:00</p>
-            </div>
-          </div>
-          <div class="info-item">
-            <div class="info-icon">
-              <Icon name="mail" size={22} />
-            </div>
-            <div>
-              <h3>อีเมล</h3>
-              <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
-              <p>เหมาะกับส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
-            </div>
-          </div>
-          <div class="info-item">
-            <div class="info-icon">
-              <Icon name="message" size={22} />
-            </div>
-            <div>
-              <h3>LINE</h3>
-              <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener">@moreminimore</a>
-              <p>เร็วที่สุด ตอบใน 30 นาที (เวลาทำการ)</p>
-            </div>
-          </div>
-          <div class="info-item">
-            <div class="info-icon">
-              <Icon name="mapPin" size={22} />
-            </div>
-            <div>
-              <h3>ออฟฟิศ</h3>
-              <p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
-              <p>นัดเจอล่วงหน้า สะดวกกว่าเดินเข้ามาเฉย ๆ</p>
-            </div>
-          </div>
-          <div class="info-item">
-            <div class="info-icon">
-              <Icon name="clock" size={22} />
-            </div>
-            <div>
-              <h3>เวลาทำการ</h3>
-              <p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
-              <p>นอกเวลา? ทัก LINE ทิ้งไว้ได้ ตอบเช้าวันถัดไป</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Form column -->
-        <div class="form-column">
-          <h2 class="form-title">ส่งข้อความถึงเรา</h2>
-          <p class="form-subtitle">กรอก 4 ช่อง ใช้เวลา 60 วินาที — เราจะตอบกลับภายใน 2 ชั่วโมง (เวลาทำการ)</p>
 
           <form class="contact-form" id="contact-form">
             <div class="form-row">
@@ -189,66 +130,86 @@ const serviceOptions = [
             <h3>ส่งแล้ว!</h3>
             <p>เราจะตอบกลับภายใน 2 ชั่วโมง (ในเวลาทำการ) ถ้าเร่งด่วน ทัก LINE @moreminimore ครับ</p>
           </div>
-        </div>
+        </BentoTile>
-      </div>
+
+        <!-- INFO TILES — phone, email, line, hours as separate BentoTiles -->
+        <BentoTile span={4} surface="yellow" eyebrow="โทรศัพท์" title="080-995-5945">
+          <div class="info-icon"><Icon name="phone" size={24} /></div>
+          <p>โทรคุยสดได้เลย</p>
+          <p class="meta">จ-ศ 09:00-18:00</p>
+          <a href="tel:0809955945" class="btn btn-dark" style="margin-top: 12px;">โทรเลย →</a>
+        </BentoTile>
+
+        <BentoTile span={4} surface="purple-soft" eyebrow="อีเมล" title="contact@moreminimore.com">
+          <div class="info-icon"><Icon name="mail" size={24} /></div>
+          <p>เหมาะกับส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
+          <p class="meta">ตอบภายใน 1 วันทำการ</p>
+          <a href="mailto:contact@moreminimore.com" class="btn btn-dark" style="margin-top: 12px;">ส่งอีเมล →</a>
+        </BentoTile>
+
+        <BentoTile span={4} surface="mint" eyebrow="LINE Official" title="@moreminimore">
+          <div class="info-icon"><Icon name="message" size={24} /></div>
+          <p>เร็วที่สุด ตอบใน 30 นาที (เวลาทำการ)</p>
+          <p class="meta">นอกเวลา? ทักทิ้งไว้ได้</p>
+          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-dark" style="margin-top: 12px;">ทักเลย →</a>
+        </BentoTile>
+
+        <BentoTile span={12} surface="dark" eyebrow="เวลาทำการ" title="จันทร์ - ศุกร์ 09:00 - 18:00 น.">
+          <div class="info-icon"><Icon name="clock" size={24} /></div>
+          <p>นอกเวลาทำการ? ทัก LINE ทิ้งไว้ได้ ตอบเช้าวันถัดไป</p>
+          <p class="meta" style="color: rgba(255,255,255,0.7);">53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120 · นัดเจอล่วงหน้า</p>
+        </BentoTile>
+      </BentoGrid>
     </div>
   </section>
 
-  <!-- What Happens Next -->
+  <!-- WHAT HAPPENS NEXT (BENTO) -->
-  <section class="section section-soft next-section">
+  <section class="section section-soft section-bento">
-    <div class="container">
+    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
+    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">หลังส่งฟอร์ม</span>
         <h2 class="section-title">3 ขั้นตอนถัดไป — <span class="highlight">ไม่มีอะไรซับซ้อน</span></h2>
       </div>
-
+      <BentoGrid>
-      <div class="next-grid stagger-children">
+        <BentoTile span={4} surface="yellow" eyebrow="ขั้นที่ 1" title="ตอบกลับภายใน 2 ชั่วโมง">
-        <div class="next-step">
-          <div class="next-num">1</div>
-          <h3>ตอบกลับภายใน 2 ชั่วโมง</h3>
           <p>คนจริง (ไม่ใช่ Bot) จะตอบ — ถามคำถามเพิ่ม 2–3 ข้อ เพื่อเข้าใจปัญหาคุณ</p>
-        </div>
+        </BentoTile>
-        <div class="next-step">
+        <BentoTile span={4} surface="soft" eyebrow="ขั้นที่ 2" title="นัดปรึกษาฟรี 30 นาที">
-          <div class="next-num">2</div>
-          <h3>นัดปรึกษาฟรี 30 นาที</h3>
           <p>คุยผ่าน Zoom / โทร / นัดเจอที่ออฟฟิศ (กรุงเทพ / สมุทรสาคร) — ไม่มี script sales</p>
-        </div>
+        </BentoTile>
-        <div class="next-step">
+        <BentoTile span={4} surface="purple-soft" eyebrow="ขั้นที่ 3" title="ส่ง Proposal (3–5 วัน)">
-          <div class="next-num">3</div>
-          <h3>ส่ง Proposal (3–5 วัน)</h3>
           <p>เอกสาร PDF ที่ระบุ scope, timeline, ราคา — ไม่ชอบตรงไหนคุยกันแก้ได้</p>
-        </div>
+        </BentoTile>
-      </div>
+      </BentoGrid>
       <p class="next-closing">ถ้าไม่ตรง → เราจะบอกตรง ๆ ว่า "ไม่เหมาะ" และแนะนำทางเลือกอื่น</p>
     </div>
   </section>
 
-  <!-- Pre-submit FAQ -->
+  <!-- PRE-SUBMIT FAQ (BENTO) -->
-  <section class="section pre-faq-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="teal" size="400px" speed={0.3} position={{ top: '-100px', right: '-100px' }} opacity={0.2} blur="80px" />
+    <DecoOrb color="soft" size="300px" speed={0.4} position={{ bottom: '-100px', left: '-50px' }} opacity={0.35} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">ก่อนกดส่ง</span>
         <h2 class="section-title">4 คำถามที่คนถาม <span class="highlight">ก่อน</span> กดส่งฟอร์ม</h2>
       </div>
-
+      <BentoGrid>
-      <div class="pre-faq-list stagger-children">
+        <BentoTile span={6} surface="soft" eyebrow="01" title="คุยกัน 30 นาทีแล้วจะถูกบังคับซื้อไหม?">
-        <div class="pre-faq-item">
-          <h3>คุยกัน 30 นาทีแล้วจะถูกบังคับซื้อไหม?</h3>
           <p>ไม่ คุยแล้วคุณไม่ชอบก็ไม่เป็นไร ไม่มี follow-up ไม่มีขายของเพิ่ม</p>
-        </div>
+        </BentoTile>
-        <div class="pre-faq-item">
+        <BentoTile span={6} surface="soft" eyebrow="02" title="ถ้าส่งฟอร์มไปแล้วเงียบ ทำยังไง?">
-          <h3>ถ้าส่งฟอร์มไปแล้วเงียบ ทำยังไง?</h3>
           <p>ทัก LINE @moreminimore ตรง ๆ จะเร็วกว่า — หรือโทร 080-995-5945</p>
-        </div>
+        </BentoTile>
-        <div class="pre-faq-item">
+        <BentoTile span={6} surface="yellow" eyebrow="03" title="คุยช่วงไหนได้บ้าง?">
-          <h3>คุยช่วงไหนได้บ้าง?</h3>
           <p>จันทร์-ศุกร์ 09:00-18:00 ปกติ ถ้าคุณต่างจังหวัด/ต่างประเทศ นัดนอกเวลาได้ บอกล่วงหน้า 1–2 วัน</p>
-        </div>
+        </BentoTile>
-        <div class="pre-faq-item">
+        <BentoTile span={6} surface="purple-soft" eyebrow="04" title="ต้องเตรียมอะไรไปคุยไหม?">
-          <h3>ต้องเตรียมอะไรไปคุยไหม?</h3>
           <p>ไม่ต้องเตรียมอะไรเลย แค่บอกธุรกิจคุณทำอะไร ปวดหัวเรื่องอะไร งบประมาณเท่าไหร่ ที่เหลือเราถามเอง</p>
-        </div>
+        </BentoTile>
-      </div>
+      </BentoGrid>
     </div>
   </section>
 
@@ -269,84 +230,26 @@ const serviceOptions = [
   <Footer />
 </Base>
 
-<script>
-  const form = document.getElementById('contact-form') as HTMLFormElement;
-  const success = document.getElementById('form-success');
-
-  form?.addEventListener('submit', (e) => {
-    e.preventDefault();
-    const btn = form.querySelector('.btn-submit') as HTMLButtonElement;
-    const btnText = btn.querySelector('.btn-text');
-    const originalText = btnText?.textContent;
-    if (btnText) btnText.textContent = 'กำลังส่ง...';
-    btn.disabled = true;
-
-    // Simulate submission (replace with real endpoint)
-    setTimeout(() => {
-      form.hidden = true;
-      if (success) success.hidden = false;
-      if (btnText) btnText.textContent = originalText;
-      btn.disabled = false;
-      // Scroll to success
-      success?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }, 800);
-  });
-</script>
-
 <style>
-  .channels-pick-section { background: var(--color-white); padding: 60px 0; }
+  .section-bento {
+    position: relative;
+    overflow: hidden;
+  }
   .form-section { background: var(--color-bg-alt); }
   .section-soft { background: var(--color-bg-alt); }
-  .pre-faq-section { background: var(--color-white); }
   .section-yellow { background: var(--color-primary); }
 
-  /* Channel picker */
+  /* Channel tiles */
-  .channels-pick-grid {
+  .channel-icon { font-size: 40px; margin-bottom: 12px; color: var(--color-black); }
-    display: grid;
+  .meta {
-    grid-template-columns: repeat(3, 1fr);
+    font-size: 13px;
-    gap: 20px;
-  }
-  .channel-pick-card {
-    display: block;
-    background: var(--color-white);
-    border: 2px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 28px;
-    text-align: center;
-    transition: all 0.3s ease;
-  }
-  .channel-pick-card:hover {
-    border-color: var(--color-primary);
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-md);
-  }
-  .channel-pick-icon { font-size: 40px; margin-bottom: 12px; }
-  .channel-pick-name {
-    font-family: var(--font-display);
-    font-size: 20px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 8px;
-  }
-  .channel-pick-best {
-    font-size: 14px;
     color: var(--color-gray-600);
-    margin-bottom: 8px;
+    margin-top: 4px;
-  }
-  .channel-pick-time {
-    font-size: 12px;
-    color: var(--color-gray-500);
-    margin-bottom: 16px;
-  }
-  .channel-pick-cta {
-    display: inline-block;
-    padding: 10px 20px;
-    background: var(--color-primary);
-    color: var(--color-black);
-    border-radius: var(--radius-md);
-    font-size: 14px;
-    font-weight: 700;
   }
+  .surface-yellow .meta { color: rgba(0, 0, 0, 0.7); }
+  .surface-purple-soft .meta { color: var(--color-gray-700); }
+  .surface-mint .meta { color: var(--color-gray-700); }
+  .surface-dark .meta { color: rgba(255, 255, 255, 0.75); }
 
   /* Section header */
   .section-header { text-align: center; margin-bottom: 48px; }
@@ -364,30 +267,39 @@ const serviceOptions = [
   }
   .section-title {
     font-family: var(--font-display);
-    font-size: clamp(28px, 4vw, 40px);
+    font-size: clamp(28px, 4vw, 44px);
     font-weight: 900;
-    line-height: 1.2;
+    line-height: 1.15;
     color: var(--color-black);
+    margin-bottom: 16px;
   }
   .section-title .highlight { color: var(--color-primary-dark); }
 
-  /* Form grid */
+  /* Info icon (used inside separate info tiles) */
-  .form-grid {
+  .info-icon {
-    display: grid;
+    display: inline-flex;
-    grid-template-columns: 1fr 1.3fr;
+    align-items: center;
-    gap: 60px;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
     background: var(--color-white);
     border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
+    border-radius: var(--radius-md);
-    padding: 48px;
+    margin-bottom: 12px;
-  }
-  .info-title, .form-title {
-    font-family: var(--font-display);
-    font-size: 28px;
-    font-weight: 900;
     color: var(--color-black);
-    margin-bottom: 32px;
   }
+  .surface-dark .info-icon {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: var(--color-primary);
+  }
+  .surface-yellow .info-icon {
+    background: var(--color-black);
+    border-color: var(--color-black);
+    color: var(--color-primary);
+  }
+
+  /* Form styles (kept, just slightly tightened) */
   .form-subtitle {
     font-size: 15px;
     color: var(--color-gray-600);
@@ -395,41 +307,6 @@ const serviceOptions = [
     line-height: 1.5;
   }
 
-  .info-item {
-    display: flex;
-    gap: 16px;
-    margin-bottom: 24px;
-    align-items: flex-start;
-  }
-  .info-icon {
-    font-size: 22px;
-    flex-shrink: 0;
-    width: 40px;
-    height: 40px;
-    background: var(--color-bg-alt);
-    border-radius: var(--radius-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .info-item h3 {
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: var(--color-gray-500);
-    margin-bottom: 4px;
-  }
-  .info-item a, .info-item p {
-    font-size: 15px;
-    color: var(--color-black);
-    line-height: 1.5;
-    font-weight: 500;
-  }
-  .info-item a:hover { color: var(--color-primary-dark); }
-  .info-item p { color: var(--color-gray-600); }
-
-  /* Form fields */
   .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -440,7 +317,7 @@ const serviceOptions = [
   }
   .form-label {
     display: block;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
@@ -489,6 +366,7 @@ const serviceOptions = [
   .success-icon {
     font-size: 64px;
     margin-bottom: 16px;
+    color: var(--color-primary-dark);
   }
   .form-success h3 {
     font-family: var(--font-display);
@@ -505,44 +383,7 @@ const serviceOptions = [
     margin: 0 auto;
   }
 
-  /* What happens next */
+  /* Next step closing line */
-  .next-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-    max-width: 900px;
-    margin: 0 auto;
-  }
-  .next-step {
-    text-align: center;
-    padding: 32px;
-  }
-  .next-num {
-    width: 56px;
-    height: 56px;
-    background: var(--color-primary);
-    color: var(--color-black);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--font-display);
-    font-size: 24px;
-    font-weight: 900;
-    margin: 0 auto 16px;
-  }
-  .next-step h3 {
-    font-family: var(--font-display);
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 8px;
-  }
-  .next-step p {
-    font-size: 14px;
-    color: var(--color-gray-600);
-    line-height: 1.6;
-  }
   .next-closing {
     text-align: center;
     margin-top: 32px;
@@ -550,32 +391,7 @@ const serviceOptions = [
     color: var(--color-gray-700);
   }
 
-  /* Pre-submit FAQ */
+  /* CTA */
-  .pre-faq-list {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-  .pre-faq-item {
-    background: var(--color-bg-alt);
-    border-left: 4px solid var(--color-primary);
-    border-radius: var(--radius-md);
-    padding: 20px 24px;
-    margin-bottom: 16px;
-  }
-  .pre-faq-item h3 {
-    font-family: var(--font-display);
-    font-size: 16px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 8px;
-  }
-  .pre-faq-item p {
-    font-size: 15px;
-    color: var(--color-gray-700);
-    line-height: 1.5;
-  }
-
-  /* Final CTA */
   .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
   .cta-title {
     font-family: var(--font-display);
@@ -598,13 +414,47 @@ const serviceOptions = [
   }
 
   @media (max-width: 1024px) {
-    .channels-pick-grid { grid-template-columns: 1fr; }
-    .form-grid { grid-template-columns: 1fr; gap: 40px; padding: 32px; }
     .form-row { grid-template-columns: 1fr; }
-    .next-grid { grid-template-columns: 1fr; }
   }
   @media (max-width: 640px) {
     .cta-actions { flex-direction: column; }
     .cta-actions .btn { width: 100%; justify-content: center; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+
+  // Form submission
+  const form = document.getElementById('contact-form') as HTMLFormElement;
+  const success = document.getElementById('form-success');
+
+  form?.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const btn = form.querySelector('.btn-submit') as HTMLButtonElement;
+    const btnText = btn.querySelector('.btn-text');
+    const originalText = btnText?.textContent;
+    if (btnText) btnText.textContent = 'กำลังส่ง...';
+    btn.disabled = true;
+
+    // Simulate submission (replace with real endpoint)
+    setTimeout(() => {
+      form.hidden = true;
+      if (success) success.hidden = false;
+      if (btnText) btnText.textContent = originalText;
+      btn.disabled = false;
+      // Scroll to success
+      success?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, 800);
+  });
+</script>

src/pages/faq.astro

@@ -3,20 +3,65 @@ import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
-import Icon from '../components/Icon.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
 import { getCollection } from 'astro:content';
 
 const faqItems = await getCollection('faq');
 const categories = ['บริการ', 'ราคา', 'ระยะเวลา', 'AI & เทคนิค', 'หลังการขาย'];
 
-// Map categories to lucide icon names (semantic match, not visual emoji)
+// Group FAQ items by category (preserve original order within each category)
-const categoryIcons: Record<string, string> = {
+const groupedFaq = categories
-  'บริการ': 'briefcase',
+  .map(cat => ({
-  'ราคา': 'dollarSign',
+    category: cat,
-  'ระยะเวลา': 'clock',
+    items: faqItems.filter(f => f.data.category === cat),
-  'AI & เทคนิค': 'bot',
+  }))
-  'หลังการขาย': 'wrench',
+  .filter(g => g.items.length > 0);
-};
+
+// Split each category's items into chunks of 2 (or 3 for the last chunk if odd count)
+function chunkItems<T>(arr: T[], size: number): T[][] {
+  const chunks: T[][] = [];
+  for (let i = 0; i < arr.length; i += size) {
+    chunks.push(arr.slice(i, i + size));
+  }
+  return chunks;
+}
+
+// Pre-compute all FAQ tiles with assigned spans + surfaces for visual rhythm
+// Rotation: yellow, soft, purple-soft, mint, teal, dark, coral, purple, mint
+const surfaceRotation = ['yellow', 'soft', 'purple-soft', 'mint', 'teal', 'dark', 'coral', 'purple', 'mint'] as const;
+
+// Span strategy for category tile pairs: 7+5, 5+7, 8+4, 4+8, 7+5 ... avoid 6+6
+const spanPairs = [[7, 5], [5, 7], [8, 4], [4, 8], [7, 5]] as const;
+
+interface FaqTile {
+  category: string;
+  items: typeof faqItems;
+  surface: typeof surfaceRotation[number];
+  span: 4 | 5 | 7 | 8;
+  tileIndex: number; // 0, 1 within category
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+const faqTiles: FaqTile[] = [];
+groupedFaq.forEach((group, gIdx) => {
+  const chunks = chunkItems(group.items, 2);
+  const pair = spanPairs[gIdx % spanPairs.length];
+  chunks.forEach((chunk, cIdx) => {
+    const tileSurface = surfaceRotation[faqTiles.length % surfaceRotation.length];
+    faqTiles.push({
+      category: group.category,
+      items: chunk,
+      surface: tileSurface,
+      span: (pair[cIdx] ?? 6) as 4 | 5 | 7 | 8,
+      tileIndex: cIdx,
+      isFirst: cIdx === 0,
+      isLast: cIdx === chunks.length - 1,
+    });
+  });
+});
 ---
 
 <Base title="คำถามที่พบบ่อย | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -28,21 +73,20 @@ const categoryIcons: Record<string, string> = {
     subtitle="30+ คำถามที่รวบรวมจากแชต LINE จริง ๆ ไม่ใช่แต่งขึ้นเอง"
   />
 
-  <section class="section faq-section">
+  <!-- FAQ CATEGORIES (BENTO) -->
-    <div class="container">
+  <section class="section section-bento">
-      {categories.map(cat => {
+    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', left: '-100px' }} opacity={0.25} blur="80px" />
-        const items = faqItems.filter(f => f.data.category === cat);
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '-100px' }} opacity={0.4} blur="80px" />
-        if (items.length === 0) return null;
+    <div class="container" style="position: relative; z-index: 1;">
-        return (
+      <BentoGrid>
-          <div class="faq-category reveal">
+        {faqTiles.map((tile) => (
-            <h2 class="category-title">
+          <BentoTile
-              <span class="category-icon">
+            span={tile.span}
-                <Icon name={categoryIcons[cat] as any} size={18} />
+            surface={tile.surface}
-              </span>
+            eyebrow={tile.isFirst ? tile.category : `${tile.category} · ต่อ`}
-              {cat}
+          >
-            </h2>
             <div class="faq-list">
-              {items.map((item, qIndex) => (
+              {tile.items.map((item) => (
                 <details class="faq-item">
                   <summary class="faq-question">
                     <span class="question-text">{item.data.question}</span>
@@ -54,18 +98,11 @@ const categoryIcons: Record<string, string> = {
                 </details>
               ))}
             </div>
-          </div>
+          </BentoTile>
-        );
+        ))}
-      })}
 
-      <!-- Other Topics -->
+        <!-- OTHER TOPICS — full-width tile with tag cloud -->
-      <div class="faq-category">
+        <BentoTile span={12} surface="soft" eyebrow="เรื่องอื่น ๆ" title="คำถามอื่น ๆ ที่ลูกค้าถามบ่อย">
-        <h2 class="category-title">
-          <span class="category-icon">
-            <Icon name="book" size={18} />
-          </span>
-          เรื่องอื่น ๆ ที่ลูกค้าถามบ่อย
-        </h2>
           <div class="tag-cloud">
             <span class="topic-tag">โฮสติ้ง</span>
             <span class="topic-tag">โดเมน</span>
@@ -82,44 +119,43 @@ const categoryIcons: Record<string, string> = {
             <span class="topic-tag">ขอดูเว็บจริง</span>
             <span class="topic-tag">นัดคุยนอกสถานที่</span>
           </div>
+        </BentoTile>
+      </BentoGrid>
     </div>
+  </section>
 
-      <!-- Quick Channels -->
+  <!-- QUICK CHANNELS (BENTO) -->
-      <div class="channels-section reveal">
+  <section class="section section-bento">
-        <h2 class="channels-title">ไม่เจอคำตอบ? ถามตรง ๆ เลย</h2>
+    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', right: '20%' }} opacity={0.2} blur="80px" />
-        <div class="channels-grid stagger-children">
+    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', left: '-100px' }} opacity={0.3} blur="80px" />
-          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-card">
+    <div class="container" style="position: relative; z-index: 1;">
-            <div class="channel-icon">
+      <div class="section-header reveal">
-              <Icon name="message" size={28} />
+        <span class="section-badge">ช่องทางติดต่อ</span>
-            </div>
+        <h2 class="section-title">ไม่เจอคำตอบ? <span class="highlight">ถามตรง ๆ เลย</span></h2>
-            <h3 class="channel-name">LINE</h3>
-            <p class="channel-handle">@moreminimore</p>
-            <p class="channel-time">ตอบใน 30 นาที (เวลาทำการ)</p>
-          </a>
-          <a href="tel:0809955945" class="channel-card">
-            <div class="channel-icon">
-              <Icon name="phone" size={28} />
-            </div>
-            <h3 class="channel-name">โทร</h3>
-            <p class="channel-handle">080-995-5945</p>
-            <p class="channel-time">จ-ศ 09:00-18:00</p>
-          </a>
-          <a href="mailto:contact@moreminimore.com" class="channel-card">
-            <div class="channel-icon">
-              <Icon name="mail" size={28} />
-            </div>
-            <h3 class="channel-name">Email</h3>
-            <p class="channel-handle">contact@moreminimore.com</p>
-            <p class="channel-time">ตอบภายใน 1 วัน</p>
-          </a>
-        </div>
       </div>
+      <BentoGrid>
+        <BentoTile span={4} surface="yellow" eyebrow="LINE" title="@moreminimore">
+          <p>คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง</p>
+          <p><strong>ตอบใน 30 นาที (เวลาทำการ)</strong></p>
+          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-dark" style="margin-top: 16px;">ทักเลย →</a>
+        </BentoTile>
+        <BentoTile span={4} surface="soft" eyebrow="โทร" title="080-995-5945">
+          <p>คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด</p>
+          <p><strong>จ-ศ 09:00-18:00</strong></p>
+          <a href="tel:0809955945" class="btn btn-dark" style="margin-top: 16px;">โทรเลย →</a>
+        </BentoTile>
+        <BentoTile span={4} surface="purple-soft" eyebrow="Email" title="contact@moreminimore.com">
+          <p>คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ</p>
+          <p><strong>ตอบภายใน 1 วัน</strong></p>
+          <a href="mailto:contact@moreminimore.com" class="btn btn-dark" style="margin-top: 16px;">ส่งอีเมล →</a>
+        </BentoTile>
+      </BentoGrid>
     </div>
   </section>
 
   <section class="section section-yellow cta-section">
     <div class="container">
-      <div class="cta-content">
+      <div class="cta-content reveal">
         <h2 class="cta-title">พร้อมคุยรายละเอียด?</h2>
         <p class="cta-desc">นัดปรึกษาฟรี 30 นาที ผ่าน Zoom หรือนัดเจอที่ออฟฟิศ (กรุงเทพ/สมุทรสาคร)</p>
         <div class="cta-actions">
@@ -134,27 +170,13 @@ const categoryIcons: Record<string, string> = {
 </Base>
 
 <style>
-  .faq-section { background: var(--color-white); }
+  .section-bento {
-  .section-yellow { background: var(--color-primary); }
+    position: relative;
+    overflow: hidden;
+  }
 
-  .faq-category {
+  /* FAQ inside BentoTile */
-    max-width: 800px;
+  .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
-    margin: 0 auto 60px;
-  }
-  .category-title {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-family: var(--font-display);
-    font-size: 22px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 3px solid var(--color-primary);
-  }
-  .category-icon { font-size: 28px; }
-  .faq-list { display: flex; flex-direction: column; gap: 12px; }
 
   .faq-item {
     background: var(--color-white);
@@ -166,11 +188,15 @@ const categoryIcons: Record<string, string> = {
   .faq-item[open] { border-color: var(--color-primary); }
   .faq-item:hover { box-shadow: var(--shadow-sm); }
 
+  /* When inside a yellow surface, change item background to be visible */
+  .surface-yellow .faq-item { background: var(--color-white); }
+  .surface-yellow .faq-item[open] { border-color: var(--color-black); }
+
   .faq-question {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 24px;
+    padding: 14px 18px;
     cursor: pointer;
     list-style: none;
     transition: background 0.2s ease;
@@ -181,26 +207,26 @@ const categoryIcons: Record<string, string> = {
   .question-text {
     flex: 1;
     font-family: var(--font-display);
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 700;
     color: var(--color-black);
     padding-right: 16px;
   }
   .faq-toggle {
-    font-size: 28px;
+    font-size: 22px;
     font-weight: 300;
-    color: var(--color-primary);
+    color: var(--color-primary-dark);
     flex-shrink: 0;
     line-height: 1;
   }
   .faq-item[open] .faq-toggle { transform: rotate(45deg); }
 
   .faq-answer {
-    padding: 0 24px 24px;
+    padding: 0 18px 16px;
   }
   .faq-answer p {
-    font-size: 15px;
+    font-size: 14px;
-    line-height: 1.8;
+    line-height: 1.7;
     color: var(--color-gray-700);
     white-space: pre-line;
   }
@@ -214,7 +240,7 @@ const categoryIcons: Record<string, string> = {
   .topic-tag {
     display: inline-block;
     padding: 8px 16px;
-    background: var(--color-bg-alt);
+    background: var(--color-white);
     color: var(--color-gray-700);
     border: 1px solid var(--color-gray-200);
     border-radius: var(--radius-full);
@@ -228,59 +254,31 @@ const categoryIcons: Record<string, string> = {
     color: var(--color-black);
   }
 
-  /* Channels */
+  /* Section header */
-  .channels-section {
+  .section-header { text-align: center; margin-bottom: 48px; }
-    max-width: 900px;
+  .section-badge {
-    margin: 80px auto 0;
+    display: inline-block;
-    padding: 60px 40px;
+    background: var(--color-primary);
-    background: var(--color-bg-alt);
-    border-radius: var(--radius-xl);
-    text-align: center;
-  }
-  .channels-title {
-    font-family: var(--font-display);
-    font-size: 28px;
-    font-weight: 800;
     color: var(--color-black);
-    margin-bottom: 32px;
+    padding: 8px 20px;
-  }
+    border-radius: var(--radius-full);
-  .channels-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 16px;
-  }
-  .channel-card {
-    display: block;
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-lg);
-    padding: 24px;
-    text-align: center;
-    transition: all 0.3s ease;
-  }
-  .channel-card:hover {
-    border-color: var(--color-primary);
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-md);
-  }
-  .channel-icon { font-size: 32px; margin-bottom: 12px; }
-  .channel-name {
-    font-family: var(--font-display);
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 4px;
-  }
-  .channel-handle {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--color-primary-dark);
-    margin-bottom: 4px;
-  }
-  .channel-time {
     font-size: 12px;
-    color: var(--color-gray-500);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 16px;
   }
+  .section-title {
+    font-family: var(--font-display);
+    font-size: clamp(28px, 4vw, 44px);
+    font-weight: 900;
+    line-height: 1.15;
+    color: var(--color-black);
+    margin-bottom: 16px;
+  }
+  .section-title .highlight { color: var(--color-primary-dark); }
+  .section-soft { background: var(--color-bg-alt); }
+  .section-yellow { background: var(--color-primary); }
 
   /* CTA */
   .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
@@ -303,13 +301,24 @@ const categoryIcons: Record<string, string> = {
     flex-wrap: wrap;
   }
 
-  @media (max-width: 1024px) {
-    .channels-grid { grid-template-columns: 1fr; }
-  }
   @media (max-width: 640px) {
     .cta-actions { flex-direction: column; }
     .cta-actions .btn { width: 100%; justify-content: center; }
-    .faq-question { padding: 16px 20px; }
+    .faq-question { padding: 14px 16px; }
-    .question-text { font-size: 15px; }
+    .question-text { font-size: 14px; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/index.astro

@@ -2,217 +2,220 @@
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
-import Icon from '../components/Icon.astro';
 import Hero from '../components/Hero.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
 import { getCollection } from 'astro:content';
-import ServiceCard from '../components/ServiceCard.astro';
 import PortfolioCard from '../components/PortfolioCard.astro';
 
-// Hardcoded home page copy (previously in src/content/pages/home.md, now inlined)
+// 4 problem cards (down from 12) — each has symptom + cause + how we fix it
-const homeContent = {
-  badge: 'AI AGENCY ในประเทศไทย',
-  title: 'เพิ่มยอดขาย ลดต้นทุน ลดเวลา — ให้ธุรกิจของคุณ',
-  subtitle:
-    'นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น — ด้วยเว็บไซต์ SEO AI Chatbot และ Marketing Automation ที่ออกแบบมาเพื่อ SME ไทยโดยเฉพาะ',
-};
-
-const services = await getCollection('services');
-const portfolio = await getCollection('portfolio');
-const featuredPortfolio = portfolio.slice(0, 4);
-
-// 4 mega-services (use existing service collection filtered)
-const allServices = services.slice(0, 4);
-const serviceImages: Record<string, string> = {
-  'automation': '/images/services/automation.jpg',
-  'ai-consult': '/images/services/ai-consult.jpg',
-  'marketing': '/images/services/marketing.jpg',
-  'webdev': '/images/services/webdev.jpg',
-};
-
-// 12 problem cards grouped by 4 service buckets (3 per bucket).
-// Each card: serviceBucket, icon (Lucide), title, description, result.
 const problemCards = [
-  // 🏢 Website — load/SEO/visibility
   {
-    bucket: 'website',
-    icon: 'globe',
-    title: 'เว็บไซต์โหลดช้า ลูกค้าปิดก่อนเห็นสินค้า',
-    description: 'หน้าเว็บใช้เวลาโหลดเกิน 5 วินาที ลูกค้า 53% ปิดทิ้งทันที',
-    result: '→ เสียโอกาสขายตั้งแต่วินาทีแรก',
-  },
-  {
-    bucket: 'website',
-    icon: 'search',
-    title: 'อยู่หน้า 5 ของ Google หรือหายไปเลย',
-    description: 'ลูกค้าค้นหาแล้วไม่เจอเว็บคุณ เจอแต่คู่แข่ง',
-    result: '→ ต้องจ่ายค่าโฆษณาเพิ่มทุกเดือน',
-  },
-  {
-    bucket: 'website',
-    icon: 'shoppingCart',
-    title: 'เว็บมีอยู่ แต่ลูกค้าซื้อไม่ได้',
-    description: '<27>อร์มไม่ส่ง ตะกร้าค้าง ชำระเงินไม่ผ่าน',
-    result: '→ ยอดขายตกทั้งที่คนเข้าเว็บเยอะ',
-  },
-  // ⚙️ AI Automation — operations / efficiency
-  {
-    bucket: 'automation',
-    icon: 'message',
-    title: 'ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน',
-    description: 'ทีม 1–2 คนตอบไม่ไหว ลูกค้ารอ 5 นาทีแล้วไปซื้อที่อื่น',
-    result: '→ ยอดหายโดยไม่มีใครรู้ตัว',
-  },
-  {
-    bucket: 'automation',
-    icon: 'clipboard',
-    title: 'งานซ้ำ ๆ ใช้เวลาคนเป็นชั่วโมงทุกวัน',
-    description: 'คีย์ข้อมูล ทำใบเสนอราคา อัปเดตสต็อก ทุกอย่างทำมือ',
-    result: '→ ต้นทุนค่าแรงสูงขึ้นโดยไม่จำเป็น',
-  },
-  {
-    bucket: 'automation',
-    icon: 'cog',
-    title: 'ระบบแยกกัน ไม่คุยกัน',
-    description: 'CRM · ERP · ระบบบัญชี · หน้าร้าน ต่างคนต่างอยู่',
-    result: '→ ตัดสินใจช้า เพราะข้อมูลไม่เชื่อม',
-  },
-  // 📈 SEO + Content — traffic / leads
-  {
-    bucket: 'marketing',
     icon: 'trendingDown',
-    title: 'ลงโฆษณา แต่ยอดขายไม่ขยับ',
+    title: 'ลงโฆษณาแล้วยอดไม่ขยับ',
-    description: 'คลิกเยอะ แต่ไม่มีใครซื้อ — ไม่มี Funnel ไม่มี Lead scoring',
+    symptom: 'คลิกเยอะ ยอดขายเท่าเดิม แต่คนที่ไม่ซื้อ',
-    result: '→ เงินหายไปกับคลิกที่ไม่มีคุณภาพ',
+    cause: 'เลือกกลุ่มเป้าหมายผิด หรือยิงทุก Platform โดยไม่ดูว่าอันไหนคุ้ม',
+    fix: 'ดูสถิติ 3 เดือนย้อนหลัง แยกว่า Platform ไหน Convert ดี ตัดอันที่เสียเงินเปล่า? หรือ ถ้ายังไม่มีการวางระบบเก็บข้อมูล ก็จะวางระบบให้ ดังนั้นระยะยาวจะเห็นความแตกต่างแน่นอน',
+    example: 'เคส Dataroot: เพิ่ม Impression 373%, Click 114% โดยใช้งบน้อยลง 28% — ดูเคสเต็มใน Portfolio',
   },
   {
-    bucket: 'marketing',
+    icon: 'shoppingCart',
-    icon: 'pen',
+    title: 'เว็บมีคนเข้า แต่ไม่มีคนซื้อ',
-    title: 'เขียนคอนเทนต์เองไม่ทัน',
+    symptom: 'Traffic เข้าพอสมควร แต่ไม่มีใครทัก ไม่มีใครโทร',
-    description: 'อยากโพสต์สม่ำเสมอ แต่ทีมไม่มีเวลา',
+    cause: 'เว็บสวยแต่ไม่ได้ออกแบบมาให้คนซื้อ หรือมีจุดติดขัดที่ทำให้คนออกก่อน',
-    result: '→ คอนเทนต์หยุดชะงัก ลูกค้าลืม',
+    fix: 'กรณีที่เว็บไม่มีการวางโค้ดเก็บสถิติ ก็จะวางระบบให้ ในกรณีที่มีระบบเก็บสถิติแล้ว ก็จะศึกษาสถิติ และดู Heatmap ว่าคนเข้ามาแล้วทำอะไร และปรับเว็บทีละจุด',
+    example: 'ลองคุยกัน เราจะดูให้ว่าเว็บคุณติดปัญหาตรงไหน',
   },
   {
-    bucket: 'marketing',
+    icon: 'clipboard',
-    icon: 'megaphone',
+    title: 'งานซ้ำ ๆ เสียเวลาเป็นชั่วโมงทุกวัน',
-    title: 'ไม่รู้ว่าใครซื้อ ใครแค่ทักมาถามเล่น',
+    symptom: 'ทีมต้องคีย์ข้อมูล ทำรายงาน ตอบแชตเดิม ๆ จนไม่มีเวลาทำงานหลัก',
-    description: 'ไม่มีระบบติดตาม ไม่มี CRM ไม่มี Report',
+    cause: 'ระบบไม่มีการเชื่อมกัน หรือยังทำ Manual อยู่',
-    result: '→ ลงทุนการตลาดแบบเดา',
+    fix: 'ดู Workflow ก่อน แล้วเลือกเครื่องมือที่เหมาะสม เช่น n8n, Script, หรือ AI ซึ่งจะช่วยลดเวลาจากชั่วโมงเป็นนาที หรือ อาจจะไม่ต้องให้พนักงานเสียเวลาอีกเลย เพราะระบบทำให้เองอัตโนมัติ',
-  },
+    example: 'ลองคุยกัน เราจะดู Workflow ให้ฟรี',
-  // 🖥️ Tech Consult — infrastructure / scale
-  {
-    bucket: 'tech',
-    icon: 'server',
-    title: 'ไม่อยากจ้างทีม IT แต่ต้องมี Server',
-    description: 'ระบบหลังบ้านต้องทำงาน แต่จ้างประจำแพงเกิน',
-    result: '→ ต้นทุนคงที่สูงโดยไม่คุ้ม',
   },
   {
-    bucket: 'tech',
+    icon: 'brain',
-    icon: 'shield',
+    title: 'ให้พนักงานใช้ AI แต่ไม่เห็นผลลัพธ์อย่างที่ต้องการ และยังมีค่าใช้จ่ายที่สูงเพิ่มแทน',
-    title: 'กังวลเรื่อง PDPA / ข้อมูลรั่วไหล',
+    symptom: 'จ่ายแพง ใช้ AI ระดับ Frontier กับทุกงาน แต่ผลลัพธ์ไม่คุ้มเงิน',
-    description: 'เก็บข้อมูลลูกค้าแต่ไม่รู้ว่าปลอดภัยแค่ไหน',
+    cause: 'ใช้ AI ผิดแบบ — งานหลายอย่างใช้ Model ราคาถูกก็ได้ผลเท่า ๆ กัน หรือ พนักงานไม่เข้าใจสิ่งที่ AI จะช่วยงานจริง ทำให้ใช้งานผิดรูปแบบ',
-    result: '→ เสี่ยงถูกฟ้องร้อง ถูกปรับ',
+    fix: 'เลือกใช้ AI ให้ถูกกับงาน เพื่อประหยัดค่าใช้จ่าย รวมถึงให้ความรู้ หรือ วางระบบ AI Agent ให้มี skill เฉพาะทาง เพื่อช่วยพนักงาน ไม่ใช้ให้พนักงานใช้ AI โดยไม่มี skill พิเศษ',
-  },
+    example: 'AI Audit ฟรี — บอกได้ว่าควรใช้ AI ตัวไหน',
-  {
-    bucket: 'tech',
-    icon: 'monitor',
-    title: 'อยากใช้ AI แต่ไม่รู้จะเริ่มยังไง',
-    description: 'มี ChatGPT ใช้ แต่เอามาทำงานจริงในธุรกิจไม่เป็น',
-    result: '→ เสียโอกาสที่ AI จะช่วยลดงานได้',
   },
 ];
 
-const bucketLabels: Record<string, string> = {
+// Surface color rotation for the 4 problem cards — keep variety
-  website: 'Website',
+const problemSurfaces = ['yellow', 'purple-soft', 'mint', 'soft'] as const;
-  automation: 'AI Automation',
-  marketing: 'SEO + Content',
-  tech: 'Tech Consult',
-};
 
-// Pre-group problem cards by bucket (4 groups, in canonical service order)
+const services = await getCollection('services');
-const problemGroupOrder = ['website', 'automation', 'marketing', 'tech'] as const;
+
-const problemGroups = problemGroupOrder.map((bucket) => ({
+// De-duplicate services: keep only the `-new` version when both old and new exist
-  bucket,
+// for the same base slug. Falls back to the old one if no `-new` exists.
-  label: bucketLabels[bucket],
+// Group by base slug (strip trailing `-new` if present).
-  cards: problemCards.filter((c) => c.bucket === bucket),
+const dedupedServices = (() => {
-}));
+  const byBase = new Map<string, typeof services[number]>();
+  for (const s of services) {
+    const base = s.id.endsWith('-new') ? s.id.slice(0, -4) : s.id;
+    const existing = byBase.get(base);
+    if (!existing) {
+      byBase.set(base, s);
+    } else if (s.id.endsWith('-new') && !existing.id.endsWith('-new')) {
+      // Prefer the -new version
+      byBase.set(base, s);
+    }
+  }
+  return Array.from(byBase.values());
+})();
+
+const portfolio = await getCollection('portfolio');
+const featuredPortfolio = portfolio.filter(p =>
+  ['dataroot', 'jet-industries', 'tuanthong', 'lawyernoom'].includes(p.id)
+).sort((a, b) => {
+  const order = ['dataroot', 'jet-industries', 'tuanthong', 'lawyernoom'];
+  return order.indexOf(a.id) - order.indexOf(b.id);
+});
 ---
 
-<Base title="MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
+<Base title="MoreminiMore - ที่ปรึกษาเว็บ การตลาด และ AI สำหรับ SME ไทย">
   <Navigation />
 
   <Hero
-    badge={homeContent.badge}
+    badge="Moreminimore"
-    title={homeContent.title}
+    title="เราจะช่วยคุณเพิ่มกำไร"
-    subtitle={homeContent.subtitle}
+    subtitle="เราช่วยวางระบบงาน และใช้สถิติวางกลยุทธ์ทางการตลาด"
   >
     <a slot="hero-cta-secondary" href="/portfolio" class="btn btn-outline-dark">
       ดูผลงานจริง
     </a>
   </Hero>
 
-  <!-- PROBLEM SECTION — 12 pain cards, 3 per service bucket (light) -->
+  <!-- PROBLEM SECTION — Bento layout (4 cards, varied spans) -->
-  <section class="section section-soft">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', left: '-150px' }} opacity={0.25} blur="80px" />
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '-100px' }} opacity={0.4} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
-        <span class="section-badge">ปัญหาที่ SME ไทยเจอซ้ำทุกวัน</span>
+        <span class="section-badge">4 ปัญหาที่เจอบ่อยที่สุด</span>
         <h2 class="section-title">
-          คุณกำลังเจอ <span class="highlight">แบบนี้อยู่</span> ใช่ไหม?
+          แต่ละปัญหา<span class="highlight">มีวิธีแก้ที่ต่างกัน</span>
         </h2>
-        <p class="section-desc">12 ปัญหาที่แบ่งตามบริการของเรา เลือกดูได้เลยว่าตรงกับคุณข้อไหน</p>
+        <p class="section-desc">เราไม่ได้บอกว่า "เราทำได้หมด" แต่บอกว่า "ถ้าเป็นแบบนี้ ทำแบบนี้"</p>
       </div>
 
-      {problemGroups.map((group) => (
+      <BentoGrid>
-        <div class="problem-group reveal">
+        {problemCards.map((card, i) => (
-          <h3 class="problem-group-title">
+          <BentoTile span={6} surface={problemSurfaces[i]} eyebrow={`ปัญหา ${String(i + 1).padStart(2, '0')}`} title={card.title}>
-            <span class="problem-group-tag">{group.label}</span>
+            <div class="problem-section">
-          </h3>
+              <span class="problem-label">อาการ</span>
-          <div class="problem-grid">
+              <p class="problem-text">{card.symptom}</p>
-            {group.cards.map((card) => (
-              <div class="problem-card">
-                <div class="problem-icon-badge">
-                  <Icon name={card.icon} size={28} color="dark" />
-                </div>
-                <h4 class="problem-title">{card.title}</h4>
-                <p class="problem-desc">{card.description}</p>
-                <span class="problem-result">{card.result}</span>
-              </div>
-            ))}
             </div>
+
+            <div class="problem-section">
+              <span class="problem-label">สาเหตุส่วนใหญ่</span>
+              <p class="problem-text">{card.cause}</p>
             </div>
+
+            <div class="problem-fix">
+              <span class="problem-label problem-label-fix">เราแก้ยังไง</span>
+              <p class="problem-text">{card.fix}</p>
+            </div>
+
+            <div class="problem-example">
+              <span class="problem-example-icon">▸</span> {card.example}
+            </div>
+          </BentoTile>
         ))}
+      </BentoGrid>
 
       <p class="problem-closing reveal">
-        <span class="highlight">ทุกปัญหาข้างต้นแก้ได้ด้วยระบบเดียว</span> — ดูว่าเราทำยังไง
+        ไม่แน่ใจว่าตรงกับข้อไหน — <a href="/contact" class="closing-link">นัดคุย 30 นาทีฟรี</a> เราจะช่วยดู
       </p>
     </div>
   </section>
 
-  <!-- SERVICES SECTION — 4 mega cards on white (stagger-children) -->
+  <!-- SERVICES SECTION — Bento layout (4 services, asymmetric) -->
-  <section class="section services-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="purple" size="500px" speed={0.4} position={{ top: '-200px', right: '-150px' }} opacity={0.2} blur="100px" />
+    <DecoOrb color="yellow" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.25} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">บริการของเรา</span>
         <h2 class="section-title">
-          ครบจบในที่เดียว — <span class="highlight">โซลูชัน AI สำหรับธุรกิจไทย</span>
+          เลือกบริการที่<span class="highlight">ตรงกับปัญหาของคุณ</span>
         </h2>
-        <p class="section-desc">เลือกแค่ที่คุณต้องการ หรือให้เราวางแผนทั้งระบบให้ก็ได้</p>
+        <p class="section-desc">ไม่จำเป็นต้องทำทุกอย่างพร้อมกัน</p>
       </div>
 
-      <div class="services-mega-grid stagger-children">
+      <BentoGrid>
-        {allServices.map(s => (
+        {dedupedServices.slice(0, 4).map((s, i) => {
-          <a href={`/services/${s.id}`} class="mega-card">
+          // Tile-specific copy overrides (per user spec)
-            <span class="mega-tag">{s.data.badge}</span>
+          const tileCopy = [
-            <h3 class="mega-title">{s.data.title}</h3>
+            {
-            <p class="mega-subtitle">{s.data.subtitle}</p>
+              eyebrow: 'ที่ปรึกษาด้าน AI',
+              surface: 'mint',
+              subtitle: 'การนำ AI มาปรับใช้ในองค์กร เพื่อลดต้นทุนและเวลา รวมถึงการรักษาความรู้จากพนักงานที่เชี่ยวชาญ',
+              objective: 'รักษาความรู้ขององค์กร ลดต้นทุนและเวลาการทำงาน',
+              bullets: [
+                'วิเคราะห์ workflow ที่เหมาะกับ AI ก่อนลงทุน',
+                'เลือก AI Model ที่คุ้มค่า ไม่ใช่แพงสุด',
+                'วางระบบ AI Agent ที่พนักงานใช้จริง',
+              ],
+            },
+            {
+              eyebrow: 'วางระบบ Automation',
+              surface: 'purple',
+              subtitle: 'การออกแบบระบบ Automation สำหรับธุรกิจคุณโดยเฉพาะ',
+              objective: 'ลดต้นทุนและเวลา',
+              bullets: [
+                'ดู Workflow ก่อน เลือกเครื่องมือที่เหมาะสม',
+                'ลดเวลางานซ้ำจากชั่วโมงเป็นนาที',
+                'ระบบทำงานอัตโนมัติ พนักงานไม่เสียเวลาทำ Manual',
+              ],
+            },
+            {
+              eyebrow: 'ที่ปรึกษาการตลาดออนไลน์',
+              surface: 'coral',
+              subtitle: 'ออกแบบและวางกลยุทธ์ตามสถิติ กลุ่มเป้าหมาย และการทำงานขององค์กรคุณ',
+              objective: 'เพิ่มยอดขาย',
+              bullets: [
+                'วางกลยุทธ์จากสถิติกลุ่มเป้าหมาย ไม่ใช่เดา',
+                'ดู Platform ที่ Convert ดี ตัดอันที่เสียเงินเปล่า',
+                'ระบบเก็บข้อมูล + วิเคราะห์ผล ค่อย ๆ ปรับ',
+              ],
+            },
+            {
+              eyebrow: 'พัฒนาเว็บไซต์',
+              surface: 'purple-soft',
+              subtitle: 'พัฒนาเว็บไซต์ที่สร้างผลลัพธ์ได้จริง สวยงาม และลูกค้าสามารถดูแลได้เอง',
+              objective: 'เพิ่มยอดขาย และความน่าเชื่อถือให้ธุรกิจ',
+              bullets: [
+                'เว็บที่ขายได้ + ลูกค้าดูแลเอง ไม่ต้องพึ่งเราทุกครั้ง',
+                'ออกแบบ SEO + GEO ให้ติดทั้ง Google และ AI Search',
+                'เลือก Tech Stack ที่เหมาะกับธุรกิจ ไม่ใช่ของถูกแต่พังบ่อย',
+              ],
+            },
+          ];
+          // 2x2 layout — each tile span 6 (6+6 per row, 2 rows)
+          const span = 6;
+          const copy = tileCopy[i];
+          const surface = copy.surface;
+          return (
+            <BentoTile span={span} surface={surface} eyebrow={copy.eyebrow} title={s.data.title}>
+              <p class="mega-subtitle">{copy.subtitle}</p>
+              <ul class="mega-bullets">
+                {copy.bullets.map(b => <li>{b}</li>)}
+              </ul>
               <div class="mega-objective">
                 <span class="objective-label">เป้าหมาย:</span>
-              <span class="objective-value">{s.data.objective}</span>
+                <span class="objective-value">{copy.objective}</span>
               </div>
               <span class="mega-cta">ดูรายละเอียด →</span>
-          </a>
+              <a href={`/services/${s.id}`} class="tile-link-overlay" aria-label={`ดูรายละเอียด ${s.data.title}`}></a>
-        ))}
+            </BentoTile>
-      </div>
+          );
+        })}
+      </BentoGrid>
 
       <div class="section-cta">
         <a href="/services" class="btn btn-dark btn-lg">ดูบริการทั้งหมด →</a>
@@ -220,31 +223,31 @@ const problemGroups = problemGroupOrder.map((bucket) => ({
     </div>
   </section>
 
-  <!-- PULL QUOTE — black section, oversized white text -->
+  <!-- PULL QUOTE -->
   <section class="section section-dark-quote reveal">
     <div class="container">
       <blockquote class="pull-quote">
         <p class="quote-text">
           "เป้าหมายของเราคือ <span class="highlight">กำไรที่มากขึ้นของลูกค้า</span>"
         </p>
-        <cite class="quote-author">— มอร์มินิมอร์, ปณิธานการทำงาน</cite>
+        <cite class="quote-author">— มอร์มินิมอร์</cite>
       </blockquote>
     </div>
   </section>
 
-  <!-- PORTFOLIO PREVIEW — 4 featured on soft -->
+  <!-- PORTFOLIO PREVIEW — featured real cases (filtered: must have url) -->
   <section class="section section-soft">
     <div class="container">
       <div class="section-header reveal">
-        <span class="section-badge">ผลงานจริง · ไม่ใช่ Mockup</span>
+        <span class="section-badge">ผลงานจริง ไม่ใช่ Mockup</span>
         <h2 class="section-title">
-          ลูกค้าจริง <span class="highlight">ผลลัพธ์จริง</span>
+          ลูกค้าจริง <span class="highlight">เว็บจริง</span>
         </h2>
-        <p class="section-desc">ตัวอย่างผลงานที่เราภาคภูมิใจ — คลิกดูเว็บจริงได้เลย</p>
+        <p class="section-desc">คลิกเข้าไปดูเว็บจริงที่ใช้งานอยู่ทุกวันนี้</p>
       </div>
 
       <div class="portfolio-preview-grid stagger-children">
-        {featuredPortfolio.map((item) => (
+        {featuredPortfolio.filter(p => p.data.url).slice(0, 4).map((item) => (
           <PortfolioCard
             name={item.data.name}
             url={item.data.url}
@@ -265,12 +268,12 @@ const problemGroups = problemGroupOrder.map((bucket) => ({
     </div>
   </section>
 
-  <!-- FINAL CTA — yellow section -->
+  <!-- FINAL CTA -->
   <section class="section section-yellow cta-section">
     <div class="container">
       <div class="cta-content reveal">
-        <h2 class="cta-title">พร้อมเปลี่ยนธุรกิจของคุณ?</h2>
+        <h2 class="cta-title">คุยกันก่อน 30 นาที ฟรี</h2>
-        <p class="cta-desc">ปรึกษาฟรี 30 นาที — เราจะถามคำถาม 5 ข้อ แล้วบอกคุณได้เลยว่าควรเริ่มจากตรงไหน</p>
+        <p class="cta-desc">เราจะแนะนำแนวทางเบื้องต้นให้คุณว่าควรเริ่มจากตรงไหน — จะบอกตรง ๆ ว่าอะไรควรทำหรือไม่ควรทำ</p>
         <div class="cta-actions">
           <a href="/contact" class="btn btn-dark btn-lg">
             นัดคุย 30 นาที
@@ -282,7 +285,7 @@ const problemGroups = problemGroupOrder.map((bucket) => ({
             ทัก LINE: @moreminimore
           </a>
         </div>
-        <p class="cta-reassurance">ไม่มี commitment · ไม่มี script sales · พูดตรง ๆ ว่าทำได้หรือทำไม่ได้</p>
+        <p class="cta-reassurance">ไม่มี commitment · ไม่มี script sales · พูดตรง ๆ</p>
       </div>
     </div>
   </section>
@@ -291,259 +294,190 @@ const problemGroups = problemGroupOrder.map((bucket) => ({
 </Base>
 
 <style>
-  /* ============================================
+  .section-bento {
-     SECTION HEADER (light)
+    position: relative;
-     ============================================ */
+    overflow: hidden;
-  .section-header {
-    text-align: center;
-    margin-bottom: 60px;
   }
-  .section-badge {
+
-    display: inline-block;
+  /* ============================================
-    background: var(--color-primary);
+     PROBLEM TILES (inside BentoTile)
-    color: var(--color-black);
+     ============================================ */
-    padding: 8px 20px;
+  .problem-section {
-    border-radius: var(--radius-full);
+    margin-bottom: 14px;
-    font-size: 12px;
+  }
+  .problem-fix {
+    background: rgba(255, 220, 0, 0.25);
+    border-left: 3px solid var(--color-black);
+    padding: 12px 14px;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    margin: 14px -14px;
+  }
+  .surface-purple-soft .problem-fix,
+  .surface-mint .problem-fix,
+  .surface-soft .problem-fix {
+    background: rgba(0, 0, 0, 0.05);
+    border-left-color: var(--color-black);
+  }
+  .problem-label {
+    display: block;
+    font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 2px;
+    letter-spacing: 1.5px;
-    margin-bottom: 16px;
+    margin-bottom: 6px;
+    opacity: 0.7;
   }
-  .section-title {
+  .surface-yellow .problem-label { color: var(--color-black); opacity: 0.7; }
-    font-family: var(--font-display);
+  .problem-label-fix { color: var(--color-black); opacity: 1; }
-    font-size: clamp(28px, 4vw, 44px);
+  .problem-text {
-    font-weight: 900;
+    font-size: 14px;
-    line-height: 1.15;
-    color: var(--color-black);
-    margin-bottom: 16px;
-  }
-  .section-title .highlight,
-  .section-desc .highlight,
-  .quote-text .highlight,
-  .problem-closing .highlight {
-    color: var(--color-primary-dark);
-  }
-  .section-soft .section-title .highlight {
-    color: var(--color-primary-dark);
-  }
-  .section-desc {
-    font-size: 17px;
-    color: var(--color-gray-600);
     line-height: 1.6;
-    max-width: 600px;
+    margin: 0;
+  }
+  .surface-yellow .problem-text { color: var(--color-black); }
+  .surface-purple-soft .problem-text,
+  .surface-mint .problem-text,
+  .surface-soft .problem-text { color: var(--color-gray-700); }
+  .problem-example {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px dashed currentColor;
+    opacity: 0.7;
+    font-size: 13px;
+    line-height: 1.5;
+    font-style: italic;
+  }
+  .problem-example-icon {
+    font-style: normal;
+    font-weight: 700;
+    margin-right: 4px;
+  }
+  .problem-closing {
+    text-align: center;
+    margin-top: 48px;
+    font-size: 17px;
+    color: var(--color-gray-700);
+  }
+  .closing-link {
+    color: var(--color-primary-dark);
+    font-weight: 700;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  /* ============================================
+     SERVICES TILES (inside BentoTile)
+     ============================================ */
+  .mega-subtitle {
+    font-size: 15px;
+    line-height: 1.6;
+    margin-bottom: 16px;
+  }
+  .surface-yellow .mega-subtitle { color: var(--color-black); opacity: 0.85; }
+  .surface-purple-soft .mega-subtitle { color: var(--color-black); }
+  .surface-soft .mega-subtitle { color: var(--color-gray-700); }
+
+  /* Bullet list for service tiles */
+  .mega-bullets {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 20px;
+  }
+  .mega-bullets li {
+    position: relative;
+    padding-left: 20px;
+    font-size: 14px;
+    line-height: 1.6;
+    margin-bottom: 8px;
+  }
+  .mega-bullets li::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 9px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.4;
+  }
+
+  /* Light text on dark service tiles */
+  .surface-purple .mega-subtitle,
+  .surface-purple .mega-bullets,
+  .surface-purple .mega-bullets li::before,
+  .surface-coral .mega-subtitle,
+  .surface-coral .mega-bullets,
+  .surface-coral .mega-bullets li::before {
+    color: rgba(255, 255, 255, 0.95);
+  }
+  .surface-soft .mega-subtitle { color: var(--color-gray-700); }
+  .mega-objective {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: var(--radius-md);
+    margin-bottom: 20px;
+  }
+  .surface-yellow .mega-objective { background: rgba(0, 0, 0, 0.1); }
+  .objective-label {
+    font-size: 12px;
+    font-weight: 600;
+    opacity: 0.7;
+  }
+  .objective-value {
+    font-size: 13px;
+    font-weight: 700;
+  }
+  .surface-yellow .objective-value { color: var(--color-black); }
+  .mega-cta {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    text-decoration: none;
+    transition: transform 0.2s ease;
+  }
+  .bento-tile:hover .mega-cta { transform: translateX(4px); }
+
+  /* ============================================
+     PORTFOLIO PREVIEW
+     ============================================ */
+  .portfolio-preview-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    max-width: 900px;
     margin: 0 auto;
   }
+
+  /* ============================================
+     SECTION UTILITIES
+     ============================================ */
+  .section-header { margin-bottom: 40px; }
   .section-cta {
     text-align: center;
     margin-top: 48px;
   }
 
   /* ============================================
-     PROBLEM CARDS — 12 cards, 3 per service bucket
+     PULL QUOTE — dark band
-     ============================================ */
-  .section-soft { background: var(--color-bg-alt); }
-
-  .problem-group {
-    margin-bottom: 56px;
-  }
-  .problem-group:last-of-type {
-    margin-bottom: 0;
-  }
-  .problem-group-title {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-  }
-  .problem-group-tag {
-    display: inline-block;
-    font-family: var(--font-display);
-    font-size: 13px;
-    font-weight: 800;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    color: var(--color-black);
-    background: var(--color-primary);
-    padding: 6px 14px;
-    border-radius: var(--radius-sm);
-  }
-  .problem-group-title::after {
-    content: '';
-    flex: 1;
-    height: 2px;
-    background: var(--color-primary);
-    opacity: 0.4;
-  }
-
-  .problem-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-  }
-  .problem-card {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 28px 24px;
-    transition: all 0.3s ease;
-    display: flex;
-    flex-direction: column;
-  }
-  .problem-card:hover {
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-md);
-    border-color: var(--color-primary);
-  }
-  .problem-icon-badge {
-    width: 56px;
-    height: 56px;
-    border-radius: 50%;
-    background: var(--color-primary);
-    border: 2px solid var(--color-black);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 16px;
-  }
-  .problem-title {
-    font-family: var(--font-display);
-    font-size: 17px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 10px;
-    line-height: 1.35;
-  }
-  .problem-desc {
-    font-size: 14px;
-    color: var(--color-gray-600);
-    line-height: 1.6;
-    margin-bottom: 14px;
-    flex: 1;
-  }
-  .problem-result {
-    display: block;
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--color-primary-dark);
-  }
-  .problem-closing {
-    text-align: center;
-    margin-top: 48px;
-    font-size: 18px;
-    color: var(--color-gray-700);
-  }
-
-  /* ============================================
-     SERVICES MEGA GRID
-     ============================================ */
-  .services-mega-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
-  }
-  .mega-card {
-    display: block;
-    background: var(--color-white);
-    border: 2px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-    transition: all 0.3s ease;
-    position: relative;
-  }
-  .mega-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: var(--color-primary);
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.4s var(--ease-out-expo);
-    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
-  }
-  .mega-card:hover::before { transform: scaleX(1); }
-  .mega-card:hover {
-    border-color: var(--color-primary);
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-md);
-  }
-  .mega-tag {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 4px 12px;
-    border-radius: var(--radius-sm);
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 12px;
-  }
-  .mega-title {
-    font-family: var(--font-display);
-    font-size: 24px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 8px;
-  }
-  .mega-subtitle {
-    font-size: 15px;
-    color: var(--color-gray-600);
-    line-height: 1.6;
-    margin-bottom: 16px;
-  }
-  .mega-objective {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    background: var(--color-bg-alt);
-    border-radius: var(--radius-md);
-    margin-bottom: 16px;
-  }
-  .objective-label {
-    font-size: 12px;
-    color: var(--color-gray-500);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-  .objective-value {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--color-black);
-  }
-  .mega-cta {
-    display: inline-block;
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--color-black);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-  .mega-card:hover .mega-cta {
-    color: var(--color-primary-dark);
-  }
-
-  /* ============================================
-     PULL QUOTE (dark band — only dark section on home)
      ============================================ */
   .section-dark-quote {
     background: var(--color-black);
     padding: 100px 0;
   }
-  .section-dark-quote .pull-quote {
+  .pull-quote {
     text-align: center;
     max-width: 1000px;
     margin: 0 auto;
   }
   .quote-text {
     font-family: var(--font-display);
-    font-size: clamp(28px, 4.5vw, 56px);
+    font-size: clamp(28px, 4.5vw, 52px);
     font-weight: 800;
-    line-height: 1.3;
+    line-height: 1.25;
     color: var(--color-white);
     margin-bottom: 24px;
   }
@@ -552,62 +486,109 @@ const problemGroups = problemGroupOrder.map((bucket) => ({
   }
   .quote-author {
     font-style: normal;
-    font-size: 14px;
+    font-size: 13px;
     color: var(--color-gray-400);
     text-transform: uppercase;
-    letter-spacing: 2px;
+    letter-spacing: 3px;
+    font-weight: 600;
   }
 
   /* ============================================
-     PORTFOLIO PREVIEW GRID — 2x2 on desktop
+     FINAL CTA — yellow section
      ============================================ */
-  .portfolio-preview-grid {
+  .cta-section {
-    display: grid;
+    background: var(--color-primary);
-    grid-template-columns: repeat(2, 1fr);
+    padding: 100px 0;
-    gap: 24px;
+    position: relative;
+    overflow: hidden;
+  }
+  .cta-section::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -10%;
+    width: 600px;
+    height: 600px;
+    background: var(--color-primary-dark);
+    border-radius: 50%;
+    opacity: 0.4;
+    z-index: 0;
+  }
+  .cta-section::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    left: -5%;
+    width: 400px;
+    height: 400px;
+    background: var(--color-primary-dark);
+    border-radius: 50%;
+    opacity: 0.3;
+    z-index: 0;
+  }
+  .cta-content {
+    text-align: center;
+    max-width: 720px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
   }
-
-  /* ============================================
-     FINAL CTA
-     ============================================ */
-  .section-yellow { background: var(--color-primary); }
-  .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
   .cta-title {
     font-family: var(--font-display);
-    font-size: clamp(28px, 4vw, 44px);
+    font-size: clamp(32px, 5vw, 52px);
     font-weight: 900;
     color: var(--color-black);
-    margin-bottom: 16px;
+    margin-bottom: 20px;
+    line-height: 1.15;
   }
   .cta-desc {
     font-size: 18px;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--color-black);
-    margin-bottom: 32px;
+    opacity: 0.8;
+    margin-bottom: 36px;
+    line-height: 1.6;
   }
   .cta-actions {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
+    margin-bottom: 20px;
+  }
+  .cta-actions .btn svg {
+    width: 18px;
+    height: 18px;
+    margin-left: 4px;
   }
   .cta-reassurance {
-    margin-top: 24px;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--color-black);
+    opacity: 0.7;
+    font-weight: 500;
   }
 
   /* ============================================
      RESPONSIVE
      ============================================ */
   @media (max-width: 1024px) {
-    .problem-grid { grid-template-columns: repeat(2, 1fr); }
+    .portfolio-preview-grid { grid-template-columns: 1fr; max-width: 500px; }
-    .services-mega-grid { grid-template-columns: 1fr; }
-    .portfolio-preview-grid { grid-template-columns: repeat(2, 1fr); }
   }
   @media (max-width: 640px) {
-    .problem-grid { grid-template-columns: 1fr; }
-    .portfolio-preview-grid { grid-template-columns: 1fr; }
     .cta-actions { flex-direction: column; }
     .cta-actions .btn { width: 100%; justify-content: center; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/portfolio.astro

@@ -5,21 +5,22 @@ import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
 import PortfolioCard from '../components/PortfolioCard.astro';
 import Icon from '../components/Icon.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
 import { getCollection } from 'astro:content';
 
 const portfolio = await getCollection('portfolio');
+// Filter: only show real cases (have url) and not drafts
+const realPortfolio = portfolio.filter(p => p.data.url && p.data.url !== '');
 
 // Industry filter metadata: id -> { label, icon }
 // Icons are lucide-style SVGs; emoji-free.
-const industryFilters = [
+// Service category filters (multi-category supported via comma-sep)
+const serviceFilters = [
   { id: 'all', label: 'ทั้งหมด', icon: 'layers' },
-  { id: '🏭 โรงงาน', label: 'โรงงาน', icon: 'factory' },
+  { id: 'consult', label: 'Consult', icon: 'briefcase' },
-  { id: '💊 สินค้าอุปโภค', label: 'สินค้าอุปโภค', icon: 'package' },
+  { id: 'webdev', label: 'Website Development', icon: 'code' },
-  { id: '⚖️ สำนักงานกฎหมาย', label: 'สำนักงานกฎหมาย', icon: 'scale' },
-  { id: '📚 สถาบัน / การศึกษา', label: 'สถาบัน / การศึกษา', icon: 'graduationCap' },
-  { id: '📈 ที่ปรึกษาธุรกิจ', label: 'ที่ปรึกษาธุรกิจ', icon: 'trendingUp' },
-  { id: '🎨 Digital Agency', label: 'Digital Agency', icon: 'pen' },
-  { id: '🛒 E-commerce', label: 'E-commerce', icon: 'shoppingCart' },
 ];
 ---
 
@@ -36,7 +37,7 @@ const industryFilters = [
   <section class="filter-section">
     <div class="container">
       <div class="filter-bar">
-        {industryFilters.map(f => (
+        {serviceFilters.map(f => (
           <button
             class="filter-btn"
             class:list={[{ active: f.id === 'all' }]}
@@ -44,17 +45,19 @@ const industryFilters = [
           >
             {f.id !== 'all' && <Icon name={f.icon as any} size={16} class="filter-icon" />}
             {f.id === 'all' && <Icon name={f.icon as any} size={16} class="filter-icon" />}
-            <span>{f.id === 'all' ? `ทั้งหมด (${portfolio.length})` : f.label}</span>
+            <span>{f.id === 'all' ? `ทั้งหมด (${realPortfolio.length})` : f.label}</span>
           </button>
         ))}
       </div>
     </div>
   </section>
 
-  <section class="section portfolio-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-150px' }} opacity={0.2} blur="80px" />
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.35} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="portfolio-grid stagger-children">
-        {portfolio.map(item => (
+        {realPortfolio.map(item => (
           <PortfolioCard
             name={item.data.name}
             url={item.data.url || '#'}
@@ -71,9 +74,11 @@ const industryFilters = [
     </div>
   </section>
 
-  <!-- "ดีลที่เราเลือก" Section -->
+  <!-- "ดีลที่เราเลือก" Section — Bento tiles -->
-  <section class="section section-soft">
+  <section class="section section-soft section-bento">
-    <div class="container">
+    <DecoOrb color="purple" size="500px" speed={0.4} position={{ top: '-200px', left: '20%' }} opacity={0.18} blur="100px" />
+    <DecoOrb color="yellow" size="350px" speed={0.3} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">ดีลที่เราเลือก</span>
         <h2 class="section-title">
@@ -81,23 +86,19 @@ const industryFilters = [
         </h2>
       </div>
 
-      <div class="reasons-grid stagger-children">
+      <BentoGrid>
-        <div class="reason-card">
+        <BentoTile span={4} surface="yellow" eyebrow="ข้อ 01" title="ธุรกิจที่พร้อมจริง ๆ">
-          <div class="reason-num">1</div>
+          <p>เราคุยกับเจ้าของธุรกิจก่อน ถ้าเป้าหมายยังไม่ชัด เราจะแนะนำให้รอก่อน ดีกว่าเสียเงินแล้วไม่ได้ผล</p>
-          <h3 class="reason-title">ธุรกิจที่พร้อมจริง ๆ</h3>
+        </BentoTile>
-          <p class="reason-desc">เราคุยกับเจ้าของธุรกิจก่อน ถ้าเป้าหมายยังไม่ชัด เราจะแนะนำให้รอก่อน ดีกว่าเสียเงินแล้วไม่ได้ผล</p>
+
-        </div>
+        <BentoTile span={4} surface="purple-soft" eyebrow="ข้อ 02" title="งบประมาณที่สมเหตุสมผล">
-        <div class="reason-card">
+          <p>เราไม่ได้ถูกที่สุด แต่ก็ไม่ได้แพงที่สุด ถ้าใครบอก "งบ 5,000 ทำเว็บได้ไหม" — เราแนะนำให้ไปฟรีแลนซ์ก่อน</p>
-          <div class="reason-num">2</div>
+        </BentoTile>
-          <h3 class="reason-title">งบประมาณที่สมเหตุสมผล</h3>
+
-          <p class="reason-desc">เราไม่ได้ถูกที่สุด แต่ก็ไม่ได้แพงที่สุด ถ้าใครบอก "งบ 5,000 ทำเว็บได้ไหม" — เราแนะนำให้ไปฟรีแลนซ์ก่อน</p>
+        <BentoTile span={4} surface="mint" eyebrow="ข้อ 03" title="ลูกค้าที่ฟัง">
-        </div>
+          <p>เราทำงานกับลูกค้าที่พร้อมฟังคำแนะนำ ไม่ใช่ลูกค้าที่บอก "ทำตามนี้เป๊ะ ๆ" แล้วผิดคาดทุกที</p>
-        <div class="reason-card">
+        </BentoTile>
-          <div class="reason-num">3</div>
+      </BentoGrid>
-          <h3 class="reason-title">ลูกค้าที่ฟัง</h3>
-          <p class="reason-desc">เราทำงานกับลูกค้าที่พร้อมฟังคำแนะนำ ไม่ใช่ลูกค้าที่บอก "ทำตามนี้เป๊ะ ๆ" แล้วผิดคาดทุกที</p>
-        </div>
-      </div>
     </div>
   </section>
 
@@ -128,8 +129,8 @@ const industryFilters = [
       btn.classList.add('active');
       const filter = btn.getAttribute('data-filter');
       cards.forEach(card => {
-        const industry = card.querySelector('.portfolio-industry')?.textContent || '';
+        const categories = (card.getAttribute('data-category') || '').toLowerCase().split(/[,\s]+/).filter(Boolean);
-        if (filter === 'all' || industry.includes(filter)) {
+        if (filter === 'all' || categories.includes(filter)) {
           (card as HTMLElement).style.display = '';
         } else {
           (card as HTMLElement).style.display = 'none';
@@ -137,9 +138,27 @@ const industryFilters = [
       });
     });
   });
+
+  // Parallax orbs
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
 </script>
 
 <style>
+  .section-bento {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* Filter bar (unchanged) */
   .filter-section {
     background: var(--color-bg-alt);
     padding: 20px 0;
@@ -182,10 +201,7 @@ const industryFilters = [
   }
   .filter-icon { color: currentColor; }
 
-  .portfolio-section { background: var(--color-white); }
+  /* Portfolio grid (unchanged — uses PortfolioCard component) */
-  .section-soft { background: var(--color-bg-alt); }
-  .section-yellow { background: var(--color-primary); }
-
   .portfolio-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -193,65 +209,10 @@ const industryFilters = [
   }
 
   .section-header { text-align: center; margin-bottom: 48px; }
-  .section-badge {
+  .section-soft { background: var(--color-bg-alt); }
-    display: inline-block;
+  .section-yellow { background: var(--color-primary); }
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 8px 20px;
-    border-radius: var(--radius-full);
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    margin-bottom: 16px;
-  }
-  .section-title {
-    font-family: var(--font-display);
-    font-size: clamp(28px, 4vw, 40px);
-    font-weight: 900;
-    line-height: 1.2;
-    color: var(--color-black);
-  }
-  .section-title .highlight { color: var(--color-primary-dark); }
-
-  .reasons-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-  }
-  .reason-card {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-  }
-  .reason-num {
-    display: inline-block;
-    width: 40px;
-    height: 40px;
-    background: var(--color-primary);
-    color: var(--color-black);
-    border-radius: 50%;
-    text-align: center;
-    line-height: 40px;
-    font-family: var(--font-display);
-    font-size: 18px;
-    font-weight: 900;
-    margin-bottom: 16px;
-  }
-  .reason-title {
-    font-family: var(--font-display);
-    font-size: 18px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 8px;
-  }
-  .reason-desc {
-    font-size: 15px;
-    color: var(--color-gray-600);
-    line-height: 1.6;
-  }
 
+  /* CTA */
   .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
   .cta-title {
     font-family: var(--font-display);
@@ -280,7 +241,6 @@ const industryFilters = [
 
   @media (max-width: 1024px) {
     .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
-    .reasons-grid { grid-template-columns: 1fr; }
   }
   @media (max-width: 640px) {
     .portfolio-grid { grid-template-columns: 1fr; }

src/pages/privacy.astro

@@ -3,6 +3,9 @@ import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
 ---
 
 <Base title="นโยบายความเป็นส่วนตัว | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
@@ -14,9 +17,13 @@ import PageHero from '../components/PageHero.astro';
     subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
   />
 
-  <section class="section legal-section">
+  <section class="section section-bento legal-section">
-    <div class="container">
+    <DecoOrb color="purple" size="450px" speed={0.3} position={{ top: '-100px', left: '-150px' }} opacity={0.2} blur="80px" />
-      <div class="legal-content">
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-150px', right: '-100px' }} opacity={0.4} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
+      <BentoGrid>
+        <BentoTile span={8} surface="white" eyebrow="กฎหมาย" title="นโยบายความเป็นส่วนตัว">
+          <div class="legal-body">
             <p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>
 
             <div class="legal-block">
@@ -50,6 +57,23 @@ import PageHero from '../components/PageHero.astro';
               <p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
             </div>
           </div>
+        </BentoTile>
+
+        <BentoTile span={4} surface="purple-soft" eyebrow="ข้อมูลเอกสาร" title="สรุปฉบับย่อ">
+          <div class="aside-body">
+            <p><strong>ชื่อเอกสาร:</strong> นโยบายความเป็นส่วนตัว</p>
+            <p><strong>มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
+            <p><strong>จัดการโดย:</strong> MoreminiMore Co.,Ltd.</p>
+            <p style="margin-top: 20px;"><strong>หัวข้อทั้งหมด 4 ข้อ:</strong></p>
+            <ol class="toc-list">
+              <li>ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</li>
+              <li>วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</li>
+              <li>การคุ้มครองข้อมูล</li>
+              <li>สิทธิของท่าน</li>
+            </ol>
+          </div>
+        </BentoTile>
+      </BentoGrid>
     </div>
   </section>
 
@@ -58,28 +82,36 @@ import PageHero from '../components/PageHero.astro';
 
 <style>
   .legal-section { background: var(--color-white); }
-  .legal-content { max-width: 800px; margin: 0 auto; }
+  .section-bento { position: relative; overflow: hidden; }
+
+  /* Body typography inside the prose tile */
+  .legal-body { font-size: 16px; line-height: 1.8; color: var(--color-gray-700); }
   .legal-intro {
-    font-size: 18px;
+    font-size: 17px;
     color: var(--color-gray-700);
-    margin-bottom: 48px;
+    margin-bottom: 36px;
     line-height: 1.7;
+    padding-bottom: 28px;
+    border-bottom: 1px solid var(--color-gray-200);
   }
-  .legal-block { margin-bottom: 48px; }
+  .legal-block { margin-bottom: 36px; }
+  .legal-block:last-child { margin-bottom: 0; }
   .legal-block h2 {
     font-family: var(--font-display);
-    font-size: 24px;
+    font-size: 22px;
     font-weight: 800;
-    margin-bottom: 20px;
+    margin-bottom: 14px;
     color: var(--color-black);
   }
   .legal-block p {
     font-size: 16px;
     color: var(--color-gray-700);
     line-height: 1.8;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
+  }
+  .legal-block ul {
+    margin: 12px 0 12px 24px;
   }
-  .legal-block ul { margin-left: 24px; margin-bottom: 16px; }
   .legal-block li {
     font-size: 16px;
     color: var(--color-gray-700);
@@ -87,4 +119,56 @@ import PageHero from '../components/PageHero.astro';
     margin-bottom: 8px;
   }
   .legal-block strong { color: var(--color-black); }
+
+  /* Aside (purple-soft tile) */
+  .aside-body {
+    font-size: 15px;
+    line-height: 1.7;
+    color: var(--color-black);
+  }
+  .aside-body p { margin-bottom: 10px; }
+  .aside-body strong { font-weight: 800; }
+  .toc-list {
+    list-style: none;
+    padding: 0;
+    margin: 12px 0 0;
+    counter-reset: toc;
+  }
+  .toc-list li {
+    counter-increment: toc;
+    padding: 10px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    font-weight: 600;
+    position: relative;
+    padding-left: 36px;
+  }
+  .toc-list li::before {
+    content: counter(toc, decimal-leading-zero);
+    position: absolute;
+    left: 0;
+    top: 10px;
+    font-family: var(--font-display);
+    font-weight: 900;
+    opacity: 0.6;
+  }
+  .toc-list li:last-child { border-bottom: none; }
+
+  @media (max-width: 640px) {
+    .legal-intro { font-size: 16px; }
+    .legal-block h2 { font-size: 20px; }
+  }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/services/[slug].astro

@@ -2,18 +2,11 @@
 import Base from '../../layouts/Base.astro';
 import Navigation from '../../components/Navigation.astro';
 import Footer from '../../components/Footer.astro';
-import PageHero from '../../components/PageHero.astro';
+import BentoGrid from '../../components/BentoGrid.astro';
-import Icon from '../../components/Icon.astro';
+import BentoTile from '../../components/BentoTile.astro';
+import DecoOrb from '../../components/DecoOrb.astro';
 import { getCollection, render } from 'astro:content';
 
-const { slug } = Astro.params;
-const services = await getCollection('services');
-const service = services.find(s => s.id === slug);
-
-if (!service) {
-  return Astro.redirect('/404');
-}
-
 export async function getStaticPaths() {
   const services = await getCollection('services');
   return services.map(service => ({
@@ -22,15 +15,17 @@ export async function getStaticPaths() {
   }));
 }
 
+const { service } = Astro.props;
 const { Content } = await render(service);
 
+const slug = service.id;
 const isWebDev = slug === 'webdev';
 const isMarketing = slug === 'marketing';
 const isAutomation = slug === 'automation';
 const isTechConsult = slug === 'ai-consult';
 
-// Service-specific data
+// Service-specific data — keyed by slug, with safe fallback to webdev.
-const serviceData = {
+const serviceData: Record<string, any> = {
   'webdev': {
     badge: 'บริการรับทำเว็บไซต์สำหรับ SME ไทย',
     title: 'สร้างเว็บไซต์',
@@ -150,26 +145,24 @@ const serviceData = {
 };
 
 const data = serviceData[slug] || serviceData['webdev'];
+const featureList = data.features || data.services || [];
 ---
 
 <Base title={`${service.data.title} | MoreminiMore`}>
   <Navigation />
 
-  <!-- HERO (light theme, was dark) -->
+  <!-- HERO -->
-  <section class="service-hero">
+  <section class="service-hero section-bento">
-    <div class="hero-bg">
+    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.3} blur="80px" />
-      <div class="bg-dots"></div>
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
-      <div class="bg-glow"></div>
+    <div class="container" style="position: relative; z-index: 1;">
-    </div>
-
-    <div class="container">
       <div class="hero-grid">
         <div class="hero-content">
           <span class="hero-badge">{data.badge}</span>
-          <h1 class="hero-title kinetic-title">
+          <h1 class="hero-title">
-            <span class="word-wrapper"><span class="word" style="--delay: 0.1s">{data.title}</span></span>
+            <span class="hero-line">{data.title}</span>
-            <span class="word-wrapper"><span class="word" style="--delay: 0.2s">{data.titleAccent}</span></span>
+            <span class="hero-line hero-accent">{data.titleAccent}</span>
-            {data.titleAccent2 && <span class="word-wrapper"><span class="word" style="--delay: 0.3s">{data.titleAccent2}</span></span>}
+            {data.titleAccent2 && <span class="hero-line">{data.titleAccent2}</span>}
           </h1>
           <p class="hero-desc">{data.desc}</p>
 
@@ -181,7 +174,7 @@ const data = serviceData[slug] || serviceData['webdev'];
               โทรหาเรา
             </a>
             <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark">
-              <svg viewBox="0 0 24 24" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-9.491.371-.661.56-1.388.56-2.159"/></svg>
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-9.491.371-.661.56-1.388.56-2.159"/></svg>
               ทัก LINE
             </a>
           </div>
@@ -196,29 +189,33 @@ const data = serviceData[slug] || serviceData['webdev'];
           </div>
         </div>
 
+        <!-- Side card — first 4 features as a single tile -->
         <div class="hero-visual">
-          <div class="features-card">
+          <BentoGrid>
-            <div class="card-header">
+            <BentoTile span={12} surface="yellow" eyebrow="บริการหลัก" title={`${featureList.length} ความสามารถหลัก`}>
-              <span class="card-title">บริการหลัก</span>
+              <ul class="hero-feature-list">
-            </div>
+                {featureList.slice(0, 4).map((f) => (
-            {(data.features || data.services || []).slice(0, 4).map((f) => (
+                  <li class="hero-feature-item">
-              <div class="feature-item">
+                    <div class="hero-feature-index">{String(featureList.indexOf(f) + 1).padStart(2, '0')}</div>
-                <div class="feature-icon"><Icon name={f.icon as any} /></div>
+                    <div class="hero-feature-content">
-                <div class="feature-content">
+                      <span class="hero-feature-title">{f.title}</span>
-                  <span class="feature-title">{f.title}</span>
+                      <span class="hero-feature-desc">{f.desc || f.items?.[0]}</span>
-                  <span class="feature-desc">{f.desc || f.items?.[0]}</span>
-                </div>
                     </div>
+                  </li>
                 ))}
-          </div>
+              </ul>
+            </BentoTile>
+          </BentoGrid>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- FEATURES -->
+  <!-- FEATURES (BENTO) -->
-  <section class="section features-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="80px" />
+    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">{isTechConsult ? 'บริการของเรา' : 'ความสามารถ'}</span>
         <h2 class="section-title">
@@ -226,180 +223,219 @@ const data = serviceData[slug] || serviceData['webdev'];
         </h2>
       </div>
 
-      <div class="features-grid stagger-children">
+      <BentoGrid>
-        {(data.features || data.services || []).map((f) => (
+        {featureList.map((f: any, i: number) => {
-          <div class="feature-card">
+          // Asymmetric span + surface rotation per the bento design system
-            <div class="feature-icon"><Icon name={f.icon as any} /></div>
+          const span = i % 3 === 0 ? 8 : 4;
-            <h3 class="feature-title">{f.title}</h3>
+          const surfaces = ['yellow', 'purple-soft', 'mint', 'soft', 'teal', 'soft'] as const;
-            <p class="feature-desc">{f.desc || f.items?.join(' · ')}</p>
+          const surface = surfaces[i % surfaces.length];
-          </div>
+          return (
-        ))}
+            <BentoTile span={span} surface={surface} eyebrow={`0${i + 1}`} title={f.title}>
-      </div>
+              <p>{f.desc || f.items?.join(' · ')}</p>
+            </BentoTile>
+          );
+        })}
+      </BentoGrid>
     </div>
   </section>
 
-  <!-- TARGET AUDIENCE -->
+  <!-- TARGET AUDIENCE (BENTO) -->
   {data.targets && (
-    <section class="section section-soft target-section">
+    <section class="section section-soft section-bento">
-      <div class="container">
+      <DecoOrb color="teal" size="400px" speed={0.3} position={{ top: '-100px', right: '-100px' }} opacity={0.2} blur="80px" />
+      <DecoOrb color="soft" size="300px" speed={0.4} position={{ bottom: '-100px', left: '-50px' }} opacity={0.35} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
         <div class="section-header reveal">
           <span class="section-badge">เหมาะกับใคร?</span>
           <h2 class="section-title">ธุรกิจ<span class="highlight">ทุกประเภท</span></h2>
         </div>
 
-        <div class="target-grid stagger-children">
+        <BentoGrid>
-          {data.targets.map((t) => (
+          {data.targets.map((t: any, i: number) => {
-            <div class="target-card">
+            // First target takes 12 to lead, then 6+6 for remaining pair
-              <div class="target-icon"><Icon name={t.icon as any} /></div>
+            const span = i === 0 ? 12 : 6;
-              <h3 class="target-title">{t.title}</h3>
+            const surfaces = ['yellow', 'soft', 'purple-soft'] as const;
-              <p class="target-desc">{t.desc}</p>
+            const surface = surfaces[i % surfaces.length];
-            </div>
+            return (
-          ))}
+              <BentoTile span={span} surface={surface} eyebrow={`0${i + 1}`} title={t.title}>
-        </div>
+                <p>{t.desc}</p>
+              </BentoTile>
+            );
+          })}
+        </BentoGrid>
       </div>
     </section>
   )}
 
-  <!-- INCLUDED -->
+  <!-- INCLUDED + TECH OPTIONS (BENTO) -->
+  {(data.included || data.techOptions) && (
+    <section class="section section-bento">
+      <DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
+      <DecoOrb color="soft" size="300px" speed={0.4} position={{ bottom: '-100px', right: '10%' }} opacity={0.35} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
         {data.included && (
-    <section class="section included-section">
+          <>
-      <div class="container">
             <div class="section-header reveal">
               <span class="section-badge">สิ่งที่ได้รับ</span>
-          <h2 class="section-title">
+              <h2 class="section-title">ทุกเว็บไซต์มาพร้อม<span class="highlight">ให้ครบ</span></h2>
-            ทุกเว็บไซต์มาพร้อม<span class="highlight">ให้ครบ</span>
-          </h2>
-        </div>
-
-        <div class="included-grid stagger-children">
-          {data.included.map((item) => (
-            <div class="included-item">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-              </svg>
-              <span>{item}</span>
             </div>
+            <BentoGrid>
+              {data.included.map((item: string, i: number) => (
+                <BentoTile span={4} surface="white" eyebrow="✓" title={item}>
+                  <p class="tile-meta">รวมอยู่ในแพ็คเกจ — ไม่มีค่าใช้จ่ายเพิ่ม</p>
+                </BentoTile>
               ))}
-        </div>
+              <BentoTile span={12} surface="yellow" eyebrow="ราคารวม" title="เว็บไซต์ + Server 1 ปี + Domain .com">
-
+                <p>เริ่มต้น <strong>฿15,500*</strong></p>
-        <div class="pricing-highlight">
+                <p class="tile-meta-dark">*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์</p>
-          <p><strong>รวม:</strong> เว็บไซต์ + Server 1 ปี + Domain .com = เริ่มต้น ฿15,500*</p>
+              </BentoTile>
-          <span class="pricing-note">*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์</span>
+            </BentoGrid>
-        </div>
+          </>
-      </div>
-    </section>
         )}
 
         {data.techOptions && (
-    <section class="section section-soft tech-section">
+          <>
-      <div class="container">
+            <div class="section-header reveal" style="margin-top: 64px;">
-        <div class="section-header reveal">
               <span class="section-badge">เลือกระบบ</span>
-          <h2 class="section-title">
+              <h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
-            เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span>
-          </h2>
-        </div>
-
-        <div class="tech-grid stagger-children">
-          {data.techOptions.map((t) => (
-            <div class="tech-card">
-              <div class="tech-badge">{t.badge}</div>
-              <h3 class="tech-name">{t.name}</h3>
-              <p class="tech-desc">{t.desc}</p>
-              <span class="tech-duration">{t.duration}</span>
             </div>
+            <BentoGrid>
+              {data.techOptions.map((t: any, i: number) => (
+                <BentoTile span={6} surface={i === 0 ? 'yellow' : 'soft'} eyebrow={t.badge} title={t.name}>
+                  <p>{t.desc}</p>
+                  <p class="tile-meta-strong">{t.duration}</p>
+                </BentoTile>
               ))}
-        </div>
+            </BentoGrid>
+          </>
+        )}
       </div>
     </section>
   )}
 
+  <!-- PRICING (BENTO) -->
   {data.pricing && (
-    <section class="section pricing-section">
+    <section class="section section-soft section-bento">
-      <div class="container">
+      <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
+      <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
         <div class="section-header reveal">
           <span class="section-badge">ราคา</span>
           <h2 class="section-title">ราคาค่า<span class="highlight">บริการ</span></h2>
           <p class="section-desc">ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น</p>
         </div>
 
-        <div class="pricing-list stagger-children">
+        <BentoGrid>
-          {data.pricing.map((p) => (
+          {data.pricing.map((p: any, i: number) => {
-            <div class="pricing-item">
+            const surfaces = ['white', 'soft', 'yellow', 'mint', 'purple-soft'] as const;
-              <span class="pricing-label">{p.label}</span>
+            const surface = surfaces[i % surfaces.length];
-              <span class="pricing-value">{p.price}</span>
+            return (
-            </div>
+              <BentoTile span={4} surface={surface} eyebrow={p.label} title={p.price}>
-          ))}
+              </BentoTile>
-        </div>
+            );
+          })}
+        </BentoGrid>
       </div>
     </section>
   )}
 
+  <!-- AI FEATURES (BENTO) -->
   {data.aiFeatures && (
-    <section class="section section-soft ai-section">
+    <section class="section section-bento">
-      <div class="container">
+      <DecoOrb color="purple" size="500px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="100px" />
+      <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '10%', right: '-50px' }} opacity={0.25} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
         <div class="section-header reveal">
           <span class="section-badge">AI Analytics</span>
-          <h2 class="section-title">
+          <h2 class="section-title">AI วิเคราะห์<span class="highlight">ทุกความเคลื่อนไหว</span></h2>
-            AI วิเคราะห์<span class="highlight">ทุกความเคลื่อนไหว</span>
-          </h2>
         </div>
 
-        <div class="ai-grid stagger-children">
+        <BentoGrid>
-          {data.aiFeatures.map((f) => (
+          {data.aiFeatures.map((f: string, i: number) => {
-            <div class="ai-item">
+            // Asymmetric: first item 12, then 6+6 paired
-              <svg viewBox="0 0 20 20" fill="currentColor">
+            const span = i === 0 ? 12 : 6;
-                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+            const surfaces = ['yellow', 'soft', 'mint', 'purple-soft'] as const;
-              </svg>
+            const surface = surfaces[i % surfaces.length];
-              <span>{f}</span>
+            return (
-            </div>
+              <BentoTile span={span} surface={surface} eyebrow={`✓ 0${i + 1}`} title={f}>
-          ))}
+              </BentoTile>
-        </div>
+            );
+          })}
+        </BentoGrid>
       </div>
     </section>
   )}
 
+  <!-- WHY US (BENTO) -->
   {data.whyUs && (
-    <section class="section why-section">
+    <section class="section section-bento">
-      <div class="container">
+      <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
+      <DecoOrb color="teal" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-50px' }} opacity={0.2} blur="80px" />
+      <div class="container" style="position: relative; z-index: 1;">
         <div class="section-header reveal">
           <span class="section-badge">ทำไมต้องเลือกเรา?</span>
           <h2 class="section-title">ความเชี่ยวชาญ<span class="highlight">ที่คุณไว้วางใจได้</span></h2>
         </div>
 
-        <div class="why-grid stagger-children">
+        <BentoGrid>
-          {data.whyUs.map((w) => (
+          {data.whyUs.map((w: any, i: number) => {
-            <div class="why-card">
+            const surfaces = ['yellow', 'soft', 'purple-soft'] as const;
-              <h3 class="why-title">{w.title}</h3>
+            const surface = surfaces[i % surfaces.length];
-              <p class="why-desc">{w.desc}</p>
+            return (
-            </div>
+              <BentoTile span={4} surface={surface} eyebrow={`0${i + 1}`} title={w.title}>
-          ))}
+                <p>{w.desc}</p>
-        </div>
+              </BentoTile>
+            );
+          })}
+        </BentoGrid>
       </div>
     </section>
   )}
 
-  <!-- FAQ -->
+  <!-- DYNAMIC CONTENT FROM MDX (full-width bento tile) -->
-  <section class="section section-soft faq-section">
+  <section class="section section-soft section-bento">
-    <div class="container">
+    <DecoOrb color="soft" size="500px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.4} blur="80px" />
+    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-50px', right: '-50px' }} opacity={0.2} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
+      <BentoGrid>
+        <BentoTile span={12} surface="white" eyebrow="รายละเอียดเพิ่มเติม" title="เนื้อหาจากเอกสารบริการ">
+          <div class="mdx-content">
+            <Content />
+          </div>
+        </BentoTile>
+      </BentoGrid>
+    </div>
+  </section>
+
+  <!-- FAQ (BENTO) -->
+  <section class="section section-bento">
+    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
+    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-50px', right: '-50px' }} opacity={0.25} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">FAQ</span>
         <h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
       </div>
 
-      <div class="faq-list">
+      <BentoGrid>
-        {data.faqs.map((faq) => (
+        {data.faqs.map((faq: any, i: number) => {
-          <details class="faq-item">
+          // Hero: first question 12-span, then alternating 8+4 for visual tension
-            <summary class="faq-question">
+          let span: 12 | 8 | 4 = 6;
-              {faq.q}
+          if (i === 0) span = 12;
-              <span class="faq-toggle">+</span>
+          else if (i % 3 === 1) span = 8;
-            </summary>
+          else if (i % 3 === 2) span = 4;
-            <div class="faq-answer">
+          else span = 6;
+          const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal', 'soft'] as const;
+          const surface = surfaces[i % surfaces.length];
+          return (
+            <BentoTile span={span} surface={surface} eyebrow={`Q${i + 1}`} title={faq.q}>
+              <div class="faq-answer-inline">
                 <p>{faq.a}</p>
               </div>
-          </details>
+            </BentoTile>
-        ))}
+          );
-      </div>
+        })}
+      </BentoGrid>
     </div>
   </section>
 
@@ -411,7 +447,9 @@ const data = serviceData[slug] || serviceData['webdev'];
         <p class="cta-desc">ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้าง{data.title}ที่ตอบโจทย์ธุรกิจ</p>
         <div class="cta-actions">
           <a href="tel:0809955945" class="btn btn-dark btn-lg">
-            <Icon name="phone" size={18} class="btn-icon" />
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+              <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
+            </svg>
             080-995-5945
           </a>
           <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">สอบถามราคา</a>
@@ -424,29 +462,26 @@ const data = serviceData[slug] || serviceData['webdev'];
 </Base>
 
 <style>
+  /* Section wrappers */
+  .section-bento {
+    position: relative;
+    overflow: hidden;
+  }
+  .section-soft { background: var(--color-bg-alt); }
+  .section-yellow { background: var(--color-primary); }
+
+  /* HERO */
   .service-hero {
     background: var(--color-white);
     padding: 140px 0 80px;
     position: relative;
     overflow: hidden;
   }
-  .hero-bg { position: absolute; inset: 0; overflow: hidden; }
-  .bg-dots {
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.15) 1px, transparent 0);
-    background-size: 40px 40px;
-  }
-  .bg-glow {
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(ellipse at 50% 0%, rgba(254, 212, 0, 0.15) 0%, transparent 60%);
-  }
   .hero-grid {
     position: relative;
     z-index: 1;
     display: grid;
-    grid-template-columns: 1.3fr 0.7fr;
+    grid-template-columns: 1.3fr 1fr;
     gap: 60px;
     align-items: center;
   }
@@ -466,12 +501,12 @@ const data = serviceData[slug] || serviceData['webdev'];
     font-family: var(--font-display);
     font-size: clamp(36px, 5vw, 56px);
     font-weight: 900;
-    line-height: 1.3;  /* Thai-safe */
+    line-height: 1.3;
     color: var(--color-black);
     margin-bottom: 20px;
   }
-  .hero-title.kinetic-title .word-wrapper { display: block; }
+  .hero-line { display: block; }
-  .hero-title.kinetic-title .word-wrapper:nth-child(2) .word { color: var(--color-primary-dark); }
+  .hero-accent { color: var(--color-primary-dark); }
   .hero-desc {
     font-size: 18px;
     color: var(--color-gray-700);
@@ -494,28 +529,42 @@ const data = serviceData[slug] || serviceData['webdev'];
   }
   .trust-item { font-weight: 600; }
 
-  .hero-visual { display: flex; }
+  /* Hero feature list (inside yellow tile) — uses numeral index, no icons */
-  .features-card {
+  .hero-feature-list {
-    background: var(--color-white);
+    list-style: none;
-    border: 1px solid var(--color-gray-200);
+    padding: 0;
-    border-radius: var(--radius-xl);
+    margin: 0;
-    padding: 32px;
+    display: flex;
-    width: 100%;
+    flex-direction: column;
-    box-shadow: var(--shadow-md);
+    gap: 12px;
   }
-  .card-header { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-gray-200); }
+  .hero-feature-item {
-  .card-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-gray-500); }
+    display: flex;
-  .feature-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
+    gap: 12px;
-  .feature-item + .feature-item { border-top: 1px solid var(--color-gray-100); }
+    align-items: flex-start;
-  .feature-icon { flex-shrink: 0; }
+    padding: 12px 0;
-  .feature-content { display: flex; flex-direction: column; }
+  }
-  .feature-title { font-size: 15px; font-weight: 700; color: var(--color-black); }
+  .hero-feature-item + .hero-feature-item { border-top: 1px solid rgba(0, 0, 0, 0.1); }
-  .feature-desc { font-size: 13px; color: var(--color-gray-600); }
+  .hero-feature-index {
-
+    flex-shrink: 0;
-  /* Generic section styles */
+    width: 36px;
-  .section-soft { background: var(--color-bg-alt); }
+    height: 36px;
-  .section-yellow { background: var(--color-primary); }
+    border: 2px solid var(--color-black);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-display);
+    font-size: 14px;
+    font-weight: 900;
+    color: var(--color-black);
+    letter-spacing: -0.5px;
+  }
+  .hero-feature-content { display: flex; flex-direction: column; }
+  .hero-feature-title { font-size: 15px; font-weight: 700; color: var(--color-black); }
+  .hero-feature-desc { font-size: 13px; color: rgba(0, 0, 0, 0.7); }
 
+  /* Section header */
   .section-header { text-align: center; margin-bottom: 48px; }
   .section-badge {
     display: inline-block;
@@ -539,193 +588,68 @@ const data = serviceData[slug] || serviceData['webdev'];
   .section-title .highlight { color: var(--color-primary-dark); }
   .section-desc { font-size: 16px; color: var(--color-gray-600); margin-top: 8px; }
 
-  .features-grid {
+  /* Inline meta paragraphs inside tiles */
-    display: grid;
+  .tile-meta {
-    grid-template-columns: repeat(3, 1fr);
+    font-size: 14px;
-    gap: 24px;
+    color: var(--color-gray-600);
   }
-  .feature-card {
+  .tile-meta-strong {
-    background: var(--color-white);
+    margin-top: 12px;
-    border: 1px solid var(--color-gray-200);
+    font-size: 15px;
-    border-radius: var(--radius-xl);
-    padding: 32px;
-    transition: all 0.3s ease;
-  }
-  .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
-  .features-grid > .feature-card .feature-icon { width: 64px; height: 64px; }
-  .feature-card .feature-title { font-size: 18px; font-weight: 800; color: var(--color-black); margin-bottom: 8px; font-family: var(--font-display); }
-  .feature-card .feature-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
-
-  .target-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-  }
-  .target-card {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-  }
-  .target-icon { margin-bottom: 12px; }
-  .target-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--color-black); margin-bottom: 8px; }
-  .target-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
-
-  .included-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-    max-width: 700px;
-    margin: 0 auto 32px;
-  }
-  .included-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px;
-    background: var(--color-bg-alt);
-    border-radius: var(--radius-md);
-  }
-  .included-item svg { width: 20px; height: 20px; color: var(--color-primary-dark); flex-shrink: 0; }
-  .included-item span { font-size: 15px; font-weight: 500; color: var(--color-black); }
-  .pricing-highlight {
-    text-align: center;
-    padding: 24px;
-    background: var(--color-primary);
-    border-radius: var(--radius-md);
-    color: var(--color-black);
-  }
-  .pricing-highlight p { font-size: 16px; margin-bottom: 4px; }
-  .pricing-note { font-size: 13px; }
-
-  .tech-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-  .tech-card {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-    text-align: center;
-  }
-  .tech-badge {
-    display: inline-block;
-    width: 56px;
-    height: 56px;
-    background: var(--color-primary);
-    color: var(--color-black);
-    border-radius: 50%;
-    line-height: 56px;
-    font-family: var(--font-display);
-    font-size: 20px;
-    font-weight: 900;
-    margin-bottom: 16px;
-  }
-  .tech-name { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--color-black); margin-bottom: 8px; }
-  .tech-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; margin-bottom: 12px; }
-  .tech-duration { display: inline-block; padding: 4px 12px; background: var(--color-bg-soft); color: var(--color-gray-700); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; }
-
-  .pricing-list {
-    max-width: 700px;
-    margin: 0 auto;
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    overflow: hidden;
-  }
-  .pricing-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 28px;
-    border-top: 1px solid var(--color-gray-200);
-  }
-  .pricing-item:first-child { border-top: none; }
-  .pricing-label { font-size: 15px; color: var(--color-gray-700); }
-  .pricing-value { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--color-primary-dark); }
-
-  .ai-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-    max-width: 700px;
-    margin: 0 auto;
-  }
-  .ai-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px;
-    background: var(--color-white);
-    border-radius: var(--radius-md);
-  }
-  .ai-item svg { width: 20px; height: 20px; color: var(--color-primary-dark); flex-shrink: 0; }
-  .ai-item span { font-size: 15px; color: var(--color-black); }
-
-  .why-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-  }
-  .why-card {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-  }
-  .why-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--color-black); margin-bottom: 12px; }
-  .why-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
-
-  .faq-list { max-width: 800px; margin: 0 auto; }
-  .faq-item {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-md);
-    margin-bottom: 12px;
-    overflow: hidden;
-  }
-  .faq-item[open] { border-color: var(--color-primary); }
-  .faq-question {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 24px;
-    cursor: pointer;
-    list-style: none;
-    font-family: var(--font-display);
-    font-size: 16px;
     font-weight: 700;
-    color: var(--color-black);
   }
-  .faq-question::-webkit-details-marker { display: none; }
+  .tile-meta-dark {
-  .faq-toggle { color: var(--color-primary); font-size: 24px; line-height: 1; }
+    font-size: 14px;
-  .faq-item[open] .faq-toggle { transform: rotate(45deg); }
+    opacity: 0.7;
-  .faq-answer { padding: 0 24px 24px; }
+  }
-  .faq-answer p { font-size: 15px; line-height: 1.8; color: var(--color-gray-700); }
+
+  /* Inline FAQ (single answer per tile) */
+  .faq-answer-inline p {
+    font-size: 15px;
+    line-height: 1.7;
+    color: var(--color-gray-700);
+  }
+  .surface-yellow .faq-answer-inline p { color: rgba(0, 0, 0, 0.85); }
+  .surface-purple .faq-answer-inline p,
+  .surface-teal .faq-answer-inline p,
+  .surface-coral .faq-answer-inline p,
+  .surface-dark .faq-answer-inline p { color: rgba(255, 255, 255, 0.95); }
+
+  /* MDX content wrapper */
+  .mdx-content { font-size: 16px; line-height: 1.7; color: var(--color-gray-700); }
+  .mdx-content :global(h2) { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
+  .mdx-content :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
+  .mdx-content :global(p) { margin-bottom: 12px; }
+  .mdx-content :global(ul) { padding-left: 20px; margin-bottom: 12px; }
+  .mdx-content :global(li) { margin-bottom: 4px; }
+  .mdx-content :global(strong) { color: var(--color-black); }
 
   /* CTA */
   .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
   .cta-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: var(--color-black); margin-bottom: 16px; }
   .cta-desc { font-size: 18px; color: rgba(0, 0, 0, 0.7); margin-bottom: 32px; }
   .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+  .cta-actions .btn svg { display: inline-block; vertical-align: middle; margin-right: 6px; }
 
   @media (max-width: 1024px) {
     .hero-grid { grid-template-columns: 1fr; gap: 40px; }
-    .features-grid { grid-template-columns: 1fr; }
-    .target-grid { grid-template-columns: 1fr; }
-    .why-grid { grid-template-columns: 1fr; }
-    .included-grid { grid-template-columns: 1fr; }
-    .tech-grid { grid-template-columns: 1fr; }
-    .ai-grid { grid-template-columns: 1fr; }
   }
   @media (max-width: 640px) {
-    .hero-actions { flex-direction: column; }
+    .hero-actions, .cta-actions { flex-direction: column; }
-    .hero-actions .btn { width: 100%; justify-content: center; }
+    .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
-    .cta-actions { flex-direction: column; }
-    .cta-actions .btn { width: 100%; justify-content: center; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/services/index.astro

@@ -3,28 +3,15 @@ import Base from '../../layouts/Base.astro';
 import Navigation from '../../components/Navigation.astro';
 import Footer from '../../components/Footer.astro';
 import PageHero from '../../components/PageHero.astro';
-import Icon from '../../components/Icon.astro';
+import BentoGrid from '../../components/BentoGrid.astro';
+import BentoTile from '../../components/BentoTile.astro';
+import DecoOrb from '../../components/DecoOrb.astro';
 import { getCollection } from 'astro:content';
 
 const services = await getCollection('services');
 
-// Decision-table icon lookup
+// Surface rotation for services Bento — keep variety
-const serviceIcons: Record<string, string> = {
+const serviceSurfaces = ['yellow', 'purple-soft', 'mint', 'soft', 'teal', 'coral'] as const;
-  'webdev': 'globe',
-  'automation': 'cog',
-  'marketing': 'megaphone',
-  'seo': 'search',
-  'consult': 'server',
-  'audit': 'refresh',
-};
-
-// Map service slugs to images
-const serviceImages: Record<string, string> = {
-  'automation': '/images/services/automation.jpg',
-  'ai-consult': '/images/services/ai-consult.jpg',
-  'marketing': '/images/services/marketing.jpg',
-  'webdev': '/images/services/webdev.jpg',
-};
 ---
 
 <Base title="บริการ | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
@@ -36,51 +23,49 @@ const serviceImages: Record<string, string> = {
     subtitle="เลือกเฉพาะที่คุณต้องการ หรือให้เราวางแผนให้ทั้งระบบ"
   />
 
-  <!-- Decision Table -->
+  <!-- Decision Table — Bento style (one large tile + 6 small tiles in a grid) -->
-  <section class="section decision-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', left: '-100px' }} opacity={0.25} blur="80px" />
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', right: '-100px' }} opacity={0.35} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header">
         <span class="section-badge">ไม่แน่ใจว่าจะเริ่มจากตรงไหน?</span>
         <h2 class="section-title">เลือกบริการที่ใช่ <span class="highlight">ใน 30 วินาที</span></h2>
       </div>
 
-      <div class="decision-table">
+      <BentoGrid>
-        <div class="decision-row decision-header">
+        <BentoTile span={12} surface="soft" eyebrow="Decision Helper" title="คุณกำลังเจออะไร — เริ่มที่ไหน — เห็นผลเมื่อไหร่">
-          <div>คุณกำลังเจอ</div>
+          <div class="decision-grid">
-          <div>เริ่มที่</div>
+            <div class="decision-col-head">คุณกำลังเจอ</div>
-          <div>คาดเห็นผลใน</div>
+            <div class="decision-col-head">เริ่มที่</div>
-        </div>
+            <div class="decision-col-head">คาดเห็นผลใน</div>
-        <div class="decision-row">
+
-          <div>ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า</div>
+            <div class="decision-cell">ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า</div>
-          <div><span class="dec-tag"><Icon name="globe" size={14} class="dec-icon" />AI-Enhanced Website</span></div>
+            <div class="decision-cell"><span class="dec-tag">AI-Enhanced Website</span></div>
-          <div>2–4 สัปดาห์</div>
+            <div class="decision-cell">2–4 สัปดาห์</div>
-        </div>
+
-        <div class="decision-row">
+            <div class="decision-cell">ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน</div>
-          <div>ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน</div>
+            <div class="decision-cell"><span class="dec-tag">AI Automation</span></div>
-          <div><span class="dec-tag"><Icon name="cog" size={14} class="dec-icon" />AI Automation</span></div>
+            <div class="decision-cell">1–3 เดือน</div>
-          <div>1–3 เดือน</div>
+
-        </div>
+            <div class="decision-cell">ลงโฆษณาเยอะ แต่ยอดขายไม่โต</div>
-        <div class="decision-row">
+            <div class="decision-cell"><span class="dec-tag">Online Marketing Automation</span></div>
-          <div>ลงโฆษณาเยอะ แต่ยอดขายไม่โต</div>
+            <div class="decision-cell">1–3 เดือน</div>
-          <div><span class="dec-tag"><Icon name="megaphone" size={14} class="dec-icon" />Online Marketing Automation</span></div>
+
-          <div>1–3 เดือน</div>
+            <div class="decision-cell">อยากติดหน้าแรก Google แต่ไม่รู้จะเริ่มยังไง</div>
-        </div>
+            <div class="decision-cell"><span class="dec-tag">SEO + AI Content</span></div>
-        <div class="decision-row">
+            <div class="decision-cell">3–6 เดือน</div>
-          <div>อยากติดหน้าแรก Google แต่ไม่รู้จะเริ่มยังไง</div>
+
-          <div><span class="dec-tag"><Icon name="search" size={14} class="dec-icon" />SEO + AI Content</span></div>
+            <div class="decision-cell">ไม่อยากจ้างทีม IT ประจำ แต่อยากมี Server/ระบบหลังบ้าน</div>
-          <div>3–6 เดือน</div>
+            <div class="decision-cell"><span class="dec-tag">Tech Consult</span></div>
-        </div>
+            <div class="decision-cell">2–6 สัปดาห์</div>
-        <div class="decision-row">
+
-          <div>ไม่อยากจ้างทีม IT ประจำ แต่อยากมี Server/ระบบหลังบ้าน</div>
+            <div class="decision-cell">มีเว็บอยู่แล้ว แต่ขายไม่ได้</div>
-          <div><span class="dec-tag"><Icon name="server" size={14} class="dec-icon" />Tech Consult</span></div>
+            <div class="decision-cell"><span class="dec-tag">เริ่มจาก Audit ฟรี 30 นาที</span></div>
-          <div>2–6 สัปดาห์</div>
+            <div class="decision-cell">1 สัปดาห์</div>
-        </div>
-        <div class="decision-row">
-          <div>มีเว็บอยู่แล้ว แต่ขายไม่ได้</div>
-          <div><span class="dec-tag"><Icon name="refresh" size={14} class="dec-icon" />เริ่มจาก Audit ฟรี 30 นาที</span></div>
-          <div>1 สัปดาห์</div>
-        </div>
           </div>
+        </BentoTile>
+      </BentoGrid>
 
       <p class="decision-closing">
         ถ้ายังไม่แน่ใจ → กดปุ่ม "ปรึกษาฟรี" ด้านล่าง เราจะถาม 5 คำถามแล้วบอกคำตอบเอง
@@ -88,57 +73,70 @@ const serviceImages: Record<string, string> = {
     </div>
   </section>
 
-  <!-- Service Grid -->
+  <!-- Service Grid — Bento (asymmetric spans, varied surfaces) -->
-  <section class="section services-grid-section">
+  <section class="section section-bento">
-    <div class="container">
+    <DecoOrb color="purple" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.2} blur="100px" />
+    <DecoOrb color="yellow" size="350px" speed={0.3} position={{ bottom: '-100px', left: '10%' }} opacity={0.25} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">บริการทั้งหมด</span>
         <h2 class="section-title">เลือกตาม <span class="highlight">เป้าหมาย</span> ของคุณ</h2>
       </div>
 
-      <div class="services-cards stagger-children">
+      <BentoGrid>
-        {services.map(s => (
+        {services.map((s, i) => {
-          <a href={`/services/${s.id}`} class="service-block">
+          // Asymmetric: 6+6 for the first pair, then 4+4+4 for the rest
-            <span class="service-tag">{s.data.badge}</span>
+          let span: 3 | 4 | 6 | 8 | 12;
-            <h3 class="service-name">{s.data.title}</h3>
+          if (i === 0) span = 8;
+          else if (i === 1) span = 4;
+          else if (i === 2) span = 4;
+          else if (i === 3) span = 4;
+          else if (i === 4) span = 6;
+          else span = 6;
+          const surface = serviceSurfaces[i % serviceSurfaces.length];
+          return (
+            <a href={`/services/${s.id}`} style="display: block; text-decoration: none; color: inherit;">
+              <BentoTile span={span} surface={surface} eyebrow={s.data.badge} title={s.data.title}>
                 <p class="service-subtitle">{s.data.subtitle}</p>
-            <div class="service-objective">
+                <div class="mega-objective">
-              <span class="obj-label">เป้าหมาย</span>
+                  <span class="objective-label">เป้าหมาย</span>
-              <span class="obj-value">{s.data.objective}</span>
+                  <span class="objective-value">{s.data.objective}</span>
                 </div>
                 <span class="service-link">ดูรายละเอียด →</span>
+              </BentoTile>
             </a>
-        ))}
+          );
-      </div>
+        })}
+      </BentoGrid>
     </div>
   </section>
 
-  <!-- Pricing tiers -->
+  <!-- Pricing tiers — Bento tiles -->
-  <section class="section pricing-section">
+  <section class="section section-soft">
-    <div class="container">
+    <DecoOrb color="soft" size="500px" speed={0.4} position={{ top: '-150px', left: '20%' }} opacity={0.5} blur="80px" />
+    <DecoOrb color="yellow" size="350px" speed={0.3} position={{ bottom: '-100px', right: '10%' }} opacity={0.2} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
       <div class="section-header reveal">
         <span class="section-badge">งบประมาณ</span>
         <h2 class="section-title">ไม่ใช่ทุกงบที่จะ<span class="highlight">เหมือนกัน</span></h2>
       </div>
 
-      <div class="pricing-grid stagger-children">
+      <BentoGrid>
-        <div class="pricing-card">
+        <BentoTile span={4} surface="white" eyebrow="Tier 01" title="เริ่มต้น">
-          <h3 class="pricing-tier">เริ่มต้น</h3>
           <div class="pricing-range">15,000–35,000 บาท</div>
           <p class="pricing-desc">Landing Page + AI Chatbot</p>
-        </div>
+        </BentoTile>
-        <div class="pricing-card pricing-featured">
+
-          <div class="pricing-popular">แนะนำ</div>
+        <BentoTile span={4} surface="yellow" eyebrow="Tier 02 · แนะนำ" title="ธุรกิจ">
-          <h3 class="pricing-tier">ธุรกิจ</h3>
+          <div class="pricing-range pricing-range-dark">50,000–150,000 บาท</div>
-          <div class="pricing-range">50,000–150,000 บาท</div>
+          <p class="pricing-desc pricing-desc-dark">เว็บไซต์เต็มรูป + SEO 3 เดือน</p>
-          <p class="pricing-desc">เว็บไซต์เต็มรูป + SEO 3 เดือน</p>
+        </BentoTile>
-        </div>
+
-        <div class="pricing-card">
+        <BentoTile span={4} surface="dark" eyebrow="Tier 03" title="องค์กร">
-          <h3 class="pricing-tier">องค์กร</h3>
+          <div class="pricing-range pricing-range-light">200,000 บาทขึ้นไป</div>
-          <div class="pricing-range">200,000 บาทขึ้นไป</div>
+          <p class="pricing-desc pricing-desc-light">ระบบครบวงจร + Automation</p>
-          <p class="pricing-desc">ระบบครบวงจร + Automation</p>
+        </BentoTile>
-        </div>
+      </BentoGrid>
-      </div>
     </div>
   </section>
 
@@ -159,73 +157,48 @@ const serviceImages: Record<string, string> = {
 </Base>
 
 <style>
-  .decision-section { background: var(--color-bg-alt); }
+  .section-bento {
-  .services-grid-section { background: var(--color-white); }
+    position: relative;
-  .pricing-section { background: var(--color-bg-alt); }
+    overflow: hidden;
+  }
   .section-yellow { background: var(--color-primary); }
 
   .section-header { text-align: center; margin-bottom: 48px; }
-  .section-badge {
+
+  /* Decision grid (inside BentoTile) */
+  .decision-grid {
+    display: grid;
+    grid-template-columns: 1.5fr 1.2fr 0.8fr;
+    gap: 12px 24px;
+    margin-top: 8px;
+  }
+  .decision-col-head {
+    font-size: 11px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--color-gray-600);
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--color-gray-200);
+  }
+  .decision-cell {
+    font-size: 14px;
+    color: var(--color-gray-700);
+    line-height: 1.6;
+    padding: 8px 0;
+    border-top: 1px solid var(--color-gray-200);
+  }
+  /* Hide the pseudo-header on the first three (col-heads) so only body cells get borders */
+  .decision-col-head + .decision-cell { border-top: none; }
+  .dec-tag {
     display: inline-block;
     background: var(--color-primary);
     color: var(--color-black);
-    padding: 8px 20px;
-    border-radius: var(--radius-full);
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    margin-bottom: 16px;
-  }
-  .section-title {
-    font-family: var(--font-display);
-    font-size: clamp(28px, 4vw, 40px);
-    font-weight: 900;
-    line-height: 1.2;
-    color: var(--color-black);
-  }
-  .section-title .highlight { color: var(--color-primary-dark); }
-
-  /* Decision table */
-  .decision-table {
-    max-width: 1000px;
-    margin: 0 auto;
-    background: var(--color-white);
-    border: 1px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    overflow: hidden;
-  }
-  .decision-row {
-    display: grid;
-    grid-template-columns: 1.5fr 1.2fr 0.8fr;
-    gap: 16px;
-    padding: 16px 24px;
-    border-top: 1px solid var(--color-gray-200);
-    align-items: center;
-    font-size: 15px;
-    color: var(--color-gray-700);
-  }
-  .decision-row:first-child { border-top: none; }
-  .decision-header {
-    background: var(--color-bg-alt);
-    font-weight: 800;
-    color: var(--color-black);
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-  .dec-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
     padding: 4px 10px;
-    background: var(--color-primary);
-    color: var(--color-black);
     border-radius: var(--radius-sm);
     font-size: 13px;
     font-weight: 700;
   }
-  .dec-icon { flex-shrink: 0; }
   .decision-closing {
     text-align: center;
     margin-top: 32px;
@@ -233,52 +206,19 @@ const serviceImages: Record<string, string> = {
     color: var(--color-gray-700);
   }
 
-  /* Service cards */
+  /* Service tiles (inside BentoTile) */
-  .services-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
-  }
-  .service-block {
-    display: block;
-    background: var(--color-white);
-    border: 2px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-    transition: all 0.3s ease;
-  }
-  .service-block:hover {
-    border-color: var(--color-primary);
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-md);
-  }
-  .service-tag {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 4px 12px;
-    border-radius: var(--radius-sm);
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 12px;
-  }
-  .service-name {
-    font-family: var(--font-display);
-    font-size: 24px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 8px;
-  }
   .service-subtitle {
     font-size: 15px;
     color: var(--color-gray-600);
     line-height: 1.6;
     margin-bottom: 16px;
   }
-  .service-objective {
+  .surface-yellow .service-subtitle { color: var(--color-black); opacity: 0.85; }
-    display: flex;
+  .surface-dark .service-subtitle,
+  .surface-teal .service-subtitle,
+  .surface-coral .service-subtitle { color: rgba(255, 255, 255, 0.9); }
+  .mega-objective {
+    display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 14px;
@@ -286,79 +226,53 @@ const serviceImages: Record<string, string> = {
     border-radius: var(--radius-md);
     margin-bottom: 16px;
   }
-  .obj-label {
+  .surface-yellow .mega-objective { background: rgba(0, 0, 0, 0.1); }
+  .surface-dark .mega-objective { background: rgba(255, 255, 255, 0.1); }
+  .surface-teal .mega-objective { background: rgba(255, 255, 255, 0.1); }
+  .surface-coral .mega-objective { background: rgba(255, 255, 255, 0.1); }
+  .objective-label {
     font-size: 11px;
     color: var(--color-gray-500);
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 700;
   }
-  .obj-value {
+  .surface-dark .objective-label,
+  .surface-teal .objective-label,
+  .surface-coral .objective-label { color: var(--color-primary); }
+  .objective-value {
     font-size: 14px;
     font-weight: 700;
     color: var(--color-black);
   }
+  .surface-dark .objective-value,
+  .surface-teal .objective-value,
+  .surface-coral .objective-value { color: var(--color-white); }
   .service-link {
     display: inline-block;
     font-size: 14px;
     font-weight: 700;
-    color: var(--color-black);
     text-transform: uppercase;
     letter-spacing: 1px;
   }
+  .bento-tile:hover .service-link { transform: translateX(4px); }
 
-  /* Pricing */
+  /* Pricing tiles */
-  .pricing-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-    max-width: 900px;
-    margin: 0 auto;
-  }
-  .pricing-card {
-    position: relative;
-    background: var(--color-white);
-    border: 2px solid var(--color-gray-200);
-    border-radius: var(--radius-xl);
-    padding: 32px;
-    text-align: center;
-  }
-  .pricing-featured {
-    border-color: var(--color-primary);
-    background: var(--color-bg-alt);
-  }
-  .pricing-popular {
-    position: absolute;
-    top: -12px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 4px 12px;
-    border-radius: var(--radius-full);
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-  .pricing-tier {
-    font-family: var(--font-display);
-    font-size: 22px;
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 12px;
-  }
   .pricing-range {
     font-family: var(--font-display);
-    font-size: 24px;
+    font-size: clamp(22px, 2.4vw, 28px);
     font-weight: 900;
     color: var(--color-primary-dark);
     margin-bottom: 8px;
   }
+  .pricing-range-dark { color: var(--color-black); }
+  .pricing-range-light { color: var(--color-primary); }
   .pricing-desc {
     font-size: 14px;
     color: var(--color-gray-600);
   }
+  .pricing-desc-dark { color: var(--color-black); opacity: 0.85; }
+  .pricing-desc-light { color: rgba(255, 255, 255, 0.9); }
 
   /* CTA */
   .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
@@ -382,12 +296,29 @@ const serviceImages: Record<string, string> = {
   }
 
   @media (max-width: 1024px) {
-    .services-cards { grid-template-columns: 1fr; }
+    .decision-grid { grid-template-columns: 1fr; gap: 8px; }
-    .pricing-grid { grid-template-columns: 1fr; }
+    .decision-col-head { display: none; }
-    .decision-row { grid-template-columns: 1fr; gap: 8px; }
+    .decision-cell { padding: 12px 14px; background: var(--color-white); border-radius: var(--radius-md); border-top: none; }
+    .decision-cell:nth-child(6n+1)::before { content: 'คุณกำลังเจอ: '; font-weight: 800; color: var(--color-black); }
+    .decision-cell:nth-child(6n+2)::before { content: 'เริ่มที่: '; font-weight: 800; color: var(--color-black); }
+    .decision-cell:nth-child(6n+3)::before { content: 'คาดเห็นผลใน: '; font-weight: 800; color: var(--color-black); }
   }
   @media (max-width: 640px) {
     .cta-actions { flex-direction: column; }
     .cta-actions .btn { width: 100%; justify-content: center; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/pages/terms.astro

@@ -3,6 +3,9 @@ import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import PageHero from '../components/PageHero.astro';
+import BentoGrid from '../components/BentoGrid.astro';
+import BentoTile from '../components/BentoTile.astro';
+import DecoOrb from '../components/DecoOrb.astro';
 ---
 
 <Base title="เงื่อนไขการให้บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
@@ -14,9 +17,13 @@ import PageHero from '../components/PageHero.astro';
     subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
   />
 
-  <section class="section legal-section">
+  <section class="section section-bento legal-section">
-    <div class="container">
+    <DecoOrb color="yellow" size="450px" speed={0.3} position={{ top: '-100px', right: '-150px' }} opacity={0.25} blur="80px" />
-      <div class="legal-content">
+    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-150px', left: '-100px' }} opacity={0.4} blur="80px" />
+    <div class="container" style="position: relative; z-index: 1;">
+      <BentoGrid>
+        <BentoTile span={8} surface="white" eyebrow="กฎหมาย" title="เงื่อนไขการให้บริการ">
+          <div class="legal-body">
             <p class="legal-intro">ชื่อเว็บไซต์: MoreminiMore | เว็บไซต์: https://www.moreminimore.com | บริษัท: MoreminiMore Co.,Ltd.</p>
 
             <div class="legal-block">
@@ -54,6 +61,26 @@ import PageHero from '../components/PageHero.astro';
               <p>หากมีคำถามเกี่ยวกับเงื่อนไขการให้บริการ กรุณาติดต่อเราที่ contact@moreminimore.com หรือ 080-995-5945</p>
             </div>
           </div>
+        </BentoTile>
+
+        <BentoTile span={4} surface="yellow" eyebrow="ข้อมูลเอกสาร" title="สรุปฉบับย่อ">
+          <div class="aside-body">
+            <p><strong>ชื่อเอกสาร:</strong> เงื่อนไขการให้บริการ</p>
+            <p><strong>มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
+            <p><strong>จัดการโดย:</strong> MoreminiMore Co.,Ltd.</p>
+            <p style="margin-top: 20px;"><strong>หัวข้อทั้งหมด 7 ข้อ:</strong></p>
+            <ol class="toc-list">
+              <li>การยอมรับเงื่อนไข</li>
+              <li>การแก้ไขเงื่อนไข</li>
+              <li>บริการของเรา</li>
+              <li>การชำระเงิน</li>
+              <li>การรับประกัน</li>
+              <li>ข้อจำกัดความรับผิด</li>
+              <li>ติดต่อเรา</li>
+            </ol>
+          </div>
+        </BentoTile>
+      </BentoGrid>
     </div>
   </section>
 
@@ -62,25 +89,83 @@ import PageHero from '../components/PageHero.astro';
 
 <style>
   .legal-section { background: var(--color-white); }
-  .legal-content { max-width: 800px; margin: 0 auto; }
+  .section-bento { position: relative; overflow: hidden; }
+
+  /* Body typography inside the prose tile */
+  .legal-body { font-size: 16px; line-height: 1.8; color: var(--color-gray-700); }
   .legal-intro {
-    font-size: 18px;
+    font-size: 17px;
     color: var(--color-gray-700);
-    margin-bottom: 48px;
+    margin-bottom: 36px;
     line-height: 1.7;
+    padding-bottom: 28px;
+    border-bottom: 1px solid var(--color-gray-200);
   }
-  .legal-block { margin-bottom: 48px; }
+  .legal-block { margin-bottom: 36px; }
+  .legal-block:last-child { margin-bottom: 0; }
   .legal-block h2 {
     font-family: var(--font-display);
-    font-size: 24px;
+    font-size: 22px;
     font-weight: 800;
-    margin-bottom: 20px;
+    margin-bottom: 14px;
     color: var(--color-black);
   }
   .legal-block p {
     font-size: 16px;
     color: var(--color-gray-700);
     line-height: 1.8;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
+  }
+
+  /* Aside (yellow tile) */
+  .aside-body {
+    font-size: 15px;
+    line-height: 1.7;
+    color: var(--color-black);
+  }
+  .aside-body p { margin-bottom: 10px; }
+  .aside-body strong { font-weight: 800; }
+  .toc-list {
+    list-style: none;
+    padding: 0;
+    margin: 12px 0 0;
+    counter-reset: toc;
+  }
+  .toc-list li {
+    counter-increment: toc;
+    padding: 10px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    font-weight: 600;
+    position: relative;
+    padding-left: 36px;
+  }
+  .toc-list li::before {
+    content: counter(toc, decimal-leading-zero);
+    position: absolute;
+    left: 0;
+    top: 10px;
+    font-family: var(--font-display);
+    font-weight: 900;
+    opacity: 0.6;
+  }
+  .toc-list li:last-child { border-bottom: none; }
+
+  @media (max-width: 640px) {
+    .legal-intro { font-size: 16px; }
+    .legal-block h2 { font-size: 20px; }
   }
 </style>
+
+<script>
+  // Parallax orbs (use data-parallax-speed from DecoOrb)
+  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
+  function updateParallax() {
+    const scrolled = window.scrollY;
+    parallaxEls.forEach(el => {
+      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
+      const ty = scrolled * speed * -0.3;
+      el.style.transform = `translate3d(0, ${ty}px, 0)`;
+    });
+  }
+  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
+</script>

src/styles/global.css

@@ -15,6 +15,16 @@
   --color-primary: #fed400;        /* yellow accent */
   --color-primary-dark: #e6c100;   /* hover state */
   --color-primary-light: #fff5b3;  /* tint for subtle backgrounds */
+  --color-primary-soft: #fff4b3;   /* bento tile surface */
+
+  /* Accent palette — for bento tile variety */
+  --color-purple: #7c3aed;
+  --color-purple-soft: #ede9fe;
+  --color-teal: #0d9488;
+  --color-teal-soft: #ccfbf1;
+  --color-mint: #10b981;
+  --color-mint-soft: #d1fae5;
+  --color-coral: #f97316;
 
   --color-black: #0a0a0a;          /* primary text */
   --color-white: #ffffff;          /* pure white */
@@ -40,7 +50,7 @@
   --space-3xl: 128px;
 
   /* Layout */
-  --container-max: 1400px;
+  --container-max: 1600px;
   --gutter: 32px;
   --section-padding: 120px;
 
@@ -820,3 +830,51 @@ p {
     padding: 16px 28px;
   }
 }
+
+
+/* ============================================
+   BENTO TILE — global override (unscoped)
+   Forces equal-width tiles regardless of content
+   ============================================ */
+.bento-tile {
+  min-width: 0 !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  min-height: 380px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
+}
+
+/* Invisible overlay link — makes the whole tile clickable
+   without breaking the bento-grid layout (no <a> wrapping) */
+.tile-link-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+.bento-tile > *:not(.tile-link-overlay) {
+  position: relative;
+  z-index: 2;
+}
+.bento-tile:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
+}
+
+/* Make tile-body grow to push CTA to bottom */
+.bento-tile .tile-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.bento-tile .tile-body > .mega-cta,
+.bento-tile .tile-body > .btn,
+.bento-tile .tile-body > a:last-child {
+  margin-top: auto;
+}