Initial commit: New MoreminiMore website with fresh design
This commit is contained in:
MoreminiMore
136
src/components/Footer.astro
Normal file
136
src/components/Footer.astro
Normal file
@@ -0,0 +1,136 @@
|
||||
---
|
||||
const services = [
|
||||
{ label: "พัฒนาเว็บไซต์", href: "/web-development" },
|
||||
{ label: "Marketing Automation", href: "/marketing-automation" },
|
||||
{ label: "AI Automation", href: "/ai-automation" },
|
||||
{ label: "ให้คำปรึกษา", href: "/tech-consult" },
|
||||
];
|
||||
|
||||
const company = [
|
||||
{ label: "เกี่ยวกับเรา", href: "/about-us" },
|
||||
{ label: "ผลงาน", href: "/portfolio" },
|
||||
{ label: "บล็อก", href: "/blog" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
];
|
||||
|
||||
const legal = [
|
||||
{ label: "นโยบายความเป็นส่วนตัว", href: "/privacy-policy" },
|
||||
{ label: "ข้อกำหนดการใช้งาน", href: "/terms-and-conditions" },
|
||||
];
|
||||
---
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<div class="footer-section">
|
||||
<a href="/" class="footer-logo">
|
||||
<img src="https://moreminimore.com/wp-content/uploads/2022/09/Moreminimore-logo-long-black.png" alt="MoreminiMore" />
|
||||
</a>
|
||||
<p class="footer-desc">
|
||||
บริษัท มอร์มินิมอร์ จำกัด<br />
|
||||
ผู้เชี่ยวชาญด้าน IT และ Digital Transformation<br />
|
||||
สำหรับธุรกิจ SMEs ไทย
|
||||
</p>
|
||||
<div class="footer-contact">
|
||||
<p>โทร: 080-995-5945</p>
|
||||
<p>อีเมล: contact@moreminimore.com</p>
|
||||
<p>ที่อยู่: 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>บริการ</h4>
|
||||
<ul>
|
||||
{services.map((item) => (
|
||||
<li><a href={item.href}>{item.label}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>บริษัท</h4>
|
||||
<ul>
|
||||
{company.map((item) => (
|
||||
<li><a href={item.href}>{item.label}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>ข้อมูลทางกฎหมาย</h4>
|
||||
<ul>
|
||||
{legal.map((item) => (
|
||||
<li><a href={item.href}>{item.label}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© {new Date().getFullYear()} บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-neutral);
|
||||
padding: 4rem 0 2rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
font-family: 'Kanit', sans-serif;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-section li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
color: var(--color-neutral);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer-logo img {
|
||||
height: 40px;
|
||||
margin-bottom: 1rem;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.footer-desc {
|
||||
color: var(--color-light-gray);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-light-gray);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid var(--color-dark-gray);
|
||||
margin-top: 3rem;
|
||||
padding-top: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-light-gray);
|
||||
}
|
||||
</style>
|
||||
86
src/components/Header.astro
Normal file
86
src/components/Header.astro
Normal file
@@ -0,0 +1,86 @@
|
||||
---
|
||||
const navItems = [
|
||||
{ label: "หน้าหลัก", href: "/" },
|
||||
{ label: "เกี่ยวกับเรา", href: "/about-us" },
|
||||
{ label: "บริการ", href: "/web-development" },
|
||||
{ label: "ผลงาน", href: "/portfolio" },
|
||||
{ label: "บล็อก", href: "/blog" },
|
||||
{ label: "ติดต่อเรา", href: "/contact-us" },
|
||||
];
|
||||
|
||||
const currentPath = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<header class="header">
|
||||
<div class="container header-inner">
|
||||
<a href="/" class="logo">
|
||||
<img src="https://moreminimore.com/wp-content/uploads/2022/09/Moreminimore-logo-long-black.png" alt="MoreminiMore" />
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<ul class="nav-list">
|
||||
{navItems.map((item) => (
|
||||
<li>
|
||||
<a
|
||||
href={item.href}
|
||||
class:list={["nav-link", { active: currentPath === item.href }]}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="/contact-us" class="btn-primary">ปรึกษาฟรี</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
background-color: var(--color-neutral);
|
||||
border-bottom: 1px solid var(--color-light-gray);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--color-dark-gray);
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
src/components/consent/CookieBanner.astro
Normal file
183
src/components/consent/CookieBanner.astro
Normal file
@@ -0,0 +1,183 @@
|
||||
---
|
||||
---
|
||||
|
||||
<div id="cookie-banner" class="cookie-banner" style="display: none;">
|
||||
<div class="cookie-content">
|
||||
<h3>🍪 การใช้คุกกี้</h3>
|
||||
<p>เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานเว็บไซต์ของคุณ คุณสามารถเลือกได้ว่าจะอนุญาตคุกกี้ประเภทใด</p>
|
||||
|
||||
<div class="cookie-options">
|
||||
<label class="cookie-option">
|
||||
<input type="checkbox" id="cookie-necessary" checked disabled />
|
||||
<span>จำเป็น (necessary)</span>
|
||||
</label>
|
||||
<label class="cookie-option">
|
||||
<input type="checkbox" id="cookie-performance" />
|
||||
<span>ประสิทธิภาพ (performance)</span>
|
||||
</label>
|
||||
<label class="cookie-option">
|
||||
<input type="checkbox" id="cookie-marketing" />
|
||||
<span>การตลาด (marketing)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="cookie-buttons">
|
||||
<button id="cookie-accept-all" class="btn-primary">ยอมรับทั้งหมด</button>
|
||||
<button id="cookie-reject-all" class="btn-secondary">ปฏิเสธทั้งหมด</button>
|
||||
<button id="cookie-save" class="btn-outline">บันทึกการตั้งค่า</button>
|
||||
</div>
|
||||
|
||||
<a href="/privacy-policy" class="cookie-link">อ่านนโยบายความเป็นส่วนตัว</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const CONSENT_KEY = 'moreminimore_consent';
|
||||
|
||||
function getConsent(): { necessary: boolean; performance: boolean; marketing: boolean } | null {
|
||||
const stored = localStorage.getItem(CONSENT_KEY);
|
||||
if (stored) {
|
||||
try {
|
||||
return JSON.parse(stored);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function setConsent(consent: { necessary: boolean; performance: boolean; marketing: boolean }) {
|
||||
localStorage.setItem(CONSENT_KEY, JSON.stringify(consent));
|
||||
if (consent.performance || consent.marketing) {
|
||||
enableTracking(consent);
|
||||
}
|
||||
}
|
||||
|
||||
function enableTracking(consent: { performance: boolean; marketing: boolean }) {
|
||||
console.log('Tracking enabled:', consent);
|
||||
}
|
||||
|
||||
function showBanner() {
|
||||
const banner = document.getElementById('cookie-banner');
|
||||
if (banner) {
|
||||
banner.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function hideBanner() {
|
||||
const banner = document.getElementById('cookie-banner');
|
||||
if (banner) {
|
||||
banner.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const consent = getConsent();
|
||||
if (!consent) {
|
||||
showBanner();
|
||||
} else {
|
||||
enableTracking(consent);
|
||||
}
|
||||
|
||||
const acceptAll = document.getElementById('cookie-accept-all');
|
||||
const rejectAll = document.getElementById('cookie-reject-all');
|
||||
const save = document.getElementById('cookie-save');
|
||||
|
||||
if (acceptAll) {
|
||||
acceptAll.addEventListener('click', () => {
|
||||
setConsent({ necessary: true, performance: true, marketing: true });
|
||||
hideBanner();
|
||||
});
|
||||
}
|
||||
|
||||
if (rejectAll) {
|
||||
rejectAll.addEventListener('click', () => {
|
||||
setConsent({ necessary: true, performance: false, marketing: false });
|
||||
hideBanner();
|
||||
});
|
||||
}
|
||||
|
||||
if (save) {
|
||||
save.addEventListener('click', () => {
|
||||
const performance = (document.getElementById('cookie-performance') as HTMLInputElement)?.checked || false;
|
||||
const marketing = (document.getElementById('cookie-marketing') as HTMLInputElement)?.checked || false;
|
||||
setConsent({ necessary: true, performance, marketing });
|
||||
hideBanner();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cookie-banner {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-neutral);
|
||||
border-top: 2px solid var(--color-primary);
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.cookie-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cookie-content h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
.cookie-content p {
|
||||
color: var(--color-dark-gray);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.cookie-options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cookie-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cookie-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-dark-gray);
|
||||
color: var(--color-dark-gray);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
|
||||
.cookie-link {
|
||||
color: var(--color-dark-gray);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
16
src/content.config.ts
Normal file
16
src/content.config.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const blog = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
pubDate: z.date(),
|
||||
author: z.string(),
|
||||
category: z.string(),
|
||||
tags: z.array(z.string()),
|
||||
imagePrompt: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { blog };
|
||||
87
src/content/blog/5-ways-ai-increase-sales.md
Normal file
87
src/content/blog/5-ways-ai-increase-sales.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
title: "5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ"
|
||||
description: "ค้นพบ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายให้ธุรกิจ SMEs ไทย พร้อมตัวอย่างและแนวทางการนำไปใช้จริง"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "AI Business"
|
||||
tags: ["AI", "ยอดขาย", "ธุรกิจ", "Marketing", "SME"]
|
||||
image: /images/blog/5-ways-ai-increase-sales.jpg
|
||||
imagePrompt: "ภาพแสดงการเพิ่มยอดขายด้วย AI กราฟขึ้นสูง ตัวเลขยอดขาย เครื่องหมายบวกสีเขียว AI สีฟ้า พื้นหลังสีขาว มีรูปทรงเรขาคณิตแสดงถึงการเติบโตและความสำเร็จ"
|
||||
---
|
||||
|
||||
# 5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ
|
||||
|
||||
การเพิ่มยอดขายเป็นเป้าหมายหลักของทุกธุรกิจ แต่ในยุคที่การแข่งขันสูงขึ้น การใช้วิธีเดิมๆ อาจไม่เพียงพออีกต่อไป AI สามารถเป็นเครื่องมือทรงพลังที่ช่วยให้ธุรกิจของคุณเพิ่มยอดขายได้อย่างมีประสิทธิภาพ นี่คือ 5 วิธีที่คุณสามารถนำไปใช้ได้ทันที
|
||||
|
||||
## วิธีที่ 1: ใช้ AI วิเคราะห์ลูกค้าและแนะนำสินค้าที่ตรงใจ
|
||||
|
||||
หนึ่งในความสามารถที่ทรงพลังที่สุดของ AI คือการวิเคราะห์ข้อมูลลูกค้าและค้นหารูปแบบที่มนุษย์อาจมองไม่เห็น AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนชอบสินค้าประเภทไหน ซื้อในช่วงเวลาไหน และมีพฤติกรรมการซื้ออย่างไร
|
||||
|
||||
จากข้อมูลเหล่านี้ AI สามารถแนะนำสินค้าที่ลูกค้ามีโอกาสซื้อสูงที่สุด เว็บไซต์ช้อปปิ้งใหญ่ๆ อย่าง Shopee หรือ Lazada ใช้ระบบนี้มานานแล้ว และผลลัพธ์ก็ชัดเจน การแนะนำสินค้าที่เหมาะสมสามารถเพิ่มยอดขายได้ถึง 30%
|
||||
|
||||
สำหรับ SMEs สามารถเริ่มต้นได้โดยใช้เครื่องมือ CRM ที่มี AI วิเคราะห์ในตัว หรือเชื่อมต่อกับแพลตฟอร์มอีคอมเมิร์ซที่มีฟีเจอร์นี้
|
||||
|
||||
## วิธีที่ 2: ใช้ Chatbot ดูแลลูกค้าตลอด 24 ชั่วโมง
|
||||
|
||||
ลูกค้าจำนวนมากต้องการได้รับคำตอบทันที ไม่ว่าจะกี่โมง แต่การจ้างพนักงานทำงาน 24 ชั่วโมงนั้นมีค่าใช้จ่ายสูง Chatbot ที่ใช้ AI สามารถตอบคำถามลูกค้าได้ตลอดเวลา โดยไม่ต้องเสียค่าล่วงเวลา
|
||||
|
||||
Chatbot สามารถช่วยตอบคำถามที่พบบ่อย เช่น ราคาสินค้า วิธีสั่งซื้อ การจัดส่ง และนำไปสู่การสั่งซื้อได้โดยตรง นอกจากนี้ยังสามารถเก็บข้อมูลลูกค้าไว้ใช้ในการตลาดต่อไป
|
||||
|
||||
ในประเทศไทย LINE เป็นช่องทางหลักในการติดต่อธุรกิจ การมี Chatbot บน LINE จึงเป็นสิ่งจำเป็นสำหรับธุรกิจที่ต้องการเพิ่มยอดขาย
|
||||
|
||||
## วิธีที่ 3: ใช้ AI ส่งข้อความการตลาดในเวลาที่เหมาะสม
|
||||
|
||||
การส่งข้อความการตลาดไม่ใช่แค่การส่งออกไปเท่านั้น แต่ต้องส่งในเวลาที่ลูกค้ามีโอกาสอ่านและตอบสนองมากที่สุด AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนมีช่วงเวลาไหนที่เปิดอ่านข้อความบ่อยที่สุด และส่งในเวลานั้น
|
||||
|
||||
AI ยังสามารถแบ่งกลุ่มลูกค้าตามพฤติกรรมและส่งข้อความที่เหมาะสมกับแต่ละกลุ่ม เช่น ลูกค้าที่ยังไม่เคยซื้อ อาจได้รับโปรโมชันพิเศษ ขณะที่ลูกค้าเก่าอาจได้รับข้อเสนอสำหรับสินค้าใหม่
|
||||
|
||||
การใช้ AI ช่วยในการส่งข้อความการตลาดสามารถเพิ่มอัตราการตอบกลับได้หลายเท่าตัว เพราะข้อความถูกส่งไปยังคนที่ใช่ ในเวลาที่ใช่
|
||||
|
||||
## วิธีที่ 4: ใช้ AI สร้างเนื้อหาการตลาด
|
||||
|
||||
เนื้อหาการตลาดที่ดีเป็นหัวใจสำคัญในการดึงดูดลูกค้า แต่การสร้างเนื้อหาที่มีคุณภาพตลอดเวลาต้องใช้เวลาและทรัพยากรมาก AI สามารถช่วยสร้างเนื้อหาได้เร็วขึ้น ไม่ว่าจะเป็นโพสต์เฟซบุ๊ก คำบรรยายสินค้า อีเมลการตลาด หรือบทความบล็อก
|
||||
|
||||
AI ไม่ได้มาแทนที่นักเขียนมนุษย์ แต่มาช่วยเป็นผู้ช่วยที่รวดเร็ว คุณสามารถใช้ AI สร้าง draft แรก แล้วนำมาแก้ไขปรับปรุงให้เหมาะกับเสียงของแบรนด์
|
||||
|
||||
สำหรับธุรกิจที่ต้องสร้างเนื้อหาจำนวนมาก AI สามารถช่วยลดเวลาในการสร้างเนื้อหาได้ถึง 70% ทำให้สามารถทำการตลาดได้บ่อยขึ้นโดยไม่ต้องเพิ่มทีม
|
||||
|
||||
## วิธีที่ 5: ใช้ AI ทำนายแนวโน้มและวางแผนสินค้า
|
||||
|
||||
การมีสินค้าคงคลงเป็นสิ่งจำเป็นสำหรับธุรกิจค้าปลีก แต่การมีสินค้ามากเกินไปก็เป็นปัญหา AI สามารถวิเคราะห์ข้อมูลยอดขายในอดีต ฤดูกาล และปัจจัยอื่นๆ เพื่อทำนายว่าควรสั่งสินค้าเท่าไหร่ในแต่ละช่วง
|
||||
|
||||
การใช้ AI ทำนายความต้องการสินค้าช่วยลดปัญหาของเสียจากสินค้าขายไม่ออก และไม่ต้องเสียโอกาสจากสินค้าขาดตลาด ธุรกิจอาหารสามารถใช้ทำนายว่าวันไหนควรเตรียมวัตถุดิบเท่าไหร่ ธุรกิจแฟชั่นสามารถทำนายว่าสินค้าสีไหนจะขายดี
|
||||
|
||||
## เริ่มต้นอย่างไร
|
||||
|
||||
การนำ AI มาใช้ไม่จำเป็นต้องลงทุนมากตั้งแต่แรก แนะนำให้เริ่มจากสิ่งที่ง่ายที่สุดและเห็นผลเร็วที่สุด
|
||||
|
||||
**เริ่มจาก Chatbot** บน LINE เป็นจุดเริ่มต้นที่ดี เพราะลูกค้าไทยคุ้นเคยกับการติดต่อผ่าน LINE มากที่สุด
|
||||
|
||||
**ใช้เครื่องมือที่มีอยู่แล้ว** หลายแพลตฟอร์มอีคอมเมิร์ซมีฟีเจอร์ AI ในตัว ลองสำรวจดูก่อนว่ามีอะไรที่สามารถใช้ได้ทันที
|
||||
|
||||
**เก็บข้อมูลให้ดี** AI ทำงานได้ดีเมื่อมีข้อมูลที่ดี การเก็บข้อมูลลูกค้าอย่างเป็นระบบจะช่วยให้ AI ทำงานได้มีประสิทธิภาพมากขึ้น
|
||||
|
||||
**วัดผลและปรับปรุง** ทดลองใช้แต่ละวิธีและวัดผลอย่างสม่ำเสมอ เก็บข้อมูลว่าวิธีไหนได้ผลดีสำหรับธุรกิจของคุณ
|
||||
|
||||
## บทสรุป
|
||||
|
||||
AI ไม่ใช่เทคโนโลยีที่ใช้ได้เฉพาะบริษัทใหญ่อีกต่อไป ธุรกิจ SMEs สามารถเริ่มใช้ประโยชน์จาก AI ได้ง่ายๆ และมีเครื่องมือมากมายที่เข้าถึงได้ สิ่งสำคัญคือการเริ่มต้นและเรียนรู้ไปพร้อมกับการเติบโตของธุรกิจ
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: ต้องลงทุนเท่าไหร่ในการเริ่มใช้ AI?**
|
||||
ตอบ: เริ่มต้นได้ฟรีหรือราคาต่ำมาก หลายเครื่องมือมีแพลนฟรีสำหรับธุรกิจขนาดเล็ก ค่าใช้จ่ายจะเพิ่มขึ้นตามการใช้งานและความต้องการที่ซับซ้อนขึ้น
|
||||
|
||||
**ถาม: AI จะแทนที่พนักงานขายได้หรือไม่?**
|
||||
ตอบ: AI เป็นเครื่องมือช่วยเสริม ไม่ใช่แทนที่ พนักงานขายยังคงจำเป็นสำหรับงานที่ต้องใช้ความสัมพันธ์และการตัดสินใจที่ซับซ้อน แต่ AI ช่วยให้พนักงานทำงานได้มีประสิทธิภาพมากขึ้น
|
||||
|
||||
**ถาม: ธุรกิจประเภทไหนใช้ AI เพิ่มยอดขายได้ดีที่สุด?**
|
||||
ตอบ: ทุกประเภทธุรกิจสามารถใช้ได้ ไม่ว่าจะเป็นอีคอมเมิร์ซ ร้านอาหาร บริการ หรือค้าปลีก สิ่งที่แตกต่างคือวิธีการนำไปใช้ที่เหมาะกับแต่ละธุรกิจ
|
||||
|
||||
**ถาม: ใช้เวลาเท่าไหร่กว่าจะเห็นผล?**
|
||||
ตอบ: ขึ้นอยู่กับวิธีการ Chatbot และการแนะนำสินค้าสามารถเห็นผลได้ทันที ส่วนการทำนายแนวโน้มอาจต้องใช้เวลาเก็บข้อมูลสักครู่
|
||||
|
||||
**ถาม: ต้องมีความรู้ด้านเทคโนโลยีมากไหม?**
|
||||
ตอบ: ไม่จำเป็น เครื่องมือ AI ปัจจุบันออกแบบมาให้ใช้ง่าย มีคำแนะนำชัดเจน สิ่งสำคัญคือการเข้าใจธุรกิจของตัวเองและรู้ว่าต้องการแก้ปัญหาอะไร
|
||||
104
src/content/blog/ai-content-google-love.md
Normal file
104
src/content/blog/ai-content-google-love.md
Normal file
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: "วิธีสร้าง Content ด้วย AI ที่ Google รัก"
|
||||
description: "เรียนรู้วิธีการใช้ AI ช่วยสร้างเนื้อหาการตลาดที่มีคุณภาพและได้รับการจัดอันดับดีจาก Google พร้อมเทคนิคและตัวอย่างจริง"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "AI Content"
|
||||
tags: ["AI", "Content", "SEO", "การเขียน", "Google", "Marketing"]
|
||||
image: /images/blog/ai-content-google-love.jpg
|
||||
imagePrompt: "ภาพแสดงการสร้างเนื้อหาด้วย AI หน้าจอคอมพิวเตอร์แสดงข้อความ AI และเอกสาร ปากกาสีฟ้าวางบนแป้นพิมพ์ พื้นหลังสีขาว สื่อถึงการเขียนและสร้างสรรค์"
|
||||
---
|
||||
|
||||
# วิธีสร้าง Content ด้วย AI ที่ Google รัก
|
||||
|
||||
การสร้างเนื้อหาคุณภาพอย่างสม่ำเสมอเป็นความท้าทายสำหรับหลายธุรกิจ AI สามารถช่วยเพิ่มความเร็วในการสร้างเนื้อหาได้มาก แต่ต้องรู้วิธีใช้ให้ถูกต้อง ไม่ใช่แค่สร้างเนื้อหาขึ้นมาเท่านั้น แต่ต้องสร้างเนื้อหาที่ Google รักและผู้อ่านรักด้วย
|
||||
|
||||
## ทำไม AI Content ต้องมีคุณภาพ
|
||||
|
||||
Google มีอัลกอริทึมที่ฉลาดมาก สามารถแยกแยะได้ว่าเนื้อหาที่สร้างโดย AI มีคุณภาพหรือไม่ เนื้อหาที่ไม่มีคุณค่า สร้างขึ้นแค่เพื่อใส่คีย์เวิร์ด จะถูกลงโทษและไม่ติดอันดับ
|
||||
|
||||
AI เป็นเครื่องมือช่วยสร้างสรรค์ ไม่ใช่เครื่องมาสร้างเนื้อหาทั้งหมดโดยไม่ตรวจสอบ การใช้ AI ที่ถูกต้องจะช่วยให้คุณสร้างเนื้อหาได้เร็วขึ้นโดยไม่ลดคุณภาพ
|
||||
|
||||
## วิธีใช้ AI สร้างเนื้อหาที่ดี
|
||||
|
||||
### 1. ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้เขียนทั้งหมด
|
||||
|
||||
วิธีที่ดีที่สุดคือใช้ AI ช่วยในบางส่วน เช่น รวบรวมข้อมูล สร้างโครงสร้าง หรือเขียน draft แล้วนำมาปรับแรก ปรุงด้วยมนุษย์ การเพิ่มประสบการณ์และมุมมองเฉพาะตัวจะทำให้เนื้อหาโดดเด่น
|
||||
|
||||
### 2. เลือกหัวข้อที่คุณมีความรู้จริง
|
||||
|
||||
แม้ AI จะเขียนได้ แต่หัวข้อที่คุณมีความรู้และประสบการณ์จริงจะทำให้เนื้อหามีความลึกและน่าเชื่อถือมากขึ้น คุณสามารถใช้ AI ช่วยจัดระเบียบความรู้ที่มีอยู่แล้ว แต่ความรู้นั้นต้องมาจากตัวคุณ
|
||||
|
||||
### 3. ตอบคำถามที่ผู้อ่านต้องการจริงๆ
|
||||
|
||||
ก่อนเขียน ควรหาว่าผู้อ่านมีคำถามอะไร ค้นหาจาก Google เอง ดูว่ามีคำถามที่ยังไม่มีคำตอบที่ดี หรือมีคำตอบที่ดีแล้วแต่สามารถตอบได้ดีกว่า AI สามารถช่วยค้นหาคำถามเหล่านี้ได้
|
||||
|
||||
### 4. เพิ่มตัวอย่างและประสบการณ์จริง
|
||||
|
||||
เนื้อหาที่ดีต้องมีตัวอย่างจริง ไม่ใช่แค่ทฤษฎี เล่าประสบการณ์ของคุณเอง ให้กรณีศึกษา สิ่งเหล่านี้ทำให้เนื้อหาโดดเด่นและน่าเชื่อถือ AI ไม่สามารถเล่าประสบการณ์ของคุณได้ คุณต้องทำเอง
|
||||
|
||||
### 5. ตรวจสอบและแก้ไขทุกครั้ง
|
||||
|
||||
AI อาจสร้างข้อมูลที่ไม่ถูกต้อง ความผิดพลาดทางไวยากรณ์ หรือเนื้อหาที่ซ้ำซ้อน ต้องอ่านทุกครั้งและแก้ไขให้ดีก่อนเผยแพร่ การตรวจสอบเป็นขั้นตอนที่ข้ามไม่ได้
|
||||
|
||||
## โครงสร้างเนื้อหาที่ดี
|
||||
|
||||
### หัวข้อที่ดึงดูดและตรงประเด็น
|
||||
หัวข้อควรบอกผู้อ่านได้ทันทีว่าจะได้อ่านอะไร ใช้คีย์เวิร์ดหลักในหัวข้อ แต่อย่ากระโดดจนอ่านไม่รู้เรื่อง
|
||||
|
||||
### เนื้อหาที่มีโครงสร้างชัดเจน
|
||||
ใช้หัวข้อย่อย (H2, H3) แบ่งเป็นส่วนๆ ย่อหน้าสั้นๆ อ่านง่าย ใช้รายการเมื่อมีหลายข้อ
|
||||
|
||||
### สรุปและ Call to Action
|
||||
ปิดท้ายด้วยสรุปสิ่งที่ได้อ่าน และบอกผู้อ่านว่าควรทำอะไรต่อไป
|
||||
|
||||
## ประเภทเนื้อหาที่ AI ช่วยได้ดี
|
||||
|
||||
### บทความบล็อก
|
||||
AI สามารถช่วยสร้างโครงสร้าง หาข้อมูลพื้นฐาน และเขียน draft ได้ คุณนำมาเพิ่มประสบการณ์และตัวอย่างจริง
|
||||
|
||||
### โพสต์โซเชียลมีเดีย
|
||||
AI ช่วยสร้างไอเดีย หัวข้อ และ draft โพสต์ได้รวดเร็ว ช่วยให้โพสต์บ่อยขึ้นได้
|
||||
|
||||
### คำบรรยายสินค้า
|
||||
สำหรับร้านค้าออนไลน์ AI สามารถช่วยเขียนคำบรรยายสินค้าได้ แต่ต้องเพิ่มรายละเอียดเฉพาะและปรับให้เป็นเสียงแบรนด์
|
||||
|
||||
### อีเมลการตลาด
|
||||
AI ช่วยสร้างหัวข้ออีเมลและ draft ได้ ช่วยให้ส่งอีเมลได้บ่อยขึ้นโดยไม่ต้องใช้เวลามาก
|
||||
|
||||
## สิ่งที่ควรทำและไม่ควรทำ
|
||||
|
||||
**ควรทำ**
|
||||
- ตรวจสอบข้อมูลทุกครั้งก่อนเผยแพร่
|
||||
- เพิ่มความเห็นและประสบการณ์ตัวเอง
|
||||
- ใช้ AI ช่วยวิจัยและรวบรวมข้อมูล
|
||||
- สร้างเนื้อหาที่มีประโยชน์จริงๆ กับผู้อ่าน
|
||||
|
||||
**ไม่ควรทำ**
|
||||
- ตีพิมพ์เนื้อหา AI โดยไม่ตรวจสอบ
|
||||
- ใช้ AI สร้างเนื้อหาทั้งหมดโดยไม่เพิ่มคุณค่า
|
||||
- พยายามหลอก Google ด้วยเทคนิคที่ผิดกฎ
|
||||
- ลอกเลียนเนื้อหาจากเว็บอื่นมาแก้ไขเล็กน้อย
|
||||
|
||||
## บทสรุป
|
||||
|
||||
AI เป็นเครื่องมือทรงพลังสำหรับการสร้างเนื้อหา แต่ต้องใช้อย่างชาญฉลาด จุดมุ่งหมายคือการสร้างเนื้อหาที่มีคุณค่ากับผู้อ่าน ไม่ใช่แค่สร้างเนื้อหาให้ติดอันดับ Google เนื้อหาที่ดีจะได้รับการจัดอันดับที่ดีในระยะยาว เพราะผู้อ่านจะกลับมาอ่านและแชร์ต่อ
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: Google ลงโทษเนื้อหาที่สร้างด้วย AI ไหม?**
|
||||
ตอบ: Google ไม่ได้ลงโทษเนื้อหาเพราะเขียนด้วย AI โดยตรง แต่ลงโทษเนื้อหาที่มีคุณภาพต่ำ ทำให้ผู้ใช้ไม่ได้รับประโยชน์
|
||||
|
||||
**ถาม: ใช้ AI เขียนเนื้อหาทั้งหมดแล้วแก้นิดหน่อยได้ไหม?**
|
||||
ตอบ: ไม่แนะนำ ควรใช้ AI เป็นตัวช่วยในบางส่วน แล้วเพิ่มคุณค่าจากความรู้และประสบการณ์ของคุณเอง
|
||||
|
||||
**ถาม: เครื่องมือ AI ไหนดีที่สุดสำหรับการเขียน?**
|
||||
ตอบ: มีหลายตัวที่ดี ขึ้นอยู่กับความต้องการและงบประมาณ ควรทดลองหลายตัวแล้วเลือกตัวที่เหมาะกับคุณ
|
||||
|
||||
**ถาม: ต้องระบุในเว็บไซต์ไหมว่าใช้ AI เขียน?**
|
||||
ตอบ: ไม่จำเป็นตามกฎของ Google แต่ควรทำเพื่อความโปร่งใสกับผู้อ่าน
|
||||
|
||||
**ถาม: ทำไมเนื้อหาที่ใช้ AI เขียนถึงไม่ติดอันดับ?**
|
||||
ตอบ: อาจเป็นเพราะเนื้อหาไม่มีคุณค่าเพียงพอ ข้อมูลไม่ถูกต้อง หรือไม่ได้เพิ่มความเฉพาะตัวที่ทำให้โดดเด่น
|
||||
93
src/content/blog/ai-for-sme-thailand.md
Normal file
93
src/content/blog/ai-for-sme-thailand.md
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: "AI คืออะไร และทำไม SMEs ไทยควรรู้จัก"
|
||||
description: "เรียนรู้พื้นฐาน AI และเหตุผลที่ธุรกิจ SMEs ไทยต้องเข้าใจเทคโนโลยีนี้ เพื่อเตรียมพร้อมสู่การเปลี่ยนแปลงทางดิจิทัล"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "AI Basics"
|
||||
tags: ["AI", "SME", "ดิจิทัลทรานส์ฟอร์เมชัน", "เทคโนโลยี", "ธุรกิจ"]
|
||||
image: /images/blog/ai-for-sme-thailand.jpg
|
||||
imagePrompt: "ภาพแสดงตัวอย่าง AI สำหรับธุรกิจ SME ไทย แสดงหน้าจอคอมพิวเตอร์ที่มีกราฟและตัวเลข เครื่องหมาย AI สีฟ้าอ่อน พื้นหลังสีขาว มีรูปทรงเรขาคณิตสีฟ้าและม่วง แสดงถึงเทคโนโลยีและความทันสมัย"
|
||||
---
|
||||
|
||||
# AI คืออะไร และทำไม SMEs ไทยควรรู้จัก
|
||||
|
||||
ในยุคที่เทคโนโลยีเปลี่ยนแปลงอย่างรวดเร็ว คำว่า "AI" หรือ "ปัญญาประดิษฐ์" ได้ยินบ่อยขึ้นทุกวัน แต่หลายคนอาจสงสัยว่า AI คืออะไรกันแน่ และทำไมธุรกิจขนาดกลางและย่อมอย่าง SMEs ไทยถึงต้องใส่ใจกับเรื่องนี้
|
||||
|
||||
## AI คืออะไร
|
||||
|
||||
AI ย่อมาจาก Artificial Intelligence หรือปัญญาประดิษฐ์ หมายถึงระบบคอมพิวเตอร์ที่สามารถทำงานที่ต้องใช้สติปัญญาของมนุษย์ เช่น การเรียนรู้ การตัดสินใจ การแก้ปัญหา และการเข้าใจภาษา
|
||||
|
||||
AI มีหลายประเภท แต่ที่ได้ยินบ่อยที่สุดในวงการธุรกิจ ได้แก่
|
||||
|
||||
**Machine Learning** คือระบบที่เรียนรู้จากข้อมูล และสามารถปรับปรุงการทำงานได้เองโดยไม่ต้องเขียนโปรแกรมเพิ่มเติม ตัวอย่างเช่น ระบบแนะนำสินค้าที่เว็บไซต์ช้อปปิ้ง
|
||||
|
||||
**Natural Language Processing** หรือ NLP คือระบบที่เข้าใจและประมวลผลภาษามนุษย์ ทำให้สามารถสนทนากับคอมพิวเตอร์ได้อย่างเป็นธรรมชาติ เช่น Chatbot ที่ตอบคำถามลูกค้า
|
||||
|
||||
**Generative AI** คือระบบที่สามารถสร้างเนื้อหาใหม่ ไม่ว่าจะเป็นข้อความ ภาพ หรือเสียง จากข้อมูลที่มันเคยเรียนรู้มา
|
||||
|
||||
## ทำไม SMEs ไทยต้องสนใจ AI
|
||||
|
||||
ธุรกิจ SMEs ในประเทศไทยมีจำนวนมากกว่า 3 ล้านราย คิดเป็นสัดส่วนเกือบ 100% ของธุรกิจทั้งหมดในประเทศ แต่หลายธุรกิจยังเผชิญกับความท้าทาย เช่น ขาดบุคลากรที่มีความเชี่ยวชาญ งบประมาณจำกัด และเวลาที่ต้องดูแลหลายเรื่องพร้อมกัน
|
||||
|
||||
AI สามารถช่วยแก้ปัญหาเหล่านี้ได้ในหลายรูปแบบ
|
||||
|
||||
**ลดภาระงานซ้ำซ้อน** AI สามารถทำงานที่ต้องทำซ้ำๆ ทุกวันแทนคน เช่น การตอบคำถามลูกค้าที่ถามบ่อย การคัดกรองอีเมล หรือการบันทึกข้อมูล ทำให้พนักงานมีเวลาทำงานที่มีคุณค่ามากขึ้น
|
||||
|
||||
**เพิ่มยอดขาย** AI ช่วยวิเคราะห์พฤติกรรมลูกค้า ทำให้สามารถแนะนำสินค้าที่ตรงกับความต้องการ หรือส่งข้อความการตลาดในเวลาที่เหมาะสม
|
||||
|
||||
**ลดต้นทุน** การใช้ AI ช่วยงานสามารถลดค่าใช้จ่ายในหลายด้าน เช่น ลดจำนวนพนักงานที่ต้องทำงานซ้ำๆ ลดข้อผิดพลาดจากการทำงานด้วยมนุษย์
|
||||
|
||||
**ตัดสินใจดีขึ้น** AI สามารถวิเคราะห์ข้อมูลจำนวนมากและนำเสนอข้อมูลเชิงลึกที่ช่วยในการตัดสินใจทางธุรกิจ
|
||||
|
||||
## ตัวอย่างการใช้ AI ในธุรกิจ SMEs ไทย
|
||||
|
||||
ร้านค้าปลีกออนไลน์สามารถใช้ AI วิเคราะห์ว่าลูกค้าซื้อสินค้าอะไรบ่อย แล้วแนะนำสินค้าที่เกี่ยวข้อง ทำให้เพิ่มโอกาสในการขาย
|
||||
|
||||
ร้านอาหารสามารถใช้ AI ทำนายว่าแต่ละวันควรเตรียมวัตถุดิบเท่าไหร่ เพื่อลดของเสียและไม่ขาดสินค้า
|
||||
|
||||
ธุรกิจบริการสามารถใช้ Chatbot ตอบคำถามลูกค้าตลอด 24 ชั่วโมง ไม่ต้องจ้างพนักงานเพิ่ม
|
||||
|
||||
## เริ่มต้นใช้ AI ต้องทำอย่างไร
|
||||
|
||||
สำหรับ SMEs ที่สนใจนำ AI มาใช้ แนะนำให้เริ่มจากจุดเล็กๆ ก่อน ไม่จำเป็นต้องลงทุนมากในตอนเริ่มต้น
|
||||
|
||||
**ขั้นตอนที่ 1 ระบุปัญหา** ดูว่าธุรกิจมีงานอะไรที่ต้องทำซ้ำๆ บ่อยๆ หรือมีจุดที่ต้องใช้เวลามากเกินไป
|
||||
|
||||
**ขั้นตอนที่ 2 หาโซลูชัน** ค้นหาเครื่องมือ AI ที่มีอยู่แล้วในตลาด หลายตัวมีราคาถูกหรือ甚至ฟรีสำหรับธุรกิจขนาดเล็ก
|
||||
|
||||
**ขั้นตอนที่ 3 เริ่มทดลอง** ใช้กับงานหนึ่งงานก่อน วัดผลว่าได้ผลดีขึ้นหรือไม่
|
||||
|
||||
**ขั้นตอนที่ 4 ขยายผล** เมื่อเห็นผลแล้ว ค่อยขยายไปใช้กับงานอื่นๆ เพิ่มเติม
|
||||
|
||||
## สิ่งที่ควรรู้เกี่ยวกับ AI
|
||||
|
||||
มีบางสิ่งที่เจ้าของธุรกิจ SMEs ควรเข้าใจก่อนเริ่มใช้ AI
|
||||
|
||||
AI ไม่ใช่สิ่งมหัศจรรย์ที่จะแก้ปัญหาทุกอย่างได้ทันที ต้องมีการตั้งค่าและปรับแต่งให้เหมาะกับธุรกิจ
|
||||
|
||||
ข้อมูลที่ดีเป็นหัวใจสำคัญ ยิ่งมีข้อมูลที่ถูกต้องและครบถ้วนมากเท่าไหร่ AI ยิ่งทำงานได้ดี
|
||||
|
||||
การเริ่มต้นไม่จำเป็นต้องมีความรู้ด้านเทคโนโลยีลึกซึ้ง ปัจจุบันมีเครื่องมือ AI ที่ใช้งานง่ายมากขึ้นเรื่อยๆ
|
||||
|
||||
## บทสรุป
|
||||
|
||||
AI ไม่ใช่เรื่องไกลตัวสำหรับ SMEs ไทยอีกต่อไป ด้วยเทคโนโลยีที่เข้าถึงง่ายและราคาไม่แพง ธุรกิจขนาดเล็กสามารถเริ่มใช้ประโยชน์จาก AI ได้ตั้งแต่วันนี้ สิ่งสำคัญคือการเริ่มต้นจากจุดเล็กๆ และเรียนรู้ไปพร้อมกับการเติบโตของธุรกิจ
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: AI ต้องลงทุนเยอะหรือไม่?**
|
||||
ตอบ: ไม่จำเป็นเสมอไป ปัจจุบันมีเครื่องมือ AI หลายตัวที่มีราคาสมเหตุสมผลสำหรับ SMEs หรือแม้แต่ฟรีในระดับเริ่มต้น สิ่งสำคัญคือการเลือกเครื่องมือที่เหมาะกับความต้องการจริงของธุรกิจ
|
||||
|
||||
**ถาม: ธุรกิจขนาดเล็กมากๆ ก็ใช้ AI ได้หรือไม่?**
|
||||
ตอบ: ได้แน่นอน เริ่มต้นจากการใช้ Chatbot ฟรีบน LINE หรือ Facebook ก็ช่วยลดภาระงานได้มากแล้ว การเริ่มต้นไม่จำเป็นต้องซับซ้อน
|
||||
|
||||
**ถาม: ต้องมีความรู้เทคโนโลยีมากไหม?**
|
||||
ตอบ: ไม่จำเป็น เครื่องมือ AI ปัจจุบันออกแบบมาให้ใช้งานง่าย มีคำแนะนำชัดเจน สิ่งสำคัญคือการเข้าใจว่าต้องการให้ AI ช่วยอะไร
|
||||
|
||||
**ถาม: AI จะแทนที่พนักงานหรือไม่?**
|
||||
ตอบ: AI ควรมองเป็นเครื่องมือช่วยงานมากกว่าแทนที่คน AI ช่วยทำงานซ้ำๆ ให้พนักงานได้มีเวลาทำงานที่ต้องใช้ความคิดสร้างสรรค์และการตัดสินใจ
|
||||
|
||||
**ถาม: เริ่มจากไหนดี?**
|
||||
ตอบ: แนะนำให้เริ่มจากการใช้ Chatbot ตอบลูกค้า หรือใช้ AI ช่วยสร้างเนื้อหาการตลาด เป็นงานที่เห็นผลเร็วและเริ่มต้นง่าย
|
||||
111
src/content/blog/back-office-automation.md
Normal file
111
src/content/blog/back-office-automation.md
Normal file
@@ -0,0 +1,111 @@
|
||||
---
|
||||
title: "ระบบหลังบ้านอัตโนมัติ ลดงาน เพิ่มประสิทธิภาพ"
|
||||
description: "เรียนรู้วิธีการนำระบบอัตโนมัติมาใช้ในธุรกิจ SMEs เพื่อลดงานซ้ำซ้อน เพิ่มประสิทธิภาพ และประหยัดเวลาสำหรับงานที่สำคัญ"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "Automation"
|
||||
tags: ["อัตโนมัติ", "Back Office", "ระบบ", "ประสิทธิภาพ", "SME"]
|
||||
image: /images/blog/back-office-automation.jpg
|
||||
imagePrompt: "ภาพแสดงระบบอัตโนมัติในสำนักงาน หน้าจอคอมพิวเตอร์แสดงแผนผังการทำงานอัตโนมัติ เครื่องหมายลูกศรและการเชื่อมต่อ พื้นหลังสีขาว สื่อถึงการทำงานที่ราบรื่นและมีประสิทธิภาพ"
|
||||
---
|
||||
|
||||
# ระบบหลังบ้านอัตโนมัติ ลดงาน เพิ่มประสิทธิภาพ
|
||||
|
||||
หลายธุรกิจใช้เวลาส่วนใหญ่ไปกับงานหลังบ้านที่ซ้ำซ้อน เช่น การบันทึกข้อมูล การส่งใบแจ้งหนี้ การติดตามการชำระเงิน และการจัดทำรายงาน งานเหล่านี้แม้จำเป็น แต่ไม่ได้เพิ่มคุณค่าให้กับลูกค้าโดยตรง การนำระบบอัตโนมัติมาใช้สามารถช่วยลดเวลาที่ใช้ในงานเหล่านี้ได้มาก
|
||||
|
||||
## ระบบหลังบ้านคืออะไร
|
||||
|
||||
ระบบหลังบ้านหรือ Back Office คือกระบวนการทำงานที่อยู่เบื้องหลังธุรกิจ ซึ่งลูกค้ามักไม่เห็นโดยตรง แต่มีความสำคัญต่อการดำเนินงาน ได้แก่ การบัญชี การเงิน การจัดการสินค้าคงคลัง การจัดการใบสั่งซื้อ การจัดการลูกค้าสัมพันธ์ และการจัดทำรายงาน
|
||||
|
||||
เมื่องานเหล่านี้ทำด้วยมนุษย์ทั้งหมด ต้องใช้เวลามากและอาจเกิดข้อผิดพลาดได้ ระบบอัตโนมัติสามารถช่วยทำงานเหล่านี้ได้เร็วขึ้น แม่นยำขึ้น และประหยัดเวลามากขึ้น
|
||||
|
||||
## ประโยชน์ของระบบอัตโนมัติหลังบ้าน
|
||||
|
||||
### ลดข้อผิดพลาด
|
||||
มนุษย์อาจทำผิดพลาดได้ โดยเฉพาะเมื่อต้องทำงานซ้ำๆ หลายครั้ง ระบบอัตโนมัติทำงานเดิมทุกครั้ง ลดข้อผิดพลาดจากความเหนื่อยล้าหรือความไม่ตั้งใจ
|
||||
|
||||
### ประหยัดเวลา
|
||||
ระบบทำงานได้ตลอด 24 ชั่วโมงโดยไม่ต้องพัก ทำให้งานที่เคยใช้เวลาหลายชั่วโมงสามารถเสร็จในไม่กี่วินาที
|
||||
|
||||
### ให้ข้อมูลที่แม่นยำ
|
||||
เมื่อระบบทำงานอัตโนมัติ ข้อมูลที่ได้จะถูกต้องและเชื่อถือได้ ช่วยในการตัดสินใจทางธุรกิจ
|
||||
|
||||
### ลดต้นทุน
|
||||
แม้จะต้องลงทุนในตอนแรก แต่ในระยะยาวจะช่วยลดต้นทุนการจ้างพนักงานทำงานซ้ำๆ
|
||||
|
||||
## ตัวอย่างระบบอัตโนมัติที่ SMEs ไทยใช้ได้
|
||||
|
||||
### 1. ระบบบันทึกข้อมูลอัตโนมัติ
|
||||
|
||||
เมื่อมีออร์เดอร์ใหม่จากเว็บไซต์หรือ LINE ระบบสามารถบันทึกข้อมูลลูกค้าและรายการสั่งซื้อลงในฐานข้อมูลโดยอัตโนมัติ โดยไม่ต้องกรอกข้อมูลซ้ำ
|
||||
|
||||
### 2. ระบบส่งใบแจ้งหนี้อัตโนมัติ
|
||||
|
||||
เมื่อมีการขาย ระบบจะส่งใบแจ้งหนี้ให้ลูกค้าทางอีเมลหรือ LINE โดยอัตโนมัติ ลดขั้นตอนการส่งด้วยมนุษย์
|
||||
|
||||
### 3. ระบบติดตามการชำระเงิน
|
||||
|
||||
ระบบสามารถตรวจสอบว่าลูกค้าชำระเงินหรือยัง และส่งข้อความเตือนโดยอัตโนมัติเมื่อใกล้ครบกำหนดหรือเกินกำหนด
|
||||
|
||||
### 4. ระบบจัดการสินค้าคงคลัง
|
||||
|
||||
ระบบติดตามจำนวนสินค้าโดยอัตโนมัติ เมื่อขายสินค้า จำนวนในคลังจะลดลงอัตโนมัติ และแจ้งเตือนเมื่อสินค้าใกล้หมด
|
||||
|
||||
### 5. ระบบจัดทำรายงาน
|
||||
|
||||
ระบบสามารถสร้างรายงานยอดขาย รายงานกำไรขาดทุน หรือรายงานอื่นๆ โดยอัตโนมัติตามกำหนดเวลา ไม่ต้องรอคนมาจัดทำทุกเดือน
|
||||
|
||||
## วิธีเริ่มต้น
|
||||
|
||||
### ขั้นตอนที่ 1: สำรวจงานที่ทำซ้ำๆ
|
||||
|
||||
สังเกตว่ามีงานอะไรที่ต้องทำเหมือนๆ กันทุกวัน หรือทุกสัปดาห์ งานเหล่านี้คือตัวเลือกแรกที่ควรนำมาทำอัตโนมัติ
|
||||
|
||||
### ขั้นตอนที่ 2: เลือกเครื่องมือที่เหมาะสม
|
||||
|
||||
มีเครื่องมือหลากหลายสำหรับ SMEs บางตัวมีราคาถูกหรือฟรี ควรเลือกตามความต้องการและงบประมาณจริงของธุรกิจ
|
||||
|
||||
### ขั้นตอนที่ 3: เริ่มจากจุดเล็กๆ
|
||||
|
||||
ไม่จำเป็นต้องทำทุกอย่างพร้อมกัน เริ่มจากงานหนึ่งหรือสองงานก่อน เมื่อเห็นผลและเข้าใจวิธีการแล้ว ค่อยขยายไปเรื่องอื่น
|
||||
|
||||
### ขั้นตอนที่ 4: ฝึกอบรมทีม
|
||||
|
||||
เมื่อมีระบบใหม่ ต้องสอนพนักงานวิธีใช้งาน พนักงานอาจต้องปรับตัวในตอนแรก แต่จะคุ้มค่าในระยะยาว
|
||||
|
||||
### ขั้นตอนที่ 5: วัดผลและปรับปรุง
|
||||
|
||||
ติดตามว่าระบบทำงานได้ตามที่คาดหวังหรือไม่ ปรับปรุงตามข้อมูลที่ได้เพื่อให้ทำงานได้ดีขึ้น
|
||||
|
||||
## เครื่องมือแนะนำ
|
||||
|
||||
ตลาดมีเครื่องมือหลากหลายสำหรับการทำอัตโนมัติ บางตัวเฉพาะเจาะจง เช่น ระบบบัญชีออนไลน์ ระบบจัดการคลังสินค้า หรือระบบ POS บางตัวเป็นเครื่องมือทั่วไปสำหรับเชื่อมต่อแอปพลิเคชันต่างๆ
|
||||
|
||||
สำหรับธุรกิจเริ่มต้น ควรเลือกเครื่องมือที่มีความสามารถครบในตัว มากกว่าต้องเชื่อมต่อหลายตัว เพราะจะทำให้การเริ่มต้นง่ายขึ้น
|
||||
|
||||
## สิ่งที่ควรระวัง
|
||||
|
||||
การนำระบบอัตโนมัติมาใช้มีบางสิ่งที่ต้องระวัง อย่าพยายามทำทุกอย่างพร้อมกัน ควรเริ่มจากจุดเล็กๆ ก่อน ต้องเลือกเครื่องมือที่เข้ากันได้และรองรับการขยายในอนาคต และต้องฝึกอบรมพนักงานให้เข้าใจวิธีใช้งานก่อนเริ่มต้นจริง
|
||||
|
||||
## บทสรุป
|
||||
|
||||
ระบบหลังบ้านอัตโนมัติเป็นการลงทุนที่คุ้มค่าสำหรับธุรกิจที่ต้องการเติบโต ช่วยให้ลดเวลาที่ใช้ในงานซ้ำๆ ลดข้อผิดพลาด และให้ข้อมูลที่แม่นยำสำหรับการตัดสินใจ การเริ่มต้นไม่จำเป็นต้องซับซ้อน เริ่มจากสิ่งง่ายๆ ก่อนแล้วค่อยๆ ขยายผล
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: ระบบอัตโนมัติต้องลงทุนเท่าไหร่?**
|
||||
ตอบ: ขึ้นอยู่กับความต้องการ มีตั้งแต่ฟรีไปจนถึงหลักหมื่นบาทต่อเดือน ควรเริ่มจากสิ่งที่จำเป็นก่อน
|
||||
|
||||
**ถาม: SMEs ทำได้หรือไม่?**
|
||||
ตอบ: ได้แน่นอน หลายเครื่องมือออกแบบมาสำหรับธุรกิจขนาดเล็กโดยเฉพาะ มีราคาที่เข้าถึงได้
|
||||
|
||||
**ถาม: ใช้เวลาเรียนรู้นานไหม?**
|
||||
ตอบ: ขึ้นอยู่กับความซับซ้อนของระบบ บางระบบใช้งานได้ทันที บางระบบอาจต้องใช้เวลาสักหน่อยในการเรียนรู้
|
||||
|
||||
**ถาม: ระบบทนที่จะแพนักงานหรือไม่?**
|
||||
ตอบ: ไม่ได้ทั้งหมด ระบบช่วยให้พนักงานทำงานได้มีประสิทธิภาพมากขึ้น แต่ยังต้องมีคนดูแลและตัดสินใจ
|
||||
|
||||
**ถาม: เริ่มจากไหนดี?**
|
||||
ตอบ: เริ่มจากการดูว่ามีงานอะไรที่ทำซ้ำๆ มากที่สุด งานเหล่านั้นคือจุดเริ่มต้นที่ดี
|
||||
113
src/content/blog/chatbot-business-case-study.md
Normal file
113
src/content/blog/chatbot-business-case-study.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: "Chatbot ช่วยธุรกิจคุณได้อย่างไร กรณีศึกษาจริง"
|
||||
description: "ค้นพบประโยชน์ของ Chatbot ต่อธุรกิจ SMEs ไทย พร้อมกรณีศึกษาจริงและตัวอย่างการนำไปใช้ที่เห็นผลชัดเจน"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "Chatbot"
|
||||
tags: ["Chatbot", "LINE", "AI", "ลูกค้า", "บริการ", "SME"]
|
||||
image: /images/blog/chatbot-business-case-study.jpg
|
||||
imagePrompt: "ภาพแสดง Chatbot สำหรับธุรกิจ หน้าจอโทรศัพท์มือถือแสดงการสนทนากับ Chatbot ไอคอนหุ่นยนต์สีฟ้า พื้นหลังสีขาว สื่อถึงการบริการลูกค้าอัตโนมัติ"
|
||||
---
|
||||
|
||||
# Chatbot ช่วยธุรกิจคุณได้อย่างไร กรณีศึกษาจริง
|
||||
|
||||
ในยุคที่ลูกค้าคาดหวังการตอบสนองทันที Chatbot กลายเป็นเครื่องมือสำคัญสำหรับธุรกิจทุกขนาด หลายธุรกิจในประเทศไทยได้นำ Chatbot มาใช้และเห็นผลที่ชัดเจน บทความนี้จะพาคุณไปดูกรณีศึกษาจริงและเรียนรู้ว่าธุรกิจต่างๆ ใช้ Chatbot อย่างไร
|
||||
|
||||
## Chatbot คืออะไร
|
||||
|
||||
Chatbot คือโปรแกรมที่สามารถสนทนากับลูกค้าแทนมนุษย์ได้ สามารถตอบคำถาม ให้ข้อมูล รับออร์เดอร์ และช่วยแก้ปัญหาได้ตลอด 24 ชั่วโมง โดยไม่ต้องมีคนนั่งรอ
|
||||
|
||||
ในประเทศไทย Chatbot บน LINE เป็นที่นิยมมากที่สุด เพราะคนไทยคุ้นเคยกับการใช้ LINE ในชีวิตประจำวัน
|
||||
|
||||
## กรณีศึกษาจริงในประเทศไทย
|
||||
|
||||
### กรณีศึกษาที่ 1: ร้านอาหารออนไลน์
|
||||
|
||||
ร้านอาหารเดลิเวอรี่ขนาดกลางในกรุงเทพฯ มียอดสั่งซื้อประมาณ 100-150 ออร์เดอร์ต่อวัน ก่อนใช้ Chatbot พนักงาน 2 คนต้องทำงานตอบข้อความลูกค้าตลอดเวลา ทั้งการยืนยันออร์เดอร์ ตอบคำถามเรื่องเมนู และแจ้งสถานะการจัดส่ง
|
||||
|
||||
หลังจากใช้ Chatbot ระบบสามารถตอบคำถามที่พบบ่อยอัตโนมัติ ยืนยันออร์เดอร์โดยอัตโนัติ และแจ้งสถานะการจัดส่งให้ลูกค้าทราบ ผลลัพธ์คือพนักงานมีเวลามากขึ้นในการดูแลเรื่องอื่น และลูกค้าพึงพอใจมากขึ้นเพราะได้รับการตอบสนองทันที
|
||||
|
||||
**ผลลัพธ์ที่วัดได้:**
|
||||
- ลดภาระงานพนักงาน 40%
|
||||
- ลูกค้าพึงพอใจเพิ่มขึ้น 25%
|
||||
- ออร์เดอร์ที่ต้องติดตามลดลง 30%
|
||||
|
||||
### กรณีศึกษาที่ 2: ร้านเสื้อผ้าออนไลน์
|
||||
|
||||
ร้านขายเสื้อผ้าแฟชั่นออนไลน์ที่มีสินค้าหลายร้อยชิ้น ลูกค้ามักถามเรื่องไซส์ สี และการจัดส่งบ่อยมาก ก่อนใช้ Chatbot พนักงานต้องตอบข้อความซ้ำๆ ทั้งวัน ทำให้ไม่มีเวลาดูแลเรื่องอื่น
|
||||
|
||||
หลังใช้ Chatbot ระบบสามารถแนะนำสินค้าตามความต้องการของลูกค้า เช่น ถามว่าต้องการเสื้อแบบไหน สีอะไร งบประมาณเท่าไหร่ แล้วแนะนำสินค้าที่เหมาะสม นอกจากนี้ยังส่งข้อเสนอพิเศษให้ลูกค้าที่ไม่ได้ซื้อมานาน
|
||||
|
||||
**ผลลัพธ์ที่วัดได้:**
|
||||
- ยอดขายเพิ่มขึ้น 20% จากการแนะนำสินค้า
|
||||
- ลูกค้าที่ไม่ได้ซื้อนานกลับมาซื้อเพิ่มขึ้น 15%
|
||||
- ลดเวลาในการตอบลูกค้า 60%
|
||||
|
||||
### กรณีศึกษาที่ 3: คลินิกทันตกรรม
|
||||
|
||||
คลินิกทันตกรรมในต่างจังหวัดที่มีคนไม่มากนัก เจ้าของคลินิกต้องดูแลทุกอย่างเอง ตั้งแต่รับโทรศัพท์นัดหมาย ตอบคำถาม ไปจนถึงทำการรักษา การใช้ Chatbot ช่วยให้ลูกค้าสามารถนัดหมายนัดผ่าน LINE ได้ตลอด 24 ชั่วโมง
|
||||
|
||||
Chatbot สามารถแสดงช่วงเวลาที่ว่าง ให้ลูกค้าเลือก และยืนยันการนัดหมายอัตโนมัติ ระบบยังส่งข้อความเตือนก่อนนัดหมาย 1 วัน และขอบคุณหลังจากเข้ารับการรักษา พร้อมขอให้รีวิว
|
||||
|
||||
**ผลลัพธ์ที่วัดได้:**
|
||||
- นัดหมายที่ไม่มากลดลง 50%
|
||||
- ลูกค้าใหม่เพิ่มขึ้น 30% จากการที่ติดต่อได้ง่ายขึ้น
|
||||
- ลดภาระงานด้านการนัดหมาย 70%
|
||||
|
||||
### กรณีศึกษาที่ 4: บริษัทจัดส่งสินค้า
|
||||
|
||||
บริษัทขนส่งสินค้าข้ามจังหวัดที่ได้รับข้อความสอบถามสถานะสินค้าวันละหลายร้อยราย พนักงานต้องตอบซ้ำๆ ทั้งวัน หลังใช้ Chatbot ลูกค้าสามารถสอบถามสถานะได้ด้วยตัวเอง แค่ส่งเลขพัสดุ ระบบจะตอบกลับทันที
|
||||
|
||||
Chatbot ยังสามารถรับเรื่องร้องเรียนเบื้องต้น และส่งต่อให้พนักงานดูแลกรณีที่ซับซ้อน
|
||||
|
||||
**ผลลัพธ์ที่วัดได้:**
|
||||
- ลดสายเรียกเข้าลง 60%
|
||||
- ลูกค้าพึงพอใจเพิ่มขึ้นเพราะได้รับตอบกลับทันที
|
||||
- พนักงานมีเวลาดูแลปัญหาที่ซับซ้อนมากขึ้น
|
||||
|
||||
## ประโยชน์หลักของ Chatbot
|
||||
|
||||
จากกรณีศึกษาข้างต้น Chatbot สามารถช่วยธุรกิจได้หลายอย่าง
|
||||
|
||||
**ลดภาระงานซ้ำซ้อน** Chatbot ตอบคำถามที่พบบ่อยแทนพนักงาน ทำให้พนักงานมีเวลาทำงานที่มีคุณค่ามากขึ้น
|
||||
|
||||
**ให้บริการตลอดเวลา** ลูกค้าสามารถติดต่อได้ตลอด 24 ชั่วโมง ไม่ว่าจะกี่โมง ทำให้ไม่เสียโอกาสการขาย
|
||||
|
||||
**เพิ่มยอดขาย** Chatbot สามารถแนะนำสินค้า ส่งโปรโมชัน และดึงดูดลูกค้ากลับมาซื้อได้
|
||||
|
||||
**เก็บข้อมูลลูกค้า** ระบบเก็บข้อมูลการสนทนา ช่วยให้เข้าใจลูกค้าดีขึ้นและวางแผนการตลาดได้
|
||||
|
||||
## เริ่มต้นอย่างไร
|
||||
|
||||
สำหรับธุรกิจที่สนใจใช้ Chatbot แนะนำเริ่มจากสิ่งง่ายๆ ก่อน
|
||||
|
||||
**ขั้นตอนที่ 1: ระบุคำถามที่พบบ่อย** ดูว่าลูกค้าถามอะไรบ่อยที่สุด จะได้รู้ว่า Chatbot ควรตอบอะไร
|
||||
|
||||
**ขั้นตอนที่ 2: เลือกแพลตฟอร์ม** สำหรับธุรกิจไทย LINE เป็นตัวเลือกแรกที่ดีที่สุด เพราะลูกค้าคุ้นเคย
|
||||
|
||||
**ขั้นตอนที่ 3: เริ่มจากระบบง่ายๆ** เริ่มจากการตอบคำถามพื้นฐานก่อน ค่อยๆ เพิ่มความสามารถใหม่ๆ ทีหลัง
|
||||
|
||||
**ขั้นตอนที่ 4: วัดผลและปรับปรุง** ติดตามว่า Chatbot ทำงานได้ดีหรือไม่ ปรับปรุงตามข้อมูลที่ได้
|
||||
|
||||
## บทสรุป
|
||||
|
||||
Chatbot เป็นเครื่องมือที่ช่วยธุรกิจได้จริง ทั้งลดภาระงาน เพิ่มยอดขาย และปรับปรุงการบริการลูกค้า กรณีศึกษาที่นำเสนอแสดงให้เห็นว่าธุรกิจขนาดเล็กและขนาดกลางสามารถนำมาใช้ได้สำเร็จ สิ่งสำคัญคือการเริ่มต้นและเรียนรู้ไปพร้อมกับการใช้งาน
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: Chatbot ต้องลงทุนเท่าไหร่?**
|
||||
ตอบ: มีตั้งแต่ฟรีไปจนถึงหลักพันบาทต่อเดือน ขึ้นอยู่กับความต้องการและความซับซ้อนของระบบ
|
||||
|
||||
**ถาม: ต้องมีความรู้ด้านเทคโนโลยีมากไหม?**
|
||||
ตอบ: ไม่จำเป็น เครื่องมือปัจจุบันมีระบบที่ใช้ง่าย มีคู่มือและวิดีโอสอนการใช้งาน
|
||||
|
||||
**ถาม: Chatbot จะแทนที่พนักงานได้หรือไม่?**
|
||||
ตอบ: ไม่ได้ทั้งหมด Chatbot เหมาะกับงานที่ซ้ำๆ งานที่ซับซ้อนยังต้องให้พนักงานช่วย
|
||||
|
||||
**ถาม: ใช้เวลาเท่าไหร่ในการตั้งค่า?**
|
||||
ตอบ: ขึ้นอยู่กับความซับซ้อน ระบบง่ายๆ สามารถตั้งค่าได้ใน 1-2 วัน
|
||||
|
||||
**ถาม: ธุรกิจประเภทไหนใช้ Chatbot ได้ดีที่สุด?**
|
||||
ตอบ: ทุกประเภทธุรกิจสามารถใช้ได้ โดยเฉพาะร้านค้าออนไลน์ ร้านอาหาร และธุรกิจบริการ
|
||||
104
src/content/blog/data-driven-marketing.md
Normal file
104
src/content/blog/data-driven-marketing.md
Normal file
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: "Data-Driven Marketing การตลาดที่ใช้ข้อมูลตัดสินใจ"
|
||||
description: "เรียนรู้การตลาดแบบ Data-Driven ว่าคืออะไร ทำไมสำคัญ และวิธีนำไปใช้สำหรับธุรกิจ SMEs ไทย"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "Data Marketing"
|
||||
tags: ["Data", "Data-Driven", "Marketing", "การตลาด", "ข้อมูล", "SME"]
|
||||
image: /images/blog/data-driven-marketing.jpg
|
||||
imagePrompt: "ภาพแสดง Data-Driven Marketing หน้าจอแสดงกราฟและข้อมูล ตัวเลขและแผนภูมิสีสันสดใส มีแว่นขยายและเครื่องมือวิเคราะห์ พื้นหลังสีขาว สื่อถึงการวิเคราะห์ข้อมูลเพื่อธุรกิจ"
|
||||
---
|
||||
|
||||
# Data-Driven Marketing การตลาดที่ใช้ข้อมูลตัดสินใจ
|
||||
|
||||
หลายธุรกิจยังตัดสินใจทางการตลาดจากความรู้สึกหรือประสบการณ์ แต่ในยุคที่มีข้อมูลมากมาย การใช้ข้อมูลช่วยในการตัดสินใจจะทำให้การตลาดมีประสิทธิภาพมากขึ้น Data-Driven Marketing คือการนำข้อมูลมาใช้ในการวางแผนและดำเนินการตลาด แทนที่จะพึ่งพาแค่สัญชาตญาณ
|
||||
|
||||
## Data-Driven Marketing คืออะไร
|
||||
|
||||
Data-Driven Marketing คือวิธีการทำการตลาดโดยใช้ข้อมูลเป็นพื้นฐานในการตัดสินใจทุกอย่าง ตั้งแต่ว่าจะส่งข้อความอะไรถึงใคร เมื่อไหร่ และช่องทางไหน ล้วนมาจากการวิเคราะห์ข้อมูลทั้งนั้น
|
||||
|
||||
แทนที่จะบอกว่า "ฉันคิดว่าลูกค้าน่าจะชอบโปรโมชันนี้" การใช้ Data-Driven จะบอกได้ว่า "จากข้อมูลยอดขายปีที่แล้ว ลูกค้ากลุ่มนี้มีแนวโน้มซื้อสินค้านี้มากขึ้น 30% เมื่อมีโปรโมชันลด 15%"
|
||||
|
||||
## ทำไม Data-Driven ถึงสำคัญ
|
||||
|
||||
### ตัดสินใจได้แม่นยำกว่า
|
||||
ข้อมูลช่วยให้เห็นภาพที่ชัดเจน ไม่ใช่แค่คาดเดา ลดความเสี่ยงจากการตัดสินใจผิดพลาด
|
||||
|
||||
### เข้าใจลูกค้าดีขึ้น
|
||||
ข้อมูลช่วยให้รู้ว่าลูกค้าเป็นใคร ชอบอะไร ซื้อเมื่อไหร่ ทำให้สามารถตลาดได้ตรงกลุ่มมากขึ้น
|
||||
|
||||
### ใช้งบประมาณได้คุ้มค่ากว่า
|
||||
เมื่อรู้ว่าอะไรได้ผล อะไรไม่ได้ผล จะสามารถจัดสรรงบประมาณได้อย่างมีประสิทธิภาพ
|
||||
|
||||
### วัดผลได้ชัดเจน
|
||||
รู้ได้ทันทีว่าแคมเปญได้ผลหรือไม่ ปรับปรุงได้ทันที
|
||||
|
||||
## ประเภทข้อมูลที่ควรเก็บ
|
||||
|
||||
### ข้อมูลลูกค้า
|
||||
ข้อมูลพื้นฐาน เช่น ชื่อ อายุ เพศ ที่อยู่ ข้อมูลการติดต่อ เช่น อีเมล เบอร์โทร LINE ประวัติการซื้อ เช่น สินค้าที่ซื้อ จำนวน ราคา ความถี่ในการซื้อ
|
||||
|
||||
### ข้อมูลพฤติกรรม
|
||||
ข้อมูลจากเว็บไซต์ เช่น หน้าที่เข้าชมบ่อย สินค้าที่ดู ระยะเวลาที่อยู่บนเว็บ ข้อมูลจากโซเชียลมีเดีย เช่น โพสต์ที่มียอด Engagement สูง กลุ่มที่ติดตาม
|
||||
|
||||
### ข้อมูลการตลาด
|
||||
ข้อมูลแคมเปญ เช่น อัตราการเปิด อัตราการคลิก ยอดขายจากแคมเปญ ข้อมูลคู่แข่ง เช่น กลยุทธ์ ราคา สินค้าใหม่
|
||||
|
||||
## วิธีเริ่มต้น Data-Driven Marketing
|
||||
|
||||
### ขั้นตอนที่ 1: เริ่มเก็บข้อมูล
|
||||
หลายธุรกิจมีข้อมูลอยู่แล้วแต่ไม่ได้จัดเก็บอย่างเป็นระบบ เริ่มจากการรวบรวมข้อมูลที่มีอยู่ และเริ่มเก็บข้อมูลใหม่อย่างเป็นระบบ
|
||||
|
||||
### ขั้นตอนที่ 2: เลือกเครื่องมือ
|
||||
มีเครื่องมือหลากหลายสำหรับเก็บและวิเคราะห์ข้อมูล ตั้งแต่ฟรีไปจนถึงราคาสูง ควรเลือกตามความต้องการและงบประมาณ
|
||||
|
||||
### ขั้นตอนที่ 3: ตั้งค่าการติดตาม
|
||||
ติดตั้ง Google Analytics บนเว็บไซต์ เชื่อมต่อกับแพลตฟอร์มโซเชียลมีเดีย และระบบอีคอมเมิร์ซ เพื่อเก็บข้อมูลอย่างเป็นระบบ
|
||||
|
||||
### ขั้นตอนที่ 4: วิเคราะห์และหา insights
|
||||
ดูข้อมูลเป็นประจำ หารูปแบบและแนวโน้ม ค้นหาสิ่งที่น่าสนใจ
|
||||
|
||||
### ขั้นตอนที่ 5: นำไปใช้
|
||||
ใช้ข้อมูลที่ได้ในการตัดสินใจทางการตลาด ทดสอบและปรับปรุงอย่างต่อเนื่อง
|
||||
|
||||
## ตัวอย่างการใช้ Data-Driven ในธุรกิจ
|
||||
|
||||
### ตัวอย่างที่ 1: ร้านค้าออนไลน์
|
||||
วิเคราะห์ข้อมูลพบว่าลูกค้าส่วนใหญ่ซื้อสินค้าในช่วงค่ำ โดยเฉพาะวันศุกร์ จึงปรับเวลาส่งโปรโมชันให้ตรงกับช่วงเวลานี้ ผลลัพธ์คือยอดขายเพิ่มขึ้น 25%
|
||||
|
||||
### ตัวอย่างที่ 2: ร้านอาหาร
|
||||
วิเคราะห์ข้อมูลพบว่าลูกค้าใหม่ส่วนใหญ่มาจากการแนะนำของลูกค้าเก่า จึงสร้างโปรโมชันแนะนำเพื่อน ผลลัพธ์คือลูกค้าใหม่เพิ่มขึ้น 40%
|
||||
|
||||
### ตัวอย่างที่ 3: บริษัทบริการ
|
||||
วิเคราะห์ข้อมูลพบว่าลูกค้าที่ไม่ได้ใช้บริการนานกว่า 6 เดือนมักไม่กลับมาอีก จึงส่งข้อเสนอพิเศษก่อนถึง 6 เดือน ผลลัพธ์คือลูกค้ากลับมาใช้บริการเพิ่มขึ้น 20%
|
||||
|
||||
## เครื่องมือที่แนะนำ
|
||||
|
||||
มีเครื่องมือหลากหลายสำหรับ Data-Driven Marketing Google Analytics สำหรับวิเคราะห์เว็บไซต์ ฟรีและใช้งานง่าย Google Search Console สำหรับดูประสิทธิภาพการค้นหา ระบบ CRM สำหรับจัดการข้อมูลลูกค้า และเครื่องมือ Social Media Analytics สำหรับวิเคราะห์โซเชียลมีเดีย
|
||||
|
||||
## สิ่งที่ควรระวัง
|
||||
|
||||
การใช้ข้อมูลมีบางสิ่งที่ต้องระวัง อย่าเก็บข้อมูลมากเกินไปจนใช้ไม่ทัน เริ่มจากข้อมูลที่จำเป็นก่อน และอย่าลืมเรื่องความเป็นส่วนตัวและกฎหมาย PDPA ในการเก็บและใช้ข้อมูลลูกค้า
|
||||
|
||||
## บทสรุป
|
||||
|
||||
Data-Driven Marketing ช่วยให้ธุรกิจตัดสินใจได้แม่นยำขึ้น เข้าใจลูกค้าดีขึ้น และใช้งบประมาณได้คุ้มค่ากว่า การเริ่มต้นไม่จำเป็นต้องซับซ้อน เริ่มจากการเก็บข้อมูลอย่างเป็นระบบแล้วค่อยๆ นำไปใช้ในการตัดสินใจ ยิ่งมีข้อมูลมากขึ้น ยิ่งสามารถตลาดได้ตรงจุดมากขึ้น
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: ต้องมีข้อมูลมากแค่ไหน?**
|
||||
ตอบ: ไม่จำเป็นต้องมีข้อมูลมากมาย ข้อมูลที่มีคุณภาพและใช้งานได้มีค่ามากกว่าข้อมูลมากแต่ไม่ได้ใช้
|
||||
|
||||
**ถาม: ใช้เครื่องมืออะไรดีที่สุด?**
|
||||
ตอบ: ขึ้นอยู่กับความต้องการ เริ่มต้นด้วย Google Analytics ฟรีได้ แล้วค่อยๆ เพิ่มเครื่องมืออื่นตามความจำเป็น
|
||||
|
||||
**ถาม: ข้อมูลเก่าวิเคราะห์ได้ไหม?**
|
||||
ตอบ: ได้ หากเก็บไว้อย่างเป็นระบบ ยิ่งมีข้อมูลยาวนาน ยิ่งเห็นแนวโน้มได้ชัดเจน
|
||||
|
||||
**ถาม: ต้องมีความรู้ด้านข้อมูลมากไหม?**
|
||||
ตอบ: ไม่จำเป็น เครื่องมือปัจจุบันมี Dashboard แสดงผลง่าย แม้ไม่มีความรู้ด้านการวิเคราะห์ก็ใช้งานได้
|
||||
|
||||
**ถาม: มีความเสี่ยงด้าน PDPA ไหม?**
|
||||
ตอบ: มี ต้องเก็บและใช้ข้อมูลตามกฎหมาย แจ้งลูกค้าว่าเก็บข้อมูลอะไรและใช้ทำอะไร
|
||||
111
src/content/blog/digital-transformation-guide.md
Normal file
111
src/content/blog/digital-transformation-guide.md
Normal file
@@ -0,0 +1,111 @@
|
||||
---
|
||||
title: "เริ่มต้น Digital Transformation ยังไงให้ไม่เจ็บตัว"
|
||||
description: "คู่มือการเริ่มต้น Digital Transformation สำหรับธุรกิจ SMEs ไทย พร้อมแนวทางที่เป็นรูปธรรมและหลีกเลี่ยงข้อผิดพลาดที่พบบ่อย"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "Digital Transformation"
|
||||
tags: ["Digital Transformation", "ดิจิทัลทรานส์ฟอร์เมชัน", "SME", "ธุรกิจ", "เทคโนโลยี"]
|
||||
image: /images/blog/digital-transformation.jpg
|
||||
imagePrompt: "ภาพแสดง Digital Transformation สำหรับธุรกิจ ภาพเปรียบเทียบธุรกิจแบบเดิมและดิจิทัล มีคอมพิวเตอร์ สมาร์ทโฟน และกราฟที่เติบโต พื้นหลังสีขาว สื่อถึงการเปลี่ยนแปลงสู่ดิจิทัล"
|
||||
---
|
||||
|
||||
# เริ่มต้น Digital Transformation ยังไงให้ไม่เจ็บตัว
|
||||
|
||||
หลายธุรกิจกลัวการเปลี่ยนแปลงเป็นอย่างมาก กลัวลงทุนแล้วไม่สำเร็จ กลัวทำแล้วยุ่งยาก กลัวพนักงานไม่ปรับตัว แต่ในยุคที่ทุกอย่างเปลี่ยนเร็ว การไม่เปลี่ยนแปลงอาจเป็นอันตรายมากกว่า บทความนี้จะแนะนำวิธีเริ่มต้น Digital Transformation ให้ราบรื่นและไม่เจ็บตัว
|
||||
|
||||
## Digital Transformation คืออะไร
|
||||
|
||||
Digital Transformation คือการนำเทคโนโลยีดิจิทัลมาใช้ในทุกส่วนของธุรกิจ ไม่ใช่แค่การทำเว็บไซต์หรือใช้โซเชียลมีเดีย แต่เป็นการเปลี่ยนวิธีคิด วิธีทำงาน และวิธีส่งมอบคุณค่าให้ลูกค้า
|
||||
|
||||
การทำ Digital Transformation ไม่จำเป็นต้องเปลี่ยนทุกอย่างพร้อมกัน สามารถเริ่มจากจุดเล็กๆ แล้วค่อยๆ ขยายผล
|
||||
|
||||
## ทำไมต้องทำ Digital Transformation
|
||||
|
||||
### ลูกค้าเปลี่ยนพฤติกรรม
|
||||
ลูกค้าปัจจุบันคุ้นเคยกับการซื้อของออนไลน์ การติดต่อผ่าน LINE การค้นหาข้อมูลบนมือถือ หากธุรกิจไม่ตามทัน จะเสียลูกค้าให้คู่แข่งที่ทำได้ดีกว่า
|
||||
|
||||
### ความแข่งขันสูงขึ้น
|
||||
ธุรกิจใหม่ที่เริ่มต้นด้วยเทคโนโลยีตั้งแต่ต้นมีความได้เปรียบ สามารถให้บริการได้เร็วขึ้น ถูกขึ้น และเข้าถึงลูกค้าได้กว้างขึ้น
|
||||
|
||||
### เพิ่มประสิทธิภาพ
|
||||
เทคโนโลยีช่วยลดงานซ้ำซ้อน ลดข้อผิดพลาด และทำให้ทำงานได้เร็วขึ้น ช่วยประหยัดเวลาและต้นทุน
|
||||
|
||||
### สร้างโอกาสใหม่
|
||||
การมีข้อมูลดิจิทัลช่วยให้เห็นโอกาสใหม่ๆ ที่ไม่เคยเห็นมาก่อน ช่วยให้ตัดสินใจได้ดีขึ้น
|
||||
|
||||
## วิธีเริ่มต้นโดยไม่เจ็บตัว
|
||||
|
||||
### ขั้นตอนที่ 1: ประเมินสถานะปัจจุบัน
|
||||
|
||||
ก่อนจะเปลี่ยนอะไร ต้องรู้ก่อนว่าตอนนี้อยู่ที่ไหน มีเทคโนโลยีอะไรอยู่แล้วบ้าง มีงานไหนที่ยังทำด้วยกระดาษหรือแบบ manual อยู่ พนักงานมีทักษะด้านดิจิทัลมากน้อยแค่ไหน ลูกค้าคาดหวังอะไรจากธุรกิจ
|
||||
|
||||
### ขั้นตอนที่ 2: กำหนดเป้าหมายที่ชัดเจน
|
||||
|
||||
อย่าเปลี่ยนเพราะคนอื่นทำ ต้องรู้ว่าต้องการอะไรจริงๆ เช่น ต้องการเพิ่มยอดขาย 20% ต้องการลดต้นทุน 15% ต้องการให้ลูกค้าพึงพอใจมากขึ้น ต้องการให้พนักงานทำงานได้เร็วขึ้น
|
||||
|
||||
### ขั้นตอนที่ 3: เริ่มจากจุดเล็กๆ
|
||||
|
||||
อย่าพยายามเปลี่ยนทุกอย่างพร้อมกัน เริ่มจากจุดเจ็บปวดมากที่สุด หรือจุดที่เห็นผลเร็วที่สุด เช่น เริ่มจากการใช้ระบบบันทึกออร์เดอร์ออนไลน์แทนกระดาษ หรือเริ่มจากการใช้ Chatbot ตอบลูกค้า
|
||||
|
||||
### ขั้นตอนที่ 4: เลืรื่องอกเคมือที่เหมาะสม
|
||||
|
||||
เลือกเครื่องมือที่เหมาะกับขนาดและงบประมาณของธุรกิจ ไม่จำเป็นต้องซื้อของแพงที่สุด เครื่องมือที่ใช้งานง่ายและเพียงพอมักเหมาะกว่า
|
||||
|
||||
### ขั้นตอนที่ 5: ฝึกอบรมพนักงาน
|
||||
|
||||
เทคโนโลยีจะไม่มีประโยชน์ถ้าพนักงานไม่รู้วิธีใช้ ต้องสอนพนักงานอย่างเพียงพอ ทำให้พนักงานเห็นว่าเทคโนโลยีจะช่วยให้งานของเขาง่ายขึ้น ไม่ใช่ยากขึ้น
|
||||
|
||||
### ขั้นตอนที่ 6: วัดผลและปรับปรุง
|
||||
|
||||
ติดตามผลลัพธ์อย่างสม่ำเสมอ ดูว่าเป้าหมายที่ตั้งไว้บรรลุหรือไม่ ปัญหาที่พบนำมาปรับปรุง การ Digital Transformation ไม่ใช่จุดหมายปลายทาง แต่เป็นการเดินทางที่ต่อเนื่อง
|
||||
|
||||
## ข้อผิดพลาดที่ควรหลีกเลี่ยง
|
||||
|
||||
### การลงทุนมากเกินไปตั้งแต่แรก
|
||||
อย่าซื้อระบบที่ซับซ้อนเกินความจำเป็น เริ่มจากสิ่งง่ายๆ ก่อน เมื่อเห็นว่าใช้งานได้ดีและต้องการขยายความสามารถ ค่อยลงทุนเพิ่ม
|
||||
|
||||
### การเปลี่ยนทุกอย่างพร้อมกัน
|
||||
การเปลี่ยนพร้อมกันทำให้ทุกอย่างยุ่งเหยิง พนักงานจะปรับตัวไม่ทัน ควรเปลี่ยนทีละอย่าง
|
||||
|
||||
### การไม่สนใจพนักงาน
|
||||
พนักงานเป็นคนใช้งานระบบ ถ้าไม่สอนหรือไม่ให้การสนับสนุน ระบบจะใช้งานไม่ได้ผล
|
||||
|
||||
### การมองข้ามความปลอดภัย
|
||||
ข้อมูลลูกค้าต้องเก็บรักษาอย่างปลอดภัย อย่าใช้ระบบที่ไม่มีความปลอดภัยเพราะต้องการประหยัด
|
||||
|
||||
### การคาดหวังผลเร็วเกินไป
|
||||
Digital Transformation ต้องใช้เวลา อย่าคาดหวังว่าจะเห็นผลทันที ต้องอดทนและปรับปรุงอย่างต่อเนื่อง
|
||||
|
||||
## แนวทางที่แนะนำ
|
||||
|
||||
### เริ่มจากฝั่งลูกค้าก่อน
|
||||
มองจากมุมของลูกค้า ดูว่าลูกค้าต้องการอะไร ประสบการณ์อะไรที่ลูกค้าอยากได้ แล้วค่อยหาเทคโนโลยีมาตอบโจทย์
|
||||
|
||||
### จ้างที่ปรึกษาหากจำเป็น
|
||||
หากไม่แน่ใจ การปรึกษาผู้เชี่ยวชาญช่วยประหยัดเวลาและลดความเสี่ยงในการลงทุนผิดที่
|
||||
|
||||
### หา partner ที่ดี
|
||||
เลือก partner ที่เข้าใจธุรกิจของคุณ พร้อมสนับสนุนและให้คำแนะนำ ไม่ใช่แค่ขายของแล้วจบ
|
||||
|
||||
## บทสรุป
|
||||
|
||||
Digital Transformation ไม่ใช่เรื่องน่ากลัว การเริ่มต้นอย่างเป็นระบบและค่อยๆ ปรับเปลี่ยนจะช่วยให้ธุรกิจปรับตัวได้อย่างราบรื่น สิ่งสำคัญคือการเริ่มต้น อย่ารอจนทุกอย่างพร้อม เพราะตลาดไม่รอ ลูกค้าไม่รอ เริ่มจากจุดเล็กๆ วัดผล เรียนรู้ แล้วค่อยๆ ขยายผล
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: Digital Transformation ต้องลงทุนเท่าไหร่?**
|
||||
ตอบ: ขึ้นอยู่กับขอบเขต สามารถเริ่มต้นด้วยเครื่องมือราคาต่ำหรือฟรีได้ ไม่จำเป็นต้องลงทุนมากตั้งแต่แรก
|
||||
|
||||
**ถาม: ใช้เวลานานแค่ไหน?**
|
||||
ตอบ: เป็นกระบวนการต่อเนื่อง เริ่มเห็นผลเบื้องต้นได้ภายใน 3-6 เดือน แต่ต้องปรับปรุงอย่างต่อเนื่อง
|
||||
|
||||
**ถาม: พนักงานไม่ยอมใช้ทำไง?**
|
||||
ตอบ: ต้องสอนให้เข้าใจว่าจะช่วยงานของเขาอย่างไร ให้การสนับสนุนอย่างเพียงพอ และให้เวลาในการปรับตัว
|
||||
|
||||
**ถาม: เริ่มจากไหนดี?**
|
||||
ตอบ: เริ่มจากจุดเจ็บปวดมากที่สุด หรือจุดที่เห็นผลเร็วที่สุด เช่น ระบบออร์เดอร์ หรือการติดต่อลูกค้า
|
||||
|
||||
**ถาม: จะรู้ได้อย่างไรว่าสำเร็จ?**
|
||||
ตอบ: ตั้งเป้าหมายที่วัดได้ชัดเจนตั้งแต่ต้น และติดตามผลอย่างสม่ำเสมอ เปรียบเทียบก่อนและหลังการทำ Digital Transformation
|
||||
89
src/content/blog/marketing-automation-guide.md
Normal file
89
src/content/blog/marketing-automation-guide.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: "Marketing Automation คืออะไร เริ่มอย่างไรให้สำเร็จ"
|
||||
description: "เรียนรู้พื้นฐาน Marketing Automation และแนวทางการเริ่มต้นที่เหมาะสมสำหรับธุรกิจ SMEs ไทย พร้อมตัวอย่างการนำไปใช้จริง"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "Marketing Automation"
|
||||
tags: ["Marketing Automation", "การตลาด", "อัตโนมัติ", "LINE", "Email Marketing", "SME"]
|
||||
image: /images/blog/marketing-automation-guide.jpg
|
||||
imagePrompt: "ภาพแสดง Marketing Automation หน้าจอคอมพิวเตอร์แสดงแผนผังการตลาดอัตโนมัติ ปุ่มและลูกศรเชื่อมต่อกัน แสดงถึงการทำงานอัตโนมัติ พื้นหลังสีขาว มีสีสันสดใส"
|
||||
---
|
||||
|
||||
# Marketing Automation คืออะไร เริ่มอย่างไรให้สำเร็จ
|
||||
|
||||
ในยุคดิจิทัลที่ลูกค้ามีช่องทางการติดต่อมากมาย การบริหารการตลาดแบบเดิมๆ ต้องใช้เวลาและแรงงานมาก Marketing Automation จึงเป็นคำตอบที่ช่วยให้ธุรกิจสามารถทำการตลาดได้อย่างมีประสิทธิภาพมากขึ้น โดยไม่ต้องเพิ่มจำนวนพนักงาน
|
||||
|
||||
## Marketing Automation คืออะไร
|
||||
|
||||
Marketing Automation คือการใช้ซอฟต์แวร์ช่วยทำงานการตลาดแบบอัตโนมัติ แทนที่จะต้องทำทุกอย่างด้วยมนุษย์ ระบบจะช่วยส่งข้อความ ตอบกลับ ติดตาม และวิเคราะห์ผลลัพธ์โดยอัตโนมัติ
|
||||
|
||||
ลองนึกภาพว่าลูกค้าเข้ามาในเว็บไซต์และดูสินค้าชิ้นหนึ่ง แต่ไม่ได้ซื้อ ระบบ Marketing Automation จะส่งอีเมลหรือ LINE ติดตามในอีกไม่กี่ชั่วโมง พร้อมข้อเสนอพิเศษ ทำให้ลูกค้ากลับมาซื้อได้มากขึ้น ทั้งหมดนี้เกิดขึ้นโดยไม่ต้องมีคนนั่งส่งข้อความทีละคน
|
||||
|
||||
## ทำไม SMEs ต้องสนใจ Marketing Automation
|
||||
|
||||
ธุรกิจ SMEs มักเผชิญกับความท้าทายหลายอย่าง ทีมการตลาดมีจำนวนน้อยหรือไม่มีเลย เจ้าของธุรกิจต้องดูแลหลายเรื่องพร้อมกัน และงบประมาณการตลาดจำกัด
|
||||
|
||||
Marketing Automation ช่วยแก้ปัญหาเหล่านี้ได้โดยการทำให้งานการตลาดที่เคยต้องทำด้วยมนุษย์สามารถทำอัตโนมัติได้ ทำให้ทีมเล็กๆ สามารถทำงานได้เทียบเท่าทีมใหญ่
|
||||
|
||||
นอกจากนี้ การตลาดแบบอัตโนมัติยังช่วยให้ตอบสนองต่อลูกค้าได้รวดเร็ว ซึ่งสำคัญมากในยุคที่ลูกค้าคุ้นเคยกับการได้รับการตอบสนองทันที
|
||||
|
||||
## สิ่งที่ Marketing Automation ทำได้
|
||||
|
||||
ระบบ Marketing Automation สามารถช่วยได้หลายอย่าง ไม่ว่าจะเป็นการส่งอีเมลอัตโนมัติเมื่อลูกค้าทำบางอย่าง เช่น ลงทะเบียนหรือลืมรถเข็น การส่ง LINE ติดตามลูกค้าในเวลาที่เหมาะสม การแบ่งกลุ่มลูกค้าตามพฤติกรรม การให้คะแนนลูกค้า (Lead Scoring) เพื่อรู้ว่าลูกค้าคนไหนพร้อมซื้อ และการวิเคราะห์ผลลัพธ์การตลาดแต่ละแคมเปญ
|
||||
|
||||
## ตัวอย่างการใช้งานจริง
|
||||
|
||||
**กรณีศึกษาที่ 1: ร้านค้าออนไลน์**
|
||||
ลูกค้าลงทะเบียนเป็นสมาชิก ระบบจะส่งอีเมลต้อนรับพร้อมคูปองส่วนลดทันที หลังจากนั้น 3 วัน หากลูกค้าไม่ได้ซื้อ ระบบจะส่งอีเมลแนะนำสินค้าที่ลูกค้าอาจสนใจ เมื่อลูกค้าซื้อครั้งแรก ระบบจะส่งขอบคุณพร้อมข้อเสนอสำหรับการซื้อครั้งถัดไป ทั้งหมดนี้เกิดขึ้นอัตโนมัติ
|
||||
|
||||
**กรณีศึกษาที่ 2: ร้านอาหาร**
|
||||
ลูกค้าจองโต๊ะผ่านเว็บไซต์ ระบบจะส่งยืนยันการจองพร้อมแผนที่ ก่อนถึงวนจอง 1 วัน ระบบจะส่งข้อความเตือนพร้อมเมนูแนะนำ หลังจากรับประทานอาหาร ระบบจะส่งลิงก์ให้รีวิว หากลูกค้าไม่พอใจ ระบบจะแจ้งทีมงานทันทีเพื่อติดตามแก้ไข
|
||||
|
||||
## เริ่มต้นอย่างไร
|
||||
|
||||
การเริ่มต้น Marketing Automation ไม่จำเป็นต้องซับซ้อน แนะนำให้เริ่มจากสิ่งง่ายๆ ก่อน แล้วค่อยๆ ขยายผล
|
||||
|
||||
**ขั้นตอนที่ 1: ระบุเป้าหมาย**
|
||||
ต้องการเพิ่มยอดขาย หรือสร้างความสัมพันธ์กับลูกค้า หรือเพิ่มการรับรู้แบรนด์ เป้าหมายที่ชัดเจนจะช่วยให้ออกแบบระบบได้เหมาะสม
|
||||
|
||||
**ขั้นตอนที่ 2: เลือกเครื่องมือ**
|
||||
สำหรับธุรกิจไทย LINE เป็นช่องทางหลัก ควรเลือกเครื่องมือที่รองรับ LINE ได้ดี เครื่องมือหลายตัวรองรับทั้ง LINE, Facebook และอีเมลในตัว
|
||||
|
||||
**ขั้นตอนที่ 3: เริ่มจากกรณีง่ายๆ**
|
||||
เริ่มจากระบบตอบกลับอัตโนมัติเมื่อมีลูกค้าใหม่ หรือระบบส่งข้อความหลังจากซื้อสินค้า เมื่อเข้าใจวิธีการทำงานแล้ว ค่อยขยายไปใช้งานอื่นๆ
|
||||
|
||||
**ขั้นตอนที่ 4: วัดผลและปรับปรุง**
|
||||
ติดตามผลลัพธ์อย่างสม่ำเสมอ ดูว่าแคมเปญไหนได้ผลดี นำไปปรับปรุงให้ดีขึ้นเรื่อยๆ
|
||||
|
||||
## เครื่องมือที่แนะนำ
|
||||
|
||||
ตลาดมีเครื่องมือ Marketing Automation หลากหลายราคา ตั้งแต่ฟรีไปจนถึงหลักหมื่นบาทต่อเดือน ควรเลือกตามความต้องการและงบประมาณจริงของธุรกิจ
|
||||
|
||||
สำหรับธุรกิจเริ่มต้น อาจลองใช้เครื่องมือฟรีหรือราคาต่ำก่อน แล้วค่อยๆ อัปเกรดเมื่อธุรกิจเติบโตขึ้น สิ่งสำคัญคือการเริ่มต้นและเรียนรู้ไปพร้อมกับการใช้งานจริง
|
||||
|
||||
## สิ่งที่ควรระวัง
|
||||
|
||||
การใช้ Marketing Automation มีบางสิ่งที่ต้องระวัง อย่าส่งข้อความบ่อยเกินไปจนลูกค้ารำคาญ ใช้ข้อมูลลูกค้าอย่างมีจริยธรรมและถูกต้องตามกฎหมาย และอย่าพึ่งพาระบบอย่างเดียว ยังต้องมีคนดูแลและปรับแต่งอยู่เสมอ
|
||||
|
||||
## บทสรุป
|
||||
|
||||
Marketing Automation เป็นเครื่องมือสำคัญสำหรับธุรกิจในยุคดิจิทัล ไม่ว่าจะเป็น SMEs หรือบริษัทใหญ่ การเริ่มต้นไม่จำเป็นต้องยากหรือแพง เริ่มจากสิ่งง่ายๆ แล้วค่อยๆ ขยายผลจะช่วยให้ธุรกิจเรียนรู้และปรับตัวได้อย่างเหมาะสม
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: Marketing Automation เหมาะกับธุรกิจขนาดเล็กไหม?**
|
||||
ตอบ: เหมาะมาก ยิ่งทีมเล็ก ยิ่งต้องใช้ระบบอัตโนมัติช่วย เพราะทำให้ทำงานได้มากขึ้นโดยไม่ต้องเพิ่มคน
|
||||
|
||||
**ถาม: ต้องลงทุนเท่าไหร่?**
|
||||
ตอบ: มีตั้งแต่ฟรีไปจนถึงหลักหมื่นบาทต่อเดือน เริ่มต้นด้วยเครื่องมือราคาต่ำหรือฟรีก่อนได้
|
||||
|
||||
**ถาม: ยากไหมที่จะเรียนรู้การใช้งาน?**
|
||||
ตอบ: เครื่องมือปัจจุบันออกแบบมาให้ใช้งานง่าย มีคู่มือและวิดีโอสอนการใช้งาน
|
||||
|
||||
**ถาม: ใช้เวลาเท่าไหร่กว่าจะเห็นผล?**
|
||||
ตอบ: ขึ้นอยู่กับความซับซ้อนของระบบ บางธุรกิจเห็นผลภายใน 1-2 เดือน
|
||||
|
||||
**ถาม: ต้องมีทีม IT ดูแลไหม?**
|
||||
ตอบ: ไม่จำเป็นสำหรับการเริ่มต้น เครื่องมือส่วนใหญ่ใช้งานได้โดยไม่ต้องมีความรู้ด้านเทคโนโลยีมาก
|
||||
81
src/content/blog/seo-2026-business-guide.md
Normal file
81
src/content/blog/seo-2026-business-guide.md
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: "SEO ในปี 2026: สิ่งที่เจ้าของธุรกิจต้องรู้"
|
||||
description: "เรียนรู้การเปลี่ยนแปลงของ SEO ในปี 2026 และสิ่งที่เจ้าของธุรกิจ SMEs ไทยต้องรู้เพื่อให้เว็บไซต์ติดอันดับ Google"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "SEO"
|
||||
tags: ["SEO", "Google", "การตลาดออนไลน์", "เว็บไซต์", "Search Engine"]
|
||||
image: /images/blog/seo-2026-business-guide.jpg
|
||||
imagePrompt: "ภาพแสดง SEO 2026 ตัวอักษร SEO บนหน้าจอคอมพิวเตอร์ มีกราฟและแผนผัง เครื่องมือค้นหาสีเขียว พื้นหลังสีขาว สื่อถึงการค้นหาและการเติบโต"
|
||||
---
|
||||
|
||||
# SEO ในปี 2026: สิ่งที่เจ้าของธุรกิจต้องรู้
|
||||
|
||||
โลกของ SEO เปลี่ยนแปลงอยู่ตลอดเวลา ในปี 2026 มีการเปลี่ยนแปลงหลายอย่างที่เจ้าของธุรกิจและนักการตลาดต้องเข้าใจ การทำ SEO ไม่ใช่แค่การใส่คีย์เวิร์ดแล้วจะติดอันดับได้อีกต่อไป ต้องเข้าใจว่าผู้ใช้ต้องการอะไรจริงๆ และสร้างประสบการณ์ที่ดีให้กับพวกเขา
|
||||
|
||||
## การเปลี่ยนแปลงสำคัญในปี 2026
|
||||
|
||||
### AI และ Search Generative Experience
|
||||
|
||||
Google ได้นำ AI เข้ามาใช้ในการค้นหามากขึ้น ทำให้ผู้ใช้ได้รับคำตอบที่สมบูรณ์มากขึ้นโดยไม่ต้องคลิกเข้าไปในเว็บไซต์ สิ่งนี้ส่งผลต่อเว็บไซต์ที่เคยพึ่งพาการจัดอันดับเป็นหลัก เจ้าของธุรกิจต้องเตรียมตัวโดยการสร้างเนื้อหาที่มีคุณค่าจริงๆ และตอบคำถามผู้ใช้ได้อย่างครบถ้วน
|
||||
|
||||
### ความสำคัญของ E-E-A-T
|
||||
|
||||
E-E-A-T ย่อมาจาก Experience (ประสบการณ์), Expertise (ความเชี่ยวชาญ), Authoritativeness (ความน่าเชื่อถือ) และ Trustworthiness (ความไว้วางใจ) ยังคงเป็นปัจจัยสำคัญในการจัดอันดับ Google ให้ความสำคัญกับเนื้อหาที่มาจากผู้เชี่ยวชาญจริงๆ และมีประสบการณ์ตรง
|
||||
|
||||
### Core Web Vitals ยังคงสำคัญ
|
||||
|
||||
ปัจจัยด้านประสิทธิภาพเว็บไซต์ เช่น ความเร็วในการโหลด ความเสถียรของหน้าจอ และการตอบสนองต่อการใช้งาน ยังคงเป็นปัจจัยที่ Google ใช้ในการจัดอันดับ เว็บไซต์ที่โหลดช้าจะเสียโอกาสในการติดอันดับ
|
||||
|
||||
## สิ่งที่เจ้าของธุรกิจต้องทำ
|
||||
|
||||
### 1. สร้างเนื้อหาที่มีคุณค่าจริงๆ
|
||||
|
||||
แทนที่จะเขียนเนื้อหาเพื่อให้ติดอันดับ ให้เขียนเนื้อหาเพื่อช่วยเหลือผู้อ่าน ตอบคำถามที่พวกเขามีอย่างครบถ้วน เนื้อหาที่ดีจะได้รับการแชร์และอ้างอิงตามธรรมชาติ ซึ่งช่วยให้ติดอันดับได้ดีขึ้นในระยะยาว
|
||||
|
||||
### 2. ให้ความสำคัญกับ User Experience
|
||||
|
||||
เว็บไซต์ต้องใช้งานง่าย ค้นหาข้อมูลได้สะดวก และแสดงผลได้ดีทุกอุปกรณ์ ทั้งคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ การมีเว็บไซต์ที่ตอบสนองได้ดีบนมือถือไม่ใช่ทางเลือกอีกต่อไป แต่เป็นความจำเป็น
|
||||
|
||||
### 3. ใช้ข้อมูลโครงสร้าง (Schema Markup)
|
||||
|
||||
การเพิ่มข้อมูลโครงสร้างช่วยให้ Google เข้าใจเนื้อหาเว็บไซต์ได้ดีขึ้น และอาจแสดงในรูปแบบพิเศษในผลการค้นหา เช่น รีวิว ราคา หรือคำถามที่พบบ่อย
|
||||
|
||||
### 4. สร้างความน่าเชื่อถือ
|
||||
|
||||
มีข้อมูลติดต่อที่ชัดเจน นโยบายความเป็นส่วนตัว และเนื้อหาที่ถูกต้อง สิ่งเหล่านี้ช่วยสร้างความไว้วางใจทั้งกับผู้ใช้และกับ Google
|
||||
|
||||
### 5. ติดตามและวัดผล
|
||||
|
||||
ใช้เครื่องมืออย่าง Google Search Console และ Google Analytics เพื่อติดตามว่าเว็บไซต์มีประสิทธิภาพอย่างไร ค้นหาคำไหนที่ผู้ใช้เข้ามา และปรับปรุงตามข้อมูลที่ได้
|
||||
|
||||
## ความผิดพลาดที่ควรหลีกเลี่ยง
|
||||
|
||||
หลายธุรกิจยังทำผิดพลาดในการทำ SEO ที่พบบ่อย ได้แก่ การซื้อลิงก์หรือสร้างลิงก์แบบไม่เป็นธรรมชาติ ซึ่ง Google ตรวจพบและลงโทษได้ การใช้คีย์เวิร์ดมากเกินไปจนเนื้อหาอ่านไม่รู้เรื่อง การลอกเลียนเนื้อหาจากเว็บอื่น และการมองข้ามเว็บบนมือถือ
|
||||
|
||||
## การเตรียมตัวสำหรับอนาคต
|
||||
|
||||
ปี 2026 เป็นต้นไป การค้นหาจะเปลี่ยนไปอีกมาก AI จะมีบทบาทมากขึ้น และผู้ใช้จะคาดหวังประสบการณ์ที่รวดเร็วและเป็นส่วนตัว เจ้าของธุรกิจควรเตรียมพร้อมโดยการสร้างเนื้อหาคุณภาพอย่างต่อเนื่อง ลงทุนในประสบการณ์ผู้ใช้บนเว็บไซต์ และติดตามการเปลี่ยนแปลงของ Google อย่างสม่ำเสมอ
|
||||
|
||||
## บทสรุป
|
||||
|
||||
SEO ในปี 2026 ต้องการความเข้าใจที่ลึกซึ้งกว่าแค่การใส่คีย์เวิร์ด ต้องสร้างเนื้อหาที่มีคุณค่าจริงๆ ให้กับผู้อ่าน ให้ความสำคัญกับประสบการณ์ผู้ใช้ และติดตามการเปลี่ยนแปลงอย่างสม่ำเสมอ ธุรกิจที่เตรียมตัวดีจะสามารถรักษาตำแหน่งในผลการค้นหาได้ในระยะยาว
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: SEO ยังคงสำคัญสำหรับธุรกิจขนาดเล็กไหม?**
|
||||
ตอบ: สำคัญมาก ผู้ใช้ส่วนใหญ่ยังคงค้นหาสินค้าและบริการผ่าน Google การมีเว็บไซต์ที่ติดอันดับดีช่วยให้ลูกค้าพบเจอธุรกิจได้ง่าย
|
||||
|
||||
**ถาม: ทำ SEO ด้วยตัวเองได้ไหม หรือต้องจ้าง?**
|
||||
ตอบ: ทำเองได้หากมีเวลาเรียนรู้ แต่หากต้องการผลเร็วและมีประสิทธิภาพ การจ้างผู้เชี่ยวชาญช่วยประหยัดเวลาและให้ผลลัพธ์ที่ดีกว่า
|
||||
|
||||
**ถาม: ใช้เวลานานแค่ไหนกว่าจะเห็นผล?**
|
||||
ตอบ: ขึ้นอยู่กับสภาพเว็บไซต์และการแข่งขัน อาจใช้เวลาตั้งแต่ 3-6 เดือนไปจนถึง 1 ปี
|
||||
|
||||
**ถาม: มีเว็บไซต์บน WordPress ทำ SEO ง่ายกว่าหรือไม่?**
|
||||
ตอบ: WordPress มีปลั๊กอินและทรัพยากรสนับสนุน SEO มากมาย ทำให้เริ่มต้นได้ง่ายกว่า
|
||||
|
||||
**ถาม: ควรทำ SEO บนโซเชียลมีเดียด้วยหรือไม่?**
|
||||
ตอบ: ควรทำควบคู่กัน โซเชียลมีเดียช่วยสร้างการรับรู้และลิงก์ย้อนกลับมาสู่เว็บไซต์ ซึ่งมีส่วนช่วย SEO
|
||||
81
src/content/blog/website-2026-must-have.md
Normal file
81
src/content/blog/website-2026-must-have.md
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: "Website ที่ดีในปี 2026 ต้องมีอะไรบ้าง"
|
||||
description: "เรียนรู้องค์ประกอบสำคัญของเว็บไซต์ที่ดีในปี 2026 ตั้งแต่ความเร็ว การแสดงผลบนมือถือ ความปลอดภัย ไปจนถึงการรองรับ AI"
|
||||
pubDate: 2026-03-11
|
||||
author: "ทีมงาน MoreMiniMore"
|
||||
category: "Website"
|
||||
tags: ["Website", "เว็บไซต์", "UX", "UI", "SEO", "2026"]
|
||||
image: /images/blog/website-2026-must-have.jpg
|
||||
imagePrompt: "ภาพแสดงเว็บไซต์สมัยใหม่ หน้าจอคอมพิวเตอร์และโทรศัพท์มือถือแสดงเว็บไซต์ที่สวยงาม มีกราฟิกสีสันสดใส พื้นหลังสีขาว สื่อถึงความทันสมัยและใช้งานง่าย"
|
||||
---
|
||||
|
||||
# Website ที่ดีในปี 2026 ต้องมีอะไรบ้าง
|
||||
|
||||
ในปี 2026 เว็บไซต์ไม่ใช่แค่บัตรนำเสนอออนไลน์อีกต่อไป แต่เป็นเครื่องมือสำคัญในการดึงดูดลูกค้า สร้างความน่าเชื่อถือ และเพิ่มยอดขาย เว็บไซต์ที่ดีต้องตอบโจทย์ผู้ใช้ได้หลายอย่าง ตั้งแต่ความเร็ว ความสวยงาม ไปจนถึงความปลอดภัย
|
||||
|
||||
## ความเร็วในการโหลด
|
||||
|
||||
ความเร็วเป็นปัจจัยสำคัญที่สุดประการหนึ่ง ผู้ใช้ไม่อยากรอเว็บไซต์โหลดนาน หากโหลดช้าเกิน 3 วินาที ผู้ใช้อาจปิดไปเลย การมีเว็บไซต์ที่โหลดเร็วช่วยให้ผู้ใช้อยู่บนเว็บไซต์นานขึ้น และยังช่วยในการจัดอันดับบน Google ด้วย
|
||||
|
||||
วิธีทำให้เว็บไซต์โหลดเร็ว ได้แก่ การใช้ภาพที่บีบอัดแล้ว การใช้ CDN สำหรับส่งเนื้อหา การลดขนาดไฟล์ CSS และ JavaScript และการใช้ Hosting ที่มีประสิทธิภาพ
|
||||
|
||||
## แสดงผลได้ดีบนทุกอุปกรณ์
|
||||
|
||||
ผู้ใช้ส่วนใหญ่เข้าเว็บไซต์ผ่านโทรศัพท์มือถือ การมีเว็บไซต์ที่แสดงผลได้ดีบนมือถือจึงไม่ใช่ทางเลือกอีกต่อไป แต่เป็นความจำเป็น เว็บไซต์ที่ตอบสนองได้หรือ Responsive จะปรับขนาดและจัดวางเนื้อหาให้เหมาะสมกับขนาดหน้าจอทุกอุปกรณ์
|
||||
|
||||
นอกจากนี้ Google ยังใช้ Mobile-First Indexing หมายความว่า Google จะดูเว็บไซต์เวอร์ชันมือถือเป็นหลักในการจัดอันดับ
|
||||
|
||||
## การออกแบบที่ใช้งานง่าย
|
||||
|
||||
การออกแบบที่ดีคือการออกแบบที่ผู้ใช้ใช้งานได้โดยไม่ต้องคิดมาก ทุกอย่างควรหาง่าย คลิกได้เลย ผู้ใช้ควรหาข้อมูลที่ต้องการได้ภายในไม่กี่คลิก
|
||||
|
||||
องค์ประกอบสำคัญในการออกแบบ ได้แก่ เมนูที่ชัดเจนและเข้าถึงง่าย ปุ่ม CTA ที่โดดเด่น การจัดวางที่เป็นระเบียบ ความสอดคล้องในการออกแบบทุกหน้า และสีและฟอนต์ที่อ่านง่าย
|
||||
|
||||
## ความปลอดภัย
|
||||
|
||||
ความปลอดภัยเป็นสิ่งที่ไม่ควรมองข้าม เว็บไซต์ที่ไม่ปลอดภัยอาจถูกแฮ็ก ข้อมูลลูกค้าอาจรั่วไหล และเสียชื่อเสียงธุรกิจ
|
||||
|
||||
สิ่งที่ควรมี ได้แก่ การใช้ HTTPS ซึ่งแสดงด้วยรูปแม่กุญแจใน address bar การอัปเดตซอฟต์แวร์และปลั๊กอินอย่างสม่ำเสมอ การใช้รหัสผ่านที่แข็งแรง และการมีระบบสำรองข้อมูล
|
||||
|
||||
## รองรับ AI และ Chatbot
|
||||
|
||||
ในปี 2026 การมี AI ช่วยงานบนเว็บไซต์กลายเป็นสิ่งที่คาดหวังได้ Chatbot สามารถช่วยตอบคำถามลูกค้าได้ตลอด 24 ชั่วโมง ระบบ AI สามารถแนะนำสินค้าที่เหมาะสมกับลูกค้าแต่ละคน และช่วยเก็บข้อมูลเพื่อนำไปใช้ในการตลาด
|
||||
|
||||
การเชื่อมต่อ Chatbot กับ LINE หรือ Facebook Messenger จะช่วยให้ลูกค้าติดต่อได้สะดวกขึ้น
|
||||
|
||||
## SEO ที่แข็งแกร่ง
|
||||
|
||||
เว็บไซต์ที่ดีต้องถูกค้นพบได้ง่าย การมีโครงสร้างที่ดีช่วยให้ Google เข้าใจเนื้อหา การใช้คีย์เวิร์ดอย่างเหมาะสมในหัวข้อและเนื้อหา การมีเนื้อหาที่มีคุณค่าและตอบคำถามผู้ใช้ และการมีลิงก์ภายในเว็บไซต์ที่เป็นระเบียบ ล้วนช่วยให้ติดอันดับได้ดีขึ้น
|
||||
|
||||
## เนื้อหาที่มีคุณค่า
|
||||
|
||||
เนื้อหาเป็นหัวใจของเว็บไซต์ ควรมีเนื้อหาที่เป็นประโยชน์กับผู้เยี่ยมชม ไม่ว่าจะเป็นข้อมูลสินค้าและบริการที่ชัดเจน บทความหรือบล็อกที่ให้ความรู้ รีวิวหรือกรณีศึกษาจากลูกค้า และคำถามที่พบบ่อยพร้อมคำตอบ
|
||||
|
||||
เนื้อหาที่ดีช่วยสร้างความน่าเชื่อถือ ให้ข้อมูลที่มีประโยชน์กับผู้อ่าน และช่วยให้ติดอันดับบน Google ได้ดีขึ้น
|
||||
|
||||
## Analytics และการวัดผล
|
||||
|
||||
เว็บไซต์ที่ดีต้องมีระบบวัดผล การรู้ว่าผู้ใช้เข้ามาจากไหน ดูหน้าไหนบ่อย อยู่นานแค่ไหน ช่วยให้ปรับปรุงเว็บไซต์ได้ตรงจุด ควรติดตั้ง Google Analytics เพื่อติดตามพฤติกรรมผู้ใช้ และใช้ Google Search Console เพื่อดูว่าเว็บไซต์ถูกค้นพบอย่างไร
|
||||
|
||||
## บทสรุป
|
||||
|
||||
เว็บไซต์ที่ดีในปี 2026 ต้องมีหลายองค์ประกอบ ตั้งแต่ความเร็วในการโหลด การแสดงผลบนมือถือ การออกแบบที่ใช้งานง่าย ความปลอดภัย การรองรับ AI ระบบ SEO ที่ดี เนื้อหาที่มีคุณค่า และระบบวัดผล การมีเว็บไซต์ที่ครบถ้วนจะช่วยให้ธุรกิจสามารถแข่งขันได้ในยุคดิจิทัล
|
||||
|
||||
---
|
||||
|
||||
## คำถามที่พบบ่อย
|
||||
|
||||
**ถาม: ทำเว็บไซต์ด้วยตัวเองได้ไหม หรือต้องจ้าง?**
|
||||
ตอบ: ทำเองได้ด้วยเครื่องมือสร้างเว็บไซต์ เช่น WordPress หรือ Wix แต่หากต้องการความเป็นมืออาชีพ การจ้างผู้เชี่ยวชาญจะให้ผลลัพธ์ที่ดีกว่า
|
||||
|
||||
**ถาม: เว็บไซต์ควรโหลดเร็วแค่ไหน?**
|
||||
ตอบ: ควรโหลดเสร็จภายใน 3 วินาที ยิ่งเร็วยิ่งดี
|
||||
|
||||
**ถาม: ทำไมต้องมี HTTPS?**
|
||||
ตอบ: HTTPS รักษาความปลอดภัยข้อมูลระหว่างผู้ใช้และเว็บไซต์ และ Google ให้ความสำคัญกับเว็บไซต์ที่มี HTTPS
|
||||
|
||||
**ถาม: ควรอัปเดตเว็บไซต์บ่อยแค่ไหน?**
|
||||
ตอบ: ควรอัปเดตเนื้อหาอย่างสม่ำเสมอ ทั้งข้อมูลสินค้า บทความ และข่าวสาร
|
||||
|
||||
**ถาม: จะรู้ได้อย่างไรว่าเว็บไซต์มีประสิทธิภาพดี?**
|
||||
ตอบ: ใช้ Google Analytics ติดตามจำนวนผู้เข้าชม อัตราการคลิก และพฤติกรรมผู้ใช้
|
||||
32
src/layouts/Layout.astro
Normal file
32
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import CookieBanner from '../components/consent/CookieBanner.astro';
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = "บริษัท มอร์มินิมอร์ จำกัด - ผู้เชี่ยวชาญด้าน IT และ Digital Transformation สำหรับธุรกิจ SMEs ไทย" } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="th">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<title>{title} | MoreminiMore</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
<CookieBanner />
|
||||
</body>
|
||||
</html>
|
||||
366
src/pages/about-us.astro
Normal file
366
src/pages/about-us.astro
Normal file
@@ -0,0 +1,366 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const schemaData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "บริษัท มอร์มินิมอร์ จำกัด",
|
||||
"description": "บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot สำหรับ SMEs ไทย",
|
||||
"url": "https://www.moreminimore.com",
|
||||
"telephone": "0809955945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว",
|
||||
"addressLocality": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"foundingDate": "2020",
|
||||
"founders": [
|
||||
{
|
||||
"@type": "Person",
|
||||
"name": "ทีมงาน MoreminiMore"
|
||||
}
|
||||
]
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title="เกี่ยวกับเรา | บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<script type="application/ld+json" set:html={JSON.stringify(schemaData)} />
|
||||
|
||||
<!-- Hero Section - Bold Black with Yellow Accent -->
|
||||
<section class="relative overflow-hidden min-h-[60vh] flex items-center bg-black">
|
||||
<!-- Geometric Pattern Background -->
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<div class="absolute top-0 left-0 w-full h-full" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, #fed400 40px, #fed400 41px);"></div>
|
||||
</div>
|
||||
|
||||
<!-- Yellow accent shapes -->
|
||||
<div class="absolute top-20 right-[-100px] w-[400px] h-[400px] bg-[#fed400] rounded-full blur-[150px] opacity-30 animate-pulse-slow"></div>
|
||||
<div class="absolute bottom-[-100px] left-[-200px] w-[500px] h-[500px] bg-[#fed400] rounded-full blur-[180px] opacity-20"></div>
|
||||
|
||||
<!-- Diagonal Lines -->
|
||||
<div class="absolute inset-0 overflow-hidden opacity-10">
|
||||
<div class="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] bg-repeating-diagonal"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-24">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<!-- Animated label -->
|
||||
<div class="inline-flex items-center gap-2 px-5 py-2 bg-[#fed400] text-black rounded-full text-sm font-bold mb-8 animate-fade-in">
|
||||
<span class="w-2 h-2 bg-black rounded-full animate-pulse"></span>
|
||||
IT Partner for SMEs
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl md:text-7xl lg:text-8xl font-black text-white mb-6 tracking-tight animate-slide-up">
|
||||
เกี่ยวกับเรา
|
||||
</h1>
|
||||
|
||||
<p class="text-xl md:text-2xl text-white/70 max-w-2xl mx-auto leading-relaxed animate-slide-up" style="animation-delay: 0.15s;">
|
||||
มอร์มินิมอร์ — พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2">
|
||||
<div class="w-1 h-2 bg-[#fed400] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Vision Section - White with Black -->
|
||||
<section class="relative py-28 bg-white overflow-hidden">
|
||||
<!-- Corner accent -->
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-[#fed400] clip-corner-br"></div>
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Section label -->
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-12 h-[3px] bg-black"></div>
|
||||
<span class="text-sm font-bold text-black/60 tracking-widest uppercase">Vision</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-5xl font-black text-black mb-12 leading-tight">
|
||||
เติบโตไป<br/>ด้วยกัน
|
||||
</h2>
|
||||
|
||||
<!-- Quote box with heavy border -->
|
||||
<div class="relative p-8 md:p-12 bg-black rounded-none border-4 border-black">
|
||||
<div class="absolute top-4 left-4 w-8 h-8 bg-[#fed400] -ml-2 -mt-2"></div>
|
||||
|
||||
<p class="text-2xl md:text-3xl font-bold text-white leading-relaxed">
|
||||
"เราเชื่อว่าความสำเร็จของลูกค้าคือความสำเร็จของเรา<br/>
|
||||
<span class="text-[#fed400]">เมื่อธุรกิจของคุณเติบโต</span> เราก็เติบโตไปด้วยกัน"
|
||||
</p>
|
||||
|
||||
<div class="absolute bottom-4 right-4 w-8 h-8 bg-[#fed400] -mr-2 -mb-2"></div>
|
||||
</div>
|
||||
|
||||
<p class="text-lg text-gray-600 mt-8 leading-relaxed">
|
||||
ความสำเร็จที่แท้จริงไม่ใช่แค่ตัวเลข แต่คือการเห็นผลงานที่เกิดขึ้นจริงของลูกค้า
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section - Black Background with Grid -->
|
||||
<section class="relative py-28 bg-[#0f0f0f] overflow-hidden">
|
||||
<!-- Grid pattern -->
|
||||
<div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 60px 60px;"></div>
|
||||
|
||||
<!-- Yellow corner accents -->
|
||||
<div class="absolute top-0 left-0 w-24 h-24 border-l-4 border-t-4 border-[#fed400]"></div>
|
||||
<div class="absolute bottom-0 right-0 w-24 h-24 border-r-4 border-b-4 border-[#fed400]"></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<span class="inline-block text-sm font-bold text-[#fed400] tracking-widest uppercase mb-4">Our Values</span>
|
||||
<h2 class="text-3xl md:text-5xl font-black text-white">
|
||||
สิ่งที่เรายึดมั่น
|
||||
</h2>
|
||||
<p class="text-white/60 mt-4 max-w-xl mx-auto">
|
||||
เรามุ่งเน้นที่ผลลัพธ์ที่จับต้องได้ ไม่ใช่แค่ตัวเลขบนหน้าจอ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Values Grid - 3 columns -->
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<!-- Value 1 -->
|
||||
<div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
|
||||
<div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
|
||||
<svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3 group-hover:text-black">เน้นผลงานจริง</h3>
|
||||
<p class="text-gray-600 text-sm group-hover:text-black/70">
|
||||
เราวัดความสำเร็จจากยอดขายที่เพิ่มขึ้นของลูกค้า ไม่ใช่แค่คะแนน SEO หรือจำนวนการเข้าชม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 2 -->
|
||||
<div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
|
||||
<div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
|
||||
<svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3 group-hover:text-black">เป็นพาร์ทเนอร์</h3>
|
||||
<p class="text-gray-600 text-sm group-hover:text-black/70">
|
||||
เราไม่ได้มองลูกค้าเป็นแค่ผู้จ้าง แต่มองเป็นพาร์ทเนอร์ที่จะเติบโตไปด้วยกันในระยะยาว
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 3 -->
|
||||
<div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
|
||||
<div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
|
||||
<svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3 group-hover:text-black">คุ้มค่าที่สุด</h3>
|
||||
<p class="text-gray-600 text-sm group-hover:text-black/70">
|
||||
ออกแบบโซลูชันให้เหมาะกับงบประมาณของคุณ เริ่มต้นง่าย ไม่ต้องลงทุนมาก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 4 -->
|
||||
<div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
|
||||
<div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
|
||||
<svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3 group-hover:text-black">ทำงานเร็ว</h3>
|
||||
<p class="text-gray-600 text-sm group-hover:text-black/70">
|
||||
เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวันประงัน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 5 -->
|
||||
<div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
|
||||
<div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
|
||||
<svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3 group-hover:text-black">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-gray-600 text-sm group-hover:text-black/70">
|
||||
ไม่ทิ้งหลังขาย พร้อมสนับสนุนและปรับปรุงระบบให้ตลอดเวลา
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 6 -->
|
||||
<div class="group bg-white hover:bg-[#fed400] transition-all duration-300 p-8 border-2 border-transparent hover:border-white">
|
||||
<div class="w-14 h-14 bg-[#fed400] group-hover:bg-black rounded-none flex items-center justify-center mb-6 transition-colors">
|
||||
<svg class="w-7 h-7 text-black group-hover:text-[#fed400]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3 group-hover:text-black">โปร่งใส</h3>
|
||||
<p class="text-gray-600 text-sm group-hover:text-black/70">
|
||||
ราคาชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น รายงานผลตรง ชัดเจน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Image Section - Full Width with Overlay -->
|
||||
<section class="relative py-0 bg-white">
|
||||
<div class="relative h-[50vh] md:h-[70vh] overflow-hidden">
|
||||
<img
|
||||
src="/images/about.jpg"
|
||||
alt="MoreminiMore Team - AI Technology Partner"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<!-- Yellow gradient overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent"></div>
|
||||
|
||||
<!-- Content overlay -->
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-xl ml-auto mr-8 md:mr-16">
|
||||
<div class="bg-[#fed400] p-8 md:p-12">
|
||||
<h3 class="text-2xl md:text-3xl font-black text-black mb-4">
|
||||
IT Partner for SMEs
|
||||
</h3>
|
||||
<p class="text-black/80 text-lg">
|
||||
พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us - Two Column Layout -->
|
||||
<section class="relative py-28 bg-[#e8e8e8] overflow-hidden">
|
||||
<!-- Decorative elements -->
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-[#fed400] clip-corner-bl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-64 h-64 bg-black clip-corner-tr"></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<span class="inline-block text-sm font-bold text-black/50 tracking-widest uppercase mb-4">Why Choose Us</span>
|
||||
<h2 class="text-3xl md:text-5xl font-black text-black">
|
||||
ทำไมเลือกเรา?
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- 2x2 Grid -->
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
|
||||
<div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3">เน้นผลลัพธ์</h3>
|
||||
<p class="text-gray-600">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
|
||||
<div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3">ราคาเหมาะสม</h3>
|
||||
<p class="text-gray-600">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
|
||||
<div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-gray-600">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 hover:-translate-y-2 transition-transform duration-300 shadow-lg">
|
||||
<div class="w-12 h-12 bg-[#fed400] flex items-center justify-center mb-6">
|
||||
<svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-black text-black mb-3">ทำงานเร็ว</h3>
|
||||
<p class="text-gray-600">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact CTA - Yellow Background -->
|
||||
<section class="relative py-20 bg-[#fed400]">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-black text-black mb-4">
|
||||
พร้อมร่วมงานกับคุณแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-black/70 mb-8 max-w-xl mx-auto">
|
||||
เริ่มต้นง่ายๆ แค่โทรหาหรือเพิ่ม LINE มาคุยกันก่อน ไม่มีค่าใช้จ่าย!
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="bg-black text-[#fed400] px-8 py-4 font-bold text-lg hover:bg-black/80 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-white text-black px-8 py-4 font-bold text-lg hover:bg-gray-100 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.248l-6.32 6.307c-.195.195-.512.195-.707 0l-2.826-2.808c-.195-.195-.195-.512 0-.707l6.32-6.307c.195-.195.512-.195.707 0l2.826 2.808c.195.195.195.512 0 .707z"/>
|
||||
</svg>
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
opacity: 0;
|
||||
animation: slide-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.clip-corner-br {
|
||||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.clip-corner-bl {
|
||||
clip-path: polygon(0 0, 100% 0, 0 100%);
|
||||
}
|
||||
|
||||
.clip-corner-tr {
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%);
|
||||
}
|
||||
|
||||
.bg-repeating-diagonal {
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(255,255,255,0.1) 10px,
|
||||
rgba(255,255,255,0.1) 20px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
96
src/pages/admin/consent-logs.astro
Normal file
96
src/pages/admin/consent-logs.astro
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="Consent Logs" description="Cookie consent logs - Admin only">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Consent Logs</h1>
|
||||
<p>Cookie consent records</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<p>This is the admin page for viewing cookie consent logs.</p>
|
||||
<p>Logs are stored locally in the browser's localStorage.</p>
|
||||
|
||||
<div id="consent-logs">
|
||||
<p>Loading consent logs...</p>
|
||||
</div>
|
||||
|
||||
<button id="clear-logs" class="btn-secondary">Clear Logs</button>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
function loadLogs() {
|
||||
const logs = localStorage.getItem('moreminimore_consent_logs');
|
||||
const container = document.getElementById('consent-logs');
|
||||
|
||||
if (!container) return;
|
||||
|
||||
if (logs) {
|
||||
try {
|
||||
const parsedLogs = JSON.parse(logs);
|
||||
if (parsedLogs.length === 0) {
|
||||
container.innerHTML = '<p>No consent logs found.</p>';
|
||||
} else {
|
||||
let html = '<table class="logs-table"><thead><tr><th>Timestamp</th><th>Consent</th></tr></thead><tbody>';
|
||||
parsedLogs.forEach((log: { timestamp: string; consent: { necessary: boolean; performance: boolean; marketing: boolean } }) => {
|
||||
html += `<tr><td>${new Date(log.timestamp).toLocaleString('th-TH')}</td><td>${JSON.stringify(log.consent)}</td></tr>`;
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
} catch {
|
||||
container.innerHTML = '<p>Error reading logs.</p>';
|
||||
}
|
||||
} else {
|
||||
container.innerHTML = '<p>No consent logs found.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadLogs();
|
||||
|
||||
const clearBtn = document.getElementById('clear-logs');
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', () => {
|
||||
localStorage.removeItem('moreminimore_consent_logs');
|
||||
loadLogs();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
border: 1px solid var(--color-light-gray);
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.logs-table th {
|
||||
background: var(--color-light-gray);
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
474
src/pages/ai-automation.astro
Normal file
474
src/pages/ai-automation.astro
Normal file
@@ -0,0 +1,474 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="AI Automation | MoreminiMore - ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI"
|
||||
description="บริการ AI Automation สำหรับ SME ไทย ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร"
|
||||
>
|
||||
<!-- Schema.org -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการ AI Automation สำหรับ SME ไทย ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI",
|
||||
"telephone": "+66809955945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/ai-automation",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
|
||||
"addressLocality": "บ้านแพ้ว",
|
||||
"addressRegion": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 13.5497,
|
||||
"longitude": 100.4167
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "$$",
|
||||
"serviceType": ["AI Automation", "Data Integration", "AI Analytics", "Enterprise Chatbot"]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Dark Tech Theme -->
|
||||
<section class="relative min-h-[85vh] flex items-center overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-black">
|
||||
<!-- Circuit Lines Background -->
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<svg class="absolute inset-0 w-full h-full opacity-10" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||
<pattern id="circuit" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M10 10h10v10h-10z" fill="none" stroke="currentColor" stroke-width="0.3"/>
|
||||
<circle cx="15" cy="15" r="1" fill="currentColor"/>
|
||||
</pattern>
|
||||
<rect width="100%" height="100%" fill="url(#circuit)"/>
|
||||
</svg>
|
||||
|
||||
<!-- Animated Glow Spots -->
|
||||
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-[100px] animate-pulse"></div>
|
||||
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-cyan-500/15 rounded-full blur-[80px] animate-pulse" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/2 left-1/2 w-64 h-64 bg-purple-500/10 rounded-full blur-[60px] animate-pulse" style="animation-delay: 2s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 py-20 relative z-10">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-blue-500/20 border border-blue-500/40 text-blue-400 px-4 py-2 rounded-full font-semibold mb-6">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
|
||||
<span>ระบบ AI อัจฉริยะ</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Headline -->
|
||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
เชื่อมข้อมูล<br/>
|
||||
<span class="text-transparent bg-clip-gradient bg-gradient-to-r from-blue-400 to-cyan-400">วิเคราะห์ด้วย AI</span><br/>
|
||||
สร้างรายงานอัตโนมัติ
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline -->
|
||||
<p class="text-xl md:text-2xl text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed">
|
||||
ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล<br/>
|
||||
สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-10">
|
||||
<a href="tel:0809955945" class="group bg-blue-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-blue-600 transition-all duration-300 hover:scale-105 flex items-center gap-3 shadow-lg shadow-blue-500/25">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-slate-800 text-white border border-slate-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-slate-700 transition-all duration-300 flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
|
||||
สอบถามรายละเอียด
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="flex flex-wrap justify-center gap-6 text-gray-500 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
เชื่อมทุกระบบ
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
วิเคราะห์อัจฉริยะ
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Cards with Glow -->
|
||||
<section class="py-24 bg-gradient-to-b from-slate-950 to-black">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
บริการของเรา
|
||||
</h2>
|
||||
<p class="text-xl text-gray-400">
|
||||
AI Automation ครบว<E0B89A><E0B8A7>จรสำหรับธุรกิจไทย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<!-- Service 1 -->
|
||||
<div class="group relative bg-slate-900 rounded-2xl p-8 border border-slate-800 hover:border-blue-500/50 transition-all duration-500 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">เขียนแอป AI เฉพาะ</h3>
|
||||
<ul class="text-gray-400 space-y-2 text-sm">
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
พัฒนา Application ตามความต้องการ
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ระบบ AI เฉพาะทางธุรกิจ
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
รวม AI เข้ากับระบบเดิม
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 2 -->
|
||||
<div class="group relative bg-slate-900 rounded-2xl p-8 border border-slate-800 hover:border-blue-500/50 transition-all duration-500 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">เชื่อมข้อมูลหลายแอป</h3>
|
||||
<ul class="text-gray-400 space-y-2 text-sm">
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
รวมข้อมูลจากทุกแพลตฟอร์ม
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
Sync ข้อมูลอัตโนมัติ
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
รวมศูนย์ข้อมูลองค์กร
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 3 -->
|
||||
<div class="group relative bg-slate-900 rounded-2xl p-8 border border-slate-800 hover:border-blue-500/50 transition-all duration-500 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">วิเคราะห์ → รายงาน</h3>
|
||||
<ul class="text-gray-400 space-y-2 text-sm">
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
AI วิเคราะห์ข้อมูลอัจฉริยะ
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
สร้างรายงานอัตโนมัติ
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
แจ้งเตือนและส่งต่อข้อมูล
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 4 -->
|
||||
<div class="group relative bg-slate-900 rounded-2xl p-8 border border-slate-800 hover:border-blue-500/50 transition-all duration-500 overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Chatbot ภายในองค์กร</h3>
|
||||
<ul class="text-gray-400 space-y-2 text-sm">
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
<20><>อบคำถามพนักงาน 24/7
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ค้นหาข้อมูลจากเอกสาร
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ช่วยงานฝ่าย HR และ IT
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-xl text-gray-400">
|
||||
เรามีความเชี่ยวชาญในการเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-slate-900/50 rounded-2xl p-8 border border-slate-800">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">เชื่อมต่อทุกระบบ</h3>
|
||||
<p class="text-gray-400">
|
||||
เชื่อมข้อมูลจากทุกแอปที่คุณใช้ ไม่ว่าจะเป็น ERP, CRM, ระบบบัญชี, POS หรือโปรแกรมอื่น ๆ เข้าด้วยกัน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/50 rounded-2xl p-8 border border-slate-800">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">วิเคราะห์อัจฉริยะ</h3>
|
||||
<p class="text-gray-400">
|
||||
AI วิเคราะห์ข้อมูลทั้งหมดและหา insights ที่เป็นประโยชน์ต่อธุรกิจ พร้อมแนะนำวิธีปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/50 rounded-2xl p-8 border border-slate-800">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">แจ้งเตือนอัตโนมัติ</h3>
|
||||
<p class="text-gray-400">
|
||||
ระบบแจ้งเตือนอัตโนมัติเมื่อมีสิ่งสำคัญ เช่น ยอดขายต่ำกว่ากำหนด สินค้าใกล้หมด หรือต้องติดตามลูกค้า
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Target Audience -->
|
||||
<section class="py-24 bg-slate-950">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
เหมาะกับใคร?
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-slate-900 rounded-2xl p-6 border border-slate-800 text-center">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-white mb-2">SME / ธุรกิจขนาดเล็ก</h3>
|
||||
<p class="text-sm text-gray-500">ธุรกิจที่ต้องการรวมข้อมูลจากหลายแหล่งและใช้ AI วิเคราะห์</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900 rounded-2xl p-6 border border-slate-800 text-center">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-white mb-2">บริษัท/โรงพยาบาล</h3>
|
||||
<p class="text-sm text-gray-500">องค์กรขนาดใหญ่ที่ต้องการรวมศูนย์ข้อมูลและวิเคราะห์อัจฉริยะ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900 rounded-2xl p-6 border border-slate-800 text-center">
|
||||
<div class="w-14 h-14 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-white mb-2">โรงงาน/Logistics</h3>
|
||||
<p class="text-sm text-gray-500">องค์กรที่ต้องเชื่อมต่อระบบการผลิตและโลจิสติกส์</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
ตัวอย่างการใช้งาน
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div class="bg-slate-900 rounded-xl p-5 border border-slate-800">
|
||||
<h3 class="font-bold text-white mb-2">ร้านค้าออนไลน์</h3>
|
||||
<p class="text-gray-500 text-sm">เชื่อมข้อมูลจาก Shopee, Lazada, JD สร้างรายงานยอดขายรวม วิเคราะห์สินค้าขายดี แจ้งเตือนเมื่อสินค้าใกล้หมด พร้อม Chatbot ตอบคำถามลูกค้า</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 rounded-xl p-5 border border-slate-800">
|
||||
<h3 class="font-bold text-white mb-2">โรงพยาบาล/คลินิก</h3>
|
||||
<p class="text-gray-500 text-sm">เชื่อมข้อมูล HIS, LIS, RIS วิเคราะห์ผลตรวจแลป สร้างรายงานสรุปสำหรับแพทย์ แจ้งเตือนผลผิดปกติ และนัดหมายซ้ำอัตโนมัติ</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 rounded-xl p-5 border border-slate-800">
|
||||
<h3 class="font-bold text-white mb-2">ร้านอาหาร/เชน</h3>
|
||||
<p class="text-gray-500 text-sm">เชื่อมข้อมูล POS ทุกสาขา รวมยอดขายอัตโนมัติ วิเคราะห์ยอดขายแต่ละเมนู สั่งซื้อวัตถุดิบอัตโนมัติตามคลัง</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 rounded-xl p-5 border border-slate-800">
|
||||
<h3 class="font-bold text-white mb-2">บริษัทขนส่ง</h3>
|
||||
<p class="text-gray-500 text-sm">เชื่อมข้อมูล Tracking, Fleet Management, Billing วิเคราะห์เส้นทางที่ดีที่สุด คำนวณค่าใช้จ่ายอัตโนมัติ แจ้งเตือนรถซ่อม</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-24 bg-slate-950">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-white mb-1">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-500">วิเคราะห์ระบบที่มีและความต้องการ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-white mb-1">ออกแบบ</h3>
|
||||
<p class="text-sm text-gray-500">ออกแบบ Flow และระบบเชื่อมต่อ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-white mb-1">พัฒนา</h3>
|
||||
<p class="text-sm text-gray-500">พัฒนาและเชื่อมต่อระบบ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-white mb-1">ส่งมอบ</h3>
|
||||
<p class="text-sm text-gray-500">สอนการใช้งานและดูแลต่อเนื่อง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-3xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-slate-900 rounded-xl overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-white">AI Automation ต่างจาก Marketing Automation อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-400 px-5 pb-5">
|
||||
<p><strong class="text-white">AI Automation</strong> เน้น automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน<br/>
|
||||
<strong class="text-white">Marketing Automation</strong> เน้น automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900 rounded-xl overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-white">สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-400 px-5 pb-5">
|
||||
<p>ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900 rounded-xl overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-white">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-400 px-5 pb-5">
|
||||
<p><strong class="text-white">ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Related Services -->
|
||||
<section class="py-12 bg-slate-950 border-t border-slate-800">
|
||||
<div class="container mx-auto px-4 max-w-3xl text-center">
|
||||
<h3 class="text-lg font-bold text-white mb-6">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
<a href="/marketing-automation" class="bg-slate-900 text-gray-300 px-5 py-2 rounded-full font-medium hover:bg-blue-500 hover:text-white transition">Marketing Automation</a>
|
||||
<a href="/web-development" class="bg-slate-900 text-gray-300 px-5 py-2 rounded-full font-medium hover:bg-blue-500 hover:text-white transition">พัฒนาเว็บไซต์</a>
|
||||
<a href="/tech-consult" class="bg-slate-900 text-gray-300 px-5 py-2 rounded-full font-medium hover:bg-blue-500 hover:text-white transition">Tech Consult</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20 bg-primary">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-lg mb-8 max-w-2xl mx-auto text-gray-800">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบ AI Automation ที่ตอบโจทย์
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="tel:0809955945" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
|
||||
สอบถามรายละเอียด
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
150
src/pages/blog/[slug].astro
Normal file
150
src/pages/blog/[slug].astro
Normal file
@@ -0,0 +1,150 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import { getCollection, getEntry } from 'astro:content';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: { post },
|
||||
}));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
---
|
||||
|
||||
<Layout title={post.data.title} description={post.data.description}>
|
||||
<article class="blog-post">
|
||||
<header class="post-header">
|
||||
<div class="container">
|
||||
<h1>{post.data.title}</h1>
|
||||
<div class="post-meta">
|
||||
<span class="author">{post.data.author}</span>
|
||||
<span class="separator">•</span>
|
||||
<time datetime={post.data.pubDate.toISOString()}>
|
||||
{post.data.pubDate.toLocaleDateString('th-TH', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
<span class="separator">•</span>
|
||||
<span class="category">{post.data.category}</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
{post.data.tags?.map((tag) => (
|
||||
<span class="tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="post-content">
|
||||
<div class="container container-narrow">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="post-footer">
|
||||
<div class="container container-narrow">
|
||||
<a href="/blog" class="btn-back">← กลับไปหน้าบล็อก</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.post-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-header h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--color-neutral);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.container-narrow {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.post-content :global(h2) {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
|
||||
.post-content :global(h3) {
|
||||
font-size: 1.25rem;
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.post-content :global(p) {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.post-content :global(ul),
|
||||
.post-content :global(ol) {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.post-content :global(li) {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.post-content :global(strong) {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid var(--color-light-gray);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: inline-block;
|
||||
color: var(--color-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
</style>
|
||||
127
src/pages/blog/index.astro
Normal file
127
src/pages/blog/index.astro
Normal file
@@ -0,0 +1,127 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
const sortedPosts = posts.sort((a, b) =>
|
||||
b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
|
||||
);
|
||||
---
|
||||
|
||||
<Layout title="บล็อก" description="บทความและความรู้ด้าน Digital Transformation, AI และการตลาดออนไลน์สำหรับ SMEs ไทย">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>บล็อก</h1>
|
||||
<p>บทความและความรู้ด้านเทคโนโลยีและการตลาดสำหรับธุรกิจ SMEs ไทย</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="blog-list">
|
||||
<div class="container">
|
||||
<div class="posts-grid">
|
||||
{sortedPosts.map((post) => (
|
||||
<article class="post-card">
|
||||
<h2>
|
||||
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
|
||||
</h2>
|
||||
<p class="post-meta">
|
||||
<span>{post.data.author}</span>
|
||||
<span>•</span>
|
||||
<time datetime={post.data.pubDate.toISOString()}>
|
||||
{post.data.pubDate.toLocaleDateString('th-TH', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
</p>
|
||||
<p class="post-description">{post.data.description}</p>
|
||||
<div class="post-tags">
|
||||
{post.data.tags?.slice(0, 3).map((tag) => (
|
||||
<span class="tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.blog-list {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background: var(--color-neutral);
|
||||
border: 1px solid var(--color-light-gray);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.post-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.post-card h2 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-card h2 a {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.post-card h2 a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-dark-gray);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.post-description {
|
||||
color: var(--color-dark-gray);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--color-light-gray);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-dark-gray);
|
||||
}
|
||||
</style>
|
||||
108
src/pages/contact-us.astro
Normal file
108
src/pages/contact-us.astro
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="ติดต่อเรา" description="ติดต่อทีมงาน MoreminiMore สำหรับปรึกษาฟรี">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>ติดต่อเรา</h1>
|
||||
<p>พร้อมให้บริการ ปรึกษาฟรี!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container contact-grid">
|
||||
<div class="contact-info">
|
||||
<h2>ข้อมูลการติดต่อ</h2>
|
||||
<div class="info-item">
|
||||
<strong>โทร:</strong>
|
||||
<span>080-995-5945</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<strong>อีเมล:</strong>
|
||||
<span>contact@moreminimore.com</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<strong>ที่อยู่:</strong>
|
||||
<span>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-form">
|
||||
<h2>ส่งข้อความ</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">ชื่อ</label>
|
||||
<input type="text" id="name" name="name" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">อีเมล</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">เบอร์โทร</label>
|
||||
<input type="tel" id="phone" name="phone" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">ข้อความ</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary">ส่งข้อความ</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--color-light-gray);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/pages/faq.astro
Normal file
59
src/pages/faq.astro
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="คำถามที่พบบ่อย" description="คำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของ MoreminiMore">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>คำถามที่พบบ่อย</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<details>
|
||||
<summary>ทำไมต้องมีเว็บไซต์?</summary>
|
||||
<p>เว็บไซต์คือหน้าบ้านของธุรกิจในยุคดิจิทัล ลูกค้าจำนวนมากค้นหาข้อ<E0B989><E0B8AD>ูลออนไลน์ก่อนตัดสินใจซื้อ</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>ระบบอัตโนมัติทางการตลาดคืออะไร?</summary>
|
||||
<p>คือระบบที่ช่วยทำงานทางการตลาดโดยอัตโนมัติ เช่น ส่งอีเมล ตอบ LINE ดูแล Social Media</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>AI ช่วยธุรกิจได้อย่างไร?</summary>
|
||||
<p>AI ช่วยตอบลูกค้า วิเคราะห์ข้อมูล สร้างเนื้อหา และทำงานซ้ำๆ แทนคน</p>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--color-light-gray);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
summary {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
details p {
|
||||
margin-top: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
1163
src/pages/index.astro
Normal file
1163
src/pages/index.astro
Normal file
File diff suppressed because it is too large
Load Diff
499
src/pages/marketing-automation.astro
Normal file
499
src/pages/marketing-automation.astro
Normal file
@@ -0,0 +1,499 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="ระบบ Marketing Automation | MoreminiMore - การตลาดอัตโนมัติ + GEO พร้อม AI วิเคราะห์"
|
||||
description="บริการ Marketing Automation สำหรับ SME ไทย การตลาดอัตโนมัติทุกช่องทาง Website, Social Media, Ads, Email พร้อม GEO รองรับ AI Search และ AI วิเคราะห์"
|
||||
>
|
||||
<!-- Schema.org -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการ Marketing Automation สำหรับ SME ไทย",
|
||||
"telephone": "+66809955945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/marketing-automation",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
|
||||
"addressLocality": "บ้านแพ้ว",
|
||||
"addressRegion": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 13.5497,
|
||||
"longitude": 100.4167
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "$$",
|
||||
"serviceType": ["Marketing Automation", "Digital Marketing", "AI Analytics", "GEO Optimization"]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Bold Yellow Theme with Bento Grid -->
|
||||
<section class="relative min-h-[85vh] flex items-center overflow-hidden bg-black">
|
||||
<!-- Background Image -->
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
src="/images/marketing-automation.jpg"
|
||||
alt="การตลาดอัตโนมัติสำหรับธุรกิจ SME"
|
||||
class="w-full h-full object-cover opacity-60"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-black/40"></div>
|
||||
</div>
|
||||
|
||||
<!-- Geometric Accents -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 right-20 w-64 h-64 border border-primary/20 rotate-45 animate-pulse"></div>
|
||||
<div class="absolute bottom-32 right-40 w-32 h-32 border border-primary/30 rotate-12"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-20 h-20 bg-primary/10 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 py-20 relative z-10">
|
||||
<div class="max-w-4xl">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-primary text-black px-4 py-2 rounded-full font-semibold mb-6 animate-fade-in">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
<span>บริการ Marketing Automation ครบวงจร</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Headline -->
|
||||
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
การตลาด<br/>
|
||||
<span class="text-primary">อัตโนมัติ</span><br/>
|
||||
ทุกช่องทาง
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline -->
|
||||
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl leading-relaxed">
|
||||
ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google<br/>
|
||||
ครอบคลุม Website, Social Media, Ads และ Email<br/>
|
||||
<span class="text-primary font-semibold">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex flex-wrap gap-4 mb-10">
|
||||
<a href="tel:0809955945" class="group bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-white transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-white/10 text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="flex flex-wrap gap-6 text-gray-400 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
AI วิเคราะห์
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ราคาเหมาะสม
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Bento Grid -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-7xl">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
เราทำอะไรบ้าง?
|
||||
</h2>
|
||||
<p class="text-xl text-gray-400">
|
||||
การตลาดอัตโนมัติครบทุกช่องทาง พร้อม AI วิเคราะห์ให้คุณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
|
||||
<!-- Website + SEO - Large Card -->
|
||||
<div class="md:col-span-2 bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl p-8 md:p-10 border border-gray-800 hover:border-primary/50 transition-all duration-500 group">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="bg-primary text-black px-3 py-1 rounded-full text-sm font-semibold">Website</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-white mb-3">Website + SEO</h3>
|
||||
<ul class="text-gray-400 space-y-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
สร้างบทความด้วย AI
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
SEO ติด Google อันดับ
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
วิเคราะห์คีย์เวิร์ด
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- GEO - Highlight Card -->
|
||||
<div class="bg-gradient-to-br from-primary to-yellow-400 rounded-3xl p-8 md:p-10 border-2 border-primary group">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div class="w-16 h-16 bg-black rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-black mb-3">GEO</h3>
|
||||
<ul class="text-gray-800 space-y-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรากฏใน AI Search
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ติด ChatGPT, Perplexity
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
Schema markup ครบ
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Social Media -->
|
||||
<div class="bg-gray-900 rounded-3xl p-8 border border-gray-800 hover:border-gray-700 transition-all duration-500 group">
|
||||
<div class="w-14 h-14 bg-gray-800 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">Social Media</h3>
|
||||
<p class="text-gray-500 text-sm">โพสต์ตาม Content Plan + Chatbot ตอบคำถาม</p>
|
||||
</div>
|
||||
|
||||
<!-- Ads -->
|
||||
<div class="bg-gray-900 rounded-3xl p-8 border border-gray-800 hover:border-gray-700 transition-all duration-500 group">
|
||||
<div class="w-14 h-14 bg-gray-800 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">โฆษณา</h3>
|
||||
<p class="text-gray-500 text-sm">Google Ads + Facebook Ads + บริหารจัดการแทน</p>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="bg-gray-900 rounded-3xl p-8 border border-gray-800 hover:border-gray-700 transition-all duration-500 group">
|
||||
<div class="w-14 h-14 bg-gray-800 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">Email</h3>
|
||||
<p class="text-gray-500 text-sm">สร้างอีเมล์ด้วย AI + ตอบกลับอัตโนมัติ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-xl text-gray-400">
|
||||
เรามีความเชี่ยวชาญในการทำการตลาดอัตโนมัติให้ธุรกิจของคุณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<!-- Benefit 1 -->
|
||||
<div class="bg-gray-900/50 rounded-2xl p-8 border border-gray-800">
|
||||
<div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">AI วิเคราะห์อัจฉริยะ</h3>
|
||||
<p class="text-gray-400">
|
||||
AI วิเคราะห์ข้อมูลและหาช่องว่างทางการตลาดให้คุณ พร้อมแนะนำวิธีปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 2 -->
|
||||
<div class="bg-gray-900/50 rounded-2xl p-8 border border-gray-800">
|
||||
<div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">อัตโนมัติครบวงจร</h3>
|
||||
<p class="text-gray-400">
|
||||
ระบบทำงานอัตโนมัติทุกช่องทาง ตั้งแต่ Website จนถึง Email ไม่ต้องทำเอง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 3 -->
|
||||
<div class="bg-gray-900/50 rounded-2xl p-8 border border-gray-800">
|
||||
<div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">วัดผลได้ชัดเจน</h3>
|
||||
<p class="text-gray-400">
|
||||
ดูผลการตลาดได้ตลอดเวลา รู้ว่าอะไรเวิร์ค อะไรไม่เวิร์ค พร้อมปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Target Audience -->
|
||||
<section class="py-24 bg-gray-950">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
เหมาะกับใคร?
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-gray-900 rounded-2xl p-6 border border-gray-800 text-center">
|
||||
<div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-white mb-2">SME / ธุรกิจขนาดเล็ก</h3>
|
||||
<p class="text-sm text-gray-500">ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายและดูแลลูกค้าได้มากขึ้น</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 rounded-2xl p-6 border border-gray-800 text-center">
|
||||
<div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-white mb-2">ร้านค้าออนไลน์</h3>
|
||||
<p class="text-sm text-gray-500">ธุรกิจ E-commerce ที่ต้องการติดตามลูกค้าและเพิ่มยอดขายซ้ำ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 rounded-2xl p-6 border border-gray-800 text-center">
|
||||
<div class="w-14 h-14 bg-primary rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-white mb-2">บริษัท / องค์กร</h3>
|
||||
<p class="text-sm text-gray-500">บริษัทที่ต้องการวิเคราะห์ข้อมูลและทำการตลาดอัตโนมัติ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
ตัวอย่างการใช้งานจริง
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
|
||||
<h3 class="font-bold text-white">ร้านค้าออนไลน์</h3>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">AI วิเคราะห์พฤติกรรมลูกค้า + แนะนำสินค้าเฉพาะบุคคล + ติดตามตะกร้า</p>
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
|
||||
<h3 class="font-bold text-white">คลินิก/สถานพยาบาล</h3>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">AI วิเคราะห์ pattern คนไม่มานัด + ปรับปรุงการนัดหมาย + เตือนอัจฉริยะ</p>
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
|
||||
<h3 class="font-bold text-white">ร้านอาหาร</h3>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">AI วิเคราะห์ความชอบลูกค้า + ส่งโปรโมชันตรงกลุ่ม + วิเคราะห์ยอดขาย</p>
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path></svg>
|
||||
<h3 class="font-bold text-white">โรงเรียน/สถาบันการศึกษา</h3>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">AI วิเคราะห์ trend การสมัครเรียน + หาแคมเปญที่ได้ผล + ติดตามผู้ปกครอง</p>
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
||||
<h3 class="font-bold text-white">อสังหาริมทรัพย์</h3>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">AI วิเคราะห์ Lead Scoring + ติดตามลูกค้าที่มีโอกาสซื้อสูง + ส่งข้อมูลตรงใจ</p>
|
||||
</div>
|
||||
<div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||||
<h3 class="font-bold text-white">Startup/SaaS</h3>
|
||||
</div>
|
||||
<p class="text-gray-500 text-sm">AI วิเคราะห์ User Behavior + ปรับ Onboarding ให้ตรงกลุ่ม + ลด churn rate</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-24 bg-gray-950">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-black">1</div>
|
||||
<h3 class="font-bold text-white mb-1">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-500">วิเคราะห์ธุรกิจและการตลาด</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-black">2</div>
|
||||
<h3 class="font-bold text-white mb-1">วางแผน</h3>
|
||||
<p class="text-sm text-gray-500">วาง Content Plan และ Strategy</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-black">3</div>
|
||||
<h3 class="font-bold text-white mb-1">ตั้งค่า</h3>
|
||||
<p class="text-sm text-gray-500">ติดตั้งระบบอัตโนมัติ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-primary rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-black">4</div>
|
||||
<h3 class="font-bold text-white mb-1">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-500">AI วิเคราะห์และปรับปรุง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-3xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white text-center mb-12">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-gray-900 rounded-xl overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-white">Marketing Automation ต่างจาก AI Automation อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-400 px-5 pb-5">
|
||||
<p><strong class="text-white">AI Automation</strong> เน้น automation ภายในองค์กร เช่น ระบบตอบคำถาม, การประมวลผลข้อมูล<br/>
|
||||
<strong class="text-white">Marketing Automation</strong> เน้น automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 rounded-xl overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-white">ราคารวมค่าโฆษณาด้วยไหม?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-400 px-5 pb-5">
|
||||
<p>ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 rounded-xl overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-white">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-400 px-5 pb-5">
|
||||
<p><strong class="text-white">ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 rounded-xl overflow-hidden border-2 border-primary/30">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-white">GEO คืออะไร?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-400 px-5 pb-5">
|
||||
<p><strong class="text-white">GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Related Services -->
|
||||
<section class="py-12 bg-gray-950 border-t border-gray-800">
|
||||
<div class="container mx-auto px-4 max-w-3xl text-center">
|
||||
<h3 class="text-lg font-bold text-white mb-6">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
<a href="/ai-automation" class="bg-gray-900 text-gray-300 px-5 py-2 rounded-full font-medium hover:bg-primary hover:text-black transition">AI Automation</a>
|
||||
<a href="/web-development" class="bg-gray-900 text-gray-300 px-5 py-2 rounded-full font-medium hover:bg-primary hover:text-black transition">พัฒนาเว็บไซต์</a>
|
||||
<a href="/tech-consult" class="bg-gray-900 text-gray-300 px-5 py-2 rounded-full font-medium hover:bg-primary hover:text-black transition">Tech Consult</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section - Yellow -->
|
||||
<section class="py-20 bg-primary">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมเพิ่มประสิทธิภาพการตลาดแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-lg mb-8 max-w-2xl mx-auto text-gray-800">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบการตลาดอัตโนมัติที่ตอบโจทย์
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="tel:0809955945" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
29
src/pages/portfolio.astro
Normal file
29
src/pages/portfolio.astro
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="ผลงาน" description="ตัวอย่างผลงานการพัฒนาเว็บไซต์และระบบของ MoreminiMore">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>ผลงานของเรา</h1>
|
||||
<p>ตัวอย่างผลงานที่ผ่านมา</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<p>ผลงานกำลังจะมาเร็วๆ นี้</p>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
</style>
|
||||
70
src/pages/privacy-policy.astro
Normal file
70
src/pages/privacy-policy.astro
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="นโยบายความเป็นส่วนตัว" description="นโยบายความเป็นส่วนตัว - บริษัท มอร์มินิมอร์ จำกัด">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>นโยบายความเป็นส่วนตัว</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<h2>นโยบายความเป็นส่วนตัว (Privacy Policy)</h2>
|
||||
<p>บริษัท มอร์มินิมอร์ จำกัด ตระหนักถึงความสำคัญของข้อมูลส่วนบุคคล จึงได้จัดทำนโยบายความเป็นส่วนตัวฉบับนี้ขึ้นเพื่อแจ้งให้ท่านทราบเกี่ยวกับการเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของท่าน</p>
|
||||
|
||||
<h3>1. ข้อมูลที่เก็บรวบรวม</h3>
|
||||
<ul>
|
||||
<li>ข้อมูลที่ท่านให้เรา เช่น ชื่อ อีเมล เบอร์โทร</li>
|
||||
<li>ข้อมูลการใช้งานเว็บไซต์</li>
|
||||
<li>ข้อมูลจากคุกกี้</li>
|
||||
</ul>
|
||||
|
||||
<h3>2. วัตถุประสงค์ในการใช้ข้อมูล</h3>
|
||||
<ul>
|
||||
<li>เพื่อให้บริการแก่ท่าน</li>
|
||||
<li>เพื่อติดต่อสื่อสารกับท่าน</li>
|
||||
<li>เพื่อปรับปรุงบริการ</li>
|
||||
</ul>
|
||||
|
||||
<h3>3. การคุ้มครองข้อมูล</h3>
|
||||
<p>เราจะเก็บรักษาข้อมูลส่วนบุคคลของท่านอย่างปลอดภัยและเป็นความลับ</p>
|
||||
|
||||
<h3>4. ติดต่อเรา</h3>
|
||||
<p>หากท่านมีคำถามเกี่ยวกับนโยบายความเป็นส่วนตัวนี้ กรุณาติดต่อเราที่:</p>
|
||||
<ul>
|
||||
<li>โทร: 080-995-5945</li>
|
||||
<li>อีเมล: contact@moreminimore.com</li>
|
||||
</ul>
|
||||
|
||||
<p><em>อัปเดตล่าสุด: {new Date().toLocaleDateString('th-TH')}</em></p>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.content h3 {
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
.content ul {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.content li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
419
src/pages/tech-consult.astro
Normal file
419
src/pages/tech-consult.astro
Normal file
@@ -0,0 +1,419 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Tech Consult | MoreminiMore - ที่ปรึกษา AI ครบวงจร"
|
||||
description="บริการที่ปรึกษา AI ครบวงจร สำหรับธุรกิจไทย ที่ปรึกษา Marketing Automation, AI Automation, AI Hardware และการรวมระบบ"
|
||||
>
|
||||
<!-- Schema.org -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการที่ปรึกษา AI ครบวงจร สำหรับธุรกิจไทย",
|
||||
"telephone": "+66809955945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/tech-consult",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
|
||||
"addressLocality": "บ้านแพ้ว",
|
||||
"addressRegion": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 13.5497,
|
||||
"longitude": 100.4167
|
||||
},
|
||||
"openingHours": "Mo-Fr 09:00-18:00",
|
||||
"priceRange": "$$",
|
||||
"serviceType": ["Tech Consult", "AI Consulting", "Marketing Automation", "AI Hardware"]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Asymmetric Professional -->
|
||||
<section class="relative min-h-[85vh] flex items-center overflow-hidden">
|
||||
<!-- Left: Image Side -->
|
||||
<div class="absolute inset-0 lg:w-1/2">
|
||||
<img
|
||||
src="/images/tech-consult.jpg"
|
||||
alt="ที่ปรึกษา AI สำหรับธุรกิจไทย"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/60"></div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Content Side with Pattern -->
|
||||
<div class="relative lg:w-1/2 lg:ml-auto bg-white w-full min-h-[85vh] flex items-center">
|
||||
<!-- Diagonal Split -->
|
||||
<div class="absolute top-0 right-0 w-32 h-full bg-gray-100 skew-x-12 translate-x-8"></div>
|
||||
|
||||
<!-- Subtle Grid Pattern -->
|
||||
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 30px 30px;"></div>
|
||||
|
||||
<div class="container mx-auto px-8 py-16 relative z-10">
|
||||
<div class="max-w-lg">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-black text-white px-4 py-2 rounded-full font-semibold mb-6">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
|
||||
<span>บริการที่ปรึกษา AI ครบวงจร</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Headline -->
|
||||
<h1 class="text-5xl md:text-6xl font-bold text-black mb-6 leading-tight">
|
||||
ที่ปรึกษา AI<br/>
|
||||
<span class="text-gray-600">ครบว<E0B89A><E0B8A7><EFBFBD>จร</span><br/>
|
||||
สำหรับธุรกิจไทย
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline -->
|
||||
<p class="text-lg text-gray-600 mb-8 leading-relaxed">
|
||||
ที่ปรึกษาด้าน Marketing Automation, AI Automation<br/>
|
||||
และ AI Hardware สำหรับธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex flex-wrap gap-4 mb-10">
|
||||
<a href="tel:0809955945" class="group bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
โทรหาเรา
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-gray-100 text-black border-2 border-gray-300 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-200 transition-all duration-300 flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="flex flex-wrap gap-6 text-gray-500 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ปรึกษาฟรี
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ทีมงานมืออาชีพ
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
ราคาเหมาะสม
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services - 4 Column Grid -->
|
||||
<section class="py-24 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-black mb-4">
|
||||
บริการของเรา
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600">
|
||||
บริการที่ปรึกษา AI ครบวงจรสำหรับธุรกิจของคุณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Marketing Automation -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300">
|
||||
<div class="w-14 h-14 bg-black rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-black mb-3">Marketing Automation</h3>
|
||||
<ul class="text-gray-600 space-y-2 text-sm">
|
||||
<li>• ระบบการตลาดอัตโนมัติ</li>
|
||||
<li>• Email Marketing อัตโนมัติ</li>
|
||||
<li>• Chatbot ตอบคำถาม</li>
|
||||
<li>• วิเคราะห์ข้อมูลลูกค้า</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- AI Automation -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300">
|
||||
<div class="w-14 h-14 bg-black rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-black mb-3">AI Automation</h3>
|
||||
<ul class="text-gray-600 space-y-2 text-sm">
|
||||
<li>• ระบบ AI ตอบคำถาม</li>
|
||||
<li>• ประมวลผลเอกสาร</li>
|
||||
<li>• วิเคราะห์ข้อมูลอัตโนมัติ</li>
|
||||
<li>• สร้างเนื้อหาด้วย AI</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- AI Hardware Consulting -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300">
|
||||
<div class="w-14 h-14 bg-black rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-black mb-3">AI Hardware</h3>
|
||||
<ul class="text-gray-600 space-y-2 text-sm">
|
||||
<li>• ที่ปรึกษาซื้อ AI Server</li>
|
||||
<li>• แนะนำ GPU/สเปค</li>
|
||||
<li>• ติดตั้งระบบ On-premise</li>
|
||||
<li>• ดูและบำรุงรักษา</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- รวมระบบ -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300">
|
||||
<div class="w-14 h-14 bg-black rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-black mb-3">รวมระบบ</h3>
|
||||
<ul class="text-gray-600 space-y-2 text-sm">
|
||||
<li>• รวมระบบ<E0B89A><E0B89A><EFBFBD>ี<EFBFBD><E0B8B5><EFBFBD>มีอยู่</li>
|
||||
<li>• เชื่อมต่อ API</li>
|
||||
<li>• สร้าง Workflow</li>
|
||||
<li>• ฝึกอบรมพนักงาน</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us - Dark Section -->
|
||||
<section class="py-24 bg-black">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-xl text-gray-400">
|
||||
เรามีความเชี่ยวชาญในการให้คำปรึกษา AI ให้ธุรกิจของคุณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
|
||||
<div class="w-14 h-14 bg-white rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">ครบวงจร</h3>
|
||||
<p class="text-gray-400">
|
||||
ให้คำปรึกษาครบทุกด้าน ทั้ง Marketing Automation, AI Automation และ Hardware คุณไม่ต้องไปหาหลายที่
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
|
||||
<div class="w-14 h-14 bg-white rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">ประหยัด</h3>
|
||||
<p class="text-gray-400">
|
||||
ปรึกษาฟรีในเบื้องต้น แนะนำแนวทางที่เหมาะสมกับงบประมาณของคุณ ไม่ต้องซื้อของที่ไม่จำเป็น
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
|
||||
<div class="w-14 h-14 bg-white rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">ทำงานด้วยกัน</h3>
|
||||
<p class="text-gray-400">
|
||||
เราทำงานร่วมกับคุณตลอ<E0B8A5><E0B8AD><EFBFBD>ก<EFBFBD><E0B881><EFBFBD>ะบวนการ ตั้งแต่วางแผน จนถึง implementation และดูแลต่อเนื่อง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Target Audience -->
|
||||
<section class="py-24 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-black text-center mb-12">
|
||||
เหมาะกับใคร?
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-white rounded-2xl p-6 shadow-sm text-center">
|
||||
<div class="w-14 h-14 bg-black rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-black mb-2">SME / ธุรกิจขนาดเล็ก</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายและดูแลลูกค้าได้มากขึ้น</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl p-6 shadow-sm text-center">
|
||||
<div class="w-14 h-14 bg-black rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-black mb-2">บริษัท/องค์กร</h3>
|
||||
<p class="text-sm text-gray-600">บริษัทที่ต้องการวิเคราะห์ข้อมูลและทำการตลาดอัตโนมัติ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-2xl p-6 shadow-sm text-center">
|
||||
<div class="w-14 h-14 bg-black rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-black mb-2">โรงงาน/Logistics</h3>
|
||||
<p class="text-sm text-gray-600">องค์กรที่ต้องเชื่อมต่อระบบการผลิตและโลจิสติกส์</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-24 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-black text-center mb-12">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-black mb-1">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">วิเคราะห์ธุรกิจและความต้องการ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-black mb-1">วางแผน</h3>
|
||||
<p class="text-sm text-gray-600">เสนอแนวทางและ Solution</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-black mb-1">ดำเนินการ</h3>
|
||||
<p class="text-sm text-gray-600">Implementation ระบบที่เหมาะสม</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-black rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-black mb-1">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-sm text-gray-600">Support และปรับปรุงต่อไป</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-24 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-3xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-black text-center mb-12">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-black">Tech Consult ต่างจากการซื้อ Software ทั่วไปอย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-5 pb-5">
|
||||
<p>เราให้คำปรึกษาแบบ <strong>แนวทางการแก้ปัญหา</strong> ไม่ใช่แค่ขาย Software เราจะวิเคราะห์ธุรกิจของคุณก่อน จากนั้นจึงแนะนำ Solution ที่เหมาะสม ทั้ง Free Tools, Paid Software หรือ Custom Development</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-black">AI Hardware Consulting ช่วยอะไรได้บ้าง?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-5 pb-5">
|
||||
<p>เราช่วยแนะนำ<strong>สเปค Server/GPU</strong> ที่เหมาะสมกับการใช้งาน AI ของคุณ, ช่วยเป<E0B980><E0B89B><EFBFBD>ี<EFBFBD><E0B8B5><EFBFBD>บเทียบราคาและทางเลือก, ติดตั้งระบบ On-premise และดูแลและบำรุงรักษา ช่วยประหยัดค่าใช้จ่ายที่ไม่จำเป็น</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-black">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-5 pb-5">
|
||||
<p><strong class="text-black">ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลธุรกิจและดูผลลัพธ์ เราจะอธิบายให้เข้าใจง่าย ไม่ใช้ศัพท์เทคนิคมากเกินไป</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-black/10">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||||
<span class="font-semibold text-black">ค่าใช้จ่ายในการปรึกษาเป็นอย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180 text-gray-500">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-5 pb-5">
|
||||
<p>เราให้คำปรึกษาเบื้องต้น<strong class="text-black">ฟรี!</strong> สำหรับการปรึกษาเชิงลึกและ Implementation จะคิดตามความซับซ้อนของโปรเจกต์ เราจะแจ้งราคาก่อนเริ่มงานเสมอ ไม่มีค่าใช้จ่ายที่ซ่อนไว้</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Related Services -->
|
||||
<section class="py-12 bg-white border-t border-gray-100">
|
||||
<div class="container mx-auto px-4 max-w-3xl text-center">
|
||||
<h3 class="text-lg font-bold text-black mb-6">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-3">
|
||||
<a href="/marketing-automation" class="bg-gray-100 text-gray-700 px-5 py-2 rounded-full font-medium hover:bg-black hover:text-white transition">Marketing Automation</a>
|
||||
<a href="/ai-automation" class="bg-gray-100 text-gray-700 px-5 py-2 rounded-full font-medium hover:bg-black hover:text-white transition">AI Automation</a>
|
||||
<a href="/web-development" class="bg-gray-100 text-gray-700 px-5 py-2 rounded-full font-medium hover:bg-black hover:text-white transition">พัฒนาเว็บไซต์</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section - Yellow -->
|
||||
<section class="py-20 bg-primary">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
||||
พร้อมเริ่มต้นใช้ AI ในธุรกิจแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-lg mb-8 max-w-2xl mx-auto text-gray-800">
|
||||
ติดต่อเราเพื่อปรึกษาฟรี! เราพร้อมช่วยคุณหา Solution ที่เหมาะสมกับธุรกิจ
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="tel:0809955945" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 flex items-center gap-3">
|
||||
<img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
66
src/pages/terms-and-conditions.astro
Normal file
66
src/pages/terms-and-conditions.astro
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="ข้อกำหนดการใช้งาน" description="ข้อกำหนดการใช้งานเว็บไซต์ - บริษัท มอร์มินิมอร์ จำกัด">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>ข้อกำหนดการใช้งาน</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<h2>ข้อกำหนดและเงื่อนไขการใช้งาน</h2>
|
||||
<p>การเข้าใช้งานเว็บไซต์นี้ ถือว่าท่านยอมรับข้อกำหนดและเงื่อนไขต่อไปนี้</p>
|
||||
|
||||
<h3>1. การยอมรับเงื่อนไข</h3>
|
||||
<p>ท่านตกลงที่จะใช้งานเว็บไซต์ตามข้อกำหนดและเงื่อนไขที่ระบุไว้</p>
|
||||
|
||||
<h3>2. ลิขสิทธิ์</h3>
|
||||
<p>เนื้อหาทั้งหมดบนเว็บไซต์นี้เป็นลิขสิทธิ์ของบริษัท มอร์มินิมอร์ จำกัด</p>
|
||||
|
||||
<h3>3. การห้ามใช้งาน</h3>
|
||||
<p>ท่านไม่สามารถ:</p>
|
||||
<ul>
|
||||
<li>คัดลอกหรือเผยแพร่เนื้อหาโดยไม่ได้รับอนุญาต</li>
|
||||
<li>ใช้งานเว็บไซต์ในทางที่ผิดกฎหมาย</li>
|
||||
<li>รบกวนการทำงานของเว็บไซต์</li>
|
||||
</ul>
|
||||
|
||||
<h3>4. ข้อจำกัดความรับผิด</h3>
|
||||
<p>เราไม่รับผิดชอบต่อความเสียหายใดๆ ที่เกิดจากการใช้งานเว็บไซต์นี้</p>
|
||||
|
||||
<h3>5. ติดต่อเรา</h3>
|
||||
<p>หากท่านมีคำถามเกี่ยวกับข้อกำหนดนี้ กรุณาติดต่อเราที่ contact@moreminimore.com</p>
|
||||
|
||||
<p><em>อัปเดตล่าสุด: {new Date().toLocaleDateString('th-TH')}</em></p>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.content h3 {
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
.content ul {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.content li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
55
src/pages/web-development.astro
Normal file
55
src/pages/web-development.astro
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="บริการพัฒนาเว็บไซต์" description="บริการพัฒนาเว็บไซต์สวยงามและทันสมัยสำหรับธุรกิจ SMEs">
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>บริการพัฒนาเว็บไซต์</h1>
|
||||
<p>เราพัฒนาเว็บไซต์ที่ตอบโจทย์ธุรกิจของคุณ</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<h2>ทำไมต้องมีเว็บไซต์?</h2>
|
||||
<ul>
|
||||
<li>เป็นหน้าบ้านดิจิทัลของธุรกิจ</li>
|
||||
<li>สร้างความน่าเชื่อถือ</li>
|
||||
<li>เข้าถึงลูกค้าได้ตลอด 24 ชั่วโมง</li>
|
||||
<li>เพิ่มโอกาสในการขาย</li>
|
||||
</ul>
|
||||
|
||||
<h2>รูปแบบเว็บไซต์</h2>
|
||||
<ul>
|
||||
<li>เว็บไซต์บริษัท/องค์กร</li>
|
||||
<li>เว็บไซต์ร้านค้าออนไลน์</li>
|
||||
<li>Landing Page</li>
|
||||
<li>ระบบหลังร้าน</li>
|
||||
</ul>
|
||||
|
||||
<a href="/contact-us" class="btn-primary">สอบถามราคา</a>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: var(--color-primary);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
.content h2 {
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
.content ul {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.content li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
80
src/styles/global.css
Normal file
80
src/styles/global.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* Google Fonts - MUST be first */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&family=Noto+Sans+Thai:wght@100..900&display=swap');
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Brand Colors */
|
||||
:root {
|
||||
--color-primary: #fed400;
|
||||
--color-secondary: #000000;
|
||||
--color-neutral: #ffffff;
|
||||
--color-light-gray: #e8e8e8;
|
||||
--color-dark-gray: #0f0f0f;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Noto Sans Thai', system-ui, sans-serif;
|
||||
background-color: var(--color-neutral);
|
||||
color: var(--color-dark-gray);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Kanit', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-secondary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(0.95);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-neutral);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
Reference in New Issue
Block a user