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
@@ -18,7 +18,9 @@ interface 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">
|
||||
<img src={thumbnail} alt={name} loading="lazy" />
|
||||
<div class="portfolio-overlay">
|
||||
@@ -93,7 +95,8 @@ const { name, url, category, category_label, industry, thumbnail, description, w
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-overlay {
|
||||
.portfolio-card:hover .portfolio-overlay,
|
||||
.portfolio-card.tapped .portfolio-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
name: Baofuling Shop
|
||||
url: https://baofulingshop.com
|
||||
name: "Baofuling Shop"
|
||||
url: "https://baofulingshop.com"
|
||||
category: ecommerce
|
||||
category_label: อีคอมเมิร์ซ
|
||||
industry: 💊 สินค้าอุปโภค
|
||||
thumbnail: /images/portfolio/baofuling.png
|
||||
description: ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน
|
||||
what_we_did: ร้านค้าออนไลน์ + AI Chatbot แนะนำสินค้า
|
||||
result: Conversion rate 3.2% (สูงกว่าค่าเฉลี่ยอุตสาหกรรมความงาม 2 เท่า)
|
||||
category_label: "อีคอมเมิร์ซ"
|
||||
industry: "สินค้าความงาม"
|
||||
what_we_did: "พัฒนาเว็บไซต์ E-commerce ขายสินค้าสกินแคร์ พร้อมระบบตะกร้า + ชำระเงิน"
|
||||
result: "เว็บไซต์ขายของออนไลน์ครบวงจร ดูแลเองได้"
|
||||
thumbnail: "/images/portfolio/baofuling.png"
|
||||
featured: true
|
||||
order: 19
|
||||
---
|
||||
|
||||
58
src/content/portfolio/dataroot.md
Normal file
58
src/content/portfolio/dataroot.md
Normal 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
|
||||
@@ -4,7 +4,7 @@ url: "https://lawyernoom.com"
|
||||
category: webdev
|
||||
category_label: "พัฒนาเว็บไซต์"
|
||||
industry: "สำนักงานกฎหมาย"
|
||||
what_we_did: "ออกแบบเว็บไซต์สำนักงานกฎหมาย น่าเชื่อถือ + SEO ท้องถิ่น + ระบบนัดหมาย"
|
||||
what_we_did: "ออกแบบเว็บไซต์สำนักงานกฎหมาย น่าเชื่อถือ + SEO ท้องถิ่น"
|
||||
result: "เว็บไซต์มืออาชีพที่สร้างความเชื่อมั่นให้ลูกความ"
|
||||
thumbnail: "/images/portfolio/lawyernoom.png"
|
||||
featured: true
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
name: "เลือดจระเข้วานิไทย"
|
||||
url: "https://xn--12cail1ab7a6a8b5e5c.com"
|
||||
url: "https://เลือดจระเข้วานิไทย.com"
|
||||
category: ecommerce
|
||||
category_label: อีคอมเมิร์ซ
|
||||
industry: 💊 สินค้าอุปโภค
|
||||
thumbnail: /images/portfolio/luadjob.png
|
||||
description: ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ
|
||||
what_we_did: ร้านค้าออนไลน์ + LINE OA + แชทบอทตอบคำถามสินค้า
|
||||
result: ลดเวลาตอบแชต 70% ทีมเซลล์โฟกัสการปิดดีลได้เต็มที่
|
||||
category_label: "อีคอมเมิร์ซ"
|
||||
industry: "สินค้าอุปโภค / สุขภาพ"
|
||||
what_we_did: "พัฒนาเว็บไซต์ร้านค้าสมุนไพรและผลิตภัณฑ์เพื่อสุขภาพ"
|
||||
result: "เว็บไซต์ร้านค้าออนไลน์สำหรับผลิตภัณฑ์สุขภาพ"
|
||||
thumbnail: "/images/portfolio/luadjob.png"
|
||||
featured: true
|
||||
order: 16
|
||||
---
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
name: Lungfinler
|
||||
url: https://lungfinler.com
|
||||
name: "Lungfinler"
|
||||
url: "https://lungfinler.com"
|
||||
category: webdev
|
||||
category_label: พัฒนาเว็บไซต์
|
||||
industry: 🎨 Digital Agency
|
||||
thumbnail: /images/portfolio/lungfinler.png
|
||||
description: Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง
|
||||
what_we_did: พัฒนาเว็บไซต์ portfolio + เชื่อม LINE OA ตอบลูกค้าอัตโนมัติ
|
||||
result: Lead เพิ่มขึ้น 3 เท่าใน 2 เดือนหลังเปิดเว็บ
|
||||
category_label: "พัฒนาเว็บไซต์"
|
||||
industry: "Digital Agency"
|
||||
what_we_did: "ออกแบบ + พัฒนาเว็บไซต์เอเจนซี่ดิจิตอล พร้อมระบบ Portfolio และ Blog"
|
||||
result: "เว็บไซต์เอเจนซี่ครบวงจร แสดงผลงานได้สวยงาม"
|
||||
thumbnail: "/images/portfolio/lungfinler.png"
|
||||
featured: true
|
||||
order: 15
|
||||
---
|
||||
|
||||
@@ -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 4–6% เกือบ 3 เท่า)
|
||||
---
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
name: เทรนเนอร์ซันนี่
|
||||
url: https://trainersunny.com
|
||||
name: "เทรนเนอร์ซันนี่"
|
||||
url: "https://trainersunny.com"
|
||||
category: webdev
|
||||
category_label: พัฒนาเว็บไซต์
|
||||
industry: 📚 สถาบัน / การศึกษา
|
||||
thumbnail: /images/portfolio/trainersunny.png
|
||||
description: ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill
|
||||
what_we_did: เว็บ Personal Brand + Course landing page + Email automation
|
||||
result: Course launch แรกทำรายได้ 280,000 บาท ใน 7 วัน
|
||||
category_label: "พัฒนาเว็บไซต์"
|
||||
industry: "Personal Brand / การศึกษา"
|
||||
what_we_did: "พัฒนาเว็บไซต์อบรมสัมมนาพัฒนาศักยภาพบุคลากร พร้อมระบบลงทะเบียน"
|
||||
result: "เว็บไซต์อบรมที่ดูมืออาชีพ เพิ่มความน่าเชื่อถือ"
|
||||
thumbnail: "/images/portfolio/trainersunny.png"
|
||||
featured: true
|
||||
order: 13
|
||||
---
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
---
|
||||
name: Underdog Marketing
|
||||
url: https://underdog.run
|
||||
name: "Underdog Marketing"
|
||||
url: "https://underdog.run"
|
||||
category: webdev
|
||||
category_label: พัฒนาเว็บไซต์
|
||||
industry: 📈 Marketing Agency
|
||||
thumbnail: /images/portfolio/underdog.png
|
||||
description: บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู
|
||||
what_we_did: พัฒนา Blog + Newsletter system
|
||||
result: สมัครสมาชิก 1,200+ คนใน 6 เดือน
|
||||
category_label: "พัฒนาเว็บไซต์"
|
||||
industry: "Marketing Agency"
|
||||
what_we_did: "พัฒนาเว็บไซต์บล็อกบทความการตลาด พร้อมระบบ CMS จัดการเนื้อหา"
|
||||
result: "แพลตฟอร์มบทความการตลาดที่ใช้งานง่าย SEO Friendly"
|
||||
thumbnail: "/images/portfolio/underdog.png"
|
||||
featured: true
|
||||
order: 12
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user