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

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.omc/project-memory.json

@@ -0,0 +1,236 @@
+{
+  "version": "1.0.0",
+  "lastScanned": 1777964900860,
+  "projectRoot": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site",
+  "techStack": {
+    "languages": [
+      {
+        "name": "JavaScript/TypeScript",
+        "version": ">=22.12.0",
+        "confidence": "high",
+        "markers": [
+          "package.json"
+        ]
+      },
+      {
+        "name": "TypeScript",
+        "version": null,
+        "confidence": "high",
+        "markers": [
+          "tsconfig.json"
+        ]
+      }
+    ],
+    "frameworks": [
+      {
+        "name": "astro",
+        "version": "6.2.2",
+        "category": "fullstack"
+      }
+    ],
+    "packageManager": "npm",
+    "runtime": "Node.js 22.12.0"
+  },
+  "build": {
+    "buildCommand": "npm run build 2>&1 | tail -8",
+    "testCommand": null,
+    "lintCommand": null,
+    "devCommand": "npm run dev",
+    "scripts": {
+      "dev": "astro dev",
+      "build": "astro build",
+      "preview": "astro preview",
+      "astro": "astro"
+    }
+  },
+  "conventions": {
+    "namingStyle": null,
+    "importStyle": null,
+    "testPattern": null,
+    "fileOrganization": "type-based"
+  },
+  "structure": {
+    "isMonorepo": false,
+    "workspaces": [],
+    "mainDirectories": [
+      "public",
+      "src"
+    ],
+    "gitBranches": null
+  },
+  "customNotes": [],
+  "directoryMap": {
+    "dist": {
+      "path": "dist",
+      "purpose": "Distribution/build output",
+      "fileCount": 3,
+      "lastAccessed": 1777964900843,
+      "keyFiles": [
+        "favicon.ico",
+        "favicon.svg",
+        "index.html"
+      ]
+    },
+    "public": {
+      "path": "public",
+      "purpose": "Public files",
+      "fileCount": 2,
+      "lastAccessed": 1777964900843,
+      "keyFiles": [
+        "favicon.ico",
+        "favicon.svg"
+      ]
+    },
+    "src": {
+      "path": "src",
+      "purpose": "Source code",
+      "fileCount": 0,
+      "lastAccessed": 1777964900843,
+      "keyFiles": []
+    },
+    "src/components": {
+      "path": "src/components",
+      "purpose": "UI components",
+      "fileCount": 2,
+      "lastAccessed": 1777964900844,
+      "keyFiles": [
+        "Footer.astro",
+        "Navigation.astro"
+      ]
+    },
+    "src/pages": {
+      "path": "src/pages",
+      "purpose": "Page components",
+      "fileCount": 7,
+      "lastAccessed": 1777964900844,
+      "keyFiles": [
+        "about.astro",
+        "contact.astro",
+        "faq.astro"
+      ]
+    }
+  },
+  "hotPaths": [
+    {
+      "path": "src/pages/services/webdev.astro",
+      "accessCount": 15,
+      "lastAccessed": 1777995299269,
+      "type": "file"
+    },
+    {
+      "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,
+      "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/styles/global.css",
+      "accessCount": 3,
+      "lastAccessed": 1777972416964,
+      "type": "file"
+    },
+    {
+      "path": "src/pages/services",
+      "accessCount": 2,
+      "lastAccessed": 1777995178143,
+      "type": "directory"
+    },
+    {
+      "path": "src/pages",
+      "accessCount": 1,
+      "lastAccessed": 1777995189679,
+      "type": "directory"
+    },
+    {
+      "path": "src",
+      "accessCount": 1,
+      "lastAccessed": 1778035760907,
+      "type": "directory"
+    }
+  ],
+  "userDirectives": []
+}

.omc/state/agent-replay-94834f07-4375-45f9-b0d8-3e7a91395e8f.jsonl

