feat: Update images with Unsplash (hero + illustrations), fix UX/UI, add animations

- Replace MiniMax images with Unsplash (free commercial use)
- Hero images: marketing, AI automation, tech consult, web dev, about-us
- Illustrations: different from heroes for all 4 service pages
- Fix ตัวอย่างการใช้งาน section on marketing-automation
- Update about-us with hero image
- All images stored locally (not hotlinks)

.gitignore

@@ -16,6 +16,7 @@ pnpm-debug.log*
 # environment variables
 .env
 .env.production
+.env.local
 
 # macOS-specific files
 .DS_Store

AGENTS.md

@@ -1,326 +1,143 @@
 # MoreMiniMore Website - AI Agent Development Log
 
-## 📋 Project Overview
+**Generated:** 2026-03-30
-
+**Commit:** 193a4a4 (main)
-**Project:** MoreMiniMore Website PDPA Compliance Implementation  
+**Last Updated:** March 30, 2026 (AI Automation + Tech Consult redesign)
-**Repository:** https://git.moreminimore.com/kunthawat/moreminimore-website.git  
-**Branch:** main  
-**Deployment:** Easypanel (auto-deploy from Git)  
-**Tech Stack:** Astro 5.x, Node.js, Tailwind CSS 4.x, Astro DB, SQLite
 
 ---
 
-## 🎯 Current Status: ✅ COMPLETE
+## OVERVIEW
 
-**Last Updated:** March 10, 2026  
+Astro 5.x Thai business website. PDPA-compliant with cookie consent. Auto-deploys to Easypanel from Gitea.
-**Status:** Production-Ready, Fully PDPA-Compliant  
+
-**Deployment:** Live on Easypanel (port 80)
+**Live:** https://moreminimore.com/
+**Repo:** https://git.moreminimore.com/kunthawat/moreminimore-website
 
 ---
 
-## 🚀 Major Implementations
+## TECH STACK
 
-### **March 10, 2026 - PDPA Compliance Implementation**
+| Component | Version |
+|-----------|---------|
+| Astro | 5.x |
+| Node adapter | @astrojs/node 9.x |
+| Tailwind CSS | 4.x |
+| Astro DB | 0.20 (SQLite) |
+| Node | >=20.0.0 |
 
-#### **Features Delivered:**
+---
 
-1. **Cookie Consent System**
+## PAGES (18 total)
+
+| Route | Purpose |
+|-------|---------|
+| `/` | Homepage |
+| `/ai-automation` | AI services (purple hero) |
+| `/tech-consult` | Tech consulting (teal hero) |
+| `/marketing-automation` | Marketing automation (green hero) |
+| `/web-development` | Web dev services |
+| `/about-us` | Company info |
+| `/portfolio` | Work samples |
+| `/faq` | FAQ page |
+| `/contact-us` | Contact form |
+| `/privacy-policy` | PDPA privacy policy |
+| `/terms-and-conditions` | PDPA terms |
+| `/admin/consent-logs` | Consent admin (password-protected) |
+| `/api/consent` | Consent API |
+| `/blog/[slug]` | Blog posts |
+
+---
+
+## RECENT CHANGES (March 30, 2026)
+
+### GEO Support Added (Marketing Automation + Website Dev)
+- Added GEO (Generative Engine Optimization) to both Marketing Automation and Website Development pages
+- GEO = optimize for AI Search (ChatGPT, Perplexity, Google AI Overviews) alongside SEO
+- Added GEO FAQ Schema (JSON-LD) to both pages
+- Added GEO service card (Marketing Automation: "ปรากฏใน AI Search / ติด ChatGPT, Perplexity / Schema markup ครบ")
+- Added GEO benefit (Website Dev: "GEO ติด AI Search - เว็บถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews")
+- Updated page titles/descriptions to mention GEO
+
+### AI Automation Page Redesign
+- Purple/indigo hero
+- 4 services: Custom AI app, Data integration, AI analysis, Internal chatbot
+- 10 case studies (hospital, factory, logistics, insurance, school, restaurant, construction, transport, real estate, SME)
+- Yellow CTA sections
+
+### Tech Consult Page Redesign
+- Blue/teal hero
+- 4 services: Marketing Automation, AI Automation, AI Hardware, รวมระบบ
+- 10 case studies, 4 FAQs
+- Yellow CTA sections
+
+### Thai Spelling Fixes
+- `ครบวงจน` → `ครบวงจร` (11 times across pages)
+- `แล้วแนะนำ` → `จากนั้นจึงแนะนำ` (1 time)
+- `ดูแลบำรุง` → `ดูแลและบำรุง` (1 time)
+
+### Menu/Footer Cleanup
+- Removed `/seo-content-system` links
+- Moved Tech Consult to top of menu
+
+---
+
+## PDPA COMPLIANCE (March 10)
+
+### Cookie Consent
 - Component: `src/components/consent/CookieBanner.astro`
-   - Thai language with Accept/Reject buttons
+- Thai language Accept/Reject
-   - localStorage integration
+- localStorage tracking
-   - Auto-dismiss on user choice
+- Dispatches `consentGiven` event
-   - Dispatches 'consentGiven' event
 
-2. **Conditional Analytics**
+### Privacy Policy
-   - Umami Analytics integration
+- 14 PDPA Section 36 requirements
-   - Loads ONLY when user accepts cookies
+- Data controller, purposes, rights, DPO contact
-   - Privacy-first approach (GDPR/PDPA compliant)
 
-3. **Admin Dashboard**
+### Terms & Conditions
-   - URL: `/admin/consent-logs`
+- 17 sections
-   - Password-protected (env: ADMIN_PASSWORD)
+- Thai Consumer Protection Act compliant
-   - View last 100 consent records
-   - Delete individual records (right to be forgotten)
-   - Statistics display (total, acceptance rate)
 
-4. **API Endpoints**
+### Admin Dashboard
-   - `POST /api/consent` - Log new consent
+- `/admin/consent-logs`
-   - `GET /api/consent` - Retrieve consent logs
+- Password via `ADMIN_PASSWORD` env
-   - `DELETE /api/consent/:sessionId` - Right to be forgotten
+- View/delete consent records
-
-5. **PDPA-Compliant Legal Pages**
-   - **Privacy Policy:** All 14 PDPA Section 36 requirements
-     - Data controller information
-     - Purpose of data processing
-     - Types of data collected
-     - Legal basis for processing
-     - Data retention period
-     - Data sharing & disclosure
-     - Cross-border transfers
-     - Automated decision making
-     - Cookies & tracking technologies
-     - 8 data subject rights
-     - Security measures
-     - DPO contact
-     - Right to lodge complaint
-     - Policy version & effective date
-   
-   - **Terms & Conditions:** 17 comprehensive sections
-     - Acceptance, services, IP rights
-     - User obligations, data processing
-     - Liability limits, termination
-     - Governing law (Thailand)
-     - Dispute resolution
-
-6. **Infrastructure Updates**
-   - Custom Dockerfile (Node.js server adapter)
-   - Astro DB integration (SQLite)
-   - Package.json with start script
-   - Node.js 20+ requirement
-
-7. **Documentation**
-   - `.env.example` - Environment variables template
-   - `PDPA-COMPLIANCE.md` - Complete compliance guide
 
 ---
 
-## 📦 Files Created/Modified
+## DEPLOY
 
-### **New Files (7):**
-```
-src/components/consent/CookieBanner.astro
-src/pages/api/consent/index.ts
-src/pages/api/consent/[sessionId]/index.ts
-src/pages/admin/consent-logs.astro
-db/schema.ts
-.env.example
-PDPA-COMPLIANCE.md
-```
-
-### **Modified Files (6):**
-```
-src/layouts/Layout.astro
-src/pages/privacy-policy.astro
-src/pages/terms-and-conditions.astro
-astro.config.mjs
-package.json
-Dockerfile
-```
-
-### **Total Changes:**
-- **13 files** changed
-- **1,955+ lines** added
-- **48 lines** removed
-
----
-
-## 🔧 Configuration
-
-### **Environment Variables Required:**
 ```bash
-# Admin Dashboard (CHANGE THIS!)
+npm run build:remote   # Build with SQLite DB
-ADMIN_PASSWORD=your-secure-password
+git push origin main   # Easypanel auto-deploys (~3 min)
-
-# Umami Analytics (optional)
-UMAMI_WEBSITE_ID=b2e87a6c-0b64-43c8-bb09-e406ffca0af1
-UMAMI_DOMAIN=umami.moreminimore.com
-
-# Database (defaults to SQLite file)
-ASTRO_DB_REMOTE_URL=file:./data/consent.db
-
-# Server
-NODE_ENV=production
-PORT=80
-HOST=0.0.0.0
 ```
 
-### **Build Commands:**
+**Dockerfile:** Multi-stage (node:20-alpine), port 80, `node dist/server/entry.mjs`
-```bash
-# Development
-npm run dev
-
-# Production Build
-npm run build:remote
-
-# Docker Build
-docker build -t moreminimore:latest .
-
-# Run Container
-docker run -p 80:80 -e ADMIN_PASSWORD=xxx moreminimore:latest
-```
 
 ---
 
-## 🧪 Testing & Verification
+## WHERE TO LOOK
 
-### **Local Tests:** ✅ ALL PASSED
+| Task | File |
-- ✅ NPM install (dependencies synced)
+|------|------|
-- ✅ Build time: 1.16s
+| AI Automation content | `src/pages/ai-automation.astro` |
-- ✅ Docker build: 9.4s
+| Tech Consult content | `src/pages/tech-consult.astro` |
-- ✅ Container test: Working
+| Marketing Automation + GEO | `src/pages/marketing-automation.astro` |
-- ✅ All features verified locally
+| Website Dev + GEO | `src/pages/web-development.astro` |
-
+| Cookie consent | `src/components/consent/CookieBanner.astro` |
-### **Production Tests:** ✅ ALL PASSED
+| Consent API | `src/pages/api/consent/index.ts` |
-- ✅ Server running on port 80
+| Layout/menu | `src/layouts/Layout.astro` |
-- ✅ Homepage accessible
+| Blog posts | `src/content/blog/*.md` |
-- ✅ Cookie banner displays
-- ✅ Admin dashboard accessible
-- ✅ API endpoints responding
 
 ---
 
-## 📊 Deployment History
+## ANTI-PATTERNS
 
-### **March 10, 2026 - Initial PDPA Deployment**
+- **NEVER** use `ครบวงจน` (wrong) — correct is `ครบวงจร`
-
+- **NEVER** use `แล้วแนะนำ` for sequential actions — use `จากนั้นจึงแนะนำ`
-| Commit | Description | Status |
+- **NEVER** use `ดูแลบำรุง` — correct is `ดูแลและบำรุง`
-|--------|-------------|--------|
+- **NEVER** use emojis in Astro components — use icons
-| `b485320` | feat: Add full PDPA compliance | ✅ Deployed |
+- **NEVER** hardcode credentials — use env vars
-| `b76da28` | docs: Add legal pages & documentation | ✅ Deployed |
-| `3660d43` | fix: Sync package-lock.json | ✅ Deployed |
-| `6ebc97f` | ci: Trigger Easypanel rebuild | ✅ Deployed |
-
-### **Deployment Issues & Resolutions:**
-
-1. **Issue:** Docker build failed - `npm ci` error (package-lock out of sync)
-   - **Commit:** `b76da28`
-   - **Resolution:** Regenerated package-lock.json in commit `3660d43`
-   - **Status:** ✅ Fixed
-
-2. **Issue:** Easypanel building old commit
-   - **Resolution:** Created trigger commit `6ebc97f`
-   - **Status:** ✅ Fixed
-
-3. **Warning:** Multi-level URL encoding errors (non-critical)
-   - **Impact:** None - server runs normally
-   - **Status:** ⚠️ Known Astro/Node.js adapter warning
 
 ---
 
-## 🔐 Security Checklist
+**Status:** ✅ Production-ready, all pages redesigned, Thai errors fixed, GEO support added
-
-### **Pre-Production:**
-- [x] Cookie consent implemented
-- [x] Privacy Policy PDPA-compliant
-- [x] Terms & Conditions comprehensive
-- [x] Admin dashboard password-protected
-- [ ] **ACTION REQUIRED:** Change `ADMIN_PASSWORD` from default
-- [x] HTTPS enabled (Easypanel default)
-- [x] Package dependencies audited
-
-### **Post-Deployment:**
-- [ ] Change admin password in Easypanel
-- [ ] Test cookie consent in production
-- [ ] Verify admin dashboard access
-- [ ] Monitor consent logs
-- [ ] Regular security audits
-
----
-
-## 📞 Access Information
-
-| Resource | URL | Credentials |
-|----------|-----|-------------|
-| **Website** | `/` | Public |
-| **Privacy Policy** | `/privacy-policy` | Public |
-| **Terms & Conditions** | `/terms-and-conditions` | Public |
-| **Admin Dashboard** | `/admin/consent-logs` | Password: Set in Easypanel |
-| **Consent API** | `/api/consent` | API endpoint |
-
----
-
-## 📚 Documentation Files
-
-- `PDPA-COMPLIANCE.md` - Complete PDPA compliance guide
-- `.env.example` - Environment variables template
-- `DEPLOYMENT.md` - Deployment instructions (if needed)
-- `CHECKLIST.md` - Maintenance checklist (if needed)
-
----
-
-## 🎯 Success Criteria (All Met)
-
-- ✅ Website builds locally (`npm run dev`)
-- ✅ Docker build succeeds
-- ✅ Website accessible via browser
-- ✅ Cookie consent appears on first visit
-- ✅ Umami loads only with consent
-- ✅ Admin page accessible with password
-- ✅ Privacy Policy PDPA-compliant (14 sections)
-- ✅ Terms & Conditions PDPA-compliant (17 sections)
-- ✅ Data deletion works (right to be forgotten)
-- ✅ Documentation complete
-
----
-
-## 🔄 Ongoing Maintenance
-
-### **When user asks to:**
-
-- **Add content** → Create pages, commit, auto-deploy via Easypanel
-- **Fix bugs** → Fix code, commit, auto-deploy
-- **Update design** → Update components, commit, auto-deploy
-- **Update legal pages** → Edit privacy-policy.astro / terms.astro, commit, auto-deploy
-- **View consent logs** → Navigate to `/admin/consent-logs`, login with password
-- **Delete consent data** → Use admin dashboard or call DELETE `/api/consent/:sessionId`
-
-### **Update Workflow:**
-1. Make changes locally
-2. Test: `npm run build:remote`
-3. Commit: `git commit -m "description"`
-4. Push: `git push origin main`
-5. Easypanel auto-deploys (~3 minutes)
-
----
-
-## 📊 Technical Specifications
-
-### **Dependencies:**
-```json
-{
-  "@astrojs/db": "^0.20.0",
-  "@astrojs/node": "^9.5.4",
-  "@tailwindcss/vite": "^4.2.1",
-  "astro": "^5.17.1",
-  "astro-consent": "^1.0.17",
-  "drizzle-orm": "^0.45.1",
-  "libsql": "^0.5.22",
-  "tailwindcss": "^4.2.1"
-}
-```
-
-### **Node.js Version:** >=20.0.0 (enforced in package.json)
-
-### **Database:** SQLite (file-based) → Can upgrade to Turso for production
-
----
-
-## 🚨 Important Notes
-
-1. **Admin Password:** Default is `changeme` - MUST change in production
-2. **Client-side Auth:** Admin dashboard uses client-side password check (development)
-3. **Production Recommendation:** Add server-side authentication for admin
-4. **HTTPS:** Required for PDPA compliance (enabled by Easypanel)
-5. **Consent Logging:** Database integration pending (localStorage only for now)
-
----
-
-## 📈 Future Enhancements
-
-- [ ] Server-side authentication for admin dashboard
-- [ ] Real database integration (Turso/PostgreSQL)
-- [ ] CSV export functionality for consent logs
-- [ ] Email notifications for consent withdrawals
-- [ ] Rate limiting on admin page
-- [ ] IP whitelist for admin access
-- [ ] Regular automated security audits
-
----
-
-**Last Verified:** March 10, 2026  
-**Status:** ✅ Production-Ready  
-**Compliance:** ✅ PDPA-Compliant  
-
----
-
-*This AGENTS.md file serves as a comprehensive record for AI agents working on this project. All major changes, deployments, and configurations are documented here for continuity.*

astro.config.mjs

@@ -2,13 +2,15 @@
 import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';
 import db from '@astrojs/db';
+import sitemap from '@astrojs/sitemap';
 import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
+  site: 'https://www.moreminimore.com',
   adapter: node({
     mode: 'standalone'
   }),
-  integrations: [db()],
+  integrations: [db(), sitemap()],
   vite: {
     plugins: [tailwindcss()]
   }

db/schema.ts

@@ -1,7 +1,6 @@
 import { defineDb, defineTable, column } from 'astro:db';
 
-// ConsentLog table for PDPA compliance
+export const ConsentLog = defineTable({
-const ConsentLog = defineTable({
   columns: {
     id: column.number({ primaryKey: true }),
     sessionId: column.text({ unique: true }),

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@astrojs/db": "^0.20.0",
         "@astrojs/node": "^9.5.4",
+        "@astrojs/sitemap": "^3.7.2",
         "@tailwindcss/vite": "^4.2.1",
         "astro": "^5.17.1",
         "astro-consent": "^1.0.17",
@@ -262,6 +263,26 @@
         "node": "18.20.8 || ^20.3.0 || >=22.0.0"
       }
     },
+    "node_modules/@astrojs/sitemap": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.7.2.tgz",
+      "integrity": "sha512-PqkzkcZTb5ICiyIR8VoKbIAP/laNRXi5tw616N1Ckk+40oNB8Can1AzVV56lrbC5GKSZFCyJYUVYqVivMisvpA==",
+      "license": "MIT",
+      "dependencies": {
+        "sitemap": "^9.0.0",
+        "stream-replace-string": "^2.0.0",
+        "zod": "^4.3.6"
+      }
+    },
+    "node_modules/@astrojs/sitemap/node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/@astrojs/telemetry": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.0.tgz",
@@ -2201,6 +2222,15 @@
         "undici-types": "~7.18.0"
       }
     },
+    "node_modules/@types/sax": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
+      "integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -6454,6 +6484,40 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
+    "node_modules/sitemap": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-9.0.1.tgz",
+      "integrity": "sha512-S6hzjGJSG3d6if0YoF5kTyeRJvia6FSTBroE5fQ0bu1QNxyJqhhinfUsXi9fH3MgtXODWvwo2BDyQSnhPQ88uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^24.9.2",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.4.1"
+      },
+      "bin": {
+        "sitemap": "dist/esm/cli.js"
+      },
+      "engines": {
+        "node": ">=20.19.5",
+        "npm": ">=10.8.2"
+      }
+    },
+    "node_modules/sitemap/node_modules/@types/node": {
+      "version": "24.12.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.0.tgz",
+      "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/sitemap/node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/smol-toml": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.6.0.tgz",
@@ -6494,6 +6558,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stream-replace-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stream-replace-string/-/stream-replace-string-2.0.0.tgz",
+      "integrity": "sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==",
+      "license": "MIT"
+    },
     "node_modules/string-width": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",

package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@astrojs/db": "^0.20.0",
     "@astrojs/node": "^9.5.4",
+    "@astrojs/sitemap": "^3.7.2",
     "@tailwindcss/vite": "^4.2.1",
     "astro": "^5.17.1",
     "astro-consent": "^1.0.17",

public/icons/social/line.svg

@@ -1 +1,10 @@
-<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>
+<?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/images/hero/homepage-hero.jpg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69C9E16442FE4C363145F58A</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

public/images/hero/homepage.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69C9E47C8B23C13432C8CC4A</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

public/images/illustrations/ai-neural-network.jpg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69C9E11712E0DE3434FC3711</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

public/images/illustrations/automation-workflow.jpg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69C9E11761108C3930CBAE8D</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

public/images/illustrations/marketing-analytics.jpg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69C9E118E3595E3038F02DB8</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

public/images/illustrations/tech-cloud-infra.jpg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Error>
+  <Code>AccessDenied</Code>
+  <Message>You have no right to access this object because of bucket acl.</Message>
+  <RequestId>69C9E118AFEE6F3731E80954</RequestId>
+  <HostId>hailuo-image-algeng-data-us.oss-us-east-1.aliyuncs.com</HostId>
+  <EC>0003-00000001</EC>
+  <RecommendDoc>https://api.alibabacloud.com/troubleshoot?q=0003-00000001</RecommendDoc>
+</Error>

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://www.moreminimore.com/sitemap-index.xml

src/layouts/Layout.astro

@@ -18,6 +18,13 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
     <meta name="generator" content={Astro.generator} />
+    <link rel="canonical" href={Astro.url} />
+    
+    <!-- Security Headers -->
+    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
+    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
+    <meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=()" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://umami.moreminimore.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://umami.moreminimore.com; frame-src 'none';" />
     
     <!-- Favicons -->
     <link rel="icon" type="image/png" sizes="32x32" href="/branding/favicon-32.png" />
@@ -96,22 +103,36 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
               </button>
               <div class="absolute left-0 mt-2 w-64 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                 <div class="py-2">
-                  <a href="/web-development" class="block px-4 py-2 hover:bg-gray-50 transition">🌐 AI-Enhanced Website</a>
+                  <a href="/tech-consult" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
-                  <a href="/marketing-automation" class="block px-4 py-2 hover:bg-gray-50 transition">🔄 Marketing Automation</a>
+                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
-                  <a href="/seo-content-system" class="block px-4 py-2 hover:bg-gray-50 transition">📝 SEO + AI Content</a>
+                    <span>Tech Consult</span>
-                  <a href="/tech-consult" class="block px-4 py-2 hover:bg-gray-50 transition">🖥️ Tech Consult</a>
+                  </a>
-                  <a href="/ai-automation" class="block px-4 py-2 hover:bg-gray-50 transition">⚙️ AI Automation</a>
+                  <a href="/web-development" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
+                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
+                    <span>AI-Enhanced Website</span>
+                  </a>
+                  <a href="/marketing-automation" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
+                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                    <span>Marketing Automation</span>
+                  </a>
+                  <a href="/ai-automation" class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition">
+                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                    <span>AI Automation</span>
+                  </a>
                 </div>
               </div>
             </div>
             
             <a href="/portfolio" class="hover:text-accent-blue transition font-medium">ผลงาน</a>
-            <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a>
+            <!-- <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a> -->
             <a href="/faq" class="hover:text-accent-blue transition font-medium">FAQ</a>
             <a href="/blog" class="hover:text-accent-blue transition font-medium">บทความ</a>
             <a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
-            <a href="tel:0809955945" class="btn-brand flex items-center gap-2">
+            <a href="tel:0809955945" class="bg-black text-primary px-6 py-3 rounded-full font-bold hover:bg-black/80 transition-all duration-300 hover:scale-105 flex items-center gap-2">
-              📞 โทรเลย
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+              </svg>
+              โทรเลย
             </a>
           </nav>
           
@@ -138,30 +159,40 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
                 </svg>
               </summary>
               <div class="ml-4 mt-2 flex flex-col gap-2">
-                <a href="/web-development" class="text-sm hover:text-accent-blue transition">🌐 AI-Enhanced Website</a>
+                <a href="/tech-consult" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
-                <a href="/marketing-automation" class="text-sm hover:text-accent-blue transition">🔄 Marketing Automation</a>
+                  <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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
-                <a href="/seo-content-system" class="text-sm hover:text-accent-blue transition">📝 SEO + AI Content</a>
+                  Tech Consult
-                <a href="/tech-consult" class="text-sm hover:text-accent-blue transition">🖥️ Tech Consult</a>
+                </a>
-                <a href="/ai-automation" class="text-sm hover:text-accent-blue transition">⚙️ AI Automation</a>
+                <a href="/web-development" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
+                  <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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
+                  AI-Enhanced Website
+                </a>
+                <a href="/marketing-automation" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
+                  <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                  Marketing Automation
+                </a>
+                <a href="/ai-automation" class="flex items-center gap-2 text-sm hover:text-accent-blue transition">
+                  <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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                  AI Automation
+                </a>
               </div>
             </details>
             
             <a href="/portfolio" class="hover:text-accent-blue transition font-medium">ผลงาน</a>
-            <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a>
+            <!-- <a href="/pricing" class="hover:text-accent-blue transition font-medium">ราคา</a> -->
             <a href="/faq" class="hover:text-accent-blue transition font-medium">FAQ</a>
             <a href="/blog" class="hover:text-accent-blue transition font-medium">บทความ</a>
             <a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
-            <a href="tel:0809955945" class="btn-brand text-center">📞 โทรเลย</a>
+            <a href="tel:0809955945" class="btn-brand text-center flex items-center justify-center gap-2">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/></svg>
+              โทรเลย
+            </a>
           </div>
         </div>
       </div>
     </header>
     
     <main class="flex-grow">
-      <!-- Breadcrumbs (except homepage) -->
-      {Astro.url.pathname !== '/' && (
-        <Breadcrumbs currentPage={{ href: Astro.url.pathname, title: '' }} />
-      )}
       <slot />
     </main>
     
@@ -202,10 +233,9 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
           <div>
             <h3 class="font-bold mb-4 text-lg">บริการ</h3>
             <ul class="space-y-2 text-sm text-gray-700">
+              <li><a href="/tech-consult" class="hover:text-accent-blue transition">Tech Consult</a></li>
               <li><a href="/web-development" class="hover:text-accent-blue transition">AI-Enhanced Website</a></li>
               <li><a href="/marketing-automation" class="hover:text-accent-blue transition">Marketing Automation</a></li>
-              <li><a href="/seo-content-system" class="hover:text-accent-blue transition">SEO + AI Content</a></li>
-              <li><a href="/tech-consult" class="hover:text-accent-blue transition">Tech Consult</a></li>
               <li><a href="/ai-automation" class="hover:text-accent-blue transition">AI Automation</a></li>
             </ul>
           </div>
@@ -233,11 +263,11 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
                 <a href="mailto:contact@moreminimore.com" class="hover:text-accent-blue transition">contact@moreminimore.com</a>
               </li>
               <li class="flex items-center gap-2">
-                <span>💬</span>
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
                 <a href="#" class="hover:text-accent-blue transition">Line: @moreminimore</a>
               </li>
               <li class="flex items-center gap-2">
-                <span>🕒</span>
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                 <span>จ-ศ: 9:00 - 18:00 น.</span>
               </li>
             </ul>
@@ -275,6 +305,30 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
           mobileMenu.classList.toggle('hidden');
         });
       }
+      
+      // Scroll reveal animations
+      const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');
+      
+      const revealObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+          }
+        });
+      }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
+      
+      revealElements.forEach(el => revealObserver.observe(el));
+      
+      // Parallax scroll effect
+      const parallaxElements = document.querySelectorAll('.parallax-img');
+      
+      window.addEventListener('scroll', () => {
+        const scrolled = window.scrollY;
+        parallaxElements.forEach(el => {
+          const speed = el.dataset.parallaxSpeed || 0.5;
+          el.style.transform = `translateY(${scrolled * speed}px)`;
+        });
+      });
     </script>
   </body>
 </html>

src/pages/about-us.astro

