feat(portfolio): hover overlay for all cards + mobile tap + case studies cleanup

Changes:
- Deleted 9 case studies A-I (no real URLs)
- Researched 5 real client websites (Baofuling, Lungfinler, Trainersunny, Underdog, Luadjob) and wrote accurate what_we_did
- Added mobile tap support (ontouchstart toggle + .tapped class)
- All 9 remaining portfolio cards now use hover/tap overlay for what_we_did
- Removed fabricated features from what_we_did (user-caught: ระบบขอใบเสนอราคา, ระบบนัดหมาย)
This commit is contained in:
Kunthawat Greethong
2026-06-10 10:16:53 +07:00
parent 746d51569b
commit 57eaa9da8b
9 changed files with 108 additions and 53 deletions

View File

@@ -18,7 +18,9 @@ interface Props {
const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props; const { name, url, category, category_label, industry, thumbnail, description, what_we_did, result } = Astro.props;
--- ---
<a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}> <a href={url || '#'} target="_blank" rel="noopener noreferrer" class="portfolio-card" data-category={category}
ontouchstart="this.classList.toggle('tapped')"
onclick="if(this.classList.contains('tapped')&&window.innerWidth<768){this.classList.remove('tapped');return false;}">
<div class="portfolio-image"> <div class="portfolio-image">
<img src={thumbnail} alt={name} loading="lazy" /> <img src={thumbnail} alt={name} loading="lazy" />
<div class="portfolio-overlay"> <div class="portfolio-overlay">
@@ -93,7 +95,8 @@ const { name, url, category, category_label, industry, thumbnail, description, w
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.portfolio-card:hover .portfolio-overlay { .portfolio-card:hover .portfolio-overlay,
.portfolio-card.tapped .portfolio-overlay {
opacity: 1; opacity: 1;
} }

View File

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

View File

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

View File

@@ -4,7 +4,7 @@ url: "https://lawyernoom.com"
category: webdev category: webdev
category_label: "พัฒนาเว็บไซต์" category_label: "พัฒนาเว็บไซต์"
industry: "สำนักงานกฎหมาย" industry: "สำนักงานกฎหมาย"
what_we_did: "ออกแบบเว็บไซต์สำนักงานกฎหมาย น่าเชื่อถือ + SEO ท้องถิ่น + ระบบนัดหมาย" what_we_did: "ออกแบบเว็บไซต์สำนักงานกฎหมาย น่าเชื่อถือ + SEO ท้องถิ่น"
result: "เว็บไซต์มืออาชีพที่สร้างความเชื่อมั่นให้ลูกความ" result: "เว็บไซต์มืออาชีพที่สร้างความเชื่อมั่นให้ลูกความ"
thumbnail: "/images/portfolio/lawyernoom.png" thumbnail: "/images/portfolio/lawyernoom.png"
featured: true featured: true

View File

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

View File

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

View File

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

View File

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

View File

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