@@ -0,0 +1,95 @@
+{"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}

.omc/state/checkpoints/checkpoint-2026-05-05T07-07-07-664Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T07:07:07.663Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T07-07-20-505Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T07:07:20.504Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-26-58-657Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:26:58.656Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-27-23-300Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:27:23.299Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-27-35-291Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:27:35.290Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-27-38-907Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:27:38.905Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-27-39-027Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:27:39.026Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-28-13-017Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:28:13.016Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-28-17-869Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:28:17.868Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-30-44-259Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:30:44.258Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-32-31-597Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:32:31.596Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T12-34-02-042Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T12:34:02.041Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/checkpoints/checkpoint-2026-05-05T13-11-36-866Z.json

@@ -0,0 +1,16 @@
+{
+  "created_at": "2026-05-05T13:11:36.865Z",
+  "trigger": "auto",
+  "active_modes": {},
+  "todo_summary": {
+    "pending": 0,
+    "in_progress": 0,
+    "completed": 0
+  },
+  "wisdom_exported": false,
+  "background_jobs": {
+    "active": [],
+    "recent": [],
+    "stats": null
+  }
+}

.omc/state/last-tool-error.json

@@ -0,0 +1,7 @@
+{
+  "tool_name": "Bash",
+  "tool_input_preview": "{\"command\":\"npm run build 2>&1\",\"timeout\":120000,\"description\":\"Build Astro site to check for errors\"}",
+  "error": "Exit code 1",
+  "timestamp": "2026-05-05T13:17:02.070Z",
+  "retry_count": 1
+}

.omc/state/mission-state.json

@@ -0,0 +1,233 @@
+{
+  "updatedAt": "2026-05-06T02:55:08.166Z",
+  "missions": [
+    {
+      "id": "session:94834f07-4375-45f9-b0d8-3e7a91395e8f:none",
+      "source": "session",
+      "name": "none",
+      "objective": "Session mission",
+      "createdAt": "2026-05-05T06:50:59.238Z",
+      "updatedAt": "2026-05-06T02:55:08.166Z",
+      "status": "done",
+      "workerCount": 7,
+      "taskCounts": {
+        "total": 7,
+        "pending": 0,
+        "blocked": 0,
+        "inProgress": 0,
+        "completed": 7,
+        "failed": 0
+      },
+      "agents": [
+        {
+          "name": "fork:ade9261",
+          "role": "fork",
+          "ownership": "ade926181d79f7e22",
+          "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"
+        }
+      ],
+      "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",
+          "kind": "update",
+          "agent": "Explore:ae3a10e",
+          "detail": "started Explore:ae3a10e",
+          "sourceKey": "session-start:ae3a10eff79730260"
+        },
+        {
+          "id": "session-stop:a56af702c99ca12f9:2026-05-05T12:32:22.586Z",
+          "at": "2026-05-05T12:32:22.586Z",
+          "kind": "completion",
+          "agent": "fork:a56af70",
+          "detail": "completed",
+          "sourceKey": "session-stop:a56af702c99ca12f9"
+        },
+        {
+          "id": "session-stop:ae9660bca33bb7788:2026-05-05T12:32:45.962Z",
+          "at": "2026-05-05T12:32:45.962Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:ae9660bca33bb7788"
+        },
+        {
+          "id": "session-stop:ae3a10eff79730260:2026-05-05T12:32:59.412Z",
+          "at": "2026-05-05T12:32:59.412Z",
+          "kind": "completion",
+          "agent": "Explore:ae3a10e",
+          "detail": "completed",
+          "sourceKey": "session-stop:ae3a10eff79730260"
+        },
+        {
+          "id": "session-stop:a0702f4cc61206062:2026-05-05T12:33:26.229Z",
+          "at": "2026-05-05T12:33:26.229Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:a0702f4cc61206062"
+        },
+        {
+          "id": "session-stop:a7b8d11ec5adbf4dd:2026-05-05T12:34:01.769Z",
+          "at": "2026-05-05T12:34:01.769Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:a7b8d11ec5adbf4dd"
+        },
+        {
+          "id": "session-stop:ae38803ce1dae768c:2026-05-05T12:34:57.078Z",
+          "at": "2026-05-05T12:34:57.078Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:ae38803ce1dae768c"
+        },
+        {
+          "id": "session-stop:ac8967a5f624630b2:2026-05-05T13:12:36.634Z",
+          "at": "2026-05-05T13:12:36.634Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:ac8967a5f624630b2"
+        },
+        {
+          "id": "session-stop:a74f3816c08a6f716:2026-05-05T13:21:12.812Z",
+          "at": "2026-05-05T13:21:12.812Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:a74f3816c08a6f716"
+        },
+        {
+          "id": "session-stop:a8c023c9a30c271a0:2026-05-05T14:19:49.676Z",
+          "at": "2026-05-05T14:19:49.676Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:a8c023c9a30c271a0"
+        },
+        {
+          "id": "session-stop:a106f58695dd12bb4:2026-05-05T15:37:58.942Z",
+          "at": "2026-05-05T15:37:58.942Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:a106f58695dd12bb4"
+        },
+        {
+          "id": "session-stop:ae7178f1d50a672fe:2026-05-06T02:26:35.999Z",
+          "at": "2026-05-06T02:26:35.999Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:ae7178f1d50a672fe"
+        },
+        {
+          "id": "session-stop:aacfce063672189e4:2026-05-06T02:51:18.289Z",
+          "at": "2026-05-06T02:51:18.289Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:aacfce063672189e4"
+        },
+        {
+          "id": "session-stop:a55df33c9fc0b4fd3:2026-05-06T02:53:34.397Z",
+          "at": "2026-05-06T02:53:34.397Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:a55df33c9fc0b4fd3"
+        },
+        {
+          "id": "session-stop:ad63ce0e956a53a8d:2026-05-06T02:55:08.166Z",
+          "at": "2026-05-06T02:55:08.166Z",
+          "kind": "completion",
+          "agent": "fork:ade9261",
+          "detail": "completed",
+          "sourceKey": "session-stop:ad63ce0e956a53a8d"
+        }
+      ]
+    }
+  ]
+}

.omc/state/subagent-tracking.json

@@ -0,0 +1,71 @@
+{
+  "agents": [
+    {
+      "agent_id": "ade926181d79f7e22",
+      "agent_type": "fork",
+      "started_at": "2026-05-05T06:50:59.238Z",
+      "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
+    }
+  ],
+  "total_spawned": 3,
+  "total_completed": 7,
+  "total_failed": 0,
+  "last_updated": "2026-05-06T02:55:08.267Z"
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,43 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,5 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "moreminimore-site",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^6.2.2"
+  }
+}

public/favicon.svg

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

public/icons/social/facebook.svg

@@ -0,0 +1 @@
+<svg fill="#0866FF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>

