refactor(services/webdev): restructure from 11 sections to 5 + add real content
Major restructuring of /services/webdev: Before: 11 sections (Hero, Features, Targets, Included, Tech, Pricing, AI, WhyUs, MDX, FAQ, CTA) — content sparse, many empty cards After: 5 main sections + inline MDX: 1. Hero (with 4 why-us cards in right column) 2. บริการที่คุณได้รับ — 4 service tiles with 3 bullets each 3. เลือกระบบ + ผลงานจริง (4 real client sites with CTA links) 4. ราคา (with 'bestFor' context for each price) 5. FAQ (8 questions with longer answers) + MDX content card New content (webdev only — other services unchanged): - 4 why-us tiles (ทำเสร็จไว, แก้เองได้, ติด Google+AI, Server ฟรีปีแรก) - 4 service tiles with 3 bullets each (แก้ไขเอง, AI, SEO+GEO, Server+SSL) - 4 real portfolio entries (Dataroot, Baofuling, Lungfinler, ทวนทอง 99) - 5 pricing entries with bestFor context - 8 FAQ entries (was 6) with longer answers - Removed old 'included', 'features', 'targets' from data CSS additions: - .hero-trust-grid (right column 4 cards) - .service-bullets (✓ bullets in service tiles) - .tile-cta-link (dark pill CTA in portfolio tiles) - .mdx-content-card (white card for MDX content)
This commit is contained in:
Kunthawat Greethong
@@ -32,36 +32,76 @@ const serviceData: Record<string, any> = {
|
||||
titleAccent: 'เปลี่ยนแปลงเองได้',
|
||||
titleAccent2: 'ด้วย AI',
|
||||
desc: 'เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ไม่ต้องรอเราทุกครั้ง พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที + GEO ติด ChatGPT, Perplexity, AI Search',
|
||||
features: [
|
||||
{ icon: 'pen', title: 'แก้ไขเองได้ง่าย', desc: 'ระบบหลังบ้านใช้ง่าย' },
|
||||
{ icon: 'bot', title: 'AI ช่วยสร้างเนื้อหา', desc: 'สั่ง AI เขียนบทความได้ทันที' },
|
||||
{ icon: 'search', title: 'GEO ติด AI Search', desc: 'ติด ChatGPT, Perplexity' },
|
||||
{ icon: 'shield', title: 'Server คุณภาพสูง', desc: 'เว็บโหลดเร็ว ปลอดภัย' },
|
||||
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 ปีแรก' },
|
||||
],
|
||||
included: ['เว็บไซต์พร้อมใช้งาน', 'SSL ฟรี', 'โดเมน', 'Analytics'],
|
||||
targets: [
|
||||
{ icon: 'building', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้' },
|
||||
{ icon: 'shoppingCart', title: 'ร้านค้าออนไลน์', desc: 'ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร' },
|
||||
{ icon: 'briefcase', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet' },
|
||||
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', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน' },
|
||||
{ badge: 'WP', name: 'WordPress', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน' },
|
||||
{ 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 หลากหลาย' },
|
||||
],
|
||||
pricing: [
|
||||
{ label: 'เว็บไซต์ Astro (AI Ready)', price: 'เริ่มต้น ฿10,000' },
|
||||
{ label: 'เว็บไซต์ WordPress', price: 'เริ่มต้น ฿15,000' },
|
||||
{ label: 'Landing Page', price: 'เริ่มต้น ฿5,000' },
|
||||
{ label: 'Server Hosting', price: '฿5,000/ปี' },
|
||||
{ label: 'Domain .com', price: '฿500/ปี' },
|
||||
{ label: 'เว็บไซต์ Astro (AI Ready)', price: 'เริ่มต้น ฿10,000', surface: 'mint', bestFor: 'เว็บบริษัท เว็บ Landing Page เน้น SEO + AI' },
|
||||
{ label: 'เว็บไซต์ WordPress', price: 'เริ่มต้น ฿15,000', surface: 'yellow', bestFor: 'ร้านค้าออนไลน์ เว็บ E-commerce ที่ต้องการ Plugin' },
|
||||
{ label: 'Landing Page', price: 'เริ่มต้น ฿5,000', surface: 'purple-soft', bestFor: 'หน้าเดียวจบ ใช้ยิงแอดหรือทดสอบตลาด' },
|
||||
{ label: 'Server Hosting', price: '฿5,000/ปี', surface: 'teal-soft', bestFor: 'Server คุณภาพสูง ดูแลให้' },
|
||||
{ label: 'Domain .com', price: '฿500/ปี', surface: 'soft', bestFor: 'ต่ออายุโดเมน .com / .co.th' },
|
||||
],
|
||||
realPortfolio: [
|
||||
{ name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'หน้าแรกโหลดไว + ติด Google ได้ผลดี' },
|
||||
{ name: 'Baofuling Shop', url: 'https://baofulingshop.com', industry: 'E-commerce สินค้า Skincare', highlight: 'หน้าเดียวจบ สั่งซื้อง่าย ดูแลเองได้' },
|
||||
{ name: 'Lungfinler', url: 'https://lungfinler.com', industry: 'Digital Agency', highlight: 'แสดงผลงาน + บล็อก ใช้ CMS ได้' },
|
||||
{ name: 'ทวนทอง 99', url: 'https://tuanthong99.com', industry: 'สมุนไพรไทย', highlight: 'ระบบสั่งซื้อ + จัดการสินค้า ดูแลเองได้' },
|
||||
],
|
||||
faqs: [
|
||||
{ q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค' },
|
||||
{ q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม' },
|
||||
{ q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป' },
|
||||
{ q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร' },
|
||||
{ q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ' },
|
||||
{ q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI' },
|
||||
{ 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 ภายนอก ทีมเราจะประเมินราคาเพิ่มเติมตามฟีเจอร์ที่ต้องการ แจ้งราคาก่อนเริ่มงานทุกครั้ง' },
|
||||
],
|
||||
},
|
||||
'marketing': {
|
||||
@@ -178,132 +218,93 @@ const featureList = data.features || data.services || [];
|
||||
ทัก LINE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-trust">
|
||||
<span class="trust-item">✓ ปรึกษาฟรี</span>
|
||||
{isWebDev && <span class="trust-item">✓ Server ฟรีปีแรก</span>}
|
||||
{isAutomation && <span class="trust-item">✓ เชื่อมต่อระบบได้ทุกที่</span>}
|
||||
{isMarketing && <span class="trust-item">✓ AI วิเคราะห์</span>}
|
||||
{isTechConsult && <span class="trust-item">✓ ทีมงานมืออาชีพ</span>}
|
||||
<span class="trust-item">✓ ราคาเหมาะสม</span>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Side card — first 4 features as a single tile -->
|
||||
<div class="hero-visual">
|
||||
<BentoGrid>
|
||||
<BentoTile span={12} surface="yellow" eyebrow="บริการหลัก" title={`${featureList.length} ความสามารถหลัก`}>
|
||||
<ul class="hero-feature-list">
|
||||
{featureList.slice(0, 4).map((f) => (
|
||||
<li class="hero-feature-item">
|
||||
<div class="hero-feature-index">{String(featureList.indexOf(f) + 1).padStart(2, '0')}</div>
|
||||
<div class="hero-feature-content">
|
||||
<span class="hero-feature-title">{f.title}</span>
|
||||
<span class="hero-feature-desc">{f.desc || f.items?.[0]}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</BentoTile>
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES (BENTO) -->
|
||||
<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">{isTechConsult ? 'บริการของเรา' : 'ความสามารถ'}</span>
|
||||
<h2 class="section-title">
|
||||
{data.title} <span class="highlight">{data.titleAccent}</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{featureList.map((f: any, i: number) => {
|
||||
// Asymmetric span + surface rotation per the bento design system
|
||||
const span = i % 3 === 0 ? 8 : 4;
|
||||
const surfaces = ['yellow', 'purple-soft', 'mint', 'soft', 'teal', 'soft'] as const;
|
||||
const surface = surfaces[i % surfaces.length];
|
||||
return (
|
||||
<BentoTile span={span} surface={surface} eyebrow={`0${i + 1}`} title={f.title}>
|
||||
<p>{f.desc || f.items?.join(' · ')}</p>
|
||||
</BentoTile>
|
||||
);
|
||||
})}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TARGET AUDIENCE (BENTO) -->
|
||||
{data.targets && (
|
||||
<section class="section section-soft section-bento">
|
||||
<DecoOrb color="teal" size="400px" speed={0.3} position={{ top: '-100px', right: '-100px' }} opacity={0.2} blur="80px" />
|
||||
<DecoOrb color="soft" size="300px" speed={0.4} position={{ bottom: '-100px', left: '-50px' }} opacity={0.35} blur="80px" />
|
||||
<!-- SECTION 2: SERVICES (with bullets) -->
|
||||
{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>
|
||||
<span class="section-badge">บริการที่คุณได้รับ</span>
|
||||
<h2 class="section-title">
|
||||
ทุกบริการ<span class="highlight">ที่เว็บไซต์ต้องมี</span>
|
||||
</h2>
|
||||
<p class="section-desc">ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง</p>
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{data.targets.map((t: any, i: number) => {
|
||||
// First target takes 12 to lead, then 6+6 for remaining pair
|
||||
const span = i === 0 ? 12 : 6;
|
||||
const surfaces = ['yellow', 'soft', 'purple-soft'] as const;
|
||||
const surface = surfaces[i % surfaces.length];
|
||||
return (
|
||||
<BentoTile span={span} surface={surface} eyebrow={`0${i + 1}`} title={t.title}>
|
||||
<p>{t.desc}</p>
|
||||
</BentoTile>
|
||||
);
|
||||
})}
|
||||
{data.services.map((s: any) => (
|
||||
<BentoTile span={s.span} surface={s.surface} eyebrow={s.icon} title={s.title}>
|
||||
<ul class="service-bullets">
|
||||
{s.bullets.map((b: string) => <li>{b}</li>)}
|
||||
</ul>
|
||||
</BentoTile>
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- INCLUDED + TECH OPTIONS (BENTO) -->
|
||||
{(data.included || data.techOptions) && (
|
||||
<section class="section section-bento">
|
||||
<!-- SECTION 3: REAL PORTFOLIO + TECH OPTIONS -->
|
||||
{(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="soft" size="300px" speed={0.4} position={{ bottom: '-100px', right: '10%' }} opacity={0.35} 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.included && (
|
||||
|
||||
{data.techOptions && (
|
||||
<>
|
||||
<div class="section-header reveal">
|
||||
<span class="section-badge">สิ่งที่ได้รับ</span>
|
||||
<h2 class="section-title">ทุกเว็บไซต์มาพร้อม<span class="highlight">ให้ครบ</span></h2>
|
||||
<span class="section-badge">เลือกระบบ</span>
|
||||
<h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
|
||||
<p class="section-desc">แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง</p>
|
||||
</div>
|
||||
<BentoGrid>
|
||||
{data.included.map((item: string, i: number) => (
|
||||
<BentoTile span={4} surface="white" eyebrow="✓" title={item}>
|
||||
<p class="tile-meta">รวมอยู่ในแพ็คเกจ — ไม่มีค่าใช้จ่ายเพิ่ม</p>
|
||||
{data.techOptions.map((t: any) => (
|
||||
<BentoTile span={6} surface={t.surface} eyebrow={t.badge} title={t.name}>
|
||||
<p>{t.desc}</p>
|
||||
<p class="tile-meta-strong">{t.duration}</p>
|
||||
<p class="tile-meta">✓ เหมาะกับ: {t.best}</p>
|
||||
</BentoTile>
|
||||
))}
|
||||
<BentoTile span={12} surface="yellow" eyebrow="ราคารวม" title="เว็บไซต์ + Server 1 ปี + Domain .com">
|
||||
<p>เริ่มต้น <strong>฿15,500*</strong></p>
|
||||
<p class="tile-meta-dark">*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์</p>
|
||||
</BentoTile>
|
||||
</BentoGrid>
|
||||
</>
|
||||
)}
|
||||
|
||||
{data.techOptions && (
|
||||
{data.realPortfolio && (
|
||||
<>
|
||||
<div class="section-header reveal" style="margin-top: 64px;">
|
||||
<span class="section-badge">เลือกระบบ</span>
|
||||
<h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
|
||||
<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>
|
||||
<BentoGrid>
|
||||
{data.techOptions.map((t: any, i: number) => (
|
||||
<BentoTile span={6} surface={i === 0 ? 'yellow' : 'soft'} eyebrow={t.badge} title={t.name}>
|
||||
<p>{t.desc}</p>
|
||||
<p class="tile-meta-strong">{t.duration}</p>
|
||||
{data.realPortfolio.map((p: any) => (
|
||||
<BentoTile span={6} surface="white" eyebrow="✓ ใช้งานจริง" title={p.name}>
|
||||
<p class="tile-meta">{p.industry}</p>
|
||||
<p class="tile-body-detail">{p.highlight}</p>
|
||||
<a href={p.url} target="_blank" rel="noopener" class="tile-cta-link">เยี่ยมชมเว็บไซต์ →</a>
|
||||
</BentoTile>
|
||||
))}
|
||||
</BentoGrid>
|
||||
@@ -313,9 +314,9 @@ const featureList = data.features || data.services || [];
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- PRICING (BENTO) -->
|
||||
<!-- SECTION 4: PRICING (with bestFor context) -->
|
||||
{data.pricing && (
|
||||
<section class="section section-soft section-bento">
|
||||
<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;">
|
||||
@@ -326,106 +327,35 @@ const featureList = data.features || data.services || [];
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{data.pricing.map((p: any, i: number) => {
|
||||
const surfaces = ['white', 'soft', 'yellow', 'mint', 'purple-soft'] as const;
|
||||
const surface = surfaces[i % surfaces.length];
|
||||
return (
|
||||
<BentoTile span={4} surface={surface} eyebrow={p.label} title={p.price}>
|
||||
</BentoTile>
|
||||
);
|
||||
})}
|
||||
{data.pricing.map((p: any) => (
|
||||
<BentoTile span={4} surface={p.surface} eyebrow={p.label} title={p.price}>
|
||||
<p class="tile-meta">✓ {p.bestFor}</p>
|
||||
</BentoTile>
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- AI FEATURES (BENTO) -->
|
||||
{data.aiFeatures && (
|
||||
<section class="section section-bento">
|
||||
<DecoOrb color="purple" size="500px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="100px" />
|
||||
<DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '10%', 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">AI Analytics</span>
|
||||
<h2 class="section-title">AI วิเคราะห์<span class="highlight">ทุกความเคลื่อนไหว</span></h2>
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{data.aiFeatures.map((f: string, i: number) => {
|
||||
// Asymmetric: first item 12, then 6+6 paired
|
||||
const span = i === 0 ? 12 : 6;
|
||||
const surfaces = ['yellow', 'soft', 'mint', 'purple-soft'] as const;
|
||||
const surface = surfaces[i % surfaces.length];
|
||||
return (
|
||||
<BentoTile span={span} surface={surface} eyebrow={`✓ 0${i + 1}`} title={f}>
|
||||
</BentoTile>
|
||||
);
|
||||
})}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- WHY US (BENTO) -->
|
||||
{data.whyUs && (
|
||||
<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="teal" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-50px' }} opacity={0.2} 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>
|
||||
</div>
|
||||
|
||||
<BentoGrid>
|
||||
{data.whyUs.map((w: any, i: number) => {
|
||||
const surfaces = ['yellow', 'soft', 'purple-soft'] as const;
|
||||
const surface = surfaces[i % surfaces.length];
|
||||
return (
|
||||
<BentoTile span={4} surface={surface} eyebrow={`0${i + 1}`} title={w.title}>
|
||||
<p>{w.desc}</p>
|
||||
</BentoTile>
|
||||
);
|
||||
})}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- DYNAMIC CONTENT FROM MDX (full-width bento tile) -->
|
||||
<!-- SECTION 5: FAQ + MDX content -->
|
||||
<section class="section section-soft section-bento">
|
||||
<DecoOrb color="soft" size="500px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.4} blur="80px" />
|
||||
<DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-50px', right: '-50px' }} opacity={0.2} blur="80px" />
|
||||
<div class="container" style="position: relative; z-index: 1;">
|
||||
<BentoGrid>
|
||||
<BentoTile span={12} surface="white" eyebrow="รายละเอียดเพิ่มเติม" title="เนื้อหาจากเอกสารบริการ">
|
||||
<div class="mdx-content">
|
||||
<Content />
|
||||
</div>
|
||||
</BentoTile>
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ (BENTO) -->
|
||||
<section class="section 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>
|
||||
|
||||
<BentoGrid>
|
||||
{data.faqs.map((faq: any, i: number) => {
|
||||
// Hero: first question 12-span, then alternating 8+4 for visual tension
|
||||
let span: 12 | 8 | 4 = 6;
|
||||
if (i === 0) span = 12;
|
||||
else if (i % 3 === 1) span = 8;
|
||||
else if (i % 3 === 2) span = 4;
|
||||
else span = 6;
|
||||
const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal', 'soft'] as const;
|
||||
const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal-soft', 'soft'] as const;
|
||||
const surface = surfaces[i % surfaces.length];
|
||||
return (
|
||||
<BentoTile span={span} surface={surface} eyebrow={`Q${i + 1}`} title={faq.q}>
|
||||
@@ -436,6 +366,16 @@ const featureList = data.features || data.services || [];
|
||||
);
|
||||
})}
|
||||
</BentoGrid>
|
||||
|
||||
<div class="mdx-section">
|
||||
<div class="section-header reveal" style="margin-top: 64px;">
|
||||
<span class="section-badge">รายละเอียดเพิ่มเติม</span>
|
||||
<h2 class="section-title">เนื้อหา<span class="highlight">จากเอกสารบริการ</span></h2>
|
||||
</div>
|
||||
<div class="mdx-content-card">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -624,6 +564,123 @@ const featureList = data.features || data.services || [];
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
|
||||
Reference in New Issue
Block a user