diff --git a/.emdash/seed.json b/.emdash/seed.json
new file mode 100644
index 0000000..7449540
--- /dev/null
+++ b/.emdash/seed.json
@@ -0,0 +1,578 @@
+{
+  "version": "1",
+  "collections": [
+    {
+      "slug": "pages",
+      "label": "Pages",
+      "fields": [
+        { "slug": "title", "type": "string", "label": "Title" },
+        { "slug": "subtitle", "type": "string", "label": "Subtitle" },
+        { "slug": "badge", "type": "string", "label": "Badge" },
+        { "slug": "hero_image", "type": "image", "label": "Hero Image" },
+        { "slug": "theme", "type": "select", "label": "Theme", "options": ["yellow", "accent"] },
+        { "slug": "show_cta", "type": "boolean", "label": "Show CTA" },
+        { "slug": "cta_text", "type": "string", "label": "CTA Text" },
+        { "slug": "cta_link", "type": "string", "label": "CTA Link" },
+        { "slug": "variant", "type": "select", "label": "Hero Variant", "options": ["split", "centered", "text_only", "floating_cards"] },
+        { "slug": "size", "type": "select", "label": "Hero Size", "options": ["full", "compact"] }
+      ]
+    },
+    {
+      "slug": "services",
+      "label": "Services",
+      "fields": [
+        { "slug": "title", "type": "string", "label": "Title" },
+        { "slug": "subtitle", "type": "string", "label": "Subtitle" },
+        { "slug": "badge", "type": "string", "label": "Badge" },
+        { "slug": "hero_image", "type": "image", "label": "Hero Image" },
+        { "slug": "content", "type": "portableText", "label": "Content" },
+        {
+          "slug": "features",
+          "type": "repeater",
+          "label": "Features",
+          "fields": [
+            { "slug": "icon", "type": "string", "label": "Icon" },
+            { "slug": "feature_title", "type": "string", "label": "Title" },
+            { "slug": "description", "type": "string", "label": "Description" }
+          ]
+        }
+      ]
+    },
+    {
+      "slug": "portfolio",
+      "label": "Portfolio",
+      "fields": [
+        { "slug": "name", "type": "string", "label": "Name" },
+        { "slug": "url", "type": "url", "label": "URL" },
+        { "slug": "category", "type": "select", "label": "Category", "options": ["webdev", "ecommerce", "marketing"] },
+        { "slug": "category_label", "type": "string", "label": "Category Label" },
+        { "slug": "thumbnail", "type": "image", "label": "Thumbnail" },
+        { "slug": "description", "type": "text", "label": "Description" },
+        {
+          "slug": "services",
+          "type": "repeater",
+          "label": "Services",
+          "fields": [
+            { "slug": "service_name", "type": "string", "label": "Name" }
+          ]
+        }
+      ]
+    },
+    {
+      "slug": "blog",
+      "label": "Blog",
+      "fields": [
+        { "slug": "title", "type": "string", "label": "Title" },
+        { "slug": "excerpt", "type": "string", "label": "Excerpt" },
+        { "slug": "image", "type": "image", "label": "Image" },
+        { "slug": "date", "type": "datetime", "label": "Date" },
+        { "slug": "category", "type": "string", "label": "Category" },
+        { "slug": "content", "type": "portableText", "label": "Content" }
+      ]
+    },
+    {
+      "slug": "faq",
+      "label": "FAQ",
+      "fields": [
+        { "slug": "category", "type": "string", "label": "Category" },
+        { "slug": "question", "type": "string", "label": "Question" },
+        { "slug": "answer", "type": "text", "label": "Answer" }
+      ]
+    },
+    {
+      "slug": "settings",
+      "label": "Site Settings",
+      "fields": [
+        { "slug": "site_name", "type": "string", "label": "Site Name" },
+        { "slug": "email", "type": "string", "label": "Contact Email" },
+        { "slug": "phone", "type": "string", "label": "Contact Phone" },
+        { "slug": "address", "type": "text", "label": "Address" },
+        { "slug": "facebook", "type": "url", "label": "Facebook URL" },
+        { "slug": "line", "type": "url", "label": "LINE URL" },
+        { "slug": "linkedin", "type": "url", "label": "LinkedIn URL" }
+      ]
+    }
+  ],
+  "content": {
+    "pages": [
+      {
+        "id": "page-home",
+        "slug": "home",
+        "data": {
+          "title": "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
+          "subtitle": "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
+          "badge": "ดิจิทัลเอเจนซี่ในประเทศไทย",
+          "hero_image": "/images/hero/hero.jpg",
+          "theme": "yellow",
+          "variant": "split",
+          "size": "full",
+          "show_cta": true,
+          "cta_text": "เริ่มต้นวันนี้",
+          "cta_link": "/contact"
+        }
+      },
+      {
+        "id": "page-about",
+        "slug": "about",
+        "data": {
+          "title": "เกี่ยวกับ มอร์มินิมอร์",
+          "subtitle": "บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย",
+          "badge": "เกี่ยวกับเรา",
+          "hero_image": "/images/hero/about.jpg",
+          "theme": "yellow",
+          "variant": "centered",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-portfolio",
+        "slug": "portfolio",
+        "data": {
+          "title": "ผลงานของเรา",
+          "subtitle": "รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ",
+          "badge": "พอร์ตโฟลิโอ",
+          "hero_image": "/images/hero/hero.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-contact",
+        "slug": "contact",
+        "data": {
+          "title": "พูดคุยกับเรา วันนี้เลย!",
+          "subtitle": "พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย",
+          "badge": "ติดต่อเรา",
+          "hero_image": "/images/hero/contact.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-faq",
+        "slug": "faq",
+        "data": {
+          "title": "คำถามที่พบบ่อย",
+          "subtitle": "หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา",
+          "badge": "FAQ",
+          "hero_image": "/images/hero/tech-consult.jpg",
+          "theme": "yellow",
+          "variant": "centered",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-privacy",
+        "slug": "privacy",
+        "data": {
+          "title": "นโยบายความเป็นส่วนตัว",
+          "subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
+          "badge": "กฎหมาย",
+          "hero_image": "/images/hero/ai-automation.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-terms",
+        "slug": "terms",
+        "data": {
+          "title": "เงื่อนไขการให้บริการ",
+          "subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
+          "badge": "กฎหมาย",
+          "hero_image": "/images/hero/marketing-automation.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      }
+    ],
+    "services": [
+      {
+        "id": "service-webdev",
+        "slug": "webdev",
+        "data": {
+          "title": "พัฒนาเว็บไซต์",
+          "subtitle": "สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการของลูกค้าของคุณ ด้วยเทคโนโลยีล่าสุดและ design ที่สวยงาม",
+          "badge": "บริการ",
+          "hero_image": "/images/hero/web-development-hero.jpg",
+          "feature1_icon": "⚡",
+          "feature1_title": "เร็วสุดใน class",
+          "feature1_desc": "โหลดเร็ว เพิ่ม conversion และ SEO ranking",
+          "feature2_icon": "📱",
+          "feature2_title": "Responsive ทุก device",
+          "feature2_desc": "แสดงผลได้ดีบน mobile tablet และ desktop",
+          "feature3_icon": "🎨",
+          "feature3_title": "Design สวยงาม",
+          "feature3_desc": "ออกแบบ UI/UX ที่ดึงดูดและใช้งานง่าย",
+          "feature4_icon": "🔒",
+          "feature4_title": "ปลอดภัย",
+          "feature4_desc": "Security ระดับสูง ป้องกันการโจมตี",
+          "feature5_icon": "🔍",
+          "feature5_title": "SEO Optimized",
+          "feature5_desc": "ออกแบบมาเพื่อให้ Google ชอบ",
+          "feature6_icon": "📊",
+          "feature6_title": "Analytics ในตัว",
+          "feature6_desc": "ติดตามผู้เข้าชมและวัดผลได้"
+        }
+      },
+      {
+        "id": "service-marketing",
+        "slug": "marketing",
+        "data": {
+          "title": "Marketing Automation",
+          "subtitle": "เพิ่มประสิทธิภาพการตลาดและลดต้นทุนด้วยระบบอัตโนมัติ ประหยัดเวลา เพิ่ม conversion วัดผลได้",
+          "badge": "บริการ",
+          "hero_image": "/images/hero/marketing-automation-hero.jpg",
+          "feature1_icon": "📧",
+          "feature1_title": "Email Automation",
+          "feature1_desc": "ส่ง email อัตโนมัติเมื่อ trigger ตรงกับเงื่อนไขที่กำหนด",
+          "feature2_icon": "💬",
+          "feature2_title": "Chatbot Integration",
+          "feature2_desc": "เชื่อมต่อ chatbot กับระบบ CRM เพื่อเก็บข้อมูลลูกค้า",
+          "feature3_icon": "📱",
+          "feature3_title": "SMS/Line Automation",
+          "feature3_desc": "ส่ง SMS หรือ LINE message อัตโนมัติตาม timeline",
+          "feature4_icon": "📊",
+          "feature4_title": "Analytics Dashboard",
+          "feature4_desc": "ติดตามผลแคมเปญและวัด ROI ได้แบบ real-time",
+          "feature5_icon": "🎯",
+          "feature5_title": "Lead Scoring",
+          "feature5_desc": "ให้คะแนน leads ตามพฤติกรรมเพื่อจัดลำดับความสำคัญ",
+          "feature6_icon": "🔄",
+          "feature6_title": "Workflow Automation",
+          "feature6_desc": "สร้าง workflow อัตโนมัติสำหรับงานที่ทำซ้ำๆ"
+        }
+      },
+      {
+        "id": "service-ai",
+        "slug": "ai",
+        "data": {
+          "title": "AI Automation",
+          "subtitle": "นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการลูกค้า เพิ่มประสิทธิภาพ ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
+          "badge": "บริการ",
+          "hero_image": "/images/hero/ai-automation-hero.jpg",
+          "feature1_icon": "🤖",
+          "feature1_title": "AI Chatbot",
+          "feature1_desc": "Chatbot ที่ใช้ AI ตอบคำถามลูกค้าได้ 24/7 รองรับภาษาไทย",
+          "feature2_icon": "💬",
+          "feature2_title": "AI Customer Service",
+          "feature2_desc": "ระบบตอบคำถามอัตโนมัติด้วย AI ที่เข้าใจบริบท",
+          "feature3_icon": "📝",
+          "feature3_title": "AI Content Generation",
+          "feature3_desc": "สร้าง content อัตโนมัติด้วย AI ที่ SEO friendly",
+          "feature4_icon": "📧",
+          "feature4_title": "AI Email Marketing",
+          "feature4_desc": "ส่ง email ที่ personalized ด้วย AI ที่วิเคราะห์พฤติกรรม",
+          "feature5_icon": "📊",
+          "feature5_title": "AI Sales Prediction",
+          "feature5_desc": "ทำนายยอดขายและวางแผนการตลาดด้วย AI",
+          "feature6_icon": "🎯",
+          "feature6_title": "AI Lead Scoring",
+          "feature6_desc": "ให้คะแนน leads อัตโนมัติด้วย AI ที่เรียนรู้จากข้อมูล"
+        }
+      },
+      {
+        "id": "service-consult",
+        "slug": "consult",
+        "data": {
+          "title": "Tech Consult",
+          "subtitle": "ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ วางแผน ออกแบบ และ implement ระบบที่เหมาะสม",
+          "badge": "บริการ",
+          "hero_image": "/images/hero/tech-consult-hero.jpg",
+          "feature1_icon": "🔍",
+          "feature1_title": "Digital Audit",
+          "feature1_desc": "วิเคราะห์สถานะดิจิทัลปัจจุบันของธุรกิจคุณอย่างละเอียด",
+          "feature2_icon": "📋",
+          "feature2_title": "Digital Strategy",
+          "feature2_desc": "วางแผน digital transformation ที่เหมาะกับเป้าหมายธุรกิจ",
+          "feature3_icon": "🛠️",
+          "feature3_title": "Technology Selection",
+          "feature3_desc": "แนะนำเทคโนโลยีที่เหมาะสมกับ budget และความต้องการ",
+          "feature4_icon": "📐",
+          "feature4_title": "System Architecture",
+          "feature4_desc": "ออกแบบระบบที่ scalable และ maintainable",
+          "feature5_icon": "🔧",
+          "feature5_title": "Implementation Support",
+          "feature5_desc": "ดูแลและให้คำปรึกษาตลอดการ implement",
+          "feature6_icon": "📈",
+          "feature6_title": "Performance Optimization",
+          "feature6_desc": "ปรับปรุงประสิทธิภาพระบบให้ดีขึ้นอย่างต่อเนื่อง"
+        }
+      }
+    ],
+    "portfolio": [
+      {
+        "id": "portfolio-001",
+        "slug": "lungfinler",
+        "data": {
+          "name": "Lungfinler",
+          "url": "https://lungfinler.com",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/lungfinler.png",
+          "description": "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง"
+        }
+      },
+      {
+        "id": "portfolio-002",
+        "slug": "jetindustries",
+        "data": {
+          "name": "Jet Industries",
+          "url": "https://jetindustries.co.th",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/jetindustries.png",
+          "description": "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี"
+        }
+      },
+      {
+        "id": "portfolio-003",
+        "slug": "lawyernoom",
+        "data": {
+          "name": "สำนักงานกฎหมาย ตถาตา",
+          "url": "https://lawyernoom.com",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/lawyernoom.png",
+          "description": "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา"
+        }
+      },
+      {
+        "id": "portfolio-004",
+        "slug": "underdog",
+        "data": {
+          "name": "Underdog Marketing",
+          "url": "https://underdog.run",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/underdog.png",
+          "description": "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู"
+        }
+      },
+      {
+        "id": "portfolio-005",
+        "slug": "baofuling",
+        "data": {
+          "name": "Baofuling Shop",
+          "url": "https://baofulingshop.com",
+          "category": "ecommerce",
+          "category_label": "อีคอมเมิร์ซ",
+          "thumbnail": "/images/portfolio/baofuling.png",
+          "description": "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน"
+        }
+      },
+      {
+        "id": "portfolio-006",
+        "slug": "trainersunny",
+        "data": {
+          "name": "เทรนเนอร์ซันนี่",
+          "url": "https://trainersunny.com",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/trainersunny.png",
+          "description": "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill"
+        }
+      },
+      {
+        "id": "portfolio-007",
+        "slug": "luadjob",
+        "data": {
+          "name": "เลือดจระเข้วานิไทย",
+          "url": "https://เลือดจระเข้วานิไทย.com",
+          "category": "ecommerce",
+          "category_label": "อีคอมเมิร์ซ",
+          "thumbnail": "/images/portfolio/luadjob.png",
+          "description": "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ"
+        }
+      },
+      {
+        "id": "portfolio-008",
+        "slug": "tuanthong",
+        "data": {
+          "name": "ทวนทอง 99",
+          "url": "https://tuanthong99.com",
+          "category": "ecommerce",
+          "category_label": "อีคอมเมิร์ซ",
+          "thumbnail": "/images/portfolio/tuanthong.png",
+          "description": "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง"
+        }
+      },
+      {
+        "id": "portfolio-009",
+        "slug": "odooportal",
+        "data": {
+          "name": "Odoo Portal",
+          "url": "https://odooportal.com",
+          "category": "marketing",
+          "category_label": "ที่ปรึกษาการตลาด",
+          "thumbnail": "/images/portfolio/odooportal.png",
+          "description": "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย"
+        }
+      }
+    ],
+    "faq": [
+      {
+        "id": "faq-001",
+        "slug": "service-001",
+        "data": { "category": "บริการ", "category_icon": "🎯", "question": "MoreminiMore ให้บริการอะไรบ้าง?", "answer": "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย" }
+      },
+      {
+        "id": "faq-002",
+        "slug": "service-002",
+        "data": { "category": "บริการ", "category_icon": "🎯", "question": "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?", "answer": "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application" }
+      },
+      {
+        "id": "faq-003",
+        "slug": "service-003",
+        "data": { "category": "บริการ", "category_icon": "🎯", "question": "AI Chatbot สามารถทำอะไรได้บ้าง?", "answer": "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้" }
+      },
+      {
+        "id": "faq-004",
+        "slug": "price-001",
+        "data": { "category": "ราคา", "category_icon": "💰", "question": "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?", "answer": "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี" }
+      },
+      {
+        "id": "faq-005",
+        "slug": "price-002",
+        "data": { "category": "ราคา", "category_icon": "💰", "question": "มีราคาแพ็คเกจหรือไม่?", "answer": "มี เรามีแพ็คเกจสำหรับธุรกิจที่ต้องการเริ่มต้นอย่างง่ายๆ และแพ็คเกจสำหรับธุรกิจที่ต้องการระบบครบวงจร สามารถเลือกได้ตามความต้องการ" }
+      },
+      {
+        "id": "faq-006",
+        "slug": "price-003",
+        "data": { "category": "ราคา", "category_icon": "💰", "question": "ชำระเงินอย่างไร?", "answer": "รองรับการชำระเงินผ่านโอนเงินธนาคาร หรือผ่อนชำระผ่านบัตรเครดิต 3-6 งวด (มีดอกเบี้ย)" }
+      },
+      {
+        "id": "faq-007",
+        "slug": "time-001",
+        "data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ใช้เวลาพัฒนานานเท่าไหร่?", "answer": "ขึ้นอยู่กับความซับซ้อน Landing Page ใช้เวลา 1-2 สัปดาห์ เว็บไซต์ขนาดกลาง 2-4 สัปดาห์ ระบบ Web Application 4-8 สัปดาห์" }
+      },
+      {
+        "id": "faq-008",
+        "slug": "time-002",
+        "data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ถ้าต้องการด่วนได้ไหม?", "answer": "ได้ เรามีบริการด่วนพิเศษ (เพิ่มค่าใช้จ่าย 30%) สามารถส่งมอบงานได้เร็วขึ้น 50%" }
+      },
+      {
+        "id": "faq-009",
+        "slug": "support-001",
+        "data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีการรับประกันหรือไม่?", "answer": "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการพัฒนา เราจะแก้ไขให้ฟรี" }
+      },
+      {
+        "id": "faq-010",
+        "slug": "support-002",
+        "data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีบริการดูแลหลังการขายไหม?", "answer": "มี เรามีแพ็คเกจดูแลรายเดือนเริ่มต้นที่ 2,000 บาท/เดือน รวมการอัพเดทเนื้อหา ปรับปรุงความปลอดภัย และ Backup" }
+      }
+    ],
+    "blog": [
+      {
+        "id": "post-001",
+        "slug": "5-ways-ai-increase-sales",
+        "data": {
+          "title": "5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ",
+          "excerpt": "ค้นพบ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายให้ธุรกิจ SMEs ไทย พร้อมตัวอย่างและแนวทางการนำไปใช้จริง",
+          "image": "/images/blog/5-ways-ai-increase-sales.jpg",
+          "date": "2026-03-11",
+          "category": "AI Business",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 1: ใช้ AI วิเคราะห์ลูกค้าและแนะนำสินค้าที่ตรงใจ" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "หนึ่งในความสามารถที่ทรงพลังที่สุดของ AI คือการวิเคราะห์ข้อมูลลูกค้าและค้นหารูปแบบที่มนุษย์อาจมองไม่เห็น AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนชอบสินค้าประเภทไหน ซื้อในช่วงเวลาไหน และมีพฤติกรรมการซื้ออย่างไร" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 2: ใช้ Chatbot ดูแลลูกค้าตลอด 24 ชั่วโมง" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "ลูกค้าจำนวนมากต้องการได้รับคำตอบทันที ไม่ว่าจะกี่โมง แต่การจ้างพนักงานทำงาน 24 ชั่วโมงนั้นมีค่าใช้จ่ายสูง Chatbot ที่ใช้ AI สามารถตอบคำถามลูกค้าได้ตลอดเวลา โดยไม่ต้องเสียค่าล่วงเวลา" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 3: ใช้ AI ส่งข้อความการตลาดในเวลาที่เหมาะสม" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "การส่งข้อความการตลาดไม่ใช่แค่การส่งออกไปเท่านั้น แต่ต้องส่งในเวลาที่ลูกค้ามีโอกาสอ่านและตอบสนองมากที่สุด AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนมีช่วงเวลาไหนที่เปิดอ่านข้อความบ่อยที่สุด และส่งในเวลานั้น" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 4: ใช้ AI สร้างเนื้อหาการตลาด" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "เนื้อหาการตลาดที่ดีเป็นหัวใจสำคัญในการดึงดูดลูกค้า แต่การสร้างเนื้อหาที่มีคุณภาพตลอดเวลาต้องใช้เวลาและทรัพยากรมาก AI สามารถช่วยสร้างเนื้อหาได้เร็วขึ้น ไม่ว่าจะเป็นโพสต์เฟซบุ๊ก คำบรรยายสินค้า อีเมลการตลาด หรือบทความบล็อก" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 5: ใช้ AI ทำนายแนวโน้มและวางแผนสินค้า" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "การมีสินค้าคงคลงเป็นสิ่งจำเป็นสำหรับธุรกิจค้าปลีก แต่การมีสินค้ามากเกินไปก็เป็นปัญหา AI สามารถวิเคราะห์ข้อมูลยอดขายในอดีต ฤดูกาล และปัจจัยอื่นๆ เพื่อทำนายว่าควรสั่งสินค้าเท่าไหร่ในแต่ละช่วง" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-002",
+        "slug": "ai-content-google-love",
+        "data": {
+          "title": "วิธีสร้าง Content ด้วย AI ที่ Google รัก",
+          "excerpt": "เรียนรู้วิธีการใช้ AI ช่วยสร้างเนื้อหาการตลาดที่มีคุณภาพและได้รับการจัดอันดับดีจาก Google พร้อมเทคนิคและตัวอย่างจริง",
+          "image": "/images/blog/ai-content-google-love.jpg",
+          "date": "2026-03-10",
+          "category": "AI Content",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม AI Content ต้องมีคุณภาพ" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "Google มีอัลกอริทึมที่ฉลาดมาก สามารถแยกแยะได้ว่าเนื้อหาที่สร้างโดย AI มีคุณภาพหรือไม่ เนื้อหาที่ไม่มีคุณค่า สร้างขึ้นแค่เพื่อใส่คีย์เวิร์ด จะถูกลงโทษและไม่ติดอันดับ" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีใช้ AI สร้างเนื้อหาที่ดี" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้เขียนทั้งหมด วิธีที่ดีที่สุดคือใช้ AI ช่วยในบางส่วน เช่น รวบรวมข้อมูล สร้างโครงสร้าง หรือเขียน draft แล้วนำมาปรับแก้ด้วยมนุษย์" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-003",
+        "slug": "ai-for-sme-thailand",
+        "data": {
+          "title": "AI สำหรับ SME ไทย: คู่มือฉบับสมบูรณ์",
+          "excerpt": "การใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน พร้อมแนวทางปฏิบัติจริง",
+          "image": "/images/blog/ai-for-sme-thailand.jpg",
+          "date": "2026-03-08",
+          "category": "AI Business",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม SME ต้องใช้ AI" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "AI ไม่ใช่เทคโนโลยีสำหรับบริษัทใหญ่เท่านั้น ธุรกิจ SME สามารถเริ่มใช้ประโยชน์จาก AI ได้ง่ายๆ ด้วยเครื่องมือที่เข้าถึงได้" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-004",
+        "slug": "digital-transformation-guide",
+        "data": {
+          "title": "คู่มือ Digital Transformation ฉบับสมบูรณ์",
+          "excerpt": "การ transform ธุรกิจของคุณสู่ดิจิทัลอย่างครบวงจร ตั้งแต่การวางแผนจนถึงการ Implement",
+          "image": "/images/blog/digital-transformation.jpg",
+          "date": "2026-03-05",
+          "category": "Business",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Digital Transformation คืออะไร" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "Digital Transformation คือการนำเทคโนโลยีดิจิทัลมาใช้ในทุกด้านของธุรกิจ เพื่อเพิ่มประสิทธิภาพและสร้างคุณค่าใหม่ให้กับลูกค้า" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-005",
+        "slug": "marketing-automation-guide",
+        "data": {
+          "title": "Marketing Automation: คู่มือเริ่มต้น",
+          "excerpt": "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้นใช้งานสำหรับธุรกิจของคุณ",
+          "image": "/images/blog/marketing-automation-guide.jpg",
+          "date": "2026-03-01",
+          "category": "Marketing",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Marketing Automation คืออะไร" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "Marketing Automation คือการใช้ซอฟต์แวร์เพื่อ automate การตลาดซ้ำๆ เช่น การส่งอีเมล การโพสต์โซเชียลมีเดีย และการวิเคราะห์ข้อมูล" }] }
+            ]
+          }
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/.omc/project-memory.json b/.omc/project-memory.json
index 6234b5e..6119ca7 100644
--- a/.omc/project-memory.json
+++ b/.omc/project-memory.json
@@ -1,6 +1,6 @@
 {
   "version": "1.0.0",
-  "lastScanned": 1777964900860,
+  "lastScanned": 1779069605402,
   "projectRoot": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site",
   "techStack": {
     "languages": [
@@ -26,13 +26,23 @@
         "name": "astro",
         "version": "6.2.2",
         "category": "fullstack"
+      },
+      {
+        "name": "react",
+        "version": "19.2.5",
+        "category": "frontend"
+      },
+      {
+        "name": "react-dom",
+        "version": "19.2.5",
+        "category": "frontend"
       }
     ],
     "packageManager": "npm",
     "runtime": "Node.js 22.12.0"
   },
   "build": {
-    "buildCommand": "pkill -f \"node.*entry.mjs\" 2>/dev/null; sleep 1; npm run build 2>&1 | tail -10",
+    "buildCommand": "npm run build",
     "testCommand": null,
     "lintCommand": null,
     "devCommand": "npm run dev",
@@ -45,7 +55,7 @@
   },
   "conventions": {
     "namingStyle": null,
-    "importStyle": null,
+    "importStyle": "ES modules",
     "testPattern": null,
     "fileOrganization": "type-based"
   },
@@ -63,9 +73,10 @@
     "dist": {
       "path": "dist",
       "purpose": "Distribution/build output",
-      "fileCount": 3,
-      "lastAccessed": 1777964900843,
+      "fileCount": 4,
+      "lastAccessed": 1779069605371,
       "keyFiles": [
+        "config.yml",
         "favicon.ico",
         "favicon.svg",
         "index.html"
@@ -74,191 +85,115 @@
     "public": {
       "path": "public",
       "purpose": "Public files",
-      "fileCount": 2,
-      "lastAccessed": 1777964900843,
+      "fileCount": 3,
+      "lastAccessed": 1779069605375,
       "keyFiles": [
+        "config.yml",
         "favicon.ico",
         "favicon.svg"
       ]
     },
+    "seed": {
+      "path": "seed",
+      "purpose": null,
+      "fileCount": 1,
+      "lastAccessed": 1779069605376,
+      "keyFiles": [
+        "seed.json"
+      ]
+    },
     "src": {
       "path": "src",
       "purpose": "Source code",
+      "fileCount": 1,
+      "lastAccessed": 1779069605376,
+      "keyFiles": [
+        "content.config.ts"
+      ]
+    },
+    "uploads": {
+      "path": "uploads",
+      "purpose": null,
       "fileCount": 0,
-      "lastAccessed": 1777964900843,
+      "lastAccessed": 1779069605376,
       "keyFiles": []
     },
     "src/components": {
       "path": "src/components",
       "purpose": "UI components",
-      "fileCount": 2,
-      "lastAccessed": 1777964900844,
+      "fileCount": 7,
+      "lastAccessed": 1779069605377,
       "keyFiles": [
+        "BlogCard.astro",
         "Footer.astro",
-        "Navigation.astro"
+        "Hero.astro"
+      ]
+    },
+    "src/data": {
+      "path": "src/data",
+      "purpose": "Data files",
+      "fileCount": 1,
+      "lastAccessed": 1779069605377,
+      "keyFiles": [
+        "portfolio.ts"
       ]
     },
     "src/pages": {
       "path": "src/pages",
       "purpose": "Page components",
       "fileCount": 7,
-      "lastAccessed": 1777964900844,
+      "lastAccessed": 1779069605378,
       "keyFiles": [
         "about.astro",
         "contact.astro",
         "faq.astro"
       ]
+    },
+    "src/utils": {
+      "path": "src/utils",
+      "purpose": "Utility functions",
+      "fileCount": 1,
+      "lastAccessed": 1779069605378,
+      "keyFiles": [
+        "site-identity.ts"
+      ]
     }
   },
   "hotPaths": [
     {
-      "path": "src/pages/services/webdev.astro",
-      "accessCount": 15,
-      "lastAccessed": 1777995299269,
-      "type": "file"
+      "path": "src/pages",
+      "accessCount": 1,
+      "lastAccessed": 1779069626755,
+      "type": "directory"
     },
     {
-      "path": "src/pages/contact.astro",
-      "accessCount": 13,
-      "lastAccessed": 1778035753279,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/services/marketing.astro",
-      "accessCount": 12,
-      "lastAccessed": 1777995302629,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/services/ai.astro",
-      "accessCount": 12,
-      "lastAccessed": 1777995305997,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/services/consult.astro",
-      "accessCount": 12,
-      "lastAccessed": 1777995309322,
-      "type": "file"
-    },
-    {
-      "path": "src/components/Hero.astro",
-      "accessCount": 10,
-      "lastAccessed": 1777990559849,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/portfolio.astro",
-      "accessCount": 10,
-      "lastAccessed": 1777995338202,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/faq.astro",
-      "accessCount": 10,
-      "lastAccessed": 1778035785098,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/blog/index.astro",
-      "accessCount": 9,
-      "lastAccessed": 1777990683296,
+      "path": "src/pages/terms.astro",
+      "accessCount": 1,
+      "lastAccessed": 1779069632645,
       "type": "file"
     },
     {
       "path": "src/pages/privacy.astro",
-      "accessCount": 8,
-      "lastAccessed": 1778035781772,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/index.astro",
-      "accessCount": 7,
-      "lastAccessed": 1777990666698,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/terms.astro",
-      "accessCount": 7,
-      "lastAccessed": 1778035778435,
-      "type": "file"
-    },
-    {
-      "path": "src/components/Footer.astro",
-      "accessCount": 6,
-      "lastAccessed": 1778035958612,
-      "type": "file"
-    },
-    {
-      "path": "src/components/Navigation.astro",
-      "accessCount": 5,
-      "lastAccessed": 1778035955274,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/blog/[slug].astro",
-      "accessCount": 4,
-      "lastAccessed": 1777984290050,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/about.astro",
-      "accessCount": 4,
-      "lastAccessed": 1777990670077,
-      "type": "file"
-    },
-    {
-      "path": "src/layouts/Base.astro",
-      "accessCount": 4,
-      "lastAccessed": 1778036775836,
-      "type": "file"
-    },
-    {
-      "path": "src/styles/global.css",
-      "accessCount": 3,
-      "lastAccessed": 1777972416964,
-      "type": "file"
-    },
-    {
-      "path": "src/pages/services",
-      "accessCount": 2,
-      "lastAccessed": 1777995178143,
-      "type": "directory"
-    },
-    {
-      "path": "astro.config.mjs",
-      "accessCount": 2,
-      "lastAccessed": 1778036187649,
-      "type": "file"
-    },
-    {
-      "path": "src/pages",
       "accessCount": 1,
-      "lastAccessed": 1777995189679,
-      "type": "directory"
-    },
-    {
-      "path": "src",
-      "accessCount": 1,
-      "lastAccessed": 1778035760907,
-      "type": "directory"
-    },
-    {
-      "path": "src/live.config.ts",
-      "accessCount": 1,
-      "lastAccessed": 1778036198221,
+      "lastAccessed": 1779069632748,
       "type": "file"
     },
     {
-      "path": "seed/seed.json",
+      "path": "src/pages/faq.astro",
       "accessCount": 1,
-      "lastAccessed": 1778036244021,
+      "lastAccessed": 1779069632766,
       "type": "file"
     },
     {
-      "path": "src/utils/site-identity.ts",
+      "path": "src/pages/contact.astro",
       "accessCount": 1,
-      "lastAccessed": 1778036594901,
+      "lastAccessed": 1779069632802,
+      "type": "file"
+    },
+    {
+      "path": "src/pages/portfolio.astro",
+      "accessCount": 1,
+      "lastAccessed": 1779069632820,
       "type": "file"
     }
   ],
diff --git a/.omc/sessions/94834f07-4375-45f9-b0d8-3e7a91395e8f.json b/.omc/sessions/94834f07-4375-45f9-b0d8-3e7a91395e8f.json
new file mode 100644
index 0000000..d2a45b9
--- /dev/null
+++ b/.omc/sessions/94834f07-4375-45f9-b0d8-3e7a91395e8f.json
@@ -0,0 +1,8 @@
+{
+  "session_id": "94834f07-4375-45f9-b0d8-3e7a91395e8f",
+  "ended_at": "2026-05-07T04:05:46.804Z",
+  "reason": "prompt_input_exit",
+  "agents_spawned": 15,
+  "agents_completed": 14,
+  "modes_used": []
+}
\ No newline at end of file
diff --git a/.omc/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.json b/.omc/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.json
new file mode 100644
index 0000000..514ce4a
--- /dev/null
+++ b/.omc/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.json
@@ -0,0 +1,8 @@
+{
+  "session_id": "e5f480d6-2b75-4bfe-b154-b1e53e34e0a3",
+  "ended_at": "2026-05-14T02:42:09.203Z",
+  "reason": "prompt_input_exit",
+  "agents_spawned": 0,
+  "agents_completed": 0,
+  "modes_used": []
+}
\ No newline at end of file
diff --git a/.omc/state/agent-replay-94834f07-4375-45f9-b0d8-3e7a91395e8f.jsonl b/.omc/state/agent-replay-94834f07-4375-45f9-b0d8-3e7a91395e8f.jsonl
deleted file mode 100644
index 46564ba..0000000
--- a/.omc/state/agent-replay-94834f07-4375-45f9-b0d8-3e7a91395e8f.jsonl
+++ /dev/null
@@ -1,95 +0,0 @@
-{"t":0,"agent":"ade9261","agent_type":"fork","event":"agent_start","parent_mode":"none"}
-{"t":0,"agent":"a4b5aad","agent_type":"fork","event":"agent_start","parent_mode":"none"}
-{"t":0,"agent":"a104ef8","agent_type":"fork","event":"agent_start","parent_mode":"none"}
-{"t":0,"agent":"a4c6388","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"adc93f5","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8606b2","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"af35d14","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a261e73","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"acef11f","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a571fa7","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a297250","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a124be4","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a131297","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ae0fc7a","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ac40e63","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aa0080c","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aad1a0a","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"afce4e2","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a7e6113","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a0590f1","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a6f3810","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a255c75","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a4a30a2","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a165902","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8859ee","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a11a614","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a9cb2dd","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8a58ba","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8d86e8","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a01fdbd","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aebaf8e","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a6b5bfa","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a316247","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a12a161","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8f7b2c","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ade9261","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":656345}
-{"t":0,"agent":"a678073","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a741600","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ab2b460","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ad7cf0f","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a4b5aad","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":738755}
-{"t":0,"agent":"ab374a5","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a007485","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a994226","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a55deb4","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ad24b40","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a89f2ae","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a1e2f4c","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a34d6ab","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a989a9d","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a104ef8","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":1115685}
-{"t":0,"agent":"a98f0bd","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aba2ef2","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a2a7ceb","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a034dc2","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a4cc262","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a5b9932","agent_type":"fork","event":"agent_start","parent_mode":"none"}
-{"t":0,"agent":"a105a90","agent_type":"fork","event":"agent_start","parent_mode":"none"}
-{"t":0,"agent":"a56af70","agent_type":"fork","event":"agent_start","parent_mode":"none"}
-{"t":0,"agent":"a427839","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a49dd76","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a4bda0e","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a9970b5","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8da033","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a1f3b1b","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a9ba877","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aa0d819","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a79f02d","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ad3b81c","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aca8182","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aed8490","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a5b9932","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":204749}
-{"t":0,"agent":"a81f94e","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a105a90","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":214097}
-{"t":0,"agent":"a4dfee9","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a99405e","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"af606f8","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8de9bc","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aa7b9c6","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aed75f8","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ae3a10e","agent_type":"Explore","event":"agent_start","parent_mode":"none"}
-{"t":0,"agent":"a56af70","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":357026}
-{"t":0,"agent":"ae9660b","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ae3a10e","agent_type":"Explore","event":"agent_stop","success":true,"duration_ms":52349}
-{"t":0,"agent":"a0702f4","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a7b8d11","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ae38803","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ac8967a","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a74f381","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a8c023c","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a106f58","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ae7178f","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"aacfce0","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"a55df33","agent_type":"unknown","event":"agent_stop","success":true}
-{"t":0,"agent":"ad63ce0","agent_type":"unknown","event":"agent_stop","success":true}
diff --git a/.omc/state/agent-replay-e564571a-2c3e-4064-a3bb-d2ba1fb5c94e.jsonl b/.omc/state/agent-replay-e564571a-2c3e-4064-a3bb-d2ba1fb5c94e.jsonl
new file mode 100644
index 0000000..d7b4f20
--- /dev/null
+++ b/.omc/state/agent-replay-e564571a-2c3e-4064-a3bb-d2ba1fb5c94e.jsonl
@@ -0,0 +1,37 @@
+{"t":0,"agent":"a52ff9b","agent_type":"verification","event":"agent_start","parent_mode":"none"}
+{"t":0,"agent":"ab1174d","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a326c52","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a32446a","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a52ff9b","agent_type":"verification","event":"agent_stop","success":true,"duration_ms":112580}
+{"t":0,"agent":"a4424f0","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a4e64c4","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a2c932d","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a2e9f82","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a8fb1c6","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a8a29cb","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a4f35b2","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a719f1d","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a13a58e","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"ad43c53","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a751239","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a9abb1a","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a1e9a14","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a3e3c98","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"adbcc19","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a84e570","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a4ea252","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a8762a8","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a097b1b","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"ae95a8d","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"abf1ace","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a83c72d","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a3e4b31","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a750dca","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a0e9097","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"acb1af1","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"ae8e570","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"af853e9","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"acaf2d6","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a283fe1","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"af732d5","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a30c404","agent_type":"unknown","event":"agent_stop","success":true}
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-06T03-07-52-974Z.json b/.omc/state/checkpoints/checkpoint-2026-05-06T03-07-52-974Z.json
new file mode 100644
index 0000000..bbf8edd
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-06T03-07-52-974Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-06T03:07:52.973Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-06T03-10-31-066Z.json b/.omc/state/checkpoints/checkpoint-2026-05-06T03-10-31-066Z.json
new file mode 100644
index 0000000..552228b
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-06T03-10-31-066Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-06T03:10:31.065Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-06T04-26-08-868Z.json b/.omc/state/checkpoints/checkpoint-2026-05-06T04-26-08-868Z.json
new file mode 100644
index 0000000..c8b4b5b
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-06T04-26-08-868Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-06T04:26:08.867Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-06T04-40-11-215Z.json b/.omc/state/checkpoints/checkpoint-2026-05-06T04-40-11-215Z.json
new file mode 100644
index 0000000..4e86c24
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-06T04-40-11-215Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-06T04:40:11.214Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-06T06-48-58-221Z.json b/.omc/state/checkpoints/checkpoint-2026-05-06T06-48-58-221Z.json
new file mode 100644
index 0000000..e41d118
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-06T06-48-58-221Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-06T06:48:58.220Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-06T11-19-04-928Z.json b/.omc/state/checkpoints/checkpoint-2026-05-06T11-19-04-928Z.json
new file mode 100644
index 0000000..695ccf4
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-06T11-19-04-928Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-06T11:19:04.927Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-07T03-07-55-333Z.json b/.omc/state/checkpoints/checkpoint-2026-05-07T03-07-55-333Z.json
new file mode 100644
index 0000000..0eb8fc5
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-07T03-07-55-333Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-07T03:07:55.332Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-16T04-47-41-599Z.json b/.omc/state/checkpoints/checkpoint-2026-05-16T04-47-41-599Z.json
new file mode 100644
index 0000000..636f9d2
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-16T04-47-41-599Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-16T04:47:41.597Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-16T04-52-02-990Z.json b/.omc/state/checkpoints/checkpoint-2026-05-16T04-52-02-990Z.json
new file mode 100644
index 0000000..abe402a
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-16T04-52-02-990Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-16T04:52:02.989Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-16T04-57-33-690Z.json b/.omc/state/checkpoints/checkpoint-2026-05-16T04-57-33-690Z.json
new file mode 100644
index 0000000..9cb94eb
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-16T04-57-33-690Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-16T04:57:33.689Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-16T05-10-05-736Z.json b/.omc/state/checkpoints/checkpoint-2026-05-16T05-10-05-736Z.json
new file mode 100644
index 0000000..7507281
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-16T05-10-05-736Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-16T05:10:05.734Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/checkpoints/checkpoint-2026-05-18T01-59-16-903Z.json b/.omc/state/checkpoints/checkpoint-2026-05-18T01-59-16-903Z.json
new file mode 100644
index 0000000..63de41b
--- /dev/null
+++ b/.omc/state/checkpoints/checkpoint-2026-05-18T01-59-16-903Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-18T01:59:16.902Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/.omc/state/last-tool-error.json b/.omc/state/last-tool-error.json
index c68810e..dfcb1a1 100644
--- a/.omc/state/last-tool-error.json
+++ b/.omc/state/last-tool-error.json
@@ -1,7 +1,7 @@
 {
-  "tool_name": "Write",
-  "tool_input_preview": "{\"file_path\":\"/Users/kunthawatgleethong/Gitea/moreminimore-emdash/moreminimore-site/src/utils/site-identity.ts\",\"content\":\"import { emdash } from \\\"emdash/astro\\\";\\nimport type { CollectionEntry } fro...",
-  "error": "EACCES: permission denied, mkdir '/Users/kunthawatgleethong'",
-  "timestamp": "2026-05-06T03:03:02.581Z",
+  "tool_name": "Read",
+  "tool_input_preview": "{\"file_path\":\"/Users/kunthawatgreethong/.openclaude/projects/-Users-kunthawat-gith-Gitea-moreminimore-emdash/memory/private/redesign-2026-05-13.md\"}",
+  "error": "File does not exist. Note: your current working directory is /Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site.",
+  "timestamp": "2026-05-16T09:37:19.453Z",
   "retry_count": 1
 }
\ No newline at end of file
diff --git a/.omc/state/mission-state.json b/.omc/state/mission-state.json
index 5743f0a..be5a150 100644
--- a/.omc/state/mission-state.json
+++ b/.omc/state/mission-state.json
@@ -1,231 +1,331 @@
 {
-  "updatedAt": "2026-05-06T02:55:08.166Z",
+  "updatedAt": "2026-05-18T02:00:05.002Z",
   "missions": [
     {
-      "id": "session:94834f07-4375-45f9-b0d8-3e7a91395e8f:none",
+      "id": "session:e564571a-2c3e-4064-a3bb-d2ba1fb5c94e:none",
       "source": "session",
       "name": "none",
       "objective": "Session mission",
-      "createdAt": "2026-05-05T06:50:59.238Z",
-      "updatedAt": "2026-05-06T02:55:08.166Z",
+      "createdAt": "2026-05-16T02:09:52.147Z",
+      "updatedAt": "2026-05-18T02:00:05.002Z",
       "status": "done",
-      "workerCount": 7,
+      "workerCount": 1,
       "taskCounts": {
-        "total": 7,
+        "total": 1,
         "pending": 0,
         "blocked": 0,
         "inProgress": 0,
-        "completed": 7,
+        "completed": 1,
         "failed": 0
       },
       "agents": [
         {
-          "name": "fork:ade9261",
-          "role": "fork",
-          "ownership": "ade926181d79f7e22",
+          "name": "verification:a52ff9b",
+          "role": "verification",
+          "ownership": "a52ff9b6cf94795c4",
           "status": "done",
           "currentStep": null,
           "latestUpdate": "completed",
           "completedSummary": null,
-          "updatedAt": "2026-05-06T02:55:08.166Z"
-        },
-        {
-          "name": "fork:a4b5aad",
-          "role": "fork",
-          "ownership": "a4b5aad918d840cff",
-          "status": "done",
-          "currentStep": null,
-          "latestUpdate": "completed",
-          "completedSummary": null,
-          "updatedAt": "2026-05-05T07:03:18.034Z"
-        },
-        {
-          "name": "fork:a104ef8",
-          "role": "fork",
-          "ownership": "a104ef8dcedc591ee",
-          "status": "done",
-          "currentStep": null,
-          "latestUpdate": "completed",
-          "completedSummary": null,
-          "updatedAt": "2026-05-05T07:09:34.992Z"
-        },
-        {
-          "name": "fork:a5b9932",
-          "role": "fork",
-          "ownership": "a5b99323f956d7d4b",
-          "status": "done",
-          "currentStep": null,
-          "latestUpdate": "completed",
-          "completedSummary": null,
-          "updatedAt": "2026-05-05T12:29:50.254Z"
-        },
-        {
-          "name": "fork:a105a90",
-          "role": "fork",
-          "ownership": "a105a90f66e16a0fe",
-          "status": "done",
-          "currentStep": null,
-          "latestUpdate": "completed",
-          "completedSummary": null,
-          "updatedAt": "2026-05-05T12:29:59.631Z"
-        },
-        {
-          "name": "fork:a56af70",
-          "role": "fork",
-          "ownership": "a56af702c99ca12f9",
-          "status": "done",
-          "currentStep": null,
-          "latestUpdate": "completed",
-          "completedSummary": null,
-          "updatedAt": "2026-05-05T12:32:22.586Z"
-        },
-        {
-          "name": "Explore:ae3a10e",
-          "role": "Explore",
-          "ownership": "ae3a10eff79730260",
-          "status": "done",
-          "currentStep": null,
-          "latestUpdate": "completed",
-          "completedSummary": null,
-          "updatedAt": "2026-05-05T12:32:59.412Z"
+          "updatedAt": "2026-05-18T02:00:05.002Z"
         }
       ],
       "timeline": [
         {
-          "id": "session-stop:aa7b9c61b8d8fa05e:2026-05-05T12:31:57.422Z",
-          "at": "2026-05-05T12:31:57.422Z",
-          "kind": "completion",
-          "agent": "fork:ade9261",
-          "detail": "completed",
-          "sourceKey": "session-stop:aa7b9c61b8d8fa05e"
-        },
-        {
-          "id": "session-stop:aed75f8c5b76a5a06:2026-05-05T12:32:02.929Z",
-          "at": "2026-05-05T12:32:02.929Z",
-          "kind": "completion",
-          "agent": "fork:ade9261",
-          "detail": "completed",
-          "sourceKey": "session-stop:aed75f8c5b76a5a06"
-        },
-        {
-          "id": "session-start:ae3a10eff79730260:2026-05-05T12:32:07.063Z",
-          "at": "2026-05-05T12:32:07.063Z",
+          "id": "session-start:a52ff9b6cf94795c4:2026-05-16T02:09:52.147Z",
+          "at": "2026-05-16T02:09:52.147Z",
           "kind": "update",
-          "agent": "Explore:ae3a10e",
-          "detail": "started Explore:ae3a10e",
-          "sourceKey": "session-start:ae3a10eff79730260"
+          "agent": "verification:a52ff9b",
+          "detail": "started verification:a52ff9b",
+          "sourceKey": "session-start:a52ff9b6cf94795c4"
         },
         {
-          "id": "session-stop:a56af702c99ca12f9:2026-05-05T12:32:22.586Z",
-          "at": "2026-05-05T12:32:22.586Z",
+          "id": "session-stop:ab1174d3ce0e6376a:2026-05-16T02:10:26.984Z",
+          "at": "2026-05-16T02:10:26.984Z",
           "kind": "completion",
-          "agent": "fork:a56af70",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:a56af702c99ca12f9"
+          "sourceKey": "session-stop:ab1174d3ce0e6376a"
         },
         {
-          "id": "session-stop:ae9660bca33bb7788:2026-05-05T12:32:45.962Z",
-          "at": "2026-05-05T12:32:45.962Z",
+          "id": "session-stop:a326c52dfaacc2663:2026-05-16T02:11:05.215Z",
+          "at": "2026-05-16T02:11:05.215Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:ae9660bca33bb7788"
+          "sourceKey": "session-stop:a326c52dfaacc2663"
         },
         {
-          "id": "session-stop:ae3a10eff79730260:2026-05-05T12:32:59.412Z",
-          "at": "2026-05-05T12:32:59.412Z",
+          "id": "session-stop:a32446a1150ab0b9a:2026-05-16T02:11:40.694Z",
+          "at": "2026-05-16T02:11:40.694Z",
           "kind": "completion",
-          "agent": "Explore:ae3a10e",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:ae3a10eff79730260"
+          "sourceKey": "session-stop:a32446a1150ab0b9a"
         },
         {
-          "id": "session-stop:a0702f4cc61206062:2026-05-05T12:33:26.229Z",
-          "at": "2026-05-05T12:33:26.229Z",
+          "id": "session-stop:a52ff9b6cf94795c4:2026-05-16T02:11:44.727Z",
+          "at": "2026-05-16T02:11:44.727Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:a0702f4cc61206062"
+          "sourceKey": "session-stop:a52ff9b6cf94795c4"
         },
         {
-          "id": "session-stop:a7b8d11ec5adbf4dd:2026-05-05T12:34:01.769Z",
-          "at": "2026-05-05T12:34:01.769Z",
+          "id": "session-stop:a4424f0af5bcdfbb7:2026-05-16T02:12:32.776Z",
+          "at": "2026-05-16T02:12:32.776Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:a7b8d11ec5adbf4dd"
+          "sourceKey": "session-stop:a4424f0af5bcdfbb7"
         },
         {
-          "id": "session-stop:ae38803ce1dae768c:2026-05-05T12:34:57.078Z",
-          "at": "2026-05-05T12:34:57.078Z",
+          "id": "session-stop:a4e64c457512e19a0:2026-05-16T03:44:04.372Z",
+          "at": "2026-05-16T03:44:04.372Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:ae38803ce1dae768c"
+          "sourceKey": "session-stop:a4e64c457512e19a0"
         },
         {
-          "id": "session-stop:ac8967a5f624630b2:2026-05-05T13:12:36.634Z",
-          "at": "2026-05-05T13:12:36.634Z",
+          "id": "session-stop:a2c932d87c4d902c4:2026-05-16T03:46:03.749Z",
+          "at": "2026-05-16T03:46:03.749Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:ac8967a5f624630b2"
+          "sourceKey": "session-stop:a2c932d87c4d902c4"
         },
         {
-          "id": "session-stop:a74f3816c08a6f716:2026-05-05T13:21:12.812Z",
-          "at": "2026-05-05T13:21:12.812Z",
+          "id": "session-stop:a2e9f825aee21bb1d:2026-05-16T03:50:56.609Z",
+          "at": "2026-05-16T03:50:56.609Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:a74f3816c08a6f716"
+          "sourceKey": "session-stop:a2e9f825aee21bb1d"
         },
         {
-          "id": "session-stop:a8c023c9a30c271a0:2026-05-05T14:19:49.676Z",
-          "at": "2026-05-05T14:19:49.676Z",
+          "id": "session-stop:a8fb1c6790f526ace:2026-05-16T04:44:36.486Z",
+          "at": "2026-05-16T04:44:36.486Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:a8c023c9a30c271a0"
+          "sourceKey": "session-stop:a8fb1c6790f526ace"
         },
         {
-          "id": "session-stop:a106f58695dd12bb4:2026-05-05T15:37:58.942Z",
-          "at": "2026-05-05T15:37:58.942Z",
+          "id": "session-stop:a8a29cb24b3982a84:2026-05-16T04:48:05.848Z",
+          "at": "2026-05-16T04:48:05.848Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:a106f58695dd12bb4"
+          "sourceKey": "session-stop:a8a29cb24b3982a84"
         },
         {
-          "id": "session-stop:ae7178f1d50a672fe:2026-05-06T02:26:35.999Z",
-          "at": "2026-05-06T02:26:35.999Z",
+          "id": "session-stop:a4f35b214ca428a48:2026-05-16T04:52:38.351Z",
+          "at": "2026-05-16T04:52:38.351Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:ae7178f1d50a672fe"
+          "sourceKey": "session-stop:a4f35b214ca428a48"
         },
         {
-          "id": "session-stop:aacfce063672189e4:2026-05-06T02:51:18.289Z",
-          "at": "2026-05-06T02:51:18.289Z",
+          "id": "session-stop:a719f1de7ab6a0fb0:2026-05-16T04:57:57.367Z",
+          "at": "2026-05-16T04:57:57.367Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:aacfce063672189e4"
+          "sourceKey": "session-stop:a719f1de7ab6a0fb0"
         },
         {
-          "id": "session-stop:a55df33c9fc0b4fd3:2026-05-06T02:53:34.397Z",
-          "at": "2026-05-06T02:53:34.397Z",
+          "id": "session-stop:a13a58ec501ffc2b3:2026-05-16T05:10:32.559Z",
+          "at": "2026-05-16T05:10:32.559Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:a55df33c9fc0b4fd3"
+          "sourceKey": "session-stop:a13a58ec501ffc2b3"
         },
         {
-          "id": "session-stop:ad63ce0e956a53a8d:2026-05-06T02:55:08.166Z",
-          "at": "2026-05-06T02:55:08.166Z",
+          "id": "session-stop:ad43c537c8c993dc6:2026-05-16T05:11:56.308Z",
+          "at": "2026-05-16T05:11:56.308Z",
           "kind": "completion",
-          "agent": "fork:ade9261",
+          "agent": "verification:a52ff9b",
           "detail": "completed",
-          "sourceKey": "session-stop:ad63ce0e956a53a8d"
+          "sourceKey": "session-stop:ad43c537c8c993dc6"
+        },
+        {
+          "id": "session-stop:a7512397a57893c73:2026-05-16T05:20:51.866Z",
+          "at": "2026-05-16T05:20:51.866Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a7512397a57893c73"
+        },
+        {
+          "id": "session-stop:a9abb1a7ba9bc3b0f:2026-05-16T06:11:49.823Z",
+          "at": "2026-05-16T06:11:49.823Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a9abb1a7ba9bc3b0f"
+        },
+        {
+          "id": "session-stop:a1e9a14b490e8f03c:2026-05-16T06:12:27.391Z",
+          "at": "2026-05-16T06:12:27.391Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a1e9a14b490e8f03c"
+        },
+        {
+          "id": "session-stop:a3e3c98cf768d8aa0:2026-05-16T06:12:59.980Z",
+          "at": "2026-05-16T06:12:59.980Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a3e3c98cf768d8aa0"
+        },
+        {
+          "id": "session-stop:adbcc195235331236:2026-05-16T06:15:45.894Z",
+          "at": "2026-05-16T06:15:45.894Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:adbcc195235331236"
+        },
+        {
+          "id": "session-stop:a84e570ccb7854adb:2026-05-16T06:34:42.994Z",
+          "at": "2026-05-16T06:34:42.994Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a84e570ccb7854adb"
+        },
+        {
+          "id": "session-stop:a4ea252627eab107b:2026-05-16T06:40:17.399Z",
+          "at": "2026-05-16T06:40:17.399Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a4ea252627eab107b"
+        },
+        {
+          "id": "session-stop:a8762a81d3925b3c0:2026-05-16T06:45:23.942Z",
+          "at": "2026-05-16T06:45:23.942Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a8762a81d3925b3c0"
+        },
+        {
+          "id": "session-stop:a097b1be116b4a6da:2026-05-16T07:33:01.473Z",
+          "at": "2026-05-16T07:33:01.473Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a097b1be116b4a6da"
+        },
+        {
+          "id": "session-stop:ae95a8dd07cb77b4f:2026-05-16T07:37:15.058Z",
+          "at": "2026-05-16T07:37:15.058Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:ae95a8dd07cb77b4f"
+        },
+        {
+          "id": "session-stop:abf1acec7a6b7c672:2026-05-16T07:41:57.877Z",
+          "at": "2026-05-16T07:41:57.877Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:abf1acec7a6b7c672"
+        },
+        {
+          "id": "session-stop:a83c72d7cb732f30a:2026-05-16T08:00:50.958Z",
+          "at": "2026-05-16T08:00:50.958Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a83c72d7cb732f30a"
+        },
+        {
+          "id": "session-stop:a3e4b31964d5865f7:2026-05-16T08:02:01.794Z",
+          "at": "2026-05-16T08:02:01.794Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a3e4b31964d5865f7"
+        },
+        {
+          "id": "session-stop:a750dca8b7d4d9bb0:2026-05-16T08:13:02.231Z",
+          "at": "2026-05-16T08:13:02.231Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a750dca8b7d4d9bb0"
+        },
+        {
+          "id": "session-stop:a0e90972e5385031c:2026-05-16T08:47:33.581Z",
+          "at": "2026-05-16T08:47:33.581Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a0e90972e5385031c"
+        },
+        {
+          "id": "session-stop:acb1af1db3cee786f:2026-05-16T08:53:57.581Z",
+          "at": "2026-05-16T08:53:57.581Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:acb1af1db3cee786f"
+        },
+        {
+          "id": "session-stop:ae8e570fc783ce7da:2026-05-16T09:02:19.043Z",
+          "at": "2026-05-16T09:02:19.043Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:ae8e570fc783ce7da"
+        },
+        {
+          "id": "session-stop:af853e9569fe63346:2026-05-16T09:38:01.968Z",
+          "at": "2026-05-16T09:38:01.968Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:af853e9569fe63346"
+        },
+        {
+          "id": "session-stop:acaf2d63b8969c2b4:2026-05-17T01:59:59.881Z",
+          "at": "2026-05-17T01:59:59.881Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:acaf2d63b8969c2b4"
+        },
+        {
+          "id": "session-stop:a283fe1f1198a1755:2026-05-17T03:21:31.300Z",
+          "at": "2026-05-17T03:21:31.300Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a283fe1f1198a1755"
+        },
+        {
+          "id": "session-stop:af732d50454684b9c:2026-05-17T03:43:23.370Z",
+          "at": "2026-05-17T03:43:23.370Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:af732d50454684b9c"
+        },
+        {
+          "id": "session-stop:a30c4047709401e71:2026-05-18T02:00:05.002Z",
+          "at": "2026-05-18T02:00:05.002Z",
+          "kind": "completion",
+          "agent": "verification:a52ff9b",
+          "detail": "completed",
+          "sourceKey": "session-stop:a30c4047709401e71"
         }
       ]
     }
diff --git a/.omc/state/sessions/e564571a-2c3e-4064-a3bb-d2ba1fb5c94e/session-started.json b/.omc/state/sessions/e564571a-2c3e-4064-a3bb-d2ba1fb5c94e/session-started.json
new file mode 100644
index 0000000..4adc205
--- /dev/null
+++ b/.omc/state/sessions/e564571a-2c3e-4064-a3bb-d2ba1fb5c94e/session-started.json
@@ -0,0 +1,6 @@
+{
+  "session_id": "e564571a-2c3e-4064-a3bb-d2ba1fb5c94e",
+  "started_at": "2026-05-18T02:00:05.364Z",
+  "cwd": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site",
+  "pid": 83099
+}
\ No newline at end of file
diff --git a/.omc/state/subagent-tracking.json b/.omc/state/subagent-tracking.json
index 5c74049..8dbeb98 100644
--- a/.omc/state/subagent-tracking.json
+++ b/.omc/state/subagent-tracking.json
@@ -1,71 +1,17 @@
 {
   "agents": [
     {
-      "agent_id": "ade926181d79f7e22",
-      "agent_type": "fork",
-      "started_at": "2026-05-05T06:50:59.238Z",
+      "agent_id": "a52ff9b6cf94795c4",
+      "agent_type": "verification",
+      "started_at": "2026-05-16T02:09:52.147Z",
       "parent_mode": "none",
       "status": "completed",
-      "completed_at": "2026-05-05T07:01:55.583Z",
-      "duration_ms": 656345
-    },
-    {
-      "agent_id": "a4b5aad918d840cff",
-      "agent_type": "fork",
-      "started_at": "2026-05-05T06:50:59.279Z",
-      "parent_mode": "none",
-      "status": "completed",
-      "completed_at": "2026-05-05T07:03:18.034Z",
-      "duration_ms": 738755
-    },
-    {
-      "agent_id": "a104ef8dcedc591ee",
-      "agent_type": "fork",
-      "started_at": "2026-05-05T06:50:59.307Z",
-      "parent_mode": "none",
-      "status": "completed",
-      "completed_at": "2026-05-05T07:09:34.992Z",
-      "duration_ms": 1115685
-    },
-    {
-      "agent_id": "a5b99323f956d7d4b",
-      "agent_type": "fork",
-      "started_at": "2026-05-05T12:26:25.505Z",
-      "parent_mode": "none",
-      "status": "completed",
-      "completed_at": "2026-05-05T12:29:50.254Z",
-      "duration_ms": 204749
-    },
-    {
-      "agent_id": "a105a90f66e16a0fe",
-      "agent_type": "fork",
-      "started_at": "2026-05-05T12:26:25.534Z",
-      "parent_mode": "none",
-      "status": "completed",
-      "completed_at": "2026-05-05T12:29:59.631Z",
-      "duration_ms": 214097
-    },
-    {
-      "agent_id": "a56af702c99ca12f9",
-      "agent_type": "fork",
-      "started_at": "2026-05-05T12:26:25.560Z",
-      "parent_mode": "none",
-      "status": "completed",
-      "completed_at": "2026-05-05T12:32:22.586Z",
-      "duration_ms": 357026
-    },
-    {
-      "agent_id": "ae3a10eff79730260",
-      "agent_type": "Explore",
-      "started_at": "2026-05-05T12:32:07.063Z",
-      "parent_mode": "none",
-      "status": "completed",
-      "completed_at": "2026-05-05T12:32:59.412Z",
-      "duration_ms": 52349
+      "completed_at": "2026-05-16T02:11:44.727Z",
+      "duration_ms": 112580
     }
   ],
-  "total_spawned": 3,
-  "total_completed": 7,
+  "total_spawned": 1,
+  "total_completed": 1,
   "total_failed": 0,
-  "last_updated": "2026-05-06T02:55:08.267Z"
+  "last_updated": "2026-05-18T02:00:05.104Z"
 }
\ No newline at end of file
diff --git a/astro.config.mjs b/astro.config.mjs
index 51b7541..62a6d88 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,20 +1,27 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
-import node from "@astrojs/node";
 import react from "@astrojs/react";
+import mdx from "@astrojs/mdx";
+import node from "@astrojs/node";
 import emdash, { local } from "emdash/astro";
 import { sqlite } from "emdash/db";
 
 export default defineConfig({
   output: "server",
-  adapter: node({ mode: "standalone" }),
-  image: { layout: "constrained", responsiveStyles: true },
+  adapter: node({
+    mode: 'standalone'
+  }),
   integrations: [
     react(),
+    mdx(),
     emdash({
       database: sqlite({ url: "file:./data.db" }),
-      storage: local({ directory: "./uploads", baseUrl: "/_emdash/api/media/file" }),
+      storage: local({
+        directory: "./uploads",
+        baseUrl: "/_emdash/api/media/file",
+      }),
     }),
   ],
-  devToolbar: { enabled: false },
+  image: { layout: "constrained", responsiveStyles: true },
+  devToolbar: { enabled: true },
 });
\ No newline at end of file
diff --git a/count-cols.cjs b/count-cols.cjs
new file mode 100644
index 0000000..31ab589
--- /dev/null
+++ b/count-cols.cjs
@@ -0,0 +1,19 @@
+const seed = require('./seed/seed.json');
+const Database = require('better-sqlite3');
+const db = new Database('./data.db');
+
+const cols = ['title','subtitle','badge','hero_image',
+  'feature1_icon','feature1_title','feature1_desc',
+  'feature2_icon','feature2_title','feature2_desc',
+  'feature3_icon','feature3_title','feature3_desc',
+  'feature4_icon','feature4_title','feature4_desc',
+  'feature5_icon','feature5_title','feature5_desc',
+  'feature6_icon','feature6_title','feature6_desc'];
+
+const placeholders = cols.map(() => '?').join(', ');
+const sql = `INSERT OR REPLACE INTO ec_services (id, slug, status, ${cols.join(', ')}, created_at, updated_at, published_at) VALUES (?, ?, 'published', ${placeholders}, datetime('now'), datetime('now'), datetime('now'))`;
+
+console.log('Columns:', 3 + cols.length); // id, slug, status + cols
+console.log('SQL placeholders:', (sql.match(/\?/g) || []).length);
+
+db.close();
\ No newline at end of file
diff --git a/data.db b/data.db
index ce1b2bc..0089665 100644
Binary files a/data.db and b/data.db differ
diff --git a/data.db-shm b/data.db-shm
new file mode 100644
index 0000000..fe9ac28
Binary files /dev/null and b/data.db-shm differ
diff --git a/data.db-wal b/data.db-wal
new file mode 100644
index 0000000..e69de29
diff --git a/emdash-env.d.ts b/emdash-env.d.ts
index abb2626..68f6cdc 100644
--- a/emdash-env.d.ts
+++ b/emdash-env.d.ts
@@ -5,11 +5,15 @@
 
 import type { ContentBylineCredit, PortableTextBlock } from "emdash";
 
-export interface Page {
+export interface Blog {
   id: string;
   slug: string | null;
   status: string;
-  title: string;
+  title?: string;
+  excerpt?: string;
+  image?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
+  date?: string;
+  category?: string;
   content?: PortableTextBlock[];
   createdAt: Date;
   updatedAt: Date;
@@ -17,14 +21,83 @@ export interface Page {
   bylines?: ContentBylineCredit[];
 }
 
-export interface Post {
+export interface Faq {
   id: string;
   slug: string | null;
   status: string;
-  title: string;
-  featured_image?: { id: string; src?: string; alt?: string; width?: number; height?: number };
+  category?: string;
+  question?: string;
+  answer?: string;
+  createdAt: Date;
+  updatedAt: Date;
+  publishedAt: Date | null;
+  bylines?: ContentBylineCredit[];
+}
+
+export interface Page {
+  id: string;
+  slug: string | null;
+  status: string;
+  title?: string;
+  subtitle?: string;
+  badge?: string;
+  hero_image?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
+  theme?: string;
+  show_cta?: boolean;
+  cta_text?: string;
+  cta_link?: string;
+  variant?: string;
+  size?: string;
+  createdAt: Date;
+  updatedAt: Date;
+  publishedAt: Date | null;
+  bylines?: ContentBylineCredit[];
+}
+
+export interface Portfolio {
+  id: string;
+  slug: string | null;
+  status: string;
+  name?: string;
+  url?: string;
+  category?: string;
+  category_label?: string;
+  thumbnail?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
+  description?: string;
+  services?: unknown;
+  createdAt: Date;
+  updatedAt: Date;
+  publishedAt: Date | null;
+  bylines?: ContentBylineCredit[];
+}
+
+export interface Service {
+  id: string;
+  slug: string | null;
+  status: string;
+  title?: string;
+  subtitle?: string;
+  badge?: string;
+  hero_image?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
   content?: PortableTextBlock[];
-  excerpt?: string;
+  features?: unknown;
+  createdAt: Date;
+  updatedAt: Date;
+  publishedAt: Date | null;
+  bylines?: ContentBylineCredit[];
+}
+
+export interface Setting {
+  id: string;
+  slug: string | null;
+  status: string;
+  site_name?: string;
+  email?: string;
+  phone?: string;
+  address?: string;
+  facebook?: string;
+  line?: string;
+  linkedin?: string;
   createdAt: Date;
   updatedAt: Date;
   publishedAt: Date | null;
@@ -33,7 +106,11 @@ export interface Post {
 
 declare module "emdash" {
   interface EmDashCollections {
+    blog: Blog;
+    faq: Faq;
     pages: Page;
-    posts: Post;
+    portfolio: Portfolio;
+    services: Service;
+    settings: Setting;
   }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6d70ea6..82ceb4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,11 @@
       "name": "moreminimore-site",
       "version": "0.0.1",
       "dependencies": {
-        "@astrojs/node": "^10.0.6",
-        "@astrojs/react": "^5.0.4",
+        "@astrojs/mdx": "^5.0.6",
+        "@astrojs/node": "^10.1.1",
+        "@astrojs/react": "^5.0.5",
         "astro": "^6.2.2",
-        "emdash": "^0.9.0",
+        "emdash": "^0.12.0",
         "react": "^19.2.5",
         "react-dom": "^19.2.5"
       },
@@ -26,22 +27,22 @@
       "license": "MIT"
     },
     "node_modules/@astrojs/internal-helpers": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.9.0.tgz",
-      "integrity": "sha512-GdYkzR26re8izmyYlBqf4z2s7zNngmWLFuxw0UKiPNqHraZGS6GKWIwSHgS22RDlu2ePFJ8bzmpBcUszut/SDg==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/internal-helpers/-/internal-helpers-0.9.1.tgz",
+      "integrity": "sha512-1pWuARqYom/TzuU3+0ZugsTrKlUydWKuULmDqSMTuonY+9IRDUEGKX/8PXQ1nBxRq3w85uGtd9q9SXfqEldMIQ==",
       "license": "MIT",
       "dependencies": {
         "picomatch": "^4.0.4"
       }
     },
     "node_modules/@astrojs/markdown-remark": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-7.1.1.tgz",
-      "integrity": "sha512-C6e9BnLGlbdv6bV8MYGeHpHxsUHrCrB4OuRLqi5LI7oiBVcBcqfUN06zpwFQdHgV48QCCrMmLpyqBr7VqC+swA==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-7.1.2.tgz",
+      "integrity": "sha512-caXZ4Dc2St2dW8luEg22GlP0gupLdztCTQE4EzZOxW1pqWXz9mbeJEuHUkgDYcKWW8tjIHkydYDhWLVoxJ327Q==",
       "license": "MIT",
       "dependencies": {
-        "@astrojs/internal-helpers": "0.9.0",
-        "@astrojs/prism": "4.0.1",
+        "@astrojs/internal-helpers": "0.9.1",
+        "@astrojs/prism": "4.0.2",
         "github-slugger": "^2.0.0",
         "hast-util-from-html": "^2.0.3",
         "hast-util-to-text": "^4.0.2",
@@ -63,24 +64,51 @@
         "vfile": "^6.0.3"
       }
     },
-    "node_modules/@astrojs/node": {
-      "version": "10.0.6",
-      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-10.0.6.tgz",
-      "integrity": "sha512-e8JmaP4sGxqvdei14kmBzhAqgd5/L5MTExW3Hks5DOt9LDvGzlsFZwnXVXzWPVjW/PErl7t9uLg7xWhCqfkSrA==",
+    "node_modules/@astrojs/mdx": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@astrojs/mdx/-/mdx-5.0.6.tgz",
+      "integrity": "sha512-4dKe0ZMmqujofPNDHahzClkwinn9f8jHPcaXcgdGvPAlboD2mjzkUCofli2cBnxYAkdfhC6d50gBJ8i/cH8gHw==",
       "license": "MIT",
       "dependencies": {
-        "@astrojs/internal-helpers": "0.9.0",
-        "send": "^1.2.1",
-        "server-destroy": "^1.0.1"
+        "@astrojs/markdown-remark": "7.1.2",
+        "@mdx-js/mdx": "^3.1.1",
+        "acorn": "^8.16.0",
+        "es-module-lexer": "^2.0.0",
+        "estree-util-visit": "^2.0.0",
+        "hast-util-to-html": "^9.0.5",
+        "piccolore": "^0.1.3",
+        "rehype-raw": "^7.0.0",
+        "remark-gfm": "^4.0.1",
+        "remark-smartypants": "^3.0.2",
+        "source-map": "^0.7.6",
+        "unist-util-visit": "^5.1.0",
+        "vfile": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=22.12.0"
       },
       "peerDependencies": {
         "astro": "^6.0.0"
       }
     },
+    "node_modules/@astrojs/node": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/node/-/node-10.1.1.tgz",
+      "integrity": "sha512-kCRbxconkgPpY4vR0GS7exovWEiCbxXLarsp+JeKixyDNf+fKN6v7jXDL8KdQgrzjhy131Kvl+GGGX8jGd8adA==",
+      "license": "MIT",
+      "dependencies": {
+        "@astrojs/internal-helpers": "0.9.1",
+        "send": "^1.2.1",
+        "server-destroy": "^1.0.1"
+      },
+      "peerDependencies": {
+        "astro": "^6.3.0"
+      }
+    },
     "node_modules/@astrojs/prism": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-4.0.1.tgz",
-      "integrity": "sha512-nksZQVjlferuWzhPsBpQ1JE5XuKAf1id1/9Hj4a9KG4+ofrlzxUUwX4YGQF/SuDiuiGKEnzopGOt38F3AnVWsQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-4.0.2.tgz",
+      "integrity": "sha512-KTivpmnz6lDsC6o9H4+DNm2SrE/GHzw8cNAvEJwAvUT+eoaEnn/4NtbDNfRRaxaJHdp15gf+tfHAWiXR4wB3BA==",
       "license": "MIT",
       "dependencies": {
         "prismjs": "^1.30.0"
@@ -90,12 +118,12 @@
       }
     },
     "node_modules/@astrojs/react": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-5.0.4.tgz",
-      "integrity": "sha512-yDNE4VnKOzCjH9dCBi7pT4F6kpI3M9TkS+uxnCB0sGIS6t5vKonOY+Hs/UUnSajJGT5jeBRfpI9IQp+r/n1fBA==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@astrojs/react/-/react-5.0.5.tgz",
+      "integrity": "sha512-5jSFDqWqLdEyp7CEVD66A7AQEEuwLkCGR25NJ4FR5EjziZQqZTGc7hJOFZ97qb98BiU6vElrS70R8iI+HhufGQ==",
       "license": "MIT",
       "dependencies": {
-        "@astrojs/internal-helpers": "0.9.0",
+        "@astrojs/internal-helpers": "0.9.1",
         "@vitejs/plugin-react": "^5.2.0",
         "devalue": "^5.6.4",
         "ultrahtml": "^1.6.0",
@@ -112,13 +140,12 @@
       }
     },
     "node_modules/@astrojs/telemetry": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.1.tgz",
-      "integrity": "sha512-7fcIxXS9J4ls5tr8b3ww9rbAIz2+HrhNJYZdkAhhB4za/I5IZ/60g+Bs8q7zwG0tOIZfNB4JWhVJ1Qkl/OrNCw==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.2.tgz",
+      "integrity": "sha512-j8DNruA8ors99Al39RYZPJK4DC1bKkoNm93mAMuBhY9TCNC4R8n1q7ovFnJ5qhGh5Lsh7pa1gpQVpYpsJPeTHQ==",
       "license": "MIT",
       "dependencies": {
         "ci-info": "^4.4.0",
-        "dlv": "^1.1.3",
         "dset": "^3.1.4",
         "is-docker": "^4.0.0",
         "is-wsl": "^3.1.1",
@@ -618,16 +645,16 @@
       }
     },
     "node_modules/@emdash-cms/admin": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emdash-cms/admin/-/admin-0.9.0.tgz",
-      "integrity": "sha512-8fWW8RJHpJpfJSu2qejLtIXvFKAZCpZRBUf/qrtTngrzIboCerLWnYGJln+A1pn3o3S3e0KC9iU7qtJtLUyvjQ==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@emdash-cms/admin/-/admin-0.12.0.tgz",
+      "integrity": "sha512-ms1hkEpCmo2hedgq10mnGGTTMoTT/2dp8aY+Sa789zPVhqGZfKL3gMERmFqECzYG0CdG/iDOlUNtVtHZBwBASw==",
       "license": "MIT",
       "dependencies": {
         "@cloudflare/kumo": "^1.16.0",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
-        "@emdash-cms/blocks": "0.9.0",
+        "@emdash-cms/blocks": "0.12.0",
         "@floating-ui/react": "^0.27.16",
         "@lingui/core": "^5.9.4",
         "@lingui/react": "^5.9.4",
@@ -643,6 +670,10 @@
         "@tiptap/extension-link": "^3.20.0",
         "@tiptap/extension-node-range": "^3.20.0",
         "@tiptap/extension-placeholder": "^3.20.0",
+        "@tiptap/extension-table": "^3.20.0",
+        "@tiptap/extension-table-cell": "^3.20.0",
+        "@tiptap/extension-table-header": "^3.20.0",
+        "@tiptap/extension-table-row": "^3.20.0",
         "@tiptap/extension-text-align": "^3.20.0",
         "@tiptap/extension-typography": "^3.20.0",
         "@tiptap/extension-underline": "^3.20.0",
@@ -662,9 +693,9 @@
       }
     },
     "node_modules/@emdash-cms/auth": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emdash-cms/auth/-/auth-0.9.0.tgz",
-      "integrity": "sha512-f8QNUrCYfs3coWchoHH56rjGJ3p+9E7EANT8tLTbOtiq0+IfthywRMj65+mZ6Y9DV6yHR4hXmiby6dvy87KNqA==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@emdash-cms/auth/-/auth-0.12.0.tgz",
+      "integrity": "sha512-HR5OTQo51KKBshHQcPHbSOypVfjroMtOjm5nxLlQcONQ8eG4lfq90N5ptZV0iICWTofNDnmc3ur4Bq1pgDDQwQ==",
       "license": "MIT",
       "dependencies": {
         "@oslojs/crypto": "^1.0.1",
@@ -684,9 +715,9 @@
       }
     },
     "node_modules/@emdash-cms/blocks": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emdash-cms/blocks/-/blocks-0.9.0.tgz",
-      "integrity": "sha512-sAda97cluUgL7z+3U7TV2LcrvtDGnwYKXhTu7KwudelS+z6XdqhyYqzbS0xVnLCgD7zFHUvO5+dDfzTsFVwiQQ==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@emdash-cms/blocks/-/blocks-0.12.0.tgz",
+      "integrity": "sha512-JEJ2mcAwf9fHjuXKVxRxi0lvAXEGCq1D2KSBWMR1FENnLz0CjHhR48qL8QzcDOLn75H4ixTkjeN+twKBqT+fDw==",
       "license": "MIT",
       "dependencies": {
         "@cloudflare/kumo": "^1.10.0",
@@ -701,15 +732,21 @@
       }
     },
     "node_modules/@emdash-cms/gutenberg-to-portable-text": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emdash-cms/gutenberg-to-portable-text/-/gutenberg-to-portable-text-0.9.0.tgz",
-      "integrity": "sha512-W5f83AVE4SDZNF3b1js74C0xFNerqv3WsI07ouet6KciWSQHv5Kp4zN/yVrrOv8PUERefyMoklrbCznMB+jIsQ==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@emdash-cms/gutenberg-to-portable-text/-/gutenberg-to-portable-text-0.12.0.tgz",
+      "integrity": "sha512-n3EX4QurfxDPEZ9RDxEtj543pYIv+kydYdicgzoxMUFjdZVQdZ6IHBKt898ZfqO0cmrKauSTVWhZ0pkYELwxrg==",
       "license": "MIT",
       "dependencies": {
         "@wordpress/block-serialization-default-parser": "^5.13.0",
         "parse5": "^7.2.1"
       }
     },
+    "node_modules/@emdash-cms/plugin-types": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@emdash-cms/plugin-types/-/plugin-types-0.0.1.tgz",
+      "integrity": "sha512-0fEQBhD8iB4p6Zd4RsigoSDpZd06z9kHitT3k3AJk29K/A+MhpXapscYg+dgS91cMRrrO0kB/pV8xC7VTQ6jXQ==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
@@ -1986,6 +2023,52 @@
         }
       }
     },
+    "node_modules/@mdx-js/mdx": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.1.tgz",
+      "integrity": "sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdx": "^2.0.0",
+        "acorn": "^8.0.0",
+        "collapse-white-space": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-util-scope": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "markdown-extensions": "^2.0.0",
+        "recma-build-jsx": "^1.0.0",
+        "recma-jsx": "^1.0.0",
+        "recma-stringify": "^1.0.0",
+        "rehype-recma": "^1.0.0",
+        "remark-mdx": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "source-map": "^0.7.0",
+        "unified": "^11.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/@messageformat/parser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@messageformat/parser/-/parser-5.1.1.tgz",
@@ -2782,48 +2865,48 @@
       }
     },
     "node_modules/@tiptap/core": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.22.5.tgz",
-      "integrity": "sha512-L1lhWz6ujGny8LduTJ7MBWYhzigwOvfUJUrJ7IzOJSuy3+OAzisdGDD1GV7LEO/hU0Hr2Mkm1wajRIHExvS9HQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.23.4.tgz",
+      "integrity": "sha512-ni2LWE52bVeSt3L2HVBSmbBw+elc32ATej9C68EyKzN/8vR5ILxFn6RCdDTKm4asmwZyq2jys12dKmBdWMr9QA==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-blockquote": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.22.5.tgz",
-      "integrity": "sha512-ajyP5W8fG5Hrru47T/eF3xMKOpNvWofgNJqBTeNuGl02sYxsy9a4EunyFxudsaZP9WW3VOD4SaIWr5+MqpbnOQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.23.4.tgz",
+      "integrity": "sha512-7YjSibNlPcy9eGK+tHt5G/Njr7nPxl+rZ3rCC6TwtLIRLSHPnoGDsfFOgTPkXxaQcE1a/VQwemnYfWc3kdIjDQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-bold": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.22.5.tgz",
-      "integrity": "sha512-l/uDtpJISiFFyfctvnODNWBN/XPZI1jVZRacTRDDnSn8+x6KQ7G2qgFYueU7KvVJGDFVT39Iio56mcFRG/Pozg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.23.4.tgz",
+      "integrity": "sha512-3L9tnZ12i+98u5df2nV2zGu/sc3rhI87E3ocn1YYAO8PJUAgZnMwdet8JawCrS1uut5sRKlxo3SXEmdNfRVm/w==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-bubble-menu": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.22.5.tgz",
-      "integrity": "sha512-yrNlFQQJY5MmhBpmD8tnmaSmyUQrEvgyPKa3bzVeWEhDSG1CW4A0ZSMx3hrA9yFO0HWfw3IJmvSCycEZQBalpQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.23.4.tgz",
+      "integrity": "sha512-EPTpL/IFp/aTGZErBq/Mc3dKznj6G/qNEkVYWjueOn1oKApyT0P6WVHGvu/vpMdErhzmoGDuFPPGVS6T8Upx2Q==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2834,67 +2917,67 @@
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-bullet-list": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.22.5.tgz",
-      "integrity": "sha512-cf54fG9AybU8NgPMv1TOcoqAkELeRc/VpnSCt/rIJZphWQx9nsFmrtkrlCatrIcCaGtNZYwlHlMnC5LVVMu0uA==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.23.4.tgz",
+      "integrity": "sha512-mXB2KZOz1R+E6VNTZ3vzdAk7ZDGKjPmsJEZIQg1B5qRycTKg49/rCCkLA2QnqAwX6BzS3mLLH1RWE2W0oXD7vg==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extension-list": "3.22.5"
+        "@tiptap/extension-list": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-character-count": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-character-count/-/extension-character-count-3.22.5.tgz",
-      "integrity": "sha512-+5sfRKmDr9/4+EtmM+kI0fuSZa5gb3rLyQjElGY0MPr9y2ieQSw6r1PCMN8dXXKzEg5jTXzw003L2hK1H6LoFw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-character-count/-/extension-character-count-3.23.4.tgz",
+      "integrity": "sha512-oxaTE6iDBa+/Ftq95vMP6rTOynJSJ7sEZybBnmb1zn63+jpiz6ovDrY6Ox7uA8avvGdBOnh6uUUjGIymA4iiTg==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extensions": "3.22.5"
+        "@tiptap/extensions": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-code": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.22.5.tgz",
-      "integrity": "sha512-mwDNOJC9rYbDu/JcqrN4dbUQRklJU8Fuk2raxD/IvFw9qUIcPCmxQ2XT9UTKmZz/Ju7Kdy72fss6XpgWv6gLAQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.23.4.tgz",
+      "integrity": "sha512-C0TeRipMycUEBnV+Mzx6eLp/yZb6Vi/waP3Tkb0lO5/ikg7LWLB7AlmMunjIXEUcR/pJHID/aEh5PfJFpysUDg==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-code-block": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.22.5.tgz",
-      "integrity": "sha512-d123kCfLdJTi4fue1m0+TNFztDkmIRSZGZmGu6H9KqwG5Q7IzjT9o8lzRsz+pXxYqHvqgYmXoEpM6srbzXx/Ag==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.23.4.tgz",
+      "integrity": "sha512-UEU1w/85CSNKktbhESnIRmtjKcH7DeschReZA8err1wAnYLTKzid5ucnJSJ25iRg2V5Fnuws5gnPT5CVgdfXCQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-collaboration": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-collaboration/-/extension-collaboration-3.22.5.tgz",
-      "integrity": "sha512-3rax34HKSo8L5ihv5iGxISNBUIdVP0Fq9O6T/mq4kQOLhVhNbqwr9I/lWOvaz24nPE7u5Vkz0Ii3zWGlzxyPPA==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-collaboration/-/extension-collaboration-3.23.4.tgz",
+      "integrity": "sha512-28TJFayxCk7J9TmHBG4+8lVAz6YgyjN0RqzZueVeimWxSEgnTDGlkfHx6Ho5tOuyLwDa6SMBhN/6Q0iUMdnwMQ==",
       "license": "MIT",
       "peer": true,
       "funding": {
@@ -2902,29 +2985,29 @@
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5",
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4",
         "@tiptap/y-tiptap": "^3.0.2",
         "yjs": "^13"
       }
     },
     "node_modules/@tiptap/extension-document": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.22.5.tgz",
-      "integrity": "sha512-8NJERd+pCtvSuEP4C4WMGYmRRCV12ePZL7bC+QUdFlbdXg+kNZS0zZ7hh879tYA0Kidbi8rWWD1Tx+H2ezkmMw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.23.4.tgz",
+      "integrity": "sha512-YC4G6VkxT629rlqUTwD6XvOpxjvghn7fxrK4RbyKVJY2C6E1vgmX0won1Ast6v+qTE6iONOMS6f6VyPxSGjg4w==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-drag-handle": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-drag-handle/-/extension-drag-handle-3.22.5.tgz",
-      "integrity": "sha512-ClpgtNJZTUctQDB64KAZjhowZUK3QwFCiYJBXMg/fk9YzYHZ1L9qjzjqUcHiCsbQN9ILNZY1q9CQkce1LzKlrQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-drag-handle/-/extension-drag-handle-3.23.4.tgz",
+      "integrity": "sha512-ia027RBIdZIA9YBzt7Yuc4fGFAgdbxbVhrPqiDDJIN41IVsbb1PSQHDp8NVit50BNH1XVeAEB/E6WA/QLBoOgw==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13"
@@ -2934,47 +3017,47 @@
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/extension-collaboration": "3.22.5",
-        "@tiptap/extension-node-range": "3.22.5",
-        "@tiptap/pm": "3.22.5",
+        "@tiptap/core": "3.23.4",
+        "@tiptap/extension-collaboration": "3.23.4",
+        "@tiptap/extension-node-range": "3.23.4",
+        "@tiptap/pm": "3.23.4",
         "@tiptap/y-tiptap": "^3.0.2"
       }
     },
     "node_modules/@tiptap/extension-drag-handle-react": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-drag-handle-react/-/extension-drag-handle-react-3.22.5.tgz",
-      "integrity": "sha512-DAjwBdh6SSYr+c7lDA8D3SQrpGooO2qdOGkU83oIYgGrV0mAjiNhTa1/+S1J+rfBACiakhFn0rC+mELcECAnYQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-drag-handle-react/-/extension-drag-handle-react-3.23.4.tgz",
+      "integrity": "sha512-/enO9HmUgkXACRa0FxETkQeBrnv2WDoAHAXQ0LL25yIV7YW5tWIwXgDBpPd8G7YEk9R05XhFq1tN6NmU0JYIAA==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extension-drag-handle": "3.22.5",
-        "@tiptap/pm": "3.22.5",
-        "@tiptap/react": "3.22.5",
+        "@tiptap/extension-drag-handle": "3.23.4",
+        "@tiptap/pm": "3.23.4",
+        "@tiptap/react": "3.23.4",
         "react": "^16.8 || ^17 || ^18 || ^19",
         "react-dom": "^16.8 || ^17 || ^18 || ^19"
       }
     },
     "node_modules/@tiptap/extension-dropcursor": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.22.5.tgz",
-      "integrity": "sha512-Mp40DaFrY3sEUVtFqmxrR0BmU4G3k8GCYYNGqNa9OqWv7BrcFDC03V2n3okESDKt4MKkzhQQmypq+ouLy8dLfA==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.23.4.tgz",
+      "integrity": "sha512-ujJQUIENk0RwVFCh5g/TOSEv1a7Pnam/cjHmSUqHWUNZkYS9aOqjm+JfURJPCinRS2oHvo3AARul5mkKgDJYcA==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extensions": "3.22.5"
+        "@tiptap/extensions": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-floating-menu": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.22.5.tgz",
-      "integrity": "sha512-dhem4sTPhyQgQ+pFp2Oud4k4FSQz9PVMgeQAC9288SmGwxBkJNveDAw6sKTMrumqDvwkJrtslXIupq9TZYQnzg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.23.4.tgz",
+      "integrity": "sha512-eAc72bKM26yIPx0jsU8qdjE71vFNVu5R9jGbdItBMFc0SPLS4qY8g+8RJ+iWoLwbcSEpgooLS9D9sLfdAU+Tvw==",
       "license": "MIT",
       "optional": true,
       "funding": {
@@ -2983,295 +3066,348 @@
       },
       "peerDependencies": {
         "@floating-ui/dom": "^1.0.0",
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-focus": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-focus/-/extension-focus-3.22.5.tgz",
-      "integrity": "sha512-jvC70QAORx+CwIJExhKlAV7eWT8tAyyGVxyUVLgklmErN3oJAilcMD/r7jTlou3sZMBIrZ+fxFzMSCcoPuGjBg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-focus/-/extension-focus-3.23.4.tgz",
+      "integrity": "sha512-KwdH88ckBffeRWWwkDX5BmWqEfA6JGjDOvbeNJUeNg+4dFIOxczTmZ12MIw1Kk2LAISvA1PJ5gOu5pDqE9TfMA==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extensions": "3.22.5"
+        "@tiptap/extensions": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-gapcursor": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.22.5.tgz",
-      "integrity": "sha512-4WkMu7qqjbsm8hCQS+8X+la1wjriN0SKoRdvpfKH33qM50MB34tYJuGLAO+y7TTh4MMMco3AZCKPBL5JVMqNIg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.23.4.tgz",
+      "integrity": "sha512-RuyvOlIGP6UpVOc0Lw0L63jKLtYM49CNhPV2OMSfwwwbBZ3pJGos2/SqpYg71d3sn+qpsAopS4Pfr8iPZog73A==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extensions": "3.22.5"
+        "@tiptap/extensions": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-hard-break": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.22.5.tgz",
-      "integrity": "sha512-n0R2mUVYZU2AVbJhg/WcY9+zx690wVwvsItHJf0DrYbf1tCYHx+PRHUt/AoXk6u8BSmnkb8/FDziS8m3mjfpSg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.23.4.tgz",
+      "integrity": "sha512-ODlpZCi7n136BH9luM09EFL8Pg+bbRCd0tzCQM5BKMXRkLitYZA8Gl/f5DLmGJ50wzFsDPXK2Br2g9UvZK7COg==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-heading": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.22.5.tgz",
-      "integrity": "sha512-hjyEG4947PAhMBfP1G6B0QAh6+y9mp2C5BQmNjprA05/lQzDAT7KFZzNh8ZVp3ol6aICKq/N1gFOW9Dc/9FUOw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.23.4.tgz",
+      "integrity": "sha512-8W9Hqi0J69Xbqg08nPf4xRMJXMccaKFAgUE1tvy5PAWJSQxOMwkKQXgZXxwe+80sOMUnV8qveBqUy/ODMPgAxQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-horizontal-rule": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.22.5.tgz",
-      "integrity": "sha512-vUV0/ugIbXOc8SJib0h8UMhgcqZXWu/dkEhlswZN4VVven1o5enkfxEiDw+OyIJHi5rUkrdhsQ/KTxG/Xb7X8A==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.23.4.tgz",
+      "integrity": "sha512-EA4kK8ywZ4dQNOdxeZbplmDDs5T5LjMgHpqxRwukj9wwKiILOK5E3fcKm1fCKh9Q02w96jax6YVccHwmgJP3sQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-image": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-3.22.5.tgz",
-      "integrity": "sha512-ezMzA6w6UsPesQp6fxTQojI/IkGJLmkwR/VGTimva7sudP3HdSW8k3SGBkjfvp0L2xqUrC/l4nWOchu01A/xtQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-3.23.4.tgz",
+      "integrity": "sha512-qandp5HLRl+n8D61+LCT67qtb1uSKffyEGD0fVTkg/RfbyFsJvCDFbjVEoiIG8JOx8O5DehgrDCvS35QOWgr2A==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-italic": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.22.5.tgz",
-      "integrity": "sha512-4T8baSiLkeIymTgEwirxDFt5YgYofkP3m1+MGYdGy2HKcOK+1vpvlPhEO1X5qtZngtJW5S4+njKjinRg52A4PA==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.23.4.tgz",
+      "integrity": "sha512-jUAHi+HZlg47BzgVIy6y/UH5vev7vPQ95jddhB5K3hC122kvWFMXlken7UOnqzbxNcHs2+4Oi/ZJirYMpT4P5w==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-link": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.22.5.tgz",
-      "integrity": "sha512-d671MvF3GPKoS2OVxjIlQ7hIE7MS3hREdR+d4cvnnoiLLD+ZJ6KgDnxmWqF0a1s4qxLWK2KxKRSOIfYGE31QWQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.23.4.tgz",
+      "integrity": "sha512-XjxltY7MomwfTs6jmN6Bw5bb/upb34lpyqv2RiXppFTK25Br7ipksRjUpWpB4/csZeg30qwrLGVKxCol38ffrw==",
       "license": "MIT",
       "dependencies": {
-        "linkifyjs": "^4.3.2"
+        "linkifyjs": "^4.3.3"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-list": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.22.5.tgz",
-      "integrity": "sha512-cVO3ZHCgxAWZ4zrFSs81FO2nyCk1wb2EHkpLpW98FzbJLkN9rDkazhW99P3HRWy/CvUldOT+8ecI1YrQtBojMg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.23.4.tgz",
+      "integrity": "sha512-yuauDm6qW/7q+ZO0YJBKQEGdnUm6DDTJM8AMp9bMZrT4jRf/zyUtNcZ91QEfFvBcyVuI+10PIOXtNPevhQ741Q==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-list-item": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.22.5.tgz",
-      "integrity": "sha512-W7uTmyKLhlsvuTPLv+8WwnsY+mlikBFIoLSvVcBaFt4MwpsZ+DeB6KQg02Y7tbtaAnG7rXu9Fvw2QORh2P728A==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.23.4.tgz",
+      "integrity": "sha512-Q/JXosShD5oyDwukE6igdrZD2lb0ZgyoQTHYchk0pzU4frClFbn3RI1wKP+XeqKLhdO6KH2WZ9rERGH7PtDi7Q==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extension-list": "3.22.5"
+        "@tiptap/extension-list": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-list-keymap": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.22.5.tgz",
-      "integrity": "sha512-cGUnxJ0y515e1bVHNjUmbx7oWHoEon59w6BA5N2KwV9iW2mZZchlTX4yxJSOX+ixeVRChsa7YwC3Z1jUZ6AMEg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.23.4.tgz",
+      "integrity": "sha512-9FezifCfuoc0o+5K6l4QNOOfelqxnDGg/f9oL1D/LFZPC54bPxpWWft9QCWOqyqZgyLCLjbCjciAlbgkrFUmmw==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extension-list": "3.22.5"
+        "@tiptap/extension-list": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-node-range": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-node-range/-/extension-node-range-3.22.5.tgz",
-      "integrity": "sha512-1C00Dur+8KNjcKcI6nuYY4RFOrp/1YUFR04Wj0VZVc8L8l4jCXS+JY+aYtTwKjxcXIH3UzplfwoRZj9thn98pg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-node-range/-/extension-node-range-3.23.4.tgz",
+      "integrity": "sha512-wmJrIT2Ng4TP4HniA0+WCNtqL09ZBZYd9bSnyDfZiz5phEcnqfCTBGpPXiA+jTjxZp/ZrJPFTjgQPevNQIAa9g==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-ordered-list": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.22.5.tgz",
-      "integrity": "sha512-OXdh4k4CNrukwiSdWdEQ49uvgnqvR0Z9aNSP4HI5/kZQ/Te1NtRtYCpUrzWyO/7CtjcCisXHti0o9C/TV8YMbQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.23.4.tgz",
+      "integrity": "sha512-+3ofyssYnOTa1+nFWEmCAY1ngn8nAV1xo25JnNNC87NMU9WkSgr93jB7/uUJP0uui1C2dBLlaup3XXm108yarw==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extension-list": "3.22.5"
+        "@tiptap/extension-list": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-paragraph": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.22.5.tgz",
-      "integrity": "sha512-52KCto4+XKpnBWpIufspWLyq4UWxAWC72ANPdGuIhbi72NRTabiTbTVN40uwGSPkyakeESG0/vKdWJCVvB4f0g==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.23.4.tgz",
+      "integrity": "sha512-KbhXjCFzWphvFn5VU7E4dtmYDm+bssI1i0+CnXPWCXkjdaaX88ck68Xp1fKz8/bbI/CqlgiNDO/3TvqgtZ6woQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-placeholder": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-3.22.5.tgz",
-      "integrity": "sha512-MZAohQ3FCS763BkhGXgaWRya6WruZjwRwEAkXP8vkxbERzl2OJRjniS4uXCWzAlRb3ttE103SnY7LMdM8FvsXw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-3.23.4.tgz",
+      "integrity": "sha512-yHtAZkFR9M2AQmCi555w4ns1BBCqwRyYDYMtd10DBvqPX7T3TmGerPdUfI6sLr74GxnZ5zHOnOYdwAbeG5JzNw==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/extensions": "3.22.5"
+        "@tiptap/extensions": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-strike": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.22.5.tgz",
-      "integrity": "sha512-42WrrFK5gOom/0znH85x12Mw5IQ/6O6DWdyUWoRIrNA/qJpuHtU8oVU+bIgU2tuomMGHruRjIzgBQv5sBjEtww==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.23.4.tgz",
+      "integrity": "sha512-Vnq5vW801zPbu1LtKeA5k4R241jY+hRjXeijYwIPxy15KzIiipY12518HiCf6/8kkRbMxgOfdYg9X4BRV3HV3g==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-table": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-3.23.4.tgz",
+      "integrity": "sha512-TRh6JMTRYXCWpwavGt3aAHH2f51ZzkhurfW3XvrURG3It8MvfuuY1xB1xba1ss5c0QLWlrKx6GVaSXrUCdFLlg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-table-cell": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-3.23.4.tgz",
+      "integrity": "sha512-GmLLF9w7ExXhieshDnwC2U4kE8EM3TliDnHYX7uXOnSptWqASku6hOFw0f1AT5MDJog9NPzRo+adGVRHS9kjTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-table": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-table-header": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-3.23.4.tgz",
+      "integrity": "sha512-5IXIHjpCpuZ06SmOoVsnK4VoOhd/G6yLiDtP3Azcf+KUI5539ryWE9I9EAqgalV2HcJMMYX9MQpl5WReHRGETw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-table": "3.23.4"
+      }
+    },
+    "node_modules/@tiptap/extension-table-row": {
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-3.23.4.tgz",
+      "integrity": "sha512-kqQt0I4cm2E+NNLpZ5rtox53Vgzyy19ZczvJ66Ao6BZkXXKqYXSRJc4q0jGNPX8hHhvHBpHmffcz5hdT/1XtNQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-table": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-text": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.22.5.tgz",
-      "integrity": "sha512-bzpDOdAEo1JeoVZDIyV0oY0jGXkEG+AzF70SzHoRSjOvFDtKWunyXf9eO1OnOr2/fmMcckT2qwUBNBMQplWBzw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.23.4.tgz",
+      "integrity": "sha512-q9kxver/MR18p66aWZHSPycnr9hcBFyVGeGj8gf+BQCzn5hpvtSYTfLvk1nq8GFhygdQ9/e3f7B5ovrm/jnpvw==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-text-align": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-3.22.5.tgz",
-      "integrity": "sha512-LNUinhsZJC+/Vm7ugtghSjqlO64FQuww8oJkHq54Oh135fJ+kY2yBRakYFeH0P0gl4VPJH13AUetLF696CM2UQ==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-3.23.4.tgz",
+      "integrity": "sha512-A3WVhAs6YFlkfa7hNgps21QLfitNZyWFBBepQusX35sz6BlaHSy9GVrTR/JjGwGIxhNoqU2SGApvf2xTuX89gQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-typography": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-typography/-/extension-typography-3.22.5.tgz",
-      "integrity": "sha512-FbBoo7hZNV2q/wa0yL2hVyVjmn0OEA5vzzSep0ExFdOjmPYe+5Us1bsf0G3lutYS9rQfgQrcXBvcGJozU+Agyg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-typography/-/extension-typography-3.23.4.tgz",
+      "integrity": "sha512-G6FMEzSvbOoGnmBiaBWaK2r4yT0kv/cNKy3T//Rb27KOwibcfPqhjKBWnd+LqpXG1P66QZSM45XlWDhTzYpeIQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extension-underline": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.22.5.tgz",
-      "integrity": "sha512-9ut09rJD0iEbS6sk7yd2j6IwuFDLTNmDEGTDLodvqAfi+bq7ddsTDv0YviXoZaA9sdHAdTEVr2ITy2m6WK5jpA==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.23.4.tgz",
+      "integrity": "sha512-F1ocPT10LV+seky25R1TMCRdc/Iof99jLcDSYDGr6mNEDY4ct2RvOeSM8aDdYq6CkH+vXt3i3JDeRwV23KzswQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5"
+        "@tiptap/core": "3.23.4"
       }
     },
     "node_modules/@tiptap/extensions": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.22.5.tgz",
-      "integrity": "sha512-Ifg4MzKCj3uRqe3ieTwYnomu2y4p7EXr2avVSKZYfh12i2dyWe2Gkn1KuZDREANVE+gHqFlQjJRYzhJFwzSCrg==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.23.4.tgz",
+      "integrity": "sha512-SlGPXauW8iKWG7wwuwC/0y/smLImp0h6GBIGgNnTBgIP/ThXQnjLMSZH0mW/REO87dQxkku01V3ARRywi+juhg==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/pm": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.22.5.tgz",
-      "integrity": "sha512-Cr9Mv4igxvI2tKMiahw48sZxva3PfDzypErH8IB82N+9qa9n9ygVMt0BOaDg53hLKxEEVeYr2S/wCcJIVFgBTw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.23.4.tgz",
+      "integrity": "sha512-+C5ngcoza47n3MjtjVBqBEBICPC0McdbwzJ+X6SSCviCLoqnSYanv5mIX9HWG0Q4fJ4BkdNM3VibZUxQaTbKyQ==",
       "license": "MIT",
       "dependencies": {
         "prosemirror-changeset": "^2.3.0",
@@ -3293,9 +3429,9 @@
       }
     },
     "node_modules/@tiptap/react": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.22.5.tgz",
-      "integrity": "sha512-36WHEs+vPmB//V1ff7Ujcnpz7Ey5g8lhpI/0+hoanSbdiPMTQ7qZVWwMovIkMKDlqWVp2fxBgeYM1861jyFzTw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.23.4.tgz",
+      "integrity": "sha512-mb5aIY9PuLreOVLExqs+8BAI20I/8+jCUBfEIqheuFY2GRRuBiwczejSlYuADfVDBbPVN5uPw4UMADCaH5wueQ==",
       "license": "MIT",
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
@@ -3307,12 +3443,12 @@
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "optionalDependencies": {
-        "@tiptap/extension-bubble-menu": "^3.22.5",
-        "@tiptap/extension-floating-menu": "^3.22.5"
+        "@tiptap/extension-bubble-menu": "^3.23.4",
+        "@tiptap/extension-floating-menu": "^3.23.4"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5",
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -3320,35 +3456,35 @@
       }
     },
     "node_modules/@tiptap/starter-kit": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.22.5.tgz",
-      "integrity": "sha512-LZ/LYbwH6rnDi5DnRyagkuNsYAVyhM+yJvvz+ZuYA0JkPiTXJV86J5PWSKew8M0gVfMHcNVtKjfQCvViFCeIgw==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.23.4.tgz",
+      "integrity": "sha512-3VhU+NO6/ec9DMj/5Ej0nzARSq42cXnqW+QHCmTL3FNXkXQz+tw1KlfruT5GGJ3M0RssjWjRC0a39N/4S3qxeA==",
       "license": "MIT",
       "dependencies": {
-        "@tiptap/core": "^3.22.5",
-        "@tiptap/extension-blockquote": "^3.22.5",
-        "@tiptap/extension-bold": "^3.22.5",
-        "@tiptap/extension-bullet-list": "^3.22.5",
-        "@tiptap/extension-code": "^3.22.5",
-        "@tiptap/extension-code-block": "^3.22.5",
-        "@tiptap/extension-document": "^3.22.5",
-        "@tiptap/extension-dropcursor": "^3.22.5",
-        "@tiptap/extension-gapcursor": "^3.22.5",
-        "@tiptap/extension-hard-break": "^3.22.5",
-        "@tiptap/extension-heading": "^3.22.5",
-        "@tiptap/extension-horizontal-rule": "^3.22.5",
-        "@tiptap/extension-italic": "^3.22.5",
-        "@tiptap/extension-link": "^3.22.5",
-        "@tiptap/extension-list": "^3.22.5",
-        "@tiptap/extension-list-item": "^3.22.5",
-        "@tiptap/extension-list-keymap": "^3.22.5",
-        "@tiptap/extension-ordered-list": "^3.22.5",
-        "@tiptap/extension-paragraph": "^3.22.5",
-        "@tiptap/extension-strike": "^3.22.5",
-        "@tiptap/extension-text": "^3.22.5",
-        "@tiptap/extension-underline": "^3.22.5",
-        "@tiptap/extensions": "^3.22.5",
-        "@tiptap/pm": "^3.22.5"
+        "@tiptap/core": "^3.23.4",
+        "@tiptap/extension-blockquote": "^3.23.4",
+        "@tiptap/extension-bold": "^3.23.4",
+        "@tiptap/extension-bullet-list": "^3.23.4",
+        "@tiptap/extension-code": "^3.23.4",
+        "@tiptap/extension-code-block": "^3.23.4",
+        "@tiptap/extension-document": "^3.23.4",
+        "@tiptap/extension-dropcursor": "^3.23.4",
+        "@tiptap/extension-gapcursor": "^3.23.4",
+        "@tiptap/extension-hard-break": "^3.23.4",
+        "@tiptap/extension-heading": "^3.23.4",
+        "@tiptap/extension-horizontal-rule": "^3.23.4",
+        "@tiptap/extension-italic": "^3.23.4",
+        "@tiptap/extension-link": "^3.23.4",
+        "@tiptap/extension-list": "^3.23.4",
+        "@tiptap/extension-list-item": "^3.23.4",
+        "@tiptap/extension-list-keymap": "^3.23.4",
+        "@tiptap/extension-ordered-list": "^3.23.4",
+        "@tiptap/extension-paragraph": "^3.23.4",
+        "@tiptap/extension-strike": "^3.23.4",
+        "@tiptap/extension-text": "^3.23.4",
+        "@tiptap/extension-underline": "^3.23.4",
+        "@tiptap/extensions": "^3.23.4",
+        "@tiptap/pm": "^3.23.4"
       },
       "funding": {
         "type": "github",
@@ -3356,17 +3492,17 @@
       }
     },
     "node_modules/@tiptap/suggestion": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-3.22.5.tgz",
-      "integrity": "sha512-Uv79Ht/o4mx1GWIT65jeQTE67LMrA+K7d8p51XOe9PJw0H0fS3iCdeMJ8tAo3h6QrMJFejdsB7z8jJL9UbAnhA==",
+      "version": "3.23.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-3.23.4.tgz",
+      "integrity": "sha512-KvrHKQcGpEKPPuetH2N4K21kA7hc31n5WDzw3FM+fNpMKdJOToYoNZzS9rmuBBHmNZ9wyK2sWmzi09enmv6wbg==",
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/ueberdosis"
       },
       "peerDependencies": {
-        "@tiptap/core": "3.22.5",
-        "@tiptap/pm": "3.22.5"
+        "@tiptap/core": "3.23.4",
+        "@tiptap/pm": "3.23.4"
       }
     },
     "node_modules/@tiptap/y-tiptap": {
@@ -3446,6 +3582,15 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -3464,6 +3609,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdx": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
+      "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==",
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -3480,13 +3631,13 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "25.6.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
-      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
+      "version": "25.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.0.tgz",
+      "integrity": "sha512-AOQwYUNolgy3VosiRqXrACUXTN8nJUtPl7FJXMqZVyxiiCLhQuG3jXKvCS1ALr+Y2OmZhzzLVlYPEqJaiqkaJQ==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "undici-types": "~7.19.0"
+        "undici-types": ">=7.24.0 <7.24.7"
       }
     },
     "node_modules/@types/react": {
@@ -3574,9 +3725,9 @@
       }
     },
     "node_modules/@wordpress/block-serialization-default-parser": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@wordpress/block-serialization-default-parser/-/block-serialization-default-parser-5.45.0.tgz",
-      "integrity": "sha512-48Pj6o9iDGf7fCprXoXD8nvDgBigrQ6uZEb+VMrcvabn59ymKHzx/Ex9O3mpp7Ft2NMJRGpO3w0mNocoDfCksA==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/@wordpress/block-serialization-default-parser/-/block-serialization-default-parser-5.46.0.tgz",
+      "integrity": "sha512-j9AWXtuBbjntWWapDTZVyLmRVYOA1me3lqR+ugkN54HvNiyQaDw0tt6JfJYGFTWhJ8peU90G2TO+IiFf6YDKQQ==",
       "license": "GPL-2.0-or-later",
       "engines": {
         "node": ">=18.12.0",
@@ -3596,6 +3747,27 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
@@ -3690,16 +3862,25 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/astring": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz",
+      "integrity": "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==",
+      "license": "MIT",
+      "bin": {
+        "astring": "bin/astring"
+      }
+    },
     "node_modules/astro": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-6.2.2.tgz",
-      "integrity": "sha512-zkne2lZU+iTZPBK8F4gbMfrw5f11bT4VXiBxcdFHcPvYyH+Hox7V1sZu97RDpvwmHi+wQ0efKv89KY5744a0jQ==",
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-6.3.5.tgz",
+      "integrity": "sha512-gU+4KedkbTuVgz7YoVAN+9Ftnq0GaYwejxK2NbqDzB0M9dWd0f3kXZBuaM9hzbchRFoRAJfJjFtdX9LK6Ir7ZA==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^4.0.0",
-        "@astrojs/internal-helpers": "0.9.0",
-        "@astrojs/markdown-remark": "7.1.1",
-        "@astrojs/telemetry": "3.3.1",
+        "@astrojs/internal-helpers": "0.9.1",
+        "@astrojs/markdown-remark": "7.1.2",
+        "@astrojs/telemetry": "3.3.2",
         "@capsizecss/unpack": "^4.0.0",
         "@clack/prompts": "^1.1.0",
         "@oslojs/encoding": "^1.1.0",
@@ -3854,9 +4035,9 @@
       }
     },
     "node_modules/better-sqlite3": {
-      "version": "12.9.0",
-      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.9.0.tgz",
-      "integrity": "sha512-wqUv4Gm3toFpHDQmaKD4QhZm3g1DjUBI0yzS4UBl6lElUmXFYdTQmmEDpAFa5o8FiFiymURypEnfVHzILKaxqQ==",
+      "version": "12.10.0",
+      "resolved": "https://registry.npmjs.org/better-sqlite3/-/better-sqlite3-12.10.0.tgz",
+      "integrity": "sha512-CyzaZRQKyHkB2ZInfTTl2nvT33EbDpjkLEbE8/Zck3Ll6O0qqvuGdrJ45HgtH+HykRg88ITY3AdreBGN70aBSQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -3864,7 +4045,7 @@
         "prebuild-install": "^7.1.1"
       },
       "engines": {
-        "node": "20.x || 22.x || 23.x || 24.x || 25.x"
+        "node": "20.x || 22.x || 23.x || 24.x || 25.x || 26.x"
       }
     },
     "node_modules/bindings": {
@@ -4078,6 +4259,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -4144,6 +4335,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/collapse-white-space": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+      "integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -4388,9 +4589,9 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
-      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.2.1.tgz",
+      "integrity": "sha512-37RhSdxaG1suen6VDCza6rNrQfooyQh57HFVPwQGEq2QWliVLzPQZ8Oa017weOu+HZCnzI7N3Pf/wyoBKfEqrA==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4403,6 +4604,12 @@
       "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.20",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz",
+      "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -4533,12 +4740,6 @@
         "node": ">=0.3.1"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "license": "MIT"
-    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -4593,9 +4794,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.2.tgz",
-      "integrity": "sha512-lHeS9SA/IKeIFFyYciHBr2n0v1VMPlSj843HdLOwjb2OxNwdq9Xykxqhk+FE42MzAdHvInbAolSE4mhahPpjXA==",
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.5.tgz",
+      "integrity": "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -4667,14 +4868,15 @@
       "license": "ISC"
     },
     "node_modules/emdash": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/emdash/-/emdash-0.9.0.tgz",
-      "integrity": "sha512-GsNKpWPIkidjby4wTnFB+jcf8iswhejZVeMjNkZ9pl+YCfl12sSGC7BqPXmqXL6VoPJ0BiLqacFWya0yC0oHHg==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/emdash/-/emdash-0.12.0.tgz",
+      "integrity": "sha512-LsCq7HeR8xHJ6CLJh/NSOKWgP8N+HXR6VRz+TmLdgbOtA/thnXstHw95BCvF3wiDrcwjbL9FQPJIB/fjLFFY0Q==",
       "license": "MIT",
       "dependencies": {
-        "@emdash-cms/admin": "0.9.0",
-        "@emdash-cms/auth": "0.9.0",
-        "@emdash-cms/gutenberg-to-portable-text": "0.9.0",
+        "@emdash-cms/admin": "0.12.0",
+        "@emdash-cms/auth": "0.12.0",
+        "@emdash-cms/gutenberg-to-portable-text": "0.12.0",
+        "@emdash-cms/plugin-types": "0.0.1",
         "@floating-ui/react": "^0.27.16",
         "@modelcontextprotocol/sdk": "^1.26.0",
         "@oslojs/crypto": "^1.0.1",
@@ -4722,7 +4924,7 @@
       },
       "peerDependencies": {
         "@astrojs/react": ">=5.0.0-beta.0",
-        "@emdash-cms/auth-atproto": ">=0.2.1",
+        "@emdash-cms/auth-atproto": ">=0.2.5",
         "astro": ">=6.0.0-beta.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0"
@@ -4799,6 +5001,38 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/esast-util-from-estree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/esast-util-from-estree/-/esast-util-from-estree-2.0.0.tgz",
+      "integrity": "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-visit": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/esast-util-from-js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esast-util-from-js/-/esast-util-from-js-2.0.1.tgz",
+      "integrity": "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "acorn": "^8.0.0",
+        "esast-util-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.27.7",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
@@ -4867,6 +5101,97 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/estree-util-attach-comments": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-3.0.0.tgz",
+      "integrity": "sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-build-jsx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-3.0.1.tgz",
+      "integrity": "sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-walker": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-build-jsx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-scope": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-scope/-/estree-util-scope-1.0.0.tgz",
+      "integrity": "sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-to-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-2.0.0.tgz",
+      "integrity": "sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "astring": "^1.8.0",
+        "source-map": "^0.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-visit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
+      "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -4962,12 +5287,12 @@
       }
     },
     "node_modules/express-rate-limit": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.5.0.tgz",
-      "integrity": "sha512-XKhFohWaSBdVJNTi5TaHziqnPkv04I9UQV6q1Wy7Ui6GGQZVW12ojDFwqer14EvCXxjvPG0CyWXx7cAXpALB4Q==",
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.5.2.tgz",
+      "integrity": "sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==",
       "license": "MIT",
       "dependencies": {
-        "ip-address": "10.1.0"
+        "ip-address": "^10.2.0"
       },
       "engines": {
         "node": ">= 16"
@@ -5170,13 +5495,13 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.38.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
-      "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==",
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.39.0.tgz",
+      "integrity": "sha512-+vnLfzrv0MzjLzNl+nvNvR7jdg3q4cxxjz/YvzfifHl0TREtL00cs1RoMTxs+1PzLiEqZGV6gYsBY0oEAYZ24w==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.38.0",
-        "motion-utils": "^12.36.0",
+        "motion-dom": "^12.39.0",
+        "motion-utils": "^12.39.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -5449,6 +5774,34 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-estree": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz",
+      "integrity": "sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-attach-comments": "^3.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-html": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
@@ -5472,6 +5825,33 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-parse5": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
@@ -5538,9 +5918,9 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.12.17",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.17.tgz",
-      "integrity": "sha512-FbJJNb/XgX7YW0hX/V8w5oYLztKEsRLykCMZWt1WdLtsfjzMvmoqWBA4H4t5norinq8/rh20oiZYr+WSl4UzAQ==",
+      "version": "4.12.19",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.19.tgz",
+      "integrity": "sha512-xa3eYXYXx68XTT4hZ7dRzsXBhaq85ToSrlUJNoR0gwz/1Ap/CNwX47wfvV7pc/xWhjKVVkLT7zBJy8chhNguqQ==",
       "license": "MIT",
       "engines": {
         "node": ">=16.9.0"
@@ -5679,10 +6059,16 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
     "node_modules/ip-address": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
-      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
+      "integrity": "sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==",
       "license": "MIT",
       "engines": {
         "node": ">= 12"
@@ -5706,6 +6092,40 @@
         "url": "https://github.com/sponsors/brc-dd"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-docker": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-4.0.0.tgz",
@@ -5721,6 +6141,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -5919,6 +6349,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/launder": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/launder/-/launder-1.7.1.tgz",
+      "integrity": "sha512-mU6WRz5EusL9ZZuiZ5SO4Y6C0P9PAUR9iwdb6bzj4KDihm28DiHFw+/yk9DBH4f+Pv1wuzQ4e2jV3oQ7mkIqvw==",
+      "license": "MIT",
+      "dependencies": {
+        "dayjs": "^1.11.7"
+      }
+    },
     "node_modules/layerr": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/layerr/-/layerr-3.0.0.tgz",
@@ -5989,9 +6428,9 @@
       }
     },
     "node_modules/linkifyjs": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
-      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.3.tgz",
+      "integrity": "sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==",
       "license": "MIT"
     },
     "node_modules/longest-streak": {
@@ -6033,6 +6472,18 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/markdown-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
+      "integrity": "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -6220,6 +6671,83 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-mdx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
+      "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-phrasing": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
@@ -6506,6 +7034,108 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/micromark-extension-mdx-expression": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.1.tgz",
+      "integrity": "sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-jsx": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.2.tgz",
+      "integrity": "sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdx-md": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz",
+      "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz",
+      "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.0.0",
+        "acorn-jsx": "^5.0.0",
+        "micromark-extension-mdx-expression": "^3.0.0",
+        "micromark-extension-mdx-jsx": "^3.0.0",
+        "micromark-extension-mdx-md": "^2.0.0",
+        "micromark-extension-mdxjs-esm": "^3.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs-esm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz",
+      "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -6549,6 +7179,33 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-factory-mdx-expression": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.3.tgz",
+      "integrity": "sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
     "node_modules/micromark-factory-space": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
@@ -6750,6 +7407,31 @@
       ],
       "license": "MIT"
     },
+    "node_modules/micromark-util-events-to-acorn": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.3.tgz",
+      "integrity": "sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-visit": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
     "node_modules/micromark-util-html-tag-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
@@ -6962,12 +7644,12 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/motion": {
-      "version": "12.38.0",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz",
-      "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==",
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.39.0.tgz",
+      "integrity": "sha512-H4a+Ze+a9j+/NTla5ezfb/g9vmIOxC+viDj++NGDZyTZkdRKjiOz3kSv6TalRWM8ZmD2y/CfC6TkQc97ybyqSA==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^12.38.0",
+        "framer-motion": "^12.39.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -6988,18 +7670,18 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.38.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz",
-      "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==",
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.39.0.tgz",
+      "integrity": "sha512-Xn7aAcGDhco/JZTXOub64UmaYn73C6J1Po7Fk+8EvkJsNGTqfhon6UJY53vJKXW5v5Zl8HrYsVxv6oPXeGoGLQ==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.36.0"
+        "motion-utils": "^12.39.0"
       }
     },
     "node_modules/motion-utils": {
-      "version": "12.36.0",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz",
-      "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==",
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
       "license": "MIT"
     },
     "node_modules/mrmime": {
@@ -7073,9 +7755,9 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.91.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.91.0.tgz",
-      "integrity": "sha512-B+S7X/GS3Un6wMICtnsNjQD7oSpVBQrZftHE6GZ1Fe9/k3XOOoqbM5DZZ0GO4x3YiSCQfrM28yj1ppplwgIsfg==",
+      "version": "3.92.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.92.0.tgz",
+      "integrity": "sha512-KdHvFWZjEKDf0cakgFjebl371GPsISX2oZHcuyKqM7DtogIsHrqKeLTo8wBHxaXRAQlY2PsPlZmfo+9ZCxEREQ==",
       "license": "MIT",
       "dependencies": {
         "semver": "^7.3.5"
@@ -7310,6 +7992,31 @@
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "license": "(MIT AND Zlib)"
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse-latin": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/parse-latin/-/parse-latin-7.0.0.tgz",
@@ -7375,15 +8082,15 @@
       }
     },
     "node_modules/pg": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
-      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.21.0.tgz",
+      "integrity": "sha512-AUP1EYJuHraQGsVoCQVIcM7TEJVGtDzxWtGFZd8rds9d+CCXlU5Js1rYgfLNvxy9iJrpHjGrRjoi/3BT9fRyiA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "pg-connection-string": "^2.12.0",
-        "pg-pool": "^3.13.0",
-        "pg-protocol": "^1.13.0",
+        "pg-connection-string": "^2.13.0",
+        "pg-pool": "^3.14.0",
+        "pg-protocol": "^1.14.0",
         "pg-types": "2.2.0",
         "pgpass": "1.0.5"
       },
@@ -7391,7 +8098,7 @@
         "node": ">= 16.0.0"
       },
       "optionalDependencies": {
-        "pg-cloudflare": "^1.3.0"
+        "pg-cloudflare": "^1.4.0"
       },
       "peerDependencies": {
         "pg-native": ">=3.0.1"
@@ -7403,16 +8110,16 @@
       }
     },
     "node_modules/pg-cloudflare": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
-      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.4.0.tgz",
+      "integrity": "sha512-Vo7z/6rrQYxpNRylp4Tlob2elzbh+N/MOQbxFVWCxS7oEx6jF53GTJFxK2WWpKuBRkmiin4Mt+xofFDjx09R0A==",
       "license": "MIT",
       "optional": true
     },
     "node_modules/pg-connection-string": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
-      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.13.0.tgz",
+      "integrity": "sha512-EMnU9E2fSULdsbErBbMaXJvFeD9B4+nPcM3f+4lsiCR0BHLPrLVjv3DbyM2hgQQviKJaTWIRRTjKjWlHg3p2ig==",
       "license": "MIT",
       "optional": true
     },
@@ -7427,9 +8134,9 @@
       }
     },
     "node_modules/pg-pool": {
-      "version": "3.13.0",
-      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
-      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.14.0.tgz",
+      "integrity": "sha512-gKtPkFdQPU3DksooVLi9LsjZxrsBUZIpa+7aVx+LV5pNh0KzP4Zleud2po+ConrxbuXGBJ6Hfer6hdgpIBpBaw==",
       "license": "MIT",
       "optional": true,
       "peerDependencies": {
@@ -7437,9 +8144,9 @@
       }
     },
     "node_modules/pg-protocol": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
-      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.14.0.tgz",
+      "integrity": "sha512-n5taZ1kO3s9ngDTVxsEznOqCyToTgz0FLuPq0B33COy5pPpuWJpY3/2oRBVETuOgzdqRXfWpM9HIhp2LBBT1BA==",
       "license": "MIT",
       "optional": true
     },
@@ -7693,9 +8400,9 @@
       }
     },
     "node_modules/prosemirror-model": {
-      "version": "1.25.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
-      "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
+      "version": "1.25.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.7.tgz",
+      "integrity": "sha512-A79aN8QEFUwI6cax8Yq4Rpcx1TJZ3Kagn+ii7qLo4/V8H3mMiHrhFyhTyHHvpSnOgMPpWiDGSwM3etwrxE50ug==",
       "license": "MIT",
       "dependencies": {
         "orderedmap": "^2.0.0"
@@ -7780,9 +8487,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
-      "integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
+      "version": "6.15.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
+      "integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
@@ -7931,6 +8638,73 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/recma-build-jsx": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/recma-build-jsx/-/recma-build-jsx-1.0.0.tgz",
+      "integrity": "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-util-build-jsx": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/recma-jsx": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/recma-jsx/-/recma-jsx-1.0.1.tgz",
+      "integrity": "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn-jsx": "^5.0.0",
+        "estree-util-to-js": "^2.0.0",
+        "recma-parse": "^1.0.0",
+        "recma-stringify": "^1.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/recma-parse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/recma-parse/-/recma-parse-1.0.0.tgz",
+      "integrity": "sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "esast-util-from-js": "^2.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/recma-stringify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/recma-stringify/-/recma-stringify-1.0.0.tgz",
+      "integrity": "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-util-to-js": "^2.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
@@ -8001,6 +8775,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-recma": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-recma/-/rehype-recma-1.0.0.tgz",
+      "integrity": "sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "hast-util-to-estree": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-stringify": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",
@@ -8034,6 +8823,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-mdx": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.1.tgz",
+      "integrity": "sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-mdx": "^3.0.0",
+        "micromark-extension-mdxjs": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -8107,9 +8910,9 @@
       }
     },
     "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
       "license": "MIT"
     },
     "node_modules/resolve-pkg-maps": {
@@ -8275,15 +9078,16 @@
       "license": "MIT"
     },
     "node_modules/sanitize-html": {
-      "version": "2.17.3",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.3.tgz",
-      "integrity": "sha512-Kn4srCAo2+wZyvCNKCSyB2g8RQ8IkX/gQs2uqoSRNu5t9I2qvUyAVvRDiFUVAiX3N3PNuwStY0eNr+ooBHVWEg==",
+      "version": "2.17.4",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.4.tgz",
+      "integrity": "sha512-2HW7v2ol/uAM7sX4hbD8Z59OGWmAPrvjL8E71UWlBcj6m+kcF6ilQBLny+cIgY214QJeJT5tQuxKKqX0SQqjGQ==",
       "license": "MIT",
       "dependencies": {
         "deepmerge": "^4.2.2",
         "escape-string-regexp": "^4.0.0",
         "htmlparser2": "^10.1.0",
         "is-plain-object": "^5.0.0",
+        "launder": "^1.7.1",
         "parse-srcset": "^1.0.2",
         "postcss": "^8.3.11"
       }
@@ -8625,6 +9429,15 @@
         "url": "https://github.com/sponsors/cyyynthia"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8695,6 +9508,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/svgo": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.1.tgz",
@@ -8727,9 +9558,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
-      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -8864,17 +9695,34 @@
       }
     },
     "node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
       "license": "MIT",
       "dependencies": {
-        "content-type": "^1.0.5",
+        "content-type": "^2.0.0",
         "media-typer": "^1.1.0",
         "mime-types": "^3.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/ufo": {
@@ -8908,9 +9756,9 @@
       "license": "MIT"
     },
     "node_modules/undici-types": {
-      "version": "7.19.2",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
-      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
       "license": "MIT",
       "optional": true
     },
@@ -8998,6 +9846,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-position-from-estree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
+      "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-remove-position": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
@@ -9427,9 +10288,9 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
-      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "version": "8.20.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz",
+      "integrity": "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==",
       "license": "MIT",
       "optional": true,
       "engines": {
diff --git a/package.json b/package.json
index dd76d8a..ba40339 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^10.0.6",
-    "@astrojs/react": "^5.0.4",
+    "@astrojs/mdx": "^5.0.6",
+    "@astrojs/node": "^10.1.1",
+    "@astrojs/react": "^5.0.5",
     "astro": "^6.2.2",
-    "emdash": "^0.9.0",
+    "emdash": "^0.12.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   }
diff --git a/public/images/services/ai-consult.jpg b/public/images/services/ai-consult.jpg
new file mode 100644
index 0000000..2baae7b
Binary files /dev/null and b/public/images/services/ai-consult.jpg differ
diff --git a/public/images/services/automation.jpg b/public/images/services/automation.jpg
new file mode 100644
index 0000000..2cfac39
Binary files /dev/null and b/public/images/services/automation.jpg differ
diff --git a/public/images/services/default.jpg b/public/images/services/default.jpg
new file mode 100644
index 0000000..2cfac39
Binary files /dev/null and b/public/images/services/default.jpg differ
diff --git a/public/images/services/marketing.jpg b/public/images/services/marketing.jpg
new file mode 100644
index 0000000..50178ac
Binary files /dev/null and b/public/images/services/marketing.jpg differ
diff --git a/public/images/services/webdev.jpg b/public/images/services/webdev.jpg
new file mode 100644
index 0000000..7eef437
Binary files /dev/null and b/public/images/services/webdev.jpg differ
diff --git a/seed-all.cjs b/seed-all.cjs
new file mode 100644
index 0000000..e150ccf
--- /dev/null
+++ b/seed-all.cjs
@@ -0,0 +1,52 @@
+const seed = require('./seed/seed.json');
+const Database = require('better-sqlite3');
+const db = new Database('./data.db');
+
+// Helper to get current timestamp
+const now = new Date().toISOString();
+
+// 1. Seed Pages
+const insertPage = db.prepare(`
+  INSERT OR REPLACE INTO ec_pages (id, slug, status, locale, title, subtitle, badge, hero_image, theme, show_cta, cta_text, cta_link, variant, size, created_at, updated_at, published_at)
+  VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+`);
+(seed.content?.pages || []).forEach(p => {
+  insertPage.run(p.id, p.slug, p.data.title, p.data.subtitle, p.data.badge, p.data.hero_image, p.data.theme, p.data.show_cta ? 1 : 0, p.data.cta_text, p.data.cta_link, p.data.variant, p.data.size, now, now, now);
+});
+console.log('Pages seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_pages').get().c);
+
+// 2. Seed Portfolio
+const insertPortfolio = db.prepare(`
+  INSERT OR REPLACE INTO ec_portfolio (id, slug, status, locale, name, url, category, category_label, thumbnail, description, created_at, updated_at, published_at)
+  VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?, ?, ?, ?, ?)
+`);
+(seed.content?.portfolio || []).forEach((p, i) => {
+  const pid = p.id || `portfolio-${String(i + 1).padStart(3, '0')}`;
+  insertPortfolio.run(pid, p.slug, p.data.name, p.data.url, p.data.category, p.data.category_label, p.data.thumbnail, p.data.description, now, now, now);
+});
+console.log('Portfolio seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_portfolio').get().c);
+
+// 3. Seed Blog
+const insertBlog = db.prepare(`
+  INSERT OR REPLACE INTO ec_blog (id, slug, status, locale, title, excerpt, image, date, category, content, created_at, updated_at, published_at)
+  VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?, ?, ?, ?, ?)
+`);
+(seed.content?.blog || []).forEach((p, i) => {
+  const bid = p.id || `blog-${String(i + 1).padStart(3, '0')}`;
+  insertBlog.run(bid, p.slug, p.data.title, p.data.excerpt, p.data.image, p.data.date, p.data.category, JSON.stringify(p.data.content), now, now, now);
+});
+console.log('Blog seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_blog').get().c);
+
+// 4. Seed FAQ
+const insertFaq = db.prepare(`
+  INSERT OR REPLACE INTO ec_faq (id, slug, status, locale, category, question, answer, created_at, updated_at)
+  VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?)
+`);
+(seed.content?.faq || []).forEach((p, i) => {
+  const fid = p.id || `faq-${String(i + 1).padStart(3, '0')}`;
+  insertFaq.run(fid, p.slug || fid, p.data.category, p.data.question, p.data.answer, now, now);
+});
+console.log('FAQ seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_faq').get().c);
+
+db.close();
+console.log('All seeding complete!');
\ No newline at end of file
diff --git a/seed-db.cjs b/seed-db.cjs
new file mode 100644
index 0000000..e6dc310
--- /dev/null
+++ b/seed-db.cjs
@@ -0,0 +1,14 @@
+const seed = require('./seed/seed.json');
+const Database = require('better-sqlite3');
+const db = new Database('./data.db');
+
+// Only seed pages for now
+const insertPage = db.prepare(
+  "INSERT OR REPLACE INTO ec_pages (id, slug, status, title, subtitle, badge, hero_image, theme, show_cta, cta_text, cta_link, variant, size, created_at, updated_at, published_at) VALUES (?, ?, 'published', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, datetime('now'), datetime('now'), datetime('now'))"
+);
+(seed.content?.pages || []).forEach(p => {
+  insertPage.run(p.id, p.slug, p.data.title, p.data.subtitle, p.data.badge, p.data.hero_image, p.data.theme, p.data.show_cta ? 1 : 0, p.data.cta_text, p.data.cta_link, p.data.variant, p.data.size);
+});
+console.log('Pages:', db.prepare('SELECT COUNT(*) as c FROM ec_pages').get().c);
+db.close();
+console.log('Done');
\ No newline at end of file
diff --git a/seed-services.cjs b/seed-services.cjs
new file mode 100644
index 0000000..8333520
--- /dev/null
+++ b/seed-services.cjs
@@ -0,0 +1,26 @@
+const seed = require('./seed/seed.json');
+const Database = require('better-sqlite3');
+const db = new Database('./data.db');
+
+const cols = ['title','subtitle','badge','category','objective','hero_image',
+  'usp_free_server','usp_content_edit',
+  'feature1_icon','feature1_title','feature1_desc',
+  'feature2_icon','feature2_title','feature2_desc',
+  'feature3_icon','feature3_title','feature3_desc',
+  'feature4_icon','feature4_title','feature4_desc',
+  'feature5_icon','feature5_title','feature5_desc',
+  'feature6_icon','feature6_title','feature6_desc'];
+
+const placeholders = cols.map(() => '?').join(', ');
+const sql = `INSERT OR REPLACE INTO ec_services (id, slug, status, ${cols.join(', ')}, created_at, updated_at, published_at) VALUES (?, ?, 'published', ${placeholders}, datetime('now'), datetime('now'), datetime('now'))`;
+
+const insertService = db.prepare(sql);
+
+(seed.content?.services || []).forEach(s => {
+  const vals = [s.id, s.slug];
+  cols.forEach(c => vals.push(s.data[c] ?? null));
+  insertService.run(...vals);
+});
+console.log('Services:', db.prepare('SELECT COUNT(*) as c FROM ec_services').get().c);
+db.close();
+console.log('Done');
\ No newline at end of file
diff --git a/seed/seed.json b/seed/seed.json
index 0156924..a1cb54c 100644
--- a/seed/seed.json
+++ b/seed/seed.json
@@ -1,85 +1,598 @@
 {
+  "version": "1",
   "collections": [
     {
-      "name": "pages",
+      "slug": "pages",
       "label": "Pages",
       "fields": [
-        { "name": "title", "type": "string", "label": "Title" },
-        { "name": "subtitle", "type": "string", "label": "Subtitle" },
-        { "name": "badge", "type": "string", "label": "Badge" },
-        { "name": "heroImage", "type": "image", "label": "Hero Image" },
-        { "name": "theme", "type": "select", "label": "Theme", "options": ["yellow", "accent"] },
-        { "name": "showCTA", "type": "boolean", "label": "Show CTA" },
-        { "name": "ctaText", "type": "string", "label": "CTA Text" },
-        { "name": "ctaLink", "type": "string", "label": "CTA Link" },
-        { "name": "variant", "type": "select", "label": "Hero Variant", "options": ["split", "centered", "text-only", "floating-cards"] },
-        { "name": "size", "type": "select", "label": "Hero Size", "options": ["full", "compact"] }
+        { "slug": "title", "type": "string", "label": "Title" },
+        { "slug": "subtitle", "type": "string", "label": "Subtitle" },
+        { "slug": "badge", "type": "string", "label": "Badge" },
+        { "slug": "hero_image", "type": "image", "label": "Hero Image" },
+        { "slug": "theme", "type": "select", "label": "Theme", "options": ["yellow", "accent"] },
+        { "slug": "show_cta", "type": "boolean", "label": "Show CTA" },
+        { "slug": "cta_text", "type": "string", "label": "CTA Text" },
+        { "slug": "cta_link", "type": "string", "label": "CTA Link" },
+        { "slug": "variant", "type": "select", "label": "Hero Variant", "options": ["split", "centered", "text_only", "floating_cards"] },
+        { "slug": "size", "type": "select", "label": "Hero Size", "options": ["full", "compact"] }
       ]
     },
     {
-      "name": "services",
+      "slug": "services",
       "label": "Services",
       "fields": [
-        { "name": "title", "type": "string", "label": "Title" },
-        { "name": "subtitle", "type": "string", "label": "Subtitle" },
-        { "name": "badge", "type": "string", "label": "Badge" },
-        { "name": "heroImage", "type": "image", "label": "Hero Image" },
-        { "name": "content", "type": "richtext", "label": "Content" },
-        { "name": "features", "type": "array", "label": "Features", "fields": [
-          { "name": "icon", "type": "string", "label": "Icon" },
-          { "name": "title", "type": "string", "label": "Title" },
-          { "name": "description", "type": "string", "label": "Description" }
-        ]}
+        { "slug": "title", "type": "string", "label": "Title" },
+        { "slug": "subtitle", "type": "string", "label": "Subtitle" },
+        { "slug": "badge", "type": "string", "label": "Badge" },
+        { "slug": "category", "type": "select", "label": "Category", "options": ["tech-consult", "marketing-consult"] },
+        { "slug": "objective", "type": "string", "label": "Objective (Headline)" },
+        { "slug": "hero_image", "type": "image", "label": "Hero Image" },
+        { "slug": "usp_free_server", "type": "string", "label": "USP: Free Server Description" },
+        { "slug": "usp_content_edit", "type": "string", "label": "USP: Free Content Edit Description" },
+        { "slug": "content", "type": "portableText", "label": "Content" },
+        {
+          "slug": "features",
+          "type": "repeater",
+          "label": "Features",
+          "fields": [
+            { "slug": "icon", "type": "string", "label": "Icon" },
+            { "slug": "feature_title", "type": "string", "label": "Title" },
+            { "slug": "description", "type": "string", "label": "Description" }
+          ]
+        }
       ]
     },
     {
-      "name": "portfolio",
+      "slug": "portfolio",
       "label": "Portfolio",
       "fields": [
-        { "name": "name", "type": "string", "label": "Name" },
-        { "name": "url", "type": "string", "label": "URL" },
-        { "name": "category", "type": "select", "label": "Category", "options": ["webdev", "ecommerce", "marketing"] },
-        { "name": "categoryLabel", "type": "string", "label": "Category Label" },
-        { "name": "thumbnail", "type": "image", "label": "Thumbnail" },
-        { "name": "description", "type": "string", "label": "Description" },
-        { "name": "services", "type": "array", "label": "Services", "fields": [
-          { "name": "name", "type": "string", "label": "Name" }
-        ]}
+        { "slug": "name", "type": "string", "label": "Name" },
+        { "slug": "url", "type": "url", "label": "URL" },
+        { "slug": "category", "type": "select", "label": "Category", "options": ["webdev", "ecommerce", "marketing"] },
+        { "slug": "category_label", "type": "string", "label": "Category Label" },
+        { "slug": "thumbnail", "type": "image", "label": "Thumbnail" },
+        { "slug": "description", "type": "text", "label": "Description" },
+        {
+          "slug": "services",
+          "type": "repeater",
+          "label": "Services",
+          "fields": [
+            { "slug": "service_name", "type": "string", "label": "Name" }
+          ]
+        }
       ]
     },
     {
-      "name": "blog",
+      "slug": "blog",
       "label": "Blog",
       "fields": [
-        { "name": "title", "type": "string", "label": "Title" },
-        { "name": "excerpt", "type": "string", "label": "Excerpt" },
-        { "name": "image", "type": "image", "label": "Image" },
-        { "name": "date", "type": "date", "label": "Date" },
-        { "name": "category", "type": "string", "label": "Category" },
-        { "name": "content", "type": "richtext", "label": "Content" }
+        { "slug": "title", "type": "string", "label": "Title" },
+        { "slug": "excerpt", "type": "string", "label": "Excerpt" },
+        { "slug": "image", "type": "image", "label": "Image" },
+        { "slug": "date", "type": "datetime", "label": "Date" },
+        { "slug": "category", "type": "string", "label": "Category" },
+        { "slug": "content", "type": "portableText", "label": "Content" }
       ]
     },
     {
-      "name": "faq",
+      "slug": "faq",
       "label": "FAQ",
       "fields": [
-        { "name": "category", "type": "string", "label": "Category" },
-        { "name": "question", "type": "string", "label": "Question" },
-        { "name": "answer", "type": "string", "label": "Answer" }
+        { "slug": "category", "type": "string", "label": "Category" },
+        { "slug": "question", "type": "string", "label": "Question" },
+        { "slug": "answer", "type": "text", "label": "Answer" }
       ]
     },
     {
-      "name": "settings",
+      "slug": "settings",
       "label": "Site Settings",
       "fields": [
-        { "name": "siteName", "type": "string", "label": "Site Name" },
-        { "name": "email", "type": "string", "label": "Contact Email" },
-        { "name": "phone", "type": "string", "label": "Contact Phone" },
-        { "name": "address", "type": "string", "label": "Address" },
-        { "name": "facebook", "type": "string", "label": "Facebook URL" },
-        { "name": "line", "type": "string", "label": "LINE URL" },
-        { "name": "linkedin", "type": "string", "label": "LinkedIn URL" }
+        { "slug": "site_name", "type": "string", "label": "Site Name" },
+        { "slug": "email", "type": "string", "label": "Contact Email" },
+        { "slug": "phone", "type": "string", "label": "Contact Phone" },
+        { "slug": "address", "type": "text", "label": "Address" },
+        { "slug": "facebook", "type": "url", "label": "Facebook URL" },
+        { "slug": "line", "type": "url", "label": "LINE URL" },
+        { "slug": "linkedin", "type": "url", "label": "LinkedIn URL" }
       ]
     }
-  ]
+  ],
+  "content": {
+    "pages": [
+      {
+        "id": "page-home",
+        "slug": "home",
+        "data": {
+          "title": "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
+          "subtitle": "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
+          "badge": "ดิจิทัลเอเจนซี่ในประเทศไทย",
+          "hero_image": "/images/hero/hero.jpg",
+          "theme": "yellow",
+          "variant": "split",
+          "size": "full",
+          "show_cta": true,
+          "cta_text": "เริ่มต้นวันนี้",
+          "cta_link": "/contact"
+        }
+      },
+      {
+        "id": "page-about",
+        "slug": "about",
+        "data": {
+          "title": "เกี่ยวกับ มอร์มินิมอร์",
+          "subtitle": "บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย",
+          "badge": "เกี่ยวกับเรา",
+          "hero_image": "/images/hero/about.jpg",
+          "theme": "yellow",
+          "variant": "centered",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-portfolio",
+        "slug": "portfolio",
+        "data": {
+          "title": "ผลงานของเรา",
+          "subtitle": "รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ",
+          "badge": "พอร์ตโฟลิโอ",
+          "hero_image": "/images/hero/hero.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-contact",
+        "slug": "contact",
+        "data": {
+          "title": "พูดคุยกับเรา วันนี้เลย!",
+          "subtitle": "พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย",
+          "badge": "ติดต่อเรา",
+          "hero_image": "/images/hero/contact.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-faq",
+        "slug": "faq",
+        "data": {
+          "title": "คำถามที่พบบ่อย",
+          "subtitle": "หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา",
+          "badge": "FAQ",
+          "hero_image": "/images/hero/tech-consult.jpg",
+          "theme": "yellow",
+          "variant": "centered",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-privacy",
+        "slug": "privacy",
+        "data": {
+          "title": "นโยบายความเป็นส่วนตัว",
+          "subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
+          "badge": "กฎหมาย",
+          "hero_image": "/images/hero/ai-automation.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      },
+      {
+        "id": "page-terms",
+        "slug": "terms",
+        "data": {
+          "title": "เงื่อนไขการให้บริการ",
+          "subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
+          "badge": "กฎหมาย",
+          "hero_image": "/images/hero/marketing-automation.jpg",
+          "theme": "yellow",
+          "variant": "text-only",
+          "size": "compact",
+          "show_cta": false
+        }
+      }
+    ],
+    "services": [
+      {
+        "id": "service-automation",
+        "slug": "automation",
+        "data": {
+          "title": "Automation Consult",
+          "subtitle": "Implement specific unique app and AI for business to do automation workflow. ลดต้นทุนและเพิ่มประสิทธิภาพด้วยระบบอัตโนมัติที่ออกแบบมาเฉพาะสำหรับธุรกิจของคุณ",
+          "badge": "Technology Consult",
+          "category": "tech-consult",
+          "objective": "ลดต้นทุนและเวลา",
+          "hero_image": "/images/hero/automation-consult-hero.jpg",
+          "usp_free_server": "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม",
+          "usp_content_edit": "",
+          "feature1_icon": "🤖",
+          "feature1_title": "Workflow Automation",
+          "feature1_desc": "ออกแบบและ implement ระบบ automation สำหรับงานที่ทำซ้ำๆ เช่น การประมวลผลออร์เดอร์ การจัดการ inventory",
+          "feature2_icon": "📊",
+          "feature2_title": "Business Process Optimization",
+          "feature2_desc": "วิเคราะห์และปรับปรุงกระบวนการทำงานให้มีประสิทธิภาพมากขึ้นด้วยเทคโนโลยีล่าสุด",
+          "feature3_icon": "🔗",
+          "feature3_title": "System Integration",
+          "feature3_desc": "เชื่อมต่อระบบต่างๆ ให้ทำงานร่วมกันอย่างราบรื่น เช่น CRM, ERP, E-commerce",
+          "feature4_icon": "📱",
+          "feature4_title": "Custom Application",
+          "feature4_desc": "พัฒนา application เฉพาะทางสำหรับธุรกิจของคุณที่ไม่สามารถหาซื้อได้ทั่วไป",
+          "feature5_icon": "🔒",
+          "feature5_title": "Security & Compliance",
+          "feature5_desc": "ตรวจสอบและปรับปรุงความปลอดภัยของระบบให้เป็นไปตามมาตรฐาน",
+          "feature6_icon": "📈",
+          "feature6_title": "Performance Monitoring",
+          "feature6_desc": "ติดตามและวัดผลประสิทธิภาพของระบบแบบ real-time"
+        }
+      },
+      {
+        "id": "service-ai-consult",
+        "slug": "ai-consult",
+        "data": {
+          "title": "AI Consult",
+          "subtitle": "Consult service for using AI to improve business workflow and knowledge management. ใช้ AI ให้เป็นประโยชน์สำหรับธุรกิจของคุณอย่างเต็มศักยภาพ",
+          "badge": "Technology Consult",
+          "category": "tech-consult",
+          "objective": "ลดต้นทุนและเวลา",
+          "hero_image": "/images/hero/ai-consult-hero.jpg",
+          "usp_free_server": "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม",
+          "usp_content_edit": "",
+          "feature1_icon": "🧠",
+          "feature1_title": "AI Strategy & Roadmap",
+          "feature1_desc": "วางแผนการใช้ AI อย่างเป็นระบบเพื่อให้เห็นผลลัพธ์ที่ชัดเจน",
+          "feature2_icon": "💬",
+          "feature2_title": "AI Chatbot Implementation",
+          "feature2_desc": "พัฒนาและ deploy AI Chatbot ที่เข้าใจภาษาไทยและตอบคำถามลูกค้าได้ 24/7",
+          "feature3_icon": "📝",
+          "feature3_title": "Knowledge Management",
+          "feature3_desc": "สร้างระบบจัดการความรู้ด้วย AI ที่ช่วยให้การค้นหาและใช้งานข้อมูลง่ายขึ้น",
+          "feature4_icon": "🎯",
+          "feature4_title": "AI for Marketing",
+          "feature4_desc": "ใช้ AI วิเคราะห์ลูกค้าและสร้างแคมเปญการตลาดที่มีประสิทธิภาพ",
+          "feature5_icon": "🔍",
+          "feature5_title": "AI Audit",
+          "feature5_desc": "วิเคราะห์ว่าธุรกิจของคุณควรใช้ AI ตัวไหนและอย่างไร",
+          "feature6_icon": "🚀",
+          "feature6_title": "AI Implementation Support",
+          "feature6_desc": "ดูแลและให้คำปรึกษาตลอดการ implement AI ในองค์กร"
+        }
+      },
+      {
+        "id": "service-online-marketing",
+        "slug": "online-marketing",
+        "data": {
+          "title": "Online Marketing Automation",
+          "subtitle": "Use AI to help generate and manage marketing workflow. เพิ่มยอดขายด้วยระบบอัตโนมัติทางการตลาดที่ขับเคลื่อนด้วย AI",
+          "badge": "Marketing Consult",
+          "category": "marketing-consult",
+          "objective": "เพิ่มยอดขาย",
+          "hero_image": "/images/hero/online-marketing-hero.jpg",
+          "usp_free_server": "",
+          "usp_content_edit": "",
+          "feature1_icon": "📧",
+          "feature1_title": "Email Marketing Automation",
+          "feature1_desc": "สร้าง email campaign อัตโนมัติด้วย AI ที่ personalize ข้อความตามพฤติกรรมลูกค้า",
+          "feature2_icon": "💬",
+          "feature2_title": "Social Media Automation",
+          "feature2_desc": "กำหนดเวลาโพสต์และตอบสนองอัตโนมัติด้วย AI ที่เข้าใจบริบท",
+          "feature3_icon": "🎯",
+          "feature3_title": "Lead Generation AI",
+          "feature3_desc": "ใช้ AI หาและให้คะแนน leads ที่มีโอกาส conversion สูงสุด",
+          "feature4_icon": "📊",
+          "feature4_title": "Marketing Analytics",
+          "feature4_desc": "วิเคราะห์ข้อมูลการตลาดและให้คำแนะนำด้วย AI เพื่อปรับปรุง ROI",
+          "feature5_icon": "🔄",
+          "feature5_title": "Workflow Automation",
+          "feature5_desc": "สร้าง marketing workflow อัตโนมัติตั้งแต่ lead จนถึง sale",
+          "feature6_icon": "📱",
+          "feature6_title": "Multi-channel Integration",
+          "feature6_desc": "เชื่อมต่อทุกช่องทางการตลาดให้ทำงานร่วมกันอย่างไร้รอยต่อ"
+        }
+      },
+      {
+        "id": "service-webdev",
+        "slug": "webdev",
+        "data": {
+          "title": "Website Development",
+          "subtitle": "Implement website for business and integrate the website with marketing workflow. เว็บไซต์ที่ทันสมัย รวดเร็ว และเชื่อมต่อกับระบบการตลาดอย่างไร้รอยต่อ",
+          "badge": "Marketing Consult",
+          "category": "marketing-consult",
+          "objective": "เพิ่มยอดขาย",
+          "hero_image": "/images/hero/web-development-hero.jpg",
+          "usp_free_server": "",
+          "usp_content_edit": "ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce",
+          "feature1_icon": "⚡",
+          "feature1_title": "Fast & Modern",
+          "feature1_desc": "โหลดเร็ว รองรับการขยายตัวของธุรกิจ และใช้เทคโนโลยีล่าสุด",
+          "feature2_icon": "📱",
+          "feature2_title": "Responsive Design",
+          "feature2_desc": "แสดงผลได้ดีบนทุกอุปกรณ์ ทั้ง mobile tablet และ desktop",
+          "feature3_icon": "🎨",
+          "feature3_title": "SEO Optimized",
+          "feature3_desc": "ออกแบบมาเพื่อให้ Google ชอบ ช่วยให้ติดอันดับได้ง่ายขึ้น",
+          "feature4_icon": "🔗",
+          "feature4_title": "Marketing Integration",
+          "feature4_desc": "เชื่อมต่อกับระบบ CRM, Email Marketing และ Analytics ได้อย่างไร้รอยต่อ",
+          "feature5_icon": "📊",
+          "feature5_title": "Analytics Dashboard",
+          "feature5_desc": "ติดตามผู้เข้าชมและวัดผลได้แบบ real-time",
+          "feature6_icon": "🔒",
+          "feature6_title": "Security",
+          "feature6_desc": "Security ระดับสูง ป้องกันการโจมตีและข้อมูลรั่วไหล"
+        }
+      }
+    ],
+    "portfolio": [
+      {
+        "id": "portfolio-001",
+        "slug": "lungfinler",
+        "data": {
+          "name": "Lungfinler",
+          "url": "https://lungfinler.com",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/lungfinler.png",
+          "description": "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง"
+        }
+      },
+      {
+        "id": "portfolio-002",
+        "slug": "jetindustries",
+        "data": {
+          "name": "Jet Industries",
+          "url": "https://jetindustries.co.th",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/jetindustries.png",
+          "description": "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี"
+        }
+      },
+      {
+        "id": "portfolio-003",
+        "slug": "lawyernoom",
+        "data": {
+          "name": "สำนักงานกฎหมาย ตถาตา",
+          "url": "https://lawyernoom.com",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/lawyernoom.png",
+          "description": "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา"
+        }
+      },
+      {
+        "id": "portfolio-004",
+        "slug": "underdog",
+        "data": {
+          "name": "Underdog Marketing",
+          "url": "https://underdog.run",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/underdog.png",
+          "description": "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู"
+        }
+      },
+      {
+        "id": "portfolio-005",
+        "slug": "baofuling",
+        "data": {
+          "name": "Baofuling Shop",
+          "url": "https://baofulingshop.com",
+          "category": "ecommerce",
+          "category_label": "อีคอมเมิร์ซ",
+          "thumbnail": "/images/portfolio/baofuling.png",
+          "description": "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน"
+        }
+      },
+      {
+        "id": "portfolio-006",
+        "slug": "trainersunny",
+        "data": {
+          "name": "เทรนเนอร์ซันนี่",
+          "url": "https://trainersunny.com",
+          "category": "webdev",
+          "category_label": "พัฒนาเว็บไซต์",
+          "thumbnail": "/images/portfolio/trainersunny.png",
+          "description": "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill"
+        }
+      },
+      {
+        "id": "portfolio-007",
+        "slug": "luadjob",
+        "data": {
+          "name": "เลือดจระเข้วานิไทย",
+          "url": "https://เลือดจระเข้วานิไทย.com",
+          "category": "ecommerce",
+          "category_label": "อีคอมเมิร์ซ",
+          "thumbnail": "/images/portfolio/luadjob.png",
+          "description": "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ"
+        }
+      },
+      {
+        "id": "portfolio-008",
+        "slug": "tuanthong",
+        "data": {
+          "name": "ทวนทอง 99",
+          "url": "https://tuanthong99.com",
+          "category": "ecommerce",
+          "category_label": "อีคอมเมิร์ซ",
+          "thumbnail": "/images/portfolio/tuanthong.png",
+          "description": "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง"
+        }
+      },
+      {
+        "id": "portfolio-009",
+        "slug": "odooportal",
+        "data": {
+          "name": "Odoo Portal",
+          "url": "https://odooportal.com",
+          "category": "marketing",
+          "category_label": "ที่ปรึกษาการตลาด",
+          "thumbnail": "/images/portfolio/odooportal.png",
+          "description": "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย"
+        }
+      }
+    ],
+    "faq": [
+      {
+        "id": "faq-001",
+        "slug": "service-001",
+        "data": { "category": "บริการ", "category_icon": "🎯", "question": "MoreminiMore ให้บริการอะไรบ้าง?", "answer": "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย" }
+      },
+      {
+        "id": "faq-002",
+        "slug": "service-002",
+        "data": { "category": "บริการ", "category_icon": "🎯", "question": "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?", "answer": "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application" }
+      },
+      {
+        "id": "faq-003",
+        "slug": "service-003",
+        "data": { "category": "บริการ", "category_icon": "🎯", "question": "AI Chatbot สามารถทำอะไรได้บ้าง?", "answer": "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้" }
+      },
+      {
+        "id": "faq-004",
+        "slug": "price-001",
+        "data": { "category": "ราคา", "category_icon": "💰", "question": "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?", "answer": "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี" }
+      },
+      {
+        "id": "faq-005",
+        "slug": "price-002",
+        "data": { "category": "ราคา", "category_icon": "💰", "question": "มีราคาแพ็คเกจหรือไม่?", "answer": "มี เรามีแพ็คเกจสำหรับธุรกิจที่ต้องการเริ่มต้นอย่างง่ายๆ และแพ็คเกจสำหรับธุรกิจที่ต้องการระบบครบวงจร สามารถเลือกได้ตามความต้องการ" }
+      },
+      {
+        "id": "faq-006",
+        "slug": "price-003",
+        "data": { "category": "ราคา", "category_icon": "💰", "question": "ชำระเงินอย่างไร?", "answer": "รองรับการชำระเงินผ่านโอนเงินธนาคาร หรือผ่อนชำระผ่านบัตรเครดิต 3-6 งวด (มีดอกเบี้ย)" }
+      },
+      {
+        "id": "faq-007",
+        "slug": "time-001",
+        "data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ใช้เวลาพัฒนานานเท่าไหร่?", "answer": "ขึ้นอยู่กับความซับซ้อน Landing Page ใช้เวลา 1-2 สัปดาห์ เว็บไซต์ขนาดกลาง 2-4 สัปดาห์ ระบบ Web Application 4-8 สัปดาห์" }
+      },
+      {
+        "id": "faq-008",
+        "slug": "time-002",
+        "data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ถ้าต้องการด่วนได้ไหม?", "answer": "ได้ เรามีบริการด่วนพิเศษ (เพิ่มค่าใช้จ่าย 30%) สามารถส่งมอบงานได้เร็วขึ้น 50%" }
+      },
+      {
+        "id": "faq-009",
+        "slug": "support-001",
+        "data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีการรับประกันหรือไม่?", "answer": "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการพัฒนา เราจะแก้ไขให้ฟรี" }
+      },
+      {
+        "id": "faq-010",
+        "slug": "support-002",
+        "data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีบริการดูแลหลังการขายไหม?", "answer": "มี เรามีแพ็คเกจดูแลรายเดือนเริ่มต้นที่ 2,000 บาท/เดือน รวมการอัพเดทเนื้อหา ปรับปรุงความปลอดภัย และ Backup" }
+      }
+    ],
+    "blog": [
+      {
+        "id": "post-001",
+        "slug": "5-ways-ai-increase-sales",
+        "data": {
+          "title": "5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ",
+          "excerpt": "ค้นพบ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายให้ธุรกิจ SMEs ไทย พร้อมตัวอย่างและแนวทางการนำไปใช้จริง",
+          "image": "/images/blog/5-ways-ai-increase-sales.jpg",
+          "date": "2026-03-11",
+          "category": "AI Business",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 1: ใช้ AI วิเคราะห์ลูกค้าและแนะนำสินค้าที่ตรงใจ" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "หนึ่งในความสามารถที่ทรงพลังที่สุดของ AI คือการวิเคราะห์ข้อมูลลูกค้าและค้นหารูปแบบที่มนุษย์อาจมองไม่เห็น AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนชอบสินค้าประเภทไหน ซื้อในช่วงเวลาไหน และมีพฤติกรรมการซื้ออย่างไร" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 2: ใช้ Chatbot ดูแลลูกค้าตลอด 24 ชั่วโมง" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "ลูกค้าจำนวนมากต้องการได้รับคำตอบทันที ไม่ว่าจะกี่โมง แต่การจ้างพนักงานทำงาน 24 ชั่วโมงนั้นมีค่าใช้จ่ายสูง Chatbot ที่ใช้ AI สามารถตอบคำถามลูกค้าได้ตลอดเวลา โดยไม่ต้องเสียค่าล่วงเวลา" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 3: ใช้ AI ส่งข้อความการตลาดในเวลาที่เหมาะสม" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "การส่งข้อความการตลาดไม่ใช่แค่การส่งออกไปเท่านั้น แต่ต้องส่งในเวลาที่ลูกค้ามีโอกาสอ่านและตอบสนองมากที่สุด AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนมีช่วงเวลาไหนที่เปิดอ่านข้อความบ่อยที่สุด และส่งในเวลานั้น" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 4: ใช้ AI สร้างเนื้อหาการตลาด" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "เนื้อหาการตลาดที่ดีเป็นหัวใจสำคัญในการดึงดูดลูกค้า แต่การสร้างเนื้อหาที่มีคุณภาพตลอดเวลาต้องใช้เวลาและทรัพยากรมาก AI สามารถช่วยสร้างเนื้อหาได้เร็วขึ้น ไม่ว่าจะเป็นโพสต์เฟซบุ๊ก คำบรรยายสินค้า อีเมลการตลาด หรือบทความบล็อก" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 5: ใช้ AI ทำนายแนวโน้มและวางแผนสินค้า" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "การมีสินค้าคงคลงเป็นสิ่งจำเป็นสำหรับธุรกิจค้าปลีก แต่การมีสินค้ามากเกินไปก็เป็นปัญหา AI สามารถวิเคราะห์ข้อมูลยอดขายในอดีต ฤดูกาล และปัจจัยอื่นๆ เพื่อทำนายว่าควรสั่งสินค้าเท่าไหร่ในแต่ละช่วง" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-002",
+        "slug": "ai-content-google-love",
+        "data": {
+          "title": "วิธีสร้าง Content ด้วย AI ที่ Google รัก",
+          "excerpt": "เรียนรู้วิธีการใช้ AI ช่วยสร้างเนื้อหาการตลาดที่มีคุณภาพและได้รับการจัดอันดับดีจาก Google พร้อมเทคนิคและตัวอย่างจริง",
+          "image": "/images/blog/ai-content-google-love.jpg",
+          "date": "2026-03-10",
+          "category": "AI Content",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม AI Content ต้องมีคุณภาพ" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "Google มีอัลกอริทึมที่ฉลาดมาก สามารถแยกแยะได้ว่าเนื้อหาที่สร้างโดย AI มีคุณภาพหรือไม่ เนื้อหาที่ไม่มีคุณค่า สร้างขึ้นแค่เพื่อใส่คีย์เวิร์ด จะถูกลงโทษและไม่ติดอันดับ" }] },
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีใช้ AI สร้างเนื้อหาที่ดี" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้เขียนทั้งหมด วิธีที่ดีที่สุดคือใช้ AI ช่วยในบางส่วน เช่น รวบรวมข้อมูล สร้างโครงสร้าง หรือเขียน draft แล้วนำมาปรับแก้ด้วยมนุษย์" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-003",
+        "slug": "ai-for-sme-thailand",
+        "data": {
+          "title": "AI สำหรับ SME ไทย: คู่มือฉบับสมบูรณ์",
+          "excerpt": "การใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน พร้อมแนวทางปฏิบัติจริง",
+          "image": "/images/blog/ai-for-sme-thailand.jpg",
+          "date": "2026-03-08",
+          "category": "AI Business",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม SME ต้องใช้ AI" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "AI ไม่ใช่เทคโนโลยีสำหรับบริษัทใหญ่เท่านั้น ธุรกิจ SME สามารถเริ่มใช้ประโยชน์จาก AI ได้ง่ายๆ ด้วยเครื่องมือที่เข้าถึงได้" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-004",
+        "slug": "digital-transformation-guide",
+        "data": {
+          "title": "คู่มือ Digital Transformation ฉบับสมบูรณ์",
+          "excerpt": "การ transform ธุรกิจของคุณสู่ดิจิทัลอย่างครบวงจร ตั้งแต่การวางแผนจนถึงการ Implement",
+          "image": "/images/blog/digital-transformation.jpg",
+          "date": "2026-03-05",
+          "category": "Business",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Digital Transformation คืออะไร" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "Digital Transformation คือการนำเทคโนโลยีดิจิทัลมาใช้ในทุกด้านของธุรกิจ เพื่อเพิ่มประสิทธิภาพและสร้างคุณค่าใหม่ให้กับลูกค้า" }] }
+            ]
+          }
+        }
+      },
+      {
+        "id": "post-005",
+        "slug": "marketing-automation-guide",
+        "data": {
+          "title": "Marketing Automation: คู่มือเริ่มต้น",
+          "excerpt": "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้นใช้งานสำหรับธุรกิจของคุณ",
+          "image": "/images/blog/marketing-automation-guide.jpg",
+          "date": "2026-03-01",
+          "category": "Marketing",
+          "content": {
+            "type": "doc",
+            "content": [
+              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Marketing Automation คืออะไร" }] },
+              { "type": "paragraph", "content": [{ "type": "text", "text": "Marketing Automation คือการใช้ซอฟต์แวร์เพื่อ automate การตลาดซ้ำๆ เช่น การส่งอีเมล การโพสต์โซเชียลมีเดีย และการวิเคราะห์ข้อมูล" }] }
+            ]
+          }
+        }
+      }
+    ]
+  }
 }
\ No newline at end of file
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
new file mode 100644
index 0000000..919e75b
--- /dev/null
+++ b/src/components/BlogCard.astro
@@ -0,0 +1,84 @@
+---
+interface Props {
+  title: string;
+  excerpt: string;
+  image?: string;
+  date: Date;
+  slug: string;
+  category: string;
+}
+
+const { title, excerpt, image, date, slug, category } = Astro.props;
+const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month: 'short', day: 'numeric' });
+---
+
+<a href={`/blog/${slug}`} class="blog-card">
+  <div class="blog-image">
+    {image && <img src={image} alt={title} loading="lazy" />}
+  </div>
+  <div class="blog-content">
+    <span class="blog-date">{formattedDate}</span>
+    <h3 class="blog-title">{title}</h3>
+    <p class="blog-excerpt">{excerpt}</p>
+    <span class="blog-link">อ่านต่อ →</span>
+  </div>
+</a>
+
+<style>
+  .blog-card {
+    display: block;
+    background: var(--color-white);
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+  }
+  .blog-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+  }
+  .blog-image {
+    aspect-ratio: 16/9;
+    overflow: hidden;
+    background: var(--color-gray-100);
+  }
+  .blog-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+  }
+  .blog-card:hover .blog-image img { transform: scale(1.05); }
+  .blog-content { padding: 24px; }
+  .blog-date {
+    font-size: 12px;
+    color: var(--color-medium-gray);
+    margin-bottom: 8px;
+    display: block;
+  }
+  .blog-title {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: var(--color-black);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .blog-excerpt {
+    font-size: 14px;
+    color: var(--color-medium-gray);
+    line-height: 1.6;
+    margin-bottom: 16px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .blog-link {
+    color: var(--color-primary);
+    font-weight: 600;
+    font-size: 14px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index a9c9547..83c8e02 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,184 +1,449 @@
 ---
+/**
+ * MOREMINIMORE - FOOTER COMPONENT
+ * Minimal design with animated elements
+ */
+
 const currentYear = new Date().getFullYear();
 
-const socialLinks = [
-  { label: "Facebook", href: "https://www.facebook.com/moreminimore", icon: "facebook" },
-  { label: "LINE", href: "https://line.me/ti/p/~@539hdlul", icon: "line" },
-  { label: "LinkedIn", href: "https://www.linkedin.com/company/moreminimore", icon: "linkedin" },
+const navLinks = [
+  { label: 'หน้าแรก', href: '/' },
+  { label: 'บริการ', href: '/services' },
+  { label: 'ผลงาน', href: '/portfolio' },
+  { label: 'บทความ', href: '/blog' },
+  { label: 'ติดต่อ', href: '/contact' },
 ];
 
-const footerLinks = [
-  { label: "นโยบายความเป็นส่วนตัว", href: "/privacy" },
-  { label: "เงื่อนไขการใช้บริการ", href: "/terms" },
-  { label: "ติดต่อเรา", href: "/contact" },
+const serviceLinks = [
+  { label: 'พัฒนาเว็บไซต์', href: '/services/webdev' },
+  { label: 'Marketing Automation', href: '/services/marketing' },
+  { label: 'AI Automation', href: '/services/automation' },
+  { label: 'Tech Consult', href: '/services/ai-consult' },
 ];
 ---
 
 <footer class="footer">
+  <!-- Background Pattern -->
+  <div class="footer-bg">
+    <div class="bg-dots"></div>
+  </div>
+  
+  <!-- Geometric Elements -->
+  <div class="footer-geo">
+    <div class="geo-circle"></div>
+    <div class="geo-ring"></div>
+  </div>
+
   <div class="container">
     <div class="footer-grid">
+      <!-- Brand Column -->
       <div class="footer-brand">
-        <img src="/images/logo-long.png" alt="MoreminiMore" class="footer-logo" />
+        <a href="/" class="footer-logo">
+          <div class="logo-banner">
+            <img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
+          </div>
+        </a>
         <p class="footer-tagline">
-          บริษัท มอร์มินิมอร์ จำกัด<br />
-          ผู้เชี่ยวชาญด้าน IT และ Digital Transformation<br />
-          สำหรับธุรกิจ SMEs ไทย
+          รับทำเว็บไซต์ SEO AI Chatbot<br/>
+          สำหรับธุรกิจไทย
         </p>
-        <div class="social-links">
-          {socialLinks.map((social) => (
-            <a href={social.href} class="social-link" aria-label={social.label} target="_blank" rel="noopener noreferrer">
-              <img src={`/icons/social/${social.icon}.svg`} alt={social.label} />
-            </a>
-          ))}
+        
+        <!-- Social Links -->
+        <div class="footer-social">
+          <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener" class="social-btn" aria-label="Facebook">
+            <img src="/icons/social/facebook.svg" alt="Facebook" />
+          </a>
+          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="social-btn" aria-label="LINE">
+            <img src="/icons/social/line.svg" alt="LINE" />
+          </a>
+          <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener" class="social-btn" aria-label="LinkedIn">
+            <img src="/icons/social/linkedin.svg" alt="LinkedIn" />
+          </a>
         </div>
       </div>
 
-      <div class="footer-links">
-        <h4>ลิงก์ด่วน</h4>
-        <ul>
-          <li><a href="/">หน้าแรก</a></li>
-          <li><a href="/about">เกี่ยวกับเรา</a></li>
-          <li><a href="/portfolio">ผลงาน</a></li>
-          <li><a href="/blog">บทความ</a></li>
+      <!-- Navigation Links -->
+      <div class="footer-col">
+        <h4 class="footer-title">ลิงก์</h4>
+        <ul class="footer-links">
+          {navLinks.map(link => (
+            <li>
+              <a href={link.href} class="footer-link">
+                <span class="link-arrow">→</span>
+                {link.label}
+              </a>
+            </li>
+          ))}
         </ul>
       </div>
 
-      <div class="footer-links">
-        <h4>บริการ</h4>
-        <ul>
-          <li><a href="/services/consult">Tech Consult</a></li>
-          <li><a href="/services/ai">AI Automation</a></li>
-          <li><a href="/services/marketing">Marketing Automation</a></li>
-          <li><a href="/services/webdev">พัฒนาเว็บไซต์</a></li>
+      <!-- Services -->
+      <div class="footer-col">
+        <h4 class="footer-title">บริการ</h4>
+        <ul class="footer-links">
+          {serviceLinks.map(link => (
+            <li>
+              <a href={link.href} class="footer-link">
+                <span class="link-arrow">→</span>
+                {link.label}
+              </a>
+            </li>
+          ))}
         </ul>
       </div>
 
-      <div class="footer-contact">
-        <h4>ติดต่อ</h4>
-        <p><strong>โทร:</strong> 080-995-5945</p>
-        <p><strong>อีเมล:</strong> contact@moreminimore.com</p>
-        <p><strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
+      <!-- Contact -->
+      <div class="footer-col footer-contact">
+        <h4 class="footer-title">ติดต่อเรา</h4>
+        <div class="contact-item">
+          <span class="contact-icon">📞</span>
+          <a href="tel:0809955945">080-995-5945</a>
+        </div>
+        <div class="contact-item">
+          <span class="contact-icon">✉️</span>
+          <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
+        </div>
+        <div class="contact-item">
+          <span class="contact-icon">📍</span>
+          <span>สมุทรสาคร, ประเทศไทย</span>
+        </div>
+        
+        <a href="/contact" class="btn btn-primary footer-cta">
+          ปรึกษาฟรี
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        </a>
       </div>
     </div>
 
+    <!-- Footer Bottom -->
     <div class="footer-bottom">
-      <p>&copy; {currentYear} บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.</p>
-      <div class="legal-links">
-        {footerLinks.map((link) => (
-          <a href={link.href}>{link.label}</a>
-        ))}
+      <div class="footer-legal">
+        <p>&copy; {currentYear} MoreminiMore. สงวนลิขสิทธิ์.</p>
+      </div>
+      <div class="footer-links-bottom">
+        <a href="/privacy">นโยบายความเป็นส่วนตัว</a>
+        <a href="/terms">เงื่อนไขการใช้บริการ</a>
       </div>
     </div>
   </div>
 </footer>
 
+<!-- Back to Top Button -->
+<button class="back-to-top" id="back-to-top" aria-label="กลับไปด้านบน">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+    <path d="M12 19V5M5 12l7-7 7 7"/>
+  </svg>
+</button>
+
 <style>
+  /* ============================================
+     FOOTER BASE
+     ============================================ */
+  
   .footer {
-    background: var(--color-light-gray);
-    color: var(--color-black);
-    padding: 80px 0 40px;
+    position: relative;
+    background: var(--color-dark);
+    color: var(--color-white);
+    padding: 100px 0 40px;
+    overflow: hidden;
   }
 
+  /* ============================================
+     BACKGROUND
+     ============================================ */
+  
+  .footer-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .bg-dots {
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.06) 1px, transparent 0);
+    background-size: 50px 50px;
+  }
+
+  /* Geometric Elements */
+  .footer-geo {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .geo-circle {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    bottom: -200px;
+    left: -150px;
+    opacity: 0.03;
+  }
+
+  .geo-ring {
+    position: absolute;
+    width: 250px;
+    height: 250px;
+    border: 2px solid var(--color-primary);
+    border-radius: 50%;
+    top: 20%;
+    right: -80px;
+    opacity: 0.08;
+  }
+
+  /* ============================================
+     GRID
+     ============================================ */
+  
   .footer-grid {
     display: grid;
-    grid-template-columns: 2fr 1fr 1fr 1.5fr;
-    gap: 48px;
-    margin-bottom: 60px;
+    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
+    gap: 60px;
+    padding-bottom: 60px;
+    position: relative;
+    z-index: 1;
   }
 
+  /* ============================================
+     BRAND - LOGO BANNER
+     ============================================ */
+  
   .footer-logo {
-    height: 40px;
-    margin-bottom: 16px;
+    display: inline-flex;
+    margin-bottom: 24px;
+  }
+
+  .logo-banner {
+    background: var(--color-white);
+    border-radius: 0 16px 16px 0;
+    padding: 10px 20px 10px 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  .logo-img {
+    height: 32px;
+    width: auto;
+    display: block;
   }
 
   .footer-tagline {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    margin-bottom: 24px;
-    line-height: 1.6;
+    font-size: 15px;
+    line-height: 1.7;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 32px;
   }
 
-  .social-links {
+  /* Social Links */
+  .footer-social {
     display: flex;
-    gap: 16px;
+    gap: 12px;
   }
 
-  .social-link img {
+  .social-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 50%;
+    transition: all 0.3s var(--ease-out-expo);
+  }
+
+  .social-btn img {
     width: 24px;
     height: 24px;
-    opacity: 0.6;
-    transition: opacity 0.2s;
+    object-fit: contain;
   }
 
-  .social-link:hover img {
-    opacity: 1;
+  .social-btn:hover {
+    background: var(--color-primary);
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(254, 212, 0, 0.3);
   }
 
-  .footer-links h4,
-  .footer-contact h4 {
-    font-family: var(--font-heading);
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 20px;
-    color: var(--color-accent);
+  .social-btn:hover img {
+    /* Keep original icon colors */
+    filter: none;
   }
 
-  .footer-links ul {
+  /* ============================================
+     COLUMNS
+     ============================================ */
+  
+  .footer-title {
+    font-family: var(--font-display);
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    color: var(--color-primary);
+    margin-bottom: 24px;
+  }
+
+  .footer-links {
     list-style: none;
-    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 
-  .footer-links li {
+  .footer-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.7);
+    transition: all 0.3s ease;
+  }
+
+  .link-arrow {
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.3s ease;
+  }
+
+  .footer-link:hover {
+    color: var(--color-primary);
+    transform: translateX(8px);
+  }
+
+  .footer-link:hover .link-arrow {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  /* ============================================
+     CONTACT
+     ============================================ */
+  
+  .footer-contact {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .contact-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.7);
     margin-bottom: 12px;
   }
 
-  .footer-links a {
-    color: var(--color-medium-gray);
-    font-size: 14px;
-    transition: color 0.2s;
+  .contact-icon {
+    font-size: 18px;
   }
 
-  .footer-links a:hover {
-    color: var(--color-accent);
+  .contact-item a:hover {
+    color: var(--color-primary);
   }
 
-  .footer-contact p {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    margin-bottom: 12px;
+  .footer-cta {
+    margin-top: auto;
+    align-self: flex-start;
   }
 
-  .footer-contact strong {
-    color: var(--color-black);
+  .footer-cta svg {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.3s ease;
   }
 
+  .footer-cta:hover svg {
+    transform: translateX(6px);
+  }
+
+  /* ============================================
+     BOTTOM
+     ============================================ */
+  
   .footer-bottom {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    padding-top: 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 13px;
-    color: var(--color-medium-gray);
+    padding-top: 32px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    position: relative;
+    z-index: 1;
   }
 
-  .legal-links {
+  .footer-legal p {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  .footer-links-bottom {
     display: flex;
     gap: 24px;
   }
 
-  .legal-links a {
-    color: var(--color-medium-gray);
-    transition: color 0.2s;
+  .footer-links-bottom a {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.4);
+    transition: color 0.3s ease;
   }
 
-  .legal-links a:hover {
-    color: var(--color-accent);
+  .footer-links-bottom a:hover {
+    color: var(--color-primary);
   }
 
+  /* ============================================
+     BACK TO TOP
+     ============================================ */
+  
+  .back-to-top {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    width: 56px;
+    height: 56px;
+    background: var(--color-primary);
+    color: var(--color-black);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px) scale(0.8);
+    transition: all 0.3s var(--ease-out-expo);
+    z-index: 100;
+    box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
+  }
+
+  .back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+  }
+
+  .back-to-top:hover {
+    transform: translateY(-4px) scale(1.05);
+    box-shadow: 0 12px 40px rgba(254, 212, 0, 0.5);
+  }
+
+  .back-to-top svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* ============================================
+     RESPONSIVE
+     ============================================ */
+  
   @media (max-width: 1024px) {
     .footer-grid {
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 48px;
     }
 
     .footer-brand {
@@ -187,8 +452,13 @@ const footerLinks = [
   }
 
   @media (max-width: 640px) {
+    .footer {
+      padding: 60px 0 32px;
+    }
+
     .footer-grid {
       grid-template-columns: 1fr;
+      gap: 40px;
     }
 
     .footer-brand {
@@ -201,9 +471,28 @@ const footerLinks = [
       text-align: center;
     }
 
-    .legal-links {
-      flex-wrap: wrap;
-      justify-content: center;
+    .back-to-top {
+      bottom: 20px;
+      right: 20px;
+      width: 48px;
+      height: 48px;
     }
   }
-</style>
\ No newline at end of file
+</style>
+
+<script>
+  // Back to top functionality
+  const backToTop = document.getElementById('back-to-top');
+  
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 600) {
+      backToTop?.classList.add('visible');
+    } else {
+      backToTop?.classList.remove('visible');
+    }
+  });
+
+  backToTop?.addEventListener('click', () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
+</script>
\ No newline at end of file
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 981c32f..bf5521a 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,465 +1,611 @@
 ---
+/**
+ * MOREMINIMORE - KINETIC HERO COMPONENT
+ * Typography IS the hero - No images, just bold text
+ */
+
 interface Props {
+  badge?: string;
   title: string;
   subtitle?: string;
-  badge?: string;
-  image?: string;
-  theme?: 'yellow' | 'accent';
   showCTA?: boolean;
   ctaText?: string;
   ctaLink?: string;
-  variant?: 'split' | 'centered' | 'image-bg' | 'text-only' | 'floating-cards';
-  size?: 'full' | 'compact';
 }
 
 const {
-  title,
-  subtitle,
-  badge,
-  image = "/images/hero/hero.jpg",
-  theme = 'yellow',
+  badge = "ดิจิทัลเอเจนซี่ในประเทศไทย",
+  title = "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
+  subtitle = "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย | เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
   showCTA = true,
   ctaText = "เริ่มต้นวันนี้",
   ctaLink = "/contact",
-  variant = 'split',
-  size = 'compact'
 } = Astro.props;
 
+// Split title into words for kinetic animation
 const titleWords = title.split(' ');
 ---
 
-<section class={`hero hero-${theme} hero-variant-${variant} hero-size-${size}`}>
-  {variant === 'image-bg' && (
-    <div class="hero-image-bg">
-      <img src={image} alt="" class="hero-bg-img" />
-      <div class="hero-bg-overlay"></div>
-    </div>
-  )}
-
-  <div class="hero-bg-pattern"></div>
+<section class="kinetic-hero">
+  <!-- Animated Background Pattern -->
+  <div class="hero-bg">
+    <div class="bg-grid"></div>
+    <div class="bg-gradient"></div>
+  </div>
+  
+  <!-- Floating Geometric Elements -->
+  <div class="hero-geometric">
+    <div class="geo-circle geo-1"></div>
+    <div class="geo-circle geo-2"></div>
+    <div class="geo-circle geo-3"></div>
+    <div class="geo-ring ring-1"></div>
+    <div class="geo-ring ring-2"></div>
+    <div class="geo-line line-1"></div>
+    <div class="geo-line line-2"></div>
+  </div>
 
   <div class="container hero-container">
-    {variant === 'split' && (
-      <>
-        <div class="hero-content">
-          {badge && <span class="hero-badge">{badge}</span>}
-          <h1 class="hero-title">
-            {titleWords.map((word, i) => (
-              <span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.06}s`}>{word}</span>
-            ))}
-          </h1>
-          {subtitle && <p class="hero-subtitle" set:html={subtitle} />}
-          {showCTA && (
-            <div class="hero-actions">
-              <a href={ctaLink} class="btn btn-dark btn-lg">{ctaText}</a>
-              <a href="/portfolio" class="btn btn-outline-dark btn-lg">ดูผลงาน</a>
-            </div>
-          )}
-        </div>
-        <div class="hero-visual">
-          <div class="hero-image-wrapper">
-            <div class="hero-image-border"></div>
-            <img src={image} alt="Hero" class="hero-image" />
-          </div>
-          <div class="hero-floating hero-floating-1">
-            <span class="floating-number">50+</span>
-            <span class="floating-label">โปรเจกต์</span>
-          </div>
-          <div class="hero-floating hero-floating-2">
-            <span class="floating-number">5+</span>
-            <span class="floating-label">ปีประสบการณ์</span>
-          </div>
-        </div>
-      </>
-    )}
-
-    {variant === 'centered' && (
-      <div class="hero-content centered">
-        {badge && <span class="hero-badge">{badge}</span>}
-        <h1 class="hero-title">
-          {titleWords.map((word, i) => (
-            <span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.06}s`}>{word}</span>
-          ))}
-        </h1>
-        {subtitle && <p class="hero-subtitle" set:html={subtitle} />}
-        {showCTA && (
-          <div class="hero-actions centered">
-            <a href={ctaLink} class="btn btn-dark btn-lg">{ctaText}</a>
-            <a href="/portfolio" class="btn btn-outline-dark btn-lg">ดูผลงาน</a>
-          </div>
-        )}
-        {size === 'full' && (
-          <div class="hero-center-image">
-            <img src={image} alt="" />
-          </div>
-        )}
+    <!-- Badge -->
+    <div class="hero-badge" data-animate="fade-in">
+      <span class="badge-dot"></span>
+      {badge}
+    </div>
+    
+    <!-- Main Title - Kinetic Typography -->
+    <h1 class="hero-title">
+      {titleWords.map((word, index) => (
+        <span class="word-wrapper">
+          <span 
+            class="word" 
+            style={`--delay: ${0.4 + index * 0.12}s`}
+          >
+            {word}
+          </span>
+        </span>
+      ))}
+    </h1>
+    
+    <!-- Accent Line -->
+    <div class="hero-accent-line">
+      <div class="accent-fill"></div>
+    </div>
+    
+    <!-- Subtitle -->
+    <p class="hero-subtitle" data-animate="fade-in-up">
+      <Fragment set:html={subtitle} />
+    </p>
+    
+    <!-- CTA Buttons -->
+    {showCTA && (
+      <div class="hero-actions" data-animate="fade-in-up">
+        <a href={ctaLink} class="btn btn-primary btn-magnetic">
+          <span class="btn-text">{ctaText}</span>
+          <svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        </a>
+        <a href="/portfolio" class="btn btn-outline btn-dark">
+          ดูผลงาน
+        </a>
       </div>
     )}
-
-    {variant === 'text-only' && (
-      <div class="hero-content text-only">
-        <span class="hero-badge">{badge || 'บริการ'}</span>
-        <h1 class="hero-title text-only-title">
-          {titleWords.map((word, i) => (
-            <span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.08}s`}>{word}</span>
-          ))}
-        </h1>
-        {subtitle && <p class="hero-subtitle text-only-sub" set:html={subtitle} />}
-        {showCTA && (
-          <div class="hero-actions">
-            <a href={ctaLink} class="btn btn-dark btn-lg">{ctaText}</a>
-          </div>
-        )}
-      </div>
-    )}
-
-    {variant === 'floating-cards' && (
-      <>
-        <div class="hero-content">
-          {badge && <span class="hero-badge">{badge}</span>}
-          <h1 class="hero-title">
-            {titleWords.map((word, i) => (
-              <span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.06}s`}>{word}</span>
-            ))}
-          </h1>
-          {subtitle && <p class="hero-subtitle" set:html={subtitle} />}
-        </div>
-        {size === 'full' && (
-          <div class="hero-cards-visual">
-            <div class="hero-mini-card card-1">
-              <span class="mini-icon">🌐</span>
-              <span class="mini-text">เว็บไซต์</span>
-            </div>
-            <div class="hero-mini-card card-2">
-              <span class="mini-icon">🤖</span>
-              <span class="mini-text">AI Chatbot</span>
-            </div>
-            <div class="hero-mini-card card-3">
-              <span class="mini-icon">📈</span>
-              <span class="mini-text">Marketing</span>
-            </div>
-            <div class="hero-mini-card card-4">
-              <span class="mini-icon">💡</span>
-              <span class="mini-text">Consult</span>
-            </div>
-          </div>
-        )}
-      </>
-    )}
   </div>
 
-  {size === 'full' && (
-    <div class="hero-wave">
-      <svg viewBox="0 0 1440 120" fill="none" preserveAspectRatio="none">
-        <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H0Z" fill="currentColor"/>
-      </svg>
+  <!-- Giant Background Typography -->
+  <div class="hero-bg-text" aria-hidden="true">
+    AI
+  </div>
+
+  <!-- Scroll Indicator -->
+  <div class="scroll-indicator">
+    <span class="scroll-text">เลื่อนลง</span>
+    <div class="scroll-line">
+      <div class="scroll-dot"></div>
     </div>
-  )}
+  </div>
+
+  <!-- Wave Transition -->
+  <div class="hero-wave">
+    <svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none">
+      <path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="#ffffff"/>
+    </svg>
+  </div>
 </section>
 
 <style>
-  .hero {
+  /* ============================================
+     HERO BASE
+     ============================================ */
+  
+  .kinetic-hero {
     position: relative;
+    min-height: 100vh;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    align-items: center;
+    background: var(--color-dark);
     overflow: hidden;
-    padding-top: 80px;
   }
 
-  .hero-size-full {
-    min-height: 90vh;
-  }
-
-  .hero-size-compact {
-    min-height: auto;
-    padding-top: 120px;
-    padding-bottom: 60px;
-  }
-
-  .hero-yellow { background: var(--color-primary); color: var(--color-black); }
-  .hero-accent { background: var(--color-accent); color: var(--color-white); }
-
-  /* Background Pattern */
-  .hero-bg-pattern {
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.05) 1px, transparent 0);
-    background-size: 40px 40px;
-    pointer-events: none;
-  }
-
-  /* Image Background Variant */
-  .hero-image-bg {
+  /* ============================================
+     BACKGROUND
+     ============================================ */
+  
+  .hero-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
   }
-  .hero-bg-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .hero-bg-overlay {
+
+  .bg-grid {
     position: absolute;
     inset: 0;
-    background: linear-gradient(135deg, rgba(254,212,0,0.95) 0%, rgba(254,212,0,0.8) 50%, rgba(254,212,0,0.6) 100%);
-  }
-  .hero-variant-image-bg .hero-container {
-    position: relative;
-    z-index: 1;
+    background-image: 
+      linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    animation: gridMove 20s linear infinite;
   }
 
-  /* Container */
+  @keyframes gridMove {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(60px, 60px); }
+  }
+
+  .bg-gradient {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse at 30% 20%, rgba(254, 212, 0, 0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 70% 80%, rgba(254, 212, 0, 0.05) 0%, transparent 50%);
+  }
+
+  /* ============================================
+     GEOMETRIC ELEMENTS
+     ============================================ */
+  
+  .hero-geometric {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .geo-circle {
+    position: absolute;
+    border-radius: 50%;
+    background: var(--color-primary);
+  }
+
+  .geo-1 {
+    width: 400px;
+    height: 400px;
+    top: -100px;
+    right: 10%;
+    opacity: 0.05;
+    animation: floatGeo1 12s ease-in-out infinite;
+  }
+
+  .geo-2 {
+    width: 250px;
+    height: 250px;
+    bottom: 10%;
+    left: -50px;
+    opacity: 0.08;
+    animation: floatGeo2 10s ease-in-out infinite;
+  }
+
+  .geo-3 {
+    width: 150px;
+    height: 150px;
+    top: 40%;
+    right: 30%;
+    opacity: 0.04;
+    animation: floatGeo3 8s ease-in-out infinite;
+  }
+
+  @keyframes floatGeo1 {
+    0%, 100% { transform: translate(0, 0) rotate(0deg); }
+    50% { transform: translate(-30px, -50px) rotate(45deg); }
+  }
+
+  @keyframes floatGeo2 {
+    0%, 100% { transform: translate(0, 0); }
+    50% { transform: translate(40px, -30px); }
+  }
+
+  @keyframes floatGeo3 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-20px, 30px) scale(1.1); }
+  }
+
+  .geo-ring {
+    position: absolute;
+    border: 2px solid var(--color-primary);
+    border-radius: 50%;
+    opacity: 0.1;
+  }
+
+  .ring-1 {
+    width: 300px;
+    height: 300px;
+    top: 10%;
+    left: 60%;
+    animation: rotateRing 20s linear infinite;
+  }
+
+  .ring-2 {
+    width: 180px;
+    height: 180px;
+    bottom: 20%;
+    right: 20%;
+    animation: rotateRing 15s linear infinite reverse;
+  }
+
+  @keyframes rotateRing {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .geo-line {
+    position: absolute;
+    background: var(--color-primary);
+    opacity: 0.1;
+  }
+
+  .line-1 {
+    width: 200px;
+    height: 2px;
+    top: 25%;
+    right: 15%;
+    animation: lineSlide 8s ease-in-out infinite;
+  }
+
+  .line-2 {
+    width: 2px;
+    height: 150px;
+    bottom: 30%;
+    left: 25%;
+    animation: lineSlide 10s ease-in-out infinite reverse;
+  }
+
+  @keyframes lineSlide {
+    0%, 100% { transform: translateX(0); opacity: 0.1; }
+    50% { transform: translateX(30px); opacity: 0.2; }
+  }
+
+  /* ============================================
+     CONTAINER & CONTENT
+     ============================================ */
+  
   .hero-container {
-    display: grid;
-    gap: 60px;
-    align-items: center;
-    padding: 40px var(--gutter);
     position: relative;
     z-index: 1;
+    padding: 120px var(--gutter) 100px;
+    max-width: 1200px;
   }
 
-  .hero-size-full .hero-container {
-    min-height: 80vh;
-    padding: 60px var(--gutter);
-  }
-
-  .hero-size-compact .hero-container {
-    min-height: auto;
-  }
-
-  .hero-variant-split .hero-container {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .hero-variant-centered .hero-container {
-    grid-template-columns: 1fr;
-    text-align: center;
-    justify-items: center;
-  }
-
-  .hero-variant-text-only .hero-container {
-    grid-template-columns: 1fr;
-    text-align: center;
-    justify-items: center;
-  }
-
-  .hero-variant-floating-cards .hero-container {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  /* Content */
-  .hero-content { position: relative; }
-  .hero-content.centered { display: flex; flex-direction: column; align-items: center; }
-  .hero-content.text-only { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; }
-
+  /* ============================================
+     BADGE
+     ============================================ */
+  
   .hero-badge {
-    display: inline-block;
-    background: var(--color-black);
-    color: var(--color-primary);
-    padding: 10px 24px;
-    border-radius: 30px;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 24px;
+    background: rgba(254, 212, 0, 0.15);
+    border: 1px solid rgba(254, 212, 0, 0.3);
+    border-radius: var(--radius-full);
+    font-family: var(--font-display);
     font-size: 13px;
     font-weight: 700;
-    font-family: var(--font-heading);
     text-transform: uppercase;
-    letter-spacing: 2px;
-    margin-bottom: 20px;
-    animation: slideIn 0.6s ease forwards;
+    letter-spacing: 3px;
+    color: var(--color-primary);
+    margin-bottom: 40px;
+    opacity: 0;
+    animation: fadeIn 0.6s var(--ease-out-expo) 0.2s forwards;
   }
 
+  .badge-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.5); opacity: 0.5; }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* ============================================
+     KINETIC TITLE
+     ============================================ */
+  
   .hero-title {
-    font-size: clamp(28px, 4vw, 56px);
-    font-weight: 800;
-    line-height: 1.1;
-    margin-bottom: 16px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25em;
-  }
-
-  .hero-size-full .hero-title {
-    font-size: clamp(32px, 5vw, 64px);
-    margin-bottom: 20px;
-  }
-
-  .hero-title-word {
-    display: inline-block;
-    opacity: 0;
-    transform: translateY(50px);
-    animation: slideUp 0.7s ease forwards;
-  }
-
-  .hero-subtitle {
-    font-size: 16px;
-    line-height: 1.7;
-    max-width: 520px;
-    margin-bottom: 24px;
-    opacity: 0;
-    animation: fadeIn 0.8s ease 0.4s forwards;
-  }
-
-  .hero-size-full .hero-subtitle {
-    font-size: 18px;
+    font-family: var(--font-display);
+    font-size: clamp(40px, 8vw, 90px);
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+    color: var(--color-white);
     margin-bottom: 32px;
   }
 
-  .hero-content.centered .hero-subtitle,
-  .hero-content.text-only .hero-subtitle {
-    text-align: center;
+  .word-wrapper {
+    display: inline-block;
+    overflow: hidden;
+  }
+
+  .word {
+    display: inline-block;
+    opacity: 0;
+    transform: translateY(100%) skewY(10deg);
+    animation: wordReveal 0.9s var(--ease-out-expo) forwards;
+    animation-delay: var(--delay);
+  }
+
+  @keyframes wordReveal {
+    0% {
+      opacity: 0;
+      transform: translateY(100%) skewY(10deg);
+    }
+    60% {
+      opacity: 1;
+      transform: translateY(-5%) skewY(-2deg);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) skewY(0);
+    }
+  }
+
+  /* ============================================
+     ACCENT LINE
+     ============================================ */
+  
+  .hero-accent-line {
+    width: 200px;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    margin-bottom: 32px;
+    overflow: hidden;
+    opacity: 0;
+    animation: fadeIn 0.6s var(--ease-out-expo) 1s forwards;
+  }
+
+  .accent-fill {
+    width: 100%;
+    height: 100%;
+    background: var(--color-primary);
+    border-radius: 3px;
+    transform-origin: left;
+    animation: accentDraw 1s var(--ease-out-expo) 1.2s forwards;
+    transform: scaleX(0);
+  }
+
+  @keyframes accentDraw {
+    to { transform: scaleX(1); }
+  }
+
+  /* ============================================
+     SUBTITLE
+     ============================================ */
+  
+  .hero-subtitle {
+    font-size: 20px;
+    line-height: 1.7;
+    color: rgba(255, 255, 255, 0.7);
     max-width: 600px;
+    margin-bottom: 48px;
+    opacity: 0;
+    animation: fadeInUp 0.8s var(--ease-out-expo) 0.8s forwards;
   }
 
-  /* Text Only Variant */
-  .text-only-title {
-    font-size: clamp(32px, 6vw, 72px);
-    text-align: center;
-    justify-content: center;
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
-  .hero-size-full .text-only-title {
-    font-size: clamp(40px, 8vw, 96px);
-  }
-
-  .text-only-sub {
-    font-size: 18px;
-    max-width: 700px;
-  }
-
-  /* Actions */
+  /* ============================================
+     CTA BUTTONS
+     ============================================ */
+  
   .hero-actions {
     display: flex;
-    gap: 16px;
+    gap: 20px;
     flex-wrap: wrap;
     opacity: 0;
-    animation: fadeIn 0.8s ease 0.6s forwards;
+    animation: fadeInUp 0.8s var(--ease-out-expo) 1s forwards;
   }
-  .hero-actions.centered { justify-content: center; }
 
-  @keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
-  @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
-  @keyframes fadeIn { to { opacity: 1; } }
-
-  /* Buttons */
-  .btn-lg { padding: 16px 32px; font-size: 15px; }
-  .hero-size-full .btn-lg { padding: 18px 40px; font-size: 16px; }
-  .btn-dark { background: var(--color-black); color: var(--color-primary); border: none; }
-  .btn-dark:hover { background: var(--color-dark-gray); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
-  .btn-outline-dark { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
-  .btn-outline-dark:hover { background: var(--color-black); color: var(--color-primary); }
-
-  /* Visual / Image */
-  .hero-visual {
+  .btn-magnetic {
     position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    animation: fadeIn 1s ease 0.3s forwards;
+    padding: 24px 48px;
+    font-size: 16px;
   }
 
-  .hero-image-wrapper { position: relative; width: 100%; max-width: 420px; }
-  .hero-image-border {
-    position: absolute;
-    inset: -15px;
-    border: 4px solid var(--color-black);
-    border-radius: 25px;
-    opacity: 0.2;
-    transform: rotate(3deg);
+  .btn-arrow {
+    width: 24px;
+    height: 24px;
+    transition: transform 0.3s var(--ease-out-expo);
   }
-  .hero-image { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,0.2); position: relative; z-index: 1; }
 
-  /* Floating Elements */
-  .hero-floating {
-    position: absolute;
-    background: var(--color-black);
-    color: var(--color-primary);
-    padding: 14px 20px;
-    border-radius: 14px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
-    z-index: 2;
-    animation: float 4s ease-in-out infinite;
+  .btn-magnetic:hover .btn-arrow {
+    transform: translateX(8px);
   }
-  .hero-floating-1 { top: 10%; right: -15px; animation-delay: 0s; }
-  .hero-floating-2 { bottom: 15%; left: -20px; animation-delay: 2s; }
-  .floating-number { font-family: var(--font-heading); font-size: 24px; font-weight: 800; line-height: 1; }
-  .hero-floating-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
 
-  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
-
-  /* Centered Variant Image */
-  .hero-center-image {
-    margin-top: 32px;
-    max-width: 500px;
-    opacity: 0;
-    animation: fadeIn 1s ease 0.5s forwards;
+  .btn-outline.btn-dark {
+    background: transparent;
+    color: var(--color-white);
+    border: 2px solid var(--color-white);
   }
-  .hero-center-image img { width: 100%; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
 
-  /* Floating Cards Visual */
-  .hero-cards-visual {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-    padding: 16px;
-  }
-  .hero-mini-card {
+  .btn-outline.btn-dark:hover {
     background: var(--color-white);
-    border-radius: 16px;
-    padding: 24px;
+    color: var(--color-dark);
+  }
+
+  /* ============================================
+     BACKGROUND TEXT
+     ============================================ */
+  
+  .hero-bg-text {
+    position: absolute;
+    right: -5%;
+    top: 50%;
+    transform: translateY(-50%);
+    font-family: var(--font-display);
+    font-size: clamp(200px, 30vw, 400px);
+    font-weight: 900;
+    text-transform: uppercase;
+    color: var(--color-white);
+    opacity: 0.02;
+    pointer-events: none;
+    user-select: none;
+    line-height: 1;
+  }
+
+  /* ============================================
+     SCROLL INDICATOR
+     ============================================ */
+  
+  .scroll-indicator {
+    position: absolute;
+    bottom: 120px;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 10px;
-    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
-    transition: transform 0.3s;
+    gap: 12px;
+    opacity: 0;
+    animation: fadeIn 0.6s var(--ease-out-expo) 1.5s forwards;
   }
-  .hero-mini-card:hover { transform: translateY(-8px); }
-  .hero-mini-card.card-2 { background: var(--color-accent); color: var(--color-white); }
-  .hero-mini-card.card-4 { background: var(--color-black); color: var(--color-primary); }
-  .mini-icon { font-size: 32px; }
-  .mini-text { font-family: var(--font-heading); font-weight: 600; font-size: 13px; }
 
-  /* Wave */
+  .scroll-text {
+    font-family: var(--font-display);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  .scroll-line {
+    width: 2px;
+    height: 60px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 1px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .scroll-dot {
+    width: 4px;
+    height: 4px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    position: absolute;
+    left: -1px;
+    animation: scrollDot 2s ease-in-out infinite;
+  }
+
+  @keyframes scrollDot {
+    0% { top: 0; opacity: 1; }
+    80% { top: 100%; opacity: 0; }
+    100% { top: 100%; opacity: 0; }
+    0% { top: 0; opacity: 1; }
+  }
+
+  /* ============================================
+     WAVE
+     ============================================ */
+  
   .hero-wave {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 70px;
-    color: var(--color-white);
-    pointer-events: none;
+    height: 100px;
+    z-index: 2;
   }
-  .hero-wave svg { width: 100%; height: 100%; }
 
-  /* Responsive */
+  .hero-wave svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ============================================
+     RESPONSIVE
+     ============================================ */
+  
   @media (max-width: 1024px) {
-    .hero-container { grid-template-columns: 1fr; gap: 32px; text-align: center; }
-    .hero-content.centered, .hero-content.text-only { align-items: center; }
-    .hero-subtitle { margin: 0 auto 24px; }
-    .hero-actions { justify-content: center; }
-    .hero-visual { order: -1; max-width: 350px; margin: 0 auto; }
-    .hero-floating { padding: 10px 16px; }
-    .floating-number { font-size: 20px; }
-    .hero-floating-1 { right: 0; }
-    .hero-floating-2 { left: 0; }
-    .hero-variant-floating-cards .hero-container { grid-template-columns: 1fr; }
-    .hero-cards-visual { max-width: 350px; margin: 0 auto; }
+    .hero-title {
+      font-size: clamp(32px, 7vw, 64px);
+    }
+
+    .hero-container {
+      padding: 100px var(--gutter) 80px;
+    }
+
+    .hero-bg-text {
+      display: none;
+    }
+
+    .scroll-indicator {
+      bottom: 100px;
+    }
   }
 
   @media (max-width: 640px) {
-    .hero-title { font-size: clamp(24px, 7vw, 40px); }
-    .text-only-title { font-size: clamp(28px, 9vw, 56px); }
-    .hero-actions { flex-direction: column; width: 100%; }
-    .btn-lg { width: 100%; justify-content: center; }
-    .hero-image-wrapper { max-width: 260px; }
-    .hero-image-border { inset: -8px; }
-    .hero-cards-visual { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
-    .hero-mini-card { padding: 16px; }
-    .mini-icon { font-size: 24px; }
+    .hero-title {
+      font-size: clamp(28px, 9vw, 48px);
+    }
+
+    .hero-subtitle {
+      font-size: 16px;
+    }
+
+    .hero-actions {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .btn {
+      width: 100%;
+      justify-content: center;
+    }
+
+    .hero-badge {
+      font-size: 11px;
+      padding: 10px 16px;
+    }
+
+    .hero-accent-line {
+      width: 120px;
+    }
+
+    .scroll-indicator {
+      display: none;
+    }
+
+    .hero-wave {
+      height: 60px;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 3f23ce7..6c53d8d 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,274 +1,537 @@
 ---
-const navItems = [
-  { label: "หน้าแรก", href: "/" },
-  { label: "เกี่ยวกับเรา", href: "/about" },
-  {
-    label: "บริการ",
-    submenu: [
-      { label: "Tech Consult", href: "/services/consult" },
-      { label: "AI Automation", href: "/services/ai" },
-      { label: "Marketing Automation", href: "/services/marketing" },
-      { label: "พัฒนาเว็บไซต์", href: "/services/webdev" },
-    ]
-  },
-  { label: "ผลงาน", href: "/portfolio" },
-  { label: "บทความ", href: "/blog" },
-  { label: "ติดต่อ", href: "/contact" },
+/**
+ * MOREMINIMORE - NAVIGATION COMPONENT
+ * Morphing navigation with submenus
+ */
+
+const services = [
+  { label: 'Website Development', href: '/services/webdev' },
+  { label: 'Marketing Automation', href: '/services/marketing' },
+  { label: 'AI Automation', href: '/services/automation' },
+  { label: 'Tech Consult', href: '/services/ai-consult' },
 ];
-
-const currentPath = Astro.url.pathname;
 ---
 
-<header class="header">
-  <nav class="nav container">
-    <a href="/" class="logo">
-      <img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
+<header class="nav" id="nav">
+  <div class="nav-container container">
+    <!-- Logo with Banner Style -->
+    <a href="/" class="nav-logo">
+      <div class="logo-banner">
+        <img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
+      </div>
     </a>
-    <ul class="nav-links">
-      {navItems.map((item) => (
-        <li class:list={["nav-item", { "has-submenu": item.submenu }]}>
-          {item.submenu ? (
-            <>
-              <span class="nav-link nav-dropdown">
-                {item.label}
-                <svg class="dropdown-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
-                  <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-              </span>
-              <ul class="submenu">
-                {item.submenu.map((sub) => (
-                  <li>
-                    <a href={sub.href} class="submenu-link">{sub.label}</a>
-                  </li>
-                ))}
-              </ul>
-            </>
-          ) : (
-            <a
-              href={item.href}
-              class:list={["nav-link", { active: currentPath === item.href }]}
-            >
-              {item.label}
+
+    <!-- Desktop Navigation -->
+    <nav class="nav-desktop">
+      <a href="/" class="nav-link" data-magnetic>หน้าแรก</a>
+      
+      <!-- Services with Submenu -->
+      <div class="nav-dropdown">
+        <a href="/services" class="nav-link nav-dropdown-trigger" data-magnetic>
+          บริการ
+          <svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </a>
+        <div class="nav-dropdown-menu">
+          {services.map(service => (
+            <a href={service.href} class="dropdown-item">
+              {service.label}
             </a>
-          )}
-        </li>
-      ))}
-    </ul>
-    <a href="/contact" class="btn btn-primary nav-cta">ปรึกษาฟรี</a>
-    <button class="mobile-menu-btn" aria-label="Toggle menu">
-      <span></span>
-      <span></span>
-      <span></span>
+          ))}
+        </div>
+      </div>
+      
+      <a href="/portfolio" class="nav-link" data-magnetic>ผลงาน</a>
+      <a href="/blog" class="nav-link" data-magnetic>บทความ</a>
+      <a href="/about" class="nav-link" data-magnetic>เกี่ยวกับเรา</a>
+      <a href="/contact" class="nav-link nav-cta" data-magnetic>ติดต่อเรา</a>
+    </nav>
+
+    <!-- Mobile Menu Toggle -->
+    <button class="nav-toggle" id="nav-toggle" aria-label="Toggle menu">
+      <span class="toggle-line"></span>
+      <span class="toggle-line"></span>
+      <span class="toggle-line"></span>
     </button>
-  </nav>
+  </div>
+
+  <!-- Mobile Navigation Overlay -->
+  <div class="nav-mobile-overlay" id="nav-mobile">
+    <nav class="nav-mobile-content">
+      <a href="/" class="mobile-link">หน้าแรก</a>
+      
+      <!-- Mobile Services with Submenu -->
+      <div class="mobile-dropdown">
+        <button class="mobile-dropdown-trigger">
+          บริการ
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M6 9l6 6 6-6"/>
+          </svg>
+        </button>
+        <div class="mobile-dropdown-content">
+          {services.map(service => (
+            <a href={service.href} class="mobile-link mobile-sublink">{service.label}</a>
+          ))}
+        </div>
+      </div>
+      
+      <a href="/portfolio" class="mobile-link">ผลงาน</a>
+      <a href="/blog" class="mobile-link">บทความ</a>
+      <a href="/about" class="mobile-link">เกี่ยวกับเรา</a>
+      <a href="/contact" class="mobile-link mobile-cta">ติดต่อเรา</a>
+    </nav>
+  </div>
 </header>
 
+<!-- Scroll Progress Bar -->
+<div class="scroll-progress" id="scroll-progress"></div>
+
 <style>
-  .header {
+  /* ============================================
+     NAVIGATION BASE
+     ============================================ */
+  
+  .nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 16px 0;
+    transition: all 0.4s var(--ease-out-expo);
   }
 
-  .nav {
+  .nav.scrolled {
+    padding: 12px 0;
+    background: rgba(26, 26, 46, 0.95);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid rgba(254, 212, 0, 0.1);
+  }
+
+  /* ============================================
+     CONTAINER
+     ============================================ */
+  
+  .nav-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 80px;
+  }
+
+  /* ============================================
+     LOGO BANNER
+     ============================================ */
+  
+  .nav-logo {
+    display: flex;
+    align-items: center;
+    z-index: 1001;
+  }
+
+  .logo-banner {
+    background: var(--color-white);
+    border-radius: 0 0 12px 12px;
+    padding: 8px 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+  }
+
+  .logo-banner:hover {
+    transform: scale(1.02);
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
+  }
+
+  .nav.scrolled .logo-banner {
+    border-radius: 0 0 8px 8px;
+    padding: 6px 12px;
   }
 
   .logo-img {
-    height: 40px;
+    height: 36px;
     width: auto;
+    display: block;
   }
 
-  .nav-links {
+  .nav.scrolled .logo-img {
+    height: 28px;
+  }
+
+  /* ============================================
+     DESKTOP NAVIGATION
+     ============================================ */
+  
+  .nav-desktop {
     display: flex;
-    list-style: none;
+    align-items: center;
     gap: 4px;
   }
 
-  .nav-item {
-    position: relative;
-  }
-
   .nav-link {
-    font-family: var(--font-heading);
-    font-weight: 500;
-    font-size: 15px;
-    color: var(--color-black);
+    position: relative;
     padding: 12px 16px;
-    border-radius: 8px;
-    transition: all 0.2s;
-    cursor: pointer;
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--color-white);
+    transition: color 0.3s ease;
     display: flex;
     align-items: center;
     gap: 4px;
   }
 
   .nav-link:hover {
-    background: var(--color-light-gray);
-  }
-
-  .nav-link.active {
-    color: var(--color-accent);
-  }
-
-  .dropdown-arrow {
-    transition: transform 0.2s;
-  }
-
-  .has-submenu:hover .dropdown-arrow {
-    transform: rotate(180deg);
-  }
-
-  /* Submenu */
-  .submenu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background: var(--color-white);
-    border-radius: 12px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-    padding: 12px 0;
-    min-width: 220px;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-10px);
-    transition: all 0.3s ease;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    list-style: none;
-  }
-
-  .has-submenu:hover .submenu {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-
-  .submenu li {
-    margin: 0;
-  }
-
-  .submenu-link {
-    display: block;
-    padding: 12px 20px;
-    font-family: var(--font-heading);
-    font-size: 14px;
-    color: var(--color-black);
-    transition: all 0.2s;
-  }
-
-  .submenu-link:hover {
-    background: var(--color-accent);
-    color: var(--color-white);
-    border-radius: 0;
+    color: var(--color-primary);
   }
 
   .nav-cta {
-    padding: 12px 24px;
-    font-size: 14px;
+    background: var(--color-primary);
+    color: var(--color-black) !important;
+    border-radius: var(--radius-md);
+    margin-left: 16px;
+    transition: all 0.3s var(--ease-out-expo);
   }
 
-  .mobile-menu-btn {
+  .nav-cta:hover {
+    background: var(--color-primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
+  }
+
+  /* ============================================
+     DROPDOWN
+     ============================================ */
+  
+  .nav-dropdown {
+    position: relative;
+  }
+
+  .nav-dropdown-trigger {
+    cursor: pointer;
+  }
+
+  .dropdown-arrow {
+    width: 16px;
+    height: 16px;
+    transition: transform 0.3s ease;
+  }
+
+  .nav-dropdown:hover .dropdown-arrow {
+    transform: rotate(180deg);
+  }
+
+  .nav-dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(10px);
+    min-width: 220px;
+    background: var(--color-dark);
+    border-radius: var(--radius-lg);
+    padding: 12px 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s var(--ease-out-expo);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(254, 212, 0, 0.1);
+  }
+
+  .nav-dropdown:hover .nav-dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .dropdown-item {
+    display: block;
+    padding: 12px 24px;
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    transition: all 0.2s ease;
+  }
+
+  .dropdown-item:hover {
+    background: rgba(254, 212, 0, 0.1);
+    color: var(--color-primary);
+  }
+
+  /* ============================================
+     MOBILE TOGGLE
+     ============================================ */
+  
+  .nav-toggle {
     display: none;
     flex-direction: column;
+    justify-content: center;
     gap: 5px;
+    width: 44px;
+    height: 44px;
     background: none;
     border: none;
     cursor: pointer;
-    padding: 8px;
+    z-index: 1001;
+    padding: 10px;
   }
 
-  .mobile-menu-btn span {
-    display: block;
+  .toggle-line {
     width: 24px;
     height: 2px;
-    background: var(--color-black);
-    transition: all 0.3s;
+    background: var(--color-white);
+    border-radius: 2px;
+    transition: all 0.3s var(--ease-out-expo);
   }
 
+  .nav-toggle.active .toggle-line:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+  }
+
+  .nav-toggle.active .toggle-line:nth-child(2) {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+
+  .nav-toggle.active .toggle-line:nth-child(3) {
+    transform: rotate(-45deg) translate(5px, -5px);
+  }
+
+  /* ============================================
+     MOBILE OVERLAY
+     ============================================ */
+  
+  .nav-mobile-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--color-dark);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.4s var(--ease-out-expo);
+    z-index: 999;
+  }
+
+  .nav-mobile-overlay.active {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .nav-mobile-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 40px;
+    width: 100%;
+  }
+
+  .mobile-link {
+    font-family: var(--font-display);
+    font-size: 28px;
+    font-weight: 800;
+    color: var(--color-white);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    padding: 14px 32px;
+    transition: all 0.3s ease;
+    opacity: 0;
+    transform: translateY(20px);
+    width: 100%;
+    text-align: center;
+  }
+
+  .nav-mobile-overlay.active .mobile-link {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .nav-mobile-overlay.active .mobile-link:nth-child(1) { transition-delay: 0.1s; }
+  .nav-mobile-overlay.active .mobile-link:nth-child(2) { transition-delay: 0.15s; }
+  .nav-mobile-overlay.active .mobile-link:nth-child(3) { transition-delay: 0.2s; }
+  .nav-mobile-overlay.active .mobile-link:nth-child(4) { transition-delay: 0.25s; }
+  .nav-mobile-overlay.active .mobile-link:nth-child(5) { transition-delay: 0.3s; }
+  .nav-mobile-overlay.active .mobile-link:nth-child(6) { transition-delay: 0.35s; }
+
+  .mobile-link:hover {
+    color: var(--color-primary);
+    transform: translateX(10px);
+  }
+
+  .mobile-cta {
+    background: var(--color-primary);
+    color: var(--color-black) !important;
+    border-radius: var(--radius-lg);
+    margin-top: 20px;
+  }
+
+  /* ============================================
+     MOBILE DROPDOWN
+     ============================================ */
+  
+  .mobile-dropdown {
+    width: 100%;
+    text-align: center;
+  }
+
+  .mobile-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 14px 32px;
+    background: none;
+    border: none;
+    font-family: var(--font-display);
+    font-size: 28px;
+    font-weight: 800;
+    color: var(--color-white);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  .mobile-dropdown-trigger svg {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.3s ease;
+  }
+
+  .mobile-dropdown.open .mobile-dropdown-trigger {
+    color: var(--color-primary);
+  }
+
+  .mobile-dropdown.open .mobile-dropdown-trigger svg {
+    transform: rotate(180deg);
+  }
+
+  .mobile-dropdown-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s var(--ease-out-expo);
+  }
+
+  .mobile-dropdown.open .mobile-dropdown-content {
+    max-height: 300px;
+  }
+
+  .mobile-sublink {
+    font-size: 20px !important;
+    padding: 10px 32px !important;
+    opacity: 0.7;
+  }
+
+  .mobile-sublink:hover {
+    opacity: 1;
+  }
+
+  /* ============================================
+     SCROLL PROGRESS
+     ============================================ */
+  
+  .scroll-progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--color-primary), #ffe066);
+    width: 0;
+    z-index: 1001;
+  }
+
+  /* ============================================
+     RESPONSIVE
+     ============================================ */
+  
   @media (max-width: 1024px) {
-    .nav-links {
-      display: none;
-      position: absolute;
-      top: 80px;
-      left: 0;
-      right: 0;
-      background: var(--color-white);
-      flex-direction: column;
-      padding: 20px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-    }
-
-    .nav-links.active {
-      display: flex;
-    }
-
-    .nav-cta {
+    .nav-desktop {
       display: none;
     }
 
-    .mobile-menu-btn {
+    .nav-toggle {
       display: flex;
     }
+  }
 
-    .nav-item {
-      width: 100%;
-    }
-
-    .nav-link {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    .submenu {
-      position: static;
-      box-shadow: none;
-      padding-left: 20px;
-      border: none;
-      background: transparent;
-      opacity: 1;
-      visibility: visible;
-      transform: none;
-      display: none;
-    }
-
-    .has-submenu.active .submenu {
-      display: block;
-    }
-
-    .has-submenu:hover .submenu {
-      opacity: 1;
-      visibility: visible;
-      transform: none;
+  @media (max-width: 640px) {
+    .mobile-link {
+      font-size: 24px;
+      padding: 12px 24px;
     }
   }
 </style>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const mobileBtn = document.querySelector('.mobile-menu-btn');
-    const navLinks = document.querySelector('.nav-links');
-    const hasSubmenuItems = document.querySelectorAll('.has-submenu');
+  // Navigation scroll effect
+  const nav = document.getElementById('nav');
+  const toggle = document.getElementById('nav-toggle');
+  const mobileNav = document.getElementById('nav-mobile');
+  const scrollProgress = document.getElementById('scroll-progress');
 
-    mobileBtn?.addEventListener('click', () => {
-      navLinks?.classList.toggle('active');
+  // Scroll effect
+  window.addEventListener('scroll', () => {
+    const scrollY = window.scrollY;
+    
+    if (scrollY > 80) {
+      nav?.classList.add('scrolled');
+    } else {
+      nav?.classList.remove('scrolled');
+    }
+    
+    // Scroll progress
+    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    const progress = (scrollY / docHeight) * 100;
+    if (scrollProgress) {
+      scrollProgress.style.width = `${progress}%`;
+    }
+  });
+
+  // Mobile menu toggle
+  toggle?.addEventListener('click', () => {
+    toggle.classList.toggle('active');
+    mobileNav?.classList.toggle('active');
+    document.body.style.overflow = mobileNav?.classList.contains('active') ? 'hidden' : '';
+  });
+
+  // Mobile dropdown toggle
+  document.querySelectorAll('.mobile-dropdown-trigger').forEach(trigger => {
+    trigger.addEventListener('click', () => {
+      trigger.parentElement?.classList.toggle('open');
     });
+  });
 
-    hasSubmenuItems.forEach(item => {
-      const navLink = item.querySelector('.nav-link');
-      navLink?.addEventListener('click', (e) => {
-        e.stopPropagation();
-        item.classList.toggle('active');
-      });
+  // Close mobile menu on link click
+  mobileNav?.querySelectorAll('.mobile-link').forEach(link => {
+    link.addEventListener('click', () => {
+      toggle?.classList.remove('active');
+      mobileNav?.classList.remove('active');
+      document.body.style.overflow = '';
+    });
+  });
+
+  // Magnetic effect for nav links
+  document.querySelectorAll('[data-magnetic]').forEach(el => {
+    el.addEventListener('mousemove', (e) => {
+      const rect = el.getBoundingClientRect();
+      const x = e.clientX - rect.left - rect.width / 2;
+      const y = e.clientY - rect.top - rect.height / 2;
+      
+      (el as HTMLElement).style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
+    });
+    
+    el.addEventListener('mouseleave', () => {
+      (el as HTMLElement).style.transform = 'translate(0, 0)';
     });
   });
 </script>
\ No newline at end of file
diff --git a/src/components/PageHero.astro b/src/components/PageHero.astro
new file mode 100644
index 0000000..bf35602
--- /dev/null
+++ b/src/components/PageHero.astro
@@ -0,0 +1,201 @@
+---
+/**
+ * MOREMINIMORE - PAGE HERO COMPONENT
+ * Magazine-style hero with overlapping floating card
+ */
+
+interface Props {
+  badge?: string;
+  title: string;
+  subtitle?: string;
+}
+
+const {
+  badge,
+  title,
+  subtitle,
+} = Astro.props;
+---
+
+<section class="page-hero">
+  <div class="hero-bg">
+    <div class="bg-dots"></div>
+  </div>
+  
+  <div class="hero-content container">
+    {badge && (
+      <span class="hero-badge">{badge}</span>
+    )}
+    <h1 class="hero-title">{title}</h1>
+    {subtitle && (
+      <p class="hero-subtitle">{subtitle}</p>
+    )}
+  </div>
+
+  <!-- Floating card that overlaps next section (magazine style) -->
+  <div class="hero-float-card">
+    <p>Transform your business with digital solutions</p>
+    <a href="/contact" class="btn-float">Get Started →</a>
+  </div>
+</section>
+
+<style>
+  /* ============================================
+     PAGE HERO BASE
+     ============================================ */
+  
+  .page-hero {
+    position: relative;
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-dark);
+    overflow: hidden;
+    padding-bottom: 80px;
+  }
+
+  /* ============================================
+     BACKGROUND
+     ============================================ */
+  
+  .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.06) 1px, transparent 0);
+    background-size: 40px 40px;
+  }
+
+  /* ============================================
+     CONTENT
+     ============================================ */
+  
+  .hero-content {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    padding: 80px var(--gutter) 120px;
+  }
+
+  .hero-badge {
+    display: inline-block;
+    padding: 8px 20px;
+    background: rgba(254, 212, 0, 0.15);
+    border: 1px solid rgba(254, 212, 0, 0.3);
+    border-radius: var(--radius-full);
+    font-family: var(--font-display);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    color: var(--color-primary);
+    margin-bottom: 24px;
+  }
+
+  .hero-title {
+    font-family: var(--font-display);
+    font-size: clamp(36px, 6vw, 64px);
+    font-weight: 900;
+    line-height: 1.1;
+    text-transform: uppercase;
+    color: var(--color-white);
+    margin-bottom: 16px;
+  }
+
+  .hero-subtitle {
+    font-size: 18px;
+    color: rgba(255, 255, 255, 0.7);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+
+  /* ============================================
+     FLOATING CARD - Magazine Overlap
+     ============================================ */
+  
+  .hero-float-card {
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 700px;
+    background: var(--color-white);
+    border-radius: 24px;
+    padding: 32px 48px;
+    box-shadow: 0 30px 100px rgba(0,0,0,0.15);
+    z-index: 5;
+    text-align: center;
+  }
+
+  .hero-float-card p {
+    font-size: 18px;
+    color: var(--color-gray-600);
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  .btn-float {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 32px;
+    background: var(--color-primary);
+    color: var(--color-black);
+    border-radius: 30px;
+    font-weight: 700;
+    font-size: 15px;
+    transition: all 0.3s ease;
+  }
+
+  .btn-float:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(254, 212, 0, 0.35);
+  }
+
+  /* ============================================
+     RESPONSIVE
+     ============================================ */
+  
+  @media (max-width: 640px) {
+    .page-hero {
+      min-height: 45vh;
+      padding-bottom: 100px;
+    }
+
+    .hero-content {
+      padding: 60px var(--gutter) 100px;
+    }
+
+    .hero-title {
+      font-size: 32px;
+    }
+
+    .hero-subtitle {
+      font-size: 16px;
+    }
+
+    .hero-float-card {
+      width: 92%;
+      padding: 24px 28px;
+      bottom: -25px;
+    }
+
+    .hero-float-card p {
+      font-size: 15px;
+      margin-bottom: 12px;
+    }
+
+    .btn-float {
+      padding: 12px 24px;
+      font-size: 14px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/PortfolioCard.astro b/src/components/PortfolioCard.astro
new file mode 100644
index 0000000..120d5f0
--- /dev/null
+++ b/src/components/PortfolioCard.astro
@@ -0,0 +1,76 @@
+---
+interface Props {
+  name: string;
+  url: string;
+  category: string;
+  category_label: string;
+  thumbnail: string;
+  description: string;
+}
+
+const { name, url, category, category_label, thumbnail, description } = Astro.props;
+---
+
+<a href={url} target="_blank" rel="noopener" class="portfolio-card" data-category={category}>
+  <div class="portfolio-image">
+    <img src={thumbnail} alt={name} loading="lazy" />
+  </div>
+  <div class="portfolio-info">
+    <span class="portfolio-category">{category_label}</span>
+    <h3 class="portfolio-name">{name}</h3>
+    <p class="portfolio-desc">{description}</p>
+  </div>
+</a>
+
+<style>
+  .portfolio-card {
+    display: block;
+    background: rgba(255,255,255,0.03);
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid rgba(255,255,255,0.05);
+    transition: all 0.4s ease;
+  }
+  .portfolio-card:hover {
+    transform: translateY(-8px);
+    background: rgba(255,255,255,0.08);
+    border-color: var(--color-primary);
+  }
+  .portfolio-image {
+    aspect-ratio: 16/10;
+    overflow: hidden;
+  }
+  .portfolio-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+  }
+  .portfolio-card:hover .portfolio-image img { transform: scale(1.05); }
+  .portfolio-info { padding: 24px; }
+  .portfolio-category {
+    display: inline-block;
+    background: var(--color-primary);
+    color: var(--color-black);
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+  .portfolio-name {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--color-white);
+  }
+  .portfolio-desc {
+    font-size: 14px;
+    color: rgba(255,255,255,0.6);
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/SectionHeader.astro b/src/components/SectionHeader.astro
new file mode 100644
index 0000000..a7a7cd1
--- /dev/null
+++ b/src/components/SectionHeader.astro
@@ -0,0 +1,50 @@
+---
+interface Props {
+  badge?: string;
+  title: string;
+  description?: string;
+  align?: "left" | "center";
+}
+
+const { badge, title, description, align = "center" } = Astro.props;
+---
+
+<div class={`section-header section-header-${align}`}>
+  {badge && <span class="section-badge">{badge}</span>}
+  <h2 class="section-title" set:html={title}></h2>
+  {description && <p class="section-desc" set:html={description}></p>}
+</div>
+
+<style>
+  .section-header {
+    margin-bottom: 60px;
+  }
+  .section-header-left { text-align: left; }
+  .section-header-center { text-align: center; }
+  .section-badge {
+    display: inline-block;
+    background: var(--color-primary);
+    color: var(--color-black);
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 16px;
+  }
+  .section-title {
+    font-size: clamp(28px, 4vw, 42px);
+    font-weight: 700;
+    color: var(--color-black);
+    line-height: 1.2;
+  }
+  .section-header-center .section-title { max-width: 600px; margin: 0 auto 16px; }
+  .section-desc {
+    font-size: 18px;
+    color: var(--color-medium-gray);
+    line-height: 1.6;
+    max-width: 600px;
+  }
+  .section-header-center .section-desc { margin: 0 auto; }
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceCard.astro b/src/components/ServiceCard.astro
new file mode 100644
index 0000000..bf5427a
--- /dev/null
+++ b/src/components/ServiceCard.astro
@@ -0,0 +1,188 @@
+---
+/**
+ * MOREMINIMORE - SERVICE CARD COMPONENT
+ * Clean cards with images
+ */
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  image?: string;
+  link: string;
+}
+
+const { title, subtitle, image, link } = Astro.props;
+---
+
+<a href={link} class="service-card">
+  <div class="card-inner">
+    <!-- Image -->
+    <div class="card-image">
+      <img src={image || "/images/services/default.jpg"} alt={title} loading="lazy" />
+      <div class="card-overlay"></div>
+    </div>
+    
+    <!-- Content -->
+    <div class="card-content">
+      <h3 class="card-title">{title}</h3>
+      {subtitle && <p class="card-subtitle">{subtitle}</p>}
+    </div>
+    
+    <!-- Arrow -->
+    <div class="card-arrow">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M5 12h14M12 5l7 7-7 7"/>
+      </svg>
+    </div>
+  </div>
+</a>
+
+<style>
+  /* ============================================
+     SERVICE CARD
+     ============================================ */
+  
+  .service-card {
+    display: block;
+  }
+
+  .card-inner {
+    position: relative;
+    background: var(--color-white);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.4s var(--ease-out-expo);
+    border: 1px solid rgba(0, 0, 0, 0.04);
+  }
+
+  .card-inner::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);
+    z-index: 2;
+  }
+
+  .service-card:hover .card-inner::before {
+    transform: scaleX(1);
+  }
+
+  .service-card:hover .card-inner {
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-8px);
+  }
+
+  .service-card:hover .card-arrow {
+    transform: translateX(8px);
+    opacity: 1;
+  }
+
+  /* ============================================
+     IMAGE
+     ============================================ */
+  
+  .card-image {
+    position: relative;
+    aspect-ratio: 16/10;
+    overflow: hidden;
+  }
+
+  .card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s ease;
+  }
+
+  .service-card:hover .card-image img {
+    transform: scale(1.08);
+  }
+
+  .card-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent 50%, rgba(26, 26, 46, 0.6) 100%);
+    opacity: 0.7;
+    transition: opacity 0.3s ease;
+  }
+
+  .service-card:hover .card-overlay {
+    opacity: 1;
+  }
+
+  /* ============================================
+     CONTENT
+     ============================================ */
+  
+  .card-content {
+    padding: 28px 24px;
+  }
+
+  .card-title {
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 800;
+    color: var(--color-black);
+    margin-bottom: 8px;
+    transition: color 0.3s ease;
+  }
+
+  .service-card:hover .card-title {
+    color: var(--color-dark);
+  }
+
+  .card-subtitle {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--color-gray-600);
+  }
+
+  /* ============================================
+     ARROW
+     ============================================ */
+  
+  .card-arrow {
+    position: absolute;
+    bottom: 24px;
+    right: 24px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-primary);
+    border-radius: 50%;
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.3s var(--ease-out-expo);
+    z-index: 2;
+  }
+
+  .card-arrow svg {
+    width: 20px;
+    height: 20px;
+    stroke: var(--color-black);
+    transition: stroke 0.3s ease;
+  }
+
+  /* ============================================
+     RESPONSIVE
+     ============================================ */
+  
+  @media (max-width: 640px) {
+    .card-content {
+      padding: 24px 20px;
+    }
+
+    .card-title {
+      font-size: 18px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..67413b5
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,26 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const services = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/services' }),
+  schema: z.object({
+    title: z.string(),
+    subtitle: z.string(),
+    badge: z.string(),
+    category: z.string(),
+    objective: z.string(),
+  }),
+});
+
+const blog = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
+  schema: z.object({
+    title: z.string(),
+    excerpt: z.string(),
+    image: z.string(),
+    date: z.date(),
+    category: z.string(),
+  }),
+});
+
+export const collections = { services, blog };
\ No newline at end of file
diff --git a/src/content/blog/5-ways-ai-increase-sales.mdx b/src/content/blog/5-ways-ai-increase-sales.mdx
new file mode 100644
index 0000000..dddf122
--- /dev/null
+++ b/src/content/blog/5-ways-ai-increase-sales.mdx
@@ -0,0 +1,27 @@
+---
+title: "5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ"
+excerpt: "ค้นพบ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายให้ธุรกิจ SMEs ไทย พร้อมตัวอย่างและแนวทางการนำไปใช้จริง"
+image: "/images/blog/5-ways-ai-increase-sales.jpg"
+date: 2026-03-11
+category: "AI Business"
+---
+
+## วิธีที่ 1: ใช้ AI วิเคราะห์ลูกค้าและแนะนำสินค้าที่ตรงใจ
+
+หนึ่งในความสามารถที่ทรงพลังที่สุดของ AI คือการวิเคราะห์ข้อมูลลูกค้าและค้นหารูปแบบที่มนุษย์อาจมองไม่เห็น AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนชอบสินค้าประเภทไหน ซื้อในช่วงเวลาไหน และมีพฤติกรรมการซื้ออย่างไร
+
+## วิธีที่ 2: ใช้ Chatbot ดูแลลูกค้าตลอด 24 ชั่วโมง
+
+ลูกค้าจำนวนมากต้องการได้รับคำตอบทันที ไม่ว่าจะกี่โมง แต่การจ้างพนักงานทำงาน 24 ชั่วโมงนั้นมีค่าใช้จ่ายสูง Chatbot ที่ใช้ AI สามารถตอบคำถามลูกค้าได้ตลอดเวลา โดยไม่ต้องเสียค่าล่วงเวลา
+
+## วิธีที่ 3: ใช้ AI ส่งข้อความการตลาดในเวลาที่เหมาะสม
+
+การส่งข้อความการตลาดไม่ใช่แค่การส่งออกไปเท่านั้น แต่ต้องส่งในเวลาที่ลูกค้ามีโอกาสอ่านและตอบสนองมากที่สุด AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนมีช่วงเวลาไหนที่เปิดอ่านข้อความบ่อยที่สุด และส่งในเวลานั้น
+
+## วิธีที่ 4: ใช้ AI สร้างเนื้อหาการตลาด
+
+เนื้อหาการตลาดที่ดีเป็นหัวใจสำคัญในการดึงดูดลูกค้า แต่การสร้างเนื้อหาที่มีคุณภาพตลอดเวลาต้องใช้เวลาและทรัพยากรมาก AI สามารถช่วยสร้างเนื้อหาได้เร็วขึ้น ไม่ว่าจะเป็นโพสต์เฟซบุ๊ก คำบรรยายสินค้า อีเมลการตลาด หรือบทความบล็อก
+
+## วิธีที่ 5: ใช้ AI ทำนายแนวโน้มและวางแผนสินค้า
+
+การมีสินค้าคงคลงเป็นสิ่งจำเป็นสำหรับธุรกิจค้าปลีก แต่การมีสินค้ามากเกินไปก็เป็นปัญหา AI สามารถวิเคราะห์ข้อมูลยอดขายในอดีต ฤดูกาล และปัจจัยอื่นๆ เพื่อทำนายว่าควรสั่งสินค้าเท่าไหร่ในแต่ละช่วง
\ No newline at end of file
diff --git a/src/content/blog/ai-content-google-love.mdx b/src/content/blog/ai-content-google-love.mdx
new file mode 100644
index 0000000..9d79963
--- /dev/null
+++ b/src/content/blog/ai-content-google-love.mdx
@@ -0,0 +1,22 @@
+---
+title: "วิธีสร้าง Content ด้วย AI ที่ Google รัก"
+excerpt: "เรียนรู้วิธีการใช้ AI ช่วยสร้างเนื้อหาการตลาดที่มีคุณภาพและได้รับการจัดอันดับดีจาก Google พร้อมเทคนิคและตัวอย่างจริง"
+image: "/images/blog/ai-content-google-love.jpg"
+date: 2026-03-10
+category: "AI Content"
+---
+
+## ทำไม AI Content ต้องมีคุณภาพ
+
+Google มีอัลกอริทึมที่ฉลาดมาก สามารถแยกแยะได้ว่าเนื้อหาที่สร้างโดย AI มีคุณภาพหรือไม่ เนื้อหาที่ไม่มีคุณค่า สร้างขึ้นแค่เพื่อใส่คีย์เวิร์ด จะถูกลงโทษและไม่ติดอันดับ
+
+## วิธีใช้ AI สร้างเนื้อหาที่ดี
+
+ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้เขียนทั้งหมด วิธีที่ดีที่สุดคือใช้ AI ช่วยในบางส่วน เช่น รวบรวมข้อมูล สร้างโครงสร้าง หรือเขียน draft แล้วนำมาปรับแก้ด้วยมนุษย์
+
+## เทคนิคการสร้าง AI Content ที่มีคุณภาพ
+
+1. **กำหนด outline ก่อน** - ให้ AI สร้างโครงสร้างก่อน แล้วค่อยเติมเนื้อหา
+2. **เพิ่มมุมมองส่วนตัว** - เพิ่มประสบการณ์และตัวอย่างจริง
+3. **ตรวจสอบข้อเท็จจริง** - AI อาจสร้างข้อมูลที่ไม่ถูกต้อง ต้องตรวจสอบเสมอ
+4. **เพิ่มคุณค่า** - เพิ่มข้อมูลเชิงลึกและความเห็นส่วนตัว
\ No newline at end of file
diff --git a/src/content/blog/ai-for-sme-thailand.mdx b/src/content/blog/ai-for-sme-thailand.mdx
new file mode 100644
index 0000000..b282598
--- /dev/null
+++ b/src/content/blog/ai-for-sme-thailand.mdx
@@ -0,0 +1,27 @@
+---
+title: "AI สำหรับ SME ไทย: คู่มือฉบับสมบูรณ์"
+excerpt: "การใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน พร้อมแนวทางปฏิบัติจริง"
+image: "/images/blog/ai-for-sme-thailand.jpg"
+date: 2026-03-08
+category: "AI Business"
+---
+
+## ทำไม SME ต้องใช้ AI
+
+AI ไม่ใช่เทคโนโลยีสำหรับบริษัทใหญ่เท่านั้น ธุรกิจ SME สามารถเริ่มใช้ประโยชน์จาก AI ได้ง่ายๆ ด้วยเครื่องมือที่เข้าถึงได้
+
+## การเริ่มต้นใช้ AI สำหรับ SME
+
+### 1. เริ่มจากปัญหาที่เจ็บปวดที่สุด
+- ถ้าลูกค้าถามคำถามซ้ำๆ ให้ใช้ AI Chatbot
+- ถ้าต้องส่งอีเมลหลายร้อย封 ให้ใช้ AI Email Automation
+- ถ้าไม่มีเวลาสร้างเนื้อหา ให้ใช้ AI Content Generation
+
+### 2. เลือกเครื่องมือที่เหมาะสม
+- งบน้อย: เริ่มจากเครื่องมือฟรีหรือราคาถูก
+- งบปานกลาง: ใช้บริการ AI as a Service
+- งบมาก: พัฒนา AI เฉพาะทางสำหรับธุรกิจ
+
+### 3. วัดผลและปรับปรุง
+- ติดตาม KPI ก่อนและหลังใช้ AI
+- ปรับปรุงอย่างต่อเนื่อง
\ No newline at end of file
diff --git a/src/content/blog/digital-transformation-guide.mdx b/src/content/blog/digital-transformation-guide.mdx
new file mode 100644
index 0000000..87b8f68
--- /dev/null
+++ b/src/content/blog/digital-transformation-guide.mdx
@@ -0,0 +1,28 @@
+---
+title: "คู่มือ Digital Transformation ฉบับสมบูรณ์"
+excerpt: "การ transform ธุรกิจของคุณสู่ดิจิทัลอย่างครบวงจร ตั้งแต่การวางแผนจนถึงการ Implement"
+image: "/images/blog/digital-transformation.jpg"
+date: 2026-03-05
+category: "Business"
+---
+
+## Digital Transformation คืออะไร
+
+Digital Transformation คือการนำเทคโนโลยีดิจิทัลมาใช้ในทุกด้านของธุรกิจ เพื่อเพิ่มประสิทธิภาพและสร้างคุณค่าใหม่ให้กับลูกค้า
+
+## ขั้นตอนการ Transform
+
+### ขั้นที่ 1: วิเคราะห์สถานะปัจจุบัน
+- ประเมินระดับดิจิทัลของธุรกิจ
+- ระบุจุดอ่อนและโอกาส
+- กำหนดเป้าหมายที่ชัดเจน
+
+### ขั้นที่ 2: วางแผนกลยุทธ์
+- เลือกเทคโนโลยีที่เหมาะสม
+- กำหนด timeline และ budget
+- วางแผนการเปลี่ยนแปลง
+
+### ขั้นที่ 3: Implement
+- เริ่มจากโครงการเล็กๆ
+- ทดสอบและเรียนรู้
+- ขยายผลอย่างค่อยเป็นค่อยไป
\ No newline at end of file
diff --git a/src/content/blog/marketing-automation-guide.mdx b/src/content/blog/marketing-automation-guide.mdx
new file mode 100644
index 0000000..3ae3409
--- /dev/null
+++ b/src/content/blog/marketing-automation-guide.mdx
@@ -0,0 +1,34 @@
+---
+title: "Marketing Automation: คู่มือเริ่มต้น"
+excerpt: "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้นใช้งานสำหรับธุรกิจของคุณ"
+image: "/images/blog/marketing-automation-guide.jpg"
+date: 2026-03-01
+category: "Marketing"
+---
+
+## Marketing Automation คืออะไร
+
+Marketing Automation คือการใช้ซอฟต์แวร์เพื่อ automate การตลาดซ้ำๆ เช่น การส่งอีเมล การโพสต์โซเชียลมีเดีย และการวิเคราะห์ข้อมูล
+
+## ประโยชน์ของ Marketing Automation
+
+1. **ประหยัดเวลา** - ทำงานอัตโนมัติแทนที่จะทำ manually
+2. **เพิ่มประสิทธิภาพ** - ส่งข้อความที่เหมาะสมในเวลาที่เหมาะสม
+3. **วัดผลได้** - ติดตามผลและปรับปรุงอย่างต่อเนื่อง
+
+## เริ่มต้นอย่างไร
+
+### 1. เลือกแพลตฟอร์มที่เหมาะสม
+- งบน้อย: Mailchimp, HubSpot Free
+- งบปานกลาง: ActiveCampaign, Marketo
+- งบมาก: Salesforce, Oracle
+
+### 2. กำหนดเป้าหมาย
+- เพิ่มยอดขาย
+- สร้าง leads
+- รักษาลูกค้า
+
+### 3. สร้าง workflow
+- เริ่มจาก email autoresponder
+- เพิ่ม lead scoring
+- ขยายไปยัง multi-channel
\ No newline at end of file
diff --git a/src/content/services/ai-consult.mdx b/src/content/services/ai-consult.mdx
new file mode 100644
index 0000000..5ec8d55
--- /dev/null
+++ b/src/content/services/ai-consult.mdx
@@ -0,0 +1,26 @@
+---
+title: "AI Consult"
+subtitle: "Consult service for using AI to improve business workflow and knowledge management. ใช้ AI ให้เป็นประโยชน์สำหรับธุรกิจของคุณอย่างเต็มศักยภาพ"
+badge: "Technology Consult"
+category: "tech-consult"
+objective: "ลดต้นทุนและเวลา"
+usp_free_server: "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม"
+feature1_icon: "🧠"
+feature1_title: "AI Strategy & Roadmap"
+feature1_desc: "วางแผนการใช้ AI อย่างเป็นระบบเพื่อให้เห็นผลลัพธ์ที่ชัดเจน"
+feature2_icon: "💬"
+feature2_title: "AI Chatbot Implementation"
+feature2_desc: "พัฒนาและ deploy AI Chatbot ที่เข้าใจภาษาไทยและตอบคำถามลูกค้าได้ 24/7"
+feature3_icon: "📝"
+feature3_title: "Knowledge Management"
+feature3_desc: "สร้างระบบจัดการความรู้ด้วย AI ที่ช่วยให้การค้นหาและใช้งานข้อมูลง่ายขึ้น"
+feature4_icon: "🎯"
+feature4_title: "AI for Marketing"
+feature4_desc: "ใช้ AI วิเคราะห์ลูกค้าและสร้างแคมเปญการตลาดที่มีประสิทธิภาพ"
+feature5_icon: "🔍"
+feature5_title: "AI Audit"
+feature5_desc: "วิเคราะห์ว่าธุรกิจของคุณควรใช้ AI ตัวไหนและอย่างไร"
+feature6_icon: "🚀"
+feature6_title: "AI Implementation Support"
+feature6_desc: "ดูแลและให้คำปรึกษาตลอดการ implement AI ในองค์กร"
+---
\ No newline at end of file
diff --git a/src/content/services/automation.mdx b/src/content/services/automation.mdx
new file mode 100644
index 0000000..732ef25
--- /dev/null
+++ b/src/content/services/automation.mdx
@@ -0,0 +1,26 @@
+---
+title: "Automation Consult"
+subtitle: "Implement specific unique app and AI for business to do automation workflow. ลดต้นทุนและเพิ่มประสิทธิภาพด้วยระบบอัตโนมัติที่ออกแบบมาเฉพาะสำหรับธุรกิจของคุณ"
+badge: "Technology Consult"
+category: "tech-consult"
+objective: "ลดต้นทุนและเวลา"
+usp_free_server: "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม"
+feature1_icon: "🤖"
+feature1_title: "Workflow Automation"
+feature1_desc: "ออกแบบและ implement ระบบ automation สำหรับงานที่ทำซ้ำๆ เช่น การประมวลผลออร์เดอร์ การจัดการ inventory"
+feature2_icon: "📊"
+feature2_title: "Business Process Optimization"
+feature2_desc: "วิเคราะห์และปรับปรุงกระบวนการทำงานให้มีประสิทธิภาพมากขึ้นด้วยเทคโนโลยีล่าสุด"
+feature3_icon: "🔗"
+feature3_title: "System Integration"
+feature3_desc: "เชื่อมต่อระบบต่างๆ ให้ทำงานร่วมกันอย่างราบรื่น เช่น CRM, ERP, E-commerce"
+feature4_icon: "📱"
+feature4_title: "Custom Application"
+feature4_desc: "พัฒนา application เฉพาะทางสำหรับธุรกิจของคุณที่ไม่สามารถหาซื้อได้ทั่วไป"
+feature5_icon: "🔒"
+feature5_title: "Security & Compliance"
+feature5_desc: "ตรวจสอบและปรับปรุงความปลอดภัยของระบบให้เป็นไปตามมาตรฐาน"
+feature6_icon: "📈"
+feature6_title: "Performance Monitoring"
+feature6_desc: "ติดตามและวัดผลประสิทธิภาพของระบบแบบ real-time"
+---
\ No newline at end of file
diff --git a/src/content/services/marketing.mdx b/src/content/services/marketing.mdx
new file mode 100644
index 0000000..b3a5017
--- /dev/null
+++ b/src/content/services/marketing.mdx
@@ -0,0 +1,25 @@
+---
+title: "Online Marketing Automation"
+subtitle: "Use AI to help generate and manage marketing workflow. เพิ่มยอดขายด้วยระบบอัตโนมัติทางการตลาดที่ขับเคลื่อนด้วย AI"
+badge: "Marketing Consult"
+category: "marketing-consult"
+objective: "เพิ่มยอดขาย"
+feature1_icon: "📧"
+feature1_title: "Email Marketing Automation"
+feature1_desc: "สร้าง email campaign อัตโนมัติด้วย AI ที่ personalize ข้อความตามพฤติกรรมลูกค้า"
+feature2_icon: "💬"
+feature2_title: "Social Media Automation"
+feature2_desc: "กำหนดเวลาโพสต์และตอบสนองอัตโนมัติด้วย AI ที่เข้าใจบริบท"
+feature3_icon: "🎯"
+feature3_title: "Lead Generation AI"
+feature3_desc: "ใช้ AI หาและให้คะแนน leads ที่มีโอกาส conversion สูงสุด"
+feature4_icon: "📊"
+feature4_title: "Marketing Analytics"
+feature4_desc: "วิเคราะห์ข้อมูลการตลาดและให้คำแนะนำด้วย AI เพื่อปรับปรุง ROI"
+feature5_icon: "🔄"
+feature5_title: "Workflow Automation"
+feature5_desc: "สร้าง marketing workflow อัตโนมัติตั้งแต่ lead จนถึง sale"
+feature6_icon: "📱"
+feature6_title: "Multi-channel Integration"
+feature6_desc: "เชื่อมต่อทุกช่องทางการตลาดให้ทำงานร่วมกันอย่างไร้รอยต่อ"
+---
\ No newline at end of file
diff --git a/src/content/services/webdev.mdx b/src/content/services/webdev.mdx
new file mode 100644
index 0000000..73eb25b
--- /dev/null
+++ b/src/content/services/webdev.mdx
@@ -0,0 +1,26 @@
+---
+title: "Website Development"
+subtitle: "Implement website for business and integrate the website with marketing workflow. เว็บไซต์ที่ทันสมัย รวดเร็ว และเชื่อมต่อกับระบบการตลาดอย่างไร้รอยต่อ"
+badge: "Marketing Consult"
+category: "marketing-consult"
+objective: "เพิ่มยอดขาย"
+usp_content_edit: "ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce"
+feature1_icon: "⚡"
+feature1_title: "Fast & Modern"
+feature1_desc: "โหลดเร็ว รองรับการขยายตัวของธุรกิจ และใช้เทคโนโลยีล่าสุด"
+feature2_icon: "📱"
+feature2_title: "Responsive Design"
+feature2_desc: "แสดงผลได้ดีบนทุกอุปกรณ์ ทั้ง mobile tablet และ desktop"
+feature3_icon: "🎨"
+feature3_title: "SEO Optimized"
+feature3_desc: "ออกแบบมาเพื่อให้ Google ชอบ ช่วยให้ติดอันดับได้ง่ายขึ้น"
+feature4_icon: "🔗"
+feature4_title: "Marketing Integration"
+feature4_desc: "เชื่อมต่อกับระบบ CRM, Email Marketing และ Analytics ได้อย่างไร้รอยต่อ"
+feature5_icon: "📊"
+feature5_title: "Analytics Dashboard"
+feature5_desc: "ติดตามผู้เข้าชมและวัดผลได้แบบ real-time"
+feature6_icon: "🔒"
+feature6_title: "Security"
+feature6_desc: "Security ระดับสูง ป้องกันการโจมตีและข้อมูลรั่วไหล"
+---
\ No newline at end of file
diff --git a/src/data/portfolio.ts b/src/data/portfolio.ts
new file mode 100644
index 0000000..66cce29
--- /dev/null
+++ b/src/data/portfolio.ts
@@ -0,0 +1,74 @@
+export const portfolioItems = [
+  {
+    name: "Lungfinler",
+    url: "https://lungfinler.com",
+    category: "webdev",
+    category_label: "พัฒนาเว็บไซต์",
+    thumbnail: "/images/portfolio/lungfinler.png",
+    description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง"
+  },
+  {
+    name: "Jet Industries",
+    url: "https://jetindustries.co.th",
+    category: "webdev",
+    category_label: "พัฒนาเว็บไซต์",
+    thumbnail: "/images/portfolio/jetindustries.png",
+    description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี"
+  },
+  {
+    name: "สำนักงานกฎหมาย ตถาตา",
+    url: "https://lawyernoom.com",
+    category: "webdev",
+    category_label: "พัฒนาเว็บไซต์",
+    thumbnail: "/images/portfolio/lawyernoom.png",
+    description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา"
+  },
+  {
+    name: "Underdog Marketing",
+    url: "https://underdog.run",
+    category: "webdev",
+    category_label: "พัฒนาเว็บไซต์",
+    thumbnail: "/images/portfolio/underdog.png",
+    description: "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู"
+  },
+  {
+    name: "Baofuling Shop",
+    url: "https://baofulingshop.com",
+    category: "ecommerce",
+    category_label: "อีคอมเมิร์ซ",
+    thumbnail: "/images/portfolio/baofuling.png",
+    description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน"
+  },
+  {
+    name: "เทรนเนอร์ซันนี่",
+    url: "https://trainersunny.com",
+    category: "webdev",
+    category_label: "พัฒนาเว็บไซต์",
+    thumbnail: "/images/portfolio/trainersunny.png",
+    description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill"
+  },
+  {
+    name: "เลือดจระเข้วานิไทย",
+    url: "https://เลือดจระเข้วานิไทย.com",
+    category: "ecommerce",
+    category_label: "อีคอมเมิร์ซ",
+    thumbnail: "/images/portfolio/luadjob.png",
+    description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ"
+  },
+  {
+    name: "ทวนทอง 99",
+    url: "https://tuanthong99.com",
+    category: "ecommerce",
+    category_label: "อีคอมเมิร์ซ",
+    thumbnail: "/images/portfolio/tuanthong.png",
+    description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง"
+  },
+  {
+    name: "Odoo Portal",
+    url: "https://odooportal.com",
+    category: "marketing",
+    category_label: "ที่ปรึกษาการตลาด",
+    thumbnail: "/images/portfolio/odooportal.png",
+    description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย"
+  }
+];
\ No newline at end of file
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 320b4ac..e0f6a96 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -1,10 +1,15 @@
 ---
+import "../styles/global.css";
+
 interface Props {
   title: string;
   description?: string;
 }
 
-const { title, description = "MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot" } = Astro.props;
+const {
+  title,
+  description = "MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย | เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
+} = Astro.props;
 ---
 
 <!doctype html>
@@ -13,14 +18,11 @@ const { title, description = "MoreminiMore - รับทำเว็บไซ
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
+    <meta name="theme-color" content="#1a1a2e" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{title}</title>
   </head>
-  <body>
+  <body style="margin: 0; background: #ffffff;">
     <slot />
   </body>
-</html>
-
-<style is:global>
-  @import '../styles/global.css';
-</style>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/src/live.config.ts b/src/live.config.ts
index bafd352..af85895 100644
--- a/src/live.config.ts
+++ b/src/live.config.ts
@@ -1,6 +1,7 @@
 import { defineLiveCollection } from "astro:content";
 import { emdashLoader } from "emdash/runtime";
 
+// EmDash CMS Collections
 export const collections = {
   _emdash: defineLiveCollection({ loader: emdashLoader() }),
 };
\ No newline at end of file
diff --git a/src/pages/.omc/state/agent-replay-e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.jsonl b/src/pages/.omc/state/agent-replay-e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.jsonl
new file mode 100644
index 0000000..c184a39
--- /dev/null
+++ b/src/pages/.omc/state/agent-replay-e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.jsonl
@@ -0,0 +1,7 @@
+{"t":0,"agent":"aa3cbfe","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"af23dcd","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a734a6b","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a27cab4","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"a7cb1f3","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"aa9fb06","agent_type":"unknown","event":"agent_stop","success":true}
+{"t":0,"agent":"aa710ef","agent_type":"unknown","event":"agent_stop","success":true}
diff --git a/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-22-24-371Z.json b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-22-24-371Z.json
new file mode 100644
index 0000000..43da98e
--- /dev/null
+++ b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-22-24-371Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-13T03:22:24.370Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-38-42-950Z.json b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-38-42-950Z.json
new file mode 100644
index 0000000..3c9e8b8
--- /dev/null
+++ b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-38-42-950Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-13T03:38:42.949Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T14-16-02-792Z.json b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T14-16-02-792Z.json
new file mode 100644
index 0000000..554199c
--- /dev/null
+++ b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T14-16-02-792Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-13T14:16:02.791Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/src/pages/.omc/state/checkpoints/checkpoint-2026-05-14T01-41-35-233Z.json b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-14T01-41-35-233Z.json
new file mode 100644
index 0000000..e64c78e
--- /dev/null
+++ b/src/pages/.omc/state/checkpoints/checkpoint-2026-05-14T01-41-35-233Z.json
@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-14T01:41:35.232Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}
\ No newline at end of file
diff --git a/src/pages/.omc/state/last-tool-error.json b/src/pages/.omc/state/last-tool-error.json
new file mode 100644
index 0000000..e016777
--- /dev/null
+++ b/src/pages/.omc/state/last-tool-error.json
@@ -0,0 +1,7 @@
+{
+  "tool_name": "Bash",
+  "tool_input_preview": "{\"command\":\"for path in \\\"/\\\" \\\"/portfolio\\\" \\\"/blog\\\" \\\"/services/ai\\\" \\\"/services/marketing\\\"; do echo -n \\\"$path: \\\"; curl -s -o /dev/null -w \\\"%{http_code}\\\\n\\\" \\\"http://localhost:4321${path}\\\"; d...",
+  "error": "Exit code 127",
+  "timestamp": "2026-05-14T02:15:35.813Z",
+  "retry_count": 1
+}
\ No newline at end of file
diff --git a/src/pages/.omc/state/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3/session-started.json b/src/pages/.omc/state/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3/session-started.json
new file mode 100644
index 0000000..8d87dcd
--- /dev/null
+++ b/src/pages/.omc/state/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3/session-started.json
@@ -0,0 +1,6 @@
+{
+  "session_id": "e5f480d6-2b75-4bfe-b154-b1e53e34e0a3",
+  "started_at": "2026-05-14T01:42:56.165Z",
+  "cwd": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site/src/pages",
+  "pid": 65131
+}
\ No newline at end of file
diff --git a/src/pages/.omc/state/subagent-tracking.json b/src/pages/.omc/state/subagent-tracking.json
new file mode 100644
index 0000000..5c3d597
--- /dev/null
+++ b/src/pages/.omc/state/subagent-tracking.json
@@ -0,0 +1,7 @@
+{
+  "agents": [],
+  "total_spawned": 0,
+  "total_completed": 0,
+  "total_failed": 0,
+  "last_updated": "2026-05-14T02:36:34.781Z"
+}
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 34fa903..e7d077a 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,128 +1,46 @@
 ---
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
-import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
-
-const whyChooseUs = [
-  { icon: "🎯", title: "ตรงต่อความต้องการ", desc: "เราเข้าใจว่าทุกธุรกิจมีความแตกต่าง เราออกแบบโซลูชันที่เหมาะกับคุณ" },
-  { icon: "⚡", title: "ส่งงานรวดเร็ว", desc: "ทำงานอย่างมีประสิทธิภาพ ส่งมอบงานตรงเวลา ไม่ผิดสัญญา" },
-  { icon: "🛡️", title: "รับประกันคุณภาพ", desc: "หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจ" },
-  { icon: "💬", title: "ดูแลต่อเนื่อง", desc: "ให้บริการดูแลหลังการขาย พร้อม support ตลอด 24 ชม." }
-];
+import PageHero from '../components/PageHero.astro';
 ---
 
-<Base title="เกี่ยวกับเรา | MoreminiMore">
+<Base title="เกี่ยวกับเรา - MoreminiMore">
   <Navigation />
-
-  <Hero
-    title="เกี่ยวกับ มอร์มินิมอร์"
-    subtitle="บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย"
+  
+  <PageHero 
     badge="เกี่ยวกับเรา"
-    image="/images/hero/about.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="centered"
-    size="compact"
+    title="MOREMINIMORE"
+    subtitle="ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่"
   />
 
-  <!-- About Content -->
-  <section class="section about-section">
+  <section class="about-content-section" style="background: #ffffff; margin-top: -2px; padding: 100px 0;">
     <div class="container">
       <div class="about-grid">
-        <div class="about-image">
-          <img src="/images/hero/about-us-hero.jpg" alt="MoreminiMore Team" />
-        </div>
-        <div class="about-content">
-          <span class="section-badge">เราคือใคร</span>
-          <h2 class="section-title">เราคือทีมงานด้านดิจิทัลที่พร้อมเปลี่ยนธุรกิจของคุณ</h2>
+        <div class="about-content reveal">
+          <h2 class="about-title">เราคือทีมที่สร้างสรรค์<br/>โซลูชันดิจิทัล</h2>
           <p class="about-text">
-            MoreminiMore เป็นทีมงานที่มีประสบการณ์ในการพัฒนาเว็บไซต์และระบบอัตโนมัติมากว่า 5 ปี
-            เราเชื่อว่าเทคโนโลยีดิจิทัลสามารถช่วยเพิ่มยอดขายและลดต้นทุนให้ธุรกิจได้อย่างมีประสิทธิภาพ
+            MoreminiMore ก่อตั้งขึ้นด้วยความมุ่งมั่นในการช่วยเหลือธุรกิจไทยให้เติบโตในยุคดิจิทัล 
+            เราเชื่อว่าเทคโนโลยี AI และระบบอัตโนมัติสามารถช่วยเพิ่มประสิทธิภาพและลดต้นทุนได้อย่างมาก
           </p>
           <p class="about-text">
-            ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญหลากหลายสาขา ไม่ว่าจะเป็นด้านการพัฒนาเว็บไซต์
-            การตลาดดิจิทัล AI Automation และการให้คำปรึกษาด้านเทคโนโลยี
+            ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญด้านการพัฒนาเว็บไซต์ การตลาดดิจิทัล และ AI 
+            ที่พร้อมให้คำปรึกษาและออกแบบโซลูชันที่เหมาะสมกับความต้องการของแต่ละธุรกิจ
           </p>
-          <div class="about-stats">
-            <div class="stat">
-              <span class="stat-number">50+</span>
-              <span class="stat-label">โปรเจกต์</span>
-            </div>
-            <div class="stat">
-              <span class="stat-number">40+</span>
-              <span class="stat-label">ลูกค้า</span>
-            </div>
-            <div class="stat">
-              <span class="stat-number">5+</span>
-              <span class="stat-label">ปีประสบการณ์</span>
-            </div>
+        </div>
+        <div class="about-values reveal">
+          <div class="value-card">
+            <span class="value-number">50+</span>
+            <span class="value-label">โปรเจกต์สำเร็จ</span>
           </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Services Overview -->
-  <section class="section section-light services-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">บริการของเรา</span>
-        <h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
-      </div>
-      <div class="services-grid">
-        <div class="service-item">
-          <span class="service-icon">🌐</span>
-          <h3 class="service-title">พัฒนาเว็บไซต์</h3>
-          <p class="service-desc">สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการของลูกค้าของคุณ</p>
-        </div>
-        <div class="service-item">
-          <span class="service-icon">📈</span>
-          <h3 class="service-title">Marketing Automation</h3>
-          <p class="service-desc">Automate การตลาดของคุณเพื่อเพิ่มประสิทธิภาพและลดต้นทุน</p>
-        </div>
-        <div class="service-item">
-          <span class="service-icon">🤖</span>
-          <h3 class="service-title">AI Automation</h3>
-          <p class="service-desc">นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการลูกค้า</p>
-        </div>
-        <div class="service-item">
-          <span class="service-icon">💡</span>
-          <h3 class="service-title">Tech Consult</h3>
-          <p class="service-desc">ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Why Choose Us -->
-  <section class="section why-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">ทำไมต้องเลือกเรา</span>
-        <h2 class="section-title">เหตุผลที่ลูกค้าไว้วางใจเรา</h2>
-      </div>
-      <div class="why-grid">
-        {whyChooseUs.map((item, i) => (
-          <div class="why-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
-            <span class="why-icon">{item.icon}</span>
-            <h3 class="why-title">{item.title}</h3>
-            <p class="why-desc">{item.desc}</p>
+          <div class="value-card">
+            <span class="value-number">40+</span>
+            <span class="value-label">ลูกค้าที่ไว้วางใจ</span>
+          </div>
+          <div class="value-card">
+            <span class="value-number">5+</span>
+            <span class="value-label">ปีประสบการณ์</span>
           </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section class="section section-primary cta-section">
-    <div class="container">
-      <div class="cta-content">
-        <h2 class="cta-title">พร้อมเริ่มทำงานกับเรา?</h2>
-        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมรับฟังโปรเจกต์ของคุณ</p>
-        <div class="cta-actions">
-          <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
-          <a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
         </div>
       </div>
     </div>
@@ -132,268 +50,88 @@ const whyChooseUs = [
 </Base>
 
 <style>
-  .hero {
-    padding: 160px 0 80px;
-    background: var(--color-black);
-    text-align: center;
-  }
-
-  .hero-badge {
-    display: inline-block;
-    background: rgba(254, 212, 0, 0.1);
-    color: var(--color-primary);
-    padding: 8px 20px;
-    border-radius: 30px;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 24px;
-    border: 1px solid rgba(254, 212, 0, 0.2);
-  }
-
-  .hero-title {
-    font-size: clamp(48px, 10vw, 96px);
-    font-weight: 800;
-    color: var(--color-white);
-    margin-bottom: 16px;
-    text-transform: uppercase;
-  }
-
-  .hero-desc {
-    font-size: 20px;
-    color: #999;
-    max-width: 600px;
-    margin: 0 auto;
-    line-height: 1.8;
-  }
-
-  .about-section {
-    background: var(--color-white);
+  .about-content-section {
+    /* Inline styles handle background and padding */
   }
 
   .about-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1.5fr 1fr;
     gap: 80px;
     align-items: center;
   }
 
-  .about-image {
-    border-radius: 24px;
-    overflow: hidden;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
-  }
-
-  .about-image img {
-    width: 100%;
-    height: auto;
-    display: block;
-  }
-
-  .section-badge {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 6px 16px;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: var(--font-heading);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 16px;
-  }
-
-  .section-title {
-    font-size: clamp(28px, 4vw, 40px);
-    font-weight: 700;
-    margin-bottom: 24px;
+  .about-title {
+    font-family: var(--font-display);
+    font-size: clamp(32px, 5vw, 48px);
+    font-weight: 900;
+    line-height: 1.2;
+    margin-bottom: 32px;
+    color: var(--color-dark);
   }
 
   .about-text {
-    font-size: 16px;
-    color: var(--color-medium-gray);
+    font-size: 18px;
     line-height: 1.8;
-    margin-bottom: 20px;
+    color: var(--color-gray-600);
+    margin-bottom: 24px;
   }
 
-  .about-stats {
+  .about-values {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
+
+  .value-card {
     display: flex;
-    gap: 48px;
-    margin-top: 40px;
-    padding-top: 40px;
-    border-top: 1px solid #eee;
-  }
-
-  .stat {
+    flex-direction: column;
+    align-items: center;
+    padding: 32px 20px;
+    background: var(--color-gray-100);
+    border-radius: var(--radius-xl);
     text-align: center;
   }
 
-  .stat-number {
-    display: block;
-    font-family: var(--font-heading);
-    font-size: 40px;
-    font-weight: 800;
+  .value-number {
+    font-family: var(--font-display);
+    font-size: 48px;
+    font-weight: 900;
     color: var(--color-primary);
     line-height: 1;
     margin-bottom: 8px;
   }
 
-  .stat-label {
+  .value-label {
     font-size: 14px;
-    color: var(--color-medium-gray);
+    color: var(--color-gray-600);
     text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-
-  .services-section {
-    background: var(--color-light-gray);
-  }
-
-  .section-header {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  .services-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 32px;
-  }
-
-  .service-item {
-    text-align: center;
-    padding: 40px 24px;
-    background: var(--color-white);
-    border-radius: 16px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
-  }
-
-  .service-icon {
-    font-size: 48px;
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .service-title {
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .service-desc {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .why-section {
-    background: var(--color-white);
-  }
-
-  .why-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 32px;
-  }
-
-  .why-card {
-    padding: 40px 32px;
-    text-align: center;
-  }
-
-  .why-icon {
-    font-size: 48px;
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .why-title {
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .why-desc {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .cta-section {
-    padding: 100px 0;
-  }
-
-  .cta-content {
-    text-align: center;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
-  .cta-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 800;
-    margin-bottom: 16px;
-  }
-
-  .cta-desc {
-    font-size: 18px;
-    margin-bottom: 40px;
-    opacity: 0.8;
-  }
-
-  .cta-actions {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  .btn-lg {
-    padding: 18px 40px;
-    font-size: 16px;
-  }
-
-  .btn-outline {
-    background: transparent;
-    color: var(--color-black);
-    border: 2px solid var(--color-black);
-  }
-
-  .btn-outline:hover {
-    background: var(--color-black);
-    color: var(--color-white);
+    letter-spacing: 2px;
   }
 
   @media (max-width: 1024px) {
     .about-grid {
       grid-template-columns: 1fr;
-      gap: 40px;
-    }
-
-    .services-grid,
-    .why-grid {
-      grid-template-columns: repeat(2, 1fr);
+      gap: 48px;
     }
   }
 
   @media (max-width: 640px) {
-    .services-grid,
-    .why-grid {
-      grid-template-columns: 1fr;
+    .about-values {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
     }
 
-    .about-stats {
-      flex-wrap: wrap;
-      gap: 24px;
+    .value-card {
+      padding: 24px 16px;
     }
 
-    .cta-actions {
-      flex-direction: column;
+    .value-number {
+      font-size: 36px;
     }
 
-    .btn-lg {
-      width: 100%;
-      justify-content: center;
+    .value-label {
+      font-size: 12px;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 4aee8b5..cb8c102 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -1,104 +1,96 @@
 ---
 import Base from '../../layouts/Base.astro';
 import Navigation from '../../components/Navigation.astro';
-import Hero from '../../components/Hero.astro';
 import Footer from '../../components/Footer.astro';
+import PageHero from '../../components/PageHero.astro';
+import { getCollection, render } from 'astro:content';
 
-export function getStaticPaths() {
-  const posts = [
-    { slug: "5-ways-ai-increase-sales", title: "5 วิธี AI เพิ่มยอดขาย", image: "/images/blog/5-ways-ai-increase-sales.jpg" },
-    { slug: "ai-content-google-love", title: "AI Content ที่ Google รัก", image: "/images/blog/ai-content-google-love.jpg" },
-    { slug: "ai-for-sme-thailand", title: "AI สำหรับ SME ไทย", image: "/images/blog/ai-for-sme-thailand.jpg" },
-    { slug: "back-office-automation", title: "Back Office Automation", image: "/images/blog/back-office-automation.jpg" },
-    { slug: "chatbot-business-case-study", title: "Chatbot Business Case Study", image: "/images/blog/chatbot-business-case-study.jpg" },
-    { slug: "data-driven-marketing", title: "Data Driven Marketing", image: "/images/blog/data-driven-marketing.jpg" },
-    { slug: "digital-transformation-guide", title: "Digital Transformation Guide", image: "/images/blog/digital-transformation.jpg" },
-    { slug: "marketing-automation-guide", title: "Marketing Automation Guide", image: "/images/blog/marketing-automation-guide.jpg" },
-    { slug: "seo-2026-business-guide", title: "SEO 2026 สำหรับ Business", image: "/images/blog/seo-2026-business-guide.jpg" },
-    { slug: "website-2026-must-have", title: "Website 2026 Must Have", image: "/images/blog/website-2026-must-have.jpg" }
-  ];
+// For SSR mode, use Astro.params directly
+const { slug } = Astro.params;
 
-  return posts.map(post => ({
-    params: { slug: post.slug },
-    props: { post }
-  }));
+const allPosts = await getCollection('blog');
+// Use id for matching since slug might be undefined
+const post = allPosts.find(p => p.id === slug);
+
+if (!post) {
+  return Astro.redirect('/404');
 }
 
-const { post } = Astro.props;
+const { Content } = await render(post);
+
+const related = allPosts
+  .filter(p => p.id !== post.id)
+  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
+  .slice(0, 3);
+
+const formattedDate = post.data.date.toLocaleDateString('th-TH', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+});
 ---
 
-<Base title={`${post.title} | MoreminiMore`}>
+<Base title={`${post.data.title} | MoreminiMore`}>
   <Navigation />
 
-  <Hero
-    title={post.title}
-    subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
-    badge="บทความ"
-    image={post.image}
-    theme="yellow"
-    showCTA={false}
+  <PageHero 
+    badge={post.data.category}
+    title={post.data.title}
+    subtitle={formattedDate}
   />
 
-  <!-- Article Section -->
+  <!-- Article Image -->
+  {post.data.image && (
+    <div class="article-image">
+      <div class="container">
+        <img src={post.data.image} alt={post.data.title} />
+      </div>
+    </div>
+  )}
+
+  <!-- Article Content -->
   <section class="section article-section">
     <div class="container">
-      <div class="article-layout">
+      <div class="article-grid">
         <article class="article-content">
-          <div class="article-hero">
-            <img src={post.image} alt={post.title} />
-          </div>
           <div class="article-body">
-            <p class="article-lead">
-              ในยุคที่ AI กลายเป็นเครื่องมือสำคัญในการทำธุรกิจ หลายคนอาจสงสัยว่า AI สามารถช่วยเพิ่มยอดขายได้อย่างไร
-            </p>
-
-            <h2>AI กับการเพิ่มยอดขาย</h2>
-            <p>
-              AI สามารถช่วยเพิ่มยอดขายได้หลายวิธี ไม่ว่าจะเป็นการวิเคราะห์พฤติกรรมลูกค้า การทำ Personalization
-              การ automate การตลาด และการให้บริการลูกค้าตลอด 24 ชั่วโมง
-            </p>
-
-            <h2>วิธีที่ 1: Chatbot ตอบคำถามลูกค้า</h2>
-            <p>
-              Chatbot ที่ขับเคลื่อนด้วย AI สามารถตอบคำถามลูกค้าได้ตลอด 24 ชั่วโมง โดยไม่ต้องมีพนักงาน wake อยู่
-              นอกจากนี้ยังสามารถเก็บข้อมูลลูกค้าและแนะนำสินค้าที่เหมาะสมได้อีกด้วย
-            </p>
-
-            <h2>วิธีที่ 2: วิเคราะห์ข้อมูลลูกค้า</h2>
-            <p>
-              AI สามารถวิเคราะห์ข้อมูลลูกค้าเพื่อหา pattern และ insights ที่ซ่อนอยู่ ทำให้ธุรกิจเข้าใจลูกค้าได้ลึกขึ้น
-              และสามารถนำไปปรับปรุงสินค้าหรือบริการได้ตรงจุด
-            </p>
-
-            <h2>วิธีที่ 3: Personalization</h2>
-            <p>
-              AI สามารถสร้างประสบการณ์ที่ personalized ให้กับลูกค้าแต่ละคน ไม่ว่าจะเป็นการแนะนำสินค้าที่สนใจ
-              การส่ง offer ที่เหมาะสม หรือการปรับ content ให้ตรงกับความต้องการ
-            </p>
-
-            <h2>สรุป</h2>
-            <p>
-              AI สามารถช่วยเพิ่มยอดขายได้อย่างมาก สิ่งสำคัญคือการเลือกใช้ AI ให้เหมาะกับธุรกิจของคุณ
-              และเริ่มต้นจากจุดที่มี impact สูงสุดก่อน
-            </p>
+            <Content />
           </div>
         </article>
-
+        
+        <!-- Sidebar -->
         <aside class="article-sidebar">
-          <div class="sidebar-widget">
-            <h3>บริการที่เกี่ยวข้อง</h3>
-            <ul class="related-services">
-              <li><a href="/services/ai">AI Automation</a></li>
-              <li><a href="/services/marketing">Marketing Automation</a></li>
-              <li><a href="/services/webdev">พัฒนาเว็บไซต์</a></li>
-            </ul>
+          <!-- About -->
+          <div class="sidebar-card">
+            <h3 class="sidebar-title">เกี่ยวกับ MoreminiMore</h3>
+            <p class="sidebar-text">
+              ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่
+            </p>
+            <a href="/about" class="btn btn-dark btn-sm">ดูเพิ่มเติม</a>
           </div>
 
-          <div class="sidebar-widget">
-            <h3>ติดต่อปรึกษา</h3>
-            <p>สนใจใช้ AI ในธุรกิจของคุณ?</p>
-            <a href="/contact" class="btn btn-primary">ปรึกษาฟรี</a>
+          <!-- Contact -->
+          <div class="sidebar-card">
+            <h3 class="sidebar-title">สนใจบริการ?</h3>
+            <p class="sidebar-text">ติดต่อเราได้เลย ปรึกษาฟรี!</p>
+            <a href="/contact" class="btn btn-primary btn-sm">ติดต่อเรา</a>
+            <a href="tel:0809955945" class="btn btn-outline btn-sm" style="margin-top: 8px;">080-995-5945</a>
           </div>
+
+          <!-- Related Posts -->
+          {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>
     </div>
@@ -108,134 +100,206 @@ const { post } = Astro.props;
 </Base>
 
 <style>
-  .hero {
-    padding: 140px 0 60px;
-    background: var(--color-black);
+  .article-image {
+    padding: 40px 0;
+    background: var(--color-gray-100);
   }
-
-  .back-link {
-    display: inline-block;
-    color: var(--color-primary);
-    font-size: 14px;
-    margin-bottom: 24px;
-    transition: opacity 0.2s;
-  }
-
-  .back-link:hover {
-    opacity: 0.8;
-  }
-
-  .hero-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 800;
-    color: var(--color-white);
-    max-width: 800px;
+  .article-image img {
+    width: 100%;
+    max-height: 500px;
+    object-fit: cover;
+    border-radius: 20px;
   }
 
   .article-section {
-    background: var(--color-white);
+    padding-top: 60px;
   }
 
-  .article-layout {
+  .article-grid {
     display: grid;
-    grid-template-columns: 1fr 320px;
-    gap: 64px;
-  }
-
-  .article-hero {
-    margin-bottom: 48px;
-    border-radius: 16px;
-    overflow: hidden;
-  }
-
-  .article-hero img {
-    width: 100%;
-    height: auto;
+    grid-template-columns: 1fr 360px;
+    gap: 60px;
   }
 
   .article-body {
-    max-width: 720px;
-  }
-
-  .article-lead {
-    font-size: 20px;
-    color: var(--color-medium-gray);
+    font-size: 18px;
     line-height: 1.8;
-    margin-bottom: 32px;
-    padding-bottom: 32px;
-    border-bottom: 1px solid #eee;
+    color: var(--color-gray-600);
   }
 
-  .article-body h2 {
-    font-size: 24px;
+  .article-body :global(h2) {
+    font-size: 28px;
     font-weight: 700;
-    margin: 40px 0 16px;
+    color: var(--color-dark);
+    margin: 40px 0 20px;
   }
 
-  .article-body p {
-    font-size: 16px;
-    color: var(--color-medium-gray);
-    line-height: 1.8;
+  .article-body :global(h3) {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--color-dark);
+    margin: 32px 0 16px;
+  }
+
+  .article-body :global(p) {
     margin-bottom: 20px;
   }
 
+  .article-body :global(ul), .article-body :global(ol) {
+    margin: 20px 0;
+    padding-left: 24px;
+  }
+
+  .article-body :global(li) {
+    margin-bottom: 12px;
+  }
+
+  .article-body :global(a) {
+    color: var(--color-primary);
+    font-weight: 600;
+  }
+
+  .article-body :global(a:hover) {
+    text-decoration: underline;
+  }
+
+  .article-body :global(blockquote) {
+    border-left: 4px solid var(--color-primary);
+    padding-left: 24px;
+    margin: 32px 0;
+    font-style: italic;
+    color: var(--color-gray-600);
+  }
+
+  .article-body :global(img) {
+    border-radius: 12px;
+    margin: 24px 0;
+  }
+
+  /* Sidebar */
   .article-sidebar {
     display: flex;
     flex-direction: column;
-    gap: 32px;
+    gap: 24px;
   }
 
-  .sidebar-widget {
-    background: var(--color-light-gray);
+  .sidebar-card {
+    background: var(--color-gray-100);
     border-radius: 16px;
     padding: 28px;
   }
 
-  .sidebar-widget h3 {
+  .sidebar-title {
     font-size: 18px;
     font-weight: 700;
+    color: var(--color-dark);
     margin-bottom: 16px;
   }
 
-  .related-services {
-    list-style: none;
-    padding: 0;
-  }
-
-  .related-services li {
-    margin-bottom: 12px;
-  }
-
-  .related-services a {
-    color: var(--color-medium-gray);
+  .sidebar-text {
     font-size: 14px;
-    transition: color 0.2s;
-  }
-
-  .related-services a:hover {
-    color: var(--color-primary);
-  }
-
-  .sidebar-widget p {
-    font-size: 14px;
-    color: var(--color-medium-gray);
+    color: var(--color-gray-600);
+    line-height: 1.6;
     margin-bottom: 16px;
   }
 
+  .btn-sm {
+    padding: 12px 20px;
+    font-size: 14px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-dark {
+    background: var(--color-dark);
+    color: var(--color-white);
+  }
+
+  .btn-dark:hover {
+    background: var(--color-dark-light);
+  }
+
+  .btn-primary {
+    background: var(--color-primary);
+    color: var(--color-black);
+  }
+
+  .btn-primary:hover {
+    background: var(--color-primary-dark);
+  }
+
+  .btn-outline {
+    background: transparent;
+    border: 2px solid var(--color-dark);
+    color: var(--color-dark);
+  }
+
+  .btn-outline:hover {
+    background: var(--color-dark);
+    color: var(--color-white);
+  }
+
+  /* Related Posts */
+  .related-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .related-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: var(--color-white);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+  }
+
+  .related-item:hover {
+    transform: translateX(4px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+
+  .related-item img {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 8px;
+    flex-shrink: 0;
+  }
+
+  .related-item span {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-dark);
+    line-height: 1.3;
+  }
+
   @media (max-width: 1024px) {
-    .article-layout {
+    .article-grid {
       grid-template-columns: 1fr;
     }
 
     .article-sidebar {
       order: -1;
-      flex-direction: row;
-      flex-wrap: wrap;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .article-sidebar {
+      grid-template-columns: 1fr;
     }
 
-    .sidebar-widget {
-      flex: 1;
-      min-width: 280px;
+    .article-body {
+      font-size: 16px;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 2803679..b33697a 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -1,147 +1,58 @@
 ---
 import Base from '../../layouts/Base.astro';
 import Navigation from '../../components/Navigation.astro';
-import Hero from '../../components/Hero.astro';
 import Footer from '../../components/Footer.astro';
+import PageHero from '../../components/PageHero.astro';
+import BlogCard from '../../components/BlogCard.astro';
+import { getCollection } from 'astro:content';
 
-const blogPosts = [
-  {
-    slug: "5-ways-ai-increase-sales",
-    title: "5 วิธี AI เพิ่มยอดขาย",
-    excerpt: "เรียนรู้ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายของคุณได้อย่างมีประสิทธิภาพ",
-    image: "/images/blog/5-ways-ai-increase-sales.jpg",
-    date: "2026-01-15",
-    category: "AI"
-  },
-  {
-    slug: "ai-content-google-love",
-    title: "AI Content ที่ Google รัก",
-    excerpt: "วิธีสร้าง AI Content ที่ท z้ both user-friendly และ SEO-friendly",
-    image: "/images/blog/ai-content-google-love.jpg",
-    date: "2026-01-10",
-    category: "AI"
-  },
-  {
-    slug: "ai-for-sme-thailand",
-    title: "AI สำหรับ SME ไทย",
-    excerpt: "คู่มือการใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน",
-    image: "/images/blog/ai-for-sme-thailand.jpg",
-    date: "2026-01-05",
-    category: "AI"
-  },
-  {
-    slug: "back-office-automation",
-    title: "Back Office Automation",
-    excerpt: "ลดต้นทุนและเพิ่มประสิทธิภาพด้วยระบบอัตโนมัติ",
-    image: "/images/blog/back-office-automation.jpg",
-    date: "2025-12-28",
-    category: "Automation"
-  },
-  {
-    slug: "chatbot-business-case-study",
-    title: "Chatbot Business Case Study",
-    excerpt: "กรณีศึกษาการใช้ Chatbot เพื่อเพิ่มยอดขายและลดต้นทุนการให้บริการ",
-    image: "/images/blog/chatbot-business-case-study.jpg",
-    date: "2025-12-20",
-    category: "Chatbot"
-  },
-  {
-    slug: "data-driven-marketing",
-    title: "Data Driven Marketing",
-    excerpt: "การตลาดที่ขับเคลื่อนด้วยข้อมูลเพื่อผลลัพธ์ที่ดีที่สุด",
-    image: "/images/blog/data-driven-marketing.jpg",
-    date: "2025-12-15",
-    category: "Marketing"
-  },
-  {
-    slug: "digital-transformation-guide",
-    title: "Digital Transformation Guide",
-    excerpt: "คู่มือฉบับสมบูรณ์สำหรับการ transform ธุรกิจของคุณสู่ดิจิทัล",
-    image: "/images/blog/digital-transformation.jpg",
-    date: "2025-12-10",
-    category: "Business"
-  },
-  {
-    slug: "marketing-automation-guide",
-    title: "Marketing Automation Guide",
-    excerpt: "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้น",
-    image: "/images/blog/marketing-automation-guide.jpg",
-    date: "2025-12-05",
-    category: "Marketing"
-  },
-  {
-    slug: "seo-2026-business-guide",
-    title: "SEO 2026 Business Guide",
-    excerpt: "การทำ SEO สำหรับธุรกิจในยุค 2026 ต้องรู้อะไรบ้าง",
-    image: "/images/blog/seo-2026-business-guide.jpg",
-    date: "2025-11-28",
-    category: "SEO"
-  },
-  {
-    slug: "website-2026-must-have",
-    title: "Website 2026 Must Have",
-    excerpt: "ฟีเจอร์ที่เว็บไซต์ต้องมีในปี 2026",
-    image: "/images/blog/website-2026-must-have.jpg",
-    date: "2025-11-20",
-    category: "Web Dev"
-  }
-];
-
-const categories = ["ทั้งหมด", "AI", "Marketing", "Automation", "SEO", "Web Dev", "Business", "Chatbot"];
-
-function formatDate(dateStr: string) {
-  const date = new Date(dateStr);
-  return date.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' });
-}
+const blogPosts = await getCollection('blog');
+const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
-<Base title="บทความ | MoreminiMore">
+<Base title="บทความ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
-  <!-- Hero Section -->
-  <Hero
-    title="ความรู้ด้านดิจิทัล"
-    subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
+  <PageHero 
     badge="บทความ"
-    image="/images/hero/blog-hero.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="centered"
-    size="compact"
+    title="บทความ"
+    subtitle="ความรู้ด้านดิจิทัลและเทคนิคใหม่ๆ สำหรับธุรกิจไทย"
   />
 
-  <!-- Blog Section -->
-  <section class="section blog-section">
-    <div class="container">
-      <!-- Featured Post -->
-      <div class="featured-post">
-        <a href={`/blog/${blogPosts[0].slug}`} class="featured-card">
+  <!-- Featured Post -->
+  {sortedPosts.length > 0 && (
+    <section class="section featured-section">
+      <div class="container">
+        <a href={`/blog/${sortedPosts[0].id}`} class="featured-card">
           <div class="featured-image">
-            <img src={blogPosts[0].image} alt={blogPosts[0].title} />
+            {sortedPosts[0].data.image && (
+              <img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="eager" />
+            )}
           </div>
           <div class="featured-content">
-            <span class="category-badge">{blogPosts[0].category}</span>
-            <h2 class="featured-title">{blogPosts[0].title}</h2>
-            <p class="featured-excerpt">{blogPosts[0].excerpt}</p>
+            <span class="category-badge">{sortedPosts[0].data.category}</span>
+            <h2 class="featured-title">{sortedPosts[0].data.title}</h2>
+            <p class="featured-excerpt">{sortedPosts[0].data.excerpt}</p>
             <span class="read-more">อ่านต่อ →</span>
           </div>
         </a>
       </div>
+    </section>
+  )}
 
-      <!-- Blog Grid -->
+  <!-- Blog Grid -->
+  <section class="section blog-section">
+    <div class="container">
       <div class="blog-grid">
-        {blogPosts.slice(1).map((post) => (
-          <a href={`/blog/${post.slug}`} class="blog-card card">
-            <div class="blog-image">
-              <img src={post.image} alt={post.title} loading="lazy" />
-            </div>
-            <div class="blog-content">
-              <span class="category-badge">{post.category}</span>
-              <h3 class="blog-title">{post.title}</h3>
-              <p class="blog-excerpt">{post.excerpt}</p>
-              <span class="blog-date">{formatDate(post.date)}</span>
-            </div>
-          </a>
+        {sortedPosts.slice(1).map((post, i) => (
+          <BlogCard
+            title={post.data.title}
+            excerpt={post.data.excerpt}
+            image={post.data.image}
+            date={post.data.date}
+            slug={post.id}
+            category={post.data.category}
+          />
         ))}
       </div>
     </div>
@@ -162,182 +73,99 @@ function formatDate(dateStr: string) {
 </Base>
 
 <style>
-  
-  .blog-section {
+  .featured-section {
     background: var(--color-white);
+    padding-top: 80px;
   }
-
-  .featured-post {
-    margin-bottom: 60px;
-  }
-
   .featured-card {
     display: grid;
     grid-template-columns: 1.5fr 1fr;
-    gap: 48px;
-    background: var(--color-light-gray);
+    gap: 0;
+    background: var(--color-dark);
     border-radius: 24px;
     overflow: hidden;
+    transition: transform 0.4s ease;
   }
-
+  .featured-card:hover { transform: scale(1.01); }
   .featured-image {
     aspect-ratio: 16/10;
     overflow: hidden;
   }
-
   .featured-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transition: transform 0.5s;
+    transition: transform 0.5s ease;
   }
-
-  .featured-card:hover .featured-image img {
-    transform: scale(1.05);
-  }
-
+  .featured-card:hover .featured-image img { transform: scale(1.05); }
   .featured-content {
     padding: 48px;
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
-
   .category-badge {
     display: inline-block;
     background: var(--color-primary);
     color: var(--color-black);
-    padding: 6px 16px;
-    border-radius: 20px;
+    padding: 6px 14px;
+    border-radius: 12px;
     font-size: 12px;
     font-weight: 600;
     align-self: flex-start;
     margin-bottom: 16px;
   }
-
   .featured-title {
-    font-size: 32px;
+    font-size: clamp(24px, 3vw, 32px);
     font-weight: 700;
+    color: var(--color-white);
     margin-bottom: 16px;
     line-height: 1.3;
   }
-
   .featured-excerpt {
-    font-size: 16px;
-    color: var(--color-medium-gray);
+    font-size: 15px;
+    color: rgba(255,255,255,0.6);
     line-height: 1.7;
     margin-bottom: 24px;
   }
-
   .read-more {
     color: var(--color-primary);
     font-weight: 600;
-    font-size: 16px;
+    font-size: 14px;
   }
 
+  .blog-section { background: var(--color-gray-100); }
   .blog-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
   }
 
-  .blog-card {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  .blog-image {
-    aspect-ratio: 16/10;
-    overflow: hidden;
-  }
-
-  .blog-image img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.5s;
-  }
-
-  .blog-card:hover .blog-image img {
-    transform: scale(1.05);
-  }
-
-  .blog-content {
-    padding: 24px;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .blog-title {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 8px;
-    line-height: 1.4;
-  }
-
-  .blog-excerpt {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-    margin-bottom: 16px;
-    flex-grow: 1;
-  }
-
-  .blog-date {
-    font-size: 12px;
-    color: #999;
-  }
-
-  .cta-section {
-    padding: 100px 0;
-  }
-
-  .cta-content {
-    text-align: center;
-    max-width: 600px;
-    margin: 0 auto;
-  }
-
+  .section-primary { background: var(--color-primary); }
+  .cta-content { text-align: center; }
   .cta-title {
-    font-size: clamp(28px, 4vw, 40px);
+    font-size: clamp(28px, 4vw, 42px);
     font-weight: 800;
     margin-bottom: 16px;
+    color: var(--color-black);
   }
-
   .cta-desc {
     font-size: 18px;
+    color: rgba(0,0,0,0.7);
     margin-bottom: 32px;
-    opacity: 0.8;
-  }
-
-  .btn-lg {
-    padding: 18px 40px;
-    font-size: 16px;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
   }
+  .btn-lg { padding: 16px 36px; font-size: 16px; }
 
   @media (max-width: 1024px) {
-    .featured-card {
-      grid-template-columns: 1fr;
-    }
-
-    .blog-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
+    .featured-card { grid-template-columns: 1fr; }
+    .featured-image { aspect-ratio: 16/7; }
+    .blog-grid { grid-template-columns: repeat(2, 1fr); }
   }
-
   @media (max-width: 640px) {
-    .blog-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .featured-content {
-      padding: 32px;
-    }
-
-    .featured-title {
-      font-size: 24px;
-    }
+    .blog-grid { grid-template-columns: 1fr; }
+    .featured-content { padding: 32px; }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 9b01deb..4edb8a6 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,22 +1,17 @@
 ---
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
-import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
+import PageHero from '../components/PageHero.astro';
 ---
 
-<Base title="ติดต่อเรา | MoreminiMore">
+<Base title="ติดต่อเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
-  <Hero
-    title="พูดคุยกับเรา วันนี้เลย!"
-    subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
+  <PageHero 
     badge="ติดต่อเรา"
-    image="/images/hero/contact.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="text-only"
-    size="compact"
+    title="ติดต่อเรา"
+    subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
   />
 
   <!-- Contact Section -->
@@ -27,7 +22,11 @@ import Footer from '../components/Footer.astro';
           <h2 class="info-title">ข้อมูลติดต่อ</h2>
 
           <div class="contact-item">
-            <span class="contact-icon">📞</span>
+            <div class="contact-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+              </svg>
+            </div>
             <div class="contact-detail">
               <h3>โทรศัพท์</h3>
               <a href="tel:0809955945">080-995-5945</a>
@@ -35,7 +34,12 @@ import Footer from '../components/Footer.astro';
           </div>
 
           <div class="contact-item">
-            <span class="contact-icon">✉️</span>
+            <div class="contact-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+                <polyline points="22,6 12,13 2,6"/>
+              </svg>
+            </div>
             <div class="contact-detail">
               <h3>อีเมล</h3>
               <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
@@ -43,7 +47,11 @@ import Footer from '../components/Footer.astro';
           </div>
 
           <div class="contact-item">
-            <span class="contact-icon">💬</span>
+            <div class="contact-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+              </svg>
+            </div>
             <div class="contact-detail">
               <h3>LINE</h3>
               <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer">@moreminimore</a>
@@ -51,7 +59,12 @@ import Footer from '../components/Footer.astro';
           </div>
 
           <div class="contact-item">
-            <span class="contact-icon">📍</span>
+            <div class="contact-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+                <circle cx="12" cy="10" r="3"/>
+              </svg>
+            </div>
             <div class="contact-detail">
               <h3>ที่อยู่</h3>
               <p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
@@ -59,7 +72,12 @@ import Footer from '../components/Footer.astro';
           </div>
 
           <div class="contact-item">
-            <span class="contact-icon">⏰</span>
+            <div class="contact-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/>
+                <polyline points="12 6 12 12 16 14"/>
+              </svg>
+            </div>
             <div class="contact-detail">
               <h3>เวลาทำการ</h3>
               <p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
@@ -70,13 +88,13 @@ import Footer from '../components/Footer.astro';
             <h3>ติดตามเรา</h3>
             <div class="social-links">
               <a href="https://www.facebook.com/moreminimore" class="social-link" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
-                <img src="/icons/social/facebook.svg" alt="Facebook" />
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
               </a>
               <a href="https://line.me/ti/p/~@539hdlul" class="social-link" aria-label="LINE" target="_blank" rel="noopener noreferrer">
-                <img src="/icons/social/line.svg" alt="LINE" />
+                <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>
               </a>
               <a href="https://www.linkedin.com/company/moreminimore" class="social-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
-                <img src="/icons/social/linkedin.svg" alt="LinkedIn" />
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
               </a>
             </div>
           </div>
@@ -84,9 +102,7 @@ import Footer from '../components/Footer.astro';
 
         <div class="contact-form-wrapper">
           <form class="contact-form" id="contact-form">
-            <div class="form-header">
-              <h2 class="form-title">ส่งข้อความ</h2>
-            </div>
+            <h2 class="form-title">ส่งข้อความ</h2>
 
             <div class="form-group">
               <label for="name">ชื่อ-นามสกุล</label>
@@ -122,8 +138,8 @@ import Footer from '../components/Footer.astro';
 
             <button type="submit" class="btn btn-primary btn-submit">
               ส่งข้อความ
-              <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
               </svg>
             </button>
           </form>
@@ -140,10 +156,8 @@ import Footer from '../components/Footer.astro';
     e.preventDefault();
     const form = e.target as HTMLFormElement;
     const submitBtn = form.querySelector('.btn-submit') as HTMLButtonElement;
-
     submitBtn.textContent = 'กำลังส่ง...';
     submitBtn.disabled = true;
-
     setTimeout(() => {
       alert('ขอบคุณที่ติดต่อเรา! เราจะติดต่อกลับเร็วๆ นี้');
       form.reset();
@@ -154,224 +168,149 @@ import Footer from '../components/Footer.astro';
 </script>
 
 <style>
-  .hero {
-    padding: 160px 0 100px;
-    background: var(--color-black);
-    text-align: center;
-  }
-
-  .hero-badge {
-    display: inline-block;
-    background: rgba(254, 212, 0, 0.1);
-    color: var(--color-primary);
-    padding: 8px 20px;
-    border-radius: 30px;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 32px;
-    border: 1px solid rgba(254, 212, 0, 0.2);
-  }
-
-  .hero-title {
-    font-size: clamp(40px, 8vw, 72px);
-    font-weight: 800;
-    color: var(--color-white);
-    line-height: 1.1;
-    margin-bottom: 24px;
-  }
-
-  .title-line {
-    display: block;
-  }
-
-  .title-line.accent {
-    color: var(--color-primary);
-  }
-
-  .hero-desc {
-    font-size: 18px;
-    color: #999;
-    line-height: 1.8;
-  }
-
+  .contact-section { background: var(--color-white); }
   .contact-grid {
     display: grid;
-    grid-template-columns: 1fr 1.5fr;
-    gap: 64px;
+    grid-template-columns: 1fr 1.2fr;
+    gap: 80px;
   }
-
   .info-title {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 32px;
+    color: var(--color-black);
   }
-
   .contact-item {
     display: flex;
     gap: 20px;
     margin-bottom: 28px;
     align-items: flex-start;
   }
-
   .contact-icon {
-    font-size: 28px;
     width: 48px;
     height: 48px;
-    background: var(--color-light-gray);
+    background: var(--color-primary);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
-
+  .contact-icon svg {
+    width: 22px;
+    height: 22px;
+    color: var(--color-white);
+  }
   .contact-detail h3 {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 600;
     color: var(--color-medium-gray);
     margin-bottom: 4px;
     text-transform: uppercase;
     letter-spacing: 1px;
   }
-
   .contact-detail a,
   .contact-detail p {
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
     color: var(--color-black);
   }
-
-  .contact-detail a:hover {
-    color: var(--color-primary);
-  }
-
+  .contact-detail a:hover { color: var(--color-primary); }
   .social-section {
     margin-top: 40px;
     padding-top: 40px;
     border-top: 1px solid #eee;
   }
-
   .social-section h3 {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 16px;
+    color: var(--color-black);
   }
-
-  .social-links {
-    display: flex;
-    gap: 16px;
-  }
-
+  .social-links { display: flex; gap: 12px; }
   .social-link {
-    width: 48px;
-    height: 48px;
-    background: var(--color-light-gray);
-    border-radius: 12px;
+    width: 44px;
+    height: 44px;
+    background: var(--color-gray-100);
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
   }
-
   .social-link:hover {
     background: var(--color-primary);
-    transform: translateY(-4px);
-  }
-
-  .social-link img {
-    width: 24px;
-    height: 24px;
-  }
-
-  .form-header {
-    grid-column: span 2;
+    transform: translateY(-2px);
   }
+  .social-link svg { width: 20px; height: 20px; color: var(--color-black); }
+  .social-link:hover svg { color: var(--color-white); }
 
   .contact-form-wrapper {
-    background: var(--color-light-gray);
+    background: var(--color-dark);
     border-radius: 24px;
     padding: 48px;
   }
-
   .form-title {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 32px;
+    color: var(--color-white);
   }
-
   .contact-form {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 24px;
+    gap: 20px;
   }
-
   .form-group {
     display: flex;
     flex-direction: column;
   }
-
-  .form-group-full {
-    grid-column: span 2;
-  }
-
+  .form-group-full { grid-column: span 2; }
   .form-group label {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 600;
     margin-bottom: 8px;
-    color: var(--color-black);
+    color: rgba(255,255,255,0.7);
   }
-
   .form-group input,
   .form-group select,
   .form-group textarea {
-    padding: 16px 20px;
-    border: 2px solid transparent;
+    padding: 14px 18px;
+    border: 2px solid rgba(255,255,255,0.1);
     border-radius: 12px;
-    font-size: 16px;
+    font-size: 15px;
     font-family: var(--font-body);
-    background: var(--color-white);
+    background: rgba(255,255,255,0.05);
+    color: var(--color-white);
     transition: all 0.3s;
   }
-
+  .form-group input::placeholder,
+  .form-group textarea::placeholder {
+    color: rgba(255,255,255,0.3);
+  }
   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus {
     outline: none;
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 4px rgba(254, 212, 0, 0.1);
+    background: rgba(255,255,255,0.08);
   }
-
-  .form-group textarea {
-    resize: vertical;
-    min-height: 120px;
-  }
-
+  .form-group select option { background: var(--color-dark); color: var(--color-white); }
+  .form-group textarea { resize: vertical; min-height: 120px; }
   .btn-submit {
     grid-column: span 2;
     justify-self: start;
-    padding: 18px 40px;
-    font-size: 16px;
+    padding: 16px 32px;
+    font-size: 15px;
   }
+  .btn-submit svg { width: 18px; height: 18px; }
 
   @media (max-width: 1024px) {
-    .contact-grid {
-      grid-template-columns: 1fr;
-      gap: 48px;
-    }
+    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
   }
-
   @media (max-width: 640px) {
-    .contact-form {
-      grid-template-columns: 1fr;
-    }
-
-    .form-group-full,
-    .btn-submit {
-      grid-column: span 1;
-    }
-
-    .contact-form-wrapper {
-      padding: 32px 24px;
-    }
+    .contact-form { grid-template-columns: 1fr; }
+    .form-group-full, .btn-submit { grid-column: span 1; }
+    .contact-form-wrapper { padding: 32px 24px; }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index f9849e9..9f40097 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -1,107 +1,66 @@
 ---
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
-import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
+import PageHero from '../components/PageHero.astro';
 
-const faqItems = [
+const faqData = [
   {
     category: "บริการ",
-    questions: [
-      {
-        q: "MoreminiMore ให้บริการอะไรบ้าง?",
-        a: "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย"
-      },
-      {
-        q: "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?",
-        a: "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application"
-      },
-      {
-        q: "AI Chatbot สามารถทำอะไรได้บ้าง?",
-        a: "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้"
-      }
+    icon: "🎯",
+    items: [
+      { q: "บริการของเรามีอะไรบ้าง?", a: "เราให้บริการ รับทำเว็บไซต์, Marketing Automation, AI Automation และ Technology Consult สำหรับธุรกิจไทย" },
+      { q: "สามารถปรับแต่งงานตามความต้องการได้ไหม?", a: "ใช่! เราออกแบบโซลูชันที่เหมาะกับความต้องการเฉพาะของแต่ละธุรกิจ" },
     ]
   },
   {
     category: "ราคา",
-    questions: [
-      {
-        q: "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?",
-        a: "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี"
-      },
-      {
-        q: "มี包月 หรือรายปีไหม?",
-        a: "มี เรามีแพ็คเกจรายเดือนสำหรับบริการดูแลเว็บไซต์และ Marketing Automation ที่เริ่มต้นที่ 2,500 บาท/เดือน"
-      },
-      {
-        q: "ชำระเงินแบบไหนได้บ้าง?",
-        a: "เรารองรับการชำระเงินผ่าน PromptPay และโอนเงินผ่านธนาคาร สำหรับโปรเจกต์ใหญ่สามารถผ่อนชำระได้"
-      }
+    icon: "💰",
+    items: [
+      { q: "ราคาเริ่มต้นเท่าไหร่?", a: "ราคาขึ้นอยู่กับความต้องการและขอบเขตของโปรเจกต์ ติดต่อเราเพื่อรับใบเสนอราคาฟรี" },
+      { q: "มี package สำเร็จรูปไหม?", a: "มี เรามี package สำหรับลูกค้าที่ต้องการโซลูชันที่ครบถ้วนและราคาคุ้มค่า" },
     ]
   },
   {
     category: "ระยะเวลา",
-    questions: [
-      {
-        q: "ใช้เวลาสร้างเว็บไซต์นานแค่ไหน?",
-        a: "เว็บไซต์ทั่วไปใช้เวลา 2-4 สัปดาห์ ระบบที่ซับซ้อนอาจใช้เวลา 1-2 เดือน ขึ้นอยู่กับความต้องการและขนาดของโปรเจกต์"
-      },
-      {
-        q: "เริ่มต้นทำงานได้เร็วแค่ไหน?",
-        a: "หลังจากตกลงรายละเอียดและชำระเงินมัดจำแล้ว เราสามารถเริ่มงานได้ภายใน 3-5 วันทำการ"
-      }
+    icon: "⏱️",
+    items: [
+      { q: "ใช้เวลาพัฒนานานแค่ไหน?", a: "ขึ้นอยู่กับความซับซ้อนของโปรเจกต์ เว็บไซต์มาตรฐาน 2-4 สัปดาห์, ระบบซับซ้อนอาจใช้ 1-3 เดือน" },
     ]
   },
   {
-    category: "การสนับสนุน",
-    questions: [
-      {
-        q: "หลังสร้างเว็บเสร็จแล้ว มีบริการดูแลไหม?",
-        a: "มี เรามีทีมดูแลที่พร้อมช่วยเหลือทั้งการแก้ไขปัญหา อัปเดตเนื้อหา และปรับปรุงระบบตามต้องการ"
-      },
-      {
-        q: "ถ้าเว็บมีปัญหา ติดต่อได้อย่างไร?",
-        a: "สามารถติดต่อเราผ่าน LINE, โทรศัพท์ 080-995-5945 หรืออีเมล contact@moreminimore.com เรามีทีมพร้อมรับมือกับปัญหาฉุกเฉิน"
-      },
-      {
-        q: "มีการรับประกันผลงานไหม?",
-        a: "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการทำงานของเรา เราจะแก้ไขให้ฟรี"
-      }
+    category: "ทั่วไป",
+    icon: "💬",
+    items: [
+      { q: "มีการรับประกันผลงานไหม?", a: "เรารับประกันคุณภาพ หากไม่พอใจเราพร้อมแก้ไขจนกว่าจะถูกใจ" },
+      { q: "หลังส่งมอบงานแล้วมี after service ไหม?", a: "มี เราให้บริการดูแลและ support หลังการขายตลอด 24 ชม." },
     ]
-  }
+  },
 ];
 ---
 
-<Base title="คำถามที่พบบ่อย | MoreminiMore">
+<Base title="คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
-  <Hero
+  <PageHero 
+    badge="FAQ"
     title="คำถามที่พบบ่อย"
     subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา"
-    badge="FAQ"
-    image="/images/hero/tech-consult.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="centered"
-    size="compact"
   />
 
-  <main class="faq-page">
-
+  <!-- FAQ Section -->
+  <section class="section faq-section">
+    <div class="container">
       <div class="faq-content">
-        {faqItems.map((category, catIndex) => (
-          <section class="faq-category">
+        {faqData.map(cat => (
+          <div class="faq-category">
             <h2 class="category-title">
-              <span class="category-icon">
-                {category.category === "บริการ" ? "🎯" :
-                 category.category === "ราคา" ? "💰" :
-                 category.category === "ระยะเวลา" ? "⏱️" : "💬"}
-              </span>
-              {category.category}
+              <span class="category-icon">{cat.icon}</span>
+              {cat.category}
             </h2>
             <div class="faq-list">
-              {category.questions.map((item, qIndex) => (
-                <div class="faq-item" data-item={`${catIndex}-${qIndex}`}>
+              {cat.items.map((item, qIndex) => (
+                <div class="faq-item" data-item={qIndex}>
                   <button class="faq-question" aria-expanded="false">
                     <span class="question-text">{item.q}</span>
                     <span class="faq-icon">+</span>
@@ -112,20 +71,25 @@ const faqItems = [
                 </div>
               ))}
             </div>
-          </section>
+          </div>
         ))}
       </div>
-
-      <section class="faq-cta">
-        <h3>ยังมีคำถามอื่น?</h3>
-        <p>ติดต่อเราได้โดยตรง เราพร้อมตอบทุกคำถาม</p>
-        <div class="cta-buttons">
-          <a href="/contact" class="btn btn-primary">ติดต่อเรา</a>
-          <a href="tel:0809955945" class="btn btn-secondary">080-995-5945</a>
-        </div>
-      </section>
     </div>
-  </main>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="section section-primary cta-section">
+    <div class="container">
+      <div class="cta-content">
+        <h2 class="cta-title">ยังมีคำถามอื่น?</h2>
+        <p class="cta-desc">ติดต่อเราได้โดยตรง เราพร้อมตอบทุกคำถาม</p>
+        <div class="cta-actions">
+          <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
+          <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
+        </div>
+      </div>
+    </div>
+  </section>
 
   <Footer />
 </Base>
@@ -133,32 +97,25 @@ const faqItems = [
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const faqItems = document.querySelectorAll('.faq-item');
-
     faqItems.forEach(item => {
       const question = item.querySelector('.faq-question');
       const answer = item.querySelector('.faq-answer');
       const icon = item.querySelector('.faq-icon');
-
       question?.addEventListener('click', () => {
         const isOpen = item.classList.contains('open');
-
-        // Close all
         faqItems.forEach(faq => {
           faq.classList.remove('open');
-          const faqAnswer = faq.querySelector('.faq-answer');
-          const faqIcon = faq.querySelector('.faq-icon');
-          if (faqAnswer) faqAnswer.style.maxHeight = '0';
-          if (faqIcon) faqIcon.textContent = '+';
-          const faqQuestion = faq.querySelector('.faq-question');
-          if (faqQuestion) faqQuestion.setAttribute('aria-expanded', 'false');
+          const fa = faq.querySelector('.faq-answer') as HTMLElement;
+          const fi = faq.querySelector('.faq-icon');
+          if (fa) fa.style.maxHeight = '0';
+          if (fi) fi.textContent = '+';
+          (faq.querySelector('.faq-question') as HTMLElement)?.setAttribute('aria-expanded', 'false');
         });
-
-        // Open clicked if it was closed
         if (!isOpen) {
           item.classList.add('open');
-          if (answer) answer.style.maxHeight = answer.scrollHeight + 'px';
+          if (answer) (answer as HTMLElement).style.maxHeight = answer.scrollHeight + 'px';
           if (icon) icon.textContent = '−';
-          if (question) question.setAttribute('aria-expanded', 'true');
+          if (question) (question as HTMLElement).setAttribute('aria-expanded', 'true');
         }
       });
     });
@@ -166,53 +123,9 @@ const faqItems = [
 </script>
 
 <style>
-  .faq-page {
-    padding: 120px 0 80px;
-    min-height: 100vh;
-  }
-
-  .faq-header {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  .section-badge {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 6px 16px;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: var(--font-heading);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 16px;
-  }
-
-  .faq-title {
-    font-size: clamp(36px, 5vw, 56px);
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 16px;
-  }
-
-  .faq-desc {
-    font-size: 18px;
-    color: var(--color-medium-gray);
-    max-width: 500px;
-    margin: 0 auto;
-  }
-
-  .faq-content {
-    max-width: 900px;
-    margin: 0 auto;
-  }
-
-  .faq-category {
-    margin-bottom: 60px;
-  }
-
+  .faq-section { background: var(--color-white); }
+  .faq-content { max-width: 800px; margin: 0 auto; }
+  .faq-category { margin-bottom: 60px; }
   .category-title {
     display: flex;
     align-items: center;
@@ -224,34 +137,17 @@ const faqItems = [
     padding-bottom: 16px;
     border-bottom: 2px solid var(--color-primary);
   }
-
-  .category-icon {
-    font-size: 28px;
-  }
-
-  .faq-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-
+  .category-icon { font-size: 28px; }
+  .faq-list { display: flex; flex-direction: column; gap: 12px; }
   .faq-item {
     background: var(--color-white);
     border-radius: 12px;
     overflow: hidden;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
-    border: 1px solid #eee;
-    transition: all 0.3s ease;
+    border: 1px solid rgba(0,0,0,0.08);
+    transition: all 0.3s;
   }
-
-  .faq-item:hover {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  }
-
-  .faq-item.open {
-    border-color: var(--color-primary);
-  }
-
+  .faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
+  .faq-item.open { border-color: var(--color-primary); }
   .faq-question {
     width: 100%;
     display: flex;
@@ -267,25 +163,14 @@ const faqItems = [
     font-weight: 600;
     color: var(--color-black);
   }
-
-  .question-text {
-    flex: 1;
-    padding-right: 16px;
-  }
-
+  .question-text { flex: 1; padding-right: 16px; }
   .faq-icon {
     font-size: 24px;
     color: var(--color-primary);
     font-weight: 300;
     transition: transform 0.3s;
   }
-
-  .faq-answer {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-  }
-
+  .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
   .faq-answer p {
     padding: 0 24px 24px;
     font-size: 15px;
@@ -293,49 +178,32 @@ const faqItems = [
     color: #555;
   }
 
-  .faq-cta {
-    text-align: center;
-    padding: 60px;
-    background: var(--color-light-gray);
-    border-radius: 20px;
-    margin-top: 60px;
+  .section-primary { background: var(--color-primary); }
+  .cta-content { text-align: center; }
+  .cta-title {
+    font-size: clamp(28px, 4vw, 42px);
+    font-weight: 800;
+    margin-bottom: 16px;
+    color: var(--color-black);
   }
-
-  .faq-cta h3 {
-    font-size: 28px;
-    font-weight: 700;
-    margin-bottom: 12px;
+  .cta-desc {
+    font-size: 18px;
+    color: rgba(0,0,0,0.7);
+    margin-bottom: 32px;
   }
-
-  .faq-cta p {
-    font-size: 16px;
-    color: var(--color-medium-gray);
-    margin-bottom: 24px;
-  }
-
-  .cta-buttons {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
+  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+  .btn-outline-dark {
+    background: transparent;
+    color: var(--color-black);
+    border: 2px solid var(--color-black);
   }
+  .btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
+  .btn-lg { padding: 16px 36px; font-size: 16px; }
 
   @media (max-width: 640px) {
-    .faq-question {
-      padding: 16px 20px;
-      font-size: 15px;
-    }
-
-    .faq-answer p {
-      padding: 0 20px 20px;
-    }
-
-    .faq-cta {
-      padding: 40px 24px;
-    }
-
-    .cta-buttons {
-      flex-direction: column;
-    }
+    .faq-question { padding: 16px 20px; font-size: 15px; }
+    .faq-answer p { padding: 0 20px 20px; }
+    .cta-actions { flex-direction: column; }
+    .btn-lg { width: 100%; justify-content: center; }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a15431e..dabb992 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,139 +1,157 @@
 ---
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
-import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
+import Hero from '../components/Hero.astro';
+import ServiceCard from '../components/ServiceCard.astro';
+import { getCollection } from 'astro:content';
+import { portfolioItems } from '../data/portfolio';
 
-const stats = [
-  { number: "50+", label: "โปรเจกต์" },
-  { number: "40+", label: "ลูกค้า" },
-  { number: "5+", label: "ปีประสบการณ์" },
-  { number: "100%", label: "ความพึงพอใจ" }
+const blogPosts = await getCollection('blog');
+const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+
+const services = [
+  { title: "Automation Consult", subtitle: "Implement specific unique app and AI for business to do automation workflow", image: "/images/services/automation.jpg", link: "/services/automation" },
+  { title: "AI Consult", subtitle: "Consult service for using AI to improve business workflow and knowledge management", image: "/images/services/ai-consult.jpg", link: "/services/ai-consult" },
+  { title: "Marketing Automation", subtitle: "Use AI to help generate and manage marketing workflow", image: "/images/services/marketing.jpg", link: "/services/marketing" },
+  { title: "Website Development", subtitle: "Implement website for business and integrate with marketing workflow", image: "/images/services/webdev.jpg", link: "/services/webdev" },
 ];
 ---
 
-<Base title="หน้าแรก | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
+<Base title="MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
-  <Hero
-    title="เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่"
-    subtitle="รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
-    badge="ดิจิทัลเอเจนซี่ในประเทศไทย"
-    image="/images/hero/hero.jpg"
-    theme="yellow"
-    showCTA={true}
-    size="full"
-    variant="split"
-  />
+  <!-- KINETIC HERO -->
+  <Hero />
 
-  <!-- Services Section -->
-  <section class="section services">
+  <!-- SERVICES SECTION -->
+  <section class="section">
     <div class="container">
-      <div class="section-header">
-        <span class="section-badge">บริการของเรา</span>
-        <h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
-        <p class="section-desc">ครบจบทุก need ด้านดิจิทัลสำหรับธุรกิจของคุณ</p>
+      <!-- Title with Tilt Effect -->
+      <div class="services-title-wrapper" id="services-title">
+        <div class="services-title-inner">
+          <span class="badge badge-dark">บริการของเรา</span>
+          <h2 class="services-title">
+            ครบทุกโซลูชั่นด้านดิจิตอล
+          </h2>
+          <p class="section-desc reveal">
+            ให้เราดูแลทุกอย่าง ในขณะที่คุณโฟกัสที่ธุรกิจของคุณ
+          </p>
+        </div>
       </div>
+
       <div class="services-grid">
-        {[
-          { title: "พัฒนาเว็บไซต์", desc: "สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการ", icon: "🌐", href: "/services/webdev" },
-          { title: "Marketing Automation", desc: "Automate การตลาดเพื่อเพิ่มประสิทธิภาพและลดต้นทุน", icon: "📈", href: "/services/marketing" },
-          { title: "AI Automation", desc: "นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการ", icon: "🤖", href: "/services/ai" },
-          { title: "Tech Consult", desc: "ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ", icon: "💡", href: "/services/consult" }
-        ].map((s, i) => (
-          <a href={s.href} class="service-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
-            <div class="service-icon"><span class="icon-emoji">{s.icon}</span></div>
-            <h3 class="service-title">{s.title}</h3>
-            <p class="service-desc">{s.desc}</p>
-            <span class="service-arrow">→</span>
-          </a>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <!-- Stats Section -->
-  <section class="section section-accent stats-section">
-    <div class="container">
-      <div class="stats-grid">
-        {stats.map((stat) => (
-          <div class="stat-item">
-            <span class="stat-number">{stat.number}</span>
-            <span class="stat-label">{stat.label}</span>
+        {services.map((service, i) => (
+          <div class="reveal" style={`animation-delay: ${i * 0.1}s`}>
+            <ServiceCard {...service} />
           </div>
         ))}
       </div>
+
+      <div class="section-cta reveal">
+        <a href="/services" class="btn btn-dark btn-lg">
+          ดูบริการทั้งหมด
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        </a>
+      </div>
     </div>
   </section>
 
-  <!-- Portfolio Section -->
-  <section class="section portfolio-preview">
+  <!-- PORTFOLIO SECTION -->
+  <section class="section section-dark section-gradient-top">
     <div class="container">
       <div class="section-header">
-        <span class="section-badge">ผลงาน</span>
-        <h2 class="section-title">โปรเจกต์ล่าสุด</h2>
-        <p class="section-desc">ผลงานที่เราภาคภูมิใจ</p>
+        <span class="badge">ผลงานของเรา</span>
+        <h2 class="section-title text-white reveal">
+          โปรเจกต์ที่เราภาคภูมิใจ
+        </h2>
       </div>
+
       <div class="portfolio-grid">
-        {[
-          { name: "Lungfinler", cat: "เว็บไซต์", img: "/images/portfolio/lungfinler.png", url: "https://lungfinler.com" },
-          { name: "Jet Industries", cat: "เว็บไซต์", img: "/images/portfolio/jetindustries.png", url: "https://jetindustries.co.th" },
-          { name: "Lawyernoom", cat: "เว็บไซต์", img: "/images/portfolio/lawyernoom.png", url: "https://lawyernoom.com" },
-          { name: "Underdog", cat: "เว็บไซต์", img: "/images/portfolio/underdog.png", url: "https://underdog.run" }
-        ].map((p) => (
-          <a href={p.url} target="_blank" rel="noopener" class="portfolio-card">
-            <img src={p.img} alt={p.name} />
-            <div class="portfolio-overlay">
-              <span class="portfolio-category">{p.cat}</span>
-              <h3 class="portfolio-name">{p.name}</h3>
+        {portfolioItems.slice(0, 6).map((item, i) => (
+          <a href={item.url} target="_blank" rel="noopener" class="portfolio-card reveal" style={`animation-delay: ${i * 0.1}s`}>
+            <div class="portfolio-image">
+              <img src={item.thumbnail} alt={item.name} loading="lazy" />
+              <div class="portfolio-overlay">
+                <span class="portfolio-visit">เยี่ยมชมเว็บไซต์</span>
+              </div>
+            </div>
+            <div class="portfolio-content">
+              <span class="portfolio-category">{item.category_label}</span>
+              <h3 class="portfolio-name">{item.name}</h3>
             </div>
           </a>
         ))}
       </div>
-      <div class="section-cta">
-        <a href="/portfolio" class="btn btn-primary">ดูผลงานทั้งหมด</a>
+
+      <div class="section-cta reveal">
+        <a href="/portfolio" class="btn btn-outline-white btn-lg">
+          ผลงานทั้งหมด
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        </a>
       </div>
     </div>
   </section>
 
-  <!-- Blog Section -->
-  <section class="section section-light blog-preview">
+  <!-- BLOG SECTION -->
+  <section class="section section-gradient-bottom">
     <div class="container">
       <div class="section-header">
-        <span class="section-badge">บทความ</span>
-        <h2 class="section-title">ความรู้ด้านดิจิทัล</h2>
-        <p class="section-desc">อ่านบทความล่าสุดจากเรา</p>
+        <span class="badge badge-dark">บทความ</span>
+        <h2 class="section-title reveal">
+          ความรู้ด้านดิจิทัล
+        </h2>
       </div>
+
       <div class="blog-grid">
-        {[
-          { title: "5 วิธี AI เพิ่มยอดขาย", img: "/images/blog/5-ways-ai-increase-sales.jpg", slug: "5-ways-ai-increase-sales" },
-          { title: "AI Content ที่ Google รัก", img: "/images/blog/ai-content-google-love.jpg", slug: "ai-content-google-love" },
-          { title: "Digital Transformation Guide", img: "/images/blog/digital-transformation.jpg", slug: "digital-transformation-guide" }
-        ].map((post) => (
-          <a href={`/blog/${post.slug}`} class="blog-card card">
-            <div class="blog-image"><img src={post.img} alt={post.title} /></div>
+        {sortedPosts.slice(0, 3).map((post, i) => (
+          <a href={`/blog/${post.slug}`} class="blog-card reveal" style={`animation-delay: ${i * 0.1}s`}>
+            <div class="blog-image">
+              <img src={post.data.image} alt={post.data.title} loading="lazy" />
+            </div>
             <div class="blog-content">
-              <h3 class="blog-title">{post.title}</h3>
-              <span class="blog-readmore">อ่านต่อ →</span>
+              <span class="blog-category">{post.data.category}</span>
+              <h3 class="blog-title">{post.data.title}</h3>
+              <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>
           </a>
         ))}
       </div>
-      <div class="section-cta">
-        <a href="/blog" class="btn btn-secondary">บทความทั้งหมด</a>
+
+      <div class="section-cta reveal">
+        <a href="/blog" class="btn btn-dark btn-lg">
+          บทความทั้งหมด
+        </a>
       </div>
     </div>
   </section>
 
-  <!-- CTA Section -->
-  <section class="section section-primary cta-section">
+  <!-- CTA SECTION -->
+  <section class="section section-primary">
     <div class="container">
-      <div class="cta-content">
-        <h2 class="cta-title">พร้อมเริ่มโปรเจกต์ของคุณ?</h2>
-        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
+      <div class="cta-content reveal">
+        <h2 class="cta-title">
+          <span class="title-word">พร้อมเปลี่ยน</span>
+          <span class="title-word">ธุรกิจของคุณ?</span>
+        </h2>
+        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
         <div class="cta-actions">
-          <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
-          <a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
+          <a href="/contact" class="btn btn-dark btn-lg">
+            ติดต่อเรา
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M5 12h14M12 5l7 7-7 7"/>
+            </svg>
+          </a>
+          <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">
+            080-995-5945
+          </a>
         </div>
       </div>
     </div>
@@ -143,48 +161,397 @@ const stats = [
 </Base>
 
 <style>
-  .section-header { text-align: center; margin-bottom: 60px; }
-  .section-badge { display: inline-block; background: var(--color-primary); color: var(--color-black); padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
-  .section-title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; margin-bottom: 16px; }
-  .section-desc { font-size: 18px; color: var(--color-medium-gray); max-width: 600px; margin: 0 auto; }
-  .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
-  .service-card { padding: 40px 32px; display: flex; flex-direction: column; cursor: pointer; }
-  .service-icon { width: 60px; height: 60px; background: var(--color-light-gray); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
-  .icon-emoji { font-size: 28px; }
-  .service-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
-  .service-desc { font-size: 14px; color: var(--color-medium-gray); line-height: 1.6; flex-grow: 1; }
-  .service-arrow { font-size: 24px; color: var(--color-primary); margin-top: 20px; transition: transform 0.3s; }
-  .service-card:hover .service-arrow { transform: translateX(8px); }
-  .section-accent { background: var(--color-accent); color: var(--color-white); }
-  .stats-section { padding: 100px 0; }
-  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; text-align: center; }
-  .stat-item { display: flex; flex-direction: column; align-items: center; }
-  .stat-number { font-family: var(--font-heading); font-size: 72px; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 12px; }
-  .stat-label { font-size: 16px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 2px; }
-  .portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; }
-  .portfolio-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
-  .portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
-  .portfolio-card:hover img { transform: scale(1.1); }
-  .portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; opacity: 0; transition: opacity 0.3s; }
-  .portfolio-card:hover .portfolio-overlay { opacity: 1; }
-  .portfolio-category { background: var(--color-primary); color: var(--color-black); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; align-self: flex-start; margin-bottom: 8px; }
-  .portfolio-name { color: var(--color-white); font-size: 18px; font-weight: 600; }
-  .section-cta { text-align: center; }
-  .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
-  .blog-card { display: flex; flex-direction: column; }
-  .blog-image { aspect-ratio: 16/10; overflow: hidden; }
-  .blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
-  .blog-card:hover .blog-image img { transform: scale(1.05); }
-  .blog-content { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
-  .blog-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; flex-grow: 1; }
-  .blog-readmore { color: var(--color-accent); font-weight: 500; font-size: 14px; }
-  .cta-content { text-align: center; max-width: 800px; margin: 0 auto; }
-  .cta-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin-bottom: 20px; }
-  .cta-desc { font-size: 18px; margin-bottom: 40px; opacity: 0.8; }
-  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
-  .btn-lg { padding: 18px 40px; font-size: 16px; }
-  .btn-outline { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
-  .btn-outline:hover { background: var(--color-black); color: var(--color-white); }
-  @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .stat-number { font-size: 56px; } }
-  @media (max-width: 640px) { .services-grid, .portfolio-grid, .blog-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .hero-actions, .cta-actions { flex-direction: column; } .btn-lg { width: 100%; justify-content: center; } }
-</style>
\ No newline at end of file
+  /* ============================================
+     SERVICES TITLE WITH TILT EFFECT
+     ============================================ */
+  
+  .services-title-wrapper {
+    perspective: 1000px;
+    margin-bottom: 60px;
+    text-align: center;
+  }
+
+  .services-title-inner {
+    transition: transform 0.1s ease-out;
+    display: inline-block;
+  }
+
+  .services-title {
+    font-family: var(--font-display);
+    font-size: clamp(36px, 6vw, 64px);
+    font-weight: 900;
+    line-height: 1.1;
+    margin: 24px 0;
+    color: var(--color-dark);
+  }
+
+  /* ============================================
+     SECTION HEADER
+     ============================================ */
+  
+  .section-header {
+    text-align: center;
+    margin-bottom: 60px;
+  }
+
+  .section-title {
+    font-family: var(--font-display);
+    font-size: clamp(32px, 5vw, 56px);
+    font-weight: 900;
+    line-height: 1.1;
+    margin: 24px 0;
+    color: var(--color-dark);
+  }
+
+  .text-white {
+    color: var(--color-white);
+  }
+
+  .section-desc {
+    font-size: 18px;
+    color: var(--color-gray-600);
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  /* ============================================
+     SERVICES GRID
+     ============================================ */
+  
+  .services-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    margin-bottom: 48px;
+  }
+
+  /* ============================================
+     PORTFOLIO GRID
+     ============================================ */
+  
+  .portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    margin-bottom: 48px;
+  }
+
+  .portfolio-card {
+    display: block;
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+    transition: all 0.4s var(--ease-out-expo);
+  }
+
+  .portfolio-card:hover {
+    transform: translateY(-8px);
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .portfolio-image {
+    position: relative;
+    aspect-ratio: 16/10;
+    overflow: hidden;
+  }
+
+  .portfolio-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s ease;
+  }
+
+  .portfolio-card:hover .portfolio-image img {
+    transform: scale(1.08);
+  }
+
+  .portfolio-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(26, 26, 46, 0.65);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .portfolio-card:hover .portfolio-overlay {
+    opacity: 1;
+  }
+
+  .portfolio-visit {
+    padding: 12px 24px;
+    background: var(--color-primary);
+    color: var(--color-black);
+    font-family: var(--font-display);
+    font-size: 14px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    border-radius: var(--radius-full);
+  }
+
+  .portfolio-content {
+    padding: 24px;
+  }
+
+  .portfolio-category {
+    display: inline-block;
+    padding: 4px 12px;
+    background: rgba(254, 212, 0, 0.2);
+    color: var(--color-primary);
+    font-family: var(--font-display);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    border-radius: var(--radius-full);
+    margin-bottom: 12px;
+  }
+
+  .portfolio-name {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 800;
+    color: var(--color-white);
+  }
+
+  /* ============================================
+     BLOG GRID
+     ============================================ */
+  
+  .blog-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
+    margin-bottom: 48px;
+  }
+
+  .blog-card {
+    display: block;
+    background: var(--color-white);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--color-gray-200);
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.4s var(--ease-out-expo);
+  }
+
+  .blog-card:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--color-primary);
+  }
+
+  .blog-image {
+    aspect-ratio: 16/10;
+    overflow: hidden;
+  }
+
+  .blog-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s ease;
+  }
+
+  .blog-card:hover .blog-image img {
+    transform: scale(1.08);
+  }
+
+  .blog-content {
+    padding: 28px;
+  }
+
+  .blog-category {
+    display: inline-block;
+    padding: 4px 12px;
+    background: var(--color-gray-100);
+    color: var(--color-gray-600);
+    font-family: var(--font-display);
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    border-radius: var(--radius-full);
+    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;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .blog-date {
+    font-size: 12px;
+    color: var(--color-gray-400);
+  }
+
+  /* ============================================
+     CTA SECTION
+     ============================================ */
+  
+  .cta-content {
+    text-align: center;
+  }
+
+  .cta-title {
+    font-family: var(--font-display);
+    font-size: clamp(36px, 6vw, 64px);
+    font-weight: 900;
+    line-height: 1.1;
+    color: var(--color-black);
+    margin-bottom: 24px;
+  }
+
+  .title-word {
+    display: block;
+  }
+
+  .cta-desc {
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.7);
+    max-width: 500px;
+    margin: 0 auto 40px;
+  }
+
+  .cta-actions {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .section-cta {
+    text-align: center;
+  }
+
+  .btn svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 8px;
+    transition: transform 0.3s ease;
+  }
+
+  .btn:hover svg {
+    transform: translateX(4px);
+  }
+
+  /* Button Variations */
+  .btn-outline-white {
+    background: transparent;
+    color: var(--color-white);
+    border: 2px solid var(--color-white);
+  }
+
+  .btn-outline-white:hover {
+    background: var(--color-white);
+    color: var(--color-dark);
+  }
+
+  .btn-outline-dark {
+    background: transparent;
+    color: var(--color-black);
+    border: 2px solid var(--color-black);
+  }
+
+  .btn-outline-dark:hover {
+    background: var(--color-black);
+    color: var(--color-white);
+  }
+
+  /* ============================================
+     RESPONSIVE
+     ============================================ */
+  
+  @media (max-width: 1024px) {
+    .services-grid,
+    .portfolio-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .blog-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .services-grid,
+    .portfolio-grid,
+    .blog-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .cta-actions {
+      flex-direction: column;
+    }
+
+    .btn {
+      width: 100%;
+    }
+  }
+</style>
+
+<script>
+  // Services Title Tilt Effect
+  const servicesTitle = document.getElementById('services-title');
+  const titleInner = servicesTitle?.querySelector('.services-title-inner');
+
+  if (titleInner && servicesTitle) {
+    servicesTitle.addEventListener('mousemove', (e) => {
+      const rect = servicesTitle.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      
+      const centerX = rect.width / 2;
+      const centerY = rect.height / 2;
+      
+      const rotateX = (y - centerY) / centerY * -8;
+      const rotateY = (centerX - x) / centerX * 8;
+      
+      (titleInner as HTMLElement).style.transform = 
+        `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+    });
+    
+    servicesTitle.addEventListener('mouseleave', () => {
+      (titleInner as HTMLElement).style.transform = 
+        'perspective(1000px) rotateX(0) rotateY(0)';
+    });
+  }
+
+  // Scroll Reveal Animation
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+      }
+    });
+  }, observerOptions);
+
+  document.querySelectorAll('.reveal').forEach(el => {
+    observer.observe(el);
+  });
+</script>
\ No newline at end of file
diff --git a/src/pages/portfolio.astro b/src/pages/portfolio.astro
index 52be1f9..9aa6ec5 100644
--- a/src/pages/portfolio.astro
+++ b/src/pages/portfolio.astro
@@ -1,134 +1,28 @@
 ---
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
-import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
-
-const portfolioItems = [
-  {
-    name: "Lungfinler",
-    url: "https://lungfinler.com",
-    category: "webdev",
-    categoryLabel: "พัฒนาเว็บไซต์",
-    thumbnail: "/images/portfolio/lungfinler.png",
-    description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
-    services: ["Website", "Branding", "Graphic Design"]
-  },
-  {
-    name: "Jet Industries",
-    url: "https://jetindustries.co.th",
-    category: "webdev",
-    categoryLabel: "พัฒนาเว็บไซต์",
-    thumbnail: "/images/portfolio/jetindustries.png",
-    description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
-    services: ["Website", "Industrial"]
-  },
-  {
-    name: "สำนักงานกฎหมาย ตถาตา",
-    url: "https://lawyernoom.com",
-    category: "webdev",
-    categoryLabel: "พัฒนาเว็บไซต์",
-    thumbnail: "/images/portfolio/lawyernoom.png",
-    description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา",
-    services: ["Website", "Legal"]
-  },
-  {
-    name: "Underdog Marketing",
-    url: "https://underdog.run",
-    category: "webdev",
-    categoryLabel: "พัฒนาเว็บไซต์",
-    thumbnail: "/images/portfolio/underdog.png",
-    description: "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู",
-    services: ["Website", "Content Marketing"]
-  },
-  {
-    name: "Baofuling Shop",
-    url: "https://baofulingshop.com",
-    category: "ecommerce",
-    categoryLabel: "อีคอมเมิร์ซ",
-    thumbnail: "/images/portfolio/baofuling.png",
-    description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน",
-    services: ["E-commerce", "Beauty"]
-  },
-  {
-    name: "เทรนเนอร์ซันนี่",
-    url: "https://trainersunny.com",
-    category: "webdev",
-    categoryLabel: "พัฒนาเว็บไซต์",
-    thumbnail: "/images/portfolio/trainersunny.png",
-    description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill",
-    services: ["Website", "Training"]
-  },
-  {
-    name: "เลือดจระเข้วานิไทย",
-    url: "https://เลือดจระเข้วานิไทย.com",
-    category: "ecommerce",
-    categoryLabel: "อีคอมเมิร์ซ",
-    thumbnail: "/images/portfolio/luadjob.png",
-    description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ",
-    services: ["E-commerce", "Health"]
-  },
-  {
-    name: "ทวนทอง 99",
-    url: "https://tuanthong99.com",
-    category: "ecommerce",
-    categoryLabel: "อีคอมเมิร์ซ",
-    thumbnail: "/images/portfolio/tuanthong.png",
-    description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง",
-    services: ["E-commerce", "Thai Herbal"]
-  },
-  {
-    name: "Odoo Portal",
-    url: "https://odooportal.com",
-    category: "marketing",
-    categoryLabel: "ที่ปรึกษาการตลาด",
-    thumbnail: "/images/portfolio/odooportal.png",
-    description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย",
-    services: ["Odoo ERP", "System Implementation"]
-  }
-];
-
-const categories = [
-  { id: 'all', name: 'ทั้งหมด' },
-  { id: 'webdev', name: 'พัฒนาเว็บไซต์' },
-  { id: 'ecommerce', name: 'อีคอมเมิร์ซ' },
-  { id: 'marketing', name: 'ที่ปรึกษาการตลาด' }
-];
-
-const stats = [
-  { number: "50+", label: "โปรเจกต์" },
-  { number: "40+", label: "ลูกค้า" },
-  { number: "5+", label: "ปีประสบการณ์" },
-  { number: "100%", label: "ความพึงพอใจ" }
-];
+import PageHero from '../components/PageHero.astro';
+import { portfolioItems } from '../data/portfolio';
 ---
 
 <Base title="ผลงาน | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
-  <Hero
+  <PageHero 
+    badge="ผลงาน"
     title="ผลงานของเรา"
     subtitle="รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ"
-    badge="พอร์ตโฟลิโอ"
-    image="/images/hero/hero.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="text-only"
-    size="compact"
   />
 
   <!-- Filter Section -->
-  <section class="filter-section">
+  <section class="filter-section" style="background: #1a1a2e; margin-top: -1px;">
     <div class="container">
       <div class="filter-buttons" id="category-filters">
-        {categories.map((cat) => (
-          <button
-            class="filter-btn"
-            data-category={cat.id}
-          >
-            {cat.name}
-          </button>
-        ))}
+        <button class="filter-btn active" data-category="all">ทั้งหมด</button>
+        <button class="filter-btn" data-category="webdev">พัฒนาเว็บไซต์</button>
+        <button class="filter-btn" data-category="ecommerce">อีคอมเมิร์ซ</button>
+        <button class="filter-btn" data-category="marketing">ที่ปรึกษาการตลาด</button>
       </div>
     </div>
   </section>
@@ -141,26 +35,23 @@ const stats = [
           <article
             class="portfolio-card"
             data-category={item.category}
-            style={`animation-delay: ${index * 0.05}s`}
+            style={`--delay: ${index * 0.05}s`}
           >
             <div class="portfolio-image">
               <img src={item.thumbnail} alt={item.name} loading="lazy" />
               <div class="portfolio-overlay">
-                <a href={item.url} target="_blank" rel="noopener noreferrer" class="visit-btn">
+                <a href={item.url || '#'} target="_blank" rel="noopener noreferrer" class="visit-btn">
                   เยี่ยมชมเว็บไซต์
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                  </svg>
                 </a>
               </div>
             </div>
             <div class="portfolio-content">
-              <span class="portfolio-category">{item.categoryLabel}</span>
+              <span class="portfolio-category">{item.category_label}</span>
               <h3 class="portfolio-name">{item.name}</h3>
               <p class="portfolio-desc">{item.description}</p>
-              <div class="portfolio-tags">
-                {item.services.slice(0, 3).map((service) => (
-                  <span class="tag">{service}</span>
-                ))}
-              </div>
             </div>
           </article>
         ))}
@@ -168,29 +59,15 @@ const stats = [
     </div>
   </section>
 
-  <!-- Stats Section -->
-  <section class="section section-dark stats-section">
-    <div class="container">
-      <div class="stats-grid">
-        {stats.map((stat) => (
-          <div class="stat-item">
-            <span class="stat-number">{stat.number}</span>
-            <span class="stat-label">{stat.label}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
   <!-- CTA Section -->
   <section class="section section-primary cta-section">
     <div class="container">
       <div class="cta-content">
         <h2 class="cta-title">อยากได้เว็บไซต์แบบนี้บ้าง?</h2>
-        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
+        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
         <div class="cta-actions">
           <a href="/contact" class="btn btn-secondary btn-lg">ปรึกษาฟรี</a>
-          <a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
+          <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
         </div>
       </div>
     </div>
@@ -204,8 +81,6 @@ const stats = [
     const filterBtns = document.querySelectorAll('.filter-btn');
     const portfolioCards = document.querySelectorAll('.portfolio-card');
 
-    filterBtns[0]?.classList.add('active');
-
     filterBtns.forEach(btn => {
       btn.addEventListener('click', () => {
         const category = btn.getAttribute('data-category');
@@ -227,310 +102,162 @@ const stats = [
 </script>
 
 <style>
-  .hero {
-    padding: 160px 0 80px;
-    background: var(--color-black);
-    text-align: center;
-  }
-
-  .hero-badge {
-    display: inline-block;
-    background: rgba(254, 212, 0, 0.1);
-    color: var(--color-primary);
-    padding: 8px 20px;
-    border-radius: 30px;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 24px;
-    border: 1px solid rgba(254, 212, 0, 0.2);
-  }
-
-  .hero-title {
-    font-size: clamp(48px, 10vw, 96px);
-    font-weight: 800;
-    color: var(--color-white);
-    margin-bottom: 16px;
-    text-transform: uppercase;
-  }
-
-  .hero-desc {
-    font-size: 20px;
-    color: #999;
-    max-width: 600px;
-    margin: 0 auto;
-  }
-
   .filter-section {
-    background: var(--color-black);
-    padding: 24px 0;
+    background: var(--color-dark);
+    padding: 20px 0;
     position: sticky;
     top: 80px;
-    z-index: 100;
-    border-bottom: 1px solid rgba(255,255,255,0.1);
+    z-index: 1;
+    margin-top: -1px;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
   }
-
   .filter-buttons {
     display: flex;
     justify-content: center;
     gap: 12px;
     flex-wrap: wrap;
   }
-
   .filter-btn {
-    background: rgba(255, 255, 255, 0.1);
-    color: #9ca3af;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255,255,255,0.05);
+    color: rgba(255,255,255,0.6);
+    border: 1px solid rgba(255,255,255,0.1);
     padding: 10px 24px;
-    border-radius: 30px;
+    border-radius: 24px;
     font-family: var(--font-heading);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.3s;
+    transition: all 0.3s ease;
   }
-
   .filter-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.2);
+    background: rgba(255,255,255,0.1);
+    color: var(--color-white);
+    border-color: rgba(255,255,255,0.2);
   }
-
   .filter-btn.active {
     background: var(--color-primary);
-    color: #000;
+    color: var(--color-black);
     border-color: var(--color-primary);
   }
 
   .portfolio-section {
     background: var(--color-black);
-    padding-top: 60px;
+    padding-top: 80px;
   }
-
   .portfolio-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
   }
-
   .portfolio-card {
-    background: var(--color-dark-gray);
-    border-radius: 16px;
+    background: rgba(255,255,255,0.02);
+    border-radius: 20px;
     overflow: hidden;
-    transition: transform 0.3s, box-shadow 0.3s;
+    border: 1px solid rgba(255,255,255,0.05);
+    transition: all 0.4s ease;
+    animation: fadeUp 0.6s ease backwards;
+    animation-delay: var(--delay);
   }
-
   .portfolio-card:hover {
     transform: translateY(-8px);
-    box-shadow: 0 20px 60px rgba(254, 212, 0, 0.15);
+    border-color: var(--color-primary);
+    box-shadow: 0 20px 50px rgba(254, 212, 0, 0.1);
   }
-
   .portfolio-image {
     position: relative;
-    aspect-ratio: 4/3;
+    aspect-ratio: 16/10;
     overflow: hidden;
   }
-
   .portfolio-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transition: transform 0.5s;
+    transition: transform 0.5s ease;
   }
-
-  .portfolio-card:hover .portfolio-image img {
-    transform: scale(1.1);
-  }
-
+  .portfolio-card:hover .portfolio-image img { transform: scale(1.08); }
   .portfolio-overlay {
     position: absolute;
     inset: 0;
-    background: rgba(254, 212, 0, 0.9);
+    background: rgba(254, 212, 0, 0.95);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
-    transition: opacity 0.3s;
+    transition: opacity 0.3s ease;
   }
-
-  .portfolio-card:hover .portfolio-overlay {
-    opacity: 1;
-  }
-
+  .portfolio-card:hover .portfolio-overlay { opacity: 1; }
   .visit-btn {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     background: var(--color-black);
-    color: var(--color-primary);
-    padding: 12px 24px;
+    color: var(--color-white);
+    padding: 14px 28px;
     border-radius: 30px;
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 14px;
-    transition: transform 0.2s;
+    transition: transform 0.2s ease;
   }
-
-  .visit-btn:hover {
-    transform: scale(1.05);
-  }
-
-  .portfolio-content {
-    padding: 24px;
-  }
-
+  .visit-btn:hover { transform: scale(1.05); }
+  .visit-btn svg { width: 18px; height: 18px; }
+  .portfolio-content { padding: 28px; }
   .portfolio-category {
     display: inline-block;
     background: var(--color-primary);
     color: var(--color-black);
     padding: 4px 12px;
-    border-radius: 20px;
+    border-radius: 12px;
     font-size: 12px;
     font-weight: 600;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
   }
-
   .portfolio-name {
     font-size: 20px;
     font-weight: 700;
     color: var(--color-white);
-    margin-bottom: 8px;
+    margin-bottom: 10px;
   }
-
   .portfolio-desc {
     font-size: 14px;
-    color: #999;
+    color: rgba(255,255,255,0.5);
     line-height: 1.6;
-    margin-bottom: 16px;
-  }
-
-  .portfolio-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .tag {
-    background: rgba(255, 255, 255, 0.1);
-    color: #999;
-    padding: 4px 12px;
-    border-radius: 20px;
-    font-size: 12px;
-  }
-
-  .stats-section {
-    padding: 100px 0;
-  }
-
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 48px;
-    text-align: center;
-  }
-
-  .stat-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .stat-number {
-    font-family: var(--font-heading);
-    font-size: 72px;
-    font-weight: 800;
-    color: var(--color-primary);
-    line-height: 1;
-    margin-bottom: 12px;
-  }
-
-  .stat-label {
-    font-size: 16px;
-    color: #999;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-  }
-
-  .cta-section {
-    padding: 100px 0;
-  }
-
-  .cta-content {
-    text-align: center;
-    max-width: 800px;
-    margin: 0 auto;
   }
 
+  .section-primary { background: var(--color-primary); }
+  .cta-content { text-align: center; }
   .cta-title {
-    font-size: clamp(32px, 5vw, 48px);
+    font-size: clamp(28px, 4vw, 42px);
     font-weight: 800;
     margin-bottom: 16px;
+    color: var(--color-black);
   }
-
   .cta-desc {
     font-size: 18px;
-    margin-bottom: 40px;
-    opacity: 0.8;
+    color: rgba(0,0,0,0.7);
+    margin-bottom: 32px;
+    max-width: 550px;
+    margin-left: auto;
+    margin-right: auto;
   }
+  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+  .btn-outline-dark { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
+  .btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
+  .btn-lg { padding: 16px 36px; font-size: 16px; }
 
-  .cta-actions {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  .btn-lg {
-    padding: 18px 40px;
-    font-size: 16px;
-  }
-
-  .btn-outline {
-    background: transparent;
-    color: var(--color-black);
-    border: 2px solid var(--color-black);
-  }
-
-  .btn-outline:hover {
-    background: var(--color-black);
-    color: var(--color-white);
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 
   @media (max-width: 1024px) {
-    .portfolio-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .stats-grid {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 32px;
-    }
-
-    .stat-number {
-      font-size: 56px;
-    }
+    .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
   }
-
   @media (max-width: 640px) {
-    .portfolio-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .filter-buttons {
-      gap: 8px;
-    }
-
-    .filter-btn {
-      padding: 8px 16px;
-      font-size: 13px;
-    }
-
-    .cta-actions {
-      flex-direction: column;
-    }
-
-    .btn-lg {
-      width: 100%;
-      justify-content: center;
-    }
+    .portfolio-grid { grid-template-columns: 1fr; }
+    .filter-buttons { gap: 8px; }
+    .filter-btn { padding: 8px 16px; font-size: 13px; }
+    .cta-actions { flex-direction: column; }
+    .btn-lg { width: 100%; justify-content: center; }
   }
 </style>
\ No newline at end of file
diff --git a/src/pages/privacy.astro b/src/pages/privacy.astro
index 19afab7..629a1f3 100644
--- a/src/pages/privacy.astro
+++ b/src/pages/privacy.astro
@@ -1,266 +1,93 @@
 ---
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
-import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
+import PageHero from '../components/PageHero.astro';
 ---
 
-<Base title="นโยบายความเป็นส่วนตัว | MoreminiMore">
+<Base title="นโยบายความเป็นส่วนตัว | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
-  <Hero
+  <PageHero 
+    badge="กฎหมาย"
     title="นโยบายความเป็นส่วนตัว"
     subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
-    badge="กฎหมาย"
-    image="/images/hero/ai-automation.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="text-only"
-    size="compact"
   />
 
-  <main class="legal-page">
+  <section class="section legal-section">
     <div class="container">
-      <header class="legal-header">
-        <h1 class="legal-title">นโยบายความเป็นส่วนตัว</h1>
-        <p class="legal-meta">มีผลบังคับใช้วันที่: 5 พฤษภาคม 2569</p>
-      </header>
-
       <div class="legal-content">
-        <p class="legal-intro">
-          <strong>บริษัท มอร์มินิมอร์ จำกัด</strong> ("บริษัทฯ") ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน จึงได้จัดทำนโยบายความเป็นส่วนตัวฉบับนี้ขึ้นเพื่อชี้แจงเกี่ยวกับการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคล รวมถึงสิทธิต่างๆ ของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
-        </p>
+        <p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>
 
-        <section class="legal-section">
+        <div class="legal-section">
           <h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
           <p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p>
           <ul>
-            <li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์ ที่อยู่ไปรษณีย์ วันเดือนปีเกิด</li>
-            <li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียน กรอกแบบฟอร์ม หรือติดต่อบริษัทฯ</li>
-            <li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้, ข้อมูลกิจกรรมการใช้งาน</li>
-            <li><strong>ข้อมูลการเงิน:</strong> ข้อมูลบัตรเครดิต/เดบิต ข้อมูลการชำระเงิน (กรณีใช้บริการที่มีค่าใช้จ่าย)</li>
-            <li><strong>ข้อมูลอื่นที่ท่านให้ไว้:</strong> ข้อมูลใดๆ ที่ท่านให้ไว้โดยสมัครใจผ่านช่องทางการติดต่อของบริษัทฯ</li>
+            <li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์</li>
+            <li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียนหรือกรอกแบบฟอร์ม</li>
+            <li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้</li>
           </ul>
-        </section>
+        </div>
 
-        <section class="legal-section">
+        <div class="legal-section">
           <h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
-          <p>บริษัทฯ เก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
+          <p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
           <ul>
-            <li>เพื่อให้บริการและดำเนินการตามคำขอของท่าน</li>
-            <li>เพื่อการสื่อสารและให้ข้อมูลข่าวสารเกี่ยวกับบริการของบริษัทฯ</li>
-            <li>เพื่อปรับปรุงคุณภาพบริการและพัฒนาเว็บไซต์</li>
-            <li>เพื่อการวิเคราะห์ข้อมูลและสถิติการใช้งาน</li>
-            <li>เพื่อการตลาดและการโฆษณา (ได้รับความยินยอมจากท่าน)</li>
-            <li>เพื่อการปฏิบัติตามกฎหมาย คำสั่ง หรือกระบวนการทางกฎหมาย</li>
-            <li>เพื่อการรักษาความปลอดภัยและป้องกันการทุจริต</li>
+            <li>เพื่อให้บริการและดูแลลูกค้า</li>
+            <li>เพื่อติดต่อสื่อสารกับท่าน</li>
+            <li>เพื่อปรับปรุงการให้บริการ</li>
+            <li>เพื่อปฏิบัติตามกฎหมาย</li>
           </ul>
-        </section>
+        </div>
 
-        <section class="legal-section">
-          <h2>3. การใช้และเปิดเผยข้อมูลส่วนบุคคล</h2>
-          <p>บริษัทฯ จะไม่เปิดเผยข้อมูลส่วนบุคคลของท่านต่อบุคคลที่สาม เว้นแต่:</p>
-          <ul>
-            <li>ได้รับความยินยอมจากท่าน</li>
-            <li>จำเป็นต้องเปิดเผยเพื่อให้บริการตามคำขอของท่าน</li>
-            <li>จำเป็นต้องเปิดเผยต่อผู้ให้บริการที่บริษัทฯ ว่าจ้างให้ดำเนินการในส่วนที่จำเป็น</li>
-            <li>กฎหมายกำหนดหรือร้านขอให้เปิดเผย</li>
-            <li>เพื่อป้องกันหรือระงับอันตรายต่อชีวิต สุขภาพ หรือทรัพย์สิน</li>
-            <li>จำเป็นเพื่อประโยชน์โดยชอบด้วยกฎหมายของบริษัทฯ</li>
-          </ul>
-        </section>
+        <div class="legal-section">
+          <h2>3. การคุ้มครองข้อมูล</h2>
+          <p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต</p>
+        </div>
 
-        <section class="legal-section">
-          <h2>4. ระยะเวลาการเก็บรักษาข้อมูล</h2>
-          <p>บริษัทฯ จะเก็บรักษาข้อมูลส่วนบุคคลของท่านตราบเท่าที่จำเป็นเพื่อบรรลุวัตถุประสงค์ที่ระบุไว้ในนโยบายนี้ เว้นแต่กฎหมายกำหนดให้เก็บรักษาไว้นานกว่านั้น</p>
-          <p>ท่านสามารถขอให้บริษัทฯ ลบหรือทำลายข้อมูลส่วนบุคคลของท่านได้ตามสิทธิ์ของท่านในข้อ 7</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>5. การคุ้มครองข้อมูลส่วนบุคคล</h2>
-          <p>บริษัทฯ มีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง แก้ไข หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต รวมถึงมาตรการทางเทคนิคและองค์กรที่จำเป็น</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>6. การใช้คุกกี้</h2>
-          <p>เว็บไซต์ของบริษัทฯ อาจใช้คุกกี้และเทคโนโลยีที่คล้ายคลึงกันเพื่อ:</p>
-          <ul>
-            <li>จดจำการตั้งค่าของท่าน</li>
-            <li>วิเคราะห์การใช้งานเว็บไซต์</li>
-            <li>ปรับปรุงประสบการณ์การใช้งาน</li>
-            <li>แสดงเนื้อหาและโฆษณาที่ท่านสนใจ</li>
-          </ul>
-          <p>ท่านสามารถตั้งค่าเบราว์เซอร์ของท่านเพื่อปฏิเสธคุกกี้บางประเภทหรือทั้งหมดได้ แต่การปฏิเสธคุกกี้อาจส่งผลต่อการทำงานของเว็บไซต์</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>7. สิทธิของเจ้าของข้อมูล</h2>
-          <p>ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล ท่านมีสิทธิดังต่อไปนี้:</p>
-
-          <h3>7.1 สิทธิในการเข้าถึง</h3>
-          <p>ท่านมีสิทธิขอเข้าถึงและขอรับสำเนาข้อมูลส่วนบุคคลของท่านที่บริษัทฯ มีอยู่</p>
-
-          <h3>7.2 สิทธิในการแก้ไข</h3>
-          <p>ท่านมีสิทธิขอให้บริษัทฯ แก้ไขข้อมูลส่วนบุคคลที่ไม่ถูกต้องหรือไม่สมบูรณ์</p>
-
-          <h3>7.3 สิทธิในการลบ</h3>
-          <p>ท่านมีสิทธิขอให้บริษัทฯ ลบข้อมูลส่วนบุคคลของท่าน ในกรณีที่ข้อมูลนั้นไม่จำเป็นต้องเก็บรักษาไว้ต่อไป</p>
-
-          <h3>7.4 สิทธิในการระงับการใช้</h3>
-          <p>ท่านมีสิทธิขอให้บริษัทฯ ระงับการใช้ข้อมูลส่วนบุคคลของท่านในบางกรณี</p>
-
-          <h3>7.5 สิทธิในการคัดค้าน</h3>
-          <p>ท่านมีสิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของท่าน</p>
-
-          <h3>7.6 สิทธิในการโอนย้าย</h3>
-          <p>ท่านมีสิทธิขอรับข้อมูลส่วนบุคคลในรูปแบบที่สามารถอ่านได้ด้วยเครื่องมือหรืออุปกรณ์อัตโนมัติ และขอส่งหรือโอนข้อมูลนั้นไปยังระบบอื่น</p>
-
-          <h3>7.7 สิทธิในการถอนความยินยอม</h3>
-          <p>ท่านมีสิทธิถอนความยินยอมที่ท่านได้ให้ไว้แก่บริษัทฯ ได้ตลอดเวลา</p>
-
-          <h3>7.8 สิทธิในการร้องเรียน</h3>
-          <p>ท่านมีสิทธิร้องเรียนต่อหน่วยงานกำกับดูแล (สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล) หากบริษัทฯ ละเมิดหรือไม่ปฏิบัติตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>8. การติดต่อบริษัทฯ</h2>
-          <p>หากท่านมีคำถาม ข้อสงสัย หรือต้องการใช้สิทธิใดๆ ตามนโยบายนี้ กรุณาติดต่อบริษัทฯ:</p>
-
-          <div class="contact-box">
-            <p><strong>บริษัท มอร์มินิมอร์ จำกัด</strong></p>
-            <p><strong>ที่อยู่:</strong> กรุงเทพมหานคร ประเทศไทย</p>
-            <p><strong>โทรศัพท์:</strong> 080-995-5945</p>
-            <p><strong>อีเมล:</strong> contact@moreminimore.com</p>
-          </div>
-        </section>
-
-        <section class="legal-section">
-          <h2>9. การเปลี่ยนแปลงนโยบาย</h2>
-          <p>บริษัทฯ อาจปรับปรุงหรือเปลี่ยนแปลงนโยบายความเป็นส่วนตัวนี้เป็นครั้งคราว การเปลี่ยนแปลงจะมีผลเมื่อประกาศบนเว็บไซต์ ท่านควรตรวจสอบนโยบายนี้เป็นระยะเพื่อรับทราบการเปลี่ยนแปลง</p>
-          <p><strong>วันที่มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
-        </section>
-
-        <footer class="legal-footer">
-          <p>*นโยบายความเป็นส่วนตัวฉบับนี้จัดทำขึ้นตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562</p>
-        </footer>
+        <div class="legal-section">
+          <h2>4. สิทธิของท่าน</h2>
+          <p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
+        </div>
       </div>
     </div>
-  </main>
+  </section>
 
   <Footer />
 </Base>
 
 <style>
-  .legal-page {
-    padding: 120px 0 80px;
-    min-height: 100vh;
-  }
-
-  .legal-header {
-    text-align: center;
-    margin-bottom: 60px;
-    padding-bottom: 40px;
-    border-bottom: 2px solid var(--color-primary);
-  }
-
-  .legal-title {
-    font-size: clamp(36px, 5vw, 56px);
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 16px;
-  }
-
-  .legal-meta {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-  }
-
-  .legal-content {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
+  .legal-section { background: var(--color-white); }
+  .legal-content { max-width: 800px; margin: 0 auto; }
   .legal-intro {
     font-size: 18px;
-    line-height: 1.8;
+    color: var(--color-medium-gray);
     margin-bottom: 48px;
-    padding: 24px;
-    background: var(--color-light-gray);
-    border-radius: 12px;
-    border-left: 4px solid var(--color-primary);
+    line-height: 1.7;
   }
-
   .legal-section {
     margin-bottom: 48px;
   }
-
   .legal-section h2 {
     font-size: 24px;
     font-weight: 700;
-    color: var(--color-black);
     margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #eee;
-  }
-
-  .legal-section h3 {
-    font-size: 18px;
-    font-weight: 600;
     color: var(--color-black);
-    margin: 24px 0 12px;
-    color: var(--color-primary);
   }
-
   .legal-section p {
     font-size: 16px;
-    line-height: 1.8;
     color: #444;
+    line-height: 1.8;
     margin-bottom: 16px;
   }
-
   .legal-section ul {
-    list-style: none;
-    padding: 0;
+    margin-left: 24px;
+    margin-bottom: 16px;
   }
-
   .legal-section li {
-    position: relative;
-    padding-left: 24px;
-    margin-bottom: 12px;
     font-size: 16px;
-    line-height: 1.7;
     color: #444;
-  }
-
-  .legal-section li::before {
-    content: '•';
-    position: absolute;
-    left: 0;
-    color: var(--color-primary);
-    font-weight: bold;
-  }
-
-  .contact-box {
-    background: var(--color-light-gray);
-    padding: 24px;
-    border-radius: 12px;
-    margin-top: 16px;
-  }
-
-  .contact-box p {
+    line-height: 1.8;
     margin-bottom: 8px;
   }
-
-  .legal-footer {
-    margin-top: 60px;
-    padding-top: 24px;
-    border-top: 1px solid #eee;
-    text-align: center;
-  }
-
-  .legal-footer p {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    font-style: italic;
-  }
 </style>
\ No newline at end of file
diff --git a/src/pages/services/[slug].astro b/src/pages/services/[slug].astro
new file mode 100644
index 0000000..5b71259
--- /dev/null
+++ b/src/pages/services/[slug].astro
@@ -0,0 +1,248 @@
+---
+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 { getCollection, render } from 'astro:content';
+
+// For SSR mode, use Astro.params directly
+const { slug } = Astro.params;
+
+const services = await getCollection('services');
+// Use id for matching since slug might be undefined
+const service = services.find(s => s.id === slug);
+
+if (!service) {
+  return Astro.redirect('/404');
+}
+
+const { Content } = await render(service);
+
+const features = [
+  { icon: service.data.feature1_icon, title: service.data.feature1_title, desc: service.data.feature1_desc },
+  { icon: service.data.feature2_icon, title: service.data.feature2_title, desc: service.data.feature2_desc },
+  { icon: service.data.feature3_icon, title: service.data.feature3_title, desc: service.data.feature3_desc },
+  { icon: service.data.feature4_icon, title: service.data.feature4_title, desc: service.data.feature4_desc },
+  { icon: service.data.feature5_icon, title: service.data.feature5_title, desc: service.data.feature5_desc },
+  { icon: service.data.feature6_icon, title: service.data.feature6_title, desc: service.data.feature6_desc },
+].filter(f => f.title);
+
+const processSteps = [
+  { num: "01", title: "วิเคราะห์", desc: service.data.category === 'tech-consult' ? "วิเคราะห์กระบวนการทำงานปัจจุบันและหาโอกาส" : "วิเคราะห์การตลาดปัจจุบันและหาโอกาส" },
+  { num: "02", title: "ออกแบบ", desc: "ออกแบบระบบที่เหมาะกับความต้องการและ budget" },
+  { num: "03", title: "พัฒนา", desc: "พัฒนาและ deploy ระบบพร้อมทดสอบก่อนใช้งานจริง" },
+  { num: "04", title: service.data.category === 'tech-consult' ? "Support" : "วัดผล", desc: service.data.category === 'tech-consult' ? "ดูแลและปรับปรุงระบบให้ทำงานได้อย่างต่อเนื่อง" : "ติดตามผลและปรับปรุงอย่างต่อเนื่องเพื่อเพิ่ม ROI" },
+];
+
+const uspText = service.data.category === 'tech-consult'
+  ? "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม"
+  : "ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce";
+
+const uspTitle = service.data.category === 'tech-consult'
+  ? "Server ฟรีสำหรับลูกค้า Consult"
+  : "แก้ไขเนื้อหาฟรี!";
+---
+
+<Base title={`${service.data.title} | MoreminiMore`}>
+  <Navigation />
+
+  <PageHero 
+    badge={service.data.badge}
+    title={service.data.title}
+    subtitle={service.data.subtitle}
+  />
+
+  <!-- Objective Badge -->
+  <section class="section section-dark" style="padding: 40px 0;">
+    <div class="container">
+      <div class="hero-objective">
+        <span class="objective-label">เป้าหมายหลัก:</span>
+        <span class="objective-value">{service.data.objective}</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- USP Section -->
+  <section class="section section-light usp-section">
+    <div class="container">
+      <div class="usp-card">
+        <div class="usp-icon">🎁</div>
+        <div class="usp-content">
+          <h3 class="usp-title">{uspTitle}</h3>
+          <p class="usp-desc">{uspText}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Features Section -->
+  <section class="section features-section">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-badge">บริการของเรา</span>
+        <h2 class="section-title">{service.data.title} ที่เราช่วยได้</h2>
+      </div>
+      <div class="features-grid">
+        {features.map((feature, i) => (
+          <div class="feature-card" style={`--delay: ${i * 0.1}s`}>
+            <div class="feature-icon">{feature.icon || "⭐"}</div>
+            <h3 class="feature-title">{feature.title}</h3>
+            <p class="feature-desc">{feature.desc}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- Process Section -->
+  <section class="section section-dark process-section">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-badge">กระบวนการ</span>
+        <h2 class="section-title-light">วิธีการทำงานของเรา</h2>
+      </div>
+      <div class="process-steps">
+        {processSteps.map((step, i) => (
+          <div class="step" style={`--delay: ${i * 0.1}s`}>
+            <span class="step-num">{step.num}</span>
+            <h3 class="step-title">{step.title}</h3>
+            <p class="step-desc">{step.desc}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="section section-primary cta-section">
+    <div class="container">
+      <div class="cta-content">
+        <h2 class="cta-title">ต้องการ{service.data.objective}?</h2>
+        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
+        <div class="cta-actions">
+          <a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
+          <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <Footer />
+</Base>
+
+<style>
+  .section-dark {
+    background: var(--color-dark);
+    color: var(--color-white);
+  }
+
+  .section-light {
+    background: var(--color-gray-100);
+  }
+
+  .section-primary {
+    background: var(--color-primary);
+  }
+
+  .hero-objective {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(254, 212, 0, 0.15);
+    padding: 12px 24px;
+    border-radius: 40px;
+    border: 1px solid rgba(254, 212, 0, 0.3);
+  }
+  .objective-label { color: rgba(255,255,255,0.6); font-size: 14px; }
+  .objective-value { color: var(--color-primary); font-weight: 700; font-size: 16px; }
+
+  .usp-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+    padding: 32px;
+    background: linear-gradient(135deg, var(--color-primary) 0%, #ffe066 100%);
+    border-radius: 20px;
+  }
+  .usp-icon { font-size: 48px; flex-shrink: 0; }
+  .usp-title { font-size: 24px; font-weight: 700; color: var(--color-black); margin-bottom: 12px; }
+  .usp-desc { font-size: 16px; color: rgba(0,0,0,0.8); line-height: 1.6; }
+
+  .section-header { text-align: center; margin-bottom: 60px; }
+  .section-badge {
+    display: inline-block;
+    background: var(--color-primary);
+    color: var(--color-black);
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 16px;
+  }
+  .section-title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--color-black); }
+  .section-title-light { font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--color-white); }
+
+  .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
+  .feature-card {
+    background: var(--color-white);
+    border-radius: 16px;
+    padding: 40px 28px;
+    text-align: center;
+    border: 1px solid rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+    animation: fadeUp 0.6s ease backwards;
+    animation-delay: var(--delay);
+  }
+  .feature-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    border-color: var(--color-primary);
+  }
+  .feature-icon { font-size: 48px; margin-bottom: 20px; }
+  .feature-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--color-black); }
+  .feature-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
+
+  .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
+  .step {
+    text-align: center;
+    padding: 32px 24px;
+    background: rgba(255,255,255,0.03);
+    border-radius: 16px;
+    border: 1px solid rgba(255,255,255,0.05);
+    transition: all 0.3s ease;
+    animation: fadeUp 0.6s ease backwards;
+    animation-delay: var(--delay);
+  }
+  .step:hover { transform: translateY(-4px); border-color: var(--color-primary); }
+  .step-num { display: block; font-family: var(--font-display); font-size: 48px; font-weight: 800; color: var(--color-primary); margin-bottom: 16px; }
+  .step-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--color-white); }
+  .step-desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
+
+  .cta-content { text-align: center; }
+  .cta-title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-bottom: 16px; color: var(--color-black); }
+  .cta-desc { font-size: 18px; color: rgba(0,0,0,0.7); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }
+  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+  .btn-dark { background: var(--color-dark); color: var(--color-white); }
+  .btn-dark:hover { background: var(--color-dark-light); }
+  .btn-outline-dark { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
+  .btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
+  .btn-lg { padding: 16px 36px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
+
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @media (max-width: 1024px) {
+    .features-grid { grid-template-columns: repeat(2, 1fr); }
+    .process-steps { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 640px) {
+    .features-grid, .process-steps { grid-template-columns: 1fr; }
+    .usp-card { flex-direction: column; }
+    .cta-actions { flex-direction: column; }
+    .btn-lg { width: 100%; }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/services/ai.astro b/src/pages/services/ai.astro
deleted file mode 100644
index 8bdbf2b..0000000
--- a/src/pages/services/ai.astro
+++ /dev/null
@@ -1,262 +0,0 @@
----
-import Base from '../../layouts/Base.astro';
-import Navigation from '../../components/Navigation.astro';
-import Hero from '../../components/Hero.astro';
-import Footer from '../../components/Footer.astro';
-
-const features = [
-  {
-    icon: "🤖",
-    title: "AI Chatbot",
-    desc: "Chatbot ที่ใช้ AI ตอบคำถามลูกค้าได้ 24/7 รองรับภาษาไทย"
-  },
-  {
-    icon: "💬",
-    title: "AI Customer Service",
-    desc: "ระบบตอบคำถามอัตโนมัติด้วย AI ที่เข้าใจบริบท"
-  },
-  {
-    icon: "📝",
-    title: "AI Content Generation",
-    desc: "สร้าง content อัตโนมัติด้วย AI ที่ SEO friendly"
-  },
-  {
-    icon: "📧",
-    title: "AI Email Marketing",
-    desc: "ส่ง email ที่ personalized ด้วย AI ที่วิเคราะห์พฤติกรรม"
-  },
-  {
-    icon: "📊",
-    title: "AI Sales Prediction",
-    desc: "ทำนายยอดขายและวางแผนการตลาดด้วย AI"
-  },
-  {
-    icon: "🎯",
-    title: "AI Lead Scoring",
-    desc: "ให้คะแนน leads อัตโนมัติด้วย AI ที่เรียนรู้จากข้อมูล"
-  }
-];
----
-
-<Base title="AI Automation | MoreminiMore">
-  <Navigation />
-
-  <!-- Hero Section -->
-  <Hero
-    title="AI Automation"
-    subtitle="นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการลูกค้า เพิ่มประสิทธิภาพ ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
-    badge="บริการ"
-    image="/images/hero/ai-automation-hero.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="centered"
-    size="compact"
-  />
-
-  <!-- Features Section -->
-  <section class="section features-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">คุณสมบัติ</span>
-        <h2 class="section-title">AI ที่เรานำมาใช้</h2>
-      </div>
-      <div class="features-grid">
-        {features.map((feature, i) => (
-          <div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
-            <span class="feature-icon">{feature.icon}</span>
-            <h3 class="feature-title">{feature.title}</h3>
-            <p class="feature-desc">{feature.desc}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <!-- Case Study Section -->
-  <section class="section section-light case-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">กรณีศึกษา</span>
-        <h2 class="section-title">ผลลัพธ์ที่ลูกค้าได้รับ</h2>
-      </div>
-      <div class="case-grid">
-        <div class="case-card">
-          <span class="case-number">+35%</span>
-          <span class="case-label">เพิ่มยอดขาย</span>
-        </div>
-        <div class="case-card">
-          <span class="case-number">-60%</span>
-          <span class="case-label">ลดค่าใช้จ่าย</span>
-        </div>
-        <div class="case-card">
-          <span class="case-number">24/7</span>
-          <span class="case-label">ให้บริการลูกค้า</span>
-        </div>
-        <div class="case-card">
-          <span class="case-number">3x</span>
-          <span class="case-label">เร็วขึ้น</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section class="section section-primary cta-section">
-    <div class="container">
-      <div class="cta-content">
-        <h2 class="cta-title">พร้อมนำ AI มาใช้ในธุรกิจ?</h2>
-        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมวิเคราะห์และออกแบบ AI solution ที่เหมาะกับคุณ</p>
-        <div class="cta-actions">
-          <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
-          <a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <Footer />
-</Base>
-
-<style>
-
-  .section-header {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  .section-badge {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 6px 16px;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: var(--font-heading);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 16px;
-  }
-
-  .section-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 700;
-  }
-
-  .features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-  }
-
-  .feature-card {
-    padding: 40px 32px;
-    text-align: center;
-  }
-
-  .feature-icon {
-    font-size: 48px;
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .feature-title {
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .feature-desc {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .case-section {
-    background: var(--color-light-gray);
-  }
-
-  .case-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 48px;
-    text-align: center;
-  }
-
-  .case-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .case-number {
-    font-family: var(--font-heading);
-    font-size: 64px;
-    font-weight: 800;
-    color: var(--color-primary);
-    line-height: 1;
-    margin-bottom: 12px;
-  }
-
-  .case-label {
-    font-size: 16px;
-    color: var(--color-medium-gray);
-    text-transform: uppercase;
-    letter-spacing: 2px;
-  }
-
-  .cta-section {
-    padding: 100px 0;
-  }
-
-  .cta-content {
-    text-align: center;
-  }
-
-  .cta-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 800;
-    margin-bottom: 16px;
-  }
-
-  .cta-desc {
-    font-size: 18px;
-    margin-bottom: 40px;
-    opacity: 0.8;
-  }
-
-  .cta-actions {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  @media (max-width: 1024px) {
-    .features-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .case-grid {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 32px;
-    }
-  }
-
-  @media (max-width: 640px) {
-    .features-grid,
-    .case-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .hero-actions,
-    .cta-actions {
-      flex-direction: column;
-    }
-
-    .btn-lg {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/pages/services/consult.astro b/src/pages/services/consult.astro
deleted file mode 100644
index 950c388..0000000
--- a/src/pages/services/consult.astro
+++ /dev/null
@@ -1,271 +0,0 @@
----
-import Base from '../../layouts/Base.astro';
-import Navigation from '../../components/Navigation.astro';
-import Hero from '../../components/Hero.astro';
-import Footer from '../../components/Footer.astro';
-
-const services = [
-  {
-    icon: "🔍",
-    title: "Digital Audit",
-    desc: "วิเคราะห์สถานะดิจิทัลปัจจุบันของธุรกิจคุณอย่างละเอียด"
-  },
-  {
-    icon: "📋",
-    title: "Digital Strategy",
-    desc: "วางแผน digital transformation ที่เหมาะกับเป้าหมายธุรกิจ"
-  },
-  {
-    icon: "🛠️",
-    title: "Technology Selection",
-    desc: "แนะนำเทคโนโลยีที่เหมาะสมกับ budget และความต้องการ"
-  },
-  {
-    icon: "📐",
-    title: "System Architecture",
-    desc: "ออกแบบระบบที่ scalable และ maintainable"
-  },
-  {
-    icon: "🔧",
-    title: "Implementation Support",
-    desc: "ดูแลและให้คำปรึกษาตลอดการ implement"
-  },
-  {
-    icon: "📈",
-    title: "Performance Optimization",
-    desc: "ปรับปรุงประสิทธิภาพระบบให้ดีขึ้นอย่างต่อเนื่อง"
-  }
-];
----
-
-<Base title="Tech Consult | MoreminiMore">
-  <Navigation />
-
-  <!-- Hero Section -->
-  <Hero
-    title="Tech Consult"
-    subtitle="ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ วางแผน ออกแบบ และ implement ระบบที่เหมาะสม"
-    badge="บริการ"
-    image="/images/hero/tech-consult-hero.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="split"
-    size="compact"
-  />
-
-  <!-- Features Section -->
-  <section class="section features-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">บริการของเรา</span>
-        <h2 class="section-title">เราให้คำปรึกษาอะไรบ้าง</h2>
-      </div>
-      <div class="features-grid">
-        {services.map((service, i) => (
-          <div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
-            <span class="feature-icon">{service.icon}</span>
-            <h3 class="feature-title">{service.title}</h3>
-            <p class="feature-desc">{service.desc}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <!-- Process Section -->
-  <section class="section section-light process-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">กระบวนการ</span>
-        <h2 class="section-title">วิธีการทำงานของเรา</h2>
-      </div>
-      <div class="process-steps">
-        <div class="step">
-          <span class="step-num">01</span>
-          <h3 class="step-title">วิเคราะห์</h3>
-          <p class="step-desc">วิเคราะห์สถานะปัจจุบันและเป้าหมายของธุรกิจ</p>
-        </div>
-        <div class="step">
-          <span class="step-num">02</span>
-          <h3 class="step-title">วางแผน</h3>
-          <p class="step-desc">ออกแบบ roadmap และ timeline สำหรับ implementation</p>
-        </div>
-        <div class="step">
-          <span class="step-num">03</span>
-          <h3 class="step-title">ดำเนินการ</h3>
-          <p class="step-desc">implement ตามแผนที่วางไว้พร้อม support ตลอดเวลา</p>
-        </div>
-        <div class="step">
-          <span class="step-num">04</span>
-          <h3 class="step-title">ประเมินผล</h3>
-          <p class="step-desc">วัดผลและปรับปรุงอย่างต่อเนื่อง</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section class="section section-primary cta-section">
-    <div class="container">
-      <div class="cta-content">
-        <h2 class="cta-title">ต้องการคำปรึกษาด้านเทคโนโลยี?</h2>
-        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมรับฟังปัญหาและหาทางออกร่วมกัน</p>
-        <div class="cta-actions">
-          <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
-          <a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <Footer />
-</Base>
-
-<style>
-
-  .section-header {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  .section-badge {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 6px 16px;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: var(--font-heading);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 16px;
-  }
-
-  .section-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 700;
-  }
-
-  .features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-  }
-
-  .feature-card {
-    padding: 40px 32px;
-    text-align: center;
-  }
-
-  .feature-icon {
-    font-size: 48px;
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .feature-title {
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .feature-desc {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .process-section {
-    background: var(--color-light-gray);
-  }
-
-  .process-steps {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 32px;
-  }
-
-  .step {
-    text-align: center;
-    padding: 32px;
-    background: var(--color-white);
-    border-radius: 16px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  }
-
-  .step-num {
-    display: block;
-    font-family: var(--font-heading);
-    font-size: 48px;
-    font-weight: 800;
-    color: var(--color-primary);
-    margin-bottom: 16px;
-  }
-
-  .step-title {
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 8px;
-  }
-
-  .step-desc {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .cta-section {
-    padding: 100px 0;
-  }
-
-  .cta-content {
-    text-align: center;
-  }
-
-  .cta-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 800;
-    margin-bottom: 16px;
-  }
-
-  .cta-desc {
-    font-size: 18px;
-    margin-bottom: 40px;
-    opacity: 0.8;
-  }
-
-  .cta-actions {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  @media (max-width: 1024px) {
-    .features-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .process-steps {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  @media (max-width: 640px) {
-    .features-grid,
-    .process-steps {
-      grid-template-columns: 1fr;
-    }
-
-    .hero-actions,
-    .cta-actions {
-      flex-direction: column;
-    }
-
-    .btn-lg {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/pages/services/index.astro b/src/pages/services/index.astro
new file mode 100644
index 0000000..dd3c0d8
--- /dev/null
+++ b/src/pages/services/index.astro
@@ -0,0 +1,221 @@
+---
+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 ServiceCard from '../../components/ServiceCard.astro';
+import { getCollection } from 'astro:content';
+
+const services = await getCollection('services');
+const techServices = services.filter(s => s.data.category === 'tech-consult');
+const marketingServices = services.filter(s => s.data.category === 'marketing-consult');
+
+// 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">
+  <Navigation />
+
+  <PageHero 
+    badge="บริการ"
+    title="บริการของเรา"
+    subtitle="ครบจบทุกโซลูชันด้านดิจิทัลสำหรับธุรกิจไทย"
+  />
+
+  <section class="section">
+    <div class="container">
+
+      <!-- Tech Consult Category -->
+      <div class="category-section">
+        <div class="category-header">
+          <div class="category-icon">🔧</div>
+          <div class="category-info">
+            <span class="category-badge">Technology Consult</span>
+            <h2 class="category-title">ลดต้นทุนและเวลา</h2>
+            <p class="category-desc">บริการให้คำปรึกษาด้านเทคโนโลยีเพื่อเพิ่มประสิทธิภาพการทำงานและลดค่าใช้จ่ายในระยะยาว</p>
+          </div>
+        </div>
+        <div class="services-grid">
+          {techServices.map(s => (
+            <ServiceCard
+              title={s.data.title}
+              subtitle={s.data.subtitle}
+              image={serviceImages[s.slug] || '/images/services/default.jpg'}
+              link={`/services/${s.slug}`}
+            />
+          ))}
+        </div>
+        <div class="usp-box">
+          <div class="usp-icon">🎁</div>
+          <div class="usp-content">
+            <h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Consult</h4>
+            <p class="usp-desc">ลูกค้าที่ใช้บริการ Technology Consult จะได้รับ Server ฟรีสำหรับ App และ AI (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Marketing Consult Category -->
+      <div class="category-section">
+        <div class="category-header">
+          <div class="category-icon">📈</div>
+          <div class="category-info">
+            <span class="category-badge">Marketing Consult</span>
+            <h2 class="category-title">เพิ่มยอดขาย</h2>
+            <p class="category-desc">บริการด้านการตลาดที่ช่วยให้ธุรกิจของคุณเข้าถึงลูกค้าได้มากขึ้นและเพิ่มยอดขายอย่างเป็นระบบ</p>
+          </div>
+        </div>
+        <div class="services-grid">
+          {marketingServices.map(s => (
+            <ServiceCard
+              title={s.data.title}
+              subtitle={s.data.subtitle}
+              image={serviceImages[s.slug] || '/images/services/default.jpg'}
+              link={`/services/${s.slug}`}
+            />
+          ))}
+        </div>
+        <div class="usp-box">
+          <div class="usp-icon">🎁</div>
+          <div class="usp-content">
+            <h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Website</h4>
+            <p class="usp-desc">ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="section section-primary cta">
+    <div class="container">
+      <div class="cta-content">
+        <h2 class="cta-title">พร้อมเริ่มต้นวันนี้?</h2>
+        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
+        <div class="cta-actions">
+          <a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
+          <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <Footer />
+</Base>
+
+<style>
+  .category-section {
+    margin-bottom: 80px;
+  }
+  .category-section:last-of-type { margin-bottom: 0; }
+
+  .category-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+    margin-bottom: 40px;
+    padding: 32px;
+    background: var(--color-gray-100);
+    border-radius: 20px;
+  }
+  .category-icon {
+    font-size: 48px;
+    flex-shrink: 0;
+  }
+  .category-info { flex: 1; }
+  .category-badge {
+    display: inline-block;
+    background: var(--color-primary);
+    color: var(--color-black);
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  .category-title {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--color-dark);
+    margin-bottom: 8px;
+  }
+  .category-desc {
+    font-size: 16px;
+    color: var(--color-gray-600);
+    line-height: 1.6;
+  }
+
+  .services-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    margin-bottom: 32px;
+  }
+
+  .usp-box {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 24px;
+    background: linear-gradient(135deg, var(--color-primary) 0%, #ffe066 100%);
+    border-radius: 16px;
+  }
+  .usp-icon { font-size: 32px; flex-shrink: 0; }
+  .usp-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--color-black);
+    margin-bottom: 8px;
+  }
+  .usp-desc {
+    font-size: 14px;
+    color: rgba(0,0,0,0.8);
+    line-height: 1.6;
+  }
+
+  .section-primary { background: var(--color-primary); }
+  .cta-content { text-align: center; }
+  .cta-title {
+    font-size: clamp(28px, 4vw, 42px);
+    font-weight: 800;
+    margin-bottom: 16px;
+    color: var(--color-black);
+  }
+  .cta-desc {
+    font-size: 18px;
+    color: rgba(0,0,0,0.7);
+    margin-bottom: 32px;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
+  .btn-outline-dark {
+    background: transparent;
+    color: var(--color-black);
+    border: 2px solid var(--color-black);
+  }
+  .btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
+  .btn-dark {
+    background: var(--color-dark);
+    color: var(--color-white);
+  }
+  .btn-dark:hover { background: var(--color-dark-light); }
+  .btn-lg { padding: 16px 36px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
+
+  @media (max-width: 1024px) {
+    .services-grid { grid-template-columns: 1fr; }
+  }
+  @media (max-width: 640px) {
+    .category-header { flex-direction: column; }
+    .cta-actions { flex-direction: column; }
+    .btn-lg { width: 100%; }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/services/marketing.astro b/src/pages/services/marketing.astro
deleted file mode 100644
index 7d858e4..0000000
--- a/src/pages/services/marketing.astro
+++ /dev/null
@@ -1,262 +0,0 @@
----
-import Base from '../../layouts/Base.astro';
-import Navigation from '../../components/Navigation.astro';
-import Hero from '../../components/Hero.astro';
-import Footer from '../../components/Footer.astro';
-
-const features = [
-  {
-    icon: "📧",
-    title: "Email Automation",
-    desc: "ส่ง email อัตโนมัติเมื่อ trigger ตรงกับเงื่อนไขที่กำหนด"
-  },
-  {
-    icon: "💬",
-    title: "Chatbot Integration",
-    desc: "เชื่อมต่อ chatbot กับระบบ CRM เพื่อเก็บข้อมูลลูกค้า"
-  },
-  {
-    icon: "📱",
-    title: "SMS/Line Automation",
-    desc: "ส่ง SMS หรือ LINE message อัตโนมัติตาม timeline"
-  },
-  {
-    icon: "📊",
-    title: "Analytics Dashboard",
-    desc: "ติดตามผลแคมเปญและวัด ROI ได้แบบ real-time"
-  },
-  {
-    icon: "🎯",
-    title: "Lead Scoring",
-    desc: "ให้คะแนน leads ตามพฤติกรรมเพื่อจัดลำดับความสำคัญ"
-  },
-  {
-    icon: "🔄",
-    title: "Workflow Automation",
-    desc: "สร้าง workflow อัตโนมัติสำหรับงานที่ทำซ้ำๆ"
-  }
-];
----
-
-<Base title="Marketing Automation | MoreminiMore">
-  <Navigation />
-
-  <!-- Hero Section -->
-  <Hero
-    title="Marketing Automation"
-    subtitle="เพิ่มประสิทธิภาพการตลาดและลดต้นทุนด้วยระบบอัตโนมัติ ประหยัดเวลา เพิ่ม conversion วัดผลได้"
-    badge="บริการ"
-    image="/images/hero/marketing-automation-hero.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="split"
-    size="compact"
-  />
-
-  <!-- Features Section -->
-  <section class="section features-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">คุณสมบัติ</span>
-        <h2 class="section-title">ระบบที่เราสร้างให้คุณ</h2>
-      </div>
-      <div class="features-grid">
-        {features.map((feature, i) => (
-          <div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
-            <span class="feature-icon">{feature.icon}</span>
-            <h3 class="feature-title">{feature.title}</h3>
-            <p class="feature-desc">{feature.desc}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <!-- Benefits Section -->
-  <section class="section section-light benefits-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">ประโยชน์</span>
-        <h2 class="section-title">ทำไมต้องทำ Marketing Automation</h2>
-      </div>
-      <div class="benefits-grid">
-        <div class="benefit-item">
-          <span class="benefit-number">50%</span>
-          <span class="benefit-label">ลดเวลาทำงาน</span>
-        </div>
-        <div class="benefit-item">
-          <span class="benefit-number">3x</span>
-          <span class="benefit-label">เพิ่ม conversion</span>
-        </div>
-        <div class="benefit-item">
-          <span class="benefit-number">24/7</span>
-          <span class="benefit-label">ให้บริการลูกค้า</span>
-        </div>
-        <div class="benefit-item">
-          <span class="benefit-number">100%</span>
-          <span class="benefit-label">วัดผลได้</span>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section class="section section-primary cta-section">
-    <div class="container">
-      <div class="cta-content">
-        <h2 class="cta-title">พร้อมเพิ่มประสิทธิภาพการตลาด?</h2>
-        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมวิเคราะห์และออกแบบระบบที่เหมาะกับธุรกิจของคุณ</p>
-        <div class="cta-actions">
-          <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
-          <a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <Footer />
-</Base>
-
-<style>
-
-  .section-header {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  .section-badge {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 6px 16px;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: var(--font-heading);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 16px;
-  }
-
-  .section-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 700;
-  }
-
-  .features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-  }
-
-  .feature-card {
-    padding: 40px 32px;
-    text-align: center;
-  }
-
-  .feature-icon {
-    font-size: 48px;
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .feature-title {
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .feature-desc {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .benefits-section {
-    background: var(--color-light-gray);
-  }
-
-  .benefits-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 48px;
-    text-align: center;
-  }
-
-  .benefit-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .benefit-number {
-    font-family: var(--font-heading);
-    font-size: 64px;
-    font-weight: 800;
-    color: var(--color-primary);
-    line-height: 1;
-    margin-bottom: 12px;
-  }
-
-  .benefit-label {
-    font-size: 16px;
-    color: var(--color-medium-gray);
-    text-transform: uppercase;
-    letter-spacing: 2px;
-  }
-
-  .cta-section {
-    padding: 100px 0;
-  }
-
-  .cta-content {
-    text-align: center;
-  }
-
-  .cta-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 800;
-    margin-bottom: 16px;
-  }
-
-  .cta-desc {
-    font-size: 18px;
-    margin-bottom: 40px;
-    opacity: 0.8;
-  }
-
-  .cta-actions {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  @media (max-width: 1024px) {
-    .features-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .benefits-grid {
-      grid-template-columns: repeat(2, 1fr);
-      gap: 32px;
-    }
-  }
-
-  @media (max-width: 640px) {
-    .features-grid,
-    .benefits-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .hero-actions,
-    .cta-actions {
-      flex-direction: column;
-    }
-
-    .btn-lg {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/pages/services/webdev.astro b/src/pages/services/webdev.astro
deleted file mode 100644
index 3cc5dcb..0000000
--- a/src/pages/services/webdev.astro
+++ /dev/null
@@ -1,283 +0,0 @@
----
-import Base from '../../layouts/Base.astro';
-import Navigation from '../../components/Navigation.astro';
-import Hero from '../../components/Hero.astro';
-import Footer from '../../components/Footer.astro';
-
-const features = [
-  {
-    icon: "⚡",
-    title: "เร็วสุดใน class",
-    desc: "โหลดเร็ว เพิ่ม conversion และ SEO ranking"
-  },
-  {
-    icon: "📱",
-    title: "Responsive ทุก device",
-    desc: "แสดงผลได้ดีบน mobile tablet และ desktop"
-  },
-  {
-    icon: "🎨",
-    title: "Design สวยงาม",
-    desc: "ออกแบบ UI/UX ที่ดึงดูดและใช้งานง่าย"
-  },
-  {
-    icon: "🔒",
-    title: "ปลอดภัย",
-    desc: "Security ระดับสูง ป้องกันการโจมตี"
-  },
-  {
-    icon: "SEO",
-    title: "SEO Optimized",
-    desc: "ออกแบบมาเพื่อให้ Google ชอบ"
-  },
-  {
-    icon: "📊",
-    title: "Analytics ในตัว",
-    desc: "ติดตามผู้เข้าชมและวัดผลได้"
-  }
-];
----
-
-<Base title="พัฒนาเว็บไซต์ | MoreminiMore">
-  <Navigation />
-
-  <!-- Hero Section -->
-  <Hero
-    title="พัฒนาเว็บไซต์"
-    subtitle="สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการของลูกค้าของคุณ ด้วยเทคโนโลยีล่าสุดและ design ที่สวยงาม"
-    badge="บริการ"
-    image="/images/hero/web-development-hero.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="split"
-    size="compact"
-  />
-
-  <!-- Features Section -->
-  <section class="section features-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">คุณสมบัติ</span>
-        <h2 class="section-title">ทำไมต้องเลือกเรา</h2>
-      </div>
-      <div class="features-grid">
-        {features.map((feature, i) => (
-          <div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
-            <span class="feature-icon">{feature.icon}</span>
-            <h3 class="feature-title">{feature.title}</h3>
-            <p class="feature-desc">{feature.desc}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
-
-  <!-- Services List -->
-  <section class="section section-light services-list-section">
-    <div class="container">
-      <div class="section-header">
-        <span class="section-badge">บริการของเรา</span>
-        <h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
-      </div>
-      <div class="services-list">
-        <div class="service-item">
-          <span class="service-num">01</span>
-          <div class="service-content">
-            <h3>Landing Page</h3>
-            <p>สร้าง landing page ที่ออกแบบมาเพื่อ convert ผู้เข้าชมเป็นลูกค้า ด้วย design ที่ดึงดูดและ content ที่ตรงใจ</p>
-          </div>
-        </div>
-        <div class="service-item">
-          <span class="service-num">02</span>
-          <div class="service-content">
-            <h3>เว็บไซต์องค์กร</h3>
-            <p>พัฒนาเว็บไซต์สำหรับองค์กรที่ต้องการ professional online presence พร้อมระบบจัดการเนื้อหา</p>
-          </div>
-        </div>
-        <div class="service-item">
-          <span class="service-num">03</span>
-          <div class="service-content">
-            <h3>E-commerce</h3>
-            <p>สร้างร้านค้าออนไลน์ที่สมบูรณ์แบบ รองรับการชำระเงิน จัดส่งสินค้า และ inventory management</p>
-          </div>
-        </div>
-        <div class="service-item">
-          <span class="service-num">04</span>
-          <div class="service-content">
-            <h3>Web Application</h3>
-            <p>พัฒนา web application ที่ซับซ้อนตามความต้องการของธุรกิจ ไม่ว่าจะเป็นระบบจอง ระบบขาย หรือระบบ management</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section class="section section-primary cta-section">
-    <div class="container">
-      <div class="cta-content">
-        <h2 class="cta-title">พร้อมเริ่มโปรเจกต์เว็บไซต์?</h2>
-        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
-        <div class="cta-actions">
-          <a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
-          <a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <Footer />
-</Base>
-
-<style>
-
-  .section-header {
-    text-align: center;
-    margin-bottom: 60px;
-  }
-
-  .section-badge {
-    display: inline-block;
-    background: var(--color-primary);
-    color: var(--color-black);
-    padding: 6px 16px;
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: var(--font-heading);
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 16px;
-  }
-
-  .section-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 700;
-  }
-
-  .features-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 32px;
-  }
-
-  .feature-card {
-    padding: 40px 32px;
-    text-align: center;
-  }
-
-  .feature-icon {
-    font-size: 48px;
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .feature-title {
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 12px;
-  }
-
-  .feature-desc {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .services-list-section {
-    background: var(--color-light-gray);
-  }
-
-  .services-list {
-    max-width: 800px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .service-item {
-    display: flex;
-    gap: 32px;
-    padding: 32px;
-    background: var(--color-white);
-    border-radius: 16px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-    align-items: flex-start;
-  }
-
-  .service-num {
-    font-family: var(--font-heading);
-    font-size: 48px;
-    font-weight: 800;
-    color: var(--color-primary);
-    line-height: 1;
-    flex-shrink: 0;
-  }
-
-  .service-content h3 {
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 8px;
-  }
-
-  .service-content p {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    line-height: 1.6;
-  }
-
-  .cta-section {
-    padding: 100px 0;
-  }
-
-  .cta-content {
-    text-align: center;
-  }
-
-  .cta-title {
-    font-size: clamp(32px, 5vw, 48px);
-    font-weight: 800;
-    margin-bottom: 16px;
-  }
-
-  .cta-desc {
-    font-size: 18px;
-    margin-bottom: 40px;
-    opacity: 0.8;
-  }
-
-  .cta-actions {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  @media (max-width: 1024px) {
-    .features-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  @media (max-width: 640px) {
-    .features-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .service-item {
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .hero-actions,
-    .cta-actions {
-      flex-direction: column;
-    }
-
-    .btn-lg {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/pages/terms.astro b/src/pages/terms.astro
index 09959c3..d4c59f9 100644
--- a/src/pages/terms.astro
+++ b/src/pages/terms.astro
@@ -1,232 +1,87 @@
 ---
 import Base from '../layouts/Base.astro';
 import Navigation from '../components/Navigation.astro';
-import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
+import PageHero from '../components/PageHero.astro';
 ---
 
-<Base title="เงื่อนไขการให้บริการ | MoreminiMore">
+<Base title="เงื่อนไขการให้บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
   <Navigation />
 
-  <Hero
+  <PageHero 
+    badge="กฎหมาย"
     title="เงื่อนไขการให้บริการ"
     subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
-    badge="กฎหมาย"
-    image="/images/hero/marketing-automation.jpg"
-    theme="yellow"
-    showCTA={false}
-    variant="text-only"
-    size="compact"
   />
 
-  <main class="legal-page">
+  <section class="section legal-section">
     <div class="container">
-      <header class="legal-header">
-        <h1 class="legal-title">เงื่อนไขการให้บริการ</h1>
-        <p class="legal-meta">มีผลบังคับใช้วันที่: 5 พฤษภาคม 2569 | แก้ไขล่าสุด: 5 พฤษภาคม 2569</p>
-      </header>
-
       <div class="legal-content">
-        <p class="legal-intro">
-          <strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br />
-          <strong>เว็บไซต์:</strong> https://www.moreminimore.com<br />
-          <strong>บริษัท:</strong> MoreminiMore Co.,Ltd.
-        </p>
+        <p class="legal-intro">ชื่อเว็บไซต์: MoreminiMore | เว็บไซต์: https://www.moreminimore.com | บริษัท: MoreminiMore Co.,Ltd.</p>
 
-        <section class="legal-section">
+        <div class="legal-section">
           <h2>1. การยอมรับเงื่อนไข</h2>
+          <p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ของบริษัท มอร์มินิมอร์ จำกัด ท่านยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้</p>
+        </div>
 
-          <h3>1.1 ข้อตกลง</h3>
-          <p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ https://www.moreminimore.com ("เว็บไซต์") ของบริษัท MoreminiMore Co.,Ltd. ("เรา", "ของเรา" หรือ "บริษัท") ท่าน ("ผู้ใช้", "ท่าน" หรือ "ของคุณ") ยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้ ("เงื่อนไข")</p>
+        <div class="legal-section">
+          <h2>2. การแก้ไขเงื่อนไข</h2>
+          <p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้ การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์ ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</p>
+        </div>
 
-          <h3>1.2 การแก้ไขเงื่อนไข</h3>
-          <p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้:</p>
-          <ul>
-            <li>การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์</li>
-            <li>ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</li>
-            <li>การใช้งานเว็บไซต์ต่อเนื่องแสดงว่าท่านยอมรับการแก้ไข</li>
-          </ul>
+        <div class="legal-section">
+          <h2>3. บริการของเรา</h2>
+          <p>เราให้บริการพัฒนาเว็บไซต์ AI Automation และ Marketing Automation สำหรับธุรกิจไทย โดยมีรายละเอียดและขอบเขตงานตามที่ตกลงกันในสัญญา</p>
+        </div>
 
-          <h3>1.3 อายุขั้นต่ำ</h3>
-          <p>ท่านต้องมีอายุไม่ต่ำกว่า 20 ปีบริบูรณ์เพื่อใช้งานเว็บไซต์ หากท่านอายุต่ำกว่า 20 ปี ท่านต้องได้รับความยินยอมจากผู้ปกครอง</p>
-        </section>
+        <div class="legal-section">
+          <h2>4. การชำระเงิน</h2>
+          <p>การชำระเงินจะเป็นไปตามเงื่อนไขที่กำหนดในใบเสนอราคาและสัญญา ลูกค้าตกลงชำระตามกำหนดเวลาที่ระบุ</p>
+        </div>
 
-        <section class="legal-section">
-          <h2>2. บริการของเรา</h2>
+        <div class="legal-section">
+          <h2>5. การรับประกัน</h2>
+          <p>เรารับประกันคุณภาพงานตามที่ระบุในสัญญา หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจตามเงื่อนไขที่กำหนด</p>
+        </div>
 
-          <h3>2.1 คำอธิบายบริการ</h3>
-          <p>MoreminiMore ให้บริการ:</p>
-          <ol>
-            <li><strong>พัฒนาเว็บไซต์</strong> - รับทำเว็บไซต์ระดับมืออาชีพด้วยเทคโนโลยีล่าสุด</li>
-            <li><strong>Marketing Automation</strong> - ระบบอัตโนมัติสำหรับการตลาด</li>
-            <li><strong>AI Automation</strong> - บริการ AI สำหรับธุรกิจ</li>
-          </ol>
+        <div class="legal-section">
+          <h2>6. ข้อจำกัดความรับผิด</h2>
+          <p>ความรับผิดของบริษัทจะจำกัดอยู่ที่มูลค่าของงานที่ให้บริการตามที่ระบุในสัญญา</p>
+        </div>
 
-          <h3>2.2 การเปลี่ยนแปลงบริการ</h3>
-          <p>เราขอสงวนสิทธิในการเพิ่ม ลบ หรือแก้ไขฟีเจอร์ของบริการ ระงับหรือยุติบริการชั่วคราวหรือถาวร</p>
-
-          <h3>2.3 ความพร้อมของบริการ</h3>
-          <p>เราพยายามให้บริการอย่างต่อเนื่อง แต่ไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>3. บัญชีผู้ใช้</h2>
-          <p>เพื่อใช้งานบริการบางอย่าง ท่านต้องสร้างบัญชีผู้ใช้โดยให้ข้อมูลที่ถูกต้อง ครบถ้วน และทันสมัย ท่านต้องรักษารหัสผ่านให้เป็นความลับและรับผิดชอบต่อทุกกิจกรรมที่เกิดขึ้นภายใต้บัญชีของท่าน</p>
-          <p>เราขอสงวนสิทธิในการระงับหรือลบบัญชีของท่านหากละเมิดเงื่อนไขหรือมีกิจกรรมที่น่าสงสัย</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>4. ความเป็นเจ้าของทรัพย์สินทางปัญญา</h2>
-          <p>เว็บไซต์และเนื้อหาทั้งหมดเป็นทรัพย์สินของเราหรือผู้ให้ใบอนุญาต รวมถึงเนื้อหา ข้อความ กราฟิก โลโก้ ซอฟต์แวร์ โค้ด และการออกแบบ เครื่องหมายการค้าและโลโก้เป็นเครื่องหมายการค้าของเรา</p>
-          <p>ท่านยังคงเป็นเจ้าของเนื้อหาที่ท่านส่งมาและให้ใบอนุญาตแก่เราในการใช้เนื้อหานั้น</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>5. ข้อห้ามในการใช้งาน</h2>
-          <p>ท่านตกลงที่จะไม่ใช้เว็บไซต์เพื่อกิจกรรมที่ผิดกฎหมาย ละเมิดสิทธิทางปัญญา ละเมิดความเป็นส่วนตัว ส่งเนื้อหาที่ผิดกฎหมาย เผยแพร่ไวรัสหรือมัลแวร์ พยายามเข้าถึงระบบโดยไม่ได้รับอนุญาต หรือส่งสแปม</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>6. การชำระเงิน</h2>
-          <ul>
-            <li>ราคาทั้งหมดแสดงเป็นเงินบาทไทย (THB) และรวม VAT 7% แล้ว</li>
-            <li>เรายอมรับการชำระเงินผ่าน พีเอ็ม, โอนเงินผ่านธนาคาร</li>
-            <li>ผู้ใช้สามารถขอคืนเงินได้ภายใน 7 วันนับจากวันที่ชำระเงิน</li>
-            <li>การคืนเงินจะดำเนินการภายใน 5 วันทำการ</li>
-          </ul>
-        </section>
-
-        <section class="legal-section">
-          <h2>7. การปฏิเสธความรับผิดชอบ</h2>
-          <p>บริการให้บริการ "ตามที่เป็น" และ "ตามที่มี" เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด ความรับผิดรวมของเราจะไม่เกิน 100,000 บาท</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>8. กฎหมายที่ใช้บังคับ</h2>
-          <p>เงื่อนไขนี้ถูกควบคุมและตีความตามกฎหมายแห่งราชอาณาจักรไทย ข้อพิพาทใดๆ อยู่ภายใต้เขตอำนาจศาลของศาลแพ่ง/ศาลล้มละลายกลาง กรุงเทพมหานคร</p>
-          <p>ก่อนดำเนินการทางกฎหมาย พยายามเจรจาเพื่อระงับข้อพิพาทภายใน 30 วัน</p>
-        </section>
-
-        <section class="legal-section">
-          <h2>9. การติดต่อ</h2>
-          <div class="contact-box">
-            <p><strong>อีเมล:</strong> contact@moreminimore.com</p>
-            <p><strong>โทรศัพท์:</strong> 080-995-5945</p>
-            <p><strong>ที่อยู่:</strong> กรุงเทพมหานคร ประเทศไทย</p>
-          </div>
-        </section>
-
-        <footer class="legal-footer">
-          <p>*เอกสารนี้เป็นเอกสารทางกฎหมาย หากท่านมีข้อสงสัย กรุณาปรึกษาที่ปรึกษากฎหมาย</p>
-        </footer>
+        <div class="legal-section">
+          <h2>7. ติดต่อเรา</h2>
+          <p>หากมีคำถามเกี่ยวกับเงื่อนไขการให้บริการ กรุณาติดต่อเราที่ contact@moreminimore.com หรือ 080-995-5945</p>
+        </div>
       </div>
     </div>
-  </main>
+  </section>
 
   <Footer />
 </Base>
 
 <style>
-  .legal-page {
-    padding: 120px 0 80px;
-    min-height: 100vh;
-  }
-
-  .legal-header {
-    text-align: center;
-    margin-bottom: 60px;
-    padding-bottom: 40px;
-    border-bottom: 2px solid var(--color-primary);
-  }
-
-  .legal-title {
-    font-size: clamp(36px, 5vw, 56px);
-    font-weight: 800;
-    color: var(--color-black);
-    margin-bottom: 16px;
-  }
-
-  .legal-meta {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-  }
-
-  .legal-content {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-
+  .legal-section { background: var(--color-white); }
+  .legal-content { max-width: 800px; margin: 0 auto; }
   .legal-intro {
-    font-size: 14px;
-    line-height: 2;
+    font-size: 18px;
+    color: var(--color-medium-gray);
     margin-bottom: 48px;
-    padding: 20px 24px;
-    background: var(--color-light-gray);
-    border-radius: 12px;
-    border-left: 4px solid var(--color-primary);
+    line-height: 1.7;
   }
-
   .legal-section {
     margin-bottom: 48px;
   }
-
   .legal-section h2 {
     font-size: 24px;
     font-weight: 700;
-    color: var(--color-black);
     margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid #eee;
+    color: var(--color-black);
   }
-
-  .legal-section h3 {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--color-primary);
-    margin: 24px 0 12px;
-  }
-
   .legal-section p {
     font-size: 16px;
+    color: #444;
     line-height: 1.8;
-    color: #444;
     margin-bottom: 16px;
   }
-
-  .legal-section ul,
-  .legal-section ol {
-    margin-left: 24px;
-    margin-bottom: 16px;
-  }
-
-  .legal-section li {
-    font-size: 16px;
-    line-height: 1.7;
-    color: #444;
-    margin-bottom: 8px;
-  }
-
-  .contact-box {
-    background: var(--color-light-gray);
-    padding: 24px;
-    border-radius: 12px;
-    margin-top: 16px;
-  }
-
-  .contact-box p {
-    margin-bottom: 8px;
-  }
-
-  .legal-footer {
-    margin-top: 60px;
-    padding-top: 24px;
-    border-top: 1px solid #eee;
-    text-align: center;
-  }
-
-  .legal-footer p {
-    font-size: 14px;
-    color: var(--color-medium-gray);
-    font-style: italic;
-  }
 </style>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 3036999..e13c669 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,28 +1,76 @@
-/* Global CSS Variables and Base Styles */
-@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');
+/* ============================================
+   MOREMINIMORE - KINETIC TYPOGRAPHY DESIGN SYSTEM
+   A unique design where typography IS the hero
+   ============================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800;900&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');
+
+/* ============================================
+   CSS CUSTOM PROPERTIES
+   ============================================ */
 
 :root {
-  /* Colors */
+  /* Brand Colors */
   --color-primary: #fed400;
-  --color-accent: #1e3a5f;
+  --color-primary-dark: #e6c100;
+  --color-primary-light: #fff176;
+  --color-dark: #1a1a2e;
+  --color-dark-light: #252542;
   --color-black: #000000;
   --color-white: #ffffff;
-  --color-light-gray: #f5f5f5;
-  --color-dark-gray: #1a1a1a;
-  --color-medium-gray: #6b7280;
-  --color-dark-section: #0a0a0a;
-
+  --color-gray-100: #f5f5f5;
+  --color-gray-200: #e5e5e5;
+  --color-gray-400: #9ca3af;
+  --color-gray-600: #6b7280;
+  
   /* Typography */
-  --font-heading: 'Kanit', sans-serif;
+  --font-display: 'Kanit', sans-serif;
   --font-body: 'Noto Sans Thai', sans-serif;
-
+  
   /* Spacing */
-  --section-padding: 80px;
-  --container-max: 1280px;
+  --space-xs: 8px;
+  --space-sm: 16px;
+  --space-md: 24px;
+  --space-lg: 40px;
+  --space-xl: 64px;
+  --space-2xl: 96px;
+  --space-3xl: 128px;
+  
+  /* Layout */
+  --container-max: 1400px;
   --gutter: 32px;
+  --section-padding: 120px;
+  
+  /* Animation */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
+  
+  --duration-fast: 0.2s;
+  --duration-normal: 0.4s;
+  --duration-slow: 0.8s;
+  --duration-slower: 1.2s;
+  
+  /* Shadows */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
+  --shadow-glow: 0 0 40px rgba(254, 212, 0, 0.4);
+  
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
 }
 
-* {
+/* ============================================
+   RESET & BASE
+   ============================================ */
+
+*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -30,175 +78,806 @@
 
 html {
   scroll-behavior: smooth;
+  font-size: 16px;
 }
 
 body {
   font-family: var(--font-body);
-  font-size: 16px;
+  font-weight: 400;
   line-height: 1.7;
   color: var(--color-black);
   background: var(--color-white);
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-heading);
-  font-weight: 700;
-  line-height: 1.2;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 a {
-  text-decoration: none;
+  text-decoration: none !important;
   color: inherit;
 }
 
-img {
-  max-width: 100%;
-  height: auto;
+a:hover {
+  text-decoration: none !important;
 }
 
-/* Container */
+/* Cursor Trail Container */
+.cursor-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+.particle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--color-primary);
+  border-radius: 50%;
+  pointer-events: none;
+  mix-blend-mode: difference;
+}
+
+/* ============================================
+   TYPOGRAPHY - THE CORE OF THE DESIGN
+   ============================================ */
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+/* Giant Typography - Primary Visual Element */
+.text-display-xl {
+  font-family: var(--font-display);
+  font-size: clamp(60px, 12vw, 160px);
+  font-weight: 900;
+  line-height: 0.9;
+  letter-spacing: -0.03em;
+  text-transform: uppercase;
+}
+
+.text-display-lg {
+  font-family: var(--font-display);
+  font-size: clamp(40px, 8vw, 100px);
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.text-display-md {
+  font-family: var(--font-display);
+  font-size: clamp(28px, 5vw, 56px);
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+/* Kinetic Word Animation */
+.kinetic-word {
+  display: inline-block;
+  overflow: hidden;
+}
+
+.kinetic-word-inner {
+  display: inline-block;
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.kinetic-word.revealed .kinetic-word-inner {
+  animation: wordReveal 0.8s var(--ease-out-expo) forwards;
+}
+
+@keyframes wordReveal {
+  0% {
+    transform: translateY(100%) skewY(10deg);
+    opacity: 0;
+  }
+  60% {
+    transform: translateY(-5%) skewY(-2deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0) skewY(0);
+    opacity: 1;
+  }
+}
+
+/* ============================================
+   LAYOUT
+   ============================================ */
+
 .container {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: 0 var(--gutter);
 }
 
-/* Section Styles */
+/* ============================================
+   SECTION STYLES
+   ============================================ */
+
 .section {
   padding: var(--section-padding) 0;
+  position: relative;
 }
 
 .section-dark {
-  background: var(--color-dark-section);
+  background: var(--color-dark);
   color: var(--color-white);
 }
 
 .section-light {
-  background: var(--color-light-gray);
+  background: var(--color-gray-100);
 }
 
 .section-primary {
   background: var(--color-primary);
-  color: var(--color-black);
 }
 
-.section-accent {
-  background: var(--color-accent);
-  color: var(--color-white);
+/* Seamless Section Transitions */
+.section-gradient-top {
+  position: relative;
 }
 
-/* Button Styles */
+.section-gradient-top::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(to bottom, var(--color-dark) 0%, transparent 100%);
+  z-index: 2;
+  pointer-events: none;
+}
+
+.section-gradient-bottom {
+  position: relative;
+}
+
+.section-gradient-bottom::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(to top, var(--color-dark) 0%, transparent 100%);
+  z-index: 2;
+  pointer-events: none;
+}
+
+/* ============================================
+   MAGAZINE STYLE - OVERLAP UTILITIES
+   ============================================ */
+
+.overlap-top {
+  margin-top: -60px;
+  position: relative;
+  z-index: 10;
+}
+
+.overlap-top-sm {
+  margin-top: -30px;
+}
+
+.overlap-top-lg {
+  margin-top: -100px;
+}
+
+.overlap-bottom {
+  margin-bottom: -60px;
+}
+
+.floating-card {
+  position: relative;
+  z-index: 10;
+  margin-top: -40px;
+  background: var(--color-white);
+  border-radius: 24px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
+}
+
+.container-bleed {
+  width: 100%;
+  padding: 0 32px;
+}
+
+.break-container {
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+}
+
+/* ============================================
+   ANIMATED ACCENT LINE
+   ============================================ */
+
+.accent-line {
+  position: relative;
+  height: 6px;
+  background: var(--color-primary);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.accent-line::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0%, 100% { transform: translateX(-100%); }
+  50% { transform: translateX(100%); }
+}
+
+/* Draw Line Animation */
+.draw-line {
+  position: relative;
+  height: 4px;
+  background: var(--color-gray-200);
+  overflow: hidden;
+}
+
+.draw-line::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  background: var(--color-primary);
+  animation: drawLine 1s var(--ease-out-expo) forwards;
+}
+
+@keyframes drawLine {
+  to { width: 100%; }
+}
+
+/* ============================================
+   BUTTONS - MAGNETIC EFFECT
+   ============================================ */
+
 .btn {
+  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 16px 32px;
-  font-family: var(--font-heading);
-  font-weight: 600;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px 40px;
+  font-family: var(--font-display);
   font-size: 16px;
-  border-radius: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 2px;
   border: none;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.3s ease;
+  overflow: hidden;
+  transition: transform var(--duration-normal) var(--ease-out-expo),
+              box-shadow var(--duration-normal) var(--ease-out-expo);
 }
 
 .btn-primary {
   background: var(--color-primary);
   color: var(--color-black);
-  box-shadow: 0 4px 20px rgba(254, 212, 0, 0.3);
+  box-shadow: var(--shadow-glow);
 }
 
 .btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
+  box-shadow: 0 0 60px rgba(254, 212, 0, 0.6);
 }
 
-.btn-secondary {
-  background: var(--color-black);
+.btn-dark {
+  background: var(--color-dark);
   color: var(--color-white);
 }
 
-.btn-secondary:hover {
-  background: #222;
-  transform: translateY(-2px);
+.btn-dark:hover {
+  background: var(--color-dark-light);
 }
 
-/* Card Styles */
-.card {
+.btn-outline {
+  background: transparent;
+  border: 3px solid currentColor;
+}
+
+/* Shine Effect on Buttons */
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.5),
+    transparent
+  );
+  transition: left 0.6s ease;
+}
+
+.btn:hover::before {
+  left: 100%;
+}
+
+/* ============================================
+   CARDS - TILT EFFECT
+   ============================================ */
+
+.tilt-card {
+  position: relative;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+
+.tilt-card-inner {
+  position: relative;
+  padding: 40px;
   background: var(--color-white);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-md);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.tilt-card:hover .tilt-card-inner {
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
+}
+
+/* Card Entrance Animations */
+.card-enter {
+  opacity: 0;
+}
+
+.card-enter-left {
+  animation: slideInLeft 0.8s var(--ease-out-expo) forwards;
+}
+
+.card-enter-right {
+  animation: slideInRight 0.8s var(--ease-out-expo) forwards;
+}
+
+.card-enter-up {
+  animation: slideInUp 0.8s var(--ease-out-expo) forwards;
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-80px) skewX(5deg);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) skewX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(80px) skewX(-5deg);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) skewX(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================
+   SCROLL REVEAL ANIMATIONS
+   ============================================ */
+
+.reveal {
+  opacity: 0;
+  transform: translateY(60px);
+  transition: opacity 0.8s var(--ease-out-expo),
+              transform 0.8s var(--ease-out-expo);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-left {
+  opacity: 0;
+  transform: translateX(-60px);
+  transition: opacity 0.8s var(--ease-out-expo),
+              transform 0.8s var(--ease-out-expo);
+}
+
+.reveal-left.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.reveal-right {
+  opacity: 0;
+  transform: translateX(60px);
+  transition: opacity 0.8s var(--ease-out-expo),
+              transform 0.8s var(--ease-out-expo);
+}
+
+.reveal-right.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.reveal-scale {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.8s var(--ease-out-expo),
+              transform 0.8s var(--ease-out-expo);
+}
+
+.reveal-scale.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ============================================
+   COUNTER ANIMATION
+   ============================================ */
+
+.counter {
+  font-family: var(--font-display);
+  font-size: clamp(60px, 10vw, 120px);
+  font-weight: 900;
+  line-height: 1;
+  color: var(--color-primary);
+}
+
+.counter-value {
+  display: inline-block;
+}
+
+/* ============================================
+   FLOATING ELEMENTS
+   ============================================ */
+
+.float {
+  animation: floatAnimation 4s ease-in-out infinite;
+}
+
+.float-slow {
+  animation: floatAnimation 8s ease-in-out infinite;
+}
+
+.float-fast {
+  animation: floatAnimation 2s ease-in-out infinite;
+}
+
+@keyframes floatAnimation {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+.float-rotate {
+  animation: floatRotate 6s ease-in-out infinite;
+}
+
+@keyframes floatRotate {
+  0%, 100% { 
+    transform: translateY(0) rotate(0deg); 
+  }
+  33% { 
+    transform: translateY(-30px) rotate(5deg); 
+  }
+  66% { 
+    transform: translateY(-15px) rotate(-5deg); 
+  }
+}
+
+/* ============================================
+   BADGES & LABELS
+   ============================================ */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-family: var(--font-display);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  border-radius: var(--radius-full);
+  background: var(--color-primary);
+  color: var(--color-black);
+}
+
+.badge-dark {
+  background: var(--color-dark);
+  color: var(--color-white);
+}
+
+/* Pulsing Badge */
+.badge-pulse {
+  animation: badgePulse 2s ease-in-out infinite;
+}
+
+@keyframes badgePulse {
+  0%, 100% { 
+    box-shadow: 0 0 0 0 rgba(254, 212, 0, 0.4);
+  }
+  50% { 
+    box-shadow: 0 0 0 15px rgba(254, 212, 0, 0);
+  }
+}
+
+/* ============================================
+   PARALLAX BACKGROUND TEXT
+   ============================================ */
+
+.parallax-text {
+  position: absolute;
+  font-family: var(--font-display);
+  font-size: clamp(150px, 25vw, 350px);
+  font-weight: 900;
+  text-transform: uppercase;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.03;
+  color: var(--color-black);
+  will-change: transform;
+}
+
+/* ============================================
+   NAVIGATION
+   ============================================ */
+
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 24px 0;
+  transition: all 0.4s var(--ease-out-expo);
+}
+
+.nav.scrolled {
+  padding: 16px 0;
+  background: rgba(26, 26, 46, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.nav-link {
+  position: relative;
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: var(--color-white);
+  transition: color 0.3s ease;
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: var(--color-primary);
+  transition: width 0.3s var(--ease-out-expo);
+}
+
+.nav-link:hover::after,
+.nav-link.active::after {
+  width: 100%;
+}
+
+.nav-cta {
+  background: var(--color-primary);
+  color: var(--color-black);
+  padding: 12px 24px;
+  border-radius: var(--radius-md);
+}
+
+/* ============================================
+   FORM ELEMENTS
+   ============================================ */
+
+.form-group {
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.form-label {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: var(--color-gray-600);
+  pointer-events: none;
+  transition: all 0.3s var(--ease-out-expo);
+}
+
+.form-input {
+  width: 100%;
+  padding: 20px;
+  font-family: var(--font-body);
+  font-size: 16px;
+  background: var(--color-gray-100);
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
   transition: all 0.3s ease;
 }
 
-.card:hover {
-  transform: translateY(-8px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  background: var(--color-white);
 }
 
-.card-accent {
-  border-top: 4px solid var(--color-primary);
-}
-
-/* Typography Utilities */
-.text-display {
-  font-family: var(--font-heading);
-  font-weight: 800;
+.form-input:focus + .form-label,
+.form-input:not(:placeholder-shown) + .form-label {
+  top: -12px;
+  left: 16px;
+  font-size: 12px;
+  font-weight: 700;
   text-transform: uppercase;
+  letter-spacing: 1px;
+  background: var(--color-white);
+  padding: 4px 8px;
+  color: var(--color-primary);
 }
 
-.text-gradient {
-  background: linear-gradient(135deg, var(--color-black) 0%, #333 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+/* ============================================
+   FOOTER
+   ============================================ */
+
+.footer {
+  background: var(--color-dark);
+  color: var(--color-white);
+  padding: 80px 0 40px;
 }
 
-/* Grid Utilities */
-.grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--gutter);
+.footer-title {
+  font-family: var(--font-display);
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  color: var(--color-primary);
+  margin-bottom: 24px;
 }
 
-.grid-3 {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--gutter);
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  transition: all 0.3s var(--ease-out-expo);
 }
 
-.grid-4 {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--gutter);
+.social-link:hover {
+  background: var(--color-primary);
+  transform: translateY(-4px);
 }
 
-/* Responsive */
+.social-link svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--color-white);
+  transition: fill 0.3s ease;
+}
+
+.social-link:hover svg {
+  fill: var(--color-black);
+}
+
+/* ============================================
+   UTILITIES
+   ============================================ */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.text-primary { color: var(--color-primary); }
+.text-dark { color: var(--color-dark); }
+.text-muted { color: var(--color-gray-600); }
+
+.bg-primary { background: var(--color-primary); }
+.bg-dark { background: var(--color-dark); }
+
+.text-center { text-align: center; }
+.text-uppercase { text-transform: uppercase; letter-spacing: 2px; }
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+
 @media (max-width: 1024px) {
   :root {
-    --section-padding: 60px;
+    --section-padding: 80px;
     --gutter: 24px;
   }
-
-  .grid-4 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .grid-3 {
-    grid-template-columns: repeat(2, 1fr);
-  }
 }
 
 @media (max-width: 640px) {
   :root {
-    --section-padding: 48px;
+    --section-padding: 60px;
     --gutter: 16px;
   }
-
-  .grid-2,
-  .grid-3,
-  .grid-4 {
-    grid-template-columns: 1fr;
+  
+  .btn {
+    width: 100%;
+    padding: 18px 32px;
   }
+}
+
+/* ============================================
+   LOADING ANIMATION
+   ============================================ */
+
+.loader {
+  position: fixed;
+  inset: 0;
+  background: var(--color-dark);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+
+.loader.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.loader-text {
+  font-family: var(--font-display);
+  font-size: clamp(40px, 8vw, 80px);
+  font-weight: 900;
+  color: var(--color-primary);
+  animation: loaderPulse 1s ease-in-out infinite;
+}
+
+@keyframes loaderPulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.95); }
 }
\ No newline at end of file
diff --git a/src/utils/site-identity.ts b/src/utils/site-identity.ts
index 7df0b01..964604e 100644
--- a/src/utils/site-identity.ts
+++ b/src/utils/site-identity.ts
@@ -1,12 +1,6 @@
-import { emdash } from "emdash/astro";
+import { getEmDashCollection } from "emdash";
 import type { CollectionEntry } from "astro:content";
 
-export async function getSiteSettings() {
-  const context = await emdash(Astro);
-  const settings = context.entries.settings?.[0];
-  return settings;
-}
-
 export function resolveBlogSiteIdentity(entry: CollectionEntry<"blog">) {
   return {
     title: entry.data.title,
@@ -20,4 +14,13 @@ export function getReadingTime(content: string): string {
   const words = content.split(/\s+/).length;
   const minutes = Math.ceil(words / wordsPerMinute);
   return `${minutes} นาที`;
+}
+
+export async function getBlogPosts() {
+  const { entries } = await getEmDashCollection("blog");
+  return entries.sort((a, b) => {
+    const dateA = new Date(a.data.date || 0).getTime();
+    const dateB = new Date(b.data.date || 0).getTime();
+    return dateB - dateA;
+  });
 }
\ No newline at end of file