public/icons/social/line.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-6,-6)">
+        <path d="M12.5,42L35.5,42C39.09,42 42,39.09 42,35.5L42,12.5C42,8.91 39.09,6 35.5,6L12.5,6C8.91,6 6,8.91 6,12.5L6,35.5C6,39.09 8.91,42 12.5,42Z" style="fill:rgb(0,195,0);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-6,-6)">
+        <path d="M37.113,22.417C37.113,16.552 31.233,11.78 24.006,11.78C16.779,11.78 10.898,16.552 10.898,22.417C10.898,27.675 15.561,32.079 21.86,32.912C22.287,33.004 22.868,33.194 23.015,33.558C23.147,33.889 23.101,34.408 23.057,34.743C23.057,34.743 22.904,35.668 22.87,35.865C22.813,36.196 22.607,37.161 24.005,36.572C25.404,35.983 31.553,32.127 34.303,28.961L34.302,28.961C36.203,26.879 37.113,24.764 37.113,22.417ZM18.875,25.907L16.271,25.907C15.892,25.907 15.584,25.599 15.584,25.219L15.584,20.01C15.584,19.631 15.892,19.323 16.271,19.323C16.65,19.323 16.958,19.631 16.958,20.01L16.958,24.531L18.875,24.531C19.254,24.531 19.562,24.839 19.562,25.218C19.562,25.598 19.254,25.907 18.875,25.907ZM21.568,25.219C21.568,25.598 21.26,25.907 20.881,25.907C20.502,25.907 20.194,25.599 20.194,25.219L20.194,20.01C20.194,19.631 20.502,19.323 20.881,19.323C21.26,19.323 21.568,19.631 21.568,20.01L21.568,25.219ZM27.838,25.219C27.838,25.516 27.65,25.778 27.368,25.871C27.297,25.895 27.223,25.907 27.15,25.907C26.935,25.907 26.73,25.804 26.601,25.632L23.932,21.997L23.932,25.219C23.932,25.598 23.624,25.907 23.244,25.907C22.865,25.907 22.556,25.599 22.556,25.219L22.556,20.01C22.556,19.714 22.745,19.452 23.026,19.358C23.097,19.334 23.17,19.323 23.244,19.323C23.458,19.323 23.664,19.426 23.793,19.598L26.463,23.233L26.463,20.01C26.463,19.631 26.772,19.323 27.151,19.323C27.53,19.323 27.838,19.631 27.838,20.01L27.838,25.219ZM32.052,21.927C32.431,21.927 32.74,22.235 32.74,22.615C32.74,22.994 32.432,23.302 32.052,23.302L30.135,23.302L30.135,24.532L32.052,24.532C32.431,24.532 32.74,24.84 32.74,25.219C32.74,25.598 32.431,25.907 32.052,25.907L29.448,25.907C29.07,25.907 28.761,25.599 28.761,25.219L28.761,20.011C28.761,19.632 29.069,19.324 29.448,19.324L32.052,19.324C32.431,19.324 32.74,19.632 32.74,20.011C32.74,20.39 32.432,20.698 32.052,20.698L30.135,20.698L30.135,21.928L32.052,21.928L32.052,21.927Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+</svg>

public/icons/social/line2.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#00c300" d="M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23C6,39.09,8.91,42,12.5,42z"/><path fill="#fff" d="M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z"/></svg>

public/icons/social/linkedin.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#0A66C2"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

public/icons/social/x.svg

@@ -0,0 +1 @@
+<svg fill="#000000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg>

public/images/logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" fill="none">
+  <rect width="40" height="40" rx="8" fill="#fed400"/>
+  <text x="8" y="28" font-family="Kanit, sans-serif" font-weight="800" font-size="20" fill="#000">M</text>
+  <text x="52" y="26" font-family="Kanit, sans-serif" font-weight="600" font-size="18" fill="#000">M</text>
+  <text x="72" y="26" font-family="Noto Sans Thai, sans-serif" font-weight="500" font-size="14" fill="#000">oreMiniMore</text>
+</svg>

src/components/Footer.astro

@@ -0,0 +1,209 @@
+---
+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 footerLinks = [
+  { label: "นโยบายความเป็นส่วนตัว", href: "/privacy" },
+  { label: "เงื่อนไขการใช้บริการ", href: "/terms" },
+  { label: "ติดต่อเรา", href: "/contact" },
+];
+---
+
+<footer class="footer">
+  <div class="container">
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="/images/logo-long.png" alt="MoreminiMore" class="footer-logo" />
+        <p class="footer-tagline">
+          บริษัท มอร์มินิมอร์ จำกัด<br />
+          ผู้เชี่ยวชาญด้าน IT และ Digital Transformation<br />
+          สำหรับธุรกิจ SMEs ไทย
+        </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>
+          ))}
+        </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>
+        </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>
+        </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>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <p>&copy; {currentYear} บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.</p>
+      <div class="legal-links">
+        {footerLinks.map((link) => (
+          <a href={link.href}>{link.label}</a>
+        ))}
+      </div>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .footer {
+    background: var(--color-light-gray);
+    color: var(--color-black);
+    padding: 80px 0 40px;
+  }
+
+  .footer-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1.5fr;
+    gap: 48px;
+    margin-bottom: 60px;
+  }
+
+  .footer-logo {
+    height: 40px;
+    margin-bottom: 16px;
+  }
+
+  .footer-tagline {
+    font-size: 14px;
+    color: var(--color-medium-gray);
+    margin-bottom: 24px;
+    line-height: 1.6;
+  }
+
+  .social-links {
+    display: flex;
+    gap: 16px;
+  }
+
+  .social-link img {
+    width: 24px;
+    height: 24px;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+  }
+
+  .social-link:hover img {
+    opacity: 1;
+  }
+
+  .footer-links h4,
+  .footer-contact h4 {
+    font-family: var(--font-heading);
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: var(--color-accent);
+  }
+
+  .footer-links ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .footer-links li {
+    margin-bottom: 12px;
+  }
+
+  .footer-links a {
+    color: var(--color-medium-gray);
+    font-size: 14px;
+    transition: color 0.2s;
+  }
+
+  .footer-links a:hover {
+    color: var(--color-accent);
+  }
+
+  .footer-contact p {
+    font-size: 14px;
+    color: var(--color-medium-gray);
+    margin-bottom: 12px;
+  }
+
+  .footer-contact strong {
+    color: var(--color-black);
+  }
+
+  .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);
+  }
+
+  .legal-links {
+    display: flex;
+    gap: 24px;
+  }
+
+  .legal-links a {
+    color: var(--color-medium-gray);
+    transition: color 0.2s;
+  }
+
+  .legal-links a:hover {
+    color: var(--color-accent);
+  }
+
+  @media (max-width: 1024px) {
+    .footer-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .footer-brand {
+      grid-column: span 2;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .footer-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .footer-brand {
+      grid-column: span 1;
+    }
+
+    .footer-bottom {
+      flex-direction: column;
+      gap: 16px;
+      text-align: center;
+    }
+
+    .legal-links {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+</style>

src/components/Hero.astro

@@ -0,0 +1,465 @@
+---
+interface Props {
+  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',
+  showCTA = true,
+  ctaText = "เริ่มต้นวันนี้",
+  ctaLink = "/contact",
+  variant = 'split',
+  size = 'compact'
+} = Astro.props;
+
+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>
+
+  <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>
+        )}
+      </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>
+    </div>
+  )}
+</section>
+
+<style>
+  .hero {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    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 {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+  }
+  .hero-bg-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .hero-bg-overlay {
+    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;
+  }
+
+  /* Container */
+  .hero-container {
+    display: grid;
+    gap: 60px;
+    align-items: center;
+    padding: 40px var(--gutter);
+    position: relative;
+    z-index: 1;
+  }
+
+  .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; }
+
+  .hero-badge {
+    display: inline-block;
+    background: var(--color-black);
+    color: var(--color-primary);
+    padding: 10px 24px;
+    border-radius: 30px;
+    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;
+  }
+
+  .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;
+    margin-bottom: 32px;
+  }
+
+  .hero-content.centered .hero-subtitle,
+  .hero-content.text-only .hero-subtitle {
+    text-align: center;
+    max-width: 600px;
+  }
+
+  /* Text Only Variant */
+  .text-only-title {
+    font-size: clamp(32px, 6vw, 72px);
+    text-align: center;
+    justify-content: center;
+  }
+
+  .hero-size-full .text-only-title {
+    font-size: clamp(40px, 8vw, 96px);
+  }
+
+  .text-only-sub {
+    font-size: 18px;
+    max-width: 700px;
+  }
+
+  /* Actions */
+  .hero-actions {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    opacity: 0;
+    animation: fadeIn 0.8s ease 0.6s 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 {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    animation: fadeIn 1s ease 0.3s forwards;
+  }
+
+  .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);
+  }
+  .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;
+  }
+  .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;
+  }
+  .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 {
+    background: var(--color-white);
+    border-radius: 16px;
+    padding: 24px;
+    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;
+  }
+  .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 */
+  .hero-wave {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 70px;
+    color: var(--color-white);
+    pointer-events: none;
+  }
+  .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; }
+  }
+
+  @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; }
+  }
+</style>

