kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Thai line-height + add Kanit font variables

Browse Source 
- 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
This commit is contained in:
Macky
2026-06-04 09:20:28 +07:00
parent 5437a34124
commit 6701c462ee
5 changed files with 426 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/pages/services/[slug].astro
View File

@@ -3,6 +3,7 @@ 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;
@@ -37,16 +38,16 @@ const serviceData = {
titleAccent2: 'ด้วย AI',
desc: 'เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ไม่ต้องรอเราทุกครั้ง พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที + GEO ติด ChatGPT, Perplexity, AI Search',
features: [
{ icon: '📝', title: 'แก้ไขเองได้ง่าย', desc: 'ระบบหลังบ้านใช้ง่าย' },
{ icon: '🤖', title: 'AI ช่วยสร้างเนื้อหา', desc: 'สั่ง AI เขียนบทความได้ทันที' },
{ icon: '🔍', title: 'GEO ติด AI Search', desc: 'ติด ChatGPT, Perplexity' },
{ icon: '🛡️', title: 'Server คุณภาพสูง', desc: 'เว็บโหลดเร็ว ปลอดภัย' },
{ 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: '🏢', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้' },
{ icon: '🛒', title: 'ร้านค้าออนไลน์', desc: 'ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร' },
{ icon: '🏗️', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet' },
{ 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 วัน' },
@@ -75,15 +76,15 @@ const serviceData = {
titleAccent2: 'พร้อม AI วิเคราะห์',
desc: 'ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google ครอบคลุม Website, Social Media, Ads และ Email + GEO ติด ChatGPT, Perplexity, AI Search',
features: [
{ icon: '🌐', title: 'Website + SEO', desc: 'เว็บไซต์ที่ติด Google และ AI Search พร้อมระบบจัดการเนื้อหา' },
{ icon: '📱', title: 'Social Media', desc: 'Facebook, LINE, IG อัตโนมัติ ส่งข้อความตรงกลุ่มเป้าหมาย' },
{ icon: '📊', title: 'Google Ads', desc: 'ควบคุมงบโฆษณา วิเคราะห์ผล เพิ่มประสิทธิภาพ ROI' },
{ icon: '📧', title: 'Email Marketing', desc: 'ส่งอีเมลอัตโนมัติ ติดตามลูกค้า ส่งโปรโมชั่นตรงเวลา' },
{ 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: '🏢', title: 'SME / ร้านค้าปลีก', desc: 'ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายออนไลน์' },
{ icon: '🛒', title: 'ร้านค้าออนไลน์', desc: 'E-commerce ที่ต้องการบริหารการตลาดอัตโนมัติ' },
{ icon: '🏗️', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการระบบการตลาดที่มีประสิทธิภาพ' },
{ icon: 'building', title: 'SME / ร้านค้าปลีก', desc: 'ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายออนไลน์' },
{ icon: 'shoppingCart', title: 'ร้านค้าออนไลน์', desc: 'E-commerce ที่ต้องการบริหารการตลาดอัตโนมัติ' },
{ icon: 'briefcase', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการระบบการตลาดที่มีประสิทธิภาพ' },
],
aiFeatures: [
'วิเคราะห์พฤติกรรมลูกค้าแต่ละ Touchpoint',
@@ -105,17 +106,17 @@ const serviceData = {
titleAccent: 'วิเคราะห์ด้วย AI',
desc: 'เชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร',
features: [
{ icon: '📦', title: 'เชื่อมข้อมูล', desc: 'Excel, Google Sheets, CRM, ERP ได้ทุกระบบ' },
{ icon: '🧠', title: 'AI วิเคราะห์', desc: 'หาความผิดปกติ หาแนวโน้ม และเสนอวิธีปรับปรุง' },
{ icon: '📊', title: 'สร้างรายงานอัตโนมัติ', desc: 'ส่งอีเมลรายวัน รายสัปดาห์ รายเดือน' },
{ icon: '🔔', title: 'แจ้งเตือนอัตโนมัติ', desc: 'LINE, Email, SMS เมื่อมีเหตุการณ์สำคัญ' },
{ icon: '💬', title: 'Enterprise Chatbot', desc: 'ตอบคำถามพนักงาน ค้นหาข้อมูลอัตโนมัติ' },
{ icon: '⚙️', title: 'Process Automation', desc: 'ทำให้กระบวนการทำงานเป็นอัตโนมัติ ลดงานซ้ำซ้อน' },
{ 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: '🏢', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ต้องการเชื่อมข้อมูลจากหลายแหล่งเข้าด้วยกัน ลดงาน manual' },
{ icon: '👥', title: 'ทีมขาย / การตลาด', desc: 'ต้องการวิเคราะห์ข้อมูลลูกค้า สร้างรายงานอัตโนมัติ' },
{ icon: '📋', title: 'ฝ่ายบัญชี / การเงิน', desc: 'ต้องการเชื่อมข้อมูลบัญชี สร้างรายงานทางการเงินอัตโนมัติ' },
{ 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' },
@@ -130,10 +131,10 @@ const serviceData = {
titleAccent2: 'สำหรับธุรกิจไทย',
desc: 'ที่ปรึกษาด้าน Marketing Automation, AI Automation และ AI Hardware สำหรับธุรกิจของคุณ',
services: [
{ icon: '📊', title: 'Marketing Automation', items: ['ระบบการตลาดอัตโนมัติ', 'Email Marketing อัตโนมัติ', 'Chatbot ตอบคำถาม'] },
{ icon: '🧠', title: 'AI Automation', items: ['ระบบ AI ตอบคำถาม', 'ประมวลผลเอกสาร', 'วิเคราะห์ข้อมูล'] },
{ icon: '🖥️', title: 'AI Hardware', items: ['ที่ปรึกษาซื้อ Server', 'แนะนำ GPU/สเปค', 'ติดตั้ง On-premise'] },
{ icon: '🔗', title: 'รวมระบบ', items: ['รวมระบบที่มีอยู่', 'เชื่อมต่อ API', 'สร้าง Workflow'] },
{ 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 คุณไม่ต้องไปหาหลายที่' },
@@ -165,10 +166,10 @@ const data = serviceData[slug] || serviceData['webdev'];
<div class="hero-grid">
<div class="hero-content">
<span class="hero-badge">{data.badge}</span>
<h1 class="hero-title">
<span class="title-line">{data.title}</span>
<span class="title-accent">{data.titleAccent}</span>
{data.titleAccent2 && <span class="title-accent-2">{data.titleAccent2}</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>
@@ -202,7 +203,7 @@ const data = serviceData[slug] || serviceData['webdev'];
</div>
{(data.features || data.services || []).slice(0, 4).map((f) => (
<div class="feature-item">
<div class="feature-icon">{f.icon}</div>
<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>
@@ -218,17 +219,17 @@ const data = serviceData[slug] || serviceData['webdev'];
<!-- FEATURES -->
<section class="section features-section">
<div class="container">
<div class="section-header">
<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">
<div class="features-grid stagger-children">
{(data.features || data.services || []).map((f) => (
<div class="feature-card">
<div class="feature-icon">{f.icon}</div>
<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>
@@ -241,15 +242,15 @@ const data = serviceData[slug] || serviceData['webdev'];
{data.targets && (
<section class="section section-soft target-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">เหมาะกับใคร?</span>
<h2 class="section-title">ธุรกิจ<span class="highlight">ทุกประเภท</span></h2>
</div>
<div class="target-grid">
<div class="target-grid stagger-children">
{data.targets.map((t) => (
<div class="target-card">
<div class="target-icon">{t.icon}</div>
<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>
@@ -263,14 +264,14 @@ const data = serviceData[slug] || serviceData['webdev'];
{data.included && (
<section class="section included-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">สิ่งที่ได้รับ</span>
<h2 class="section-title">
ทุกเว็บไซต์มาพร้อม<span class="highlight">ให้ครบ</span>
</h2>
</div>
<div class="included-grid">
<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">
@@ -292,14 +293,14 @@ const data = serviceData[slug] || serviceData['webdev'];
{data.techOptions && (
<section class="section section-soft tech-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">เลือกระบบ</span>
<h2 class="section-title">
เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span>
</h2>
</div>
<div class="tech-grid">
<div class="tech-grid stagger-children">
{data.techOptions.map((t) => (
<div class="tech-card">
<div class="tech-badge">{t.badge}</div>
@@ -316,13 +317,13 @@ const data = serviceData[slug] || serviceData['webdev'];
{data.pricing && (
<section class="section pricing-section">
<div class="container">
<div class="section-header">
<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">
<div class="pricing-list stagger-children">
{data.pricing.map((p) => (
<div class="pricing-item">
<span class="pricing-label">{p.label}</span>
@@ -337,14 +338,14 @@ const data = serviceData[slug] || serviceData['webdev'];
{data.aiFeatures && (
<section class="section section-soft ai-section">
<div class="container">
<div class="section-header">
<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">
<div class="ai-grid stagger-children">
{data.aiFeatures.map((f) => (
<div class="ai-item">
<svg viewBox="0 0 20 20" fill="currentColor">
@@ -361,12 +362,12 @@ const data = serviceData[slug] || serviceData['webdev'];
{data.whyUs && (
<section class="section why-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">ทำไมต้องเลือกเรา?</span>
<h2 class="section-title">ความเชี่ยวชาญ<span class="highlight">ที่คุณไว้วางใจได้</span></h2>
</div>
<div class="why-grid">
<div class="why-grid stagger-children">
{data.whyUs.map((w) => (
<div class="why-card">
<h3 class="why-title">{w.title}</h3>
@@ -381,7 +382,7 @@ const data = serviceData[slug] || serviceData['webdev'];
<!-- FAQ -->
<section class="section section-soft faq-section">
<div class="container">
<div class="section-header">
<div class="section-header reveal">
<span class="section-badge">FAQ</span>
<h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
</div>
@@ -405,11 +406,14 @@ const data = serviceData[slug] || serviceData['webdev'];
<!-- FINAL CTA -->
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<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">📞 080-995-5945</a>
<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>
@@ -462,13 +466,12 @@ const data = serviceData[slug] || serviceData['webdev'];
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 900;
line-height: 1.1;
line-height: 1.3; /* Thai-safe */
color: var(--color-black);
margin-bottom: 20px;
}
.title-line { display: block; }
.title-accent { display: block; color: var(--color-primary-dark); }
.title-accent-2 { display: block; color: var(--color-black); }
.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);
@@ -504,7 +507,7 @@ const data = serviceData[slug] || serviceData['webdev'];
.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 { font-size: 24px; flex-shrink: 0; }
.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); }
@@ -549,7 +552,7 @@ const data = serviceData[slug] || serviceData['webdev'];
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 { font-size: 32px; }
.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; }
@@ -564,7 +567,7 @@ const data = serviceData[slug] || serviceData['webdev'];
border-radius: var(--radius-xl);
padding: 32px;
}
.target-icon { font-size: 32px; margin-bottom: 12px; }
.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; }