1610 lines
83 KiB
Plaintext
1610 lines
83 KiB
Plaintext
---
|
|
import Base from '../../layouts/Base.astro';
|
|
import Navigation from '../../components/Navigation.astro';
|
|
import Footer from '../../components/Footer.astro';
|
|
import BentoGrid from '../../components/BentoGrid.astro';
|
|
import BentoTile from '../../components/BentoTile.astro';
|
|
import DecoOrb from '../../components/DecoOrb.astro';
|
|
import Icon from '../../components/Icon.astro';
|
|
import { getCollection, render } from 'astro:content';
|
|
|
|
export async function getStaticPaths() {
|
|
const services = await getCollection('services');
|
|
return services.map(service => ({
|
|
params: { slug: service.id },
|
|
props: { service },
|
|
}));
|
|
}
|
|
|
|
const { service } = Astro.props;
|
|
const { Content } = await render(service);
|
|
|
|
const slug = service.id;
|
|
const isWebDev = slug === 'webdev';
|
|
const isMarketing = slug === 'marketing';
|
|
const isAutomation = slug === 'automation';
|
|
const isTechConsult = slug === 'ai-consult';
|
|
|
|
// Service-specific data — keyed by slug, with safe fallback to webdev.
|
|
const serviceData: Record<string, any> = {
|
|
'webdev': {
|
|
badge: 'บริการรับทำเว็บไซต์สำหรับ SME ไทย',
|
|
title: 'สร้างเว็บไซต์',
|
|
titleAccent: 'เปลี่ยนแปลงเองได้',
|
|
titleAccent2: 'ด้วย AI',
|
|
desc: 'เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ไม่ต้องรอเราทุกครั้ง พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที + GEO ติด ChatGPT, Perplexity, AI Search',
|
|
whyUs: [
|
|
{ num: '01', title: 'ทำเสร็จไว', desc: 'เว็บ Astro 14-30 วัน · WordPress 1-3 เดือน' },
|
|
{ num: '02', title: 'แก้เองได้', desc: 'ลูกค้าดูแลเนื้อหาเอง ไม่ต้องพึ่งเราทุกครั้ง' },
|
|
{ num: '03', title: 'ติด Google + AI', desc: 'SEO + GEO ติด ChatGPT, Perplexity, Google AI' },
|
|
{ num: '04', title: 'Server ฟรีปีแรก', desc: 'พร้อม SSL และ Domain .com ปีแรก' },
|
|
],
|
|
services: [
|
|
{
|
|
icon: 'pen', span: 6, surface: 'mint',
|
|
title: 'แก้ไขเนื้อหาง่าย ไม่ต้องมีความรู้เทคนิค',
|
|
bullets: [
|
|
'ระบบหลังบ้านใช้ง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้เอง',
|
|
'อบรมการใช้งานให้ทีมของคุณ ใช้งานได้ทันที',
|
|
'มีคู่มือ + วิดีโอประกอบ ทบทวนได้ทุกเมื่อ',
|
|
],
|
|
},
|
|
{
|
|
icon: 'bot', span: 6, surface: 'yellow',
|
|
title: 'AI ช่วยสร้างเนื้อหา + แนะนำการปรับปรุง',
|
|
bullets: [
|
|
'สั่ง AI เขียนบทความ SEO + GEO ได้ทันที',
|
|
'AI แนะนำหัวข้อบทความใหม่ที่ตรงกับลูกค้าของคุณ',
|
|
'AI วิเคราะห์เนื้อหาเดิม บอกจุดที่ควรปรับ',
|
|
],
|
|
},
|
|
{
|
|
icon: 'search', span: 6, surface: 'purple-soft',
|
|
title: 'SEO + GEO ติด Google และ AI Search',
|
|
bullets: [
|
|
'ติด ChatGPT, Perplexity, Google AI Overviews',
|
|
'ถูกอ้างอิงเมื่อลูกค้าถาม AI เกี่ยวกับสินค้าของคุณ',
|
|
'โครงสร้างเว็บไซต์ออกแบบมาเพื่อให้ AI อ่านเข้าใจ',
|
|
],
|
|
},
|
|
{
|
|
icon: 'shield', span: 6, surface: 'teal-soft',
|
|
title: 'Server + SSL + Backup ครบ ดูแลให้',
|
|
bullets: [
|
|
'Server เร็ว โหลดไว ไม่มี downtime บ่อย',
|
|
'SSL ฟรี เว็บปลอดภัย + Google จัดอันดับดี',
|
|
'Backup อัตโนมัติทุกวัน ไม่ต้องกลัวข้อมูลหาย',
|
|
],
|
|
},
|
|
],
|
|
techOptions: [
|
|
{ badge: 'A', name: 'Astro', surface: 'yellow', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน', best: 'ธุรกิจที่ต้องการเว็บเร็ว ติด Google + AI Search' },
|
|
{ badge: 'WP', name: 'WordPress', surface: 'soft', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน', best: 'ร้านค้าออนไลน์ เว็บที่ต้องการ Plugin หลากหลาย' },
|
|
],
|
|
workflow: [
|
|
'สรุป requirement และปัญหาที่มีอยู่',
|
|
'ออกแบบดีไซน์เบื้องต้น',
|
|
'พัฒนาเว็บไซต์',
|
|
'ทดสอบ',
|
|
'ส่งมอบ',
|
|
],
|
|
targets: [
|
|
'ธุรกิจที่ยังไม่มีเว็บไซต์',
|
|
'ธุรกิจที่ต้องการสร้างแบรนด์ หรือ สร้างการรับรู้',
|
|
'ธุรกิจที่ต้องการทำการตลาดออนไลน์',
|
|
'ธุรกิจที่ต้องการเปลี่ยนเว็บไซต์เก่า',
|
|
],
|
|
pricing: [
|
|
{
|
|
tier: 'เริ่มต้น',
|
|
label: 'Astro Landing',
|
|
bestFor: 'เว็บ 1 หน้า ทดสอบตลาด',
|
|
amount: '5,000',
|
|
period: '/ เริ่มต้น',
|
|
features: ['✓ เว็บ 1 หน้า', '✓ Responsive', '✓ SSL + Domain 1 ปี', '✗ ระบบหลังบ้าน'],
|
|
},
|
|
{
|
|
tier: 'มาตรฐาน',
|
|
label: 'Website Astro',
|
|
bestFor: 'เว็บบริษัท 5-15 หน้า เน้น SEO + AI',
|
|
amount: '5,000+',
|
|
period: '/ เริ่มต้น',
|
|
features: ['✓ เว็บ 5-15 หน้า', '✓ SEO + GEO (ติด ChatGPT)', '✓ AI ช่วยสร้างเนื้อหา', '✓ Server + SSL + Domain 1 ปี'],
|
|
},
|
|
{
|
|
tier: 'ขั้นสูง',
|
|
label: 'Website WordPress',
|
|
bestFor: 'E-commerce + Plugin ครบ',
|
|
amount: '15,000',
|
|
period: '/ เริ่มต้น',
|
|
features: ['✓ เว็บไม่จำกัดหน้า', '✓ E-commerce + ตะกร้า + ชำระเงิน', '✓ Plugin ตามต้องการ', '✓ อบรมการใช้งาน'],
|
|
},
|
|
],
|
|
realPortfolio: [
|
|
{ name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'หน้าแรกโหลดไว + ติด Google ได้ผลดี' },
|
|
],
|
|
faqs: [
|
|
{ q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา คุณพิมพ์สั่ง AI ได้เลยว่าอยากได้เนื้อหาแบบไหน ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย เหมือนใช้ Word คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค และทีมเราจะอบรมการใช้งานให้ก่อนส่งมอบ' },
|
|
{ q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก คุณจ่ายเฉพาะค่าทำเว็บไซต์ และจะมีค่าใช้จ่ายในปีถัดไป: ค่า Server ประมาณ 5,000 บาท/ปี + ค่าโดเมน 500 บาท/ปี ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม ถ้าเว็บมีคนเข้าน้อยกว่า 100,000 คน/เดือน ค่า Server ไม่เพิ่ม' },
|
|
{ q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด อัปเดตความปลอดภัย และแก้ไขปัญหาเบื้องต้น ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือถ้าเว็บมีฟีเจอร์ที่ต้องใช้ทรัพยากร Server สูง เช่น AI Chatbot ที่คุยกับลูกค้าจำนวนมาก' },
|
|
{ q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress + WooCommerce เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน (PromptPay / โอนผ่านธนาคาร / บัตรเครดิต) ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร คุณสามารถเพิ่มสินค้า ลดราคา จัดโปรโมชั่น ได้ด้วยตัวเอง' },
|
|
{ q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ ถ้าเจอปัญหาการใช้งาน ทีมซัพพอร์ตพร้อมช่วยทันที' },
|
|
{ q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI เมื่อมีคนถามเกี่ยวกับสินค้าหรือบริการในกลุ่มของคุณ เป็นอีกช่องทางที่จะดึงลูกค้าเข้ามา' },
|
|
{ q: 'เว็บจะติด Google ในกี่เดือน?', a: 'ขึ้นอยู่กับคีย์เวิร์ดและการแข่งขัน สำหรับคีย์เวิร์ดที่มีการแข่งขันปานกลาง ประมาณ 2-3 เดือนจะเริ่มเห็นผล ส่วนคีย์เวิร์ดที่แข่งขันสูงอาจใช้เวลา 6 เดือนขึ้นไป เราจะวิเคราะห์คีย์เวิร์ดที่เหมาะสมก่อนเริ่มทำ SEO' },
|
|
{ q: 'ถ้าอยากเพิ่มฟีเจอร์ทีหลัง ทำได้ไหม?', a: 'ได้แน่นอน เว็บไซต์ที่เราทำออกแบบมาให้ขยายได้ คุณสามารถเพิ่มฟีเจอร์ เช่น ระบบจองคิว ระบบสมาชิก ระบบชำระเงินเพิ่ม หรือเชื่อมต่อกับ API ภายนอก ทีมเราจะประเมินราคาเพิ่มเติมตามฟีเจอร์ที่ต้องการ แจ้งราคาก่อนเริ่มงานทุกครั้ง ทั้งนี้ ถ้าเว็บไซต์ทำจาก Astro การเพิ่มบางฟีเจอร์ที่ซับซ้อนอาจจะมีค่าใช้จ่ายสูงมาก จนบางครั้งการเปลี่ยนระบบไปใช้ WordPress อาจจะมีค่าใช้จ่ายถูกกว่า เช่น การเปลี่ยนเว็บ Astro ให้เป็น E-commerce แบบมีสินค้ามากกว่า 5 ตัว มีระบบตะกร้า และต้องการระบบฐานข้อมูลด้วย เคสนี้เปลี่ยนไปใช้ WordPress จะมีค่าใช้จ่ายถูกกว่า แต่ถ้าเว็บ Astro จะเพิ่มให้มีปุ่มชำระเงินผ่าน Stripe ที่คนไทยใช้ได้โดยจ่ายผ่านบัตรเครดิต แบบนี้ทำได้ โดยค่าใช้จ่ายไม่เกิน 3,000 บาท' },
|
|
],
|
|
},
|
|
'marketing': {
|
|
badge: 'บริการ Online Marketing Consult ครบวงจร',
|
|
title: 'ที่ปรึกษา',
|
|
titleAccent: 'Online Marketing',
|
|
titleAccent2: 'พร้อม AI + Automation',
|
|
desc: 'วางกลยุทธ์การตลาดออนไลน์จากข้อมูลจริง ออกแบบระบบงานให้พนักงานทำงานง่ายขึ้น พร้อมเครื่องมือ AI + n8n + ระบบรายงานเชิงลึก',
|
|
whyUs: [
|
|
{ num: '01', title: 'ลดเวลาในการสร้างสื่อ', desc: 'ระบบ AI + Template ช่วยให้ทีมสร้างสื่อได้เร็วขึ้น ไม่ต้องเริ่มจากศูนย์' },
|
|
{ num: '02', title: 'เน้นงบคุ้มค่า', desc: 'ใช้เงินน้อยแต่หวังผลมาก ไม่หว่านเงิน ตัดสิ่งที่ไม่ Convert ออก' },
|
|
{ num: '03', title: 'เจาะกลุ่มเป้าหมาย', desc: 'ยิงให้ตรงกลุ่ม ไม่ใช่ยิงทุกคน เพิ่มโอกาสปิดดีล' },
|
|
{ num: '04', title: 'ไม่ตามกระแส', desc: 'ถ้าตามแล้วผลไม่คุ้ม ไม่แนะนำ เน้นกลยุทธ์ระยะยาว' },
|
|
],
|
|
services: [
|
|
{
|
|
icon: 'pen', span: 6, surface: 'yellow',
|
|
title: 'พัฒนาระบบงาน Marketing ให้สร้างสื่ออัตโนมัติ',
|
|
bullets: [
|
|
'วิเคราะห์การทำงาน + สไตล์การทำงานของพนักงาน + รวบรวมสถิติทางการตลาดเดิม',
|
|
'ออกแบบระบบงานให้มี AI/Tool มาช่วย โดยไม่กระทบความเคยชินของพนักงาน',
|
|
'เลือก Tool และ Platform ที่เหมาะกับงาน + ผลลัพธ์ที่ต้องการ',
|
|
],
|
|
},
|
|
{
|
|
icon: 'barChart', span: 6, surface: 'mint',
|
|
title: 'ระบบรายงานการตลาดเชิงลึก',
|
|
bullets: [
|
|
'เมื่อมีระบบการทำงานครบ จะมีสถิติข้อมูลเป็นระบบ',
|
|
'นำข้อมูลมาวิเคราะห์ด้วย AI เพื่อหาโอกาสทางธุรกิจใหม่ ๆ',
|
|
'แดชบอร์ดสรุปผลที่เข้าใจง่าย ดูผลได้ทันที',
|
|
],
|
|
},
|
|
{
|
|
icon: 'megaphone', span: 12, surface: 'teal-soft',
|
|
title: 'กลยุทธ์ด้านการตลาดออนไลน์',
|
|
bullets: [
|
|
'วางกลยุทธ์ให้เหมาะกับธุรกิจ สินค้า และกลุ่มเป้าหมาย',
|
|
'SEO + GEO — สร้างแบรนด์และความน่าเชื่อถือระยะยาว',
|
|
'การโฆษณา — ใช้งบอย่างมีประสิทธิภาพ เพิ่มยอดขายสูงสุด',
|
|
'ช่องทางจำหน่าย — แนะนำช่องทางออนไลน์ที่เหมาะ ไม่ตามกระแสที่ผลระยะสั้น',
|
|
],
|
|
},
|
|
],
|
|
techOptions: [
|
|
{ badge: 'N8N', name: 'n8n', surface: 'yellow', desc: 'เครื่องมือ Automation แบบ Open Source ยืดหยุ่นสูง เชื่อมต่อได้หลายระบบ เหมาะกับ Workflow ที่ซับซ้อน', duration: 'ตามขอบเขต', best: 'งานที่ต้องเชื่อมหลาย Platform + AI' },
|
|
{ badge: 'G', name: 'Google Services', surface: 'mint', desc: 'Google Analytics, Search Console, Ads, Tag Manager, Business Profile', duration: 'ตามขอบเขต', best: 'การติดตาม + วัดผล SEO/โฆษณา Google' },
|
|
{ badge: 'M', name: 'Meta Services', surface: 'purple-soft', desc: 'Facebook Ads, Instagram Ads, Meta Business Suite, Pixel', duration: 'ตามขอบเขต', best: 'โฆษณา Social Media + Remarketing' },
|
|
{ badge: 'SOC', name: 'Social Media', surface: 'soft', desc: 'Facebook, Instagram, LINE Official, TikTok, X (Twitter), YouTube', duration: 'ตามขอบเขต', best: 'สร้างการรับรู้ + Engagement' },
|
|
{ badge: 'MS', name: 'Microsoft Clarity', surface: 'teal-soft', desc: 'Heatmap + Session Recording ฟรี ดูพฤติกรรมผู้ใช้จริงบนเว็บ', duration: 'ตามขอบเขต', best: 'วิเคราะห์ UX + จุดที่คนออก' },
|
|
{ badge: 'AI', name: 'LLM', surface: 'yellow', desc: 'ChatGPT, Claude, Gemini, Local LLM เลือกตามงบ + ความปลอดภัยข้อมูล', duration: 'ตามขอบเขต', best: 'สร้างเนื้อหา + วิเคราะห์ + Automation' },
|
|
{ badge: 'CA', name: 'Custom Apps', surface: 'purple-soft', desc: 'แอปที่เขียนเองเฉพาะงาน เช่น ระบบจัดการ, Dashboard, ระบบอัตโนมัติ', duration: 'ตามขอบเขต', best: 'งานเฉพาะทางที่ Tool ทั่วไปไม่ตอบโจทย์' },
|
|
],
|
|
workflow: [
|
|
'สรุป requirement และปัญหาที่มีอยู่',
|
|
'ศึกษาและวิเคราะห์ข้อมูลทางการตลาด + คุยกับทีมงาน',
|
|
'วางแผนกลยุทธ์',
|
|
'สร้างระบบงาน + ระบบเก็บข้อมูลสถิติ + ระบบรายงาน',
|
|
'นำกลยุทธ์ไปใช้จริง',
|
|
'ประเมินผลงาน และปรับปรุงกลยุทธ์',
|
|
],
|
|
targets: [
|
|
'กลุ่ม SMEs ที่ต้องการเพิ่มกำไร',
|
|
'กลุ่ม SMEs ที่มีปัญหาในการทำตลาดออนไลน์อยู่',
|
|
],
|
|
realPortfolio: [
|
|
{ name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'Impression +373%, Click +114.2%, Ad spend -28.3% จากการวิเคราะห์ข้อมูล 3 เดือน + เจาะกลุ่มใหม่' },
|
|
],
|
|
faqs: [
|
|
{ q: 'ราคารวมค่าโฆษณาด้วยไหม?', a: 'ไม่รวม ค่าโฆษณาลูกค้าจ่ายตรงกับ Platform เอง (Google, Meta, etc.) เราดูแลเรื่องวางแผน + บริหารแคมเปญให้' },
|
|
{ q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมี เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงให้ข้อมูลและดูผลลัพธ์' },
|
|
{ q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI เมื่อมีคนถามเกี่ยวกับสินค้าหรือบริการในกลุ่มของคุณ' },
|
|
{ q: 'ใช้เวลาเห็นผลนานแค่ไหน?', a: 'SEO/GEO ใช้เวลา 3 เดือนขึ้นไปจึงจะเห็นผลชัดเจน ส่วนการโฆษณา (Google Ads, Facebook Ads) มักจะเห็นผลภายใน 2-3 วัน ทั้งนี้ขึ้นอยู่กับสินค้าและกลุ่มเป้าหมายของคุณด้วย' },
|
|
{ q: 'คุมงบโฆษณาเองได้ไหม?', a: 'ได้ ปกติเราจะใช้งบโฆษณาตามที่ลูกค้าแจ้งอยู่แล้ว และจะตั้งค่าไม่ให้ใช้งบประมาณเกินทุกเดือน' },
|
|
{ q: 'เหมาะกับธุรกิจแบบไหน?', a: 'ทุกธุรกิจ เพราะในมุมมองของการทำ Online Marketing นั้นไม่ใช่แค่การขายสินค้าออนไลน์ แต่รวมถึงการสร้างการรับรู้ และการสร้าง Brand ด้วย' },
|
|
],
|
|
},
|
|
'automation': {
|
|
badge: 'บริการ AI Automation ครบวงจร',
|
|
title: 'ระบบอัตโนมัติ',
|
|
titleAccent: 'ทำงานแทนคน',
|
|
titleAccent2: 'ด้วย AI + n8n',
|
|
desc: 'แก้ปัญหาเฉพาะจุด พัฒนาระบบอัตโนมัติที่ทำงานแทนพนักงาน ลดเวลา + ลดความผิดพลาด + เชื่อมระบบเดิมเข้าด้วยกัน',
|
|
whyUs: [
|
|
{ num: '01', title: 'ลดเวลาการทำงาน', desc: 'งานซ้ำ ๆ ที่ใช้เวลาเป็นชั่วโมง ลดเหลือไม่กี่นาที ระบบทำให้' },
|
|
{ num: '02', title: 'ลดความผิดพลาด', desc: 'ระบบทำงานด้วย Logic ที่ชัดเจน ไม่เหนื่อย ไม่ลืม ไม่พิมพ์ผิด' },
|
|
],
|
|
services: [
|
|
{
|
|
icon: 'cog', span: 12, surface: 'teal-soft',
|
|
title: 'พัฒนาระบบงานให้เป็น Automation',
|
|
bullets: [
|
|
'วิเคราะห์และวางระบบงาน เพื่อหาจุดที่ AI จะช่วยงานได้',
|
|
'ปรับ Workflow ให้ผสานกับพฤติกรรมเดิมของพนักงาน แต่มี Tool/AI มาช่วย',
|
|
'ต่างจาก AI Consult ตรงที่: เน้นการแก้ปัญหาเป็นจุด ๆ ไม่มี KM ไม่มีระบบพัฒนาตัวเอง',
|
|
],
|
|
},
|
|
],
|
|
techOptions: [
|
|
{ badge: 'N8N', name: 'n8n', surface: 'yellow', desc: 'เครื่องมือ Automation แบบ Open Source ยืดหยุ่นสูง เชื่อมต่อได้หลายระบบ เหมาะกับ Workflow ที่ซับซ้อน', duration: 'ตามขอบเขต', best: 'งานที่ต้องเชื่อมหลาย Platform + AI' },
|
|
{ badge: 'AI', name: 'LLM', surface: 'mint', desc: 'ChatGPT, Claude, Gemini, Local LLM เลือกตามงบ + ความปลอดภัยข้อมูล', duration: 'ตามขอบเขต', best: 'AI วิเคราะห์ข้อมูล + ตอบคำถาม + สร้างเนื้อหา' },
|
|
{ badge: 'CA', name: 'Custom Apps', surface: 'purple-soft', desc: 'แอปที่เขียนเองเฉพาะงาน เช่น ระบบจัดการ, Dashboard, ระบบอัตโนมัติ', duration: 'ตามขอบเขต', best: 'งานเฉพาะทางที่ Tool ทั่วไปไม่ตอบโจทย์' },
|
|
],
|
|
workflow: [
|
|
'สรุป requirement และปัญหาที่มีอยู่',
|
|
'ศึกษาและวิเคราะห์ Flow งานปัจจุบัน',
|
|
'กำหนด Flow งานใหม่',
|
|
'พัฒนาแอป หรือ ระบบ AI',
|
|
'ทดสอบเบื้องต้น',
|
|
'ประเมินผลลัพธ์เบื้องต้น',
|
|
'พนักงานบางส่วนทดลองใช้',
|
|
'ปรับปรุงระบบ',
|
|
'ให้พนักงานใช้งานจริง',
|
|
],
|
|
targets: [
|
|
'กลุ่ม SMEs ที่ต้องการลดต้นทุนและเวลา',
|
|
],
|
|
faqs: [
|
|
{ q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมี เราดูแลทุกอย่างตั้งแต่ต้นจนจบ' },
|
|
{ q: 'ระบบที่มีอยู่แล้วเชื่อมได้ไหม?', a: 'ได้ เราสามารถเชื่อมต่อระบบที่มีอยู่เข้ากับ AI ได้ ไม่ว่าจะเป็น Excel, Google Sheets, CRM, ERP หรือระบบอื่น ๆ' },
|
|
{ q: 'ใช้เวลา implement นานแค่ไหน?', a: 'ประมาณ 3-6 เดือน ขึ้นอยู่กับความซับซ้อนของงาน และค่านิยมขององค์กร' },
|
|
{ q: 'ข้อมูลบริษัทปลอดภัยไหม?', a: 'ข้อมูลบริการจะปลอดภัย แต่ทั้งนี้ขึ้นอยู่กับลูกค้า ปกติถ้าข้อมูลไม่ได้เป็นความลับมาก เราจะแนะนำให้ใช้ Cloud LLM ที่ไม่มีการนำข้อมูลไปฝึก AI แต่ถ้าลูกค้ากังวล หรือข้อมูลเป็นความลับมากจริง ๆ ก็สามารถใช้ Local LLM ได้ แต่จะมีการลงทุนเรื่อง Hardware เพิ่ม' },
|
|
{ q: 'ใช้เครื่องมืออะไร?', a: 'เรามักใช้ n8n ร่วมกับ AI เป็นหลัก และหลาย ๆ เคส เราอาจจะเขียน script สำหรับบางงานโดยเฉพาะ' },
|
|
{ q: 'ดูแลหลังส่งมอบยังไง?', a: 'บริการนี้เป็นบริการรายเดือน ถ้าลูกค้าใช้ server ของเรา (มีค่า Server แยก) เราดูแลให้ระบบใช้งานได้ตามปกติ รวมถึงอัพเดท software ถ้าลูกค้าใช้ server ของตัวเองและยังใช้บริการอยู่ เราดูแลให้ทุกอย่าง + สอนทีม IT ลูกค้าใช้งานได้ ถ้าไม่ได้ใช้บริการแล้ว ลูกค้าดูแล server เอง' },
|
|
{ q: 'ต่างจาก AI Consult ยังไง?', a: 'AI Consult เน้นการเก็บความรู้ของพนักงาน (KM) + ระบบ AI ที่เรียนรู้และพัฒนา skill ใหม่อัตโนมัติ ส่วน AI Automation เน้นแก้ปัญหาเฉพาะจุด ทำระบบเสร็จแล้วจบ ไม่มี KM ไม่มีระบบพัฒนาตัวเอง' },
|
|
],
|
|
},
|
|
'ai-consult': {
|
|
badge: 'ที่ปรึกษา AI ครบวงจร',
|
|
title: 'ที่ปรึกษา AI',
|
|
titleAccent: 'ครบวงจร',
|
|
titleAccent2: 'เก็บความรู้องค์กร',
|
|
desc: 'พัฒนาระบบ AI เก็บความรู้และทักษะของพนักงาน ลดเวลา + ลดข้อผิดพลาด + ไม่ต้องพึ่งพนักงานคนใดคนหนึ่ง พร้อมให้ AI เรียนรู้และสร้าง skill ใหม่อัตโนมัติ',
|
|
whyUs: [
|
|
{ num: '01', title: 'ไม่ต้องพึ่งพนักงานเก่า', desc: 'องค์กรไม่ต้องพึ่งพนักงานเก่ามากอีกต่อไป' },
|
|
{ num: '02', title: 'ความรู้ไม่หาย', desc: 'ความรู้จะไม่หายไปเมื่อพนักงานลาออก' },
|
|
{ num: '03', title: 'เร็วขึ้น ถูกลง', desc: 'การทำงานเร็วขึ้น ต้นทุนลดลง เวลาใช้น้อยลง' },
|
|
{ num: '04', title: 'พนักงานมีเวลามากขึ้น', desc: 'เวลาของพนักงานมีมากขึ้น ทำเรื่องอื่นที่สร้างมูลค่าได้' },
|
|
],
|
|
services: [
|
|
{
|
|
icon: 'brain', span: 12, surface: 'teal-soft',
|
|
title: 'พัฒนาระบบ AI เก็บความรู้และทักษะขององค์กร',
|
|
bullets: [
|
|
'วิเคราะห์และวางระบบงาน เพื่อหาจุดที่ AI จะช่วยงานได้',
|
|
'วางระบบ AI ให้ผสานกับการทำงานของพนักงาน โดยพนักงานไม่ต้องปรับตัวมาก',
|
|
'ยิ่งพนักงานใช้ AI มากขึ้น AI ยิ่งเก็บประสบการณ์ + สร้าง skill เฉพาะธุรกิจและลูกค้าของคุณ',
|
|
'เมื่อพนักงานเปลี่ยน AI ช่วย support พนักงานใหม่ ลดข้อผิดพลาด + สื่อสารลูกค้าได้',
|
|
'ผลสุดท้าย: AI Chatbot ในองค์กรที่พนักงานใช้ช่วยทำงานส่วนใหญ่ได้',
|
|
],
|
|
},
|
|
],
|
|
techOptions: [
|
|
{ badge: 'LLM', name: 'Local LLM', surface: 'yellow', desc: 'AI รันในองค์กรเอง ไม่มีข้อมูลส่งออก ความเป็นส่วนตัวสูง เหมาะกับข้อมูลความลับ', duration: 'ตามขอบเขต', best: 'ข้อมูลที่ต้องการ privacy สูง (ยอดขาย การเงิน สินค้า)' },
|
|
{ badge: 'GL', name: 'Google Cloud LLM', surface: 'mint', desc: 'Google Gemini, Vertex AI — ความปลอดภัยระดับองค์กร ข้อมูลไม่ถูกนำไปฝึก', duration: 'ตามขอบเขต', best: 'องค์กรที่ต้องการ AI คุณภาพสูง + compliance' },
|
|
{ badge: 'CL', name: 'Cloud LLM (ราคาถูก)', surface: 'teal-soft', desc: 'ChatGPT, Claude, DeepSeek ราคาประหยัด ใช้งานได้จริง', duration: 'ตามขอบเขต', best: 'KM พนักงานทั่วไป ไม่มีข้อมูลความลับมาก' },
|
|
],
|
|
workflow: [
|
|
'สรุป requirement และปัญหาที่มีอยู่',
|
|
'ศึกษาและวิเคราะห์ Flow งานปัจจุบัน',
|
|
'กำหนด Flow งานใหม่',
|
|
'พัฒนาระบบ AI',
|
|
'ทดสอบเบื้องต้น',
|
|
'ประเมินผลลัพธ์เบื้องต้น',
|
|
'พนักงานบางส่วนทดลองใช้',
|
|
'ปรับปรุงระบบ',
|
|
'ให้พนักงานใช้งานจริง',
|
|
'ติดตามและประเมิน skill ที่ AI สร้าง',
|
|
'ปรับ skill ให้เหมาะสม',
|
|
'สร้างระบบพัฒนา skill อัตโนมัติ',
|
|
],
|
|
targets: [
|
|
'กลุ่ม SMEs ที่ต้องการใช้ AI เพื่อลดเวลาและต้นทุน',
|
|
'กลุ่มธุรกิจที่ไม่ต้องการให้พนักงานบางคนมีอำนาจมากเกินไป',
|
|
],
|
|
faqs: [
|
|
{ q: 'ที่ปรึกษา AI ช่วยอะไรได้บ้าง?', a: 'ช่วยลดเวลาการทำงาน ลดความผิดพลาด และที่สำคัญคือการเก็บรวบรวมพฤติกรรมและความรู้จากพนักงาน นำมาแบ่งปัน ทำให้ลดปัญหาพนักงานคนเดียวมีอำนาจมากเกินไปเพราะความรู้ พนักงานทุกคนสามารถเข้าถึงความรู้และใช้ AI ช่วยทำงานได้' },
|
|
{ q: 'มีค่าใช้จ่ายอะไรบ้าง?', a: 'เริ่มต้นจากการปรึกษาฟรี ค่าบริการจะขึ้นอยู่กับความซับซ้อนของโปรเจกต์และระยะเวลาที่ใช้ โดยจะแจ้งราคาให้ชัดเจนหลังคุยรายละเอียดแล้ว' },
|
|
{ q: 'ต้องมีความรู้เทคนิคไหม?', a: 'ไม่จำเป็น เราอธิบายให้เข้าใจง่าย และดูแลทุกอย่างให้' },
|
|
{ q: 'AI จะมาแทนที่พนักงานไหม?', a: 'ไม่ AI จะทำตัวเป็นผู้ช่วยงานหรือเลขาของพนักงาน คอยแนะนำ แต่งานที่มีผลลัพธ์ชัดเจน AI สามารถทำแทนได้เลย เช่น รายงาน การวิเคราะห์ข้อมูลเบื้องต้น' },
|
|
{ q: 'ใช้เวลาเห็นผลนานแค่ไหน?', a: 'ช่วงพัฒนา 1-3 เดือน หลังจากนั้นเป็นช่วงพนักงานปรับตัวเพื่อใช้ AI เป็นส่วนหนึ่งของงาน องค์กรจะเห็นผลชัดเจนเมื่อพนักงานใช้ AI จนชิน งานที่มี workflow ชัดเจนจะเร็วขึ้น พนักงานมีเวลาว่างไปทำงานสร้างมูลค่าอื่น รวมถึงพนักงานใหม่ใช้ AI เป็นพี่เลี้ยงทำงานต่อจากพนักงานเก่าที่ออกได้ทันที' },
|
|
{ q: 'ใช้ AI รุ่นไหน?', a: 'ขึ้นอยู่กับงบประมาณและความต้องการ ถ้าไม่มีข้อมูลความลับมาก ใช้ Cloud LLM ที่ไม่นำข้อมูลไปฝึก AI ก็ได้ แต่ถ้ามีข้อมูลความลับ (ยอดขาย การเงิน สินค้า แหล่งซื้อ) อาจจำเป็นต้องใช้ Local LLM ซึ่งต้องลงทุนเรื่อง Hardware เพิ่ม' },
|
|
{ q: 'ข้อมูลของเราปลอดภัยไหม?', a: 'ข้อมูลเบื้องต้นปลอดภัย เพราะเราใช้ VPS ของบริษัทเราเอง ข้อมูลการใช้ AI จะผ่าน Server เราก่อน จากนั้นขึ้นอยู่กับ LLM ที่ใช้ ถ้าใช้ Cloud LLM แบบไม่มีการนำข้อมูลไปฝึก เชื่อมั่นได้ระดับหนึ่ง ถ้าใช้ Local LLM ไม่ต้องกังวลเลย' },
|
|
{ q: 'มีบริการหลังขายไหม?', a: 'บริการนี้เป็นรายเดือน ค่า Server สำหรับระบบ AI คิดแยก ค่า LLM ลูกค้าจ่ายตรงกับผู้ให้บริการ หรือผ่านเราก็ได้ แต่ค่า LLM แยกจากค่า Server ปกติลูกค้าหยุดใช้บริการ AI Consult ได้เมื่อระบบนิ่งแล้ว (AI ของเราเรียนรู้สร้าง skill ใหม่ตลอด การยกเลิกไม่ได้หมายความว่า AI จะหยุด) แต่ถ้ายกเลิก ลูกค้ายังมีค่า Server + LLM เราจะดูแลให้ระบบใช้งานได้ + อัพเดทระบบ แต่ไม่พัฒนา skill ใหม่หรือเปลี่ยน AI Model ใหม่ ถ้าต้องการพัฒนาต่อ กลับมาใช้บริการใหม่ได้เลย' },
|
|
],
|
|
},
|
|
};
|
|
|
|
const data = serviceData[slug] || serviceData['webdev'];
|
|
const featureList = data.features || data.services || [];
|
|
---
|
|
|
|
<Base title={`${service.data.title} | MoreminiMore`}>
|
|
<Navigation />
|
|
|
|
<!-- HERO -->
|
|
<section class="service-hero section-bento">
|
|
<DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.3} blur="80px" />
|
|
<DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
|
|
<div class="container" style="position: relative; z-index: 1;">
|
|
<div class="hero-grid">
|
|
<div class="hero-content">
|
|
<span class="hero-badge">{data.badge}</span>
|
|
<h1 class="hero-title">
|
|
<span class="hero-line">{data.title}</span>
|
|
<span class="hero-line hero-accent">{data.titleAccent}</span>
|
|
{data.titleAccent2 && <span class="hero-line">{data.titleAccent2}</span>}
|
|
</h1>
|
|
<p class="hero-desc">{data.desc}</p>
|
|
|
|
<div class="hero-actions">
|
|
<a href="tel:0809955945" class="btn btn-primary">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path 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"/>
|
|
</svg>
|
|
โทรหาเรา
|
|
</a>
|
|
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-9.491.371-.661.56-1.388.56-2.159"/></svg>
|
|
ทัก LINE
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero side — 4 why-us tiles stacked -->
|
|
<div class="hero-visual">
|
|
<div class="hero-trust-title">ทำไมต้องเลือกเรา</div>
|
|
<div class="hero-trust-grid">
|
|
{data.whyUs && data.whyUs.map((w: any) => (
|
|
<div class="hero-trust-card">
|
|
<div class="hero-trust-num">{w.num}</div>
|
|
<div class="hero-trust-body">
|
|
<div class="hero-trust-name">{w.title}</div>
|
|
<div class="hero-trust-desc">{w.desc}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 2: SERVICES (vertical card stack) -->
|
|
{data.services && (
|
|
<section class="section section-bento">
|
|
<DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="80px" />
|
|
<DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
|
|
<div class="container" style="position: relative; z-index: 1;">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">บริการที่คุณได้รับ</span>
|
|
<h2 class="section-title">
|
|
ทุกบริการ<span class="highlight">ที่เว็บไซต์ต้องมี</span>
|
|
</h2>
|
|
<p class="section-desc">ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง</p>
|
|
</div>
|
|
|
|
<div class="service-stack">
|
|
{data.services.map((s: any, idx: number) => (
|
|
<div class="service-stack-item" data-surface={s.surface || 'white'}>
|
|
<div class="service-stack-num">0{idx + 1}</div>
|
|
<div class="service-stack-icon">
|
|
<Icon name={s.icon as any} size={32} />
|
|
</div>
|
|
<div class="service-stack-body">
|
|
<h3 class="service-stack-title">{s.title}</h3>
|
|
<ul class="service-stack-bullets">
|
|
{(s.bullets || s.items || []).map((b: string) => <li>{b}</li>)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- SECTION 3: TECH COMPARISON + PORTFOLIO -->
|
|
{(data.realPortfolio || data.techOptions) && (
|
|
<section class="section section-soft section-bento">
|
|
<DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
|
|
<DecoOrb color="teal" size="300px" speed={0.4} position={{ bottom: '-100px', right: '10%' }} opacity={0.3} blur="80px" />
|
|
<div class="container" style="position: relative; z-index: 1;">
|
|
|
|
{data.techOptions && (
|
|
<>
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">เลือกระบบ</span>
|
|
<h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
|
|
<p class="section-desc">แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง</p>
|
|
</div>
|
|
|
|
<div class="tech-comparison">
|
|
{data.techOptions.map((t: any) => (
|
|
<div class={`tech-col tech-col-${t.badge.toLowerCase()}`}>
|
|
<div class="tech-col-header">
|
|
<span class="tech-col-badge">{t.badge}</span>
|
|
<h3 class="tech-col-name">{t.name}</h3>
|
|
<p class="tech-col-duration">{t.duration}</p>
|
|
</div>
|
|
<div class="tech-col-body">
|
|
<p class="tech-col-desc">{t.desc}</p>
|
|
<div class="tech-col-best">
|
|
<span class="tech-col-label">✓ เหมาะกับ:</span>
|
|
<span class="tech-col-value">{t.best}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{data.realPortfolio && (
|
|
<>
|
|
<div class="section-header reveal" style="margin-top: 80px;">
|
|
<span class="section-badge">ผลงานจริง</span>
|
|
<h2 class="section-title">เว็บไซต์ที่<span class="highlight">ใช้งานจริง</span></h2>
|
|
<p class="section-desc">เว็บที่เราทำ ยังใช้งานอยู่ทุกวัน — คลิกเข้าไปดูได้เลย</p>
|
|
</div>
|
|
|
|
<div class="portfolio-grid-2x2">
|
|
{data.realPortfolio.map((p: any) => (
|
|
<a href={p.url} target="_blank" rel="noopener" class="portfolio-card-grid">
|
|
<div class="portfolio-card-top">
|
|
<span class="portfolio-card-badge">✓ ใช้งานจริง</span>
|
|
<span class="portfolio-card-arrow">→</span>
|
|
</div>
|
|
<h3 class="portfolio-card-name">{p.name}</h3>
|
|
<p class="portfolio-card-industry">{p.industry}</p>
|
|
<p class="portfolio-card-highlight">{p.highlight}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- SECTION 3B: TARGETS (เหมาะกับใคร) -->
|
|
{data.targets && (
|
|
<section class="section section-bento">
|
|
<DecoOrb color="soft" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.4} blur="80px" />
|
|
<DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
|
|
<div class="container" style="position: relative; z-index: 1;">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">เหมาะกับใคร</span>
|
|
<h2 class="section-title">บริการนี้<span class="highlight">เหมาะกับคุณไหม</span></h2>
|
|
<p class="section-desc">ถ้าใช่ 2 ข้อนี้ คุยกับเราได้เลย</p>
|
|
</div>
|
|
|
|
<div class="targets-grid">
|
|
{data.targets.map((t: string, i: number) => (
|
|
<div class="target-card">
|
|
<div class="target-num">0{i + 1}</div>
|
|
<div class="target-text">{t}</div>
|
|
<div class="target-check">✓</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- SECTION 4: PRICING (dynamic: 3-tier OR consult CTA) -->
|
|
<section class="section section-bento">
|
|
<DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
|
|
<DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
|
|
<div class="container" style="position: relative; z-index: 1;">
|
|
{data.pricing ? (
|
|
<>
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">ราคา</span>
|
|
<h2 class="section-title">ราคาค่า<span class="highlight">บริการ</span></h2>
|
|
<p class="section-desc">เลือกแพ็คเกจที่ตรงกับความต้องการ — จ่ายเท่าที่ใช้</p>
|
|
</div>
|
|
<div class="pricing-tiers">
|
|
{data.pricing.map((p: any, i: number) => (
|
|
<div class={`pricing-tier pricing-tier-${i === 1 ? 'standard' : (i === 0 ? 'basic' : 'pro')}`}>
|
|
{i === 1 && <div class="pricing-tier-recommended">⭐ แนะนำ</div>}
|
|
<div class="pricing-tier-header">
|
|
<span class="pricing-tier-badge">{p.tier || (i === 0 ? 'เริ่มต้น' : i === 1 ? 'มาตรฐาน' : 'ขั้นสูง')}</span>
|
|
<h3 class="pricing-tier-name">{p.label}</h3>
|
|
<p class="pricing-tier-desc">{p.bestFor}</p>
|
|
</div>
|
|
<div class="pricing-tier-price">
|
|
<span class="pricing-tier-currency">฿</span>
|
|
<span class="pricing-tier-amount">{p.amount}</span>
|
|
<span class="pricing-tier-period">{p.period || '/ เริ่มต้น'}</span>
|
|
</div>
|
|
{p.features && (
|
|
<ul class="pricing-tier-features">
|
|
{p.features.map((f: string) => <li>{f}</li>)}
|
|
</ul>
|
|
)}
|
|
<a href="/contact" class={`pricing-tier-cta ${i === 1 ? 'pricing-tier-cta-primary' : ''}`}>เลือกแพ็คเกจนี้</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div class="pricing-consult-cta">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">ราคา</span>
|
|
<h2 class="section-title">ราคาขึ้นอยู่กับ<span class="highlight">ขอบเขตงาน</span></h2>
|
|
<p class="section-desc">ทุกบริการมีรายละเอียดต่างกัน — เราแจ้งราคาหลังคุยรายละเอียดแล้วเท่านั้น เพื่อให้ตรงกับงานของคุณจริง ๆ</p>
|
|
</div>
|
|
<div class="consult-cta-card">
|
|
<div class="consult-cta-icon">💬</div>
|
|
<h3 class="consult-cta-title">ปรึกษาฟรี 30 นาที</h3>
|
|
<p class="consult-cta-desc">คุยกับเราเพื่อประเมินขอบเขตงาน แล้วเราจะแจ้งราคา + ระยะเวลา + แผนงานให้ชัดเจน</p>
|
|
<div class="consult-cta-actions">
|
|
<a href="tel:0809955945" class="btn btn-dark btn-lg">
|
|
โทร 080-995-5945
|
|
</a>
|
|
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">
|
|
ทัก LINE: @moreminimore
|
|
</a>
|
|
</div>
|
|
<div class="consult-cta-trust">
|
|
<span>✓ ปรึกษาฟรี ไม่มีค่าใช้จ่าย</span>
|
|
<span>✓ แจ้งราคาภายใน 2-3 วันหลังคุย</span>
|
|
<span>✓ ปรับแผนได้ตามงบประมาณ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 5: FAQ + MDX content -->
|
|
<section class="section section-soft section-bento">
|
|
<DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
|
|
<DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-50px', right: '-50px' }} opacity={0.25} blur="80px" />
|
|
<div class="container" style="position: relative; z-index: 1;">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">FAQ</span>
|
|
<h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
|
|
<p class="section-desc">รวมคำถามที่ลูกค้าถามบ่อยที่สุด — คลิกเพื่อดูคำตอบ</p>
|
|
</div>
|
|
|
|
<div class="faq-accordion">
|
|
{data.faqs.map((faq: any, i: number) => (
|
|
<details class="faq-item" name="webdev-faq">
|
|
<summary class="faq-summary">
|
|
<span class="faq-q-num">Q{i + 1}</span>
|
|
<span class="faq-q-text">{faq.q}</span>
|
|
<span class="faq-icon">+</span>
|
|
</summary>
|
|
<div class="faq-answer">
|
|
<p>{faq.a}</p>
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
|
|
<div class="workflow-timeline-section">
|
|
<div class="section-header reveal" style="margin-top: 64px;">
|
|
<span class="section-badge">ขั้นตอนการทำงาน</span>
|
|
<h2 class="section-title">เริ่มงาน<span class="highlight">ยังไง</span></h2>
|
|
<p class="section-desc">ขั้นตอนชัดเจน ไม่มีงง — เริ่มคุยฟรีก่อนได้</p>
|
|
</div>
|
|
<div class="workflow-timeline">
|
|
{data.workflow && data.workflow.map((step: string, i: number) => (
|
|
<div class="workflow-step">
|
|
<div class="workflow-step-num">{String(i + 1).padStart(2, '0')}</div>
|
|
<div class="workflow-step-connector"></div>
|
|
<div class="workflow-step-text">{step}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FINAL CTA -->
|
|
<section class="section section-yellow cta-section">
|
|
<div class="container">
|
|
<div class="cta-content reveal">
|
|
<h2 class="cta-title">ต้องการ{data.titleAccent}?</h2>
|
|
<p class="cta-desc">ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้าง{data.title}ที่ตอบโจทย์ธุรกิจ</p>
|
|
<div class="cta-actions">
|
|
<a href="tel:0809955945" class="btn btn-dark btn-lg">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
|
|
<path 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"/>
|
|
</svg>
|
|
080-995-5945
|
|
</a>
|
|
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">สอบถามราคา</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</Base>
|
|
|
|
<style>
|
|
/* Section wrappers */
|
|
.section-bento {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.section-soft { background: var(--color-bg-alt); }
|
|
.section-yellow { background: var(--color-primary); }
|
|
|
|
/* HERO */
|
|
.service-hero {
|
|
background: var(--color-white);
|
|
padding: 140px 0 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero-grid {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 1fr;
|
|
gap: 60px;
|
|
align-items: center;
|
|
}
|
|
.hero-badge {
|
|
display: inline-block;
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
padding: 8px 20px;
|
|
border-radius: var(--radius-full);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.hero-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(36px, 5vw, 56px);
|
|
font-weight: 900;
|
|
line-height: 1.3;
|
|
color: var(--color-black);
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-line { display: block; }
|
|
.hero-accent { color: var(--color-primary-dark); }
|
|
.hero-desc {
|
|
font-size: 18px;
|
|
color: var(--color-gray-700);
|
|
margin-bottom: 32px;
|
|
line-height: 1.7;
|
|
}
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 24px;
|
|
}
|
|
.hero-actions .btn svg { width: 18px; height: 18px; }
|
|
.hero-trust {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
font-size: 14px;
|
|
color: var(--color-gray-700);
|
|
}
|
|
.trust-item { font-weight: 600; }
|
|
|
|
/* Hero feature list (inside yellow tile) — uses numeral index, no icons */
|
|
.hero-feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.hero-feature-item {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
padding: 12px 0;
|
|
}
|
|
.hero-feature-item + .hero-feature-item { border-top: 1px solid rgba(0, 0, 0, 0.1); }
|
|
.hero-feature-index {
|
|
flex-shrink: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 2px solid var(--color-black);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-display);
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
color: var(--color-black);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.hero-feature-content { display: flex; flex-direction: column; }
|
|
.hero-feature-title { font-size: 15px; font-weight: 700; color: var(--color-black); }
|
|
.hero-feature-desc { font-size: 13px; color: rgba(0, 0, 0, 0.7); }
|
|
|
|
/* Section header */
|
|
.section-header { text-align: center; margin-bottom: 48px; }
|
|
.section-badge {
|
|
display: inline-block;
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
padding: 8px 20px;
|
|
border-radius: var(--radius-full);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.section-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(28px, 4vw, 40px);
|
|
font-weight: 900;
|
|
color: var(--color-black);
|
|
line-height: 1.2;
|
|
}
|
|
.section-title .highlight { color: var(--color-primary-dark); }
|
|
.section-desc { font-size: 16px; color: var(--color-gray-600); margin-top: 8px; }
|
|
|
|
/* Inline meta paragraphs inside tiles */
|
|
.tile-meta {
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
}
|
|
.tile-meta-strong {
|
|
margin-top: 12px;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
.tile-meta-dark {
|
|
font-size: 14px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Inline FAQ (single answer per tile) */
|
|
.faq-answer-inline p {
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: var(--color-gray-700);
|
|
}
|
|
.surface-yellow .faq-answer-inline p { color: rgba(0, 0, 0, 0.85); }
|
|
.surface-purple .faq-answer-inline p,
|
|
.surface-teal .faq-answer-inline p,
|
|
.surface-coral .faq-answer-inline p,
|
|
.surface-dark .faq-answer-inline p { color: rgba(255, 255, 255, 0.95); }
|
|
|
|
/* MDX content wrapper */
|
|
.mdx-content { font-size: 16px; line-height: 1.7; color: var(--color-gray-700); }
|
|
.mdx-content :global(h2) { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
|
|
.mdx-content :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
|
|
.mdx-content :global(p) { margin-bottom: 12px; }
|
|
.mdx-content :global(ul) { padding-left: 20px; margin-bottom: 12px; }
|
|
.mdx-content :global(li) { margin-bottom: 4px; }
|
|
.mdx-content :global(strong) { color: var(--color-black); }
|
|
|
|
/* MDX card (new) */
|
|
.mdx-content-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 40px;
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
color: var(--color-gray-700);
|
|
}
|
|
.mdx-content-card :global(h2) { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
|
|
.mdx-content-card :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
|
|
.mdx-content-card :global(p) { margin-bottom: 12px; }
|
|
.mdx-content-card :global(ul) { padding-left: 20px; margin-bottom: 12px; }
|
|
.mdx-content-card :global(li) { margin-bottom: 4px; }
|
|
.mdx-content-card :global(strong) { color: var(--color-black); }
|
|
|
|
/* Hero trust grid (right column) */
|
|
.hero-trust-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
color: var(--color-gray-600);
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-trust-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
.hero-trust-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 20px 24px;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
}
|
|
.hero-trust-card:hover {
|
|
border-color: var(--color-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
.hero-trust-num {
|
|
font-family: var(--font-display);
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
color: var(--color-primary);
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
.hero-trust-name {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: var(--color-black);
|
|
margin-bottom: 4px;
|
|
}
|
|
.hero-trust-desc {
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Service bullets inside bento tiles */
|
|
.service-bullets {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-top: 8px;
|
|
}
|
|
.service-bullets li {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
margin-bottom: 10px;
|
|
color: inherit;
|
|
}
|
|
.service-bullets li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: currentColor;
|
|
font-weight: 800;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Tile CTA link (used in real portfolio tiles) */
|
|
.tile-cta-link {
|
|
display: inline-block;
|
|
margin-top: 16px;
|
|
padding: 8px 16px;
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
border-radius: var(--radius-full);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: all 0.2s var(--ease-out-expo);
|
|
}
|
|
.tile-cta-link:hover {
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* Tile body detail (highlighted text in portfolio tile) */
|
|
.tile-body-detail {
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: var(--color-gray-700);
|
|
margin: 8px 0;
|
|
}
|
|
|
|
/* ============================================
|
|
SERVICE STACK (vertical card list)
|
|
============================================ */
|
|
.service-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
.service-stack-item {
|
|
display: grid;
|
|
grid-template-columns: 60px 60px 1fr;
|
|
gap: 24px;
|
|
align-items: flex-start;
|
|
padding: 32px;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
}
|
|
.service-stack-item:hover {
|
|
border-color: var(--color-primary);
|
|
transform: translateX(4px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.service-stack-num {
|
|
font-family: var(--font-display);
|
|
font-size: 36px;
|
|
font-weight: 900;
|
|
color: var(--color-primary);
|
|
line-height: 1;
|
|
}
|
|
.service-stack-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: var(--color-bg-soft);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-black);
|
|
}
|
|
.service-stack-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(20px, 2.5vw, 24px);
|
|
font-weight: 800;
|
|
color: var(--color-black);
|
|
margin-bottom: 12px;
|
|
}
|
|
.service-stack-bullets {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.service-stack-bullets li {
|
|
position: relative;
|
|
padding-left: 24px;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
margin-bottom: 6px;
|
|
color: var(--color-gray-700);
|
|
}
|
|
.service-stack-bullets li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
color: var(--color-primary);
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ============================================
|
|
TECH COMPARISON (2-column table)
|
|
============================================ */
|
|
.tech-comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
}
|
|
.tech-col {
|
|
padding: 40px;
|
|
border-right: 1px solid var(--color-gray-200);
|
|
}
|
|
.tech-col:last-child {
|
|
border-right: none;
|
|
}
|
|
.tech-col-a {
|
|
background: var(--color-primary);
|
|
background: rgba(254, 212, 0, 0.08);
|
|
}
|
|
.tech-col-wp {
|
|
background: var(--color-bg-soft);
|
|
}
|
|
.tech-col-header {
|
|
padding-bottom: 24px;
|
|
margin-bottom: 24px;
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
}
|
|
.tech-col-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
border-radius: var(--radius-sm);
|
|
margin-bottom: 12px;
|
|
}
|
|
.tech-col-name {
|
|
font-family: var(--font-display);
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
color: var(--color-black);
|
|
margin-bottom: 8px;
|
|
}
|
|
.tech-col-duration {
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
font-weight: 600;
|
|
}
|
|
.tech-col-desc {
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: var(--color-gray-700);
|
|
margin-bottom: 20px;
|
|
}
|
|
.tech-col-best {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: var(--color-primary);
|
|
background: rgba(254, 212, 0, 0.15);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.tech-col-wp .tech-col-best {
|
|
background: rgba(13, 148, 136, 0.1);
|
|
}
|
|
.tech-col-label {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: var(--color-black);
|
|
flex-shrink: 0;
|
|
}
|
|
.tech-col-value {
|
|
font-size: 14px;
|
|
color: var(--color-gray-700);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ============================================
|
|
PORTFOLIO GRID 2x2
|
|
============================================ */
|
|
.portfolio-grid-2x2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.portfolio-card-grid {
|
|
display: block;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
min-height: 200px;
|
|
}
|
|
.portfolio-card-grid:hover {
|
|
border-color: var(--color-primary);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.portfolio-card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.portfolio-card-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
border-radius: var(--radius-sm);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.portfolio-card-arrow {
|
|
font-size: 24px;
|
|
color: var(--color-black);
|
|
transition: transform 0.2s;
|
|
}
|
|
.portfolio-card-grid:hover .portfolio-card-arrow {
|
|
transform: translateX(4px);
|
|
}
|
|
.portfolio-card-name {
|
|
font-family: var(--font-display);
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
color: var(--color-black);
|
|
margin-bottom: 4px;
|
|
}
|
|
.portfolio-card-industry {
|
|
font-size: 13px;
|
|
color: var(--color-gray-600);
|
|
margin-bottom: 12px;
|
|
}
|
|
.portfolio-card-highlight {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
/* ============================================
|
|
PRICING 3-TIER
|
|
============================================ */
|
|
.pricing-tiers {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 20px;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
.pricing-tier {
|
|
position: relative;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 40px 32px;
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
}
|
|
.pricing-tier:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.pricing-tier-standard {
|
|
border-color: var(--color-primary);
|
|
border-width: 2px;
|
|
transform: scale(1.04);
|
|
}
|
|
.pricing-tier-standard:hover {
|
|
transform: scale(1.04) translateY(-4px);
|
|
}
|
|
.pricing-tier-recommended {
|
|
position: absolute;
|
|
top: -14px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
padding: 4px 16px;
|
|
border-radius: var(--radius-full);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
}
|
|
.pricing-tier-header {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
.pricing-tier-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
background: var(--color-bg-soft);
|
|
color: var(--color-gray-600);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
border-radius: var(--radius-full);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.pricing-tier-standard .pricing-tier-badge {
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
}
|
|
.pricing-tier-name {
|
|
font-family: var(--font-display);
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
color: var(--color-black);
|
|
margin-bottom: 4px;
|
|
}
|
|
.pricing-tier-desc {
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
}
|
|
.pricing-tier-price {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 24px 0;
|
|
border-top: 1px solid var(--color-gray-200);
|
|
border-bottom: 1px solid var(--color-gray-200);
|
|
margin-bottom: 24px;
|
|
}
|
|
.pricing-tier-currency {
|
|
font-family: var(--font-display);
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: var(--color-black);
|
|
}
|
|
.pricing-tier-amount {
|
|
font-family: var(--font-display);
|
|
font-size: 48px;
|
|
font-weight: 900;
|
|
color: var(--color-black);
|
|
line-height: 1;
|
|
}
|
|
.pricing-tier-period {
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
}
|
|
.pricing-tier-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-bottom: 24px;
|
|
}
|
|
.pricing-tier-features li {
|
|
padding: 8px 0;
|
|
font-size: 15px;
|
|
color: var(--color-gray-700);
|
|
border-bottom: 1px solid var(--color-gray-100);
|
|
}
|
|
.pricing-tier-features li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.pricing-tier-cta {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 12px 24px;
|
|
background: var(--color-white);
|
|
color: var(--color-black);
|
|
border: 1.5px solid var(--color-black);
|
|
border-radius: var(--radius-full);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
.pricing-tier-cta:hover {
|
|
background: var(--color-black);
|
|
color: var(--color-white);
|
|
}
|
|
.pricing-tier-cta-primary {
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
border-color: var(--color-primary);
|
|
}
|
|
.pricing-tier-cta-primary:hover {
|
|
background: var(--color-black);
|
|
color: var(--color-primary);
|
|
border-color: var(--color-black);
|
|
}
|
|
|
|
/* Pricing extras (small list) */
|
|
.pricing-extras {
|
|
max-width: 700px;
|
|
margin: 60px auto 0;
|
|
padding: 32px;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
}
|
|
.pricing-extras-title {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: var(--color-black);
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
}
|
|
.pricing-extras-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.pricing-extra {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--color-gray-100);
|
|
}
|
|
.pricing-extra:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.pricing-extra-name {
|
|
font-size: 15px;
|
|
color: var(--color-gray-700);
|
|
}
|
|
.pricing-extra-price {
|
|
font-family: var(--font-display);
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: var(--color-black);
|
|
}
|
|
|
|
/* ============================================
|
|
FAQ ACCORDION
|
|
============================================ */
|
|
/* ============================================
|
|
TARGETS (เหมาะกับใคร)
|
|
============================================ */
|
|
.targets-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
.target-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 24px 28px;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
transition: all 0.3s var(--ease-out-expo);
|
|
}
|
|
.target-card:hover {
|
|
border-color: var(--color-primary);
|
|
transform: translateX(4px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.target-num {
|
|
font-family: var(--font-display);
|
|
font-size: 32px;
|
|
font-weight: 900;
|
|
color: var(--color-primary);
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
.target-text {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
color: var(--color-gray-700);
|
|
font-weight: 500;
|
|
}
|
|
.target-check {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: var(--color-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
CONSULT CTA (no pricing)
|
|
============================================ */
|
|
.pricing-consult-cta {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.consult-cta-card {
|
|
background: var(--color-white);
|
|
border: 2px solid var(--color-primary);
|
|
border-radius: var(--radius-xl);
|
|
padding: 48px 40px;
|
|
text-align: center;
|
|
box-shadow: 0 12px 40px rgba(254, 212, 0, 0.15);
|
|
}
|
|
.consult-cta-icon {
|
|
font-size: 64px;
|
|
line-height: 1;
|
|
margin-bottom: 16px;
|
|
}
|
|
.consult-cta-title {
|
|
font-family: var(--font-display);
|
|
font-size: 32px;
|
|
font-weight: 900;
|
|
color: var(--color-black);
|
|
margin-bottom: 12px;
|
|
}
|
|
.consult-cta-desc {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
color: var(--color-gray-700);
|
|
margin-bottom: 32px;
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.consult-cta-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 32px;
|
|
}
|
|
.consult-cta-trust {
|
|
display: flex;
|
|
gap: 24px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
font-size: 14px;
|
|
color: var(--color-gray-600);
|
|
font-weight: 500;
|
|
}
|
|
.consult-cta-trust span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.consult-cta-trust span::before {
|
|
content: '✓';
|
|
color: var(--color-primary);
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ============================================
|
|
WORKFLOW TIMELINE
|
|
============================================ */
|
|
.workflow-timeline {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
.workflow-step {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr;
|
|
gap: 24px;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
padding: 20px 0;
|
|
}
|
|
.workflow-step-num {
|
|
font-family: var(--font-display);
|
|
font-size: 36px;
|
|
font-weight: 900;
|
|
color: var(--color-primary);
|
|
line-height: 1;
|
|
position: relative;
|
|
z-index: 2;
|
|
background: var(--color-white);
|
|
padding: 8px 0;
|
|
text-align: center;
|
|
}
|
|
.workflow-step-connector {
|
|
position: absolute;
|
|
left: 39px;
|
|
top: 50px;
|
|
bottom: -10px;
|
|
width: 2px;
|
|
background: var(--color-gray-200);
|
|
z-index: 1;
|
|
}
|
|
.workflow-step:last-child .workflow-step-connector {
|
|
display: none;
|
|
}
|
|
.workflow-step-text {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
color: var(--color-gray-700);
|
|
padding: 16px 24px;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
flex: 1;
|
|
}
|
|
|
|
.faq-accordion {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.faq-item {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-lg);
|
|
transition: all 0.2s;
|
|
}
|
|
.faq-item[open] {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 4px 16px rgba(254, 212, 0, 0.15);
|
|
}
|
|
.faq-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 20px 24px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
.faq-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.faq-q-num {
|
|
font-family: var(--font-display);
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: var(--color-primary);
|
|
background: var(--color-black);
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
.faq-q-text {
|
|
flex: 1;
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-black);
|
|
}
|
|
.faq-icon {
|
|
font-size: 28px;
|
|
font-weight: 300;
|
|
color: var(--color-gray-600);
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s;
|
|
line-height: 1;
|
|
}
|
|
.faq-item[open] .faq-icon {
|
|
transform: rotate(45deg);
|
|
color: var(--color-primary);
|
|
}
|
|
.faq-answer {
|
|
padding: 0 24px 24px 56px;
|
|
}
|
|
.faq-answer p {
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
color: var(--color-gray-700);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
|
|
.tech-comparison { grid-template-columns: 1fr; }
|
|
.tech-col { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
|
|
.tech-col:last-child { border-bottom: none; }
|
|
.portfolio-grid-2x2 { grid-template-columns: 1fr; }
|
|
.pricing-tiers { grid-template-columns: 1fr; max-width: 480px; }
|
|
.pricing-tier-standard { transform: none; }
|
|
.pricing-tier-standard:hover { transform: translateY(-4px); }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.service-stack-item { grid-template-columns: 1fr; gap: 16px; }
|
|
.service-stack-num { font-size: 28px; }
|
|
.hero-actions, .cta-actions, .consult-cta-actions { flex-direction: column; }
|
|
.hero-actions .btn, .cta-actions .btn, .consult-cta-actions .btn { width: 100%; justify-content: center; }
|
|
.faq-summary { padding: 16px; gap: 12px; }
|
|
.faq-q-text { font-size: 16px; }
|
|
.faq-answer { padding: 0 16px 16px 16px; }
|
|
.targets-grid { grid-template-columns: 1fr; }
|
|
.target-card { padding: 20px; }
|
|
.target-num { font-size: 24px; }
|
|
.workflow-step { grid-template-columns: 60px 1fr; gap: 16px; }
|
|
.workflow-step-num { font-size: 28px; }
|
|
.consult-cta-card { padding: 32px 24px; }
|
|
.consult-cta-title { font-size: 24px; }
|
|
}
|
|
|
|
/* CTA */
|
|
.cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
|
|
.cta-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: var(--color-black); margin-bottom: 16px; }
|
|
.cta-desc { font-size: 18px; color: rgba(0, 0, 0, 0.7); margin-bottom: 32px; }
|
|
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
|
.cta-actions .btn svg { display: inline-block; vertical-align: middle; margin-right: 6px; }
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.hero-actions, .cta-actions { flex-direction: column; }
|
|
.hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Parallax orbs (use data-parallax-speed from DecoOrb)
|
|
const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
|
|
function updateParallax() {
|
|
const scrolled = window.scrollY;
|
|
parallaxEls.forEach(el => {
|
|
const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
|
|
const ty = scrolled * speed * -0.3;
|
|
el.style.transform = `translate3d(0, ${ty}px, 0)`;
|
|
});
|
|
}
|
|
window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
|
|
</script>
|