src/components/Navigation.astro

@@ -0,0 +1,274 @@
+---
+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" },
+];
+
+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" />
+    </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}
+            </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>
+    </button>
+  </nav>
+</header>
+
+<style>
+  .header {
+    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);
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 80px;
+  }
+
+  .logo-img {
+    height: 40px;
+    width: auto;
+  }
+
+  .nav-links {
+    display: flex;
+    list-style: none;
+    gap: 4px;
+  }
+
+  .nav-item {
+    position: relative;
+  }
+
+  .nav-link {
+    font-family: var(--font-heading);
+    font-weight: 500;
+    font-size: 15px;
+    color: var(--color-black);
+    padding: 12px 16px;
+    border-radius: 8px;
+    transition: all 0.2s;
+    cursor: pointer;
+    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;
+  }
+
+  .nav-cta {
+    padding: 12px 24px;
+    font-size: 14px;
+  }
+
+  .mobile-menu-btn {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+  }
+
+  .mobile-menu-btn span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background: var(--color-black);
+    transition: all 0.3s;
+  }
+
+  @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 {
+      display: none;
+    }
+
+    .mobile-menu-btn {
+      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;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const mobileBtn = document.querySelector('.mobile-menu-btn');
+    const navLinks = document.querySelector('.nav-links');
+    const hasSubmenuItems = document.querySelectorAll('.has-submenu');
+
+    mobileBtn?.addEventListener('click', () => {
+      navLinks?.classList.toggle('active');
+    });
+
+    hasSubmenuItems.forEach(item => {
+      const navLink = item.querySelector('.nav-link');
+      navLink?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        item.classList.toggle('active');
+      });
+    });
+  });
+</script>

src/layouts/Base.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description = "MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot" } = Astro.props;
+---
+
+<!doctype html>
+<html lang="th">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  @import '../styles/global.css';
+</style>

src/pages/about.astro

