6701c462ee
- Add --font-display, --font-body, --font-mono CSS variables in :root (they were referenced everywhere but never defined; Kanit wasn't loading) - Remove Noto Sans Thai import (Kanit handles Latin + Thai natively) - Fix hero/PageHero line-height: 1/1.1 → 1.3 to prevent Thai vowel clipping (was caused by overflow:hidden on .word-wrapper combined with line-height:1) - Replace .word-wrapper overflow:hidden with padding so Thai descenders stay visible during kinetic-title animation - Bump word translateY from 100% → 110% so word slides up cleanly - Bump global h1-h6 line-height from 1.1 → 1.25 Build: 18 pages, 0 errors
732 lines
40 KiB
Plaintext
732 lines
40 KiB
Plaintext
---
|
|
import Base from '../../layouts/Base.astro';
|
|
import Navigation from '../../components/Navigation.astro';
|
|
import Footer from '../../components/Footer.astro';
|
|
import PageHero from '../../components/PageHero.astro';
|
|
import Icon from '../../components/Icon.astro';
|
|
import { getCollection, render } from 'astro:content';
|
|
|
|
const { slug } = Astro.params;
|
|
const services = await getCollection('services');
|
|
const service = services.find(s => s.id === slug);
|
|
|
|
if (!service) {
|
|
return Astro.redirect('/404');
|
|
}
|
|
|
|
export async function getStaticPaths() {
|
|
const services = await getCollection('services');
|
|
return services.map(service => ({
|
|
params: { slug: service.id },
|
|
props: { service },
|
|
}));
|
|
}
|
|
|
|
const { Content } = await render(service);
|
|
|
|
const isWebDev = slug === 'webdev';
|
|
const isMarketing = slug === 'marketing';
|
|
const isAutomation = slug === 'automation';
|
|
const isTechConsult = slug === 'ai-consult';
|
|
|
|
// Service-specific data
|
|
const serviceData = {
|
|
'webdev': {
|
|
badge: 'บริการรับทำเว็บไซต์สำหรับ SME ไทย',
|
|
title: 'สร้างเว็บไซต์',
|
|
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: 'เว็บโหลดเร็ว ปลอดภัย' },
|
|
],
|
|
included: ['เว็บไซต์พร้อมใช้งาน', 'SSL ฟรี', 'โดเมน', 'Analytics'],
|
|
targets: [
|
|
{ icon: 'building', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้' },
|
|
{ icon: 'shoppingCart', title: 'ร้านค้าออนไลน์', desc: 'ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร' },
|
|
{ icon: 'briefcase', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet' },
|
|
],
|
|
techOptions: [
|
|
{ badge: 'A', name: 'Astro', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน' },
|
|
{ badge: 'WP', name: 'WordPress', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน' },
|
|
],
|
|
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/ปี' },
|
|
],
|
|
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' },
|
|
],
|
|
},
|
|
'marketing': {
|
|
badge: 'บริการ Marketing Automation ครบวงจร',
|
|
title: 'การตลาดอัตโนมัติ',
|
|
titleAccent: 'ทุกช่องทาง',
|
|
titleAccent2: 'พร้อม AI วิเคราะห์',
|
|
desc: 'ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google ครอบคลุม Website, Social Media, Ads และ Email + GEO ติด ChatGPT, Perplexity, AI Search',
|
|
features: [
|
|
{ icon: 'globe', title: 'Website + SEO', desc: 'เว็บไซต์ที่ติด Google และ AI Search พร้อมระบบจัดการเนื้อหา' },
|
|
{ icon: 'smartphone', title: 'Social Media', desc: 'Facebook, LINE, IG อัตโนมัติ ส่งข้อความตรงกลุ่มเป้าหมาย' },
|
|
{ icon: 'barChart', title: 'Google Ads', desc: 'ควบคุมงบโฆษณา วิเคราะห์ผล เพิ่มประสิทธิภาพ ROI' },
|
|
{ icon: 'mail', title: 'Email Marketing', desc: 'ส่งอีเมลอัตโนมัติ ติดตามลูกค้า ส่งโปรโมชั่นตรงเวลา' },
|
|
],
|
|
targets: [
|
|
{ icon: 'building', title: 'SME / ร้านค้าปลีก', desc: 'ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายออนไลน์' },
|
|
{ icon: 'shoppingCart', title: 'ร้านค้าออนไลน์', desc: 'E-commerce ที่ต้องการบริหารการตลาดอัตโนมัติ' },
|
|
{ icon: 'briefcase', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการระบบการตลาดที่มีประสิทธิภาพ' },
|
|
],
|
|
aiFeatures: [
|
|
'วิเคราะห์พฤติกรรมลูกค้าแต่ละ Touchpoint',
|
|
'หาช่องว่างทางการตลาดที่ยังไม่ถูกใช้',
|
|
'เสนอวิธีปรับปรุงอย่างต่อเนื่อง',
|
|
'รายงานผลเข้าใจง่าย วัดผลได้จริง',
|
|
],
|
|
faqs: [
|
|
{ q: 'Marketing Automation ต่างจาก AI Automation อย่างไร?', a: 'AI Automation เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม การประมวลผลข้อมูล Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email' },
|
|
{ q: 'ราคารวมค่าโฆษณาด้วยไหม?', a: 'ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้' },
|
|
{ q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมีความรู้ด้านเทคนิคเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์' },
|
|
{ q: 'AI วิเคราะห์อะไรบ้าง?', a: 'AI วิเคราะห์พฤติกรรมลูกค้า หาช่องว่างทางการตลาด และนำเสนอวิธีปรับปรุง วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม' },
|
|
{ q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI' },
|
|
],
|
|
},
|
|
'automation': {
|
|
badge: 'บริการ AI Automation ครบวงจร',
|
|
title: 'ระบบเชื่อมข้อมูล',
|
|
titleAccent: 'วิเคราะห์ด้วย AI',
|
|
desc: 'เชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร',
|
|
features: [
|
|
{ icon: 'package', title: 'เชื่อมข้อมูล', desc: 'Excel, Google Sheets, CRM, ERP ได้ทุกระบบ' },
|
|
{ icon: 'brain', title: 'AI วิเคราะห์', desc: 'หาความผิดปกติ หาแนวโน้ม และเสนอวิธีปรับปรุง' },
|
|
{ icon: 'barChart', title: 'สร้างรายงานอัตโนมัติ', desc: 'ส่งอีเมลรายวัน รายสัปดาห์ รายเดือน' },
|
|
{ icon: 'bell', title: 'แจ้งเตือนอัตโนมัติ', desc: 'LINE, Email, SMS เมื่อมีเหตุการณ์สำคัญ' },
|
|
{ icon: 'message', title: 'Enterprise Chatbot', desc: 'ตอบคำถามพนักงาน ค้นหาข้อมูลอัตโนมัติ' },
|
|
{ icon: 'cog', title: 'Process Automation', desc: 'ทำให้กระบวนการทำงานเป็นอัตโนมัติ ลดงานซ้ำซ้อน' },
|
|
],
|
|
targets: [
|
|
{ icon: 'building', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ต้องการเชื่อมข้อมูลจากหลายแหล่งเข้าด้วยกัน ลดงาน manual' },
|
|
{ icon: 'users', title: 'ทีมขาย / การตลาด', desc: 'ต้องการวิเคราะห์ข้อมูลลูกค้า สร้างรายงานอัตโนมัติ' },
|
|
{ icon: 'clipboard', title: 'ฝ่ายบัญชี / การเงิน', desc: 'ต้องการเชื่อมข้อมูลบัญชี สร้างรายงานทางการเงินอัตโนมัติ' },
|
|
],
|
|
faqs: [
|
|
{ q: 'AI Automation ต่างจาก Marketing Automation อย่างไร?', a: 'AI Automation เน้นการทำ automation ภายในองค์กร เช่น ระบบเชื่อมข้อมูล วิเคราะห์ข้อมูล สร้างรายงาน ตอบคำถามภายใน ส่วน Marketing Automation เน้นการทำ automation ภายนอก เช่น การตลาดผ่าน Website, Social Media, Ads' },
|
|
{ q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมีความรู้ด้านเทคนิคเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ' },
|
|
{ q: 'ระบบที่มีอยู่แล้วเชื่อมได้ไหม?', a: 'ได้ เราสามารถเชื่อมต่อระบบที่มีอยู่เข้ากับ AI ได้ ไม่ว่าจะเป็น Excel, Google Sheets, CRM, ERP หรือระบบอื่น ๆ' },
|
|
],
|
|
},
|
|
'ai-consult': {
|
|
badge: 'ที่ปรึกษา AI ครบวงจร',
|
|
title: 'ที่ปรึกษา AI',
|
|
titleAccent: 'ครบวงจร',
|
|
titleAccent2: 'สำหรับธุรกิจไทย',
|
|
desc: 'ที่ปรึกษาด้าน Marketing Automation, AI Automation และ AI Hardware สำหรับธุรกิจของคุณ',
|
|
services: [
|
|
{ icon: 'megaphone', title: 'Marketing Automation', items: ['ระบบการตลาดอัตโนมัติ', 'Email Marketing อัตโนมัติ', 'Chatbot ตอบคำถาม'] },
|
|
{ icon: 'brain', title: 'AI Automation', items: ['ระบบ AI ตอบคำถาม', 'ประมวลผลเอกสาร', 'วิเคราะห์ข้อมูล'] },
|
|
{ icon: 'server', title: 'AI Hardware', items: ['ที่ปรึกษาซื้อ Server', 'แนะนำ GPU/สเปค', 'ติดตั้ง On-premise'] },
|
|
{ icon: 'link', title: 'รวมระบบ', items: ['รวมระบบที่มีอยู่', 'เชื่อมต่อ API', 'สร้าง Workflow'] },
|
|
],
|
|
whyUs: [
|
|
{ title: 'ครบวงจร', desc: 'ให้คำปรึกษาครบทุกด้าน ทั้ง Marketing, AI และ Hardware คุณไม่ต้องไปหาหลายที่' },
|
|
{ title: 'ประหยัด', desc: 'ปรึกษาฟรีในเบื้องต้น แนะนำแนวทางที่เหมาะสมกับงบประมาณ ไม่ต้องซื้อของที่ไม่จำเป็น' },
|
|
{ title: 'ทำงานด้วยกัน', desc: 'เราทำงานร่วมกับคุณตลอดกระบวนการ ตั้งแต่วางแผน จนถึง Implementation และดูแลต่อเนื่อง' },
|
|
],
|
|
faqs: [
|
|
{ q: 'ที่ปรึกษา AI ช่วยอะไรได้บ้าง?', a: 'เราช่วยวิเคราะห์ความต้องการของธุรกิจ แนะนำเทคโนโลยีที่เหมาะสม วางแผนการใช้งาน และดูแลการ implement จนถึงการใช้งานจริง' },
|
|
{ q: 'มีค่าใช้จ่ายอะไรบ้าง?', a: 'เริ่มต้นจากการปรึกษาฟรี ค่าบริการจะขึ้นอยู่กับความซับซ้อนของโปรเจกต์และระยะเวลาที่ใช้' },
|
|
{ q: 'ต้องมีความรู้เทคนิคไหม?', a: 'ไม่จำเป็น เราอธิบายให้เข้าใจง่าย และดูแลทุกอย่างให้' },
|
|
],
|
|
},
|
|
};
|
|
|
|
const data = serviceData[slug] || serviceData['webdev'];
|
|
---
|
|
|
|
<Base title={`${service.data.title} | MoreminiMore`}>
|
|
<Navigation />
|
|
|
|
<!-- HERO (light theme, was dark) -->
|
|
<section class="service-hero">
|
|
<div class="hero-bg">
|
|
<div class="bg-dots"></div>
|
|
<div class="bg-glow"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="hero-grid">
|
|
<div class="hero-content">
|
|
<span class="hero-badge">{data.badge}</span>
|
|
<h1 class="hero-title kinetic-title">
|
|
<span class="word-wrapper"><span class="word" style="--delay: 0.1s">{data.title}</span></span>
|
|
<span class="word-wrapper"><span class="word" style="--delay: 0.2s">{data.titleAccent}</span></span>
|
|
{data.titleAccent2 && <span class="word-wrapper"><span class="word" style="--delay: 0.3s">{data.titleAccent2}</span></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" viewBox="0 0 24 24"><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 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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="features-card">
|
|
<div class="card-header">
|
|
<span class="card-title">บริการหลัก</span>
|
|
</div>
|
|
{(data.features || data.services || []).slice(0, 4).map((f) => (
|
|
<div class="feature-item">
|
|
<div class="feature-icon"><Icon name={f.icon as any} /></div>
|
|
<div class="feature-content">
|
|
<span class="feature-title">{f.title}</span>
|
|
<span class="feature-desc">{f.desc || f.items?.[0]}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section class="section features-section">
|
|
<div class="container">
|
|
<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>
|
|
|
|
<div class="features-grid stagger-children">
|
|
{(data.features || data.services || []).map((f) => (
|
|
<div class="feature-card">
|
|
<div class="feature-icon"><Icon name={f.icon as any} /></div>
|
|
<h3 class="feature-title">{f.title}</h3>
|
|
<p class="feature-desc">{f.desc || f.items?.join(' · ')}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TARGET AUDIENCE -->
|
|
{data.targets && (
|
|
<section class="section section-soft target-section">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">เหมาะกับใคร?</span>
|
|
<h2 class="section-title">ธุรกิจ<span class="highlight">ทุกประเภท</span></h2>
|
|
</div>
|
|
|
|
<div class="target-grid stagger-children">
|
|
{data.targets.map((t) => (
|
|
<div class="target-card">
|
|
<div class="target-icon"><Icon name={t.icon as any} /></div>
|
|
<h3 class="target-title">{t.title}</h3>
|
|
<p class="target-desc">{t.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- INCLUDED -->
|
|
{data.included && (
|
|
<section class="section included-section">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">สิ่งที่ได้รับ</span>
|
|
<h2 class="section-title">
|
|
ทุกเว็บไซต์มาพร้อม<span class="highlight">ให้ครบ</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="included-grid stagger-children">
|
|
{data.included.map((item) => (
|
|
<div class="included-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span>{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div class="pricing-highlight">
|
|
<p><strong>รวม:</strong> เว็บไซต์ + Server 1 ปี + Domain .com = เริ่มต้น ฿15,500*</p>
|
|
<span class="pricing-note">*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{data.techOptions && (
|
|
<section class="section section-soft tech-section">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">เลือกระบบ</span>
|
|
<h2 class="section-title">
|
|
เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="tech-grid stagger-children">
|
|
{data.techOptions.map((t) => (
|
|
<div class="tech-card">
|
|
<div class="tech-badge">{t.badge}</div>
|
|
<h3 class="tech-name">{t.name}</h3>
|
|
<p class="tech-desc">{t.desc}</p>
|
|
<span class="tech-duration">{t.duration}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{data.pricing && (
|
|
<section class="section pricing-section">
|
|
<div class="container">
|
|
<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-list stagger-children">
|
|
{data.pricing.map((p) => (
|
|
<div class="pricing-item">
|
|
<span class="pricing-label">{p.label}</span>
|
|
<span class="pricing-value">{p.price}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{data.aiFeatures && (
|
|
<section class="section section-soft ai-section">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">AI Analytics</span>
|
|
<h2 class="section-title">
|
|
AI วิเคราะห์<span class="highlight">ทุกความเคลื่อนไหว</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="ai-grid stagger-children">
|
|
{data.aiFeatures.map((f) => (
|
|
<div class="ai-item">
|
|
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span>{f}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{data.whyUs && (
|
|
<section class="section why-section">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">ทำไมต้องเลือกเรา?</span>
|
|
<h2 class="section-title">ความเชี่ยวชาญ<span class="highlight">ที่คุณไว้วางใจได้</span></h2>
|
|
</div>
|
|
|
|
<div class="why-grid stagger-children">
|
|
{data.whyUs.map((w) => (
|
|
<div class="why-card">
|
|
<h3 class="why-title">{w.title}</h3>
|
|
<p class="why-desc">{w.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<!-- FAQ -->
|
|
<section class="section section-soft faq-section">
|
|
<div class="container">
|
|
<div class="section-header reveal">
|
|
<span class="section-badge">FAQ</span>
|
|
<h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
|
|
</div>
|
|
|
|
<div class="faq-list">
|
|
{data.faqs.map((faq) => (
|
|
<details class="faq-item">
|
|
<summary class="faq-question">
|
|
{faq.q}
|
|
<span class="faq-toggle">+</span>
|
|
</summary>
|
|
<div class="faq-answer">
|
|
<p>{faq.a}</p>
|
|
</div>
|
|
</details>
|
|
))}
|
|
</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">
|
|
<Icon name="phone" size={18} class="btn-icon" />
|
|
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>
|
|
.service-hero {
|
|
background: var(--color-white);
|
|
padding: 140px 0 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
|
|
.bg-dots {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.15) 1px, transparent 0);
|
|
background-size: 40px 40px;
|
|
}
|
|
.bg-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse at 50% 0%, rgba(254, 212, 0, 0.15) 0%, transparent 60%);
|
|
}
|
|
.hero-grid {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 0.7fr;
|
|
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; /* Thai-safe */
|
|
color: var(--color-black);
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-title.kinetic-title .word-wrapper { display: block; }
|
|
.hero-title.kinetic-title .word-wrapper:nth-child(2) .word { 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-visual { display: flex; }
|
|
.features-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px;
|
|
width: 100%;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.card-header { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-gray-200); }
|
|
.card-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-gray-500); }
|
|
.feature-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
|
|
.feature-item + .feature-item { border-top: 1px solid var(--color-gray-100); }
|
|
.feature-icon { flex-shrink: 0; }
|
|
.feature-content { display: flex; flex-direction: column; }
|
|
.feature-title { font-size: 15px; font-weight: 700; color: var(--color-black); }
|
|
.feature-desc { font-size: 13px; color: var(--color-gray-600); }
|
|
|
|
/* Generic section styles */
|
|
.section-soft { background: var(--color-bg-alt); }
|
|
.section-yellow { background: var(--color-primary); }
|
|
|
|
.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; }
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.feature-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
|
|
.features-grid > .feature-card .feature-icon { width: 64px; height: 64px; }
|
|
.feature-card .feature-title { font-size: 18px; font-weight: 800; color: var(--color-black); margin-bottom: 8px; font-family: var(--font-display); }
|
|
.feature-card .feature-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
|
|
|
|
.target-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.target-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px;
|
|
}
|
|
.target-icon { margin-bottom: 12px; }
|
|
.target-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--color-black); margin-bottom: 8px; }
|
|
.target-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
|
|
|
|
.included-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
max-width: 700px;
|
|
margin: 0 auto 32px;
|
|
}
|
|
.included-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
background: var(--color-bg-alt);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.included-item svg { width: 20px; height: 20px; color: var(--color-primary-dark); flex-shrink: 0; }
|
|
.included-item span { font-size: 15px; font-weight: 500; color: var(--color-black); }
|
|
.pricing-highlight {
|
|
text-align: center;
|
|
padding: 24px;
|
|
background: var(--color-primary);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-black);
|
|
}
|
|
.pricing-highlight p { font-size: 16px; margin-bottom: 4px; }
|
|
.pricing-note { font-size: 13px; }
|
|
|
|
.tech-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.tech-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px;
|
|
text-align: center;
|
|
}
|
|
.tech-badge {
|
|
display: inline-block;
|
|
width: 56px;
|
|
height: 56px;
|
|
background: var(--color-primary);
|
|
color: var(--color-black);
|
|
border-radius: 50%;
|
|
line-height: 56px;
|
|
font-family: var(--font-display);
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
margin-bottom: 16px;
|
|
}
|
|
.tech-name { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--color-black); margin-bottom: 8px; }
|
|
.tech-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; margin-bottom: 12px; }
|
|
.tech-duration { display: inline-block; padding: 4px 12px; background: var(--color-bg-soft); color: var(--color-gray-700); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; }
|
|
|
|
.pricing-list {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
}
|
|
.pricing-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 28px;
|
|
border-top: 1px solid var(--color-gray-200);
|
|
}
|
|
.pricing-item:first-child { border-top: none; }
|
|
.pricing-label { font-size: 15px; color: var(--color-gray-700); }
|
|
.pricing-value { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--color-primary-dark); }
|
|
|
|
.ai-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.ai-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
background: var(--color-white);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.ai-item svg { width: 20px; height: 20px; color: var(--color-primary-dark); flex-shrink: 0; }
|
|
.ai-item span { font-size: 15px; color: var(--color-black); }
|
|
|
|
.why-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.why-card {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px;
|
|
}
|
|
.why-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--color-black); margin-bottom: 12px; }
|
|
.why-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
|
|
|
|
.faq-list { max-width: 800px; margin: 0 auto; }
|
|
.faq-item {
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-gray-200);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.faq-item[open] { border-color: var(--color-primary); }
|
|
.faq-question {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
font-family: var(--font-display);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--color-black);
|
|
}
|
|
.faq-question::-webkit-details-marker { display: none; }
|
|
.faq-toggle { color: var(--color-primary); font-size: 24px; line-height: 1; }
|
|
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
|
|
.faq-answer { padding: 0 24px 24px; }
|
|
.faq-answer p { font-size: 15px; line-height: 1.8; color: var(--color-gray-700); }
|
|
|
|
/* 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; }
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.target-grid { grid-template-columns: 1fr; }
|
|
.why-grid { grid-template-columns: 1fr; }
|
|
.included-grid { grid-template-columns: 1fr; }
|
|
.tech-grid { grid-template-columns: 1fr; }
|
|
.ai-grid { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.hero-actions { flex-direction: column; }
|
|
.hero-actions .btn { width: 100%; justify-content: center; }
|
|
.cta-actions { flex-direction: column; }
|
|
.cta-actions .btn { width: 100%; justify-content: center; }
|
|
}
|
|
</style>
|