@@ -33,163 +33,309 @@ const schemaData = {
 
 <Layout title="เกี่ยวกับเรา | บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ SEO AI Chatbot">
   <script type="application/ld+json" set:html={JSON.stringify(schemaData)} />
-  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
+  
-    <div class="container mx-auto px-4">
+  <!-- Hero Section -->
-      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
+  <section id="hero" class="reveal relative overflow-hidden min-h-[50vh] flex items-center">
+    <!-- Hero Image Background -->
+    <div class="absolute inset-0">
+      <img 
+        src="/images/hero/about-us-hero.jpg" 
+        alt="ทีมงานมอร์มินิมอร์ - พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ"
+        class="w-full h-full object-cover"
+      />
+      <div class="absolute inset-0 bg-gradient-to-br from-purple-600/80 via-purple-500/70 to-blue-600/80"></div>
+      <!-- Floating Shapes - Lighter purple/blue -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-300/10 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Floating dots -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-20">
+      <div class="max-w-4xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
           เกี่ยวกับเรา
         </h1>
-      <p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
+        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
-        MoreMiniMore ให้บริการโซลูชัน IT และ AI ครบวงจร เพื่อช่วย SMEs ไทยเติบโตในยุคดิจิตอล
+          มอร์มินิมอร์ — พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
         </p>
+      </div>
+    </div>
+  </section>
 
-      <div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
+  <!-- Vision Section -->
-        <div>
+  <section id="vision" class="reveal py-24 bg-white">
+    <div class="container mx-auto px-4">
+      <div class="max-w-4xl mx-auto">
+        <div class="text-center mb-12">
+          <span class="inline-flex items-center gap-2 px-4 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium mb-4">
+            <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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+            วิสัยทัศน์
+          </span>
+          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-black">
+            เติบโตไปด้วยกัน
+          </h2>
+        </div>
+        
+        <div class="bg-gray-50 rounded-3xl p-8 md:p-12 text-center">
+          <p class="text-xl md:text-2xl text-gray-700 leading-relaxed">
+            "เราเชื่อว่าความสำเร็จของลูกค้าคือความสำเร็จของเรา<br/>
+            <span class="text-black font-bold">เมื่อธุรกิจของคุณเติบโต</span> เราก็เติบโตไปด้วยกัน"
+          </p>
+          <p class="text-gray-600 mt-6">
+            ความสำเร็จที่แท้จริงไม่ใช่แค่ตัวเลข แต่คือการเห็นผลงานที่เกิดขึ้นจริงของลูกค้า
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Values Section -->
+  <section id="values" class="reveal py-24 bg-gray-50">
+    <div class="container mx-auto px-4">
+        <div class="text-center mb-12 max-w-2xl mx-auto">
+          <span class="inline-flex items-center gap-2 px-4 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium mb-4">
+            <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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
+            ค่านิยม
+          </span>
+        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-black">
+          สิ่งที่เรายึดมั่น
+        </h2>
+        <p class="text-gray-600">
+          เรามุ่งเน้นที่ผลลัพธ์ที่จับต้องได้ ไม่ใช่แค่ตัวเลขบนหน้าจอ
+        </p>
+      </div>
+      
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
+        <!-- Value 1 -->
+        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
+          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-black">เน้นผลงานจริง</h3>
+          <p class="text-gray-600 text-sm">
+            เราวัดความสำเร็จจากยอดขายที่เพิ่มขึ้นของลูกค้า ไม่ใช่แค่คะแนน SEO หรือจำนวนการเข้าชม
+          </p>
+        </div>
+        
+        <!-- Value 2 -->
+        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
+          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-black">เป็นพาร์ทเนอร์</h3>
+          <p class="text-gray-600 text-sm">
+            เราไม่ได้มองลูกค้าเป็นแค่ผู้จ้าง แต่มองเป็นพาร์ทเนอร์ที่จะเติบโตไปด้วยกันในระยะยาว
+          </p>
+        </div>
+        
+        <!-- Value 3 -->
+        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
+          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-black">คุ้มค่าที่สุด</h3>
+          <p class="text-gray-600 text-sm">
+            ออกแบบโซลูชันให้เหมาะกับงบประมาณของคุณ เริ่มต้นง่าย ไม่ต้องลงทุนมาก
+          </p>
+        </div>
+        
+        <!-- Value 4 -->
+        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
+          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-black">ทำงานเร็ว</h3>
+          <p class="text-gray-600 text-sm">
+            เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวันประงัน
+          </p>
+        </div>
+        
+        <!-- Value 5 -->
+        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
+          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-black">ดูแลต่อเนื่อง</h3>
+          <p class="text-gray-600 text-sm">
+            ไม่ทิ้งหลังขาย พร้อมสนับสนุนและปรับปรุงระบบให้ตลอดเวลา
+          </p>
+        </div>
+        
+        <!-- Value 6 -->
+        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
+          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-black">โปร่งใส</h3>
+          <p class="text-gray-600 text-sm">
+            ราคาชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น รายงานผลตรง ชัดเจน
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Image Section -->
+  <section class="reveal py-12 bg-white">
+    <div class="container mx-auto px-4">
+      <div class="max-w-4xl mx-auto">
+        <div class="relative rounded-3xl shadow-2xl overflow-hidden">
           <img 
-            src="https://www.moreminimore.com/wp-content/uploads/2022/01/Bright-Wisdom-Backgroud-service-2@2x.png" 
+            src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=1200&h=600&fit=crop" 
-            alt="Our System" 
+            alt="MoreminiMore Team - AI Technology Partner"
-            class="rounded-lg shadow-xl w-full"
+            class="w-full h-64 md:h-96 object-cover"
-            width="500"
+            loading="lazy"
-            height="500"
           />
-        </div>
+          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
-        <div>
+          <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
-          <h2 class="text-3xl font-bold mb-6 text-secondary">ระบบของเรา</h2>
+            <p class="text-white text-lg md:text-xl font-medium">พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ</p>
-          <div class="space-y-6">
-            <div class="flex gap-4">
-              <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">1️⃣</div>
-              <div>
-                <h3 class="text-xl font-bold mb-2">Server ประมวลผลหลัก</h3>
-                <p class="text-gray-700">ประมวลผลข้อมูลจากแหล่งต่าง ๆ อย่างรวดเร็วและมีประสิทธิภาพ</p>
-              </div>
-            </div>
-            <div class="flex gap-4">
-              <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">2️⃣</div>
-              <div>
-                <h3 class="text-xl font-bold mb-2">Server วิเคราะห์ข้อมูล</h3>
-                <p class="text-gray-700">วิเคราะห์ข้อมูลเชิงลึก เพื่อหาแนวทางที่เหมาะสม</p>
-              </div>
-            </div>
-            <div class="flex gap-4">
-              <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">3️⃣</div>
-              <div>
-                <h3 class="text-xl font-bold mb-2">Server จัดเก็บข้อมูล</h3>
-                <p class="text-gray-700">จัดเก็บข้อมูลอย่างเป็นระบบ ปลอดภัย เข้าถึงได้ง่าย</p>
-              </div>
-            </div>
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <section class="py-20 bg-white">
+  <!-- Why Choose Us -->
+  <section class="reveal py-24 bg-gray-50">
     <div class="container mx-auto px-4">
       <div class="max-w-4xl mx-auto">
-        <h2 class="text-3xl font-bold text-center mb-12 text-secondary">วิสัยทัศน์ของเรา</h2>
+        <h2 class="text-3xl font-bold text-center mb-12 text-black">
-        <div class="prose prose-lg mx-auto text-gray-700">
+          ทำไมเลือกเรา?
-          <p class="mb-6">
-            MoreminiMore มุ่งมั่นที่จะช่วยธุรกิจไทยเติบโตในยุคดิจิตอล ด้วยการใช้ข้อมูลเป็นพื้นฐานในการตัดสินใจ
-            และพัฒนาศักยภาพของคนในองค์กรให้สามารถขับเคลื่อนธุรกิจได้อย่างยั่งยืน
-          </p>
-          <p class="mb-6">
-            เราไม่เพียงแค่ให้คำแนะนำ แต่เรายังลงมือทำร่วมกับคุณ เพื่อให้มั่นใจว่ากลยุทธ์ที่วางไว้จะเกิดขึ้นจริง
-            และวัดผลได้อย่างชัดเจน
-          </p>
-          <p>
-            ด้วยประสบการณ์และทีมงานที่มีความเชี่ยวชาญ เราพร้อมที่จะเป็นพาร์ทเนอร์ในการเติบโตของธุรกิจคุณ
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- SEO Content Section -->
-  <section class="py-20 bg-gray-light">
-    <div class="container mx-auto px-4">
-      <div class="max-w-4xl mx-auto">
-        <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-secondary">
-          บริษัท มอร์มินิมอร์ จำกัด - พาร์ทเนอร์ด้าน IT และ AI เพื่อธุรกิจ SMEs
         </h2>
         
-        <div class="prose prose-lg mx-auto text-gray-700">
+        <div class="grid md:grid-cols-2 gap-6">
-          <p class="mb-6">
+          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
-            <strong class="text-secondary">บริษัท มอร์มินิมอร์ จำกัด</strong> เป็นผู้ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot ครบวงจร สำหรับธุรกิจ SMEs ทั่วประเทศ ด้วยประสบการณ์มากกว่า 5 ปี ในการพัฒนาระบบ IT และโซลูชัน AI เราเข้าใจดีว่าธุรกิจไทยต้องการอะไร และพร้อมมอบบริการที่ตอบโจทย์ที่สุดในงบประมาณที่คุ้มค่า
+            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
-          </p>
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+            </div>
+            <h3 class="font-bold mb-2 text-black">เน้นผลลัพธ์</h3>
+            <p class="text-gray-600 text-sm">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
+          </div>
           
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ประวัติความเป็นมา</h3>
+          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
-          <p class="mb-6">
+            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
-            บริษัท มอร์มินิมอร์ จำกัด ก่อตั้งขึ้นด้วยความมุ่งมั่นที่จะช่วยให้ธุรกิจไทยสามารถแข่งขันในยุคดิจิทัลได้อย่างเท่าเทียม เราเริ่มต้นจากการเป็นทีมพัฒนาเล็กๆ ที่เชี่ยวชาญด้านการทำเว็บไซต์และการตลาดดิจิทัล จนขยายตัวมาเป็นบริษัทที่ให้บริการครบวงจรทั้งด้าน Web Development, SEO, AI Chatbot และ Marketing Automation
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-          </p>
+            </div>
-          <p class="mb-6">
+            <h3 class="font-bold mb-2 text-black">ราคาเหมาะสม</h3>
-            ตลอดระยะเวลาที่ผ่านมา เรามีโอกาสได้ร่วมงานกับธุรกิจหลากหลายประเภท ไม่ว่าจะเป็นร้านค้าออนไลน์ คลินิกความงาม ร้านอาหาร โรงเรียนสอนพิเศษ บริษัทกฎหมาย และธุรกิจบริการอื่นๆ อีกมากมาย ประสบการณ์เหล่านี้ทำให้เราเข้าใจความท้าทายของ SMEs ไทย และสามารถออกแบบโซลูชันที่เหมาะสมกับแต่ละธุรกิจได้อย่างมีประสิทธิภาพ
+            <p class="text-gray-600 text-sm">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
-          </p>
+          </div>
           
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ทำไมต้องเลือกเรา?</h3>
+          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
-          <p class="mb-6">
+            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
-            เราแตกต่างจากบริษัทรับทำเว็บไซต์ทั่วไป เพราะเราไม่เพียงแต่สร้างเว็บไซต์ให้สวยงาม แต่เราใส่ใจในทุกรายละเอียดที่ส่งผลต่อความสำเร็จของธุรกิจคุณ ตั้งแต่การออกแบบที่ตอบโจทย์ผู้ใช้ การทำ SEO ให้ติดอันดับ Google ไปจนถึงการเชื่อมต่อระบบอัตโนมัติที่ช่วยลดต้นทุนในการดำเนินงาน
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
-          </p>
+            </div>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
+            <h3 class="font-bold mb-2 text-black">ดูแลต่อเนื่อง</h3>
-            <li><strong>ทีมงานมืออาชีพ:</strong> ทีมงานที่มีความเชี่ยวชาญเฉพาะด้าน ทั้ง Web Development, SEO, AI/ML และ Digital Marketing</li>
+            <p class="text-gray-600 text-sm">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
-            <li><strong>เข้าใจธุรกิจ SMEs:</strong> เรามีประสบการณ์ทำงานกับ SMEs มากมาย ทำให้เข้าใจข้อจำกัดและสามารถเสนอโซลูชันที่คุ้มค่าที่สุด</li>
+          </div>
-            <li><strong>บริการครบวงจร:</strong> เราให้บริการตั้งแต่ต้นจนจบ ไม่ต้องหา vendor หลายเจ้า</li>
-            <li><strong>สนับสนุนหลังการขาย:</strong> เราไม่ทิ้งลูกค้าหลังเสร็จงาน มีบริการดูแลและให้คำปรึกษาอย่างต่อเนื่อง</li>
-            <li><strong>ราคาโปร่งใส:</strong> ไม่มีค่าใช้จ่ายแอบแฝง ระบุราคาชัดเจนตั้งแต่ต้น</li>
-            <li><strong>วัดผลได้:</strong> เราใช้ข้อมูลและตัวชี้วัดที่ชัดเจนในการติดตามผลการทำงาน</li>
-          </ul>
           
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ความเชี่ยวชาญของเรา</h3>
+          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
-          <p class="mb-6">
+            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
-            เราเชี่ยวชาญในหลายด้านที่ทำให้ธุรกิจของคุณสามารถเติบโตได้อย่างยั่งยืน:
+              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-          </p>
+            </div>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
+            <h3 class="font-bold mb-2 text-black">ทำงานเร็ว</h3>
-            <li><strong>รับทำเว็บไซต์:</strong> เว็บไซต์ Responsive Design ที่สวยงาม ใช้งานง่าย และรองรับ SEO</li>
+            <p class="text-gray-600 text-sm">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
-            <li><strong>บริการทำ SEO:</strong> เพิ่มการมองเห็นบน Google ดึงดูดลูกค้าที่มีคุณภาพ</li>
+          </div>
-            <li><strong>AI Chatbot:</strong> ระบบตอบคำถามอัตโนมัติ 24/7 ลดภาระงานพนักงาน</li>
-            <li><strong>Marketing Automation:</strong> ระบบอัตโนมัติทางการตลาด เพิ่มประสิทธิภาพการทำงาน</li>
-            <li><strong>ที่ปรึกษาด้าน IT:</strong> ให้คำแนะนำในการเลือกและใช้งานเทคโนโลยีที่เหมาะสม</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ค่านิยมของบริษัท</h3>
-          <p class="mb-6">
-            เรายึดมั่นในค่านิยมหลัก 4 ประการ ที่เป็นแนวทางในการทำงานทุกครั้ง:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>ความซื่อสัตย์:</strong> เราทำงานด้วยความโปร่งใส และให้คำแนะนำที่เป็นจริง ไม่เกินความจริง</li>
-            <li><strong>คุณภาพ:</strong> เรามุ่งมั่นส่งมอบงานที่มีคุณภาพสูงสุด ทุกงานคือตัวแทนของเรา</li>
-            <li><strong>นวัตกรรม:</strong> เราติดตามเทคโนโลยีใหม่ๆ始终 และนำมาปรับใช้เพื่อประโยชน์ของลูกค้า</li>
-            <li><strong>ความเป็นพาร์ทเนอร์:</strong> เราไม่มองลูกค้าเป็นเพียงผู้จ้างงาน แต่มองเป็นพาร์ทเนอร์ที่เราจะเติบโตไปด้วยกัน</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ผลงานและความภูมิใจ</h3>
-          <p class="mb-6">
-            ตลอดระยะเวลาที่ผ่านมา เรามีโอกาสได้ร่วมงานกับลูกค้ามากมาย และช่วยเพิ่มยอดขายและประสิทธิภาพให้ธุรกิจของพวกเขา บางโครงการเราสามารถช่วยลูกค้าเพิ่มยอดขายได้มากกว่า 50% บางโครงการช่วยลดต้นทุนการทำงานได้มากกว่า 70% ซึ่งความสำเร็จเหล่านี้คือความภูมิใจของเรา
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ติดต่อเรา</h3>
-          <p class="mb-6">
-            หากคุณกำลังมองหาพาร์ทเนอร์ด้าน IT และ AI ที่จะช่วยพัฒนาธุรกิจของคุณ เรายินดีให้คำปรึกษาฟรี ไม่มีค่าใช้จ่าย ติดต่อเรามาได้เลย แล้วเราจะช่วยคุณวางแผนกลยุทธ์ที่เหมาะสมที่สุด
-          </p>
-          <p class="mb-6">
-            <strong>บริษัท มอร์มินิมอร์ จำกัด</strong><br />
-            ที่อยู่: 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว จ.สมุทรสาคร 74120<br />
-            โทร: 080-995-5945<br />
-            อีเมล: contact@moreminimore.com<br />
-            LINE: @moreminimore
-          </p>
         </div>
       </div>
     </div>
   </section>
 
-  <section class="py-20 bg-gray-100">
+  <!-- Contact Section -->
+  <section class="reveal py-20 bg-primary">
     <div class="container mx-auto px-4 text-center">
-      <h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมร่วมงานกับคุณ</h2>
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-black">
-      <p class="text-xl text-gray-700 mb-8 max-w-2xl mx-auto">
+        พร้อมร่วมงานกับคุณแล้วหรือยัง?
-        ให้เราช่วยคุณพัฒนาระบบและกลยุทธ์ที่ตอบโจทย์ธุรกิจ
+      </h2>
+      <p class="text-black/70 mb-8 max-w-xl mx-auto">
+        เริ่มต้นง่ายๆ แค่โทรหาหรือเพิ่ม LINE มาคุยกันก่อน ไม่มีค่าใช้จ่าย!
       </p>
-      <a href="/contact-us" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        ติดต่อเรา
+        <a href="tel:0809955945" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+          </svg>
+          080-995-5945
         </a>
+        <a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
+          <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
+          เพิ่ม Line
+        </a>
+      </div>
     </div>
   </section>
 </Layout>
+
+<style>
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  
+  @keyframes fade-in-up {
+    from { 
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to { 
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes float-1 {
+    0%, 100% { transform: translateY(0) translateX(0); }
+    25% { transform: translateY(-30px) translateX(15px); }
+    50% { transform: translateY(-20px) translateX(-15px); }
+    75% { transform: translateY(-40px) translateX(10px); }
+  }
+  
+  @keyframes float-2 {
+    0%, 100% { transform: translateY(0) translateX(0); }
+    25% { transform: translateY(-25px) translateX(-20px); }
+    50% { transform: translateY(-35px) translateX(15px); }
+    75% { transform: translateY(-15px) translateX(-10px); }
+  }
+  
+  @keyframes float-3 {
+    0%, 100% { transform: translateY(0) scale(1); }
+    50% { transform: translateY(-30px) scale(1.1); }
+  }
+  
+  @keyframes float-dot-1 {
+    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
+    50% { transform: translateY(-40px) translateX(15px); opacity: 0.3; }
+  }
+  
+  @keyframes float-dot-2 {
+    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
+    50% { transform: translateY(-30px) translateX(-20px); opacity: 0.35; }
+  }
+  
+  @keyframes float-dot-3 {
+    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
+    50% { transform: translateY(-35px) translateX(10px); opacity: 0.25; }
+  }
+  
+  .animate-fade-in-up {
+    opacity: 0;
+    animation: fade-in-up 0.6s ease-out forwards;
+  }
+  
+  .animate-float-1 { animation: float-1 4s ease-in-out infinite; }
+  .animate-float-2 { animation: float-2 5s ease-in-out infinite; }
+  .animate-float-3 { animation: float-3 3s ease-in-out infinite; }
+  .animate-float-dot-1 { animation: float-dot-1 2s ease-in-out infinite; }
+  .animate-float-dot-2 { animation: float-dot-2 2.5s ease-in-out infinite; }
+  .animate-float-dot-3 { animation: float-dot-3 3s ease-in-out infinite; }
+</style>

src/pages/ai-automation.astro

@@ -3,15 +3,15 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout 
-  title="AI Automation | MoreminiMore - ระบบ Chatbot และ Workflow อัตโนมัติ"
+  title="AI Automation | MoreminiMore - ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI"
-  description="บริการ AI Automation สำหรับ SME ไทย ระบบ Chatbot ตอบลูกค้าอัตโนมัติ 24/7 Workflow Automation ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพการทำงาน"
+  description="บริการ AI Automation สำหรับ SME ไทย ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร"
 >
   <!-- Schema.org Structured Data -->
   <script type="application/ld+json" set:html={JSON.stringify({
     "@context": "https://schema.org",
     "@type": "LocalBusiness",
     "name": "MoreminiMore Co.,Ltd.",
-    "description": "บริการ AI Automation สำหรับ SME ไทย ระบบ Chatbot และ Workflow อัตโนมัติ",
+    "description": "บริการ AI Automation สำหรับ SME ไทย ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI",
     "telephone": "+66809955945",
     "email": "contact@moreminimore.com",
     "url": "https://www.moreminimore.com/ai-automation",
@@ -23,273 +23,658 @@ import Layout from '../layouts/Layout.astro'
       "postalCode": "74120",
       "addressCountry": "TH"
     },
+    "geo": {
+      "@type": "GeoCoordinates",
+      "latitude": 13.5497,
+      "longitude": 100.4167
+    },
     "openingHours": "Mo-Fr 09:00-18:00",
     "priceRange": "$$",
-    "serviceType": ["AI Chatbot", "Workflow Automation", "RPA", "Business Process Automation"]
+    "serviceType": ["AI Automation", "Data Integration", "AI Analytics", "Enterprise Chatbot"]
   })} />
 
-  <!-- Hero Section -->
+  <!-- BreadcrumbList Schema -->
-  <section class="relative py-24 gradient-ai text-white overflow-hidden">
+  <script type="application/ld+json" set:html={JSON.stringify({
-    <div class="absolute inset-0 opacity-20">
+    "@context": "https://schema.org",
-      <div class="absolute top-20 right-10 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
+    "@type": "BreadcrumbList",
-      <div class="absolute bottom-10 left-10 w-96 h-96 bg-primary rounded-full mix-blend-overlay filter blur-3xl animate-float-delayed"></div>
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "หน้าแรก",
+        "item": "https://www.moreminimore.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "AI Automation",
+        "item": "https://www.moreminimore.com/ai-automation"
+      }
+    ]
+  })} />
+
+  <!-- HowTo Schema for Process -->
+  <script type="application/ld+json" set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    "name": "ขั้นตอนการพัฒนา AI Automation",
+    "description": "กระบวนการพัฒนาระบบ AI Automation ตั้งแต่วิเคราะห์จนถึงส่งมอบ",
+    "step": [
+      {
+        "@type": "HowToStep",
+        "name": "วิเคราะห์",
+        "text": "วิเคราะห์ระบบที่มีและความต้องการของธุรกิจ"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "ออกแบบ",
+        "text": "ออกแบบ Flow และระบบเชื่อมต่อที่เหมาะสม"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "พัฒนา",
+        "text": "พัฒนาและเชื่อมต่อระบบทั้งหมดเข้าด้วยกัน"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "ส่งมอบ",
+        "text": "สอนการใช้งานและดูแลอย่างต่อเนื่อง"
+      }
+    ]
+  })} />
+
+  <!-- FAQPage Schema -->
+  <script type="application/ld+json" set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    "mainEntity": [
+      {
+        "@type": "Question",
+        "name": "AI Automation ต่างจาก Marketing Automation อย่างไร?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "AI Automation เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "ต้องมีความรู้ด้านเทคนิคไหม?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "ใช้เวลาพัฒนานานเท่าไหร่?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น"
+        }
+      }
+    ]
+  })} />
+
+  <!-- Hero Section - Purple/Indigo Theme -->
+  <section id="hero" class="relative overflow-hidden min-h-[60vh] flex items-center">
+    <!-- Animated Background - Purple/Indigo -->
+    <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-purple-800">
+      <!-- Floating Shapes -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-indigo-300/20 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 0.75s;"></div>
     </div>
     
-    <div class="container mx-auto px-4 relative z-10">
+    <!-- Floating dots -->
-      <div class="max-w-4xl mx-auto text-center">
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
-        <div class="text-7xl mb-6">⚙️</div>
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
-        <h1 class="text-4xl md:text-6xl font-bold mb-8">
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
-          AI Automation
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 1s;"></div>
+      <div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style="animation-delay: 0.5s;"></div>
+      <div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-16">
+      <div class="max-w-6xl mx-auto">
+        <div class="grid lg:grid-cols-2 gap-12 items-center">
+          <!-- Text Content -->
+          <div class="text-center lg:text-left">
+            <!-- Badge -->
+            <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
+              <span class="w-2 h-2 bg-indigo-300 rounded-full animate-pulse"></span>
+              <span class="text-sm font-medium text-white">ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI</span>
+            </div>
+            
+            <!-- Main Headline -->
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style="animation-delay: 0.1s;">
+              เชื่อมข้อมูล<br/>
+              <span class="text-white">วิเคราะห์ด้วย AI</span><br/>
+              สร้างรายงานอัตโนมัติ
             </h1>
-        <p class="text-2xl text-gray-100 mb-10">
-          ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพด้วย Chatbot และ Workflow Automation
-        </p>
-        <div class="flex flex-col sm:flex-row gap-5 justify-center">
-          <a href="tel:0809955945" class="bg-white text-accent-blue px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
-            📞 080-995-5945
-          </a>
-          <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-accent-blue transition shadow-xl inline-flex items-center justify-center gap-2">
-            💬 ติดต่อผ่าน Line
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
             
-  <!-- Service Description -->
+            <!-- Subheadline -->
-  <section class="py-20 bg-white">
+            <p class="text-lg md:text-xl text-white/90 mb-10 max-w-xl mx-auto lg:mx-0 leading-relaxed animate-fade-in-up" style="animation-delay: 0.2s;">
-    <div class="container mx-auto px-4 max-w-5xl">
+              ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล<br/>
-      <h2 class="text-3xl font-bold mb-8 text-center text-secondary">บริการ AI Automation</h2>
+              สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร
-      
-      <div class="prose prose-lg max-w-none">
-        <p class="text-xl text-gray-600 mb-8">
-          AI Automation คือการนำเทคโนโลยี AI มาช่วยทำงานแทนคน ไม่ว่าจะเป็นการตอบคำถามลูกค้าผ่าน Chatbot หรือการทำงานซ้ำๆ อัตโนมัติ ช่วยให้คุณประหยัดเวลา ลดข้อผิดพลาด และมีเวลามุ่งเน้นงานที่สำคัญกว่า
             </p>
             
-        <div class="grid md:grid-cols-2 gap-8 mt-12">
+            <!-- CTAs -->
-          <div class="glass p-6 rounded-2xl border border-gray-200 card-hover">
+            <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center animate-fade-in-up" style="animation-delay: 0.3s;">
-            <div class="text-5xl mb-4">💬</div>
+              <a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
-            <h3 class="text-2xl font-bold mb-3">AI Chatbot</h3>
+                <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
-            <p class="text-gray-600 mb-4">ตอบคำถามลูกค้าอัตโนมัติ 24/7 ลดภาระงานบริการลูกค้า</p>
+                  <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
-            <ul class="space-y-2 text-gray-700">
+                </svg>
-              <li>• Facebook Messenger, LINE Official Account</li>
+                โทรหาเรา
-              <li>• Website Chat Widget</li>
+              </a>
-              <li>• ตอบคำถามด้วย AI อัจฉริยะ</li>
+              <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-black/30 backdrop-blur-sm text-white border-2 border-white/40 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
-              <li>• ส่งต่อให้คนเมื่อจำเป็น</li>
+                <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
-              <li>• เก็บข้อมูลลูกค้าไว้วิเคราะห์</li>
+                สอบถามรายละเอียด
-            </ul>
+              </a>
             </div>
-          <div class="glass p-6 rounded-2xl border border-gray-200 card-hover">
+            
-            <div class="text-5xl mb-4">🔄</div>
+            <!-- Trust Badges -->
-            <h3 class="text-2xl font-bold mb-3">Workflow Automation</h3>
+            <div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style="animation-delay: 0.4s;">
-            <p class="text-gray-600 mb-4">อัตโนมัติกระบวนการทำงานซ้ำๆ ลดเวลาและข้อผิดพลาด</p>
+              <div class="flex flex-wrap justify-center lg:justify-start gap-6 text-white text-sm">
-            <ul class="space-y-2 text-gray-700">
+                <span class="flex items-center gap-2">
-              <li>• กรอกข้อมูลอัตโนมัติ</li>
+                  <svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-              <li>• ประมวลผลอีเมล์</li>
+                  ปรึกษาฟรี
-              <li>• สร้างเอกสารอัตโนมัติ</li>
+                </span>
-              <li>• ระบบอนุมัติตามขั้นตอน</li>
+                <span class="flex items-center gap-2">
-              <li>• เชื่อมต่อระบบหลายระบบ</li>
+                  <svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
-            </ul>
+                  เชื่อมทุกระบบ
+                </span>
+                <span class="flex items-center gap-2">
+                  <svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                  วิเคราะห์อัจฉริยะ
+                </span>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Hero Image -->
+          <div class="reveal-scale">
+            <img 
+              src="/images/hero/ai-automation-hero.jpg" 
+              alt="ระบบ AI Automation สำหรับธุรกิจ - เชื่อมข้อมูลและวิเคราะห์ด้วย AI"
+              class="w-full h-auto rounded-2xl shadow-2xl"
+              loading="eager"
+            />
           </div>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Process Section -->
+  <style>
-  <section class="py-20 bg-gray-50">
+    /* Floating animations */
-    <div class="container mx-auto px-4 max-w-5xl">
+    @keyframes float-1 {
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">กระบวนการพัฒนาระบบ</h2>
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      33% { transform: translateY(-20px) rotate(2deg); }
+      66% { transform: translateY(-10px) rotate(-1deg); }
+    }
     
-      <div class="grid md:grid-cols-4 gap-6">
+    @keyframes float-2 {
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+      0%, 100% { transform: translateY(0) rotate(0deg); }
-          <div class="text-4xl mb-3">🔍</div>
+      33% { transform: translateY(-15px) rotate(-2deg); }
-          <h4 class="font-bold mb-2">1. วิเคราะห์</h4>
+      66% { transform: translateY(-25px) rotate(1deg); }
-          <p class="text-gray-600 text-sm">วิเคราะห์กระบวนการทำงานที่ต้องการให้ AI ช่วย</p>
+    }
+    
+    @keyframes float-3 {
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      33% { transform: translateY(-25px) rotate(1deg); }
+      66% { transform: translateY(-15px) rotate(-2deg); }
+    }
+    
+    @keyframes float-dot-1 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-15px); opacity: 0.4; }
+    }
+    
+    @keyframes float-dot-2 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-10px); opacity: 0.5; }
+    }
+    
+    @keyframes float-dot-3 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-20px); opacity: 0.4; }
+    }
+    
+    .animate-float-1 { animation: float-1 3s ease-in-out infinite; }
+    .animate-float-2 { animation: float-2 4s ease-in-out infinite; }
+    .animate-float-3 { animation: float-3 3.5s ease-in-out infinite; }
+    .animate-float-dot-1 { animation: float-dot-1 2s ease-in-out infinite; }
+    .animate-float-dot-2 { animation: float-dot-2 2.5s ease-in-out infinite; }
+    .animate-float-dot-3 { animation: float-dot-3 1.8s ease-in-out infinite; }
+    
+    .animate-fade-in-up {
+      animation: fadeInUp 0.6s ease-out forwards;
+      opacity: 0;
+    }
+    
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
+
+  <!-- Services Section -->
+  <section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
+    <div class="container mx-auto px-4 max-w-6xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        บริการของเรา
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
+        AI Automation ครบวงจรสำหรับธุรกิจไทย
+      </p>
+      
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <!-- Service 1: เขียนแอป AI เฉพาะ -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+            </svg>
           </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+          <h3 class="text-xl font-bold mb-3 text-gray-900">เขียนแอป AI เฉพาะ</h3>
-          <div class="text-4xl mb-3">🎨</div>
+          <ul class="text-gray-600 text-sm space-y-2">
-          <h4 class="font-bold mb-2">2. ออกแบบ</h4>
+            <li>• พัฒนา Application ตามความต้องการ</li>
-          <p class="text-gray-600 text-sm">ออกแบบ Flow และการทำงานของระบบ</p>
+            <li>• ระบบ AI เฉพาะทางธุรกิจ</li>
+            <li>• รวม AI เข้ากับระบบเดิม</li>
+          </ul>
         </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+