@@ -0,0 +1,399 @@
+---
+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 ชม." }
+];
+---
+
+<Base title="เกี่ยวกับเรา | MoreminiMore">
+  <Navigation />
+
+  <Hero
+    title="เกี่ยวกับ มอร์มินิมอร์"
+    subtitle="บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย"
+    badge="เกี่ยวกับเรา"
+    image="/images/hero/about.jpg"
+    theme="yellow"
+    showCTA={false}
+    variant="centered"
+    size="compact"
+  />
+
+  <!-- About Content -->
+  <section class="section about-section">
+    <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>
+          <p class="about-text">
+            MoreminiMore เป็นทีมงานที่มีประสบการณ์ในการพัฒนาเว็บไซต์และระบบอัตโนมัติมากว่า 5 ปี
+            เราเชื่อว่าเทคโนโลยีดิจิทัลสามารถช่วยเพิ่มยอดขายและลดต้นทุนให้ธุรกิจได้อย่างมีประสิทธิภาพ
+          </p>
+          <p class="about-text">
+            ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญหลากหลายสาขา ไม่ว่าจะเป็นด้านการพัฒนาเว็บไซต์
+            การตลาดดิจิทัล AI Automation และการให้คำปรึกษาด้านเทคโนโลยี
+          </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>
+      </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>
+        ))}
+      </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>
+  .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-grid {
+    display: grid;
+    grid-template-columns: 1fr 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-text {
+    font-size: 16px;
+    color: var(--color-medium-gray);
+    line-height: 1.8;
+    margin-bottom: 20px;
+  }
+
+  .about-stats {
+    display: flex;
+    gap: 48px;
+    margin-top: 40px;
+    padding-top: 40px;
+    border-top: 1px solid #eee;
+  }
+
+  .stat {
+    text-align: center;
+  }
+
+  .stat-number {
+    display: block;
+    font-family: var(--font-heading);
+    font-size: 40px;
+    font-weight: 800;
+    color: var(--color-primary);
+    line-height: 1;
+    margin-bottom: 8px;
+  }
+
+  .stat-label {
+    font-size: 14px;
+    color: var(--color-medium-gray);
+    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);
+  }
+
+  @media (max-width: 1024px) {
+    .about-grid {
+      grid-template-columns: 1fr;
+      gap: 40px;
+    }
+
+    .services-grid,
+    .why-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .services-grid,
+    .why-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .about-stats {
+      flex-wrap: wrap;
+      gap: 24px;
+    }
+
+    .cta-actions {
+      flex-direction: column;
+    }
+
+    .btn-lg {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+</style>

src/pages/blog/[slug].astro

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

src/pages/blog/index.astro

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

src/pages/contact.astro

@@ -0,0 +1,377 @@
+---
+import Base from '../layouts/Base.astro';
+import Navigation from '../components/Navigation.astro';
+import Hero from '../components/Hero.astro';
+import Footer from '../components/Footer.astro';
+---
+
+<Base title="ติดต่อเรา | MoreminiMore">
+  <Navigation />
+
+  <Hero
+    title="พูดคุยกับเรา วันนี้เลย!"
+    subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
+    badge="ติดต่อเรา"
+    image="/images/hero/contact.jpg"
+    theme="yellow"
+    showCTA={false}
+    variant="text-only"
+    size="compact"
+  />
+
+  <!-- Contact Section -->
+  <section class="section contact-section">
+    <div class="container">
+      <div class="contact-grid">
+        <div class="contact-info">
+          <h2 class="info-title">ข้อมูลติดต่อ</h2>
+
+          <div class="contact-item">
+            <span class="contact-icon">📞</span>
+            <div class="contact-detail">
+              <h3>โทรศัพท์</h3>
+              <a href="tel:0809955945">080-995-5945</a>
+            </div>
+          </div>
+
+          <div class="contact-item">
+            <span class="contact-icon">✉️</span>
+            <div class="contact-detail">
+              <h3>อีเมล</h3>
+              <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
+            </div>
+          </div>
+
+          <div class="contact-item">
+            <span class="contact-icon">💬</span>
+            <div class="contact-detail">
+              <h3>LINE</h3>
+              <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer">@moreminimore</a>
+            </div>
+          </div>
+
+          <div class="contact-item">
+            <span class="contact-icon">📍</span>
+            <div class="contact-detail">
+              <h3>ที่อยู่</h3>
+              <p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
+            </div>
+          </div>
+
+          <div class="contact-item">
+            <span class="contact-icon">⏰</span>
+            <div class="contact-detail">
+              <h3>เวลาทำการ</h3>
+              <p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
+            </div>
+          </div>
+
+          <div class="social-section">
+            <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" />
+              </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" />
+              </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" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="contact-form-wrapper">
+          <form class="contact-form" id="contact-form">
+            <div class="form-header">
+              <h2 class="form-title">ส่งข้อความ</h2>
+            </div>
+
+            <div class="form-group">
+              <label for="name">ชื่อ-นามสกุล</label>
+              <input type="text" id="name" name="name" required placeholder="กรอกชื่อ-นามสกุล" />
+            </div>
+
+            <div class="form-group">
+              <label for="email">อีเมล</label>
+              <input type="email" id="email" name="email" required placeholder="example@email.com" />
+            </div>
+
+            <div class="form-group">
+              <label for="phone">เบอร์โทรศัพท์</label>
+              <input type="tel" id="phone" name="phone" placeholder="080-xxx-xxxx" />
+            </div>
+
+            <div class="form-group">
+              <label for="service">บริการที่สนใจ</label>
+              <select id="service" name="service">
+                <option value="">เลือกบริการ</option>
+                <option value="webdev">พัฒนาเว็บไซต์</option>
+                <option value="marketing">Marketing Automation</option>
+                <option value="ai">AI Automation</option>
+                <option value="consult">Tech Consult</option>
+                <option value="other">อื่นๆ</option>
+              </select>
+            </div>
+
+            <div class="form-group form-group-full">
+              <label for="message">ข้อความ</label>
+              <textarea id="message" name="message" rows="5" required placeholder="กรอกรายละเอียดโปรเจกต์ของคุณ..."></textarea>
+            </div>
+
+            <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>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <Footer />
+</Base>
+
+<script>
+  document.getElementById('contact-form')?.addEventListener('submit', (e) => {
+    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();
+      submitBtn.textContent = 'ส่งข้อความ';
+      submitBtn.disabled = false;
+    }, 1000);
+  });
+</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-grid {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    gap: 64px;
+  }
+
+  .info-title {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 32px;
+  }
+
+  .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);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .contact-detail h3 {
+    font-size: 14px;
+    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-weight: 500;
+    color: var(--color-black);
+  }
+
+  .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;
+  }
+
+  .social-links {
+    display: flex;
+    gap: 16px;
+  }
+
+  .social-link {
+    width: 48px;
+    height: 48px;
+    background: var(--color-light-gray);
+    border-radius: 12px;
+    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;
+  }
+
+  .contact-form-wrapper {
+    background: var(--color-light-gray);
+    border-radius: 24px;
+    padding: 48px;
+  }
+
+  .form-title {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 32px;
+  }
+
+  .contact-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-group-full {
+    grid-column: span 2;
+  }
+
+  .form-group label {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--color-black);
+  }
+
+  .form-group input,
+  .form-group select,
+  .form-group textarea {
+    padding: 16px 20px;
+    border: 2px solid transparent;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: var(--font-body);
+    background: var(--color-white);
+    transition: all 0.3s;
+  }
+
+  .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);
+  }
+
+  .form-group textarea {
+    resize: vertical;
+    min-height: 120px;
+  }
+
+  .btn-submit {
+    grid-column: span 2;
+    justify-self: start;
+    padding: 18px 40px;
+    font-size: 16px;
+  }
+
+  @media (max-width: 1024px) {
+    .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;
+    }
+  }
+</style>

src/pages/faq.astro

