refactor: remove EmDash CMS, hardcode static page content
- Remove EmDash: uninstalled emdash + @emdash-cms/* packages - Delete src/utils/site-identity.ts (only file importing emdash) - Delete src/live.config.ts (emdash stub) - Delete src/content/pages/ (6 MD files: home/about/services/contact/faq/portfolio) - Remove 'pages' collection from src/content.config.ts - Hardcode home content as constants in src/pages/index.astro - Fix duplicate 'megaphone' key in icon-paths.ts (pre-existing bug blocking build) Home page redesign: - New hero policy: 'เพิ่มยอดขาย ลดต้นทุน ลดเวลา' (replaces stats claim) - Remove stats section (no claims until validated) - 12 problem cards in 4 service buckets (3 each), outline-badge Lucide icons - New pull quote: 'กำไรที่มากขึ้นของลูกค้า' - Fix portfolio preview bug (was loading blog collection, now loads portfolio) About page: - Sync hero with new policy - New 'นโยบายของเรา' section in story - New dark pull-quote band with mission statement Hero component: - Remove hard-coded trust strip (50+/40+/5+/100% stats) - Remove hard-coded secondary CTA - Replace with named slots so callers can opt in CLAUDE.md: updated to reflect new architecture (no CMS, static-only) Verified: npm run build clean (18 pages, 1.74s)
This commit is contained in:
Macky
4235
package-lock.json
generated
4235
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -85,22 +85,11 @@ const titleWords = title.split(' ');
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/portfolio" class="btn btn-outline-dark">
|
||||
ดูผลงานจริง
|
||||
</a>
|
||||
<slot name="hero-cta-secondary" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Trust strip -->
|
||||
<div class="hero-trust" data-animate="fade-in-up">
|
||||
<span class="trust-item">
|
||||
<Icon name="award" size={14} class="trust-icon" />
|
||||
50+ โปรเจกต์สำเร็จ
|
||||
</span>
|
||||
<span class="trust-item">· 40+ ลูกค้าที่ไว้วางใจ</span>
|
||||
<span class="trust-item">· 5+ ปี</span>
|
||||
<span class="trust-item">· 100% โค้ดด้วยตัวเอง</span>
|
||||
</div>
|
||||
<slot name="hero-trust" />
|
||||
</div>
|
||||
|
||||
<!-- Giant Background Typography -->
|
||||
|
||||
@@ -57,7 +57,6 @@ export const ICON_PATHS = {
|
||||
package: '<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>',
|
||||
|
||||
// ===== Marketing / data =====
|
||||
megaphone: '<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
|
||||
barChart: '<line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/>',
|
||||
pieChart: '<path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/>',
|
||||
users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
|
||||
|
||||
@@ -1,22 +1,6 @@
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
import { glob } from 'astro/loaders';
|
||||
|
||||
// =============================================================================
|
||||
// PAGES — marketing page-level content (hero copy, badges, etc.)
|
||||
// =============================================================================
|
||||
const pages = defineCollection({
|
||||
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/pages' }),
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
subtitle: z.string().optional(),
|
||||
badge: z.string().optional(),
|
||||
hero_image: z.string().optional(),
|
||||
show_cta: z.boolean().optional().default(true),
|
||||
cta_text: z.string().optional(),
|
||||
cta_link: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// SERVICES — service detail pages
|
||||
// =============================================================================
|
||||
@@ -96,7 +80,6 @@ const blog = defineCollection({
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
pages,
|
||||
services,
|
||||
portfolio,
|
||||
faq,
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
title: เกี่ยวกับ มอร์มินิมอร์
|
||||
subtitle: บริษัท มอร์มินิมอร์ จำกัด — เราไม่ใช่ Agency ที่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง
|
||||
badge: เกี่ยวกับเรา
|
||||
show_cta: false
|
||||
---
|
||||
|
||||
# เกี่ยวกับ มอร์มินิมอร์
|
||||
|
||||
## Hero
|
||||
|
||||
- **Eyebrow:** เบื้องหลังผู้สร้างระบบ
|
||||
- **Title (line 1):** ทีมเล็ก ๆ ที่ช่วย
|
||||
- **Title (line 2, yellow):** SME ไทยขายดีขึ้นด้วย AI
|
||||
|
||||
## Story — เริ่มต้นจากปัญหาของลูกค้า ไม่ใช่จากเทคโนโลยี
|
||||
|
||||
1. **ก่อตั้งปี 2020** จากประสบการณ์ตรงที่เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ที่ "สวยแต่ไม่มีคนเข้า" และ AI tools ที่ "ว้าวแต่ใช้ไม่เป็น" เราเลยตั้งใจว่าจะทำให้ต่าง
|
||||
2. **5 ปีที่ผ่านมา เราทำงานกับลูกค้า 40+ ราย** — ตั้งแต่ร้านค้าออนไลน์หน้าร้านเล็ก ๆ ไปจนถึงโรงงานฉีดพลาสติก 40 ปี สำนักงานกฎหมาย และแบรนด์สินค้าแมส
|
||||
3. **ความต่างของเรา** เราเขียนโค้ดเอง ไม่ใช่เอาไป Outsource เราตอบแชตเอง ไม่ใช่ให้ Bot ตอบลูกค้า เราวางแผนเอง ไม่ใช่ใช้ Template เดียวกับทุกคน
|
||||
|
||||
**Inline stats:**
|
||||
- 40+ ลูกค้าที่กลับมาใช้บริการซ้ำ
|
||||
- 50+ โปรเจกต์ที่ส่งมอบ
|
||||
- 5+ ปีของการทำงานหนัก
|
||||
- 100% โค้ดโดยทีมมอร์มินิมอร์ — ไม่ Outsource
|
||||
|
||||
## Values — 4 สิ่งที่เราไม่เคยเปลี่ยน
|
||||
|
||||
### 🎯 เข้าใจธุรกิจก่อนเขียนโค้ด
|
||||
> 30 นาทีแรกของทุกโปรเจกต์คือการถาม ไม่ใช่การ present เราถามจนเข้าใจว่าคุณขายให้ใคร กำไรเท่าไหร่ ปวดหัวตรงไหน แล้วค่อยแนะนำ solution
|
||||
|
||||
### 🤝 เป็น Partner ไม่ใช่ Vendor
|
||||
> เราแชร์ progress ทุกสัปดาห์ผ่าน LINE Group เดียวกับที่ลูกค้าใช้ คุณเห็นทุก decision ไม่มี hidden cost ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ deliver
|
||||
|
||||
### ⏱️ Deliver ตรงเวลา หรือบอกล่วงหน้า
|
||||
> เราไม่สัญญา deadline แบบเลื่อนได้ ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata
|
||||
|
||||
### 💚 ดูแลหลังส่งมอบ
|
||||
> เว็บไซต์ที่ส่งแล้วทิ้งเป็นเว็บตาย เราเลยมีแพ็คเกจดูแลรายเดือนเริ่ม 2,000 บาท รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE — ไม่ทิ้งคุณหลังจบโปรเจกต์
|
||||
|
||||
## Process — วิธีที่เราทำงานกับคุณ (4 ขั้น โปร่งใสทุกข้อ)
|
||||
|
||||
### 01 · ปรึกษาฟรี (30–60 นาที)
|
||||
> เราคุยกับเจ้าของธุรกิจตัวจริง ไม่ใช่เซลล์ ไม่ใช่ Marketing Manager ที่มาจาก Agency อีกเจ้า ฟัง pain points เป้าหมาย budget แล้วให้คำแนะนำเบื้องต้นฟรี ไม่ผูก commitment
|
||||
|
||||
### 02 · วางแผน (1 สัปดาห์)
|
||||
> วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็นเอกสาร ไม่ใช่ "PM มาเล่าให้ฟัง" — คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น
|
||||
|
||||
### 03 · ดำเนินการ (Agile)
|
||||
> พัฒนาแบบ Sprint ส่ง demo ให้ทดสอบทุก 7–14 วัน เห็นงานจริง ไม่ใช่ "เดี๋ยวส่งทีเดียวตอนจบ" เจอบั๊ก แจ้งได้ทันที
|
||||
|
||||
### 04 · สนับสนุน (ต่อเนื่อง)
|
||||
> ส่งมอบงาน + อบรมทีม + มอบคู่มือ ติดตามผลทุกเดือน แนะนำสิ่งที่ควรปรับปรุง ต่อยอด หรือยกเลิก
|
||||
|
||||
## Trust / Social Proof (optional — needs testimonials collection)
|
||||
|
||||
- **Badge:** เสียงจากลูกค้า
|
||||
- **Title:** ลูกค้าพูดถึงเราว่าอย่างไร
|
||||
|
||||
⚠️ **NOTE:** ตอนนี้ seed.json ไม่มี testimonials collection — ถ้าจะใช้ section นี้ต้องเพิ่ม collection ใหม่ แนะนำ:
|
||||
- เพิ่ม `testimonials` collection (fields: name, company, role, quote, photo, rating)
|
||||
- เก็บ 3–5 รีวิวจริง (ถ้ามี LINE chat screenshot ก็ใช้ได้)
|
||||
- ถ้ายังไม่มี ให้ **ข้าม section นี้** ไปก่อน แล้วใช้ Pull Quote แทน
|
||||
|
||||
## Final CTA
|
||||
|
||||
- **Title:** อยากรู้ว่าธุรกิจคุณเหมาะกับอะไร?
|
||||
- **Subtitle:** ปรึกษาฟรี 30 นาที ไม่มี script sales ไม่มี upsell จะบอกตรง ๆ ว่าทำได้หรือไม่ควรทำ
|
||||
- **Buttons:** นัดคุยตอนนี้ → /contact · โทร 080-995-5945
|
||||
@@ -1,125 +0,0 @@
|
||||
---
|
||||
title: ติดต่อเรา
|
||||
subtitle: เลือกช่องทางที่คุณสะดวก — คนจริง ๆ ตอบกลับภายใน 2 ชั่วโมง ไม่ใช่ Bot
|
||||
badge: 30 นาที · ไม่มีค่าใช้จ่าย · ไม่มี commitment
|
||||
show_cta: false
|
||||
---
|
||||
|
||||
# ติดต่อเรา
|
||||
|
||||
## Hero
|
||||
|
||||
- **Eyebrow:** ทางที่เร็วที่สุด
|
||||
- **Title (line 1):** คุยกับ **คนจริง ๆ** ไม่ใช่ Bot
|
||||
- **Title (line 2, yellow):** ตอบกลับภายใน 2 ชั่วโมง
|
||||
- **Subtitle:** เลือกช่องทางที่คุณสะดวก — LINE, โทร, Email หรือฟอร์ม — เราจะถาม 5 คำถาม แล้วบอกคุณได้เลยว่าควรเริ่มจากตรงไหน
|
||||
|
||||
## Quick Channel Picker (4 cards, above the fold)
|
||||
|
||||
### 💬 LINE Official
|
||||
- **Best for:** คนที่อยากคุยเร็ว ๆ แบบเป็นกันเอง
|
||||
- **Response time:** ตอบใน 30 นาที (เวลาทำการ)
|
||||
- **CTA:** ทักเลย → https://line.me/ti/p/~@539hdlul
|
||||
|
||||
### 📞 โทรศัพท์
|
||||
- **Best for:** คนที่อยากคุยยาว ๆ 5–10 นาที ถามตอบสด
|
||||
- **Response time:** รับสายทันที หรือโทรกลับภายใน 2 ชม.
|
||||
- **CTA:** 080-995-5945
|
||||
|
||||
### 📧 Email
|
||||
- **Best for:** คนที่อยากส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ
|
||||
- **Response time:** ตอบภายใน 1 วันทำการ
|
||||
- **CTA:** contact@moreminimore.com
|
||||
|
||||
### 🗓️ นัด Zoom
|
||||
- **Best for:** คนที่อยู่ต่างจังหวัด/ต่างประเทศ
|
||||
- **Response time:** นัดล่วงหน้า 1–3 วัน
|
||||
- **CTA:** เลือกวันเวลา → /contact#booking
|
||||
|
||||
## Contact Info (left column of form)
|
||||
|
||||
📞 **โทรศัพท์** · 080-995-5945
|
||||
> โทรคุยสดได้เลย จ-ศ 09:00-18:00
|
||||
|
||||
📧 **อีเมล** · contact@moreminimore.com
|
||||
> เหมาะกับส่งรายละเอียดโปรเจกต์ + ไฟล์แนบ
|
||||
|
||||
💬 **LINE** · @moreminimore
|
||||
> เร็วที่สุด ตอบใน 30 นาที (เวลาทำการ)
|
||||
|
||||
📍 **ออฟฟิศ** · 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120
|
||||
> นัดเจอล่วงหน้า สะดวกกว่าเดินเข้ามาเฉย ๆ
|
||||
|
||||
🕐 **เวลาทำการ** · จ-ศ 09:00-18:00 น.
|
||||
> นอกเวลา? ทัก LINE ทิ้งไว้ได้ ตอบเช้าวันถัดไป
|
||||
|
||||
## Contact Form (right column)
|
||||
|
||||
- **Section title:** ส่งข้อความถึงเรา
|
||||
- **Subtext:** กรอก 4 ช่อง ใช้เวลา 60 วินาที — เราจะตอบกลับภายใน 2 ชั่วโมง (เวลาทำการ)
|
||||
|
||||
**Form fields:**
|
||||
|
||||
1. **ชื่อ-นามสกุล*** (text, required) — Placeholder: "สมชาย ใจดี"
|
||||
2. **อีเมล*** (email, required) — Placeholder: "example@yourcompany.com"
|
||||
3. **เบอร์โทรศัพท์** (tel, optional) — Placeholder: "080-xxx-xxxx" — Hint: (ใส่ช่องนี้ถ้าอยากให้โทรกลับ)
|
||||
4. **บริการที่สนใจ** (select):
|
||||
- 🌐 AI-Enhanced Website (เว็บ + Chatbot + SEO)
|
||||
- ⚙️ AI Automation (Workflow + Chatbot)
|
||||
- 📈 Online Marketing Automation (Email + LINE + Facebook)
|
||||
- 🔍 SEO + AI Content System
|
||||
- 🖥️ Tech Consult (Server / Data Pipeline)
|
||||
- 💼 Audit เว็บไซต์เดิมฟรี 30 นาที
|
||||
- ❓ ยังไม่แน่ใจ — ช่วยแนะนำ
|
||||
- อื่น ๆ
|
||||
5. **งบประมาณโดยประมาณ** (select — เพิ่มใหม่):
|
||||
- ต่ำกว่า 20,000 บาท
|
||||
- 20,000–50,000 บาท
|
||||
- 50,000–150,000 บาท
|
||||
- 150,000–500,000 บาท
|
||||
- 500,000 บาทขึ้นไป
|
||||
- ยังไม่ได้กำหนด
|
||||
6. **รายละเอียดโปรเจกต์*** (textarea, required) — Placeholder: "เล่าสั้น ๆ ว่าธุรกิจคุณทำอะไร ปวดหัวเรื่องอะไร อยากได้ผลลัพธ์แบบไหน (1–3 บรรทัดพอ)"
|
||||
|
||||
**Submit:** "ส่งข้อความ →" with helper text "ไม่มี spam · ไม่มีขายของ · เข้า inbox เราโดยตรง"
|
||||
|
||||
**Post-submit success:** "✅ ส่งแล้ว! เราจะตอบกลับภายใน 2 ชั่วโมง (ในเวลาทำการ) ถ้าเร่งด่วน ทัก LINE @moreminimore ครับ"
|
||||
|
||||
## What Happens Next — 3 ขั้นตอนถัดไป
|
||||
|
||||
### 1️⃣ ตอบกลับภายใน 2 ชั่วโมง
|
||||
> คนจริง (ไม่ใช่ Bot) จะตอบ — ถามคำถามเพิ่ม 2–3 ข้อ เพื่อเข้าใจปัญหาคุณ
|
||||
|
||||
### 2️⃣ นัดปรึกษาฟรี 30 นาที (ถ้าตรงกัน)
|
||||
> คุยผ่าน Zoom / โทร / นัดเจอที่ออฟฟิศ (กรุงเทพ / สมุทรสาคร) — ไม่มี script sales
|
||||
|
||||
### 3️⃣ ส่ง Proposal (ภายใน 3–5 วันหลังคุย)
|
||||
> เอกสาร PDF ที่ระบุ scope, timeline, ราคา — ไม่ชอบตรงไหนคุยกันแก้ได้
|
||||
|
||||
**Closing:** ถ้าไม่ตรง → เราจะบอกตรง ๆ ว่า "ไม่เหมาะ" และแนะนำทางเลือกอื่น
|
||||
|
||||
## FAQ Mini — 4 คำถามที่คนถามก่อนกดส่งฟอร์ม
|
||||
|
||||
**คุยกัน 30 นาทีแล้วจะถูกบังคับซื้อไหม?**
|
||||
> ไม่ คุยแล้วคุณไม่ชอบก็ไม่เป็นไร ไม่มี follow-up ไม่มีขายของเพิ่ม
|
||||
|
||||
**ถ้าส่งฟอร์มไปแล้วเงียบ ทำยังไง?**
|
||||
> ทัก LINE @moreminimore ตรง ๆ จะเร็วกว่า — หรือโทร 080-995-5945
|
||||
|
||||
**คุยช่วงไหนได้บ้าง?**
|
||||
> จันทร์-ศุกร์ 09:00-18:00 ปกติ ถ้าคุณต่างจังหวัด/ต่างประเทศ นัดนอกเวลาได้ บอกล่วงหน้า 1–2 วัน
|
||||
|
||||
**ต้องเตรียมอะไรไปคุยไหม?**
|
||||
> ไม่ต้องเตรียมอะไรเลย แค่บอกธุรกิจคุณทำอะไร ปวดหัวเรื่องอะไร งบประมาณเท่าไหร่
|
||||
|
||||
## Map / Location
|
||||
|
||||
- **Title:** **มาเจอกัน** ที่ออฟฟิศได้
|
||||
- **Body:** 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120 — นัดล่วงหน้าอย่างน้อย 1 วัน เราจะเตรียมกาแฟ + ขนมไว้ให้
|
||||
- **Map:** Google Maps iframe (lazy load)
|
||||
|
||||
## Final Note
|
||||
|
||||
- **Title:** หรือจะ **อ่านก่อน** ก็ได้
|
||||
- **Links:** ดูบริการทั้งหมด → /services · ดูผลงาน → /portfolio · ดู FAQ → /faq
|
||||
- **Reassurance:** ไม่มี commitment ไม่มี pressure ไม่มีใครตาม
|
||||
@@ -1,106 +0,0 @@
|
||||
---
|
||||
title: คำถามที่พบบ่อย
|
||||
subtitle: 30+ คำถามที่ลูกค้าถามบ่อยที่สุด — ถ้าไม่เจอคำตอบ กดปุ่มด้านล่างถามได้เลย
|
||||
badge: FAQ
|
||||
show_cta: false
|
||||
---
|
||||
|
||||
# คำถามที่พบบ่อย
|
||||
|
||||
## Hero
|
||||
|
||||
- **Eyebrow:** คำถามจริงจากลูกค้าจริง
|
||||
- **Title (line 1):** คำถามที่
|
||||
- **Title (line 2, yellow):** ลูกค้าถามบ่อยที่สุด
|
||||
- **Subtitle:** เรารวบรวมจากแชต LINE จริง ๆ ไม่ใช่แต่งขึ้นเอง
|
||||
|
||||
## 20 Q&A — organized by category
|
||||
|
||||
### 💼 บริการ (Service Overview)
|
||||
|
||||
**Q1: มอร์มินิมอร์ทำอะไรบ้าง?**
|
||||
> A: 4 บริการหลัก — เว็บไซต์ + AI Chatbot, AI & Workflow Automation, SEO + AI Content, และ Tech Consult (Server, Data Pipeline) ลูกค้า 80% เริ่มจากเว็บไซต์ก่อน แล้วค่อยเพิ่มบริการอื่นทีหลัง
|
||||
|
||||
**Q2: รับงานแบบไหน? เลือกได้ไหม?**
|
||||
> A: เลือกได้ทุกอย่าง บางลูกค้ามาขอแค่ Chatbot บางคนมาขอทำ SEO อย่างเดียว ไม่มี minimum commitment ไม่มี "ต้องซื้อครบแพ็ค"
|
||||
|
||||
**Q3: เหมาะกับธุรกิจแบบไหน?**
|
||||
> A: เหมาะกับ SME ไทยที่มียอดขาย 100,000 บาทขึ้นไปต่อเดือน (ถ้ายังไม่ถึง อาจจะยังไม่คุ้ม) — เรามีลูกค้าตั้งแต่ร้านค้าออนไลน์เล็ก ๆ ไปจนถึงโรงงาน 40 ปี
|
||||
|
||||
**Q4: เคยทำในอุตสาหกรรมของเราไหม?**
|
||||
> A: ทำมาแล้วหลากหลาย เช่น โรงงาน, สำนักงานกฎหมาย, คลินิก, ร้านค้าออนไลน์, สถาบันสอน, สินค้าแมส ถ้าคุณอยากเห็นตัวอย่างในอุตสาหกรรมเดียวกัน → ทัก LINE บอกอุตสาหกรรมมา เราจะหาให้ดู
|
||||
|
||||
### 💰 ราคา (Pricing)
|
||||
|
||||
**Q5: ราคาเริ่มต้นเท่าไหร่?**
|
||||
> A: Landing Page เริ่ม 15,000 บาท · เว็บไซต์ธุรกิจ 35,000–80,000 บาท · ระบบ Automation 50,000 บาทขึ้นไป · SEO รายเดือน 8,000–25,000 บาท
|
||||
|
||||
**Q6: มีแพ็คเกจสำเร็จรูปไหม?**
|
||||
> A: มี — Starter, Business, Enterprise (ดูรายละเอียดที่ /pricing) แต่ถ้าไม่ตรงกับที่คุณต้องการ เราปรับให้ได้ทุกอย่าง
|
||||
|
||||
**Q7: จ่ายเงินยังไง? ผ่อนได้ไหม?**
|
||||
> A: โอนธนาคาร / บัตรเครดิต (3–6 งวด มีดอกเบี้ย) โปรเจกต์ใหญ่แบ่งจ่าย 3 งวด: 30% ตอนเซ็น, 40% ตอนส่ง demo, 30% ตอนส่งมอบ
|
||||
|
||||
**Q8: มี Hidden cost ไหม?**
|
||||
> A: ไม่มี ทุกอย่างระบุในสัญญา ถ้าจะมีค่าใช้จ่ายเพิ่ม (เช่น ซื้อ Domain, SSL, ค่า API) เราจะบอกล่วงหน้าก่อนตัดสินใจ
|
||||
|
||||
### ⏱️ ระยะเวลา (Timeline)
|
||||
|
||||
**Q9: ใช้เวลาทำเว็บไซต์นานแค่ไหน?**
|
||||
> A: Landing Page 1–2 สัปดาห์ · เว็บไซต์ธุรกิจ 2–4 สัปดาห์ · Web Application / E-commerce 4–8 สัปดาห์
|
||||
|
||||
**Q10: SEO เห็นผลเมื่อไหร่?**
|
||||
> A: ขึ้นกับความยากของคีย์เวิร์ด + สถานะเว็บเดิม — เฉลี่ย 3–6 เดือนถึงหน้า 1 Google บางคีย์เวิร์ดติดใน 1–2 เดือน บางคีย์เวิร์ดใช้เวลา 9–12 เดือน
|
||||
|
||||
**Q11: ถ้าเร่งด่วนได้ไหม?**
|
||||
> A: ได้ — Rush Service (+30% ของราคาปกติ) เร่งได้เร็วขึ้น 50% เช่น ปกติ 4 สัปดาห์ → Rush 2 สัปดาห์ ต้องบอกล่วงหน้าอย่างน้อย 7 วัน
|
||||
|
||||
**Q12: แล้วทำไม่ทันเวลาจะเป็นยังไง?**
|
||||
> A: ถ้าเราบอกว่าจะทันแล้วไม่ทัน (เป็นความผิดของเรา ไม่ใช่เพราะลูกค้าเพิ่ม scope) → คืนเงิน Pro-rata ตามจำนวนวันที่เกิน เคยมีเคสคืนเงิน 2 ครั้งใน 5 ปี
|
||||
|
||||
### 🤖 AI & เทคนิค (Tech & AI)
|
||||
|
||||
**Q13: AI Chatbot ตอบลูกค้าได้จริงไหม ไม่ใช่ Bot โง่ ๆ?**
|
||||
> A: Chatbot ของเราเทรนด้วยข้อมูลธุรกิจจริง (สินค้า, ราคา, FAQ) ไม่ใช่ ChatGPT ทั่วไป ลูกค้า 90%+ ของเราบอกว่าลูกค้าทัก LINE มาแล้วแยกไม่ออกว่าเป็นคนหรือ Bot
|
||||
|
||||
**Q14: ต้องมีความรู้เทคนิคไหมถึงจะใช้งานได้?**
|
||||
> A: ไม่ต้อง — เราอบรมทีมคุณให้ใช้งานเป็น (อัปเดต content, ดู report, แก้ Chatbot flow) หลังอบรมทีมคุณจะใช้งานได้เอง
|
||||
|
||||
**Q15: ข้อมูลลูกค้าปลอดภัยไหม? (PDPA)**
|
||||
> A: ปลอดภัย — ข้อมูลเก็บบน Server ในไทย/สิงคโปร์, เข้ารหัส HTTPS, มี PDPA consent form, ลูกค้าสามารถขอลบข้อมูลได้ ดู Privacy Policy เต็มที่ /privacy
|
||||
|
||||
**Q16: ใช้ AI ตัวไหน? OpenAI หรือเปล่า?**
|
||||
> A: เราเลือก AI ตามงาน — OpenAI / Anthropic / Google Gemini / Self-hosted LLM ขึ้นกับว่าลูกค้าต้องการ Privacy ระดับไหน, งบเท่าไหร่, และ context เป็นภาษาอะไร
|
||||
|
||||
### 🛠️ หลังการขาย (Support & Warranty)
|
||||
|
||||
**Q17: มีการรับประกันไหม?**
|
||||
> A: รับประกัน 30 วันหลังส่งมอบ — ถ้าเจอบั๊กจากการพัฒนา (ไม่ใช่การเพิ่ม feature ใหม่) แก้ฟรีไม่จำกัดครั้ง
|
||||
|
||||
**Q18: หลังส่งงานแล้ว support ยังไง?**
|
||||
> A: 3 ช่องทาง — LINE Official (ตอบใน 2 ชม. เวลาทำการ), Email, โทรศัพท์กรณีเร่งด่วน ลูกค้าเว็บไซต์ได้แก้ content ฟรีตลอดอายุ Server
|
||||
|
||||
**Q19: มีแพ็คเกจดูแลรายเดือนไหม?**
|
||||
> A: มี — 2,000 บาท/เดือน (Maintenance) · 5,000 บาท/เดือน (Maintenance + แก้ content ไม่จำกัด) · 8,000 บาท/เดือน (ทั้งหมด + ปรับ SEO)
|
||||
|
||||
**Q20: ถ้าไม่พอใจผลงานจะเป็นยังไง?**
|
||||
> A: ก่อนเซ็นสัญญาเราจะส่ง Proposal + Wireframe ให้ approve ก่อน — ถ้าตอนส่งงานจริงไม่ตรงตามที่ตกลง แก้ฟรีจนกว่าจะตรง
|
||||
|
||||
## เรื่องอื่น ๆ ที่ลูกค้าถามบ่อย
|
||||
|
||||
- โฮสติ้ง · โดเมน · SSL · ใบเสนอราคา · ใบกำกับภาษี
|
||||
- สัญญา · NDA · ลิขสิทธิ์งาน
|
||||
- ทีมงาน · ขนาดทีม · ที่ตั้งบริษัท
|
||||
- ตัวอย่างงาน · ขอดูเว็บจริง · นัดคุยนอกสถานที่
|
||||
|
||||
## ไม่เจอคำตอบ? ถามตรง ๆ เลย
|
||||
|
||||
- 💬 **LINE** · @moreminimore · ตอบใน 30 นาที (เวลาทำการ)
|
||||
- 📞 **โทร** · 080-995-5945 · จ-ศ 09:00-18:00
|
||||
- 📧 **Email** · contact@moreminimore.com · ตอบภายใน 1 วัน
|
||||
|
||||
## Final CTA
|
||||
|
||||
- **Title:** พร้อมคุยรายละเอียด?
|
||||
- **Subtitle:** นัดปรึกษาฟรี 30 นาที ผ่าน Zoom หรือนัดเจอที่ออฟฟิศ (กรุงเทพ/สมุทรสาคร)
|
||||
- **Buttons:** นัดปรึกษา → /contact · ทัก LINE ตอนนี้ → https://line.me/ti/p/~@539hdlul
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
title: เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่
|
||||
subtitle: รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย — เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย
|
||||
badge: AI AGENCY ในประเทศไทย
|
||||
show_cta: true
|
||||
cta_text: เริ่มปรึกษาฟรี
|
||||
cta_link: /contact
|
||||
---
|
||||
|
||||
# เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่
|
||||
|
||||
## Hero
|
||||
|
||||
- **Eyebrow:** สำหรับ SME ไทยที่อยากขายดีขึ้นด้วย AI
|
||||
- **Title (line 1):** เว็บไซต์ที่ **ขายได้** ไม่ใช่แค่สวย
|
||||
- **Title (line 2, yellow):** ระบบ AI ที่ **ทำงานแทน** คน
|
||||
- **Subtitle:** เราออกแบบเว็บไซต์ + AI Chatbot + Marketing Automation ให้ธุรกิจไทย เพิ่มยอดขายเฉลี่ย **2–4 เท่า** ภายใน 6 เดือน ด้วยงบที่จับต้องได้ เริ่มต้น 15,000 บาท
|
||||
- **Trust strip:** ⭐ 50+ โปรเจกต์สำเร็จ · 40+ ลูกค้าที่ไว้วางใจ · 5+ ปี · 100% โค้ดด้วยตัวเอง
|
||||
- **Primary CTA:** เริ่มปรึกษาฟรี → /contact
|
||||
- **Secondary CTA:** ดูผลงานจริง → /portfolio
|
||||
|
||||
## Stats (dark band, oversized numbers)
|
||||
|
||||
- **50+** · โปรเจกต์ที่ส่งมอบจริง
|
||||
- **40+** · ลูกค้า SME ที่กลับมาใช้บริการซ้ำ
|
||||
- **5+** · ปีของการลงมือทำ ไม่ใช่แค่พูด
|
||||
- **24/7** · AI Chatbot ที่เราสร้างทำงานให้ลูกค้า
|
||||
|
||||
## Problem — คุณกำลังเจอแบบนี้อยู่ใช่ไหม?
|
||||
|
||||
1. 😩 **ลูกค้าทัก LINE เข้ามา แต่ตอบไม่ทัน** — ยอดหายก่อนที่คุณจะเห็น
|
||||
> ทีมเซลล์ 1–2 คน ตอบแชตไม่ไหว ลูกค้ารอ 5 นาทีแล้วไปซื้อที่อื่น
|
||||
2. 📉 **ลงโฆษณา แต่ยอดขายไม่ขยับ** — เงินหายไปกับคลิกที่ไม่มีคุณภาพ
|
||||
> ไม่มีระบบ Lead ไม่มี Funnel ไม่รู้ว่าใครซื้อ ใครแค่ทักมาถามเล่น
|
||||
3. 🌐 **เว็บไซต์มีอยู่ แต่ไม่มีใครเจอใน Google** — เสียเงินฟรีทุกเดือน
|
||||
> อันดับหน้า 5 ไม่มีใครเปิด ขณะที่คู่แข่งติดหน้าแรกจาก SEO อย่างเดียว
|
||||
|
||||
**Closing line (yellow):** ทุกปัญหาข้างต้นแก้ได้ด้วยระบบเดียว — ดูว่าเราทำยังไง
|
||||
|
||||
## Services — 4 mega-services
|
||||
|
||||
### 🌐 AI-Enhanced Website
|
||||
- **Tag:** ลูกค้า 80% เริ่มที่นี่
|
||||
- **Hook:** เว็บไซต์ที่โหลดไว 2 วินาที · SEO ติดหน้าแรก Google · ฝัง AI Chatbot ตอบลูกค้า 24/7
|
||||
- **3 micro-benefits:** โหลดเร็ว 2 วินาที · โครงสร้าง SEO · มี AI Chatbot
|
||||
- **Link:** /services/webdev
|
||||
|
||||
### ⚙️ AI Automation & Marketing
|
||||
- **Tag:** เพิ่มยอดขาย ลดงานซ้ำ
|
||||
- **Hook:** ให้ AI ทำงานซ้ำๆ แทนทีม ลูกค้าได้รับข้อความที่ใช่ ผ่านช่องทางที่ชอบ
|
||||
- **3 micro-benefits:** Workflow Automation · Marketing Automation · เชื่อม CRM/ERP/E-commerce
|
||||
- **Link:** /services/automation
|
||||
|
||||
### 🧠 SEO + AI Content System
|
||||
- **Tag:** ติดอันดับ Google เฉลี่ย 3 เดือน
|
||||
- **Hook:** คอนเทนต์ที่ Google และลูกค้าชอบพร้อมกัน — เราวิจัย Keyword เขียนด้วย AI แล้วตรวจด้วยคน
|
||||
- **3 micro-benefits:** Keyword Research · AI Content + Human Edit · Backlink & Tracking
|
||||
- **Link:** /services/marketing
|
||||
|
||||
### 🖥️ Tech Infrastructure Consult
|
||||
- **Tag:** สำหรับทีมที่อยากปรับระบบหลังบ้าน
|
||||
- **Hook:** ที่ปรึกษา Server, Data Pipeline และเครื่องมือ Tech ที่เหมาะกับธุรกิจ
|
||||
- **3 micro-benefits:** Server & Cloud Setup · Data Pipeline · Tech Selection
|
||||
- **Link:** /services/ai-consult
|
||||
|
||||
**Bottom CTA:** ดูบริการทั้งหมดพร้อมราคา → /services
|
||||
|
||||
## Pull Quote
|
||||
|
||||
> "เราไม่ได้ขายเว็บไซต์ — เราสร้างระบบที่ทำเงินให้ธุรกิจคุณ"
|
||||
> — มอร์มินิมอร์, ปรัชญาการทำงาน
|
||||
|
||||
## Portfolio Preview
|
||||
|
||||
- **Badge:** ผลงานจริง · ไม่ใช่ Mockup
|
||||
- **Title:** ลูกค้าจริง ผลลัพธ์จริง
|
||||
- **Description:** 9 โปรเจกต์ที่เราภาคภูมิใจ — ตั้งแต่ร้านค้าออนไลน์ ไปจนถึงโรงงานฉีดพลาสติก
|
||||
- **CTA:** ดูผลงานทั้งหมด → /portfolio
|
||||
|
||||
## Blog Preview
|
||||
|
||||
- **Badge:** ความรู้ฟรี · อัปเดตทุกเดือน
|
||||
- **Title:** เรียนรู้ก่อนใครก่อนลงทุน
|
||||
- **Description:** บทความสั้น ๆ ที่อ่านจบใน 5 นาที เน้นลงมือทำ ไม่ใช่ทฤษฎี
|
||||
- **CTA:** บทความทั้งหมด → /blog
|
||||
|
||||
## Final CTA
|
||||
|
||||
- **Title:** พร้อมเปลี่ยนธุรกิจของคุณ?
|
||||
- **Subtitle:** ปรึกษาฟรี 30 นาที — เราจะถามคำถาม 5 ข้อ แล้วบอกคุณได้เลยว่าควรเริ่มจากตรงไหน
|
||||
- **Buttons:** นัดคุย 30 นาที → /contact · ทัก LINE: @moreminimore
|
||||
- **Reassurance:** ไม่มี commitment · ไม่มี script sales · พูดตรง ๆ ว่าทำได้หรือทำไม่ได้
|
||||
@@ -1,83 +0,0 @@
|
||||
---
|
||||
title: ผลงาน
|
||||
subtitle: ลูกค้าจริง ผลลัพธ์จริง — 9 โปรเจกต์ที่เราภาคภูมิใจ
|
||||
badge: 9 โปรเจกต์ · 5 อุตสาหกรรม
|
||||
show_cta: false
|
||||
---
|
||||
|
||||
# ผลงาน
|
||||
|
||||
## Hero
|
||||
|
||||
- **Eyebrow:** เห็นจริง ไม่ใช่ Mockup
|
||||
- **Title (line 1):** เราส่งมอบให้ใคร
|
||||
- **Title (line 2, yellow):** มาบ้างแล้วบ้าง
|
||||
- **Subtitle:** โปรเจกต์จริง ลูกค้าจริง เว็บไซต์จริงที่ใช้งานอยู่ทุกวันนี้ — คลิกเข้าไปดูได้เลย
|
||||
- **Stats strip:** 🏭 โรงงาน · 💊 สินค้าอุปโภค · ⚖️ สำนักงานกฎหมาย · 📚 สถาบันสอน · 🛒 E-commerce
|
||||
|
||||
## Industry Filter (sticky)
|
||||
|
||||
- ทั้งหมด (9)
|
||||
- 🏭 โรงงาน (1)
|
||||
- 💊 สินค้าอุปโภค (2)
|
||||
- ⚖️ สำนักงานกฎหมาย (1)
|
||||
- 📚 สถาบัน / การศึกษา (2)
|
||||
- 📈 ที่ปรึกษาธุรกิจ (1)
|
||||
- 🎨 Digital Agency (1)
|
||||
- 🛒 E-commerce (1)
|
||||
|
||||
## Portfolio Grid — 9 projects
|
||||
|
||||
### 1. Lungfinler · Digital Agency
|
||||
- **What we did:** พัฒนาเว็บไซต์ portfolio + เชื่อม LINE OA ตอบลูกค้าอัตโนมัติ
|
||||
- **Result:** Lead เพิ่มขึ้น 3 เท่าใน 2 เดือนหลังเปิดเว็บ
|
||||
|
||||
### 2. Jet Industries · โรงงาน 40 ปี
|
||||
- **What we did:** ออกแบบเว็บ B2B + SEO เทคนิค + Multi-language (TH/EN/JP)
|
||||
- **Result:** ลูกค้าจากญี่ปุ่นและออสเตรเลียติดต่อเข้ามา 5–8 ราย/เดือน
|
||||
|
||||
### 3. สำนักงานกฎหมาย ตถาตา · ทนายความ
|
||||
- **What we did:** เว็บไซต์มาตรฐาน + SEO คีย์เวิร์ด "ทนายความ" ในจังหวัด
|
||||
- **Result:** ติดหน้า 1 Google ใน 4 เดือน ลูกค้าโทรเข้ามา 10+ ราย/เดือน
|
||||
|
||||
### 4. Underdog Marketing · Marketing Agency
|
||||
- **What we did:** พัฒนา Blog + Newsletter system
|
||||
- **Result:** สมัครสมาชิก 1,200+ คนใน 6 เดือน
|
||||
|
||||
### 5. Baofuling Shop · E-commerce ครีมบัวหิมะ
|
||||
- **What we did:** ร้านค้าออนไลน์ + AI Chatbot แนะนำสินค้า
|
||||
- **Result:** Conversion rate 3.2% (สูงกว่าค่าเฉลี่ยอุตสาหกรรมความงาม 2 เท่า)
|
||||
|
||||
### 6. เทรนเนอร์ซันนี่ · Personal Brand
|
||||
- **What we did:** เว็บ Personal Brand + Course landing page + Email automation
|
||||
- **Result:** Course launch แรกทำรายได้ 280,000 บาท ใน 7 วัน
|
||||
|
||||
### 7. เลือดจระเข้วานิไทย · E-commerce สินค้าสุขภาพ
|
||||
- **What we did:** ร้านค้าออนไลน์ + LINE OA + แชทบอทตอบคำถามสินค้า
|
||||
- **Result:** ลดเวลาตอบแชต 70% ทีมเซลล์โฟกัสการปิดดีลได้เต็มที่
|
||||
|
||||
### 8. ทวนทอง 99 · E-commerce สมุนไพรไทย
|
||||
- **What we did:** เว็บไซต์ + ระบบสั่งซื้อ + ผูก Facebook Pixel
|
||||
- **Result:** ROAS โฆษณาเฉลี่ย 4.8 เท่า
|
||||
|
||||
### 9. Odoo Portal · ตัวแทนจำหน่าย ERP
|
||||
- **What we did:** เว็บ Landing Page + Lead form + CRM integration
|
||||
- **Result:** Lead-to-customer 12% (สูงกว่าค่าเฉลี่ย SaaS 4–6% เกือบ 3 เท่า)
|
||||
|
||||
## ดีลที่เราเลือก — เราเลือกโปรเจกต์ที่ทำ ไม่ใช่ทุกงานที่มา เรารับ
|
||||
|
||||
### 1. ธุรกิจที่พร้อมจริง ๆ
|
||||
> เราคุยกับเจ้าของธุรกิจก่อน ถ้าเป้าหมายยังไม่ชัด เราจะแนะนำให้รอก่อน ดีกว่าเสียเงินแล้วไม่ได้ผล
|
||||
|
||||
### 2. งบประมาณที่สมเหตุสมผล
|
||||
> เราไม่ได้ถูกที่สุด แต่ก็ไม่ได้แพงที่สุด ถ้าใครบอก "งบ 5,000 ทำเว็บได้ไหม" — เราแนะนำให้ไปฟรีแลนซ์ก่อน
|
||||
|
||||
### 3. ลูกค้าที่ฟัง
|
||||
> เราทำงานกับลูกค้าที่พร้อมฟังคำแนะนำ ไม่ใช่ลูกค้าที่บอก "ทำตามนี้เป๊ะ ๆ" แล้วผิดคาดทุกที
|
||||
|
||||
## Final CTA
|
||||
|
||||
- **Title:** อยากเป็น **ผลงานชิ้นต่อไป** ของเรา?
|
||||
- **Subtitle:** ถ้าธุรกิจคุณพร้อม เราพร้อม — คุยกันก่อน 30 นาที แล้วตัดสินใจเอง
|
||||
- **Buttons:** เริ่มโปรเจกต์ของคุณ → /contact · ดูบริการที่เราทำ → /services
|
||||
- **Reassurance:** ไม่มี script · ไม่มี pressure · ตรงไปตรงมา
|
||||
@@ -1,82 +0,0 @@
|
||||
---
|
||||
title: บริการ
|
||||
subtitle: ครบจบในที่เดียว — โซลูชัน AI สำหรับธุรกิจไทย
|
||||
badge: บริการ 4 ด้าน · เริ่มต้น 15,000 บาท
|
||||
show_cta: false
|
||||
---
|
||||
|
||||
# บริการ
|
||||
|
||||
## Hero
|
||||
|
||||
- **Eyebrow:** เลือกเฉพาะที่คุณต้องการ หรือให้เราวางแผนให้ทั้งระบบ
|
||||
- **Title (line 1):** โซลูชัน AI **4 ด้าน**
|
||||
- **Title (line 2, yellow):** ที่คุณเลือกได้ตามงบ
|
||||
- **Subtitle:** เราแยกบริการออกเป็น 4 กลุ่มใหญ่ — เว็บไซต์, AI Automation, SEO+Content และ Tech Consult — เพื่อให้ SME ไทยเลือกได้ว่าวันนี้ต้องการแก้ปัญหาอะไร
|
||||
- **Trust strip:** เริ่มงานได้ใน 7 วัน · ส่งมอบตรงเวลา หรือคืนเงิน Pro-rata · ไม่ผูกสัญญารายปี
|
||||
|
||||
## Decision Table — เลือกบริการที่ใช่ใน 30 วินาที
|
||||
|
||||
| คุณกำลังเจอ | เริ่มที่ | คาดเห็นผลใน |
|
||||
|---|---|---|
|
||||
| ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า | 🌐 **AI-Enhanced Website** | 2–4 สัปดาห์ |
|
||||
| ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน | ⚙️ **AI Automation** | 1–3 เดือน |
|
||||
| ลงโฆษณาเยอะ แต่ยอดขายไม่โต | 📈 **Online Marketing Automation** | 1–3 เดือน |
|
||||
| อยากติดหน้าแรก Google แต่ไม่รู้จะเริ่มยังไง | 🔍 **SEO + AI Content** | 3–6 เดือน |
|
||||
| ไม่อยากจ้างทีม IT ประจำ แต่อยากมี Server/ระบบหลังบ้าน | 🖥️ **Tech Consult** | 2–6 สัปดาห์ |
|
||||
| มีเว็บอยู่แล้ว แต่ขายไม่ได้ | 🔄 **เริ่มจาก Audit ฟรี 30 นาที** | 1 สัปดาห์ |
|
||||
|
||||
**Closing:** ถ้ายังไม่แน่ใจ → กดปุ่ม "ปรึกษาฟรี" ด้านล่าง เราจะถาม 5 คำถามแล้วบอกคำตอบเอง
|
||||
|
||||
## Category 1: 🏢 Technology Consult (ลดต้นทุนและเวลา)
|
||||
|
||||
- **Tag:** ENTERPRISE SOLUTIONS · ลูกค้า 30% เริ่มที่นี่
|
||||
- **Heading:** **ลดต้นทุนและเวลา** ด้วยระบบ Automation
|
||||
- **Description:** สำหรับ SME ที่มี process ซ้ำ ๆ ในองค์กร เช่น ตอบแชต, ประมวลผลออร์เดอร์, จัดการ inventory
|
||||
|
||||
### 🤖 Automation Consult
|
||||
- เริ่มต้น **35,000 บาท** — ดูรายละเอียดที่ /services/automation
|
||||
- Workflow Automation · System Integration · Custom Application
|
||||
|
||||
### 🧠 AI Consult
|
||||
- เริ่มต้น **25,000 บาท** — ดูรายละเอียดที่ /services/ai-consult
|
||||
- AI Strategy & Roadmap · AI Chatbot · AI Audit
|
||||
|
||||
**USP:** 🎁 ลูกค้า Technology Consult ได้ **Server ฟรี** สำหรับ App และ AI (ใช้งานปกติ)
|
||||
|
||||
## Category 2: 📈 Growth & Marketing (เพิ่มยอดขาย)
|
||||
|
||||
- **Tag:** GROWTH & MARKETING · ลูกค้า 70% เริ่มที่นี่
|
||||
- **Heading:** **เพิ่มยอดขาย** ด้วย Marketing ที่วัดผลได้
|
||||
|
||||
### 🌐 Website Development
|
||||
- เริ่มต้น **15,000 บาท** — ดูรายละเอียดที่ /services/webdev
|
||||
|
||||
### 📈 Online Marketing Automation
|
||||
- เริ่มต้น **20,000 บาท** / เดือน — ดูรายละเอียดที่ /services/marketing
|
||||
|
||||
### 🔍 SEO + AI Content System
|
||||
- เริ่มต้น **8,000 บาท** / เดือน
|
||||
|
||||
**USP:** 🎁 ลูกค้า Website ได้ **แก้ไขเนื้อหาฟรีตลอดอายุ Server**
|
||||
|
||||
## Add-ons (ไม่บังคับซื้อแพ็ค)
|
||||
|
||||
- 💌 **Email Marketing** — ส่งครั้งละ 50 บาท/อีเมล
|
||||
- 📊 **GA4 + Search Console Setup** — 3,000 บาท
|
||||
- 🎨 **Logo / Branding** — 8,000 บาท
|
||||
- 📸 **Product Photography** — นัดวันถ่าย คิดตามชิ้น
|
||||
- 🛒 **E-commerce Migration** — เริ่ม 10,000 บาท
|
||||
- 🌐 **Multi-language (EN/TH/CN)** — เพิ่ม 5,000 บาท/ภาษา
|
||||
|
||||
## Pricing Tiers
|
||||
|
||||
- **เริ่มต้น** · 15,000–35,000 บาท · Landing Page + AI Chatbot
|
||||
- **ธุรกิจ** · 50,000–150,000 บาท · เว็บไซต์เต็มรูป + SEO 3 เดือน
|
||||
- **องค์กร** · 200,000 บาทขึ้นไป · ระบบครบวงจร + Automation
|
||||
|
||||
## Final CTA
|
||||
|
||||
- **Title:** ยังไม่รู้ว่าจะเริ่มจากตรงไหน?
|
||||
- **Subtitle:** Audit ฟรี 30 นาที — เราจะถาม 5 คำถาม แล้วบอกว่าคุณควรลงทุนกับอะไรก่อน ไม่มี upsell ไม่มี commitment
|
||||
- **Buttons:** นัดคุยเลย → /contact · ทัก LINE: @moreminimore
|
||||
@@ -1,5 +0,0 @@
|
||||
// live.config.ts — kept as a stub so Astro's runtime can import it,
|
||||
// but no live collections are registered (we use markdown only via content.config.ts).
|
||||
const collections = {};
|
||||
export { collections };
|
||||
export default { collections };
|
||||
@@ -11,8 +11,8 @@ import Icon from '../components/Icon.astro';
|
||||
|
||||
<PageHero
|
||||
badge="เกี่ยวกับเรา"
|
||||
title="ทีมเล็ก ๆ ที่ช่วย SME ไทย ขายดีขึ้นด้วย AI"
|
||||
subtitle="บริษัท มอร์มินิมอร์ จำกัด — เราไม่ใช่ Agency ที่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง"
|
||||
title="เพิ่มยอดขาย ลดต้นทุน ลดเวลา — ให้ธุรกิจคุณ"
|
||||
subtitle="บริษัท มอร์มินิมอร์ จำกัด — นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น ไม่ใช่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง"
|
||||
/>
|
||||
|
||||
<!-- STORY SECTION -->
|
||||
@@ -20,17 +20,17 @@ import Icon from '../components/Icon.astro';
|
||||
<div class="container">
|
||||
<div class="story-grid">
|
||||
<div class="story-content">
|
||||
<span class="section-badge">เรื่องราวของเรา</span>
|
||||
<span class="section-badge">นโยบายของเรา</span>
|
||||
<h2 class="section-title">
|
||||
เริ่มต้นจาก <span class="highlight">ปัญหาของลูกค้า</span> ไม่ใช่จากเทคโนโลยี
|
||||
เพิ่ม<span class="highlight">ยอดขาย</span> · ลด<span class="highlight">ต้นทุน</span> · ลด<span class="highlight">เวลา</span>
|
||||
</h2>
|
||||
|
||||
<p class="story-text">
|
||||
<strong>ก่อตั้งปี 2020</strong> จากประสบการณ์ตรงที่เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ที่ "สวยแต่ไม่มีคนเข้า" และ AI tools ที่ "ว้าวแต่ใช้ไม่เป็น" เราเลยตั้งใจว่าจะทำให้ต่าง
|
||||
<strong>นโยบายของเราชัดเจน</strong> — ทุกระบบที่ส่งมอบต้องตอบคำถามเดียวให้ได้: "ลูกค้ามีกำไรเพิ่มขึ้นจริงไหม" ไม่ใช่แค่ส่งงานตามสัญญา
|
||||
</p>
|
||||
|
||||
<p class="story-text">
|
||||
<strong>5 ปีที่ผ่านมา เราทำงานกับลูกค้า 40+ ราย</strong> — ตั้งแต่ร้านค้าออนไลน์หน้าร้านเล็ก ๆ ไปจนถึงโรงงานฉีดพลาสติก 40 ปี สำนักงานกฎหมาย และแบรนด์สินค้าแมส
|
||||
<strong>ก่อตั้งปี 2020</strong> จากประสบการณ์ตรงที่เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ที่ "สวยแต่ไม่มีคนเข้า" และ AI tools ที่ "ว้าวแต่ใช้ไม่เป็น" เราเลยตั้งใจว่าจะทำให้ต่าง
|
||||
</p>
|
||||
|
||||
<p class="story-text">
|
||||
@@ -108,6 +108,18 @@ import Icon from '../components/Icon.astro';
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PULL QUOTE — black band, mission statement -->
|
||||
<section class="section section-dark-quote reveal">
|
||||
<div class="container">
|
||||
<blockquote class="pull-quote">
|
||||
<p class="quote-text">
|
||||
"เป้าหมายของเราคือ <span class="highlight">กำไรที่มากขึ้นของลูกค้า</span>"
|
||||
</p>
|
||||
<cite class="quote-author">— มอร์มินิมอร์, ปณิธานการทำงาน</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROCESS SECTION (4 steps, white) -->
|
||||
<section class="section process-section">
|
||||
<div class="container">
|
||||
@@ -319,6 +331,35 @@ import Icon from '../components/Icon.astro';
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* PULL QUOTE (dark band) */
|
||||
.section-dark-quote {
|
||||
background: var(--color-black);
|
||||
padding: 100px 0;
|
||||
}
|
||||
.section-dark-quote .pull-quote {
|
||||
text-align: center;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section-dark-quote .quote-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4.5vw, 56px);
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
color: var(--color-white);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.section-dark-quote .quote-text .highlight {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.section-dark-quote .quote-author {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-400);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
|
||||
.cta-title {
|
||||
|
||||
@@ -5,16 +5,20 @@ import Footer from '../components/Footer.astro';
|
||||
import Icon from '../components/Icon.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
import { render } from 'astro:content';
|
||||
import ServiceCard from '../components/ServiceCard.astro';
|
||||
import PortfolioCard from '../components/PortfolioCard.astro';
|
||||
|
||||
const pages = await getCollection('pages');
|
||||
const home = pages.find(p => p.slug === 'home');
|
||||
const { Content } = home ? await render(home) : { Content: null };
|
||||
// Hardcoded home page copy (previously in src/content/pages/home.md, now inlined)
|
||||
const homeContent = {
|
||||
badge: 'AI AGENCY ในประเทศไทย',
|
||||
title: 'เพิ่มยอดขาย ลดต้นทุน ลดเวลา — ให้ธุรกิจของคุณ',
|
||||
subtitle:
|
||||
'นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น — ด้วยเว็บไซต์ SEO AI Chatbot และ Marketing Automation ที่ออกแบบมาเพื่อ SME ไทยโดยเฉพาะ',
|
||||
};
|
||||
|
||||
const services = await getCollection('services');
|
||||
const blogPosts = await getCollection('blog');
|
||||
const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
||||
const portfolio = await getCollection('portfolio');
|
||||
const featuredPortfolio = portfolio.slice(0, 4);
|
||||
|
||||
// 4 mega-services (use existing service collection filtered)
|
||||
const allServices = services.slice(0, 4);
|
||||
@@ -24,42 +28,130 @@ const serviceImages: Record<string, string> = {
|
||||
'marketing': '/images/services/marketing.jpg',
|
||||
'webdev': '/images/services/webdev.jpg',
|
||||
};
|
||||
|
||||
// 12 problem cards grouped by 4 service buckets (3 per bucket).
|
||||
// Each card: serviceBucket, icon (Lucide), title, description, result.
|
||||
const problemCards = [
|
||||
// 🏢 Website — load/SEO/visibility
|
||||
{
|
||||
bucket: 'website',
|
||||
icon: 'globe',
|
||||
title: 'เว็บไซต์โหลดช้า ลูกค้าปิดก่อนเห็นสินค้า',
|
||||
description: 'หน้าเว็บใช้เวลาโหลดเกิน 5 วินาที ลูกค้า 53% ปิดทิ้งทันที',
|
||||
result: '→ เสียโอกาสขายตั้งแต่วินาทีแรก',
|
||||
},
|
||||
{
|
||||
bucket: 'website',
|
||||
icon: 'search',
|
||||
title: 'อยู่หน้า 5 ของ Google หรือหายไปเลย',
|
||||
description: 'ลูกค้าค้นหาแล้วไม่เจอเว็บคุณ เจอแต่คู่แข่ง',
|
||||
result: '→ ต้องจ่ายค่าโฆษณาเพิ่มทุกเดือน',
|
||||
},
|
||||
{
|
||||
bucket: 'website',
|
||||
icon: 'shoppingCart',
|
||||
title: 'เว็บมีอยู่ แต่ลูกค้าซื้อไม่ได้',
|
||||
description: '<27>อร์มไม่ส่ง ตะกร้าค้าง ชำระเงินไม่ผ่าน',
|
||||
result: '→ ยอดขายตกทั้งที่คนเข้าเว็บเยอะ',
|
||||
},
|
||||
// ⚙️ AI Automation — operations / efficiency
|
||||
{
|
||||
bucket: 'automation',
|
||||
icon: 'message',
|
||||
title: 'ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน',
|
||||
description: 'ทีม 1–2 คนตอบไม่ไหว ลูกค้ารอ 5 นาทีแล้วไปซื้อที่อื่น',
|
||||
result: '→ ยอดหายโดยไม่มีใครรู้ตัว',
|
||||
},
|
||||
{
|
||||
bucket: 'automation',
|
||||
icon: 'clipboard',
|
||||
title: 'งานซ้ำ ๆ ใช้เวลาคนเป็นชั่วโมงทุกวัน',
|
||||
description: 'คีย์ข้อมูล ทำใบเสนอราคา อัปเดตสต็อก ทุกอย่างทำมือ',
|
||||
result: '→ ต้นทุนค่าแรงสูงขึ้นโดยไม่จำเป็น',
|
||||
},
|
||||
{
|
||||
bucket: 'automation',
|
||||
icon: 'cog',
|
||||
title: 'ระบบแยกกัน ไม่คุยกัน',
|
||||
description: 'CRM · ERP · ระบบบัญชี · หน้าร้าน ต่างคนต่างอยู่',
|
||||
result: '→ ตัดสินใจช้า เพราะข้อมูลไม่เชื่อม',
|
||||
},
|
||||
// 📈 SEO + Content — traffic / leads
|
||||
{
|
||||
bucket: 'marketing',
|
||||
icon: 'trendingDown',
|
||||
title: 'ลงโฆษณา แต่ยอดขายไม่ขยับ',
|
||||
description: 'คลิกเยอะ แต่ไม่มีใครซื้อ — ไม่มี Funnel ไม่มี Lead scoring',
|
||||
result: '→ เงินหายไปกับคลิกที่ไม่มีคุณภาพ',
|
||||
},
|
||||
{
|
||||
bucket: 'marketing',
|
||||
icon: 'pen',
|
||||
title: 'เขียนคอนเทนต์เองไม่ทัน',
|
||||
description: 'อยากโพสต์สม่ำเสมอ แต่ทีมไม่มีเวลา',
|
||||
result: '→ คอนเทนต์หยุดชะงัก ลูกค้าลืม',
|
||||
},
|
||||
{
|
||||
bucket: 'marketing',
|
||||
icon: 'megaphone',
|
||||
title: 'ไม่รู้ว่าใครซื้อ ใครแค่ทักมาถามเล่น',
|
||||
description: 'ไม่มีระบบติดตาม ไม่มี CRM ไม่มี Report',
|
||||
result: '→ ลงทุนการตลาดแบบเดา',
|
||||
},
|
||||
// 🖥️ Tech Consult — infrastructure / scale
|
||||
{
|
||||
bucket: 'tech',
|
||||
icon: 'server',
|
||||
title: 'ไม่อยากจ้างทีม IT แต่ต้องมี Server',
|
||||
description: 'ระบบหลังบ้านต้องทำงาน แต่จ้างประจำแพงเกิน',
|
||||
result: '→ ต้นทุนคงที่สูงโดยไม่คุ้ม',
|
||||
},
|
||||
{
|
||||
bucket: 'tech',
|
||||
icon: 'shield',
|
||||
title: 'กังวลเรื่อง PDPA / ข้อมูลรั่วไหล',
|
||||
description: 'เก็บข้อมูลลูกค้าแต่ไม่รู้ว่าปลอดภัยแค่ไหน',
|
||||
result: '→ เสี่ยงถูกฟ้องร้อง ถูกปรับ',
|
||||
},
|
||||
{
|
||||
bucket: 'tech',
|
||||
icon: 'monitor',
|
||||
title: 'อยากใช้ AI แต่ไม่รู้จะเริ่มยังไง',
|
||||
description: 'มี ChatGPT ใช้ แต่เอามาทำงานจริงในธุรกิจไม่เป็น',
|
||||
result: '→ เสียโอกาสที่ AI จะช่วยลดงานได้',
|
||||
},
|
||||
];
|
||||
|
||||
const bucketLabels: Record<string, string> = {
|
||||
website: 'Website',
|
||||
automation: 'AI Automation',
|
||||
marketing: 'SEO + Content',
|
||||
tech: 'Tech Consult',
|
||||
};
|
||||
|
||||
// Pre-group problem cards by bucket (4 groups, in canonical service order)
|
||||
const problemGroupOrder = ['website', 'automation', 'marketing', 'tech'] as const;
|
||||
const problemGroups = problemGroupOrder.map((bucket) => ({
|
||||
bucket,
|
||||
label: bucketLabels[bucket],
|
||||
cards: problemCards.filter((c) => c.bucket === bucket),
|
||||
}));
|
||||
---
|
||||
|
||||
<Base title="MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
badge={home?.data.badge}
|
||||
title={home?.data.title}
|
||||
subtitle={home?.data.subtitle}
|
||||
/>
|
||||
badge={homeContent.badge}
|
||||
title={homeContent.title}
|
||||
subtitle={homeContent.subtitle}
|
||||
>
|
||||
<a slot="hero-cta-secondary" href="/portfolio" class="btn btn-outline-dark">
|
||||
ดูผลงานจริง
|
||||
</a>
|
||||
</Hero>
|
||||
|
||||
<!-- STATS SECTION — yellow band (counters animate on view) -->
|
||||
<section class="section section-stats reveal">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number counter" data-from="0">50+</span>
|
||||
<span class="stat-label">โปรเจกต์สำเร็จ</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number counter" data-from="0">40+</span>
|
||||
<span class="stat-label">ลูกค้าที่ไว้วางใจ</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number counter" data-from="0">5+</span>
|
||||
<span class="stat-label">ปีประสบการณ์</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number counter" data-from="0">24/7</span>
|
||||
<span class="stat-label">ให้บริการ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROBLEM SECTION — light, 3 cards (stagger-children) -->
|
||||
<!-- PROBLEM SECTION — 12 pain cards, 3 per service bucket (light) -->
|
||||
<section class="section section-soft">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
@@ -67,34 +159,28 @@ const serviceImages: Record<string, string> = {
|
||||
<h2 class="section-title">
|
||||
คุณกำลังเจอ <span class="highlight">แบบนี้อยู่</span> ใช่ไหม?
|
||||
</h2>
|
||||
<p class="section-desc">12 ปัญหาที่แบ่งตามบริการของเรา เลือกดูได้เลยว่าตรงกับคุณข้อไหน</p>
|
||||
</div>
|
||||
|
||||
<div class="problem-grid stagger-children">
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<Icon name="message" />
|
||||
{problemGroups.map((group) => (
|
||||
<div class="problem-group reveal">
|
||||
<h3 class="problem-group-title">
|
||||
<span class="problem-group-tag">{group.label}</span>
|
||||
</h3>
|
||||
<div class="problem-grid">
|
||||
{group.cards.map((card) => (
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon-badge">
|
||||
<Icon name={card.icon} size={28} color="dark" />
|
||||
</div>
|
||||
<h4 class="problem-title">{card.title}</h4>
|
||||
<p class="problem-desc">{card.description}</p>
|
||||
<span class="problem-result">{card.result}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<h3 class="problem-title">ลูกค้าทัก LINE เข้ามา แต่ตอบไม่ทัน</h3>
|
||||
<p class="problem-desc">ทีมเซลล์ 1–2 คน ตอบแชตไม่ไหว ลูกค้ารอ 5 นาทีแล้วไปซื้อที่อื่น</p>
|
||||
<span class="problem-result">→ ยอดหายก่อนที่คุณจะเห็น</span>
|
||||
</div>
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<Icon name="trendingDown" />
|
||||
</div>
|
||||
<h3 class="problem-title">ลงโฆษณา แต่ยอดขายไม่ขยับ</h3>
|
||||
<p class="problem-desc">ไม่มีระบบ Lead ไม่มี Funnel ไม่รู้ว่าใครซื้อ ใครแค่ทักมาถามเล่น</p>
|
||||
<span class="problem-result">→ เงินหายไปกับคลิกที่ไม่มีคุณภาพ</span>
|
||||
</div>
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<Icon name="globe" />
|
||||
</div>
|
||||
<h3 class="problem-title">เว็บไซต์มีอยู่ แต่ไม่มีใครเจอใน Google</h3>
|
||||
<p class="problem-desc">อันดับหน้า 5 ไม่มีใครเปิด ขณะที่คู่แข่งติดหน้าแรกจาก SEO อย่างเดียว</p>
|
||||
<span class="problem-result">→ เสียเงินฟรีทุกเดือน</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<p class="problem-closing reveal">
|
||||
<span class="highlight">ทุกปัญหาข้างต้นแก้ได้ด้วยระบบเดียว</span> — ดูว่าเราทำยังไง
|
||||
@@ -139,14 +225,14 @@ const serviceImages: Record<string, string> = {
|
||||
<div class="container">
|
||||
<blockquote class="pull-quote">
|
||||
<p class="quote-text">
|
||||
"เราไม่ได้ขายเว็บไซต์ — เราสร้างระบบที่<span class="highlight">ทำเงินให้ธุรกิจคุณ</span>"
|
||||
"เป้าหมายของเราคือ <span class="highlight">กำไรที่มากขึ้นของลูกค้า</span>"
|
||||
</p>
|
||||
<cite class="quote-author">— มอร์มินิมอร์, ปรัชญาการทำงาน</cite>
|
||||
<cite class="quote-author">— มอร์มินิมอร์, ปณิธานการทำงาน</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PORTFOLIO PREVIEW — 3 latest on soft -->
|
||||
<!-- PORTFOLIO PREVIEW — 4 featured on soft -->
|
||||
<section class="section section-soft">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
@@ -154,45 +240,27 @@ const serviceImages: Record<string, string> = {
|
||||
<h2 class="section-title">
|
||||
ลูกค้าจริง <span class="highlight">ผลลัพธ์จริง</span>
|
||||
</h2>
|
||||
<p class="section-desc">9 โปรเจกต์ที่เราภาคภูมิใจ — ตั้งแต่ร้านค้าออนไลน์ ไปจนถึงโรงงานฉีดพลาสติก</p>
|
||||
<p class="section-desc">ตัวอย่างผลงานที่เราภาคภูมิใจ — คลิกดูเว็บจริงได้เลย</p>
|
||||
</div>
|
||||
|
||||
<div class="blog-editorial reveal">
|
||||
{sortedPosts[0] && (
|
||||
<a href={`/blog/${sortedPosts[0].id}`} class="blog-featured">
|
||||
<div class="blog-image">
|
||||
<img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="lazy" />
|
||||
<span class="blog-badge">บทความล่าสุด</span>
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
<span class="blog-category">{sortedPosts[0].data.category}</span>
|
||||
<h3 class="blog-title">{sortedPosts[0].data.title}</h3>
|
||||
<p class="blog-excerpt">{sortedPosts[0].data.excerpt}</p>
|
||||
<span class="read-more">อ่านต่อ →</span>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
|
||||
<div class="blog-sidebar">
|
||||
{sortedPosts.slice(1, 4).map((post) => (
|
||||
<a href={`/blog/${post.id}`} class="blog-card-mini">
|
||||
<div class="blog-card-image">
|
||||
<img src={post.data.image} alt={post.data.title} loading="lazy" />
|
||||
</div>
|
||||
<div class="blog-card-content">
|
||||
<span class="blog-category-small">{post.data.category}</span>
|
||||
<h4 class="blog-title-small">{post.data.title}</h4>
|
||||
<span class="blog-date-small">
|
||||
{new Date(post.data.date).toLocaleDateString('th-TH', { month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="portfolio-preview-grid stagger-children">
|
||||
{featuredPortfolio.map((item) => (
|
||||
<PortfolioCard
|
||||
name={item.data.name}
|
||||
url={item.data.url}
|
||||
category={item.data.category}
|
||||
category_label={item.data.category_label}
|
||||
industry={item.data.industry}
|
||||
thumbnail={item.data.thumbnail}
|
||||
description={item.data.description}
|
||||
what_we_did={item.data.what_we_did}
|
||||
result={item.data.result}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="section-cta">
|
||||
<a href="/blog" class="btn btn-dark btn-lg">บทความทั้งหมด →</a>
|
||||
<a href="/portfolio" class="btn btn-dark btn-lg">ดูผลงานทั้งหมด →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -223,39 +291,6 @@ const serviceImages: Record<string, string> = {
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
/* ============================================
|
||||
STATS — yellow band
|
||||
============================================ */
|
||||
.section-stats {
|
||||
background: var(--color-primary);
|
||||
padding: 60px 0;
|
||||
}
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(48px, 7vw, 80px);
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
line-height: 1;
|
||||
}
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-top: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SECTION HEADER (light)
|
||||
============================================ */
|
||||
@@ -305,49 +340,96 @@ const serviceImages: Record<string, string> = {
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
PROBLEM CARDS
|
||||
PROBLEM CARDS — 12 cards, 3 per service bucket
|
||||
============================================ */
|
||||
.section-soft { background: var(--color-bg-alt); }
|
||||
|
||||
.problem-group {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
.problem-group:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.problem-group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.problem-group-tag {
|
||||
display: inline-block;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--color-black);
|
||||
background: var(--color-primary);
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.problem-group-title::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.problem-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
.problem-card {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 32px;
|
||||
padding: 28px 24px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.problem-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.problem-icon { margin-bottom: 16px; }
|
||||
.problem-icon-badge {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
border: 2px solid var(--color-black);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.problem-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.problem-desc {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
.problem-result {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
.problem-closing {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
margin-top: 48px;
|
||||
font-size: 18px;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
@@ -454,12 +536,12 @@ const serviceImages: Record<string, string> = {
|
||||
}
|
||||
.section-dark-quote .pull-quote {
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.quote-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 48px);
|
||||
font-size: clamp(28px, 4.5vw, 56px);
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
color: var(--color-white);
|
||||
@@ -477,170 +559,39 @@ const serviceImages: Record<string, string> = {
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BLOG EDITORIAL PREVIEW
|
||||
PORTFOLIO PREVIEW GRID — 2x2 on desktop
|
||||
============================================ */
|
||||
.blog-editorial {
|
||||
.portfolio-preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.blog-featured {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.blog-featured:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.blog-featured .blog-image {
|
||||
position: relative;
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
.blog-featured .blog-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.blog-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blog-featured .blog-content {
|
||||
padding: 32px;
|
||||
}
|
||||
.blog-category {
|
||||
display: inline-block;
|
||||
background: var(--color-bg-soft);
|
||||
color: var(--color-gray-600);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.blog-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.blog-excerpt {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.read-more {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.blog-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.blog-card-mini {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 12px;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.blog-card-mini:hover {
|
||||
transform: translateX(4px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
.blog-card-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--color-bg-soft);
|
||||
}
|
||||
.blog-card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.blog-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.blog-category-small {
|
||||
font-size: 10px;
|
||||
color: var(--color-gray-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.blog-title-small {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
line-height: 1.3;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.blog-date-small {
|
||||
font-size: 11px;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FINAL CTA (yellow)
|
||||
FINAL CTA
|
||||
============================================ */
|
||||
.section-yellow { background: var(--color-primary); }
|
||||
.cta-section .cta-content {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cta-section .cta-title {
|
||||
.cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
|
||||
.cta-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(28px, 4vw, 48px);
|
||||
font-size: clamp(28px, 4vw, 44px);
|
||||
font-weight: 900;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.cta-section .cta-desc {
|
||||
.cta-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.cta-section .cta-actions {
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.cta-section .cta-reassurance {
|
||||
.cta-reassurance {
|
||||
margin-top: 24px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
@@ -649,13 +600,13 @@ const serviceImages: Record<string, string> = {
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.problem-grid { grid-template-columns: 1fr; }
|
||||
.problem-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.services-mega-grid { grid-template-columns: 1fr; }
|
||||
.blog-editorial { grid-template-columns: 1fr; }
|
||||
.portfolio-preview-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
.problem-grid { grid-template-columns: 1fr; }
|
||||
.portfolio-preview-grid { grid-template-columns: 1fr; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.cta-actions .btn { width: 100%; justify-content: center; }
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { getEmDashCollection } from "emdash";
|
||||
import type { CollectionEntry } from "astro:content";
|
||||
|
||||
export function resolveBlogSiteIdentity(entry: CollectionEntry<"blog">) {
|
||||
return {
|
||||
title: entry.data.title,
|
||||
description: entry.data.excerpt,
|
||||
image: entry.data.image,
|
||||
};
|
||||
}
|
||||
|
||||
export function getReadingTime(content: string): string {
|
||||
const wordsPerMinute = 200;
|
||||
const words = content.split(/\s+/).length;
|
||||
const minutes = Math.ceil(words / wordsPerMinute);
|
||||
return `${minutes} นาที`;
|
||||
}
|
||||
|
||||
export async function getBlogPosts() {
|
||||
const { entries } = await getEmDashCollection("blog");
|
||||
return entries.sort((a, b) => {
|
||||
const dateA = new Date(a.data.date || 0).getTime();
|
||||
const dateB = new Date(b.data.date || 0).getTime();
|
||||
return dateB - dateA;
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user