-          <div class="text-4xl mb-3">⚙️</div>
+        <!-- Service 2: เชื่อมข้อมูลจากหลายแอป -->
-          <h4 class="font-bold mb-2">3. พัฒนา</h4>
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
-          <p class="text-gray-600 text-sm">พัฒนาและทดสอบระบบให้ทำงานได้ตามต้องการ</p>
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
+            </svg>
           </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+          <h3 class="text-xl font-bold mb-3 text-gray-900">เชื่อมข้อมูลหลายแอป</h3>
-          <div class="text-4xl mb-3">🚀</div>
+          <ul class="text-gray-600 text-sm space-y-2">
-          <h4 class="font-bold mb-2">4. ส่งมอบ</h4>
+            <li>• รวมข้อมูลจากทุกแพลตฟอร์ม</li>
-          <p class="text-gray-600 text-sm">ส่งมอบและสอนการใช้งาน พร้อมดูแลต่อเนื่อง</p>
+            <li>• Sync ข้อมูลอัตโนมัติ</li>
+            <li>• รวมศูนย์ข้อมูลองค์กร</li>
+          </ul>
+        </div>
+
+        <!-- Service 3: วิเคราะห์ข้อมูล → รายงาน/แจ้งเตือน/ส่งต่อ -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">วิเคราะห์ → รายงาน</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• AI วิเคราะห์ข้อมูลอัจฉริยะ</li>
+            <li>• สร้างรายงานอัตโนมัติ</li>
+            <li>• แจ้งเตือนและส่งต่อข้อมูล</li>
+          </ul>
+        </div>
+
+        <!-- Service 4: Chatbot ภายในองค์กร -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">Chatbot ภายในองค์กร</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• ตอบคำถามพนักงาน 24/7</li>
+            <li>• ค้นหาข้อมูลจากเอกสาร</li>
+            <li>• ช่วยงานฝ่าย HR และ IT</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Benefits Section -->
+  <section class="reveal py-20 bg-white">
+    <div class="container mx-auto px-4 max-w-6xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ทำไมต้องเลือกเรา?
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
+        เรามีความเชี่ยวชาญในการเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI
+      </p>
+      
+      <!-- Supporting Illustration -->
+      <div class="mb-16 reveal-scale">
+        <img 
+          src="/images/illustrations/ai-automation-1.jpg" 
+          alt="ภาพแสดงการทำงานของระบบ AI Automation - เชื่อมข้อมูลจากหลายแหล่งและวิเคราะห์ด้วย AI"
+          class="w-full max-w-3xl mx-auto rounded-2xl shadow-lg"
+        />
+      </div>
+      
+      <div class="grid md:grid-cols-3 gap-8">
+        <!-- Benefit 1: เชื่อมต่อทุกระบบ -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">เชื่อมต่อทุกระบบ</h3>
+          <p class="text-gray-600">
+            เชื่อมข้อมูลจากทุกแอปที่คุณใช้ ไม่ว่าจะเป็น ERP, CRM, ระบบบัญชี, POS หรือโปรแกรมอื่น ๆ เข้าด้วยกัน
+          </p>
+        </div>
+
+        <!-- Benefit 2: วิเคราะห์อัจฉริยะ -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">วิเคราะห์อัจฉริยะ</h3>
+          <p class="text-gray-600">
+            AI วิเคราะห์ข้อมูลทั้งหมดและหา insights ที่เป็นประโยชน์ต่อธุรกิจ พร้อมแนะนำวิธีปรับปรุง
+          </p>
+        </div>
+
+        <!-- Benefit 3: แจ้งเตือนอัตโนมัติ -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">แจ้งเตือนอัตโนมัติ</h3>
+          <p class="text-gray-600">
+            ระบบแจ้งเตือนอัตโนมัติเมื่อมีสิ่งสำคัญ เช่น ยอดขายต่ำกว่ากำหนด สินค้าใกล้หมด หรือต้องติดตามลูกค้า
+          </p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Target Audience -->
-  <section class="py-20 bg-white">
+  <section class="reveal py-20 bg-gray-50">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-4xl">
-      <div class="bg-gray-light p-8 rounded-2xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
-        <h3 class="text-2xl font-bold mb-6 text-accent-blue text-center">เหมาะสำหรับธุรกิจ</h3>
+        เหมาะกับใคร?
-        <ul class="space-y-3 text-gray-700 max-w-2xl mx-auto">
+      </h2>
-          <li>• ร้านค้าออนไลน์ที่ได้รับคำถามจากลูกค้าจำนวนมาก</li>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
-          <li>• บริษัทที่มีงานซ้ำๆ ที่ต้องทำทุกวัน เช่น กรอกข้อมูล ส่งอีเมล์</li>
+        ธุรกิจที่ต้องการเชื่อมข้อมูลและวิเคราะห์ด้วย AI
-          <li>• ธุรกิจที่ต้องการลดค่าใช้จ่ายในการจ้างพนักงานเพิ่ม</li>
+      </p>
-          <li>• ผู้ประกอบการที่ต้องการให้บริการลูกค้า 24 ชั่วโมง</li>
+      
-          <li>• บริษัทที่ต้องการเพิ่มประสิทธิภาพการทำงานของทีม</li>
+      <div class="grid md:grid-cols-3 gap-6">
-        </ul>
+        <!-- SME -->
+        <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-2xl p-6 text-center border border-indigo-200">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
+          <p class="text-sm text-gray-600">ธุรกิจที่ต้องการรวมข้อมูลจากหลายแหล่งและใช้ AI วิเคราะห์</p>
+        </div>
+
+        <!-- Enterprise -->
+        <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-2xl p-6 text-center border border-indigo-200">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900 mb-2">บริษัท/โรงพยาบาล</h3>
+          <p class="text-sm text-gray-600">องค์กรขนาดใหญ่ที่ต้องการรวมศูนย์ข้อมูลและวิเคราะห์อัจฉริยะ</p>
+        </div>
+
+        <!-- Factory -->
+        <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-2xl p-6 text-center border border-indigo-200">
+          <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900 mb-2">โรงงาน/Logistics</h3>
+          <p class="text-sm text-gray-600">องค์กรที่ต้องเชื่อมต่อระบบการผลิตและโลจิสติกส์</p>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- FAQ Section for AEO -->
+  <!-- Case Studies - 10 Detailed -->
-  <section class="py-20 bg-gray-50">
+  <section class="reveal py-20 bg-white">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-4xl">
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">คำถามที่พบบ่อย</h2>
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ตัวอย่างการใช้งาน
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        กรณีศึกษาการใช้ AI Automation ในธุรกิจจริง
+      </p>
+      
+      <div class="grid md:grid-cols-2 gap-6">
+        <!-- Case 1: ร้านค้าออนไลน์ -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูลจาก Shopee, Lazada, JD สร้างรายงานยอดขายรวม วิเคราะห์สินค้าขายดี แจ้งเตือนเมื่อสินค้าใกล้หมด พร้อม Chatbot ตอบคำถามลูกค้า</p>
+        </div>
+
+        <!-- Case 2: โรงพยาบาล -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">โรงพยาบาล/คลินิก</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูล HIS, LIS, RIS วิเคราะห์ผลตรวจแลป สร้างรายงานสรุปสำหรับแพทย์ แจ้งเตือนผลผิดปกติ และนัดหมายซ้ำอัตโนมัติ</p>
+        </div>
+
+        <!-- Case 3: ร้านอาหาร/เชน -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">ร้านอาหาร/เชน</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูล POS ทุกสาขา รวมยอดขายอัตโนมัติ วิเคราะห์ยอดขายแต่ละเมนู สั่งซื้อวัตถุดิบอัตโนมัติตามคลัง</p>
+        </div>
+
+        <!-- Case 4: บริษัทขนส่ง -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">บริษัทขนส่ง</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูล Tracking, Fleet Management, Billing วิเคราะห์เส้นทางที่ดีที่สุด คำนวณค่าใช้จ่ายอัตโนมัติ แจ้งเตือนรถซ่อม</p>
+        </div>
+
+        <!-- Case 5: บริษัทประกัน -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">บริษัทประกัน</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูลเคลม, การขาย, CRM วิเคราะห์ความเสี่ยง สร้างรายงานประจำเดือน แจ้งเตือนต่ออายุกรมชีนิ</p>
+        </div>
+
+        <!-- Case 6: โรงแรม -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">โรงแรม/รีสอร์ท</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูล Booking, PMS, POS วิเคราะห์อัตราการเข้าพัก รายได้ต่อห้อง แจ้งเตือนรีวิวลบ และติดตามลูกค้า VIP</p>
+        </div>
+
+        <!-- Case 7: บริษัทก่อสร้าง -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">บริษัทก่อสร้าง</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูลประมูลงาน, ค่าใช้จ่ายโครงการ, การจ่ายเงิน วิเคราะห์กำไรขาดทุนแต่ละโครงการ แจ้งเตือนการจ่ายเงิน</p>
+        </div>
+
+        <!-- Case 8: สถาบันการศึกษา -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">สถาบันการศึกษา</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูลนักเรียน, ค่าเทอม, การเรียน วิเคราะห์อัตราการคงอยู่ สร้างรายงานผลการเรียน แจ้งเตือนนักเรียนหยุดเรียน</p>
+        </div>
+
+        <!-- Case 9: ธุรกิจอสังหาริมทรัพย์ -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">ธุรกิจอสังหาริมทรัพย์</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูล Lead, การดูโปรเจกต์, การปิดการขาย วิเคราะห์ Lead Scoring แจ้งเตือนติดตามลูกค้า สร้างรายงานประจำเดือน</p>
+        </div>
+
+        <!-- Case 10: โรงงานผลิต -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <h3 class="font-bold text-gray-900 mb-2">โรงงานผลิต</h3>
+          <p class="text-gray-600 text-sm">เชื่อมข้อมูล ERP, MES, QC วิเคราะห์ประสิทธิภาพการผลิต ตรวจสอบคุณภาพอัตโนมัติ แจ้งเตือนเมื่อเครื่องจักรผิดปกติ</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Process -->
+  <section class="reveal py-20 bg-white">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ขั้นตอนการทำงาน
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        กระบวนการทำงานที่ชัดเจน
+      </p>
+      
+      <div class="grid md:grid-cols-4 gap-4">
+        <div class="text-center">
+          <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
+          <h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
+          <p class="text-sm text-gray-600">วิเคราะห์ระบบที่มีและความต้องการ</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
+          <h3 class="font-bold text-gray-900 mb-2">ออกแบบ</h3>
+          <p class="text-sm text-gray-600">ออกแบบ Flow และระบบเชื่อมต่อ</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
+          <h3 class="font-bold text-gray-900 mb-2">พัฒนา</h3>
+          <p class="text-sm text-gray-600">พัฒนาและเชื่อมต่อระบบ</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
+          <h3 class="font-bold text-gray-900 mb-2">ส่งมอบ</h3>
+          <p class="text-sm text-gray-600">สอนการใช้งานและดูแลต่อเนื่อง</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section class="reveal py-20 bg-gray-50">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        คำถามที่พบบ่อย
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        คำถามที่ลูกค้ามักถามเกี่ยวกับบริการ
+      </p>
       
       <div class="space-y-4">
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 1 -->
-          <h4 class="font-bold mb-2 text-lg">Q: AI Chatbot ตอบคำถามได้ถูกต้องแค่ไหน?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">AI Chatbot ที่เราพัฒนาสามารถตอบคำถามพื้นฐานได้อย่างถูกต้อง หากเป็นคำถามที่ซับซ้อน ระบบจะส่งต่อให้พนักงานคุณจัดการ คุณสามารถปรับแต่งคำตอบและเพิ่มข้อมูลให้ AI เรียนรู้ได้ตลอดเวลา</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">AI Automation ต่างจาก Marketing Automation อย่างไร?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p><strong>AI Automation</strong> เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน<br/>
+              <strong>Marketing Automation</strong> เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 2 -->
-          <h4 class="font-bold mb-2 text-lg">Q: Workflow Automation ช่วยอะไรได้บ้าง?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">Workflow Automation ช่วยทำงานที่ต้องทำซ้ำๆ ทุกวันโดยอัตโนมัติ เช่น กรอกข้อมูลจากอีเมล์ลงระบบ ส่งอีเมล์ตอบกลับ สร้างใบเสนอราคา ตรวจสอบสถานะการสั่งซื้อ ช่วยลดเวลาและข้อผิดพลาดจากการทำงานด้วยมือ</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p>ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 3 -->
-          <h4 class="font-bold mb-2 text-lg">Q: ใช้เวลาพัฒนานานเท่าไหร่?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ Chatbot พื้นฐานใช้เวลาประมาณ 1-2 สัปดาห์ ส่วน Workflow Automation ขึ้นอยู่กับจำนวนกระบวนการที่ต้องทำอัตโนมัติ เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 4 -->
-          <h4 class="font-bold mb-2 text-lg">Q: ต้องมีความรู้ด้านเทคนิคเพื่อใช้งานหรือไม่?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ไม่จำเป็นต้องมีความรู้ด้านเทคนิค เราจะสอนการใช้งานจนสามารถใช้งานได้ด้วยตนเอง หากต้องการปรับแต่งหรือเพิ่มฟีเจอร์ใหม่ๆ เราก็สามารถช่วยได้ต่อเนื่อง</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">ใช้เวลาพัฒนานานเท่าไหร่?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p>ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น</p>
             </div>
-      </div>
+          </details>
-    </div>
-  </section>
-
-  <!-- SEO Content Section -->
-  <section class="py-20 bg-gray-light">
-    <div class="container mx-auto px-4">
-      <div class="max-w-4xl mx-auto">
-        <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-secondary">
-          บริการติดตั้งระบบ AI Automation และ Chatbot ตอบลูกค้าอัตโนมัติ 24/7
-        </h2>
-        
-        <div class="prose prose-lg mx-auto text-gray-700">
-          <p class="mb-6">
-            <strong class="text-secondary">บริการติดตั้งระบบ AI Automation และ Chatbot</strong> ช่วยธุรกิจของคุณตอบคำถามลูกค้าได้ตลอด 24 ชั่วโมง ไม่มีวันหยุด ลดภาระงานพนักงาน และเพิ่มโอกาสในการปิดการขาย ด้วยระบบอัตโนมัติที่ชาญฉลาด
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">AI Automation คืออะไร?</h3>
-          <p class="mb-6">
-            AI Automation คือการใช้ปัญญาประดิษฐ์เพื่อทำงานที่เคยต้องใช้คนทำ โดยเฉพาะงานที่ซ้ำซ้อนและใช้เวลานาน เช่น การตอบคำถามลูกค้า การกรอกข้อมูล การประมวลผลเอกสาร ระบบจะทำงานอัตโนมัติ แม่นยำ และรวดเร็ว
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ทำไมธุรกิจต้องมี AI Chatbot?</h3>
-          <p class="mb-6">
-            ในยุคที่ลูกค้าคาดหวังการตอบกลับที่รวดเร็ว AI Chatbot ช่วยคุณตอบสนองความคาดหวังนั้นได้:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>ตอบกลับทันที:</strong> ลูกค้าไม่ต้องรอ ได้คำตอบทันทีที่ถาม</li>
-            <li><strong>ทำงาน 24/7:</strong> ตอบลูกค้าได้ตลอดเวลา แม้ในเวลานอกทำการ</li>
-            <li><strong>ลดต้นทุน:</strong> ลดงานตอบคำถามซ้ำซ้อน 70-80%</li>
-            <li><strong>สเกลได้:</strong> รับมือลูกค้าจำนวนมากได้พร้อมกัน</li>
-            <li><strong>เก็บข้อมูล:</strong> เก็บข้อมูลลูกค้าเพื่อนำไปวิเคราะห์ต่อ</li>
-            <li><strong>เพิ่มยอดขาย:</strong> แนะนำสินค้าและปิดการขายอัตโนมัติ</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">บริการของเรา</h3>
-          <p class="mb-6">
-            เราติดตั้งระบบ AI Automation ครบวงจร:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>AI Chatbot:</strong> Chatbot อัจฉริยะ ตอบคำถามได้ธรรมชาติ</li>
-            <li><strong>LINE OA Bot:</strong> เชื่อมต่อกับ LINE Official Account</li>
-            <li><strong>Facebook Messenger Bot:</strong> ตอบลูกค้าบน Facebook</li>
-            <li><strong>Website Chatbot:</strong> ฝังบนเว็บไซต์ของคุณ</li>
-            <li><strong>Workflow Automation:</strong> อัตโนมัติกระบวนการทำงาน</li>
-            <li><strong>Data Integration:</strong> เชื่อมต่อกับระบบหลังบ้าน</li>
-            <li><strong>Analytics:</strong> วิเคราะห์บทสนทนาและประสิทธิภาพ</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">Use Cases ที่นิยม</h3>
-          <p class="mb-6">
-            ตัวอย่างการใช้งานจริง:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>ร้านค้าออนไลน์:</strong> ตอบคำถามสินค้า สถานะออเดอร์</li>
-            <li><strong>คลินิก:</strong> นัดหมายอัตโนมัติ ตอบคำถามบริการ</li>
-            <li><strong>ร้านอาหาร:</strong> รับออเดอร์ จองโต๊ะ</li>
-            <li><strong>โรงเรียน:</strong> ตอบคำถามคอร์สเรียน สมัครสมาชิก</li>
-            <li><strong>อสังหาริมทรัพย์:</strong> นัดดูห้อง ตอบคำถามโครงการ</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ขั้นตอนการทำงาน</h3>
-          <p class="mb-6">
-            เราทำงานอย่างเป็นระบบ:
-          </p>
-          <ol class="list-decimal pl-6 mb-6 space-y-2">
-            <li><strong>เก็บข้อมูล:</strong> รวบรวมคำถามที่พบบ่อย (FAQ)</li>
-            <li><strong>ออกแบบ Flow:</strong> วางแผนบทสนทนา</li>
-            <li><strong>ฝึก AI:</strong> ฝึกโมเดลด้วยข้อมูลของคุณ</li>
-            <li><strong>ทดสอบ:</strong> ทดสอบความถูกต้อง</li>
-            <li><strong>ติดตั้ง:</strong> เชื่อมต่อกับช่องทางที่ต้องการ</li>
-            <li><strong>ติดตาม:</strong> วัดผลและปรับปรุงอย่างต่อเนื่อง</li>
-          </ol>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ราคาบริการ</h3>
-          <p class="mb-6">
-            ราคาขึ้นอยู่กับความซับซ้อน:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Starter:</strong> 25,000 บาท (Chatbot พื้นฐาน 1 ช่องทาง)</li>
-            <li><strong>Business:</strong> 50,000 บาท (Chatbot ขั้นสูง 3 ช่องทาง)</li>
-            <li><strong>Enterprise:</strong> 100,000+ บาท (Full Automation + Integration)</li>
-          </ul>
-          <p class="mb-6">
-            มีบริการรายเดือนสำหรับดูแลและปรับปรุงระบบ
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ติดต่อเรา</h3>
-          <p class="mb-6">
-            หากคุณสนใจระบบ AI Automation สามารถติดต่อมาปรึกษาฟรี ไม่มีค่าใช้จ่าย
-          </p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Related Services -->
-  <section class="py-12 bg-white border-t border-gray-100">
+  <section class="reveal py-12 bg-white border-t border-gray-100">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-4xl text-center">
-      <h3 class="text-xl font-bold mb-6 text-center text-secondary">บริการที่เกี่ยวข้อง</h3>
+      <h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
       <div class="flex flex-wrap justify-center gap-4">
-        <a href="/web-development" class="btn-secondary">🎨 พัฒนาเว็บไซต์</a>
+        <a href="/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Marketing Automation</a>
-        <a href="/marketing-automation" class="btn-secondary">📧 Marketing Automation</a>
+        <a href="/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">พัฒนาเว็บไซต์</a>
-        <a href="/ai-strategy-consult" class="btn-secondary">🎯 ที่ปรึกษากลยุทธ์ AI</a>
+        <a href="/tech-consult" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Tech Consult</a>
       </div>
     </div>
   </section>
 
-  <!-- CTA Section -->
+  <!-- CTA Section - Yellow -->
-  <section id="contact" class="py-20 gradient-primary text-white">
+  <section id="cta" class="reveal py-20 bg-primary">
     <div class="container mx-auto px-4 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-6">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
-        พร้อมเพิ่มประสิทธิภาพการทำงานด้วย AI แล้วหรือยัง?
+        พร้อมเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI แล้วหรือยัง?
       </h2>
-      <p class="text-xl text-gray-100 mb-10 max-w-2xl mx-auto">
+      <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
-        ปรึกษาฟรี! ผู้เชี่ยวชาญพร้อมวิเคราะห์และแนะนำระบบที่เหมาะกับธุรกิจของคุณ
+        ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบ AI Automation ที่ตอบโจทย์
       </p>
-      <div class="flex flex-col sm:flex-row gap-5 justify-center">
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
+        <a href="tel:0809955945" class="group bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
-          📞 080-995-5945
+          <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+          </svg>
+          080-995-5945
         </a>
-        <a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
+        <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
-          💬 ติดต่อผ่าน Line
+          <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
+          สอบถามรายละเอียด
         </a>
       </div>
     </div>

src/pages/api/consent/index.ts

@@ -1,10 +1,53 @@
 import type { APIRoute } from 'astro';
 import { db } from 'astro:db';
+import { defineTable, column } from 'astro:db';
+
+const ConsentLog = defineTable({
+  columns: {
+    id: column.number({ primaryKey: true }),
+    sessionId: column.text({ unique: true }),
+    timestamp: column.date(),
+    essential: column.boolean(),
+    analytics: column.boolean(),
+    marketing: column.boolean(),
+    policyVersion: column.text(),
+    ipHash: column.text(),
+    userAgent: column.text()
+  }
+});
 
 export const prerender = false;
 