@@ -0,0 +1,341 @@
+---
+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 faqItems = [
+  {
+    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 หรือร้านค้าออนไลน์ได้"
+      }
+    ]
+  },
+  {
+    category: "ราคา",
+    questions: [
+      {
+        q: "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?",
+        a: "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี"
+      },
+      {
+        q: "มี包月 หรือรายปีไหม?",
+        a: "มี เรามีแพ็คเกจรายเดือนสำหรับบริการดูแลเว็บไซต์และ Marketing Automation ที่เริ่มต้นที่ 2,500 บาท/เดือน"
+      },
+      {
+        q: "ชำระเงินแบบไหนได้บ้าง?",
+        a: "เรารองรับการชำระเงินผ่าน PromptPay และโอนเงินผ่านธนาคาร สำหรับโปรเจกต์ใหญ่สามารถผ่อนชำระได้"
+      }
+    ]
+  },
+  {
+    category: "ระยะเวลา",
+    questions: [
+      {
+        q: "ใช้เวลาสร้างเว็บไซต์นานแค่ไหน?",
+        a: "เว็บไซต์ทั่วไปใช้เวลา 2-4 สัปดาห์ ระบบที่ซับซ้อนอาจใช้เวลา 1-2 เดือน ขึ้นอยู่กับความต้องการและขนาดของโปรเจกต์"
+      },
+      {
+        q: "เริ่มต้นทำงานได้เร็วแค่ไหน?",
+        a: "หลังจากตกลงรายละเอียดและชำระเงินมัดจำแล้ว เราสามารถเริ่มงานได้ภายใน 3-5 วันทำการ"
+      }
+    ]
+  },
+  {
+    category: "การสนับสนุน",
+    questions: [
+      {
+        q: "หลังสร้างเว็บเสร็จแล้ว มีบริการดูแลไหม?",
+        a: "มี เรามีทีมดูแลที่พร้อมช่วยเหลือทั้งการแก้ไขปัญหา อัปเดตเนื้อหา และปรับปรุงระบบตามต้องการ"
+      },
+      {
+        q: "ถ้าเว็บมีปัญหา ติดต่อได้อย่างไร?",
+        a: "สามารถติดต่อเราผ่าน LINE, โทรศัพท์ 080-995-5945 หรืออีเมล contact@moreminimore.com เรามีทีมพร้อมรับมือกับปัญหาฉุกเฉิน"
+      },
+      {
+        q: "มีการรับประกันผลงานไหม?",
+        a: "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการทำงานของเรา เราจะแก้ไขให้ฟรี"
+      }
+    ]
+  }
+];
+---
+
+<Base title="คำถามที่พบบ่อย | MoreminiMore">
+  <Navigation />
+
+  <Hero
+    title="คำถามที่พบบ่อย"
+    subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา"
+    badge="FAQ"
+    image="/images/hero/tech-consult.jpg"
+    theme="yellow"
+    showCTA={false}
+    variant="centered"
+    size="compact"
+  />
+
+  <main class="faq-page">
+
+      <div class="faq-content">
+        {faqItems.map((category, catIndex) => (
+          <section class="faq-category">
+            <h2 class="category-title">
+              <span class="category-icon">
+                {category.category === "บริการ" ? "🎯" :
+                 category.category === "ราคา" ? "💰" :
+                 category.category === "ระยะเวลา" ? "⏱️" : "💬"}
+              </span>
+              {category.category}
+            </h2>
+            <div class="faq-list">
+              {category.questions.map((item, qIndex) => (
+                <div class="faq-item" data-item={`${catIndex}-${qIndex}`}>
+                  <button class="faq-question" aria-expanded="false">
+                    <span class="question-text">{item.q}</span>
+                    <span class="faq-icon">+</span>
+                  </button>
+                  <div class="faq-answer">
+                    <p>{item.a}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+      </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>
+
+  <Footer />
+</Base>
+
+<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');
+        });
+
+        // Open clicked if it was closed
+        if (!isOpen) {
+          item.classList.add('open');
+          if (answer) answer.style.maxHeight = answer.scrollHeight + 'px';
+          if (icon) icon.textContent = '−';
+          if (question) question.setAttribute('aria-expanded', 'true');
+        }
+      });
+    });
+  });
+</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;
+  }
+
+  .category-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--color-black);
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--color-primary);
+  }
+
+  .category-icon {
+    font-size: 28px;
+  }
+
+  .faq-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .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;
+  }
+
+  .faq-item:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .faq-item.open {
+    border-color: var(--color-primary);
+  }
+
+  .faq-question {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font-family: var(--font-heading);
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-black);
+  }
+
+  .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 p {
+    padding: 0 24px 24px;
+    font-size: 15px;
+    line-height: 1.8;
+    color: #555;
+  }
+
+  .faq-cta {
+    text-align: center;
+    padding: 60px;
+    background: var(--color-light-gray);
+    border-radius: 20px;
+    margin-top: 60px;
+  }
+
+  .faq-cta h3 {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 12px;
+  }
+
+  .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;
+  }
+
+  @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;
+    }
+  }
+</style>

src/pages/index.astro

@@ -0,0 +1,190 @@
+---
+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 stats = [
+  { number: "50+", label: "โปรเจกต์" },
+  { number: "40+", label: "ลูกค้า" },
+  { number: "5+", label: "ปีประสบการณ์" },
+  { number: "100%", label: "ความพึงพอใจ" }
+];
+---
+
+<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"
+  />
+
+  <!-- Services Section -->
+  <section class="section services">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-badge">บริการของเรา</span>
+        <h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
+        <p class="section-desc">ครบจบทุก need ด้านดิจิทัลสำหรับธุรกิจของคุณ</p>
+      </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>
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- Portfolio Section -->
+  <section class="section portfolio-preview">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-badge">ผลงาน</span>
+        <h2 class="section-title">โปรเจกต์ล่าสุด</h2>
+        <p class="section-desc">ผลงานที่เราภาคภูมิใจ</p>
+      </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>
+            </div>
+          </a>
+        ))}
+      </div>
+      <div class="section-cta">
+        <a href="/portfolio" class="btn btn-primary">ดูผลงานทั้งหมด</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Blog Section -->
+  <section class="section section-light blog-preview">
+    <div class="container">
+      <div class="section-header">
+        <span class="section-badge">บทความ</span>
+        <h2 class="section-title">ความรู้ด้านดิจิทัล</h2>
+        <p class="section-desc">อ่านบทความล่าสุดจากเรา</p>
+      </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>
+            <div class="blog-content">
+              <h3 class="blog-title">{post.title}</h3>
+              <span class="blog-readmore">อ่านต่อ →</span>
+            </div>
+          </a>
+        ))}
+      </div>
+      <div class="section-cta">
+        <a href="/blog" class="btn btn-secondary">บทความทั้งหมด</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="section section-primary cta-section">
+    <div class="container">
+      <div class="cta-content">
+        <h2 class="cta-title">พร้อมเริ่มโปรเจกต์ของคุณ?</h2>
+        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
+        <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; 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>

src/pages/portfolio.astro

@@ -0,0 +1,536 @@
+---
+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: "ความพึงพอใจ" }
+];
+---
+
+<Base title="ผลงาน | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
+  <Navigation />
+
+  <Hero
+    title="ผลงานของเรา"
+    subtitle="รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ"
+    badge="พอร์ตโฟลิโอ"
+    image="/images/hero/hero.jpg"
+    theme="yellow"
+    showCTA={false}
+    variant="text-only"
+    size="compact"
+  />
+
+  <!-- Filter Section -->
+  <section class="filter-section">
+    <div class="container">
+      <div class="filter-buttons" id="category-filters">
+        {categories.map((cat) => (
+          <button
+            class="filter-btn"
+            data-category={cat.id}
+          >
+            {cat.name}
+          </button>
+        ))}
+      </div>
+    </div>
+  </section>
+
+  <!-- Portfolio Grid -->
+  <section class="section portfolio-section">
+    <div class="container">
+      <div class="portfolio-grid" id="portfolio-grid">
+        {portfolioItems.map((item, index) => (
+          <article
+            class="portfolio-card"
+            data-category={item.category}
+            style={`animation-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">
+                  เยี่ยมชมเว็บไซต์
+                  <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>
+                </a>
+              </div>
+            </div>
+            <div class="portfolio-content">
+              <span class="portfolio-category">{item.categoryLabel}</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>
+        ))}
+      </div>
+    </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>
+        <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>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    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');
+
+        filterBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        portfolioCards.forEach(card => {
+          const cardCategory = card.getAttribute('data-category');
+          if (category === 'all' || cardCategory === category) {
+            (card as HTMLElement).style.display = 'block';
+          } else {
+            (card as HTMLElement).style.display = 'none';
+          }
+        });
+      });
+    });
+  });
+</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;
+    position: sticky;
+    top: 80px;
+    z-index: 100;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+  }
+
+  .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);
+    padding: 10px 24px;
+    border-radius: 30px;
+    font-family: var(--font-heading);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  .filter-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .filter-btn.active {
+    background: var(--color-primary);
+    color: #000;
+    border-color: var(--color-primary);
+  }
+
+  .portfolio-section {
+    background: var(--color-black);
+    padding-top: 60px;
+  }
+
+  .portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 32px;
+  }
+
+  .portfolio-card {
+    background: var(--color-dark-gray);
+    border-radius: 16px;
+    overflow: hidden;
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+
+  .portfolio-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 60px rgba(254, 212, 0, 0.15);
+  }
+
+  .portfolio-image {
+    position: relative;
+    aspect-ratio: 4/3;
+    overflow: hidden;
+  }
+
+  .portfolio-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s;
+  }
+
+  .portfolio-card:hover .portfolio-image img {
+    transform: scale(1.1);
+  }
+
+  .portfolio-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(254, 212, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  .portfolio-card:hover .portfolio-overlay {
+    opacity: 1;
+  }
+
+  .visit-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--color-black);
+    color: var(--color-primary);
+    padding: 12px 24px;
+    border-radius: 30px;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 14px;
+    transition: transform 0.2s;
+  }
+
+  .visit-btn:hover {
+    transform: scale(1.05);
+  }
+
+  .portfolio-content {
+    padding: 24px;
+  }
+
+  .portfolio-category {
+    display: inline-block;
+    background: var(--color-primary);
+    color: var(--color-black);
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  .portfolio-name {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--color-white);
+    margin-bottom: 8px;
+  }
+
+  .portfolio-desc {
+    font-size: 14px;
+    color: #999;
+    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;
+  }
+
+  .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);
+  }
+
+  @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;
+    }
+  }
+
+  @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;
+    }
+  }
+</style>

src/pages/privacy.astro

@@ -0,0 +1,266 @@
+---
+import Base from '../layouts/Base.astro';
+import Navigation from '../components/Navigation.astro';
+import Hero from '../components/Hero.astro';
+import Footer from '../components/Footer.astro';
+---
+
+<Base title="นโยบายความเป็นส่วนตัว | MoreminiMore">
+  <Navigation />
+
+  <Hero
+    title="นโยบายความเป็นส่วนตัว"
+    subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
+    badge="กฎหมาย"
+    image="/images/hero/ai-automation.jpg"
+    theme="yellow"
+    showCTA={false}
+    variant="text-only"
+    size="compact"
+  />
+
+  <main class="legal-page">
+    <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>
+
+        <section 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>
+          </ul>
+        </section>
+
+        <section class="legal-section">
+          <h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
+          <p>บริษัทฯ เก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
+          <ul>
+            <li>เพื่อให้บริการและดำเนินการตามคำขอของท่าน</li>
+            <li>เพื่อการสื่อสารและให้ข้อมูลข่าวสารเกี่ยวกับบริการของบริษัทฯ</li>
+            <li>เพื่อปรับปรุงคุณภาพบริการและพัฒนาเว็บไซต์</li>
+            <li>เพื่อการวิเคราะห์ข้อมูลและสถิติการใช้งาน</li>
+            <li>เพื่อการตลาดและการโฆษณา (ได้รับความยินยอมจากท่าน)</li>
+            <li>เพื่อการปฏิบัติตามกฎหมาย คำสั่ง หรือกระบวนการทางกฎหมาย</li>
+            <li>เพื่อการรักษาความปลอดภัยและป้องกันการทุจริต</li>
+          </ul>
+        </section>
+
+        <section class="legal-section">
+          <h2>3. การใช้และเปิดเผยข้อมูลส่วนบุคคล</h2>
+          <p>บริษัทฯ จะไม่เปิดเผยข้อมูลส่วนบุคคลของท่านต่อบุคคลที่สาม เว้นแต่:</p>
+          <ul>
+            <li>ได้รับความยินยอมจากท่าน</li>
+            <li>จำเป็นต้องเปิดเผยเพื่อให้บริการตามคำขอของท่าน</li>
+            <li>จำเป็นต้องเปิดเผยต่อผู้ให้บริการที่บริษัทฯ ว่าจ้างให้ดำเนินการในส่วนที่จำเป็น</li>
+            <li>กฎหมายกำหนดหรือร้านขอให้เปิดเผย</li>
+            <li>เพื่อป้องกันหรือระงับอันตรายต่อชีวิต สุขภาพ หรือทรัพย์สิน</li>
+            <li>จำเป็นเพื่อประโยชน์โดยชอบด้วยกฎหมายของบริษัทฯ</li>
+          </ul>
+        </section>
+
+        <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>
+    </div>
+  </main>
+
+  <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-intro {
+    font-size: 18px;
+    line-height: 1.8;
+    margin-bottom: 48px;
+    padding: 24px;
+    background: var(--color-light-gray);
+    border-radius: 12px;
+    border-left: 4px solid var(--color-primary);
+  }
+
+  .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;
+    margin-bottom: 16px;
+  }
+
+  .legal-section ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .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 {
+    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>

src/pages/services/ai.astro

@@ -0,0 +1,262 @@
+---
+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>

src/pages/services/consult.astro

@@ -0,0 +1,271 @@
+---
+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>

src/pages/services/marketing.astro

@@ -0,0 +1,262 @@
+---
+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>

src/pages/services/webdev.astro

@@ -0,0 +1,283 @@
+---
+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>

src/pages/terms.astro

@@ -0,0 +1,232 @@
+---
+import Base from '../layouts/Base.astro';
+import Navigation from '../components/Navigation.astro';
+import Hero from '../components/Hero.astro';
+import Footer from '../components/Footer.astro';
+---
+
+<Base title="เงื่อนไขการให้บริการ | MoreminiMore">
+  <Navigation />
+
+  <Hero
+    title="เงื่อนไขการให้บริการ"
+    subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
+    badge="กฎหมาย"
+    image="/images/hero/marketing-automation.jpg"
+    theme="yellow"
+    showCTA={false}
+    variant="text-only"
+    size="compact"
+  />
+
+  <main class="legal-page">
+    <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>
+
+        <section class="legal-section">
+          <h2>1. การยอมรับเงื่อนไข</h2>
+
+          <h3>1.1 ข้อตกลง</h3>
+          <p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ https://www.moreminimore.com ("เว็บไซต์") ของบริษัท MoreminiMore Co.,Ltd. ("เรา", "ของเรา" หรือ "บริษัท") ท่าน ("ผู้ใช้", "ท่าน" หรือ "ของคุณ") ยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้ ("เงื่อนไข")</p>
+
+          <h3>1.2 การแก้ไขเงื่อนไข</h3>
+          <p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้:</p>
+          <ul>
+            <li>การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์</li>
+            <li>ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</li>
+            <li>การใช้งานเว็บไซต์ต่อเนื่องแสดงว่าท่านยอมรับการแก้ไข</li>
+          </ul>
+
+          <h3>1.3 อายุขั้นต่ำ</h3>
+          <p>ท่านต้องมีอายุไม่ต่ำกว่า 20 ปีบริบูรณ์เพื่อใช้งานเว็บไซต์ หากท่านอายุต่ำกว่า 20 ปี ท่านต้องได้รับความยินยอมจากผู้ปกครอง</p>
+        </section>
+
+        <section class="legal-section">
+          <h2>2. บริการของเรา</h2>
+
+          <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>
+
+          <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>
+    </div>
+  </main>
+
+  <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-intro {
+    font-size: 14px;
+    line-height: 2;
+    margin-bottom: 48px;
+    padding: 20px 24px;
+    background: var(--color-light-gray);
+    border-radius: 12px;
+    border-left: 4px solid var(--color-primary);
+  }
+
+  .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-primary);
+    margin: 24px 0 12px;
+  }
+
+  .legal-section p {
+    font-size: 16px;
+    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>

src/styles/global.css

@@ -0,0 +1,204 @@
+/* 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');
+
+:root {
+  /* Colors */
+  --color-primary: #fed400;
+  --color-accent: #1e3a5f;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-light-gray: #f5f5f5;
+  --color-dark-gray: #1a1a1a;
+  --color-medium-gray: #6b7280;
+  --color-dark-section: #0a0a0a;
+
+  /* Typography */
+  --font-heading: 'Kanit', sans-serif;
+  --font-body: 'Noto Sans Thai', sans-serif;
+
+  /* Spacing */
+  --section-padding: 80px;
+  --container-max: 1280px;
+  --gutter: 32px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: 16px;
+  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;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Container */
+.container {
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: 0 var(--gutter);
+}
+
+/* Section Styles */
+.section {
+  padding: var(--section-padding) 0;
+}
+
+.section-dark {
+  background: var(--color-dark-section);
+  color: var(--color-white);
+}
+
+.section-light {
+  background: var(--color-light-gray);
+}
+
+.section-primary {
+  background: var(--color-primary);
+  color: var(--color-black);
+}
+
+.section-accent {
+  background: var(--color-accent);
+  color: var(--color-white);
+}
+
+/* Button Styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 32px;
+  font-family: var(--font-heading);
+  font-weight: 600;
+  font-size: 16px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-black);
+  box-shadow: 0 4px 20px rgba(254, 212, 0, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
+}
+
+.btn-secondary {
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.btn-secondary:hover {
+  background: #222;
+  transform: translateY(-2px);
+}
+
+/* Card Styles */
+.card {
+  background: var(--color-white);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+}
+
+.card-accent {
+  border-top: 4px solid var(--color-primary);
+}
+
+/* Typography Utilities */
+.text-display {
+  font-family: var(--font-heading);
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, var(--color-black) 0%, #333 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Grid Utilities */
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--gutter);
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--gutter);
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--gutter);
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  :root {
+    --section-padding: 60px;
+    --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;
+    --gutter: 16px;
+  }
+
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+}

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}