-// POST /api/consent - Log new consent
+const rateLimitMap = new Map<string, { count: number; resetTime: number }>();
+const RATE_LIMIT = 10;
+const RATE_WINDOW = 60000;
+
+function checkRateLimit(ip: string): boolean {
+  const now = Date.now();
+  const record = rateLimitMap.get(ip);
+  
+  if (!record || now > record.resetTime) {
+    rateLimitMap.set(ip, { count: 1, resetTime: now + RATE_WINDOW });
+    return true;
+  }
+  
+  if (record.count >= RATE_LIMIT) {
+    return false;
+  }
+  
+  record.count++;
+  return true;
+}
+
 export const POST: APIRoute = async ({ request, clientAddress }) => {
+  const ip = clientAddress || 'unknown';
+  if (!checkRateLimit(ip)) {
+    return new Response(
+      JSON.stringify({ error: 'Too many requests' }),
+      { status: 429, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+
   try {
     const body = await request.json();
     const { sessionId, essential, analytics, marketing, policyVersion, userAgent } = body;
@@ -16,11 +59,26 @@ export const POST: APIRoute = async ({ request, clientAddress }) => {
       );
     }
 
-    const ipHash = crypto.subtle ? 
+    let ipHash = 'unknown';
-      await crypto.subtle.digest('SHA-256', new TextEncoder().encode(clientAddress || 'unknown')).then(
+    try {
-        hash => Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, '0')).join('').substring(0, 16)
+      if (crypto.subtle) {
-      ) : 
+        const hashBuffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(ip));
-      'unknown';
+        ipHash = Array.from(new Uint8Array(hashBuffer)).map(b => b.toString(16).padStart(2, '0')).join('').substring(0, 16);
+      }
+    } catch {
+      ipHash = `fallback-${Date.now()}`;
+    }
+
+    await db.insert(ConsentLog as any).values({
+      sessionId,
+      timestamp: new Date(),
+      essential,
+      analytics: analytics ?? false,
+      marketing: marketing ?? false,
+      policyVersion,
+      ipHash,
+      userAgent: userAgent || 'unknown'
+    });
 
     return new Response(
       JSON.stringify({ success: true, sessionId, message: 'Consent logged' }),
@@ -35,7 +93,6 @@ export const POST: APIRoute = async ({ request, clientAddress }) => {
   }
 };
 
-// GET /api/consent - Get consent logs (admin)
 export const GET: APIRoute = async () => {
   return new Response(
     JSON.stringify({ logs: [], message: 'DB integration in progress' }),

src/pages/blog/[slug].astro

@@ -13,6 +13,22 @@ export async function getStaticPaths() {
 const { post } = Astro.props;
 const { Content } = await post.render();
 
+// Map blog slugs to feature images
+const featureImages: Record<string, string> = {
+  '5-ways-ai-increase-sales': '/images/blog/ai-sales-growth.jpg',
+  'ai-content-google-love': '/images/blog/ai-content-seo.jpg',
+  'ai-for-sme-thailand': '/images/blog/ai-sme-thailand.jpg',
+  'back-office-automation': '/images/blog/office-automation.jpg',
+  'chatbot-business-case-study': '/images/blog/chatbot-business.jpg',
+  'data-driven-marketing': '/images/blog/data-marketing.jpg',
+  'digital-transformation-guide': '/images/blog/digital-transformation.jpg',
+  'marketing-automation-guide': '/images/blog/marketing-automation.jpg',
+  'seo-2026-business-guide': '/images/blog/seo-guide.jpg',
+  'website-2026-must-have': '/images/blog/website-2026.jpg',
+};
+
+const featureImage = featureImages[post.slug] || '/images/blog/ai-sales-growth.jpg';
+
 const formatDate = (date: Date) => {
   return date.toLocaleDateString('th-TH', {
     year: 'numeric',
@@ -27,7 +43,7 @@ const schemaData = {
   "@type": "Article",
   "headline": post.data.title,
   "description": post.data.description,
-  "image": post.data.image || "/branding/logo-long.png",
+  "image": featureImage,
   "datePublished": post.data.pubDate.toISOString(),
   "dateModified": post.data.pubDate.toISOString(),
   "author": {
@@ -41,8 +57,38 @@ const schemaData = {
       "@type": "ImageObject",
       "url": "/branding/logo-long.png"
     }
+  },
+  "mainEntityOfPage": {
+    "@type": "WebPage",
+    "@id": `https://www.moreminimore.com/blog/${post.slug}`
   }
 };
+
+// BreadcrumbList Schema
+const breadcrumbSchema = {
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "name": "หน้าแรก",
+      "item": "https://www.moreminimore.com"
+    },
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "name": "บล็อก",
+      "item": "https://www.moreminimore.com/blog"
+    },
+    {
+      "@type": "ListItem",
+      "position": 3,
+      "name": post.data.title,
+      "item": `https://www.moreminimore.com/blog/${post.slug}`
+    }
+  ]
+};
 ---
 
 <Layout 
@@ -52,38 +98,57 @@ const schemaData = {
   <!-- Schema.org JSON-LD -->
   <script type="application/ld+json" set:html={JSON.stringify(schemaData)} />
   
-  <!-- Article Header -->
+  <!-- BreadcrumbList JSON-LD -->
-  <section class="py-12 bg-gray-light">
+  <script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
-    <div class="container mx-auto px-4 max-w-4xl">
-      <nav class="text-sm mb-6">
-        <a href="/blog" class="text-accent-blue hover:underline">← กลับไปหน้าบล็อก</a>
-      </nav>
 
-      <div class="flex items-center gap-2 mb-4">
+  <!-- Hero Image -->
-        <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">
+  <div class="reveal relative h-[50vh] min-h-[400px]">
-          {post.data.category}
+    <img 
-        </span>
+      src={featureImage} 
+      alt={post.data.title}
+      class="w-full h-full object-cover"
+    />
+    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
+    
+    <!-- Back Button -->
+    <div class="absolute top-6 left-6">
+      <a href="/blog" class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm text-white px-4 py-2 rounded-full hover:bg-white/30 transition">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+        </svg>
+        กลับไปหน้าบล็อก
+      </a>
     </div>
     
-      <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-secondary leading-tight">
+    <!-- Hero Content -->
+    <div class="absolute bottom-0 left-0 right-0 p-8">
+      <div class="container mx-auto px-4 max-w-4xl">
+        <span class="inline-block bg-yellow-500 text-black px-4 py-1 rounded-full text-sm font-medium mb-4">
+          {post.data.category}
+        </span>
+        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight mb-4">
           {post.data.title}
         </h1>
-      
+        <div class="flex flex-wrap items-center gap-4 text-white/90">
-      <div class="flex flex-wrap items-center gap-4 text-gray-600">
           <span class="flex items-center gap-2">
-          <span class="text-xl">✍️</span>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
+            </svg>
             {post.data.author}
           </span>
           <span class="flex items-center gap-2">
-          <span class="text-xl">📅</span>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+            </svg>
             {formatDate(post.data.pubDate)}
           </span>
         </div>
       </div>
-  </section>
+    </div>
+  </div>
 
   <!-- Article Content -->
-  <section class="py-12 bg-white">
+  <section class="reveal py-12 bg-white">
     <div class="container mx-auto px-4 max-w-4xl">
       <article class="prose prose-lg max-w-none">
         <Content />
@@ -91,9 +156,10 @@ const schemaData = {
       
       <!-- Tags -->
       <div class="mt-12 pt-8 border-t">
+        <h3 class="text-lg font-bold mb-4">หัวข้อที่เกี่ยวข้อง</h3>
         <div class="flex flex-wrap gap-2">
           {post.data.tags.map(tag => (
-            <a href={`/blog?tag=${tag}`} class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 hover:bg-primary hover:text-white transition">
+            <a href={`/blog?tag=${tag}`} class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 hover:bg-yellow-500 hover:text-black transition">
               #{tag}
             </a>
           ))}
@@ -103,7 +169,7 @@ const schemaData = {
   </section>
 
   <!-- Share Section -->
-  <section class="py-8 bg-gray-light">
+  <section class="reveal py-8 bg-gray-50">
     <div class="container mx-auto px-4 max-w-4xl text-center">
       <h3 class="text-xl font-bold mb-4">แชร์บทความนี้</h3>
       <div class="flex justify-center gap-4">
@@ -113,7 +179,10 @@ const schemaData = {
           rel="noopener noreferrer"
           class="px-6 py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition inline-flex items-center gap-2"
         >
-          📘 Facebook
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+          </svg>
+          Facebook
         </a>
         <a 
           href={`https://twitter.com/intent/tweet?url=${Astro.url}&text=${post.data.title}`}
@@ -121,7 +190,10 @@ const schemaData = {
           rel="noopener noreferrer"
           class="px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition inline-flex items-center gap-2"
         >
-          🐦 Twitter
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          </svg>
+          X
         </a>
         <a 
           href={`https://line.me/R/msg/text/?${post.data.title}%20${Astro.url}`}
@@ -129,40 +201,33 @@ const schemaData = {
           rel="noopener noreferrer"
           class="px-6 py-3 bg-green-500 text-white rounded-full hover:bg-green-600 transition inline-flex items-center gap-2"
         >
-          💬 LINE
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 17.703c-.29.29-.767.348-1.116.174l-2.115-1.053c-.582.35-1.223.543-1.917.543-.695 0-1.335-.193-1.917-.543l-2.115 1.053c-.349.174-.826.116-1.116-.174-.29-.29-.348-.767-.174-1.116l1.053-2.115c-.35-.582-.543-1.223-.543-1.917 0-.695.193-1.335.543-1.917L5.35 8.51c-.174-.349-.116-.826.174-1.116.29-.29.767-.348 1.116-.174l2.115 1.053c.582-.35 1.223-.543 1.917-.543.695 0 1.335.193 1.917.543l2.115-1.053c.349-.174.826-.116 1.116.174.29.29.348.767.174 1.116l-1.053 2.115c.35.582.543 1.223.543 1.917 0 .695-.193 1.335-.543 1.917l1.053 2.115c.174.349.116.826-.174 1.116z"/>
+          </svg>
+          LINE
         </a>
       </div>
     </div>
   </section>
 
-  <!-- Related Articles -->
+  <!-- CTA Section - Always Yellow -->
-  <section class="py-12 bg-white">
+  <section id="cta" class="reveal py-20 bg-primary">
-    <div class="container mx-auto px-4 max-w-6xl">
-      <h2 class="text-2xl font-bold mb-8 text-center">บทความที่เกี่ยวข้อง</h2>
-      <div class="grid md:grid-cols-3 gap-8">
-        <!-- Related articles would be dynamically loaded -->
-        <div class="text-center text-gray-500">
-          <p>กำลังอัปเดตบทความที่เกี่ยวข้อง...</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section class="py-16 gradient-ai text-white">
     <div class="container mx-auto px-4 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-6">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
         ต้องการคำปรึกษาเพิ่มเติม?
       </h2>
-      <p class="text-xl mb-8 max-w-2xl mx-auto">
+      <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
         ทีมผู้เชี่ยวชาญของเราพร้อมให้คำปรึกษาฟรี
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="/contact-us" class="bg-white text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-lg inline-flex items-center justify-center gap-2">
+        <a href="/contact-us" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
-          📞 ติดต่อเรา
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+          </svg>
+          ติดต่อเรา
         </a>
-        <a href="/ai-strategy-consult" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-primary transition inline-flex items-center justify-center gap-2">
+        <a href="/web-development" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
-          ปรึกษาผู้เชี่ยวชาญ
+          ดูบริการ
         </a>
       </div>
     </div>
@@ -233,12 +298,12 @@ const schemaData = {
   }
   
   .prose blockquote {
-    border-left: 4px solid #0066cc;
+    border-left: 4px solid #fed400;
     padding-left: 1rem;
     margin: 1.5rem 0;
     font-style: italic;
     color: #666;
-    background: #f9f9f9;
+    background: #fffbeb;
     padding: 1rem;
     border-radius: 0 8px 8px 0;
   }

src/pages/blog/index.astro

@@ -16,6 +16,20 @@ const sortedPosts = allPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pu
 const categories = [...new Set(allPosts.map(post => post.data.category))];
 const tags = [...new Set(allPosts.flatMap(post => post.data.tags))];
 
+// Map blog slugs to feature images
+const featureImages: Record<string, string> = {
+  '5-ways-ai-increase-sales': '/images/blog/ai-sales-growth.jpg',
+  'ai-content-google-love': '/images/blog/ai-content-seo.jpg',
+  'ai-for-sme-thailand': '/images/blog/ai-sme-thailand.jpg',
+  'back-office-automation': '/images/blog/office-automation.jpg',
+  'chatbot-business-case-study': '/images/blog/chatbot-business.jpg',
+  'data-driven-marketing': '/images/blog/data-marketing.jpg',
+  'digital-transformation-guide': '/images/blog/digital-transformation.jpg',
+  'marketing-automation-guide': '/images/blog/marketing-automation.jpg',
+  'seo-2026-business-guide': '/images/blog/seo-guide.jpg',
+  'website-2026-must-have': '/images/blog/website-2026.jpg',
+};
+
 const formatDate = (date: Date) => {
   return date.toLocaleDateString('th-TH', {
     year: 'numeric',
@@ -29,26 +43,47 @@ const formatDate = (date: Date) => {
   title="บล็อก | MoreMiniMore - ความรู้เกี่ยวกับ AI และการตลาดดิจิทัล"
   description="อ่านบทความและความรู้เกี่ยวกับ AI, Marketing Automation, SEO และ Digital Transformation สำหรับธุรกิจ SMEs ไทย"
 >
-  <section class="py-16 bg-gray-light">
+  <!-- Hero Section - Yellow Theme (matching homepage) -->
-    <div class="container mx-auto px-4">
+  <section id="hero" class="reveal relative overflow-hidden min-h-[40vh] flex items-center">
+    <!-- Animated Background - Yellow theme for Blog -->
+    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600">
+      <!-- Floating Shapes -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-yellow-300/20 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-yellow-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Floating dots -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 2s;"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-16">
       <div class="max-w-4xl mx-auto text-center">
-        <h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
           บล็อก & ความรู้
         </h1>
-        <p class="text-xl text-gray-600 mb-8">
+        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
           ความรู้เกี่ยวกับ AI, การตลาดดิจิทัล และการเปลี่ยนแปลงทางธุรกิจสำหรับ SMEs ไทย
         </p>
         
         <!-- Search Box -->
-        <div class="max-w-2xl mx-auto">
+        <div class="max-w-2xl mx-auto mt-8 animate-fade-in-up" style="animation-delay: 0.4s;">
           <div class="relative">
             <input 
               type="text" 
               id="blog-search" 
               placeholder="ค้นหาบทความ..." 
-              class="w-full px-6 py-4 pr-12 rounded-full border-2 border-gray-200 focus:border-primary focus:outline-none text-lg"
+              class="w-full px-6 py-4 pr-12 rounded-full border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white placeholder-white/70 focus:border-white focus:outline-none text-lg"
             />
-            <button class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary transition">
+            <button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition">
               <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
               </svg>
@@ -60,18 +95,18 @@ const formatDate = (date: Date) => {
   </section>
 
   <!-- Category Filter -->
-  <section class="py-8 bg-white border-b">
+  <section class="reveal py-8 bg-white border-b shadow-sm">
     <div class="container mx-auto px-4">
       <div class="flex flex-wrap gap-3 justify-center" id="category-filters">
         <button 
-          class="category-btn active px-5 py-2 rounded-full bg-primary text-white font-medium transition hover:bg-primary/90"
+          class="category-btn active px-5 py-2 rounded-full bg-yellow-500 text-white font-medium transition hover:bg-yellow-600"
           data-category="all"
         >
           ทั้งหมด
         </button>
         {categories.map(category => (
           <button 
-            class="category-btn px-5 py-2 rounded-full bg-gray-100 text-gray-700 font-medium transition hover:bg-primary hover:text-white"
+            class="category-btn px-5 py-2 rounded-full bg-gray-100 text-gray-700 font-medium transition hover:bg-yellow-500 hover:text-white"
             data-category={category}
           >
             {category}
@@ -82,32 +117,47 @@ const formatDate = (date: Date) => {
   </section>
 
   <!-- Blog Grid -->
-  <section class="py-16 bg-gray-light">
+  <section id="blog" class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
     <div class="container mx-auto px-4">
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="blog-grid">
-        {sortedPosts.map(post => (
+        {sortedPosts.map((post, index) => (
-          <article class="blog-card bg-white rounded-2xl overflow-hidden shadow-md card-hover" data-category={post.data.category} data-tags={JSON.stringify(post.data.tags)}>
+          <article 
-            <div class="h-48 gradient-ai flex items-center justify-center">
+            class="blog-card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 group" 
-              <div class="text-6xl">📝</div>
+            data-category={post.data.category} 
+            data-tags={JSON.stringify(post.data.tags)}
+            style={`animation-delay: ${index * 0.1}s`}
+          >
+            <!-- Feature Image -->
+            <div class="relative h-48 overflow-hidden">
+              <img 
+                src={featureImages[post.slug] || '/images/blog/ai-sales-growth.jpg'} 
+                alt={post.data.title}
+                class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
+              />
+              <!-- Overlay -->
+              <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <!-- Category Badge -->
+              <span class="absolute top-4 left-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-medium">
+                {post.data.category}
+              </span>
             </div>
+            
             <div class="p-6">
               <div class="flex items-center gap-2 mb-3">
-                <span class="text-sm text-accent-blue font-bold">{post.data.category}</span>
+                <span class="text-sm text-gray-600">{formatDate(post.data.pubDate)}</span>
-                <span class="text-gray-300">|</span>
-                <span class="text-sm text-gray-500">{formatDate(post.data.pubDate)}</span>
               </div>
-              <h2 class="text-xl font-bold mb-3 line-clamp-2 hover:text-accent-blue transition">
+              <h2 class="text-xl font-bold mb-3 line-clamp-2 group-hover:text-yellow-600 transition-colors">
                 <a href={`/blog/${post.slug}`}>{post.data.title}</a>
               </h2>
-              <p class="text-gray-600 mb-4 line-clamp-3">
+              <p class="text-gray-700 mb-4 line-clamp-2">
                 {post.data.description}
               </p>
               <div class="flex flex-wrap gap-2 mb-4">
                 {post.data.tags.slice(0, 3).map(tag => (
-                  <span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-600">#{tag}</span>
+                  <span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">#{tag}</span>
                 ))}
               </div>
-              <a href={`/blog/${post.slug}`} class="text-accent-blue font-medium hover:underline inline-flex items-center gap-2">
+              <a href={`/blog/${post.slug}`} class="text-yellow-600 font-medium hover:text-yellow-800 inline-flex items-center gap-2 group-hover:gap-3 transition-all">
                 อ่านเพิ่มเติม →
               </a>
             </div>
@@ -117,7 +167,9 @@ const formatDate = (date: Date) => {
       
       <!-- No Results Message -->
       <div id="no-results" class="hidden text-center py-16">
-        <div class="text-6xl mb-4">🔍</div>
+        <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+        </svg>
         <h3 class="text-2xl font-bold mb-2">ไม่พบบทความที่ค้นหา</h3>
         <p class="text-gray-600">ลองค้นหาด้วยคำอื่นหรือเลือกหมวดหมู่อื่น</p>
       </div>
@@ -125,12 +177,12 @@ const formatDate = (date: Date) => {
   </section>
 
   <!-- Tags Cloud -->
-  <section class="py-12 bg-white">
+  <section class="reveal py-12 bg-white">
     <div class="container mx-auto px-4 max-w-4xl">
       <h3 class="text-2xl font-bold mb-6 text-center">หัวข้อที่น่าสนใจ</h3>
       <div class="flex flex-wrap gap-3 justify-center">
         {tags.map(tag => (
-          <a href={`/blog?tag=${tag}`} class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 hover:bg-primary hover:text-white transition">
+          <a href={`/blog?tag=${tag}`} class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 hover:bg-yellow-500 hover:text-white transition">
             #{tag}
           </a>
         ))}
@@ -138,21 +190,24 @@ const formatDate = (date: Date) => {
     </div>
   </section>
 
-  <!-- CTA Section -->
+  <!-- CTA Section - Always Yellow -->
-  <section class="py-16 gradient-ai text-white">
+  <section id="cta" class="reveal py-20 bg-primary">
     <div class="container mx-auto px-4 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-6">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
         พร้อมเริ่มต้น Digital Transformation แล้วหรือยัง?
       </h2>
-      <p class="text-xl mb-8 max-w-2xl mx-auto">
+      <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
         ปรึกษาผู้เชี่ยวชาญของเราฟรี เราพร้อมช่วยคุณวางกลยุทธ์ที่เหมาะกับธุรกิจ
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="/contact-us" class="bg-white text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-lg inline-flex items-center justify-center gap-2">
+        <a href="/contact-us" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
-          📞 ติดต่อเรา
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+          </svg>
+          ติดต่อเรา
         </a>
-        <a href="/ai-strategy-consult" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-primary transition inline-flex items-center justify-center gap-2">
+        <a href="/web-development" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
-          ปรึกษาผู้เชี่ยวชาญ
+          ดูบริการ
         </a>
       </div>
     </div>
@@ -170,10 +225,10 @@ const formatDate = (date: Date) => {
     btn.addEventListener('click', () => {
       // Update active state
       categoryBtns.forEach(b => {
-        b.classList.remove('active', 'bg-primary', 'text-white');
+        b.classList.remove('active', 'bg-yellow-500', 'text-white');
         b.classList.add('bg-gray-100', 'text-gray-700');
       });
-      btn.classList.add('active', 'bg-primary', 'text-white');
+      btn.classList.add('active', 'bg-yellow-500', 'text-white');
       btn.classList.remove('bg-gray-100', 'text-gray-700');
       
       const category = btn.getAttribute('data-category');
@@ -184,6 +239,7 @@ const formatDate = (date: Date) => {
         const cardCategory = card.getAttribute('data-category');
         if (category === 'all' || cardCategory === category) {
           (card as HTMLElement).style.display = 'block';
+          (card as HTMLElement).style.animation = 'fadeInUp 0.5s ease forwards';
           visibleCount++;
         } else {
           (card as HTMLElement).style.display = 'none';
@@ -250,10 +306,14 @@ const formatDate = (date: Date) => {
     overflow: hidden;
   }
   
-  .line-clamp-3 {
+  @keyframes fadeInUp {
-    display: -webkit-box;
+    from {
-    -webkit-line-clamp: 3;
+      opacity: 0;
-    -webkit-box-orient: vertical;
+      transform: translateY(20px);
-    overflow: hidden;
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 </style>

src/pages/contact-us.astro

@@ -2,105 +2,170 @@
 import Layout from '../layouts/Layout.astro'
 ---
 
-<Layout title="Contact Us | MoreminiMore Co.,Ltd.">
+<Layout title="ติดต่อเรา | MoreMiniMore - รับทำเว็บไซต์ SEO AI Chatbot">
-  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
+  
-    <div class="container mx-auto px-4">
+  <!-- Hero Section - Yellow Theme -->
-      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
+  <section id="hero" class="reveal relative overflow-hidden min-h-[40vh] flex items-center">
+    <!-- Animated Background - Yellow theme -->
+    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600">
+      <!-- Floating Shapes -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-yellow-300/20 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-yellow-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Floating dots -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 2s;"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-16">
+      <div class="max-w-4xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
           ติดต่อเรา
         </h1>
-      <p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
+        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
-        คุณสามารถติดต่อเราได้หลายช่องทาง พร้อมข้อมูลเบื้องต้น กรอกแบบฟอร์ม
+          พร้อมให้คำปรึกษาและช่วยเหลือคุณ ติดต่อได้หลายช่องทาง
         </p>
-      
-      <div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
-        <!-- Contact Info -->
-        <div class="space-y-8">
-          <div class="bg-white p-8 rounded-lg shadow-md">
-            <h2 class="text-2xl font-bold mb-6 text-secondary">ช่องทางติดต่อ</h2>
-            <div class="space-y-6">
-              <div class="flex items-start gap-4">
-                <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📧</div>
-               <div>
-                 <h3 class="font-bold mb-1">อีเมล</h3>
-                 <a href="mailto:contact@moreminimore.com" class="text-gray-700 hover:text-primary transition">contact@moreminimore.com</a>
-               </div>
-              </div>
-              <div class="flex items-start gap-4">
-                <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📞</div>
-               <div>
-                 <h3 class="font-bold mb-1">โทรศัพท์</h3>
-                 <a href="tel:0809955945" class="text-gray-700 hover:text-primary transition">080-995-5945</a>
-               </div>
-              </div>
-              <div class="flex items-start gap-4">
-                <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center">
-                  <img src="/icons/social/line.svg" alt="LINE" class="w-6 h-6" />
-                </div>
-                <div>
-                  <h3 class="font-bold mb-1">Line</h3>
-                  <a href="#" class="text-gray-700 hover:text-primary transition">@moreminimore</a>
-                </div>
-              </div>
-              <div class="flex items-start gap-4">
-                <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center">
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
-                  </svg>
-                </div>
-                <div>
-                  <h3 class="font-bold mb-1">Social Media</h3>
-                  <div class="flex gap-3 mt-2">
-                    <!-- Facebook -->
-                    <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-primary transition" aria-label="Facebook">
-                      <img src="/icons/social/facebook.svg" alt="Facebook" class="w-6 h-6" />
-                    </a>
-                    <!-- Twitter / X -->
-                    <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-primary transition" aria-label="Twitter">
-                      <img src="/icons/social/x.svg" alt="X (Twitter)" class="w-6 h-6" />
-                    </a>
-                    <!-- LinkedIn -->
-                    <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-primary transition" aria-label="LinkedIn">
-                      <img src="/icons/social/linkedin.svg" alt="LinkedIn" class="w-6 h-6" />
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <div class="bg-black text-white p-8 rounded-lg">
-            <h3 class="text-xl font-bold mb-4">เวลาทำการ</h3>
-            <p class="text-gray-300">จันทร์ - ศุกร์: 9:00 - 18:00 น.</p>
-            <p class="text-gray-300">เสาร์ - อาทิตย์: ตามนัดหมาย</p>
-          </div>
-        </div>
-        
-        <!-- Contact Form Placeholder -->
-        <div class="bg-white p-8 rounded-lg shadow-md">
-          <h2 class="text-2xl font-bold mb-6 text-secondary">ส่งข้อความถึงเรา</h2>
-          <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-            <p class="text-gray-500 mb-4">📝 แบบฟอร์มติดต่อ</p>
-            <p class="text-gray-400 text-base mb-4">
-              ในระหว่างนี้ คุณสามารถติดต่อเราผ่านช่องทางด้านซ้าย
-            </p>
-            <a href="mailto:contact@moreminimore.com" class="bg-primary text-black px-6 py-3 rounded-full font-bold hover:bg-primary-hover transition inline-block">
-              ส่งอีเมล
-            </a>
-          </div>
-        </div>
       </div>
     </div>
   </section>
 
-  <section class="py-20 bg-gray-100">
+  <!-- Contact Methods -->
-    <div class="container mx-auto px-4 text-center">
+  <section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
-      <h2 class="text-3xl font-bold mb-8 text-secondary">สนใจรับปรึกษาฟรี?</h2>
+    <div class="container mx-auto px-4">
-      <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
-        เราพร้อมให้คำปรึกษาเบื้องต้น โดยไม่มีค่าใช้จ่าย
+        
-      </p>
+        <!-- Phone -->
-      <a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
+        <a href="tel:0809955945" class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
-        นัดคุยกับเรา
+          <div class="w-14 h-14 bg-yellow-500 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-yellow-400 transition-colors">
+            <svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold mb-2 text-gray-800">โทรศัพท์</h3>
+          <p class="text-xl font-bold text-orange-600">080-995-5945</p>
+          <p class="text-sm text-gray-500 mt-2">จันทร์-ศุกร์ 9:00-18:00 น.</p>
         </a>
+
+        <!-- LINE -->
+        <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-14 h-14 bg-[#06C755] rounded-2xl flex items-center justify-center mb-4 group-hover:bg-[#05B548] transition-colors">
+            <img src="/icons/social/line.svg" alt="LINE" class="w-7 h-7" />
+          </div>
+          <h3 class="text-lg font-bold mb-2 text-gray-800">LINE</h3>
+          <p class="text-xl font-bold text-[#06C755]">@moreminimore</p>
+          <p class="text-sm text-gray-500 mt-2">คลิกเพื่อเพิ่มเพื่อน</p>
+        </a>
+
+        <!-- Email -->
+        <a href="mailto:contact@moreminimore.com" class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-14 h-14 bg-blue-500 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-blue-400 transition-colors">
+            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold mb-2 text-gray-800">อีเมล</h3>
+          <p class="text-base font-bold text-blue-700 break-all">contact@moreminimore.com</p>
+          <p class="text-sm text-gray-500 mt-2">ตอบกลับภายใน 24 ชม.</p>
+        </a>
+
+        <!-- Facebook -->
+        <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-14 h-14 bg-blue-600 rounded-2xl flex items-center justify-center mb-4 group-hover:bg-blue-500 transition-colors">
+            <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold mb-2 text-gray-800">Facebook</h3>
+          <p class="text-lg font-bold text-blue-700">@moreminimore</p>
+          <p class="text-sm text-gray-500 mt-2">Message ได้ตลอด 24 ชม.</p>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Social Media Section -->
+  <section class="reveal py-16 bg-white">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-2xl font-bold mb-8 text-gray-800">ติดตามเราได้ที่</h2>
+      <div class="flex justify-center gap-6">
+        <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center hover:bg-yellow-500 hover:text-white transition-all group">
+          <svg class="w-6 h-6 text-gray-700 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+          </svg>
+        </a>
+        <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center hover:bg-[#06C755] hover:text-white transition-all group">
+          <svg class="w-6 h-6 text-gray-700 group-hover:text-white" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 17.703c-.29.29-.767.348-1.116.174l-2.115-1.053c-.582.35-1.223.543-1.917.543-.695 0-1.335-.193-1.917-.543l-2.115 1.053c-.349.174-.826.116-1.116-.174-.29-.29-.348-.767-.174-1.116l1.053-2.115c-.35-.582-.543-1.223-.543-1.917 0-.695.193-1.335.543-1.917L5.35 8.51c-.174-.349-.116-.826.174-1.116.29-.29.767-.348 1.116-.174l2.115 1.053c.582-.35 1.223-.543 1.917-.543.695 0 1.335.193 1.917.543l2.115-1.053c.349-.174.826-.116 1.116.174.29.29.348.767.174 1.116l-1.053 2.115c.35.582.543 1.223.543 1.917 0 .695-.193 1.335-.543 1.917l1.053 2.115c.174.349.116.826-.174 1.116z"/>
+          </svg>
+        </a>
+        <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center hover:bg-blue-700 hover:text-white transition-all group">
+          <svg class="w-6 h-6 text-gray-700 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24">
+            <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>
+        </a>
+        <a href="https://www.youtube.com/@moreminimore" target="_blank" rel="noopener noreferrer" class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center hover:bg-red-600 hover:text-white transition-all group">
+          <svg class="w-6 h-6 text-gray-700 group-hover:text-white" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Working Hours -->
+  <section class="reveal py-16 bg-gray-50">
+    <div class="container mx-auto px-4 max-w-2xl text-center">
+      <div class="bg-white rounded-2xl p-8 shadow-lg">
+        <h2 class="text-2xl font-bold mb-6 text-gray-800">เวลาทำการ</h2>
+          <div class="space-y-3">
+          <div class="flex justify-between items-center py-2 border-b">
+            <span class="text-gray-600">จันทร์ - ศุกร์</span>
+            <span class="font-bold text-orange-600">09:00 - 18:00 น.</span>
+          </div>
+          <div class="flex justify-between items-center py-2 border-b">
+            <span class="text-gray-600">เสาร์</span>
+            <span class="font-bold text-orange-600">10:00 - 16:00 น.</span>
+          </div>
+          <div class="flex justify-between items-center py-2">
+            <span class="text-gray-600">อาทิตย์</span>
+            <span class="font-bold text-gray-400">ปิดทำการ</span>
+          </div>
+        </div>
+        <p class="text-sm text-gray-500 mt-6">* นอกเหนือเวลาทำการ สามารถติดต่อทาง LINE ได้ตลอด 24 ชั่วโมง</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section - Always Yellow -->
+  <section id="cta" class="reveal py-20 bg-primary">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
+        พร้อมเริ่มต้นทำงานกับเราแล้วหรือยัง?
+      </h2>
+      <p class="text-xl mb-8 max-w-2xl mx-auto text-black">
+        ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยเหลือคุณ
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="tel:0809955945" class="group bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
+          <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+          </svg>
+          080-995-5945
+        </a>
+        <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
+          <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
+          ติดต่อทาง LINE
+        </a>
+      </div>
     </div>
   </section>
 </Layout>

src/pages/faq.astro

@@ -1,6 +1,5 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import Breadcrumbs from '../components/Breadcrumbs.astro'
 
 const faqs = [
   {
@@ -29,7 +28,7 @@ const faqs = [
     questions: [
       {
         q: 'เริ่มต้นใช้บริการอย่างไร?',
-        a: 'ติดต่อเรามาปรึกษาฟรี! เราจะพูดคุยความต้องการ ธุรกิจ และเป้าหมายของคุณ จากนั้นจึงแนะนำโซลูชันที่เหมาะสมที่สุด'
+        a: 'ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราจะพูดคุยความต้องการ ธุรกิจ และเป้าหมายของคุณ จากนั้นจึงแนะนำโซลูชันที่เหมาะสมที่สุด'
       },
       {
         q: 'ใช้เวลานานแค่ไหนถึงจะเห็นผล?',
@@ -50,14 +49,14 @@ const faqs = [
     questions: [
       {
         q: 'มี Package ไหนบ้าง?',
-        a: 'เรามีหลาย Package ตั้งแต่เริ่มต้นหลักหมื่น ไปจนถึงโครงการใหญ่ ขึ้นอยู่กับความต้องการและขอบเขตงาน ติดต่อเรามาประเมินราคาฟรี!'
+        a: 'เรามีหลาย Package ตั้งแต่เริ่มต้นหลักพัน ไปจนถึงโครงการใหญ่ ขึ้นอยู่กับความต้องการและขอบเขตงาน นอกจากนี้ยังมีบริการที่คิดเป็นรายเดือน (ที่ปรึกษา) ที่จะช่วยพัฒนาระบบได้เรื่อย ๆ ไม่จำกัดด้วย โดยราคาจะขึ้นอยู่กับขอบเขตและความยากของงาน เหมาะสำหรับลูกค้าที่มีความต้องการเปลี่ยนแปลงตลอดเวลา'
       },
       {
         q: 'มีบริการแบบรายเดือนไหม?',
         a: 'มี! บริการบางอย่างเช่น SEO, Marketing Automation มีแบบรายเดือน ซึ่งรวมถึงการดูแลอย่างต่อเนื่องและปรับปรุงระบบ'
       },
       {
-        q: '付款方式 มีอะไรบ้าง?',
+        q: 'ชำระเงินได้อย่างไร?',
         a: 'รับชำระเงินผ่านการโอนเงินธนาคาร บริษัทออกใบเสร็จและใบกำกับภาษีให้ได้'
       }
     ]
@@ -82,32 +81,61 @@ const faqs = [
 ]
 ---
 
-<Layout title="คำถามที่พบบ่อย | MoreminiMore">
+<Layout title="คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
-  <Breadcrumbs currentPage={{ href: '/faq', title: 'คำถามที่พบบ่อย' }} />
   
-  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
+  <!-- Hero Section - Purple/Blue Theme -->
-    <div class="container mx-auto px-4">
+  <section id="hero" class="reveal relative overflow-hidden min-h-[40vh] flex items-center">
-      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
+    <!-- Animated Background - Purple/Blue for FAQ -->
+    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-indigo-600 to-purple-800">
+      <!-- Floating Shapes -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-indigo-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Floating dots -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 2s;"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-16">
+      <div class="max-w-4xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
           คำถามที่พบบ่อย
         </h1>
-      <p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
+        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
           รวบรวมคำถามที่ลูกค้าถามบ่อย พร้อมคำตอบที่ชัดเจน
         </p>
+      </div>
+    </div>
+  </section>
 
-      {faqs.map((category) => (
+  <!-- FAQ Content Section -->
-        <div class="max-w-4xl mx-auto mb-12">
+  <section id="faq" class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
-          <h2 class="text-2xl font-bold mb-6 text-secondary flex items-center gap-3">
+    <div class="container mx-auto px-4">
-            <span class="w-2 h-8 bg-primary rounded-full"></span>
+      {faqs.map((category, catIndex) => (
+        <div class="reveal max-w-4xl mx-auto mb-12">
+          <h2 class="text-2xl font-bold mb-6 text-purple-700 flex items-center gap-3">
+            <span class="w-2 h-8 bg-purple-600 rounded-full"></span>
             {category.category}
           </h2>
           <div class="space-y-4">
-            {category.questions.map((faq) => (
+            {category.questions.map((faq, index) => (
-              <details class="group bg-white rounded-lg shadow-md overflow-hidden">
+              <details class="group bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300">
-                <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
+                <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg text-gray-900 hover:bg-purple-50 transition">
                   <span>{faq.q}</span>
-                  <span class="text-2xl group-open:rotate-45 transition">+</span>
+                  <svg class="w-5 h-5 text-purple-700 group-open:rotate-45 transition transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                  </svg>
                 </summary>
-                <div class="px-6 pb-6 text-gray-700 leading-relaxed">
+                <div class="px-6 pb-6 text-gray-700 leading-relaxed border-t border-gray-100">
                   {faq.a}
                 </div>
               </details>
@@ -116,18 +144,26 @@ const faqs = [
         </div>
       ))}
 
-      <!-- CTA Section -->
+      <!-- CTA Section - Yellow with proper contrast -->
-      <div class="max-w-3xl mx-auto text-center mt-16">
+      <div id="cta" class="reveal max-w-3xl mx-auto text-center mt-16 py-12 bg-primary rounded-2xl">
-        <h2 class="text-2xl font-bold mb-4 text-secondary">ยังมีคำถามอื่นอีก?</h2>
+        <h2 class="text-2xl md:text-3xl font-bold mb-4 text-black">
-        <p class="text-lg text-gray-700 mb-8">
+          ยังมีคำถามอื่นอีก?
+        </h2>
+        <p class="text-lg text-gray-800 mb-8">
           ติดต่อเรามาได้เลย ยินดีให้คำปรึกษาฟรี!
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <a href="tel:0809955945" class="btn-brand text-lg">
+          <a href="tel:0809955945" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors inline-flex items-center justify-center">
-            📞 080-995-5945
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+            </svg>
+            080-995-5945
           </a>
-          <a href="/contact-us" class="btn-secondary text-lg">
+          <a href="/contact-us" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
-            💬 ติดต่อเรา
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+            </svg>
+            ติดต่อเรา
           </a>
         </div>
       </div>

src/pages/marketing-automation.astro

@@ -3,15 +3,15 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout 
-  title="ตั้งค่าระบบ Marketing Automation | MoreminiMore - ส่งข้อความอัตโนมัติ เพิ่มยอดขาย"
+  title="ระบบ Marketing Automation | MoreminiMore - การตลาดอัตโนมัติ + GEO พร้อม AI วิเคราะห์"
-  description="บริการตั้งค่าระบบ Marketing Automation สำหรับ SME ไทย ส่งอีเมล์ ข้อความ LINE อัตโนมัติ ดูแลลูกค้าเก่า ลดงานซ้ำซ้อน ประหยัดเวลา"
+  description="บริการ Marketing Automation สำหรับ SME ไทย การตลาดอัตโนมัติทุกช่องทาง Website, Social Media, Ads, Email พร้อม GEO รองรับ AI Search และ AI วิเคราะห์"
 >
   <!-- Schema.org Structured Data -->
   <script type="application/ld+json" set:html={JSON.stringify({
     "@context": "https://schema.org",
     "@type": "LocalBusiness",
     "name": "MoreminiMore Co.,Ltd.",
-    "description": "บริการตั้งค่าระบบ Marketing Automation สำหรับ SME ไทย",
+    "description": "บริการ Marketing Automation สำหรับ SME ไทย",
     "telephone": "+66809955945",
     "email": "contact@moreminimore.com",
     "url": "https://www.moreminimore.com/marketing-automation",
@@ -23,298 +23,743 @@ import Layout from '../layouts/Layout.astro'
       "postalCode": "74120",
       "addressCountry": "TH"
     },
+    "geo": {
+      "@type": "GeoCoordinates",
+      "latitude": 13.5497,
+      "longitude": 100.4167
+    },
     "openingHours": "Mo-Fr 09:00-18:00",
     "priceRange": "$$",
-    "serviceType": ["Marketing Automation", "Email Marketing", "LINE Marketing"]
+    "serviceType": ["Marketing Automation", "Digital Marketing", "AI Analytics", "GEO Optimization"]
   })} />
 
-  <!-- Hero Section -->
+  <!-- BreadcrumbList Schema -->
-  <section class="relative py-24 gradient-primary text-white overflow-hidden">
+  <script type="application/ld+json" set:html={JSON.stringify({
-    <div class="absolute inset-0 opacity-20">
+    "@context": "https://schema.org",
-      <div class="absolute top-20 left-10 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
+    "@type": "BreadcrumbList",
-      <div class="absolute bottom-10 right-10 w-96 h-96 bg-accent-blue rounded-full mix-blend-overlay filter blur-3xl animate-float-delayed"></div>
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "หน้าแรก",
+        "item": "https://www.moreminimore.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Marketing Automation",
+        "item": "https://www.moreminimore.com/marketing-automation"
+      }
+    ]
+  })} />
+
+  <!-- HowTo Schema for Process -->
+  <script type="application/ld+json" set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    "name": "ขั้นตอนการทำ Marketing Automation",
+    "description": "กระบวนการทำ Marketing Automation ตั้งแต่วิเคราะห์จนถึงปรับปรุง",
+    "step": [
+      {
+        "@type": "HowToStep",
+        "name": "วิเคราะห์",
+        "text": "วิเคราะห์ธุรกิจและการตลาดของลูกค้า"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "วางแผน",
+        "text": "วาง Content Plan และ Strategy การตลาด"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "ตั้งค่า",
+        "text": "ติดตั้งระบบ Automation ทุกช่องทาง"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "วิเคราะห์",
+        "text": "AI วิเคราะห์ผลลัพธ์และปรับปรุงอย่างต่อเนื่อง"
+      }
+    ]
+  })} />
+
+  <!-- GEO FAQ Schema -->
+  <script type="application/ld+json" set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    "mainEntity": [
+      {
+        "@type": "Question",
+        "name": "Marketing Automation ต่างจาก AI Automation อย่างไร?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "AI Automation เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม การประมวลผลข้อมูล Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "ราคารวมค่าโฆษณาด้วยไหม?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "ต้องมีความรู้ด้านเทคนิคไหม?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "AI วิเคราะห์อะไรบ้าง?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "AI วิเคราะห์พฤติกรรมลูกค้า หาช่องว่างทางการตลาด แนะนำวิธีปรับปรุง วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "GEO คืออะไร?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI"
+        }
+      }
+    ]
+  })} />
+
+  <!-- Hero Section - Green Theme with Fast Animations -->
+  <section id="hero" class="relative overflow-hidden min-h-[60vh] flex items-center">
+    <!-- Hero Image Background -->
+    <div class="absolute inset-0">
+      <img 
+        src="/images/hero/marketing-automation-hero.jpg" 
+        alt="การตลาดอัตโนมัติสำหรับธุรกิจ SME"
+        class="w-full h-full object-cover"
+      />
+      <div class="absolute inset-0 bg-gradient-to-br from-green-500/90 via-green-600/85 to-green-700/90"></div>
+      <!-- Floating Shapes Overlay -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-green-300/10 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-green-200/10 rounded-full blur-2xl animate-float-1" style="animation-delay: 0.75s;"></div>
     </div>
     
-    <div class="container mx-auto px-4 relative z-10">
+    <!-- Floating dots -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 1s;"></div>
+      <div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style="animation-delay: 0.5s;"></div>
+      <div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-16">
       <div class="max-w-4xl mx-auto text-center">
-        <div class="text-7xl mb-6">📧</div>
+        <!-- Badge -->
-        <h1 class="text-4xl md:text-6xl font-bold mb-8">
+        <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
-          Marketing Automation
+          <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+          <span class="text-sm font-medium text-white/90">บริการ Marketing Automation ครบวงจร</span>
+        </div>
+        
+        <!-- Main Headline -->
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style="animation-delay: 0.1s;">
+          การตลาดอัตโนมัติ<br/>
+          <span class="text-white">ทุกช่องทาง</span><br/>
+          พร้อม AI วิเคราะห์
         </h1>
-        <p class="text-2xl text-gray-100 mb-10">
+        
-          ระบบส่งข้อความอัตโนมัติ ดูแลลูกค้า ส่งข่าวสาร ลดงานซ้ำซ้อน ประหยัดเวลา
+        <!-- Subheadline -->
+        <p class="text-lg md:text-xl text-white/80 mb-10 max-w-2xl mx-auto leading-relaxed animate-fade-in-up" style="animation-delay: 0.2s;">
+          ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google<br/>
+          ครอบคลุม Website, Social Media, Ads และ Email<br/>
+          <span class="text-purple-200 font-medium">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
         </p>
-        <div class="flex flex-col sm:flex-row gap-5 justify-center">
+        
-          <a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
+        <!-- CTAs -->
-            📞 080-995-5945
+        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up" style="animation-delay: 0.3s;">
+          <a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
+            <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+            </svg>
+            โทรหาเรา
           </a>
-          <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-secondary transition shadow-xl inline-flex items-center justify-center gap-2">
+          <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-black/20 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
-            💬 ติดต่อผ่าน Line
+            <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
+            สอบถามราคา
           </a>
         </div>
+        
+        <!-- Trust Badges -->
+        <div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style="animation-delay: 0.4s;">
+          <div class="flex flex-wrap justify-center gap-6 text-white/80 text-sm">
+            <span class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              ปรึกษาฟรี
+            </span>
+            <span class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              AI วิเคราะห์
+            </span>
+            <span class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              ราคาเหมาะสม
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- Service Description -->
+  <style>
-  <section class="py-20 bg-white">
+    /* Floating animations */
-    <div class="container mx-auto px-4 max-w-5xl">
+    @keyframes float-1 {
-      <h2 class="text-3xl font-bold mb-8 text-center text-secondary">บริการตั้งค่าระบบ Marketing Automation</h2>
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      33% { transform: translateY(-20px) rotate(2deg); }
+      66% { transform: translateY(-10px) rotate(-1deg); }
+    }
     
-      <div class="prose prose-lg max-w-none">
+    @keyframes float-2 {
-        <p class="text-xl text-gray-600 mb-8">
+      0%, 100% { transform: translateY(0) rotate(0deg); }
-          Marketing Automation คือการใช้ซอฟต์แวร์ช่วยส่งข้อความและดูแลลูกค้าอัตโนมัติ แทนที่คุณจะต้องนั่งส่งข้อความทีละคน เครื่องมือนี้จะช่วยส่งให้คุณอัตโนมัติ ทำให้คุณมีเวลาทำงานอื่นๆ ที่สำคัญกว่า เหมาะสำหรับธุรกิจที่ต้องการดูแลลูกค้าเก่าให้ดีขึ้นและเพิ่มโอกาสในการขายซ้ำ
+      33% { transform: translateY(-15px) rotate(-2deg); }
+      66% { transform: translateY(-25px) rotate(1deg); }
+    }
+    
+    @keyframes float-3 {
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      33% { transform: translateY(-25px) rotate(1deg); }
+      66% { transform: translateY(-15px) rotate(-2deg); }
+    }
+    
+    @keyframes float-dot-1 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-15px); opacity: 0.4; }
+    }
+    
+    @keyframes float-dot-2 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-10px); opacity: 0.5; }
+    }
+    
+    @keyframes float-dot-3 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-20px); opacity: 0.4; }
+    }
+    
+    .animate-float-1 { animation: float-1 3s ease-in-out infinite; }
+    .animate-float-2 { animation: float-2 4s ease-in-out infinite; }
+    .animate-float-3 { animation: float-3 3.5s ease-in-out infinite; }
+    .animate-float-dot-1 { animation: float-dot-1 2s ease-in-out infinite; }
+    .animate-float-dot-2 { animation: float-dot-2 2.5s ease-in-out infinite; }
+    .animate-float-dot-3 { animation: float-dot-3 1.8s ease-in-out infinite; }
+    
+    .animate-fade-in-up {
+      animation: fadeInUp 0.6s ease-out forwards;
+      opacity: 0;
+    }
+    
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
+
+  <!-- What We Do -->
+  <section class="py-20 bg-gradient-to-b from-gray-50 to-white reveal">
+    <div class="container mx-auto px-4 max-w-6xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        เราทำอะไรบ้าง?
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
+        การตลาดอัตโนมัติครบทุกช่องทาง พร้อม AI วิเคราะห์ให้คุณ
       </p>
       
-        <h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">สิ่งที่คุณจะได้รับ</h3>
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-        <ul class="space-y-4 mb-8">
+        <!-- Website + SEO -->
-          <li class="flex items-start gap-4">
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
-            <span class="text-primary text-2xl">✓</span>
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
-            <span><strong>ระบบส่งอีเมล์อัตโนมัติ:</strong> ส่งอีเมล์ตอบรับ ขอบคุณ ข่าวสาร หรือโปรโมชันอัตโนมัติเมื่อลูกค้าทำอะไรบางอย่าง</span>
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          </li>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
-          <li class="flex items-start gap-4">
+            </svg>
-            <span class="text-primary text-2xl">✓</span>
+          </div>
-            <span><strong>LINE Messaging อัตโนมัติ:</strong> ส่งข้อความ LINE ให้ลูกค้าอัตโนมัติ ทั้งข้อความต้อนรับ ข่าวสาร และโปรโมชันพิเศษ</span>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">Website + SEO</h3>
-          </li>
+          <ul class="text-gray-600 text-sm space-y-2">
-          <li class="flex items-start gap-4">
+            <li>• สร้างบทความด้วย AI</li>
-            <span class="text-primary text-2xl">✓</span>
+            <li>• SEO ติด Google อันดับ</li>
-            <span><strong>แบ่งกลุ่มลูกค้าอัตโนมัติ:</strong> จัดกลุ่มลูกค้าตามพฤติกรรม เช่น ลูกค้าใหม่ ลูกค้าเก่า ลูกค้าที่ยังไม่ซื้อซ้ำ</span>
+            <li>• วิเคราะห์คีย์เวิร์ด</li>
-          </li>
+          </ul>
-          <li class="flex items-start gap-4">
+        </div>
-            <span class="text-primary text-2xl">✓</span>
+
-            <span><strong>ติดตามลูกค้าที่ยังไม่ซื้อ:</strong> ระบบจะส่งข้อความเตือนลูกค้าที่ยังไม่กลับมาซื้อซ้ำโดยอัตโนมัติ</span>
+        <!-- GEO -->
-          </li>
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-green-200">
-          <li class="flex items-start gap-4">
+          <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
-            <span class="text-primary text-2xl">✓</span>
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <span><strong>รายงานผลตอบแทน:</strong> ดูได้ว่าอีเมล์/ข้อความที่ส่งไปมีประสิทธิภาพแค่ไหน มีคนเปิดดู คลิก หรือซื้อของกี่คน</span>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-          </li>
+            </svg>
-          <li class="flex items-start gap-4">
+          </div>
-            <span class="text-primary text-2xl">✓</span>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">GEO</h3>
-            <span><strong>Workflow การขาย:</strong> สร้างกระบวนการขายอัตโนมัติ ตั้งแต่ลูกค้าสนใจจนถึงซื้อของ</span>
+          <ul class="text-gray-600 text-sm space-y-2">
-          </li>
+            <li>• ปรากฏใน AI Search</li>
+            <li>• ติด ChatGPT, Perplexity</li>
+            <li>• Schema markup ครบ</li>
+          </ul>
+        </div>
+
+        <!-- Social Media -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">Social Media</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• โพสต์ตาม Content Plan</li>
+            <li>• Chatbot ตอบคำถาม</li>
+            <li>• วิเคราะห์ Engagement</li>
+          </ul>
+        </div>
+
+        <!-- Ads -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">โฆษณา</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• Google Ads</li>
+            <li>• Facebook Ads</li>
+            <li>• บริหารจัดการแทน</li>
+          </ul>
+        </div>
+
+        <!-- Email -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">Email</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• สร้างอีเมล์ด้วย AI</li>
+            <li>• ตอบกลับอัตโนมัติ</li>
+            <li>• วิเคราะห์ผล</li>
           </ul>
         </div>
       </div>
+    </div>
   </section>
 
-  <!-- Process Section -->
+  <!-- Why Choose Us -->
-  <section class="py-20 bg-gray-50">
+  <section class="py-20 bg-white reveal">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-6xl">
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">กระบวนการตั้งค่าระบบ</h2>
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ทำไมต้องเลือกเรา?
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
+        เรามีความเชี่ยวชาญในการทำการตลาดอัตโนมัติให้ธุรกิจของคุณ
+      </p>
       
-      <div class="grid md:grid-cols-4 gap-6">
+      <div class="grid md:grid-cols-3 gap-8">
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+        <!-- Benefit 1 -->
-          <div class="text-4xl mb-3">🔍</div>
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
-          <h4 class="font-bold mb-2">1. วิเคราะห์</h4>
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
-          <p class="text-gray-600 text-sm">วิเคราะห์ธุรกิจและกลุ่มเป้าหมาย กำหนดเป้าหมายการตลาด</p>
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+            </svg>
           </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+          <h3 class="text-xl font-bold mb-3 text-gray-900">AI วิเคราะห์อัจฉริยะ</h3>
-          <div class="text-4xl mb-3">⚙️</div>
+          <p class="text-gray-600">
-          <h4 class="font-bold mb-2">2. ตั้งค่า</h4>
+            AI วิเคราะห์ข้อมูลและหาช่องว่างทางการตลาดให้คุณ พร้อมแนะนำวิธีปรับปรุง
-          <p class="text-gray-600 text-sm">ตั้งค่าระบบ สร้าง Template ข้อความ กำหนดเงื่อนไขการส่ง</p>
+          </p>
         </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+
-          <div class="text-4xl mb-3">🤖</div>
+        <!-- Benefit 2 -->
-          <h4 class="font-bold mb-2">3. เชื่อมต่อ</h4>
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
-          <p class="text-gray-600 text-sm">เชื่อมต่อกับ LINE, Email, Website หรือระบบที่มีอยู่</p>
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
           </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
+          <h3 class="text-xl font-bold mb-3 text-gray-900">อัตโนมัติครบวงจร</h3>
-          <div class="text-4xl mb-3">📈</div>
+          <p class="text-gray-600">
-          <h4 class="font-bold mb-2">4. ติดตาม</h4>
+            ระบบทำงานอัตโนมัติทุกช่องทาง ตั้งแต่ Website จนถึง Email ไม่ต้องทำเอง
-          <p class="text-gray-600 text-sm">ดูผลลัพธ์และปรับปรุงให้ดีขึ้นอย่างต่อเนื่อง</p>
+          </p>
+        </div>
+
+        <!-- Benefit 3 -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">วัดผลได้ชัดเจน</h3>
+          <p class="text-gray-600">
+            ดูผลการตลาดได้ตลอดเวลา รู้ว่าอะไรเวิร์ค อะไรไม่เวิร์ค พร้อมปรับปรุง
+          </p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Target Audience -->
-  <section class="py-20 bg-white">
+  <section class="py-20 bg-gray-50 reveal">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-4xl">
-      <div class="bg-gray-light p-8 rounded-2xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
-        <h3 class="text-2xl font-bold mb-6 text-accent-blue text-center">เหมาะสำหรับธุรกิจ</h3>
+        เหมาะกับใคร?
-        <ul class="space-y-3 text-gray-700 max-w-2xl mx-auto">
+      </h2>
-          <li>• ร้านค้าออนไลน์ที่ต้องการดูแลลูกค้าเก่าให้กลับมาซื้อซ้ำ</li>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
-          <li>• ธุรกิจที่มีลูกค้าจำนวนมากและต้องการลดภาระงานดูแลลูกค้าด้วยตนเอง</li>
+        ธุรกิจที่ต้องการเพิ่มประสิทธิภาพการตลาดด้วยระบบอัตโนมัติ
-          <li>• บริษัทที่ต้องการส่งข่าวสารหรือโปรโมชันให้ลูกค้าอย่างสม่ำเสมอ</li>
+      </p>
-          <li>• ผู้ประกอบการที่ต้องการเพิ่มยอดขายซ้ำโดยไม่ต้องทำการตลาดใหม่ทุกครั้ง</li>
+      
-          <li>• ธุรกิจที่ต้องการวัดผลตอบแทนจากการส่งข้อความได้ชัดเจน</li>
+      <div class="grid md:grid-cols-3 gap-6">
-        </ul>
+        <!-- SME -->
+        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 text-center border border-green-200">
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
+          <p class="text-sm text-gray-600">ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายและดูแลลูกค้าได้มากขึ้น</p>
+        </div>
+
+        <!-- Online Store -->
+        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 text-center border border-green-200">
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
+          <p class="text-sm text-gray-600">ธุรกิจ E-commerce ที่ต้องการติดตามลูกค้าและเพิ่มยอดขายซ้ำ</p>
+        </div>
+
+        <!-- Company -->
+        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 text-center border border-green-200">
+          <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900 mb-2">บริษัท / องค์กร</h3>
+          <p class="text-sm text-gray-600">บริษัทที่ต้องการวิเคราะห์ข้อมูลและทำการตลาดอัตโนมัติ</p>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- FAQ Section for AEO -->
+  <!-- Case Studies -->
-  <section class="py-20 bg-gray-50">
+  <section class="py-20 bg-white reveal">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-6xl">
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">คำถามที่พบบ่อย</h2>
+      <!-- Hero Banner Image -->
+      <div class="mb-12 relative rounded-2xl overflow-hidden shadow-2xl">
+        <img 
+          src="/images/illustrations/marketing-automation-1.jpg"
+          alt="ทีมงาน Marketing Automation กำลังวิเคราะห์ข้อมูลการตลาด"
+          class="w-full h-64 md:h-80 object-cover"
+        />
+        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
+        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
+          <h2 class="text-2xl md:text-3xl font-bold text-white mb-2">ตัวอย่างการใช้งานจริง</h2>
+          <p class="text-white/80 text-sm md:text-base">AI วิเคราะห์และการตลาดอัตโนมัติให้ธุรกิจต่าง ๆ มากกว่า 50+ ราย</p>
+        </div>
+      </div>
+      
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <!-- Case 1 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">ร้านค้าออนไลน์</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์พฤติกรรมลูกค้า + แนะนำสินค้าเฉพาะบุคคล + ติดตามตะกร้า</p>
+        </div>
+        <!-- Case 2 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">คลินิก/สถานพยาบาล</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์ pattern คนไม่มานัด + ปรับปรุงการนัดหมาย + เตือนอัจฉริยะ</p>
+        </div>
+        <!-- Case 3 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">ร้านอาหาร</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์ความชอบลูกค้า + ส่งโปรโมชันตรงกลุ่ม + วิเคราะห์ยอดขาย</p>
+        </div>
+        <!-- Case 4 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">โรงเรียน/สถาบันการศึกษา</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์ trend การสมัครเรียน + หาแคมเปญที่ได้ผล + ติดตามผู้ปกครอง</p>
+        </div>
+        <!-- Case 5 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">ธุรกิจบริการ</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์ Customer Lifetime Value + ส่งข้อความตามความถี่ที่เหมาะสม</p>
+        </div>
+        <!-- Case 6 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">อสังหาริมทรัพย์</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์ Lead Scoring + ติดตามลูกค้าที่มีโอกาสซื้อสูง + ส่งข้อมูลตรงใจ</p>
+        </div>
+        <!-- Case 7 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">Startup/SaaS</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์ User Behavior + ปรับ Onboarding ให้ตรงกลุ่ม + ลด churn rate</p>
+        </div>
+        <!-- Case 8 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">Agency/ที่ปรึกษา</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์ผลแคมเปญ + แนะนำวิธีปรับปรุง + รายงานอัตโนมัติ</p>
+        </div>
+        <!-- Case 9 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">Healthcare/Wellness</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์การกลับมาใช้บริการ + ส่งข้อความกระตุ้นให้กลับมา</p>
+        </div>
+        <!-- Case 10 -->
+        <div class="bg-gray-50 rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+            </svg>
+            <h3 class="font-bold text-gray-900">E-learning</h3>
+          </div>
+          <p class="text-gray-600 text-sm">AI วิเคราะห์พฤติกรรมการเรียน + ส่งเนื้อหาที่ตรงความต้องการ + ติดตามความก้าวหน้า</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+
+  <!-- Process -->
+  <section class="py-20 bg-white reveal">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ขั้นตอนการทำงาน
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        กระบวนการทำงานที่ชัดเจน
+      </p>
+      
+      <div class="grid md:grid-cols-4 gap-4">
+        <div class="text-center">
+          <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
+          <h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
+          <p class="text-sm text-gray-600">วิเคราะห์ธุรกิจและการตลาด</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
+          <h3 class="font-bold text-gray-900 mb-2">วางแผน</h3>
+          <p class="text-sm text-gray-600">วาง Content Plan และ Strategy</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
+          <h3 class="font-bold text-gray-900 mb-2">ตั้งค่า</h3>
+          <p class="text-sm text-gray-600">ติดตั้งระบบอัตโนมัติ</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
+          <h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
+          <p class="text-sm text-gray-600">AI วิเคราะห์และปรับปรุง</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section class="py-20 bg-gray-50 reveal">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        คำถามที่พบบ่อย
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        คำถามที่ลูกค้ามักถามเกี่ยวกับบริการ
+      </p>
       
       <div class="space-y-4">
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 1 -->
-          <h4 class="font-bold mb-2 text-lg">Q: Marketing Automation เหมาะกับธุรกิจขนาดเล็กหรือไม่?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">เหมาะมาก! ธุรกิจขนาดเล็กมักมีทรัพยากรจำกัด ระบบ Automation จะช่วยลดงานที่ต้องทำด้วยตนเอง ทำให้คุณมีเวลามุ่งเน้นการขายและพัฒนาธุรกิจได้มากขึ้น แม้มีลูกค้าไม่มากก็เริ่มใช้ได้</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">Marketing Automation ต่างจาก AI Automation อย่างไร?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p><strong>AI Automation</strong> เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม, การประมวลผลข้อมูล<br/>
+              <strong>Marketing Automation</strong> เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 2 -->
-          <h4 class="font-bold mb-2 text-lg">Q: ต้องมีความรู้ด้านเทคนิคมากแค่ไหน?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ไม่ต้องมีความรู้ด้านเทคนิคมาก เราจะช่วยตั้งค่าทุกอย่างให้ คุณเพียงแค่กรอกข้อมูลที่ต้องการส่งและกดส่ง ระบบจะทำทุกอย่างอัตโนมัติ เราจะสอนการใช้งานจนสามารถใช้งานได้ด้วยตนเอง</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">ราคารวมค่าโฆษณาด้วยไหม?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p>ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 3 -->
-          <h4 class="font-bold mb-2 text-lg">Q: สามารถส่ง LINE อัตโนมัติได้หรือไม่?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ได้เลย! เราสามารถเชื่อมต่อกับ LINE Official Account ของคุณได้ ส่งข้อความต้อนรับ ข่าวสาร โปรโมชัน หรือแม้แต่ข้อความอัตโนมัติเมื่อลูกค้าทำรายการบางอย่าง เช่น สั่งซื้อสำเร็จ</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 4 -->
-          <h4 class="font-bold mb-2 text-lg">Q: วัดผลตอบแทนได้หรือไม่?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ได้แน่นอน ระบบจะบันทึกว่ามีคนเปิดอีเมล์/ข้อความกี่คน มีคนคลิกลิงก์กี่คน และมีคนซื้อของกี่คน คุณจะเห็นชัดเลยว่าการตลาดแบบนี้คุ้มค่าหรือไม่ และปรับปรุงให้ดีขึ้นได้</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">AI วิเคราะห์อะไรบ้าง?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p>AI วิเคราะห์พฤติกรรมลูกค้า, หาช่องว่างทางการตลาด, แนะนำวิธีปรับปรุง, วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม</p>
             </div>
+          </details>
         </div>
+
+        <!-- FAQ 5 - GEO -->
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-purple-100">
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">GEO คืออะไร? ต่างจาก SEO อย่างไร?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p><strong>GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews<br/>
+              <strong>SEO</strong> ทำให้ติด Google ปกติ<br/>
+              <strong>GEO</strong> ทำให้ปรากฏในคำตอบของ AI<br/>
+              เราทำทั้งสองอย่างคู่กัน — เนื้อหาที่เขียนดีด้วย AI จะได้ทั้ง Google และ AI Search</p>
             </div>
-  </section>
+          </details>
-
-  <!-- SEO Content Section -->
-  <section class="py-20 bg-gray-light">
-    <div class="container mx-auto px-4">
-      <div class="max-w-4xl mx-auto">
-        <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-secondary">
-          บริการติดตั้งระบบ Marketing Automation เพิ่มยอดขาย ลดงานซ้ำซ้อน
-        </h2>
-        
-        <div class="prose prose-lg mx-auto text-gray-700">
-          <p class="mb-6">
-            <strong class="text-secondary">Marketing Automation</strong> คือระบบอัตโนมัติทางการตลาดที่ช่วยให้ธุรกิจของคุณสามารถสื่อสารกับลูกค้าได้อย่างมีประสิทธิภาพ โดยไม่ต้องทำด้วยตนเองทุกครั้ง ช่วยประหยัดเวลา ลดต้นทุน และเพิ่มยอดขายได้อย่างน่าอัศจรรย์
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">Marketing Automation คืออะไร?</h3>
-          <p class="mb-6">
-            Marketing Automation คือการใช้ซอฟต์แวร์และเทคโนโลยีเพื่อทำงานทางการตลาดที่ซ้ำซ้อนโดยอัตโนมัติ เช่น การส่งอีเมลติดตามลูกค้า การโพสต์โซเชียลมีเดียอัตโนมัติ การส่งโปรโมชั่นวันเกิด หรือการแจ้งเตือนเมื่อมีลูกค้าสนใจสินค้า ระบบจะทำงานตลอด 24 ชั่วโมง แม้ในขณะที่คุณหลับ
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ทำไมธุรกิจ SMEs ต้องใช้ Marketing Automation?</h3>
-          <p class="mb-6">
-            ในยุคที่ลูกค้ามีตัวเลือกมากมาย การสื่อสารที่รวดเร็วและตรงใจลูกค้าคือกุญแจสำคัญ Marketing Automation ช่วยให้คุณสามารถแข่งขันกับบริษัทใหญ่ได้ โดยไม่ต้องเพิ่มพนักงานหรืองบประมาณ
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>ประหยัดเวลา:</strong> ลดงานซ้ำซ้อน 80% ให้ทีมโฟกัสงานสร้างสรรค์</li>
-            <li><strong>เพิ่มยอดขาย:</strong> ติดตามลูกค้าอัตโนมัติ ไม่ปล่อยให้หลุดมือ</li>
-            <li><strong> شخصی سازی:</strong> ส่งข้อความที่ตรงใจลูกค้าแต่ละคน</li>
-            <li><strong>วัดผลได้:</strong> ติดตามผลทุกแคมเปญ รู้ว่าอะไรเวิร์ค</li>
-            <li><strong>ทำงาน 24/7:</strong> ระบบทำงานตลอดเวลา ไม่มีวันหยุด</li>
-            <li><strong>ลดต้นทุน:</strong> ไม่ต้องเพิ่มคน ก็ทำงานได้มากขึ้น</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">บริการของเรา</h3>
-          <p class="mb-6">
-            เราติดตั้งและตั้งค่าระบบ Marketing Automation ครบวงจร:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Email Marketing Automation:</strong> ส่งอีเมลอัตโนมัติตามพฤติกรรมลูกค้า</li>
-            <li><strong>LINE OA Automation:</strong> ตอบกลับและส่งข้อความ LINE อัตโนมัติ</li>
-            <li><strong>Facebook Messenger Automation:</strong> Chatbot ตอบคำถามและติดตามลูกค้า</li>
-            <li><strong>Social Media Posting:</strong> โพสต์อัตโนมัติทุกแพลตฟอร์ม</li>
-            <li><strong>Lead Nurturing:</strong> ดูแลลูกค้าที่มีศักยภาพจนกว่าจะซื้อ</li>
-            <li><strong>Customer Segmentation:</strong> แบ่งกลุ่มลูกค้าตามพฤติกรรม</li>
-            <li><strong>Analytics & Reporting:</strong> รายงานผลและวิเคราะห์ข้อมูล</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">Use Cases ที่นิยม</h3>
-          <p class="mb-6">
-            ตัวอย่างการใช้งานจริงที่ได้ผลดี:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>ร้านค้าออนไลน์:</strong> ส่งอีเมลติดตามลูกค้าที่ทิ้งตะกร้าสินค้า</li>
-            <li><strong>คลินิก:</strong> ส่งนัดหมายอัตโนมัติและเตือนก่อนถึงวันนัด</li>
-            <li><strong>ร้านอาหาร:</strong> ส่งโปรโมชั่นวันเกิดและสะสมแต้มอัตโนมัติ</li>
-            <li><strong>โรงเรียน:</strong> ส่งข้อมูลคอร์สเรียนให้ผู้ปกครองที่สนใจ</li>
-            <li><strong>E-commerce:</strong> แนะนำสินค้าตามประวัติการซื้อ</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ขั้นตอนการทำงาน</h3>
-          <p class="mb-6">
-            เราทำงานอย่างเป็นระบบ เพื่อให้ได้ระบบที่ตรงใจคุณ:
-          </p>
-          <ol class="list-decimal pl-6 mb-6 space-y-2">
-            <li><strong>วิเคราะห์กระบวนการ:</strong> ศึกษางานปัจจุบันและหาจุดที่ automate ได้</li>
-            <li><strong>ออกแบบ Flow:</strong> วางแผนขั้นตอนการทำงานอัตโนมัติ</li>
-            <li><strong>ตั้งค่าระบบ:</strong> ติดตั้งและเชื่อมต่อเครื่องมือต่างๆ</li>
-            <li><strong>ทดสอบ:</strong> ตรวจสอบความถูกต้องของทุก Flow</li>
-            <li><strong>อบรม:</strong> สอนทีมของคุณให้ใช้งานระบบเป็น</li>
-            <li><strong>ติดตามผล:</strong> วัดผลและปรับปรุงอย่างต่อเนื่อง</li>
-          </ol>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">เครื่องมือที่เราใช้</h3>
-          <p class="mb-6">
-            เราเลือกใช้เครื่องมือที่เหมาะสมกับธุรกิจคุณ:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Email:</strong> Mailchimp, SendGrid, ActiveCampaign</li>
-            <li><strong>LINE OA:</strong> LINE Official Account + MyShop</li>
-            <li><strong>Facebook:</strong> Facebook Page + Messenger Platform</li>
-            <li><strong>CRM:</strong> HubSpot, Salesforce, Zoho</li>
-            <li><strong>Analytics:</strong> Google Analytics, Facebook Pixel</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ผลลัพธ์ที่คาดหวัง</h3>
-          <p class="mb-6">
-            ลูกค้าของเราได้รับผลลัพธ์ที่ดีขึ้นอย่างชัดเจน:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li>เปิดอีเมลเพิ่มขึ้น 40-60%</li>
-            <li>อัตราการคลิก (CTR) เพิ่มขึ้น 50-80%</li>
-            <li>ยอดขายจากอีเมลเพิ่มขึ้น 30-50%</li>
-            <li>ลดเวลาทำงานทางการตลาด 70-80%</li>
-            <li>Customer Retention เพิ่มขึ้น 25-40%</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ราคาบริการ</h3>
-          <p class="mb-6">
-            ราคาขึ้นอยู่กับความซับซ้อนของระบบ:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Starter:</strong> 20,000 บาท (Email + 1 Channel)</li>
-            <li><strong>Business:</strong> 50,000 บาท (Email + LINE + Facebook)</li>
-            <li><strong>Enterprise:</strong> 100,000+ บาท (Full Integration + CRM)</li>
-          </ul>
-          <p class="mb-6">
-            มีบริการแบบรายเดือนสำหรับดูแลและปรับปรุงระบบ
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">เริ่มต้นอย่างไร?</h3>
-          <p class="mb-6">
-            หากคุณสนใจระบบ Marketing Automation สามารถติดต่อมาปรึกษาฟรี ไม่มีค่าใช้จ่าย เราจะช่วยคุณวิเคราะห์และออกแบบระบบที่เหมาะสมที่สุด
-          </p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Related Services -->
-  <section class="py-12 bg-white border-t border-gray-100">
+  <section class="py-12 bg-white border-t border-gray-100 reveal">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-4xl text-center">
-      <h3 class="text-xl font-bold mb-6 text-center text-secondary">บริการที่เกี่ยวข้อง</h3>
+      <h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
       <div class="flex flex-wrap justify-center gap-4">
-        <a href="/ai-automation" class="btn-secondary">🤖 AI Automation</a>
+        <a href="/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2">
-        <a href="/seo-content-system" class="btn-secondary">📝 ระบบ SEO + AI</a>
+          <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <a href="/web-development" class="btn-secondary">🎨 พัฒนาเว็บไซต์</a>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+          </svg>
+          AI Automation
+        </a>
+        <a href="/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2">
+          <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+          </svg>
+          พัฒนาเว็บไซต์
+        </a>
       </div>
     </div>
   </section>
 
-  <!-- CTA Section -->
+  <!-- CTA Section - Always Yellow -->
-  <section id="contact" class="py-20 gradient-hero">
+  <section id="cta" class="py-20 bg-primary reveal">
     <div class="container mx-auto px-4 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-secondary">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
         พร้อมเพิ่มประสิทธิภาพการตลาดแล้วหรือยัง?
       </h2>
-      <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
+      <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
-        ปรึกษาฟรี! ผู้เชี่ยวชาญพร้อมแนะนำระบบที่เหมาะกับธุรกิจของคุณ
+        ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบการตลาดอัตโนมัติที่ตอบโจทย์
       </p>
-      <div class="flex flex-col sm:flex-row gap-5 justify-center">
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="tel:0809955945" class="btn-secondary text-lg shadow-xl">
+        <a href="tel:0809955945" class="group bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
-          📞 080-995-5945
+          <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+          </svg>
+          080-995-5945
         </a>
-        <a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
+        <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
-          💬 ติดต่อผ่าน Line
+          <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
+          สอบถามราคา
         </a>
       </div>
     </div>

src/pages/portfolio.astro

@@ -1,133 +1,326 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import Breadcrumbs from '../components/Breadcrumbs.astro'
 
-const projects = [
+const portfolioItems = [
   {
-    title: 'ระบบ Chatbot สำหรับ E-commerce',
+    name: "Lungfinler",
-    category: 'AI Automation',
+    url: "https://lungfinler.com",
-    icon: '🛍️',
+    category: "webdev",
-    challenge: 'ลูกค้ามีคำถามซ้ำๆ เกี่ยวกับสินค้า การจัดส่ง และโปรโมชั่น ทีมงานตอบไม่ทัน',
+    thumbnail: "/images/portfolio/lungfinler.png",
-    solution: 'พัฒนา AI Chatbot ที่ตอบคำถามอัตโนมัติ 24/7 เชื่อมต่อกับระบบสินค้าคงคลัง',
+    description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
-    result: 'ลดงานตอบคำถาม 70% เพิ่มยอดขาย 25% จาก Conversion Rate ที่ดีขึ้น',
+    services: ["Website", "Branding", "Graphic Design", "Product Photography"]
-    technologies: ['AI Chatbot', 'LINE OA', 'E-commerce Platform']
   },
   {
-    title: 'Website + SEO สำหรับคลินิกความงาม',
+    name: "Jet Industries",
-    category: 'Web Development',
+    url: "https://jetindustries.co.th",
-    icon: '💄',
+    category: "webdev",
-    challenge: 'คลินิกไม่ปรากฏบน Google เมื่อค้นหาคำว่า "คลินิกความงาม ใกล้ฉัน"',
+    thumbnail: "/images/portfolio/jetindustries.png",
-    solution: 'สร้างเว็บไซต์ใหม่พร้อมทำ SEO On-page และสร้างคอนเทนต์คุณภาพ',
+    description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
-    result: 'ติดอันดับ 1-3 Google ภายใน 4 เดือน ลูกค้าใหม่จาก Google เพิ่มขึ้น 300%',
+    services: ["Website", "Industrial Manufacturing"]
-    technologies: ['Web Development', 'SEO', 'Content Marketing']
   },
   {
-    title: 'Marketing Automation สำหรับโรงเรียนสอนพิเศษ',
+    name: "สำนักงานกฎหมาย ตถาตา",
-    category: 'Marketing Automation',
+    url: "https://lawyernoom.com",
-    icon: '🏫',
+    category: "webdev",
-    challenge: 'โรงเรียนต้องส่งข้อมูลคอร์สเรียนให้ผู้ปกครองจำนวนมาก ใช้เวลานาน',
+    thumbnail: "/images/portfolio/lawyernoom.png",
-    solution: 'ตั้งค่าระบบส่งอีเมลและ LINE อัตโนมัติ ตามความสนใจของแต่ละคน',
+    description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - ให้บริการด้านคดีความ คดีแพ่ง คดีอาญา คดียาเสพติด กฎหมายภาษีอากร และการประกันตัว",
-    result: 'ลดเวลาทำงาน 80% อัตราการลงทะเบียนเพิ่มขึ้น 40%',
+    services: ["Website", "Legal Services", "Criminal Law", "Tax Law"]
-    technologies: ['Email Marketing', 'LINE OA', 'CRM']
   },
   {
-    title: 'ระบบจองคิวออนไลน์สำหรับร้านอาหาร',
+    name: "Underdog Marketing",
-    category: 'Web Development',
+    url: "https://underdog.run",
-    icon: '🍽️',
+    category: "marketing",
-    challenge: 'ลูกค้าต้องโทรจองคิว เจ้าหน้าที่รับไม่ทันในช่วงเวลาเร่งด่วน',
+    thumbnail: "/images/portfolio/underdog.png",
-    solution: 'พัฒนาระบบจองคิวออนไลน์ผ่านเว็บและ LINE เชื่อมต่อกับ Google Calendar',
+    description: "บล็อกการตลาดและการขายสไตล์ \"ลุยไม่ยั้ง\" โดย บุ้ง ดีดติ่งหู - ที่ปรึกษาการตลาดและการขาย มีบทความ VDO Clip และหลักสูตรอบรม",
-    result: 'ลูกค้าพึงพอใจมากขึ้น ลดการโทรจอง 60% จัดการคิวได้มีประสิทธิภาพ',
+    services: ["Website", "Content Marketing", "Training Courses"]
-    technologies: ['Web App', 'LINE LIFF', 'Google Calendar API']
   },
   {
-    title: 'SEO Content System สำหรับบริษัทกฎหมาย',
+    name: "Baofuling Shop",
-    category: 'SEO + AI Content',
+    url: "https://baofulingshop.com",
-    icon: '⚖️',
+    category: "ecommerce",
-    challenge: 'บริษัทต้องการสร้างคอนเทนต์กฎหมายที่เข้าใจง่าย แต่ไม่มีเวลาเขียน',
+    thumbnail: "/images/portfolio/baofuling.png",
-    solution: 'ใช้ AI ช่วยสร้างบทความกฎหมายจากคำถามที่พบบ่อย พร้อมทำ SEO',
+    description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน - ครีมบัวหิมะ กอเอี๊ยะ น้ำมันชะมด ครีมไข่มุก และผลิตภัณฑ์ดูแลผิวพรรณ",
-    result: 'มีบทความคุณภาพ 50+ บทความในเวลา 2 เดือน Traffic จาก Google เพิ่มขึ้น 500%',
+    services: ["E-commerce", "Beauty Products", "Skincare"]
-    technologies: ['AI Content', 'SEO', 'Content Strategy']
+  },
+  {
+    name: "เทรนเนอร์ซันนี่",
+    url: "https://trainersunny.com",
+    category: "webdev",
+    thumbnail: "/images/portfolio/trainersunny.png",
+    description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill - หลักสูตรฝึกอบรม การสื่อสาร ภาวะผู้นำ การทำงานเป็นทีม และการพัฒนาตนเอง",
+    services: ["Website", "Corporate Training", "Soft Skill Development"]
+  },
+  {
+    name: "เลือดจระเข้วานิไทย",
+    url: "https://เลือดจระเข้วานิไทย.com",
+    category: "ecommerce",
+    thumbnail: "/images/portfolio/luadjob.png",
+    description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ - ผลิตภัณฑ์เสริมอาหารเลือดจระเข้แคปซูล จากงานวิจัย ม.เกษตรศาสตร์ บำรุงเลือด ลดน้ำตาลในเลือด",
+    services: ["E-commerce", "Health Supplements", "Crocodile Blood"]
+  },
+  {
+    name: "ทวนทอง 99",
+    url: "https://tuanthong99.com",
+    category: "ecommerce",
+    thumbnail: "/images/portfolio/tuanthong.png",
+    description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง - ยาสตรี ยาขับลม ยาริดสีดวงทวาร ขมิ้นชัน กระชายขาว และผลิตภัณฑ์สุขภาพอื่นๆ",
+    services: ["E-commerce", "Thai Herbal Medicine", "Health Products"]
+  },
+  {
+    name: "Odoo Portal",
+    url: "https://odooportal.com",
+    category: "webdev",
+    thumbnail: "/images/portfolio/odooportal.png",
+    description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย - บริการติดตั้งและดูแลระบบ Odoo ERP สำหรับธุรกิจ",
+    services: ["Odoo ERP", "System Implementation", "Technical Support"]
   }
 ]
+
+const categories = [
+  { id: 'all', name: 'ทั้งหมด', count: portfolioItems.length },
+  { id: 'webdev', name: 'พัฒนาเว็บไซต์', count: portfolioItems.filter(p => p.category === 'webdev').length },
+  { id: 'ecommerce', name: 'อีคอมเมิร์ซ', count: portfolioItems.filter(p => p.category === 'ecommerce').length },
+  { id: 'marketing', name: 'ที่ปรึกษาการตลาด', count: portfolioItems.filter(p => p.category === 'marketing').length }
+]
 ---
 
-<Layout title="ผลงานของเรา | MoreminiMore">
+<Layout title="ผลงานของเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
-  <Breadcrumbs currentPage={{ href: '/portfolio', title: 'ผลงานของเรา' }} />
   
-  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
+  <!-- Hero Section - Teal Theme -->
-    <div class="container mx-auto px-4">
+  <section id="hero" class="relative overflow-hidden min-h-[50vh] flex items-center reveal">
-      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
+    <!-- Animated Background - Teal theme for Portfolio -->
+    <div class="absolute inset-0 bg-gradient-to-br from-teal-600 via-teal-500 to-teal-700">
+      <!-- Floating Shapes - Lighter teal -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-300/20 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-teal-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Floating dots -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 2s;"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-20">
+      <div class="max-w-4xl mx-auto text-center">
+        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
           ผลงานของเรา
         </h1>
-      <p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
+        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
-        กรณีศึกษาจริงจากลูกค้าที่ไว้วางใจให้เราพัฒนาระบบ IT และ AI
+          ร่วมงานกับลูกค้ากว่า 50+ ราย สร้างเว็บไซต์และระบบที่ตอบโจทย์ธุรกิจจริง
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Portfolio Grid Section -->
+  <section id="portfolio" class="py-20 bg-gradient-to-b from-gray-50 to-white reveal">
+    <div class="container mx-auto px-4">
+      
+      <!-- Category Filter -->
+      <div class="flex flex-wrap justify-center gap-3 mb-12 reveal-left">
+        {categories.map((cat) => (
+          <button 
+            class="filter-btn px-6 py-3 rounded-full font-medium transition-all duration-300"
+            data-category={cat.id}
+          >
+            {cat.name} ({cat.count})
+          </button>
+        ))}
+      </div>
+
+      <!-- Portfolio Grid -->
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto" id="portfolio-grid">
+        {portfolioItems.map((item, index) => (
+          <article 
+            class="portfolio-card group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500"
+            data-category={item.category}
+            style={`animation-delay: ${index * 0.1}s`}
+          >
+            <!-- Thumbnail -->
+            <div class="relative h-48 bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden">
+              <img 
+                src={item.thumbnail} 
+                alt={item.name}
+                class="w-full h-full object-cover"
+              />
+              <!-- Overlay on hover -->
+              <div class="absolute inset-0 bg-teal-600/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                <a 
+                  href={item.url} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  class="bg-white text-teal-700 px-6 py-3 rounded-full font-bold transform scale-90 group-hover:scale-100 transition-transform duration-300"
+                >
+                  เยี่ยมชมเว็บไซต์ →
+                </a>
+              </div>
+              <!-- Category Badge -->
+              <span class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm text-gray-800 px-3 py-1 rounded-full text-sm font-semibold">
+                {item.category === 'webdev' ? 'พัฒนาเว็บ' : item.category === 'ecommerce' ? 'อีคอมเมิร์ซ' : 'ที่ปรึกษาการตลาด'}
+              </span>
+            </div>
+            
+            <!-- Content -->
+            <div class="p-6">
+              <h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-teal-600 transition-colors">
+                {item.name}
+              </h3>
+              <p class="text-gray-700 text-sm mb-4 line-clamp-2">
+                {item.description}
               </p>
               
-      <!-- Filter Buttons -->
+              <!-- Services Tags -->
-      <div class="flex flex-wrap justify-center gap-4 mb-12">
+              <div class="flex flex-wrap gap-2">
-        <button class="btn-brand">ทั้งหมด</button>
+                {item.services.map((service) => (
-        <button class="btn-secondary">Web Development</button>
+                  <span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-md text-xs font-medium">
-        <button class="btn-secondary">AI Automation</button>
+                    {service}
-        <button class="btn-secondary">SEO + AI Content</button>
-      </div>
-
-      <!-- Projects Grid -->
-      <div class="max-w-6xl mx-auto space-y-12">
-        {projects.map((project) => (
-          <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
-            <div class="bg-gradient-to-r from-primary to-brand-blue p-6 text-white">
-              <div class="flex items-center gap-4">
-                <div class="text-5xl">{project.icon}</div>
-                <div>
-                  <div class="text-sm font-medium opacity-90">{project.category}</div>
-                  <h2 class="text-2xl font-bold">{project.title}</h2>
-                </div>
-              </div>
-            </div>
-            
-            <div class="p-8">
-              <div class="grid md:grid-cols-3 gap-6 mb-6">
-                <div>
-                  <h3 class="font-bold text-lg mb-2 text-secondary">🎯 ความท้าทาย</h3>
-                  <p class="text-gray-700">{project.challenge}</p>
-                </div>
-                <div>
-                  <h3 class="font-bold text-lg mb-2 text-secondary">💡 วิธีแก้</h3>
-                  <p class="text-gray-700">{project.solution}</p>
-                </div>
-                <div>
-                  <h3 class="font-bold text-lg mb-2 text-secondary">📊 ผลลัพธ์</h3>
-                  <p class="text-gray-700">{project.result}</p>
-                </div>
-              </div>
-              
-              <div class="flex flex-wrap gap-2 pt-4 border-t">
-                {project.technologies.map((tech) => (
-                  <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">
-                    {tech}
                   </span>
                 ))}
               </div>
+              
+              <!-- Visit Link -->
+              <a 
+                href={item.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="mt-4 inline-flex items-center text-teal-600 font-medium hover:text-teal-800 transition-colors"
+              >
+                เยี่ยมชมเว็บไซต์
+                <svg class="w-4 h-4 ml-1" 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>
+          </article>
         ))}
       </div>
 
-      <!-- CTA Section -->
+      <!-- Empty State (hidden by default) -->
-      <div class="max-w-3xl mx-auto text-center mt-16">
+      <div id="empty-state" class="hidden text-center py-16">
-        <h2 class="text-2xl font-bold mb-4 text-secondary">สนใจให้เราทำให้คุณบ้างไหม?</h2>
+        <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <p class="text-lg text-gray-700 mb-8">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-          ให้เราช่วยคุณสร้างระบบ IT และ AI ที่ตอบโจทย์ธุรกิจ
+        </svg>
+        <h3 class="text-xl font-bold text-gray-800 mb-2">ไม่พบผลงานในหมวดหมู่นี้</h3>
+        <p class="text-gray-600">ลองเลือกหมวดหมู่อื่นๆ ดูนะครับ</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section - Always Yellow -->
+  <section id="cta" class="py-20 bg-primary reveal">
+    <div class="container mx-auto px-4">
+      <div class="max-w-3xl mx-auto text-center">
+        <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
+          อยากได้เว็บไซต์แบบนี้บ้าง?
+        </h2>
+        <p class="text-lg text-gray-800 mb-8">
+          ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <a href="/contact-us" class="btn-brand text-lg">
+          <a href="/contact-us" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors inline-flex items-center justify-center">
-            💬 ปรึกษาฟรี
+            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/>
+            </svg>
+            ปรึกษาฟรี
           </a>
-          <a href="tel:0809955945" class="btn-secondary text-lg">
+          <a href="tel:0809955945" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
-            📞 080-995-5945
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+            </svg>
+            080-995-5945
           </a>
         </div>
       </div>
     </div>
   </section>
+
+  <script>
+    // Filter functionality
+    document.addEventListener('DOMContentLoaded', () => {
+      const filterBtns = document.querySelectorAll('.filter-btn');
+      const portfolioCards = document.querySelectorAll('.portfolio-card');
+      const emptyState = document.getElementById('empty-state');
+      const grid = document.getElementById('portfolio-grid');
+
+      // Set initial active state
+      filterBtns[0]?.classList.add('active');
+
+      filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const category = btn.getAttribute('data-category');
+          
+          // Update active button
+          filterBtns.forEach(b => b.classList.remove('active'));
+          btn.classList.add('active');
+
+          // Filter cards
+          let visibleCount = 0;
+          portfolioCards.forEach(card => {
+            const cardCategory = card.getAttribute('data-category');
+            if (category === 'all' || cardCategory === category) {
+              (card as HTMLElement).style.display = 'block';
+              (card as HTMLElement).style.animation = 'fadeInUp 0.5s ease forwards';
+              visibleCount++;
+            } else {
+              (card as HTMLElement).style.display = 'none';
+            }
+          });
+
+          // Show/hide empty state
+          if (visibleCount === 0 && emptyState) {
+            emptyState.classList.remove('hidden');
+            grid?.classList.add('hidden');
+          } else {
+            emptyState?.classList.add('hidden');
+            grid?.classList.remove('hidden');
+          }
+        });
+      });
+    });
+  </script>
+
+  <style>
+    .filter-btn {
+      background: white;
+      color: #1f2937;
+      border: 2px solid #d1d5db;
+    }
+    
+    .filter-btn:hover {
+      border-color: #0d9488;
+      color: #0f766e;
+    }
+    
+    .filter-btn.active {
+      background: #0d9488;
+      color: white;
+      border-color: #0d9488;
+    }
+
+    .line-clamp-2 {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
 </Layout>

src/pages/pricing.astro

@@ -1,158 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
-import Breadcrumbs from '../components/Breadcrumbs.astro'
-
-const packages = [
-  {
-    name: 'Starter',
-    price: '15,000',
-    period: 'เริ่มต้น',
-    description: 'สำหรับธุรกิจเริ่มต้นที่ต้องการมีเว็บไซต์',
-    features: [
-      'เว็บไซต์ 5 หน้า',
-      'Responsive Design (มือถือ + Desktop)',
-      'Basic SEO Setup',
-      'Contact Form',
-      'Google My Business Setup',
-      'อบรมการใช้งาน 1 ชั่วโมง',
-      'Warranty 30 วัน'
-    ],
-    popular: false
-  },
-  {
-    name: 'Business',
-    price: '49,000',
-    period: 'นิยมที่สุด',
-    description: 'สำหรับธุรกิจที่ต้องการระบบครบครัน',
-    features: [
-      'เว็บไซต์ 10-15 หน้า',
-      'Responsive Design ทุกอุปกรณ์',
-      'Advanced SEO Setup',
-      'AI Chatbot พื้นฐาน',
-      'Google Analytics + Search Console',
-      'Blog System (5 บทความ)',
-      'LINE OA Integration',
-      'อบรมการใช้งาน 3 ชั่วโมง',
-      'Warranty 90 วัน',
-      'ฟรี Domain 1 ปี'
-    ],
-    popular: true
-  },
-  {
-    name: 'Enterprise',
-    price: '99,000+',
-    period: 'สำหรับองค์กร',
-    description: 'สำหรับธุรกิจขนาดใหญ่ที่ต้องการระบบครบวงจร',
-    features: [
-      'เว็บไซต์ไม่จำกัดหน้า',
-      'Custom Design ตาม Brand',
-      'Full SEO + Content Strategy',
-      'AI Chatbot ขั้นสูง',
-      'Marketing Automation Setup',
-      'Blog System (20 บทความ)',
-      'LINE OA + Facebook Integration',
-      'CRM Integration',
-      'E-commerce Features',
-      'อบรมการใช้งาน 8 ชั่วโมง',
-      'Warranty 180 วัน',
-      'Support 6 เดือน',
-      'ฟรี Domain + SSL 1 ปี'
-    ],
-    popular: false
-  }
-]
-
-const addons = [
-  { name: 'SEO Content (10 บทความ)', price: '15,000' },
-  { name: 'AI Chatbot ขั้นสูง', price: '20,000' },
-  { name: 'Marketing Automation', price: '25,000' },
-  { name: 'E-commerce System', price: '30,000' },
-  { name: 'Logo Design', price: '5,000' },
-  { name: 'Brand Identity', price: '15,000' }
-]
----
-
-<Layout title="ราคาและบริการ | MoreminiMore">
-  <Breadcrumbs currentPage={{ href: '/pricing', title: 'ราคาและบริการ' }} />
-  
-  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
-    <div class="container mx-auto px-4">
-      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
-        ราคาและบริการ
-      </h1>
-      <p class="text-xl text-center text-gray-700 max-w-3xl mx-auto mb-12">
-        เลือก Package ที่เหมาะกับธุรกิจคุณ หรือปรับแต่งตามความต้องการ
-      </p>
-
-      <!-- Pricing Packages -->
-      <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto mb-16">
-        {packages.map((pkg) => (
-          <div class={`relative bg-white rounded-2xl shadow-xl overflow-hidden ${pkg.popular ? 'border-4 border-brand-blue scale-105' : 'border border-gray-200'}`}>
-            {pkg.popular && (
-              <div class="bg-brand-blue text-white text-center py-2 text-sm font-bold">
-                ⭐ นิยมที่สุด
-              </div>
-            )}
-            
-            <div class="p-8">
-              <h3 class="text-2xl font-bold text-secondary mb-2">{pkg.name}</h3>
-              <div class="mb-4">
-                <span class="text-4xl font-bold text-brand-blue">฿{pkg.price}</span>
-                <span class="text-gray-500 ml-2">{pkg.period}</span>
-              </div>
-              <p class="text-gray-600 mb-6">{pkg.description}</p>
-              
-              <ul class="space-y-3 mb-8">
-                {pkg.features.map((feature) => (
-                  <li class="flex items-start gap-2">
-                    <svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-                    </svg>
-                    <span class="text-gray-700">{feature}</span>
-                  </li>
-                ))}
-              </ul>
-              
-              <a href="/contact-us" class={`block text-center py-3 px-6 rounded-full font-bold text-lg transition ${pkg.popular ? 'btn-brand' : 'btn-secondary'}`}>
-                เลือก Package นี้
-              </a>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <!-- Add-ons -->
-      <div class="max-w-4xl mx-auto">
-        <h2 class="text-2xl font-bold text-center mb-8 text-secondary">
-          Add-ons (เพิ่มเติมได้)
-        </h2>
-        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {addons.map((addon) => (
-            <div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-primary">
-              <div class="font-bold text-secondary">{addon.name}</div>
-              <div class="text-brand-blue font-bold">เริ่มต้น ฿{addon.price}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <!-- Custom Quote -->
-      <div class="max-w-3xl mx-auto text-center mt-16 bg-white rounded-2xl shadow-xl p-8">
-        <h2 class="text-2xl font-bold mb-4 text-secondary">
-          ต้องการ Package ที่ปรับแต่งพิเศษ?
-        </h2>
-        <p class="text-lg text-gray-700 mb-8">
-          ติดต่อเรามาปรึกษาฟรี! เราจะออกแบบโซลูชันที่เหมาะกับความต้องการและงบประมาณของคุณ
-        </p>
-        <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <a href="/contact-us" class="btn-brand text-lg">
-            💬 ปรึกษาฟรี
-          </a>
-          <a href="tel:0809955945" class="btn-secondary text-lg">
-            📞 080-995-5945
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-</Layout>

src/pages/seo-content-system.astro

@@ -1,294 +0,0 @@
----
-import Layout from '../layouts/Layout.astro'
----
-
-<Layout 
-  title="ระบบ SEO + AI Content | MoreminiMore - เขียนเนื้อหา SEO ด้วย AI ติด Google อันดับ 1"
-  description="บริการระบบ SEO และเขียนเนื้อหาด้วย AI สำหรับ SME ไทย วิเคราะห์คีย์เวิร์ด สร้างเนื้อหาที่ Google ชอบ เพิ่มทราฟฟิกเว็บไซต์ ติดอันดับแรก"
->
-  <!-- Schema.org Structured Data -->
-  <script type="application/ld+json" set:html={JSON.stringify({
-    "@context": "https://schema.org",
-    "@type": "LocalBusiness",
-    "name": "MoreminiMore Co.,Ltd.",
-    "description": "บริการระบบ SEO และเขียนเนื้อหาด้วย AI สำหรับ SME ไทย",
-    "telephone": "+66809955945",
-    "email": "contact@moreminimore.com",
-    "url": "https://www.moreminimore.com/seo-content-system",
-    "address": {
-      "@type": "PostalAddress",
-      "streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
-      "addressLocality": "บ้านแพ้ว",
-      "addressRegion": "สมุทรสาคร",
-      "postalCode": "74120",
-      "addressCountry": "TH"
-    },
-    "openingHours": "Mo-Fr 09:00-18:00",
-    "priceRange": "$$",
-    "serviceType": ["SEO", "AI Content Writing", "Content Marketing"]
-  })} />
-
-  <!-- Hero Section -->
-  <section class="relative py-24 gradient-hero text-secondary overflow-hidden">
-    <div class="absolute inset-0 opacity-20">
-      <div class="absolute top-20 right-10 w-96 h-96 bg-primary rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
-      <div class="absolute bottom-10 left-10 w-96 h-96 bg-accent-blue rounded-full mix-blend-overlay filter blur-3xl animate-float-delayed"></div>
-    </div>
-    
-    <div class="container mx-auto px-4 relative z-10">
-      <div class="max-w-4xl mx-auto text-center">
-        <div class="text-7xl mb-6">📝</div>
-        <h1 class="text-4xl md:text-6xl font-bold mb-8">
-          ระบบ SEO + AI Content
-        </h1>
-        <p class="text-2xl text-gray-700 mb-10">
-          เขียนเนื้อหาที่ Google ชอบ ด้วย AI ช่วยสร้าง เพิ่มทราฟฟิก ติดอันดับต้นๆ
-        </p>
-        <div class="flex flex-col sm:flex-row gap-5 justify-center">
-          <a href="tel:0809955945" class="bg-primary text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-opacity-90 transition shadow-xl inline-flex items-center justify-center gap-2">
-            📞 080-995-5945
-          </a>
-          <a href="#contact" class="bg-transparent border-2 border-secondary text-secondary px-8 py-4 rounded-full font-bold text-lg hover:bg-secondary hover:text-white transition shadow-xl inline-flex items-center justify-center gap-2">
-            💬 ติดต่อผ่าน Line
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Service Description -->
-  <section class="py-20 bg-white">
-    <div class="container mx-auto px-4 max-w-5xl">
-      <h2 class="text-3xl font-bold mb-8 text-center text-secondary">บริการระบบ SEO และ AI Content</h2>
-      
-      <div class="prose prose-lg max-w-none">
-        <p class="text-xl text-gray-600 mb-8">
-          SEO (Search Engine Optimization) คือการทำให้เว็บไซต์ของคุณติดอันดับต้นๆ ใน Google เมื่อคนค้นหาคำที่เกี่ยวข้องกับธุรกิจของคุณ ยิ่งติดอันดับสูง ยิ่งมีคนเห็นมากขึ้น เราช่วยคุณทำ SEO อย่างมีประสิทธิภาพ ด้วยการวิเคราะห์คีย์เวิร์ดและสร้างเนื้อหาที่ทั้งคนและ Google ชอบ
-        </p>
-
-        <h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">สิ่งที่คุณจะได้รับ</h3>
-        <ul class="space-y-4 mb-8">
-          <li class="flex items-start gap-4">
-            <span class="text-primary text-2xl">✓</span>
-            <span><strong>วิเคราะห์คีย์เวิร์ด:</strong> ค้นหาคำที่ลูกค้าจริงๆ ค้นหา วิเคราะห์การแข่งขัน เลือกคำที่มีโอกาสติดอันดับสูง</span>
-          </li>
-          <li class="flex items-start gap-4">
-            <span class="text-primary text-2xl">✓</span>
-            <span><strong>เขียนเนื้อหาด้วย AI:</strong> สร้างบทความที่มีคุณภาพ ตรงประเด็น และเหมาะกับ SEO ใช้เวลาสั้นกว่าการเขียนเอง</span>
-          </li>
-          <li class="flex items-start gap-4">
-            <span class="text-primary text-2xl">✓</span>
-            <span><strong>วิเคราะห์คู่แข่ง:</strong> ดูว่าคู่แข่งทำ SEO อย่างไร นำมาปรับใช้ให้ดีกว่า</span>
-          </li>
-          <li class="flex items-start gap-4">
-            <span class="text-primary text-2xl">✓</span>
-            <span><strong>ปรับปรุงเว็บไซต์:</strong> แก้ไขโครงสร้างเว็บไซต์ให้ Google อ่านง่าย ขึ้นอันดับเร็วขึ้น</span>
-          </li>
-          <li class="flex items-start gap-4">
-            <span class="text-primary text-2xl">✓</span>
-            <span><strong>รายงานผลการทำ SEO:</strong> รายงานประจำเดือน ให้เห็นว่าอันดับดีขึ้นแค่ไหน มีคนเข้าชมเท่าไหร่</span>
-          </li>
-          <li class="flex items-start gap-4">
-            <span class="text-primary text-2xl">✓</span>
-            <span><strong>ระบบ Content Calendar:</strong> วางแผนเขียนเนื้อหาสม่ำเสมอ สร้างความน่าเชื่อถือให้ธุรกิจ</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </section>
-
-  <!-- Process Section -->
-  <section class="py-20 bg-gray-50">
-    <div class="container mx-auto px-4 max-w-5xl">
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">กระบวนการทำ SEO</h2>
-      
-      <div class="grid md:grid-cols-5 gap-6">
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">🔎</div>
-          <h4 class="font-bold mb-2">1. วิจัย</h4>
-          <p class="text-gray-600 text-sm">วิเคราะห์คีย์เวิร์ดและคู่แข่ง</p>
-        </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">📋</div>
-          <h4 class="font-bold mb-2">2. วางแผน</h4>
-          <p class="text-gray-600 text-sm">กำหนดกลยุทธ์และแผนเนื้อหา</p>
-        </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">✍️</div>
-          <h4 class="font-bold mb-2">3. เขียน</h4>
-          <p class="text-gray-600 text-sm">สร้างเนื้อหาด้วย AI และตรวจสอบ</p>
-        </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">⚙️</div>
-          <h4 class="font-bold mb-2">4. ปรับ</h4>
-          <p class="text-gray-600 text-sm">ปรับแต่ง Technical SEO</p>
-        </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">📈</div>
-          <h4 class="font-bold mb-2">5. วัดผล</h4>
-          <p class="text-gray-600 text-sm">ติดตามผลและปรับปรุง</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Target Audience -->
-  <section class="py-20 bg-white">
-    <div class="container mx-auto px-4 max-w-5xl">
-      <div class="bg-gray-light p-8 rounded-2xl">
-        <h3 class="text-2xl font-bold mb-6 text-accent-blue text-center">เหมาะสำหรับธุรกิจ</h3>
-        <ul class="space-y-3 text-gray-700 max-w-2xl mx-auto">
-          <li>• ธุรกิจที่ต้องการให้ลูกค้าค้นหาเจอใน Google ง่ายขึ้น</li>
-          <li>• ร้านค้าออนไลน์ที่ต้องการเพิ่มทราฟฟิกเว็บไซต์</li>
-          <li>• บริษัทที่ต้องการสร้างความน่าเชื่อถือผ่านเนื้อหาคุณภาพ</li>
-          <li>• ผู้ประกอบการที่ต้องการแข่งขันกับคู่แข่งในออนไลน์</li>
-          <li>• ธุรกิจที่มีเวลาจำกัดและต้องการสร้างเนื้อหาอย่างต่อเนื่อง</li>
-        </ul>
-      </div>
-    </div>
-  </section>
-
-  <!-- FAQ Section for AEO -->
-  <section class="py-20 bg-gray-50">
-    <div class="container mx-auto px-4 max-w-5xl">
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">คำถามที่พบบ่อย</h2>
-      
-      <div class="space-y-4">
-        <div class="glass p-6 rounded-xl border border-gray-200">
-          <h4 class="font-bold mb-2 text-lg">Q: SEO ใช้เวลานานเท่าไหร่กว่าจะเห็นผล?</h4>
-          <p class="text-gray-600">โดยทั่วไปใช้เวลาประมาณ 3-6 เดือนเพื่อเห็นผลที่ชัดเจน ขึ้นอยู่กับความแข่งขันของคีย์เวิร์ดและสถานะเว็บไซต์ปัจจุบัน ยิ่งทำ SEO สม่ำเสมอ ผลลัพธ์จะยิ่งดีขึ้นและคงทนในระยะยาว</p>
-        </div>
-        
-        <div class="glass p-6 rounded-xl border border-gray-200">
-          <h4 class="font-bold mb-2 text-lg">Q: AI เขียนเนื้อหา SEO ได้ดีจริงหรือไม่?</h4>
-          <p class="text-gray-600">AI สามารถช่วยสร้างเนื้อหาได้อย่างรวดเร็ว แต่ต้องมีการตรวจสอบและปรับแต่งโดยผู้เชี่ยวชาญ เราใช้ AI ช่วยสร้างโครงสร้างและเนื้อหาพื้นฐาน จากนั้นผู้เชี่ยวชาญจะปรับแต่งให้เหมาะกับกลุ่มเป้าหมายและเพิ่มความน่าเชื่อถือ</p>
-        </div>
-        
-        <div class="glass p-6 rounded-xl border border-gray-200">
-          <h4 class="font-bold mb-2 text-lg">Q: ต่างจากการทำ Google Ads อย่างไร?</h4>
-          <p class="text-gray-600">Google Ads เป็นการซื้อโฆษณา เห็นผลเร็วแต่ต้องจ่ายเงินตลอดเวลา SEO เป็นการสร้างความน่าเชื่อถือตามธรรมชาติ ใช้เวลานานกว่าแต่ผลลัพธ์จะคงทนและไม่ต้องจ่ายค่า Click สองวิธีเสริมกันได้ดี</p>
-        </div>
-        
-        <div class="glass p-6 rounded-xl border border-gray-200">
-          <h4 class="font-bold mb-2 text-lg">Q: ทำ SEO แล้วรับประกันติดอันดับ 1 หรือไม่?</h4>
-          <p class="text-gray-600">ไม่มีใครสามารถรับประกันได้ 100% เพราะ Google เป็นผู้กำหนันดัดอบ แต่เรารับประกันว่าจะทำตาม Best Practice ของ SEO อย่างถูกต้อง ทำให้มีโอกาสติดอันดับสูงขึ้นอย่างแน่นอน</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- SEO Content Section -->
-  <section class="py-20 bg-gray-light">
-    <div class="container mx-auto px-4">
-      <div class="max-w-4xl mx-auto">
-        <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-secondary">
-          บริการทำ SEO และสร้างคอนเทนต์ด้วย AI ติดอันดับ Google อย่างยั่งยืน
-        </h2>
-        
-        <div class="prose prose-lg mx-auto text-gray-700">
-          <p class="mb-6">
-            <strong class="text-secondary">บริการทำ SEO และสร้างคอนเทนต์ด้วย AI</strong> คือโซลูชันครบวงจรที่จะช่วยให้เว็บไซต์ของคุณติดอันดับต้นๆ ของ Google อย่างยั่งยืน ด้วยการใช้ AI สร้างคอนเทนต์คุณภาพที่ตอบโจทย์ทั้งผู้ใช้และเสิร์ชเอนจิน
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">SEO คืออะไร และทำไมถึงสำคัญ?</h3>
-          <p class="mb-6">
-            SEO (Search Engine Optimization) คือกระบวนการปรับแต่งเว็บไซต์ให้ติดอันดับต้นๆ ของ Google เมื่อลูกค้าค้นหาด้วยคำค้นหาที่เกี่ยวข้องกับธุรกิจคุณ การทำ SEO ที่ดีจะช่วยให้ธุรกิจของคุณถูกค้นพบโดยลูกค้าที่มีคุณภาพ โดยไม่ต้องจ่ายค่าโฆษณา
-          </p>
-          <p class="mb-6">
-            ในยุคที่ลูกค้าส่วนใหญ่ค้นหาสินค้าและบริการผ่าน Google การไม่ติดอันดับ SEO เท่ากับการเสียลูกค้าให้คู่แข่ง โดยที่เราไม่รู้ตัว
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ทำไมต้องใช้ AI ในการสร้างคอนเทนต์?</h3>
-          <p class="mb-6">
-            AI ช่วยให้เราสามารถสร้างคอนเทนต์คุณภาพสูงได้รวดเร็วและประหยัดขึ้น โดยยังคงความถูกต้องและน่าสนใจ AI ยังสามารถวิเคราะห์ข้อมูลเพื่อหา Keyword ที่มีศักยภาพ และสร้างคอนเทนต์ที่ตรงใจกลุ่มเป้าหมายได้อย่างแม่นยำ
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>รวดเร็ว:</strong> สร้างคอนเทนต์ได้เร็วกว่ามนุษย์ 5-10 เท่า</li>
-            <li><strong>ประหยัด:</strong> ลดต้นทุนการสร้างคอนเทนต์ 50-70%</li>
-            <li><strong>สม่ำเสมอ:</strong> สร้างคอนเทนต์ได้ต่อเนื่อง ไม่ขาดช่วง</li>
-            <li><strong>Data-Driven:</strong> ใช้ข้อมูลวิเคราะห์ Keyword และเทรนด์</li>
-            <li><strong>SEO-Optimized:</strong> เขียนโดยคำนึงถึง SEO ตั้งแต่ต้น</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">บริการของเรา</h3>
-          <p class="mb-6">
-            เราให้บริการทำ SEO และสร้างคอนเทนต์ครบวงจร:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Keyword Research:</strong> วิจัย Keyword ที่มีศักยภาพและคู่แข่งไม่สูง</li>
-            <li><strong>On-Page SEO:</strong> ปรับแต่ง Title, Meta Description, Headings</li>
-            <li><strong>Content Creation:</strong> สร้างบทความคุณภาพด้วย AI (800-2,000 คำ)</li>
-            <li><strong>Technical SEO:</strong> ปรับความเร็วเว็บ โครงสร้าง URL, Sitemap</li>
-            <li><strong>Link Building:</strong> สร้าง Backlinks จากแหล่งที่น่าเชื่อถือ</li>
-            <li><strong>Local SEO:</strong> ปรับแต่ง Google My Business สำหรับธุรกิจท้องถิ่น</li>
-            <li><strong>Monthly Reporting:</strong> รายงานผลอันดับและ Traffic ทุกเดือน</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ผลลัพธ์ที่คาดหวัง</h3>
-          <p class="mb-6">
-            ลูกค้าของเราได้รับผลลัพธ์ที่ดีขึ้นตามลำดับ:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>เดือน 1-2:</strong> ปรับปรุงเว็บไซต์และเริ่มสร้างคอนเทนต์</li>
-            <li><strong>เดือน 3-4:</strong> เริ่มติดอันดับหน้า 2-3 Google</li>
-            <li><strong>เดือน 5-6:</strong> ติดอันดับหน้า 1 สำหรับ Keyword หลัก</li>
-            <li><strong>เดือน 6-12:</strong> Traffic เพิ่มขึ้น 200-500%</li>
-          </ul>
-          <p class="mb-6">
-            หมายเหตุ: SEO ใช้เวลา 3-6 เดือนจึงจะเห็นผลชัดเจน แต่ผลลัพธ์จะยั่งยืนและสะสมไปเรื่อยๆ
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ราคาบริการ</h3>
-          <p class="mb-6">
-            เรามีทั้งแบบรายครั้งและรายเดือน:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Starter:</strong> 15,000 บาท/เดือน (4 บทความ + Basic SEO)</li>
-            <li><strong>Business:</strong> 30,000 บาท/เดือน (8 บทความ + Full SEO)</li>
-            <li><strong>Enterprise:</strong> 50,000+ บาท/เดือน (15 บทความ + Advanced SEO)</li>
-          </ul>
-          <p class="mb-6">
-            มี Package รายครั้งสำหรับทำ SEO Audit และ One-time Optimization
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">เริ่มต้นทำ SEO อย่างไร?</h3>
-          <p class="mb-6">
-            หากคุณสนใจบริการทำ SEO สามารถติดต่อมาปรึกษาฟรี ไม่มีค่าใช้จ่าย เราจะช่วยคุณวิเคราะห์และวางแผนกลยุทธ์ SEO ที่เหมาะสมที่สุด
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- Related Services -->
-  <section class="py-12 bg-white border-t border-gray-100">
-    <div class="container mx-auto px-4 max-w-5xl">
-      <h3 class="text-xl font-bold mb-6 text-center text-secondary">บริการที่เกี่ยวข้อง</h3>
-      <div class="flex flex-wrap justify-center gap-4">
-        <a href="/web-development" class="btn-secondary">🎨 พัฒนาเว็บไซต์</a>
-        <a href="/ai-automation" class="btn-secondary">🤖 AI Automation</a>
-        <a href="/marketing-automation" class="btn-secondary">📧 Marketing Automation</a>
-      </div>
-    </div>
-  </section>
-
-  <!-- CTA Section -->
-  <section id="contact" class="py-20 gradient-primary text-white">
-    <div class="container mx-auto px-4 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-6">
-        พร้อมให้เว็บไซต์ติดอันดับ Google แล้วหรือยัง?
-      </h2>
-      <p class="text-xl text-gray-100 mb-10 max-w-2xl mx-auto">
-        ปรึกษาฟรี! วิเคราะห์เว็บไซต์ของคุณและแนะนำแผน SEO ที่เหมาะสม
-      </p>
-      <div class="flex flex-col sm:flex-row gap-5 justify-center">
-        <a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
-          📞 080-995-5945
-        </a>
-        <a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
-          💬 ติดต่อผ่าน Line
-        </a>
-      </div>
-    </div>
-  </section>
-</Layout>

src/pages/sitemap.astro

@@ -4,8 +4,7 @@ import Breadcrumbs from '../components/Breadcrumbs.astro'
 
 const services = [
   { href: '/web-development', icon: '🌐', title: 'AI-Enhanced Website', desc: 'ออกแบบและพัฒนาเว็บไซต์ที่ทันสมัย ผสาน AI Chatbot และ SEO' },
-  { href: '/marketing-automation', icon: '🔄', title: 'Marketing Automation', desc: 'ตั้งค่าระบบการตลาดอัตโนมัติ เชื่อมต่อ LINE OA, Facebook, Email' },
+  { href: '/marketing-automation', icon: '🔄', title: 'Marketing Automation', desc: 'ตั้งค่าระบบการตลาดอัตโนมัติ รวม SEO, Social Media, Ads และ Email' },
-  { href: '/seo-content-system', icon: '📝', title: 'SEO + AI Content System', desc: 'วิจัย Keyword และสร้างคอนเทนต์คุณภาพด้วย AI' },
   { href: '/tech-consult', icon: '🖥️', title: 'Tech Infrastructure Consult', desc: 'ให้คำปรึกษาระบบ Server, Data Pipeline และเลือกเครื่องมือ Tech' },
   { href: '/ai-automation', icon: '⚙️', title: 'AI Automation', desc: 'นำ Chatbot และ Workflow Automation มาใช้ ตอบลูกค้า 24/7' },
 ]

src/pages/tech-consult.astro

@@ -3,15 +3,15 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout 
-  title="ที่ปรึกษาโครงสร้างพื้นฐาน IT | MoreminiMore - วางระบบ IT ให้ธุรกิจ เลือกอุปกรณ์ เลือกซอฟต์แวร์"
+  title="Tech Consult | MoreminiMore - ที่ปรึกษา AI ครบวงจร"
-  description="บริการที่ปรึกษาโครงสร้างพื้นฐาน IT สำหรับ SME ไทย วางระบบเครือข่าย เลือกฮาร์ดแวร์ ซอฟต์แวร์ ปรับปรุงระบบให้มีประสิทธิภาพ ลดค่าใช้จ่าย"
+  description="บริการที่ปรึกษา AI ครบวงจร สำหรับธุรกิจไทย ที่ปรึกษา Marketing Automation, AI Automation, AI Hardware และการรวมระบบ"
 >
   <!-- Schema.org Structured Data -->
   <script type="application/ld+json" set:html={JSON.stringify({
     "@context": "https://schema.org",
     "@type": "LocalBusiness",
     "name": "MoreminiMore Co.,Ltd.",
-    "description": "บริการที่ปรึกษาโครงสร้างพื้นฐาน IT สำหรับ SME ไทย",
+    "description": "บริการที่ปรึกษา AI ครบวงจร สำหรับธุรกิจไทย",
     "telephone": "+66809955945",
     "email": "contact@moreminimore.com",
     "url": "https://www.moreminimore.com/tech-consult",
@@ -23,269 +23,693 @@ import Layout from '../layouts/Layout.astro'
       "postalCode": "74120",
       "addressCountry": "TH"
     },
+    "geo": {
+      "@type": "GeoCoordinates",
+      "latitude": 13.5497,
+      "longitude": 100.4167
+    },
     "openingHours": "Mo-Fr 09:00-18:00",
     "priceRange": "$$",
-    "serviceType": ["IT Consulting", "Infrastructure Design", "Software Selection"]
+    "serviceType": ["Tech Consult", "AI Consulting", "Marketing Automation", "AI Hardware"]
   })} />
 
-  <!-- Hero Section -->
+  <!-- BreadcrumbList Schema -->
-  <section class="relative py-24 gradient-ai text-white overflow-hidden">
+  <script type="application/ld+json" set:html={JSON.stringify({
-    <div class="absolute inset-0 opacity-20">
+    "@context": "https://schema.org",
-      <div class="absolute top-20 right-10 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
+    "@type": "BreadcrumbList",
-      <div class="absolute bottom-10 left-10 w-96 h-96 bg-accent-blue rounded-full mix-blend-overlay filter blur-3xl animate-float-delayed"></div>
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "หน้าแรก",
+        "item": "https://www.moreminimore.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Tech Consult",
+        "item": "https://www.moreminimore.com/tech-consult"
+      }
+    ]
+  })} />
+
+  <!-- HowTo Schema for Process -->
+  <script type="application/ld+json" set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "HowTo",
+    "name": "ขั้นตอนการให้คำปรึกษา AI",
+    "description": "กระบวนการให้คำปรึกษา AI ตั้งแต่วิเคราะห์จนถึงดูแลต่อเนื่อง",
+    "step": [
+      {
+        "@type": "HowToStep",
+        "name": "วิเคราะห์",
+        "text": "วิเคราะห์ธุรกิจและความต้องการของลูกค้า"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "วางแผน",
+        "text": "เสนอแนวทางและ Solution ที่เหมาะสม"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "ดำเนินการ",
+        "text": "Implementation ระบบที่เหมาะสม"
+      },
+      {
+        "@type": "HowToStep",
+        "name": "ดูแลต่อเนื่อง",
+        "text": "Support และปรับปรุงอย่างต่อเนื่อง"
+      }
+    ]
+  })} />
+
+  <!-- FAQPage Schema -->
+  <script type="application/ld+json" set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    "mainEntity": [
+      {
+        "@type": "Question",
+        "name": "Tech Consult ต่างจากการซื้อ Software ทั่วไปอย่างไร?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "เราให้คำปรึกษาแบบแนวทางการแก้ปัญหา ไม่ใช่แค่ขาย Software เราจะวิเคราะห์ธุรกิจของคุณก่อน จากนั้นจึงแนะนำ Solution ที่เหมาะสม ทั้ง Free Tools, Paid Software หรือ Custom Development"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "AI Hardware Consulting ช่วยอะไรได้บ้าง?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "เราช่วยแนะนำสเปค Server/GPU ที่เหมาะสมกับการใช้งาน AI ของคุณ, ช่วยเปรียบเทียบราคาและทางเลือก, ติดตั้งระบบ On-premise และดูแลและบำรุงรักษา ช่วยประหยัดค่าใช้จ่ายที่ไม่จำเป็น"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "ต้องมีความรู้ด้านเทคนิคไหม?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลธุรกิจและดูผลลัพธ์ เราจะอธิบายให้เข้าใจง่าย ไม่ใช้ศัพท์เทคนิคมากเกินไป"
+        }
+      },
+      {
+        "@type": "Question",
+        "name": "ค่าใช้จ่ายในการปรึกษาเป็นอย่างไร?",
+        "acceptedAnswer": {
+          "@type": "Answer",
+          "text": "เราให้คำปรึกษาเบื้องต้นฟรี! สำหรับการปรึกษาเชิงลึกและ Implementation จะคิดตามความซับซ้อนของโปรเจกต์ เราจะแจ้งราคาก่อนเริ่มงานเสมอ ไม่มีค่าใช้จ่ายที่ซ่อนไว้"
+        }
+      }
+    ]
+  })} />
+
+  <!-- Hero Section - Blue/Teal Theme -->
+  <section id="hero" class="relative overflow-hidden min-h-[50vh] flex items-center">
+    <!-- Animated Background - Blue/Teal -->
+    <div class="absolute inset-0 bg-gradient-to-br from-teal-400 via-teal-500 to-blue-600">
+      <!-- Floating Shapes -->
+      <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
+      <div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-300/20 rounded-full blur-3xl animate-float-2"></div>
+      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
+      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-blue-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 0.75s;"></div>
     </div>
     
-    <div class="container mx-auto px-4 relative z-10">
+    <!-- Floating dots -->
-      <div class="max-w-4xl mx-auto text-center">
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
-        <div class="text-7xl mb-6">🖥️</div>
+      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
-        <h1 class="text-4xl md:text-6xl font-bold mb-8">
+      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
-          ที่ปรึกษาโครงสร้างพื้นฐาน IT
+      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
+      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 1s;"></div>
+      <div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style="animation-delay: 0.5s;"></div>
+      <div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style="animation-delay: 1.5s;"></div>
+    </div>
+    
+    <!-- Grid Pattern -->
+    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 py-16">
+      <div class="grid lg:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
+        <!-- Left: Text Content -->
+        <div class="text-center lg:text-left">
+          <!-- Badge -->
+          <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
+            <span class="w-2 h-2 bg-teal-300 rounded-full animate-pulse"></span>
+            <span class="text-sm font-medium text-white/90">บริการที่ปรึกษา AI ครบวงจร</span>
+          </div>
+          
+          <!-- Main Headline -->
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style="animation-delay: 0.1s;">
+            ที่ปรึกษา AI<br/>
+            <span class="text-white">ครบวงจร</span><br/>
+            สำหรับธุรกิจไทย
           </h1>
-        <p class="text-2xl text-gray-100 mb-10">
+          
-          วางระบบ IT ให้ธุรกิจ เลือกอุปกรณ์และซอฟต์แวร์ที่เหมาะสม ลดค่าใช้จ่าย เพิ่มประสิทธิภาพ
+          <!-- Subheadline -->
+          <p class="text-lg md:text-xl text-white/80 mb-10 max-w-2xl mx-auto lg:mx-0 leading-relaxed animate-fade-in-up" style="animation-delay: 0.2s;">
+            ที่ปรึกษาด้าน Marketing Automation, AI Automation<br/>
+            และ AI Hardware สำหรับธุรกิจของคุณ
           </p>
-        <div class="flex flex-col sm:flex-row gap-5 justify-center">
+          
-          <a href="tel:0809955945" class="bg-white text-accent-blue px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
+          <!-- CTAs -->
-            📞 080-995-5945
+          <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center animate-fade-in-up" style="animation-delay: 0.3s;">
+            <a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
+              <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+              </svg>
+              โทรหาเรา
             </a>
-          <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-accent-blue transition shadow-xl inline-flex items-center justify-center gap-2">
+            <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-black/20 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
-            💬 ติดต่อผ่าน Line
+              <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
+              สอบถามราคา
             </a>
           </div>
+          
+          <!-- Trust Badges -->
+          <div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style="animation-delay: 0.4s;">
+            <div class="flex flex-wrap justify-center lg:justify-start gap-6 text-white/80 text-sm">
+              <span class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-teal-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                ปรึกษาฟรี
+              </span>
+              <span class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-teal-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                ทีมงานมืออาชีพ
+              </span>
+              <span class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-teal-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                ราคาเหมาะสม
+              </span>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Right: Hero Image -->
+        <div class="reveal scale">
+          <img 
+            src="/images/hero/tech-consult-hero.jpg" 
+            alt="ที่ปรึกษา AI สำหรับธุรกิจไทย - บริการให้คำปรึกษาด้าน Marketing Automation, AI Automation และ AI Hardware"
+            class="w-full h-auto rounded-2xl shadow-2xl"
+            loading="eager"
+          />
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- Service Description -->
+  <style>
-  <section class="py-20 bg-white">
+    /* Floating animations */
-    <div class="container mx-auto px-4 max-w-5xl">
+    @keyframes float-1 {
-      <h2 class="text-3xl font-bold mb-8 text-center text-secondary">บริการที่ปรึกษาโครงสร้างพื้นฐาน IT</h2>
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      33% { transform: translateY(-20px) rotate(2deg); }
+      66% { transform: translateY(-10px) rotate(-1deg); }
+    }
     
-      <div class="prose prose-lg max-w-none">
+    @keyframes float-2 {
-        <p class="text-xl text-gray-600 mb-8">
+      0%, 100% { transform: translateY(0) rotate(0deg); }
-          หลายธุรกิจมีระบบ IT ที่ไม่ลงตัว ซื้อซอฟต์แวร์แพงเกินไป หรือใช้งานไม่คุ้ม เราช่วยวิเคราะห์สถานะปัจจุบันของคุณ แนะนำระบบที่เหมาะสม ช่วยลดค่าใช้จ่ายที่ไม่จำเป็น และเพิ่มประสิทธิภาพการทำงานของทีม
+      33% { transform: translateY(-15px) rotate(-2deg); }
+      66% { transform: translateY(-25px) rotate(1deg); }
+    }
+    
+    @keyframes float-3 {
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      33% { transform: translateY(-25px) rotate(1deg); }
+      66% { transform: translateY(-15px) rotate(-2deg); }
+    }
+    
+    @keyframes float-dot-1 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-15px); opacity: 0.4; }
+    }
+    
+    @keyframes float-dot-2 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-10px); opacity: 0.5; }
+    }
+    
+    @keyframes float-dot-3 {
+      0%, 100% { transform: translateY(0); opacity: 0.2; }
+      50% { transform: translateY(-20px); opacity: 0.4; }
+    }
+    
+    .animate-float-1 { animation: float-1 3s ease-in-out infinite; }
+    .animate-float-2 { animation: float-2 4s ease-in-out infinite; }
+    .animate-float-3 { animation: float-3 3.5s ease-in-out infinite; }
+    .animate-float-dot-1 { animation: float-dot-1 2s ease-in-out infinite; }
+    .animate-float-dot-2 { animation: float-dot-2 2.5s ease-in-out infinite; }
+    .animate-float-dot-3 { animation: float-dot-3 1.8s ease-in-out infinite; }
+    
+    .animate-fade-in-up {
+      animation: fadeInUp 0.6s ease-out forwards;
+      opacity: 0;
+    }
+    
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  </style>
+
+  <!-- Services Section -->
+  <section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
+    <div class="container mx-auto px-4 max-w-6xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        บริการของเรา
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
+        บริการที่ปรึกษา AI ครบวงจรสำหรับธุรกิจของคุณ
       </p>
       
-        <h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">สิ่งที่คุณจะได้รับ</h3>
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-        <ul class="space-y-4 mb-8">
+        <!-- Marketing Automation -->
-          <li class="flex items-start gap-4">
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
-            <span class="text-primary text-2xl">✓</span>
+          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
-            <span><strong>วิเคราะห์ระบบ IT ปัจจุบัน:</strong> ตรวจสอบฮาร์ดแวร์ ซอฟต์แวร์ และการทำงานร่วมกันของระบบ</span>
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          </li>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
-          <li class="flex items-start gap-4">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
-            <span class="text-primary text-2xl">✓</span>
+            </svg>
-            <span><strong>แนะนำฮาร์ดแวร์ที่เหมาะสม:</strong> เลือกคอมพิวเตอร์ เซิร์ฟเวอร์ อุปกรณ์เครือข่าย ที่ตรงกับความต้องการและงบประมาณ</span>
+          </div>
-          </li>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">Marketing Automation</h3>
-          <li class="flex items-start gap-4">
+          <ul class="text-gray-600 text-sm space-y-2">
-            <span class="text-primary text-2xl">✓</span>
+            <li>• ระบบการตลาดอัตโนมัติ</li>
-            <span><strong>เลือกซอฟต์แวร์ที่คุ้มค่า:</strong> แนะนำโปรแกรมและเครื่องมือที่เหมาะกับลักษณะงาน ทั้งฟรีและเสียเงิน</span>
+            <li>• Email Marketing อัตโนมัติ</li>
-          </li>
+            <li>• Chatbot ตอบคำถาม</li>
-          <li class="flex items-start gap-4">
+            <li>• วิเคราะห์ข้อมูลลูกค้า</li>
-            <span class="text-primary text-2xl">✓</span>
+          </ul>
-            <span><strong>ออกแบบระบบเครือข่าย:</strong> วางระบบ Wi-Fi สาย LAN และการเชื่อมต่อที่มั่นคงปลอดภัย</span>
+        </div>
-          </li>
+
-          <li class="flex items-start gap-4">
+        <!-- AI Automation -->
-            <span class="text-primary text-2xl">✓</span>
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
-            <span><strong>วางแผนสำรองข้อมูล:</strong> ออกแบบระบบ Backup และกู้คืนข้อมูล ป้องกันการสูญหาย</span>
+          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
-          </li>
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <li class="flex items-start gap-4">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-            <span class="text-primary text-2xl">✓</span>
+            </svg>
-            <span><strong>แนะนำ Cloud Services:</strong> ช่วยเลือกบริการ Cloud ที่เหมาะสม ลดต้นทุนค่าบำรุงรักษา</span>
+          </div>
-          </li>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">AI Automation</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• ระบบ AI ตอบคำถาม</li>
+            <li>• ประมวลผลเอกสาร</li>
+            <li>• วิเคราะห์ข้อมูลอัตโนมัติ</li>
+            <li>• สร้างเนื้อหาด้วย AI</li>
+          </ul>
+        </div>
+
+        <!-- AI Hardware Consulting -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">AI Hardware</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• ที่ปรึกษาซื้อ AI Server</li>
+            <li>• แนะนำ GPU/สเปค</li>
+            <li>• ติดตั้งระบบ On-premise</li>
+            <li>• ดูและบำรุงรักษา</li>
+          </ul>
+        </div>
+
+        <!-- รวมระบบ -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
+          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">รวมระบบ</h3>
+          <ul class="text-gray-600 text-sm space-y-2">
+            <li>• รวมระบบที่มีอยู่</li>
+            <li>• เชื่อมต่อ API</li>
+            <li>• สร้าง Workflow</li>
+            <li>• ฝึกอบรมพนักงาน</li>
           </ul>
         </div>
       </div>
-  </section>
-
-  <!-- Process Section -->
-  <section class="py-20 bg-gray-50">
-    <div class="container mx-auto px-4 max-w-5xl">
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">กระบวนการให้คำปรึกษา</h2>
-      
-      <div class="grid md:grid-cols-4 gap-6">
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">🔍</div>
-          <h4 class="font-bold mb-2">1. สำรวจ</h4>
-          <p class="text-gray-600 text-sm">สำรวจระบบ IT ปัจจุบันทั้งหมด</p>
-        </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">📊</div>
-          <h4 class="font-bold mb-2">2. วิเคราะห์</h4>
-          <p class="text-gray-600 text-sm">วิเคราะห์ปัญหาและโอกาสปรับปรุง</p>
-        </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">📋</div>
-          <h4 class="font-bold mb-2">3. เสนอแนะ</h4>
-          <p class="text-gray-600 text-sm">เสนอแผนและงบประมาณที่เหมาะสม</p>
-        </div>
-        <div class="glass p-6 rounded-xl border border-gray-200 text-center card-hover">
-          <div class="text-4xl mb-3">🛠️</div>
-          <h4 class="font-bold mb-2">4. ดูแลต่อ</h4>
-          <p class="text-gray-600 text-sm">ช่วยดูและระบบหลังการวางแผน</p>
-        </div>
-      </div>
     </div>
   </section>
 
-  <!-- Target Audience -->
+  <!-- Supporting Illustration -->
-  <section class="py-20 bg-white">
+  <section class="reveal py-16 bg-gradient-to-r from-teal-500 to-blue-600">
     <div class="container mx-auto px-4 max-w-5xl">
-      <div class="bg-gray-light p-8 rounded-2xl">
+      <div class="grid md:grid-cols-2 gap-12 items-center">
-        <h3 class="text-2xl font-bold mb-6 text-accent-blue text-center">เหมาะสำหรับธุรกิจ</h3>
+        <div>
-        <ul class="space-y-3 text-gray-700 max-w-2xl mx-auto">
+          <h2 class="text-2xl md:text-3xl font-bold mb-4 text-white">
-          <li>• บริษัทที่มีปัญหาระบบ IT ล่ม ช้า หรือไม่เสถียร</li>
+            พร้อมเปลี่ยนธุรกิจของคุณด้วย AI แล้วหรือยัง?
-          <li>• ธุรกิจที่กำลังขยายตัวและต้องการวางระบบ IT ใหม่</li>
+          </h2>
-          <li>• ผู้ประกอบการที่ต้องการลดค่าใช้จ่ายด้าน IT</li>
+          <p class="text-white/80 mb-6 leading-relaxed">
-          <li>• บริษัทที่ต้องการคำแนะนำการเลือกซอฟต์แวร์หรือ Cloud Services</li>
+            ทีมงานของเรามีประสบการณ์ให้คำปรึกษาธุรกิจหลากหลายประเภท ตั้งแต่ SME ไปจนถึงองค์กรขนาดใหญ่ 
-          <li>• ธุรกิจที่ต้องการระบบ Backup และความปลอดภัยข้อมูล</li>
+            เราพร้อมช่วยวิเคราะห์และหา Solution ที่เหมาะสมกับงบประมาณและความต้องการของคุณ
+          </p>
+          <ul class="space-y-3 text-white/90">
+            <li class="flex items-center gap-3">
+              <svg class="w-5 h-5 text-teal-300 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              ปรึกษาฟรีในเบื้องต้น
+            </li>
+            <li class="flex items-center gap-3">
+              <svg class="w-5 h-5 text-teal-300 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              แนะนำ Solution ที่เหมาะสม
+            </li>
+            <li class="flex items-center gap-3">
+              <svg class="w-5 h-5 text-teal-300 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+              ดูแลต่อเนื่องหลัง Implementation
+            </li>
           </ul>
         </div>
+        <div class="reveal-right">
+          <img 
+            src="/images/illustrations/tech-consult-1.jpg" 
+            alt="ภาพประกอบการให้คำปรึกษา AI สำหรับธุรกิจ - ทีมงานมืออาชีพวิเคราะห์และแก้ปัญหาธุรกิจ"
+            class="w-full h-auto rounded-2xl shadow-xl"
+            loading="lazy"
+          />
+        </div>
+      </div>
     </div>
   </section>
 
-  <!-- FAQ Section for AEO -->
+  <!-- Why Choose Us -->
-  <section class="py-20 bg-gray-50">
+  <section class="reveal py-20 bg-white">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-6xl">
-      <h2 class="text-3xl font-bold mb-12 text-center text-secondary">คำถามที่พบบ่อย</h2>
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ทำไมต้องเลือกเรา?
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
+        เรามีความเชี่ยวชาญในการให้คำปรึกษา AI ให้ธุรกิจของคุณ
+      </p>
+      
+      <div class="grid md:grid-cols-3 gap-8">
+        <!-- Benefit 1: ครบวงจร -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
+          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">ครบวงจร</h3>
+          <p class="text-gray-600">
+            ให้คำปรึกษาครบทุกด้าน ทั้ง Marketing Automation, AI Automation และ Hardware คุณไม่ต้องไปหาหลายที่
+          </p>
+        </div>
+
+        <!-- Benefit 2: ประหยัด -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
+          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">ประหยัด</h3>
+          <p class="text-gray-600">
+            ปรึกษาฟรีในเบื้องต้น แนะนำแนวทางที่เหมาะสมกับงบประมาณของคุณ ไม่ต้องซื้อของที่ไม่จำเป็น
+          </p>
+        </div>
+
+        <!-- Benefit 3: ทำงานด้วยกัน -->
+        <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
+          <div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-gray-900">ทำงานด้วยกัน</h3>
+          <p class="text-gray-600">
+            เราทำงานร่วมกับคุณตลอดกระบวนการ ตั้งแต่วางแผน จนถึง implementation และดูแลต่อเนื่อง
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Case Studies -->
+  <section class="reveal py-20 bg-gray-50">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ตัวอย่างการใช้งาน
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        ตัวอย่างการให้คำปรึกษา AI ให้ธุรกิจต่าง ๆ
+      </p>
+      
+      <div class="grid md:grid-cols-2 gap-6">
+        <!-- Case 1 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">ร้านค้าออนไลน์</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ให้คำปรึกษา Marketing Automation + AI Chatbot สำหรับตอบคำถามลูกค้าและแนะนำสินค้า</p>
+        </div>
+        <!-- Case 2 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">คลินิก/สถานพยาบาล</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ที่ปรึกษา AI ระบบนัดหมายอัตโนมัติ + วิเคราะห์ข้อมูลผู้ป่วย + AI ตอบคำถามเบื้องต้น</p>
+        </div>
+        <!-- Case 3 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">ร้านอาหาร</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ให้คำปรึกษา AI Order System + Marketing Automation ส่งโปรโมชันตรงกลุ่มลูกค้า</p>
+        </div>
+        <!-- Case 4 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">โรงเรียน/สถาบันการศึกษา</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ที่ปรึกษา AI ระบบรับสมัครอัตโนมัติ + Chatbot ตอบคำถามผู้ปกครอง + วิเคราะห์ข้อมูล</p>
+        </div>
+        <!-- Case 5 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">อสังหาริมทรัพย์</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ให้คำปรึกษา AI Lead Scoring + Marketing Automation ติดตามลูกค้า + Chatbot สนทนา</p>
+        </div>
+        <!-- Case 6 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">โรงงาน/Manufacturing</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ที่ปรึกษา AI Hardware สำหรับ Machine Learning + ระบบ Predictive Maintenance</p>
+        </div>
+        <!-- Case 7 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">Startup/SaaS</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ให้คำปรึกษา AI Integration + Marketing Automation + รวมระบบ API ต่าง ๆ</p>
+        </div>
+        <!-- Case 8 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">บริษัท/องค์กร</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ที่ปรึกษา AI ภายในองค์กร + ระบบ Document Processing + AI Hardware Consulting</p>
+        </div>
+        <!-- Case 9 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">ธุรกิจรถยนต์</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ให้คำปรึกษา AI สำหรับการตลาด + Chatbot สอบถามข้อมูล + AI Hardware สำหรับวิเคราะห์ข้อมูล</p>
+        </div>
+        <!-- Case 10 -->
+        <div class="bg-white rounded-xl p-6 shadow-md">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
+              <svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
+            </div>
+            <h3 class="font-bold text-gray-900">ห้างสรรพสินค้า/ค้าปลีก</h3>
+          </div>
+          <p class="text-gray-600 text-sm">ที่ปรึกษา AI Analytics + Marketing Automation + ระบบแนะนำสินค้า personalize</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Process -->
+  <section class="reveal py-20 bg-white">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        ขั้นตอนการทำงาน
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        กระบวนการให้คำปรึกษาที่ชัดเจน
+      </p>
+      
+      <div class="grid md:grid-cols-4 gap-4">
+        <div class="text-center">
+          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
+          <h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
+          <p class="text-sm text-gray-600">วิเคราะห์ธุรกิจและความต้องการ</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
+          <h3 class="font-bold text-gray-900 mb-2">วางแผน</h3>
+          <p class="text-sm text-gray-600">เสนอแนวทางและ Solution</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
+          <h3 class="font-bold text-gray-900 mb-2">ดำเนินการ</h3>
+          <p class="text-sm text-gray-600">Implementation ระบบที่เหมาะสม</p>
+        </div>
+        <div class="text-center">
+          <div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
+          <h3 class="font-bold text-gray-900 mb-2">ดูแลต่อเนื่อง</h3>
+          <p class="text-sm text-gray-600">Support และปรับปรุงต่อไป</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ -->
+  <section class="reveal py-20 bg-gray-50">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
+        คำถามที่พบบ่อย
+      </h2>
+      <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+        คำถามที่ลูกค้ามักถามเกี่ยวกับบริการที่ปรึกษา
+      </p>
       
       <div class="space-y-4">
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 1 -->
-          <h4 class="font-bold mb-2 text-lg">Q: ค่าบริการที่ปรึกษาเป็นอย่างไร?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ค่าบริการขึ้นอยู่กับขนาดและความซับซ้อนของระบบ เราจะประเมินก่อนและแจ้งราคาที่ชัดเจนก่อนเริ่มงาน คุณสามารถเลือกรับเฉพาะคำแนะนำหรือจ้างดูแลต่อเนื่องก็ได้</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">Tech Consult ต่างจากการซื้อ Software ทั่วไปอย่างไร?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p>เราให้คำปรึกษาแบบ <strong>แนวทางการแก้ปัญหา</strong> ไม่ใช่แค่ขาย Software เราจะวิเคราะห์ธุรกิจของคุณก่อน จากนั้นจึงแนะนำ Solution ที่เหมาะสม ทั้ง Free Tools, Paid Software หรือ Custom Development</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 2 -->
-          <h4 class="font-bold mb-2 text-lg">Q: ช่วยดูแลระบบ IT ต่อเนื่องได้หรือไม่?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ได้เลย เรามีบริการดูแลระบบ IT รายเดือน ช่วยแก้ไขปัญหา อัปเดตความปลอดภัย และให้คำปรึกษาอย่างต่อเนื่อง คุณมั่นใจได้ว่าระบบจะทำงานได้อย่างราบรื่น</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">AI Hardware Consulting ช่วยอะไรได้บ้าง?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p>เราช่วยแนะนำ<strong>สเปค Server/GPU</strong> ที่เหมาะสมกับการใช้งาน AI ของคุณ, ช่วยเปรียบเทียบราคาและทางเลือก, ติดตั้งระบบ On-premise และดูแลและบำรุงรักษา ช่วยประหยัดค่าใช้จ่ายที่ไม่จำเป็น</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 3 -->
-          <h4 class="font-bold mb-2 text-lg">Q: ควรใช้ Cloud Services หรือ Server เองดี?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ขึ้นอยู่กับความต้องการและงบประมาณ Cloud เหมาะกับธุรกิจที่ต้องการความยืดหยุ่น ลดต้นทุนลงทุนเริ่มต้น ส่วน Server เองเหมาะกับธุรกิจที่มีข้อมูลละเอียดอ่อนหรือต้องการควบคุมเอง เราจะช่วยวิเคราะห์ให้</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลธุรกิจและดูผลลัพธ์ เราจะอธิบายให้เข้าใจง่าย ไม่ใช้ศัพท์เทคนิคมากเกินไป</p>
+            </div>
+          </details>
         </div>
 
-        <div class="glass p-6 rounded-xl border border-gray-200">
+        <!-- FAQ 4 -->
-          <h4 class="font-bold mb-2 text-lg">Q: ธุรกิจขนาดเล็กมีความจำเป็นต้องมี IT ที่ซับซ้อนหรือไม่?</h4>
+        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
-          <p class="text-gray-600">ไม่จำเป็นเสมอไป เราจะแนะนำระบบที่เหมาะกับขนาดธุรกิจ บางธุรกิจอาจใช้แค่อีเมล์ Cloud Storage และโปรแกรมบัญชีก็เพียงพอ การมีระบบที่ซับซ้อนเกินไปจะเป็นภาระและเพิ่มค่าใช้จ่ายโดยไม่จำเป็น</p>
+          <details class="group">
+            <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
+              <span class="font-semibold text-gray-900">ค่าใช้จ่ายในการปรึกษาเป็นอย่างไร?</span>
+              <span class="transition group-open:rotate-180">
+                <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
+              </span>
+            </summary>
+            <div class="text-gray-600 px-6 pb-6">
+              <p>เราให้คำปรึกษาเบื้องต้น<strong>ฟรี!</strong> สำหรับการปรึกษาเชิงลึกและ Implementation จะคิดตามความซับซ้อนของโปรเจกต์ เราจะแจ้งราคาก่อนเริ่มงานเสมอ ไม่มีค่าใช้จ่ายที่ซ่อนไว้</p>
             </div>
-      </div>
+          </details>
-    </div>
-  </section>
-
-  <!-- SEO Content Section -->
-  <section class="py-20 bg-gray-light">
-    <div class="container mx-auto px-4">
-      <div class="max-w-4xl mx-auto">
-        <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-secondary">
-          ที่ปรึกษาด้าน IT และ Tech Infrastructure วางระบบถูก ไม่ต้องลองผิดลองถูก
-        </h2>
-        
-        <div class="prose prose-lg mx-auto text-gray-700">
-          <p class="mb-6">
-            <strong class="text-secondary">บริการที่ปรึกษาด้าน IT และ Tech Infrastructure</strong> ช่วยให้คุณไม่ต้องเสียเวลาและงบประมาณในการลองผิดลองถูกเลือกเทคโนโลยีที่เหมาะสมกับธุรกิจ เราช่วยคุณวางแผน เลือกเครื่องมือ และออกแบบระบบที่รองรับการเติบโตในระยะยาว
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ทำไมต้องที่ปรึกษา IT?</h3>
-          <p class="mb-6">
-            ในยุคที่เทคโนโลยีเปลี่ยนแปลงรวดเร็ว การเลือกเครื่องมือและระบบที่ผิดอาจทำให้เสียโอกาสทางธุรกิจ เสียงบประมาณ และเสียเวลาโดยเปล่าประโยชน์ ที่ปรึกษา IT จะช่วยคุณตัดสินใจอย่างมีข้อมูลและหลีกเลี่ยงข้อผิดพลาดที่พบบ่อย
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>ประหยัดงบประมาณ:</strong> เลือกเครื่องมือที่คุ้มค่า ไม่เกินความจำเป็น</li>
-            <li><strong>ประหยัดเวลา:</strong> ไม่ต้องลองผิดลองถูกเอง</li>
-            <li><strong>ลดความเสี่ยง:</strong> หลีกเลี่ยงข้อผิดพลาดที่แพง</li>
-            <li><strong>รองรับอนาคต:</strong> ออกแบบระบบที่ขยายได้เมื่อธุรกิจโต</li>
-            <li><strong>ได้ระบบที่ดีที่สุด:</strong> ใช้เครื่องมือที่เหมาะสมกับธุรกิจคุณ</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">บริการของเรา</h3>
-          <p class="mb-6">
-            เราให้บริการที่ปรึกษาด้าน IT ครบวงจร:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>IT Strategy:</strong> วางแผนกลยุทธ์ IT ให้สอดคล้องกับธุรกิจ</li>
-            <li><strong>Infrastructure Design:</strong> ออกแบบระบบ Server, Network, Cloud</li>
-            <li><strong>Tool Selection:</strong> แนะนำเครื่องมือและซอฟต์แวร์ที่เหมาะสม</li>
-            <li><strong>Data Pipeline:</strong> ออกแบบระบบไหลของข้อมูลในองค์กร</li>
-            <li><strong>Security Audit:</strong> ตรวจสอบความปลอดภัยของระบบ</li>
-            <li><strong>Cloud Migration:</strong> ย้ายระบบขึ้น Cloud อย่างปลอดภัย</li>
-            <li><strong>Vendor Evaluation:</strong> ประเมินและเลือก vendor ที่เหมาะสม</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ขั้นตอนการทำงาน</h3>
-          <p class="mb-6">
-            เราทำงานอย่างเป็นระบบ:
-          </p>
-          <ol class="list-decimal pl-6 mb-6 space-y-2">
-            <li><strong>วิเคราะห์现状:</strong> ศึกษาระบบและความต้องการปัจจุบัน</li>
-            <li><strong>ระบุปัญหา:</strong> หาจุดที่ต้องปรับปรุงและโอกาส</li>
-            <li><strong>ออกแบบโซลูชัน:</strong> เสนอแนวทางแก้ไขหลายทางเลือก</li>
-            <li><strong>แนะนำเครื่องมือ:</strong> เลือกเครื่องมือที่เหมาะสมที่สุด</li>
-            <li><strong>วางแผน实施:</strong> วางแผนการดำเนินการเป็นขั้นตอน</li>
-            <li><strong>สนับสนุน:</strong> ให้คำปรึกษาระหว่างการดำเนินการ</li>
-          </ol>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">เทคโนโลยีที่เราเชี่ยวชาญ</h3>
-          <p class="mb-6">
-            เราเชี่ยวชาญในหลายด้าน:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Cloud Platforms:</strong> AWS, Google Cloud, Azure</li>
-            <li><strong>Databases:</strong> MySQL, PostgreSQL, MongoDB, Redis</li>
-            <li><strong>Web Technologies:</strong> Node.js, Python, Astro, React</li>
-            <li><strong>AI/ML:</strong> Chatbot, NLP, Machine Learning</li>
-            <li><strong>DevOps:</strong> Docker, Kubernetes, CI/CD</li>
-            <li><strong>Analytics:</strong> Google Analytics, Data Studio</li>
-          </ul>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ราคาบริการ</h3>
-          <p class="mb-6">
-            ราคาขึ้นอยู่กับขอบเขตงาน:
-          </p>
-          <ul class="list-disc pl-6 mb-6 space-y-2">
-            <li><strong>Consultation:</strong> 5,000 บาท/ครั้ง (2 ชั่วโมง)</li>
-            <li><strong>IT Audit:</strong> 15,000 บาท (วิเคราะห์ระบบทั้งองค์กร)</li>
-            <li><strong>Strategy Project:</strong> 30,000+ บาท (วางแผนครบวงจร)</li>
-          </ul>
-          <p class="mb-6">
-            มี Package รายเดือนสำหรับเป็นที่ปรึกษาอย่างต่อเนื่อง
-          </p>
-
-          <h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ติดต่อเรา</h3>
-          <p class="mb-6">
-            หากคุณต้องการที่ปรึกษาด้าน IT สามารถติดต่อมาปรึกษาฟรี ครั้งแรก 30 นาที ไม่มีค่าใช้จ่าย
-          </p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Related Services -->
-  <section class="py-12 bg-white border-t border-gray-100">
+  <section class="reveal py-12 bg-white border-t border-gray-100">
-    <div class="container mx-auto px-4 max-w-5xl">
+    <div class="container mx-auto px-4 max-w-4xl text-center">
-      <h3 class="text-xl font-bold mb-6 text-center text-secondary">บริการที่เกี่ยวข้อง</h3>
+      <h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
       <div class="flex flex-wrap justify-center gap-4">
-        <a href="/ai-strategy-consult" class="btn-secondary">🎯 ที่ปรึกษากลยุทธ์ AI</a>
+        <a href="/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
-        <a href="/web-development" class="btn-secondary">🎨 พัฒนาเว็บไซต์</a>
+          <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
-        <a href="/ai-automation" class="btn-secondary">🤖 AI Automation</a>
+          Marketing Automation
+        </a>
+        <a href="/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
+          <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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
+          AI Automation
+        </a>
+        <a href="/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
+          <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 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
+          พัฒนาเว็บไซต์
+        </a>
       </div>
     </div>
   </section>
 
-  <!-- CTA Section -->
+  <!-- CTA Section - Yellow -->
-  <section id="contact" class="py-20 gradient-hero">
+  <section id="cta" class="reveal py-20 bg-primary">
     <div class="container mx-auto px-4 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-secondary">
+      <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
-        มีปัญหาด้าน IT? ปรึกษาผู้เชี่ยวชาญ
+        พร้อมเริ่มต้นใช้ AI ในธุรกิจแล้วหรือยัง?
       </h2>
-      <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
+      <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
-        ปรึกษาฟรี! วิเคราะห์ระบบของคุณและแนะนำแนวทางที่เหมาะสม
+        ติดต่อเราเพื่อปรึกษาฟรี! เราพร้อมช่วยคุณหา Solution ที่เหมาะสมกับธุรกิจ
       </p>
-      <div class="flex flex-col sm:flex-row gap-5 justify-center">
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="tel:0809955945" class="btn-secondary text-lg shadow-xl">
+        <a href="tel:0809955945" class="group bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
-          📞 080-995-5945
+          <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
+          </svg>
+          080-995-5945
         </a>
-        <a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
+        <a href="https://line.me/ti/p/@moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
-          💬 ติดต่อผ่าน Line
+          <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
+          สอบถามราคา
         </a>
       </div>
     </div>

src/styles/global.css

@@ -223,6 +223,64 @@
   }
 }
 
+/* Scroll-triggered reveal animations */
+.reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-left {
+  opacity: 0;
+  transform: translateX(-50px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.reveal-left.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.reveal-right {
+  opacity: 0;
+  transform: translateX(50px);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.reveal-right.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.reveal-scale {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}
+
+.reveal-scale.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Staggered animation delays */
+.stagger-1 { transition-delay: 0.1s; }
+.stagger-2 { transition-delay: 0.2s; }
+.stagger-3 { transition-delay: 0.3s; }
+.stagger-4 { transition-delay: 0.4s; }
+.stagger-5 { transition-delay: 0.5s; }
+.stagger-6 { transition-delay: 0.6s; }
+
+/* Counter animation */
+.counter {
+  font-variant-numeric: tabular-nums;
+}
+
 /* Parallax Effect Class */
 .parallax {
   background-attachment: fixed;
@@ -230,3 +288,107 @@
   background-repeat: no-repeat;
   background-size: cover;
 }
+
+/* Parallax scroll effect for images */
+.parallax-img {
+  transform: translateY(0);
+  transition: transform 0.1s linear;
+}
+
+/* Hero gradient animation */
+@keyframes gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient-shift 8s ease infinite;
+}
+
+/* Pulse glow effect */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(254, 212, 0, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(254, 212, 0, 0.6);
+  }
+}
+
+.pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* Floating shape animation */
+@keyframes float-shape {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(10px, -20px) rotate(5deg);
+  }
+  50% {
+    transform: translate(-5px, -40px) rotate(-3deg);
+  }
+  75% {
+    transform: translate(-15px, -20px) rotate(3deg);
+  }
+}
+
+.animate-float-shape {
+  animation: float-shape 8s ease-in-out infinite;
+}
+
+/* Line drawing animation for icons */
+@keyframes draw-line {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.draw-line {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: draw-line 1s ease forwards;
+}
+
+/* Ripple effect for buttons */
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.ripple::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background-image: radial-gradient(circle, var(--color-primary) 10%, transparent 10%);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  transform: scale(10);
+  opacity: 0;
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.ripple:active::after {
+  transform: scale(0);
+  opacity: 0.3;
+  transition: 0s;
+}