Initial commit: Astro 6 migration with teal design
This commit is contained in:
Kunthawat Greethong
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
207
src/layouts/Layout.astro
Normal file
207
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,207 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = "รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ 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} />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body class="font-prompt bg-white text-gray-900 antialiased">
|
||||
<!-- Navigation -->
|
||||
<header class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
|
||||
<nav class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between h-16 md:h-20">
|
||||
<!-- Logo -->
|
||||
<a href="/" class="flex items-center gap-2">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-xl flex items-center justify-center">
|
||||
<span class="text-white font-bold text-xl">M</span>
|
||||
</div>
|
||||
<span class="font-kanit font-bold text-xl text-gray-900">MoreminiMore</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a href="/" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">หน้าแรก</a>
|
||||
<a href="/portfolio" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">ผลงาน</a>
|
||||
<a href="/about-us" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">เกี่ยวกับเรา</a>
|
||||
<a href="/contact-us" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">ติดต่อ</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<a href="tel:0809955945" class="flex items-center gap-2 text-gray-700 hover:text-teal-600 font-medium transition-colors">
|
||||
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-teal-600 text-white px-5 py-2.5 rounded-full font-medium hover:bg-teal-700 transition-colors flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
LINE
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button id="mobile-menu-btn" class="md:hidden p-2 text-gray-700 hover:text-teal-600 transition-colors">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobile-menu" class="hidden md:hidden pb-4">
|
||||
<div class="flex flex-col gap-3">
|
||||
<a href="/" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">หน้าแรก</a>
|
||||
<a href="/portfolio" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">ผลงาน</a>
|
||||
<a href="/about-us" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">เกี่ยวกับเรา</a>
|
||||
<a href="/contact-us" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">ติดต่อ</a>
|
||||
<div class="flex gap-3 pt-3 border-t border-gray-100">
|
||||
<a href="tel:0809955945" class="flex-1 text-center bg-gray-100 text-gray-700 py-3 rounded-xl font-medium">
|
||||
โทร 080-995-5945
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="flex-1 text-center bg-teal-600 text-white py-3 rounded-xl font-medium">
|
||||
LINE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-16 md:pt-20">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-white">
|
||||
<div class="container mx-auto px-4 py-16">
|
||||
<div class="grid md:grid-cols-4 gap-12">
|
||||
<!-- Brand -->
|
||||
<div class="md:col-span-2">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-teal-400 to-teal-500 rounded-xl flex items-center justify-center">
|
||||
<span class="text-white font-bold text-2xl">M</span>
|
||||
</div>
|
||||
<span class="font-kanit font-bold text-2xl">MoreminiMore</span>
|
||||
</div>
|
||||
<p class="text-gray-400 leading-relaxed mb-6 max-w-md">
|
||||
บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot ครบวงจร สำหรับธุรกิจ SMEs ทั่วประเทศไทย
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div>
|
||||
<h3 class="font-kanit font-semibold text-lg mb-6">บริการ</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="/web-development" class="text-gray-400 hover:text-teal-400 transition-colors">รับทำเว็บไซต์</a></li>
|
||||
<li><a href="/marketing-automation" class="text-gray-400 hover:text-teal-400 transition-colors">Marketing Automation</a></li>
|
||||
<li><a href="/ai-automation" class="text-gray-400 hover:text-teal-400 transition-colors">AI Automation</a></li>
|
||||
<li><a href="/tech-consult" class="text-gray-400 hover:text-teal-400 transition-colors">Tech Consult</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Contact -->
|
||||
<div>
|
||||
<h3 class="font-kanit font-semibold text-lg mb-6">ติดต่อ</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3 text-gray-400">
|
||||
<svg class="w-5 h-5 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</li>
|
||||
<li class="flex items-center gap-3 text-gray-400">
|
||||
<svg class="w-5 h-5 text-teal-400" 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"/>
|
||||
</svg>
|
||||
contact@moreminimore.com
|
||||
</li>
|
||||
<li class="flex items-start gap-3 text-gray-400">
|
||||
<svg class="w-5 h-5 text-teal-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Bar -->
|
||||
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="text-gray-500 text-sm">
|
||||
© 2024 บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.
|
||||
</p>
|
||||
<div class="flex gap-6 text-sm">
|
||||
<a href="/privacy-policy" class="text-gray-500 hover:text-teal-400 transition-colors">นโยบายความเป็นส่วนตัว</a>
|
||||
<a href="/terms-and-conditions" class="text-gray-500 hover:text-teal-400 transition-colors">ข้อกำหนดการใช้งาน</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Mobile Menu Script -->
|
||||
<script>
|
||||
const menuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
menuBtn?.addEventListener('click', () => {
|
||||
mobileMenu?.classList.toggle('hidden');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Prompt', sans-serif;
|
||||
}
|
||||
|
||||
.font-kanit {
|
||||
font-family: 'Kanit', sans-serif;
|
||||
}
|
||||
</style>
|
||||
294
src/pages/about-us.astro
Normal file
294
src/pages/about-us.astro
Normal file
@@ -0,0 +1,294 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "เกี่ยวกับเรา | บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ SEO AI Chatbot";
|
||||
const description = "บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot สำหรับ SMEs ไทย";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<!-- Schema.org Structured Data -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@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"
|
||||
}
|
||||
],
|
||||
"sameAs": [
|
||||
"https://www.facebook.com/moreminimore",
|
||||
"https://twitter.com/moreminimore",
|
||||
"https://www.linkedin.com/company/moreminimore"
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Teal Theme -->
|
||||
<section class="relative overflow-hidden min-h-[50vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-teal-300/10 rounded-full blur-2xl animate-float" style="animation-delay: 1.5s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Grid Pattern -->
|
||||
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-20">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
|
||||
เกี่ยวกับเรา
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
มอร์มินิมอร์ — พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Vision Section -->
|
||||
<section class="py-24 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<span class="inline-flex items-center gap-2 px-4 py-1 bg-teal-100 text-teal-700 rounded-full text-sm font-medium mb-4">
|
||||
<svg class="w-4 h-4" 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"/></svg>
|
||||
วิสัยทัศน์
|
||||
</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
|
||||
เติบโตไปด้วยกัน
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-3xl p-8 md:p-12 text-center">
|
||||
<p class="text-xl md:text-2xl text-gray-700 leading-relaxed">
|
||||
"เราเชื่อว่าความสำเร็จของลูกค้าคือความสำเร็จของเรา<br/>
|
||||
<span class="text-gray-900 font-bold">เมื่อธุรกิจของคุณเติบโต</span> เราก็เติบโตไปด้วยกัน"
|
||||
</p>
|
||||
<p class="text-gray-600 mt-6">
|
||||
ความสำเร็จที่แท้จริงไม่ใช่แค่ตัวเลข แต่คือการเห็นผลงานที่เกิดขึ้นจริงของลูกค้า
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<section class="py-24 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12 max-w-2xl mx-auto">
|
||||
<span class="inline-flex items-center gap-2 px-4 py-1 bg-teal-100 text-teal-700 rounded-full text-sm font-medium mb-4">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
|
||||
ค่านิยม
|
||||
</span>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
|
||||
สิ่งที่เรายึดมั่น
|
||||
</h2>
|
||||
<p class="text-gray-600">
|
||||
เรามุ่งเน้นที่ผลลัพธ์ที่จับต้องได้ ไม่ใช่แค่ตัวเลขบนหน้าจอ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
<!-- Value 1 -->
|
||||
<div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">เน้นผลงานจริง</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
เราวัดความสำเร็จจากยอดขายที่เพิ่มขึ้นของลูกค้า ไม่ใช่แค่คะแนน SEO หรือจำนวนการเข้าชม
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 2 -->
|
||||
<div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">เป็นพาร์ทเนอร์</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
เราไม่ได้มองลูกค้าเป็นแค่ผู้จ้าง แต่มองเป็นพาร์ทเนอร์ที่จะเติบโตไปด้วยกันในระยะยาว
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 3 -->
|
||||
<div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">คุ้มค่าที่สุด</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
ออกแบบโซลูชันให้เหมาะกับงบประมาณของคุณ เริ่มต้นง่าย ไม่ต้องลงทุนมาก
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 4 -->
|
||||
<div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">ทำงานเร็ว</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวันประงัน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 5 -->
|
||||
<div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
ไม่ทิ้งหลังขาย พร้อมสนับสนุนและปรับปรุงระบบให้ตลอดเวลา
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 6 -->
|
||||
<div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg class="w-8 h-8 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">โปร่งใส</h3>
|
||||
<p class="text-gray-600 text-sm">
|
||||
ราคาชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น รายงานผลตรง ชัดเจน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Image Section -->
|
||||
<section class="py-12 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="relative rounded-3xl shadow-2xl overflow-hidden">
|
||||
<img
|
||||
src="/images/hero/about-us-hero.jpg"
|
||||
alt="MoreminiMore Team - AI Technology Partner"
|
||||
class="w-full h-64 md:h-96 object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
|
||||
<p class="text-white text-lg md:text-xl font-medium">พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-24 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 text-gray-900">
|
||||
ทำไมเลือกเรา?
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="font-bold mb-2 text-gray-900">เน้นผลลัพธ์</h3>
|
||||
<p class="text-gray-600 text-sm">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="font-bold mb-2 text-gray-900">ราคาเหมาะสม</h3>
|
||||
<p class="text-gray-600 text-sm">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="font-bold mb-2 text-gray-900">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-gray-600 text-sm">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-xl flex items-center justify-center mb-4">
|
||||
<svg class="w-6 h-6 text-white" 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"/></svg>
|
||||
</div>
|
||||
<h3 class="font-bold mb-2 text-gray-900">ทำงานเร็ว</h3>
|
||||
<p class="text-gray-600 text-sm">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="py-20 bg-gradient-to-r from-teal-500 to-teal-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">
|
||||
พร้อมร่วมงานกับคุณแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-white/80 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-white text-teal-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 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-teal-800 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-700 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="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) translateX(0); }
|
||||
25% { transform: translateY(-30px) translateX(15px); }
|
||||
50% { transform: translateY(-20px) translateX(-15px); }
|
||||
75% { transform: translateY(-40px) translateX(10px); }
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
opacity: 0;
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-float { animation: float 4s ease-in-out infinite; }
|
||||
</style>
|
||||
613
src/pages/ai-automation.astro
Normal file
613
src/pages/ai-automation.astro
Normal file
@@ -0,0 +1,613 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "AI Automation | MoreminiMore - ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI";
|
||||
const description = "บริการ AI Automation สำหรับ SME ไทย ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
|
||||
<!-- Schema.org Structured Data -->
|
||||
<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"]
|
||||
})} />
|
||||
|
||||
<!-- BreadcrumbList Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"name": "หน้าแรก",
|
||||
"item": "https://www.moreminimore.com"
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "AI Automation",
|
||||
"item": "https://www.moreminimore.com/ai-automation"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- HowTo Schema for Process -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
"name": "ขั้นตอนการพัฒนา AI Automation",
|
||||
"description": "กระบวนการพัฒนาระบบ AI Automation ตั้งแต่วิเคราะห์จนถึงส่งมอบ",
|
||||
"step": [
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "วิเคราะห์",
|
||||
"text": "วิเคราะห์ระบบที่มีและความต้องการของธุรกิจ"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ออกแบบ",
|
||||
"text": "ออกแบบ Flow และระบบเชื่อมต่อที่เหมาะสม"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "พัฒนา",
|
||||
"text": "พัฒนาและเชื่อมต่อระบบทั้งหมดเข้าด้วยกัน"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ส่งมอบ",
|
||||
"text": "สอนการใช้งานและดูแลอย่างต่อเนื่อง"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- FAQPage Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "AI Automation ต่างจาก Marketing Automation อย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "AI Automation เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ด้านเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ใช้เวลาพัฒนานานเท่าไหร่?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น"
|
||||
}
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Teal Theme -->
|
||||
<section class="relative overflow-hidden min-h-[60vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-20">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Text Content -->
|
||||
<div class="text-center lg:text-left">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white">ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Headline -->
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
เชื่อมข้อมูล<br/>
|
||||
<span class="text-teal-200">วิเคราะห์ด้วย AI</span><br/>
|
||||
สร้างรายงานอัตโนมัติ
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline -->
|
||||
<p class="text-lg md:text-xl text-white/90 mb-10 max-w-xl mx-auto lg:mx-0 leading-relaxed">
|
||||
ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล<br/>
|
||||
สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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-teal-800/50 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
สอบถามรายละเอียด
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="mt-10 pt-6 border-t border-white/20">
|
||||
<div class="flex flex-wrap justify-center lg:justify-start gap-6 text-white/80 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" 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-green-300" 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-green-300" 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>
|
||||
|
||||
<!-- Hero Image -->
|
||||
<div class="hidden lg:block">
|
||||
<img
|
||||
src="/images/hero/ai-automation-hero.jpg"
|
||||
alt="ระบบ AI Automation สำหรับธุรกิจ - เชื่อมข้อมูลและวิเคราะห์ด้วย AI"
|
||||
class="w-full h-auto rounded-2xl shadow-2xl"
|
||||
loading="eager"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
บริการของเรา
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
AI Automation ครบวงจรสำหรับธุรกิจไทย
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Service 1: เขียนแอป AI เฉพาะ -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">เขียนแอป AI เฉพาะ</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• พัฒนา Application ตามความต้องการ</li>
|
||||
<li>• ระบบ AI เฉพาะทางธุรกิจ</li>
|
||||
<li>• รวม AI เข้ากับระบบเดิม</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Service 2: เชื่อมข้อมูลจากหลายแอป -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">เชื่อมข้อมูลหลายแอป</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• รวมข้อมูลจากทุกแพลตฟอร์ม</li>
|
||||
<li>• Sync ข้อมูลอัตโนมัติ</li>
|
||||
<li>• รวมศูนย์ข้อมูลองค์กร</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Service 3: วิเคราะห์ข้อมูล → รายงาน/แจ้งเตือน/ส่งต่อ -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">วิเคราะห์ → รายงาน</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• AI วิเคราะห์ข้อมูลอัจฉริยะ</li>
|
||||
<li>• สร้างรายงานอัตโนมัติ</li>
|
||||
<li>• แจ้งเตือนและส่งต่อข้อมูล</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Service 4: Chatbot ภายในองค์กร -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">Chatbot ภายในองค์กร</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ตอบคำถามพนักงาน 24/7</li>
|
||||
<li>• ค้นหาข้อมูลจากเอกสาร</li>
|
||||
<li>• ช่วยงานฝ่าย HR และ IT</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เรามีความเชี่ยวชาญในการเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI
|
||||
</p>
|
||||
|
||||
<!-- Supporting Illustration -->
|
||||
<div class="mb-16">
|
||||
<img
|
||||
src="/images/illustrations/ai-automation-1.jpg"
|
||||
alt="ภาพแสดงการทำงานของระบบ AI Automation - เชื่อมข้อมูลจากหลายแหล่งและวิเคราะห์ด้วย AI"
|
||||
class="w-full max-w-3xl mx-auto rounded-2xl shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Benefit 1: เชื่อมต่อทุกระบบ -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">เชื่อมต่อทุกระบบ</h3>
|
||||
<p class="text-gray-600">
|
||||
เชื่อมข้อมูลจากทุกแอปที่คุณใช้ ไม่ว่าจะเป็น ERP, CRM, ระบบบัญชี, POS หรือโปรแกรมอื่น ๆ เข้าด้วยกัน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 2: วิเคราะห์อัจฉริยะ -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">วิเคราะห์อัจฉริยะ</h3>
|
||||
<p class="text-gray-600">
|
||||
AI วิเคราะห์ข้อมูลทั้งหมดและหา insights ที่เป็นประโยชน์ต่อธุรกิจ พร้อมแนะนำวิธีปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 3: แจ้งเตือนอัตโนมัติ -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">แจ้งเตือนอัตโนมัติ</h3>
|
||||
<p class="text-gray-600">
|
||||
ระบบแจ้งเตือนอัตโนมัติเมื่อมีสิ่งสำคัญ เช่น ยอดขายต่ำกว่ากำหนด สินค้าใกล้หมด หรือต้องติดตามลูกค้า
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Target Audience -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
เหมาะกับใคร?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
ธุรกิจที่ต้องการเชื่อมข้อมูลและวิเคราะห์ด้วย AI
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<!-- SME -->
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 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="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจที่ต้องการรวมข้อมูลจากหลายแหล่งและใช้ AI วิเคราะห์</p>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise -->
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 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="text-lg font-bold text-gray-900 mb-2">บริษัท/โรงพยาบาล</h3>
|
||||
<p class="text-sm text-gray-600">องค์กรขนาดใหญ่ที่ต้องการรวมศูนย์ข้อมูลและวิเคราะห์อัจฉริยะ</p>
|
||||
</div>
|
||||
|
||||
<!-- Factory -->
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 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="text-lg font-bold text-gray-900 mb-2">โรงงาน/Logistics</h3>
|
||||
<p class="text-sm text-gray-600">องค์กรที่ต้องเชื่อมต่อระบบการผลิตและโลจิสติกส์</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies - 10 Detailed -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ตัวอย่างการใช้งาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กรณีศึกษาการใช้ AI Automation ในธุรกิจจริง
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<!-- Case 1: ร้านค้าออนไลน์ -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลจาก Shopee, Lazada, JD สร้างรายงานยอดขายรวม วิเคราะห์สินค้าขายดี แจ้งเตือนเมื่อสินค้าใกล้หมด พร้อม Chatbot ตอบคำถามลูกค้า</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 2: โรงพยาบาล -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">โรงพยาบาล/คลินิก</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล HIS, LIS, RIS วิเคราะห์ผลตรวจแลป สร้างรายงานสรุปสำหรับแพทย์ แจ้งเตือนผลผิดปกติ และนัดหมายซ้ำอัตโนมัติ</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 3: ร้านอาหาร/เชน -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">ร้านอาหาร/เชน</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล POS ทุกสาขา รวมยอดขายอัตโนมัติ วิเคราะห์ยอดขายแต่ละเมนู สั่งซื้อวัตถุดิบอัตโนมัติตามคลัง</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 4: บริษัทขนส่ง -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">บริษัทขนส่ง</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล Tracking, Fleet Management, Billing วิเคราะห์เส้นทางที่ดีที่สุด คำนวณค่าใช้จ่ายอัตโนมัติ แจ้งเตือนรถซ่อม</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 5: บริษัทประกัน -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">บริษัทประกัน</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลเคลม, การขาย, CRM วิเคราะห์ความเสี่ยง สร้างรายงานประจำเดือน แจ้งเตือนต่ออายุกรมชีนิ</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 6: โรงแรม -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">โรงแรม/รีสอร์ท</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล Booking, PMS, POS วิเคราะห์อัตราการเข้าพัก รายได้ต่อห้อง แจ้งเตือนรีวิวลบ และติดตามลูกค้า VIP</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 7: บริษัทก่อสร้าง -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">บริษัทก่อสร้าง</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลประมูลงาน, ค่าใช้จ่ายโครงการ, การจ่ายเงิน วิเคราะห์กำไรขาดทุนแต่ละโครงการ แจ้งเตือนการจ่ายเ<E0B8A2><E0B980><EFBFBD>ิ<EFBFBD><E0B8B4><EFBFBD></p>
|
||||
</div>
|
||||
|
||||
<!-- Case 8: สถาบันการศึกษา -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">สถาบันการศึกษา</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูลนักเรียน, ค่าเทอม, การเรียน วิเคราะห์อัตราการคงอยู่ สร้างรายงานผลการเรียน แจ้งเตือนนักเรียนหยุดเรียน</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 9: ธุรกิจอสังหาริมทรัพย์ -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">ธุรกิจอสังหาริมทรัพย์</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล Lead, การดูโปรเจกต์, การปิดการขาย วิเคราะห์ Lead Scoring แจ้งเตือนติดตามลูกค้า สร้างรายงานประจำเดือน</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 10: โรงงานผลิต -->
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<h3 class="font-bold text-gray-900 mb-2">โรงงานผลิต</h3>
|
||||
<p class="text-gray-600 text-sm">เชื่อมข้อมูล ERP, MES, QC วิเคราะห์ประสิทธิภาพการผลิต ตรวจสอบคุณภาพอัตโนมัติ แจ้งเตือนเมื่อเครื่องจักรผิดปกติ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กระบวนการทำงานที่ชัดเจน
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">วิเคราะห์ระบบที่มีและความต้องการ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ออกแบบ</h3>
|
||||
<p class="text-sm text-gray-600">ออกแบบ Flow และระบบเชื่อมต่อ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">พัฒนา</h3>
|
||||
<p class="text-sm text-gray-600">พัฒนาและเชื่อมต่อระบบ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ส่งมอบ</h3>
|
||||
<p class="text-sm text-gray-600">สอนการใช้งานและดูแลต่อเนื่อง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการ
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- FAQ 1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">AI Automation ต่างจาก Marketing Automation อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>AI Automation</strong> เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน<br/>
|
||||
<strong>Marketing Automation</strong> เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 2 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ใช้เวลาพัฒนานานเท่าไหร่?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่<E0B8B5><E0B988>ั<EFBFBD><E0B8B1>เจนตั้งแต่เริ่มต้น</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-4xl text-center">
|
||||
<h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Marketing Automation</a>
|
||||
<a href="/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">พัฒนาเว็บไซต์</a>
|
||||
<a href="/tech-consult" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Tech Consult</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section - Teal Gradient -->
|
||||
<section class="py-20 bg-gradient-to-r from-teal-500 to-teal-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
พร้อมเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-white/90">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบ AI Automation ที่ตอบโจทย์
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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="group bg-teal-800 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-900 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629"/>
|
||||
</svg>
|
||||
สอบถามรายละเอียด
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
148
src/pages/contact-us.astro
Normal file
148
src/pages/contact-us.astro
Normal file
@@ -0,0 +1,148 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "ติดต่อเรา | MoreMiniMore - รับทำเว็บไซต์ SEO AI Chatbot";
|
||||
---
|
||||
|
||||
<Layout title={title}>
|
||||
|
||||
<!-- Hero Section - Teal Theme -->
|
||||
<section class="relative overflow-hidden min-h-[40vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-16">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
ติดต่อเรา
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-white/90 max-w-2xl mx-auto">
|
||||
พร้อมให้คำปรึกษาและช่วยเหลือคุณ ติดต่อได้หลายช่องทาง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Methods - 2x2 Grid -->
|
||||
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
|
||||
<!-- Phone -->
|
||||
<a href="tel:0809955945" class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-teal-400 transition-colors">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800">โทรศัพท์</h3>
|
||||
<p class="text-2xl font-bold text-teal-600 mb-2">080-995-5945</p>
|
||||
<p class="text-sm text-gray-500">จันทร์-ศุกร์ 9:00-18:00 น.</p>
|
||||
</a>
|
||||
|
||||
<!-- LINE -->
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center border border-gray-100">
|
||||
<div class="w-16 h-16 bg-[#06C755] rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-[#05B548] transition-colors">
|
||||
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800">LINE</h3>
|
||||
<p class="text-lg font-bold text-[#06C755]">@moreminimore</p>
|
||||
<p class="text-sm text-gray-500 mt-2">คลิกเพื่อเพิ่มเพื่อน</p>
|
||||
</a>
|
||||
|
||||
<!-- Email -->
|
||||
<a href="mailto:contact@moreminimore.com" class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-teal-400 transition-colors">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-800">อีเมล</h3>
|
||||
<p class="text-lg font-bold text-teal-700">contact@moreminimore.com</p>
|
||||
<p class="text-sm text-gray-500 mt-2">ตอบกลับภายใน 24 ชม.</p>
|
||||
</a>
|
||||
|
||||
<!-- Facebook -->
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center border border-gray-100">
|
||||
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-blue-500 transition-colors">
|
||||
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-800">Facebook</h3>
|
||||
<p class="text-lg font-bold text-blue-700">moreminimore</p>
|
||||
<p class="text-sm text-gray-500 mt-2">Message ได้ตลอด 24 ชม.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Working Hours -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-2xl text-center">
|
||||
<div class="bg-gray-50 rounded-2xl p-8">
|
||||
<h2 class="text-2xl font-bold mb-6 text-gray-800">เวลาทำการ</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-200">
|
||||
<span class="text-gray-600">จันทร์ - ศุกร์</span>
|
||||
<span class="font-bold text-teal-600">09:00 - 18:00 น.</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-200">
|
||||
<span class="text-gray-600">เสาร์</span>
|
||||
<span class="font-bold text-teal-600">10:00 - 16:00 น.</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2">
|
||||
<span class="text-gray-600">อาทิตย์</span>
|
||||
<span class="font-bold text-gray-400">ปิดทำการ</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-6">* นอกเหนือเวลาทำการ สามารถติดต่อทาง LINE ได้ตลอด 24 ชั่วโมง</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20 bg-gradient-to-r from-teal-500 to-teal-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
พร้อมเริ่มต้นทำงานกับเราแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-white/90">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยเหลือคุณ
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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="group bg-teal-800 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
ติดต่อทาง LINE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
33% { transform: translateY(-20px) rotate(2deg); }
|
||||
66% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
173
src/pages/faq.astro
Normal file
173
src/pages/faq.astro
Normal file
@@ -0,0 +1,173 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot";
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
category: 'บริการ',
|
||||
questions: [
|
||||
{
|
||||
q: 'AI-Enhanced Website ต่างจากเว็บไซต์ทั่วไปอย่างไร?',
|
||||
a: 'AI-Enhanced Website จะผสาน AI Chatbot ที่ตอบคำถามลูกค้าอัตโนมัติ 24/7 พร้อมระบบ SEO ที่ช่วยให้เว็บติดอันดับ Google ได้ง่ายขึ้น และมีระบบวิเคราะห์พฤติกรรมผู้ใช้งานเพื่อปรับปรุงเว็บไซต์อย่างต่อเนื่อง'
|
||||
},
|
||||
{
|
||||
q: 'Marketing Automation ช่วยธุรกิจฉันได้อย่างไร?',
|
||||
a: 'ระบบจะช่วยให้คุณสื่อสารกับลูกค้าโดยอัตโนมัติ ผ่านหลายช่องทางเช่น LINE OA, Facebook Messenger, Email ช่วยลดงานซ้ำซ้อน เพิ่มการตอบสนองที่รวดเร็ว และติดตามผลการตลาดได้อย่างแม่นยำ'
|
||||
},
|
||||
{
|
||||
q: 'SEO + AI Content System ทำงานอย่างไร?',
|
||||
a: 'เราใช้ AI วิจัย Keyword ที่มีศักยภาพ สร้างคอนเทนต์คุณภาพที่ตรงใจกลุ่มเป้าหมาย และปรับแต่งให้ถูกใจ Google ช่วยให้เว็บติดอันดับการค้นหาอย่างยั่งยืน'
|
||||
},
|
||||
{
|
||||
q: 'Tech Consult จำเป็นสำหรับธุรกิจฉันไหม?',
|
||||
a: 'หากคุณกำลังวางแผนใช้เทคโนโลยีใหม่ ขยายระบบ หรือต้องการเลือกเครื่องมือที่เหมาะสมกับธุรกิจ การปรึกษาก่อนเริ่มโครงการจะช่วยประหยัดเวลาและงบประมาณได้มาก'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'กระบวนการทำงาน',
|
||||
questions: [
|
||||
{
|
||||
q: 'เริ่มต้นใช้บริการอย่างไร?',
|
||||
a: 'ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราจะพูดคุยความต้องการ ธุรกิจ และเป้าหมายของคุณ จากนั้นจึงแนะนำโซลูชันที่เหมาะสมที่สุด'
|
||||
},
|
||||
{
|
||||
q: 'ใช้เวลานานแค่ไหนถึงจะเห็นผล?',
|
||||
a: 'ขึ้นอยู่กับบริการ: เว็บไซต์ใช้เวลา 2-6 สัปดาห์, Marketing Automation เห็นผลใน 1-3 เดือน, SEO ใช้เวลา 3-6 เดือนในการติดอันดับ'
|
||||
},
|
||||
{
|
||||
q: 'มีบริการหลังการขายไหม?',
|
||||
a: 'มี! เราดูแลหลังการติดตั้ง อบรมการใช้งาน และพร้อมให้คำปรึกษาเมื่อคุณต้องการ'
|
||||
},
|
||||
{
|
||||
q: 'ต้องมีความรู้ทางเทคนิคไหม?',
|
||||
a: 'ไม่จำเป็น! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ และอบรมทีมของคุณให้ใช้งานระบบได้อย่างมั่นใจ'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'ราคาและการชำระเงิน',
|
||||
questions: [
|
||||
{
|
||||
q: 'มี Package ไหนบ้าง?',
|
||||
a: 'เรามีหลาย Package ตั้งแต่เริ่มต้นหลักพัน ไปจนถึงโครงการใหญ่ ขึ้นอยู่กับความต้องการและขอบเขตงาน นอกจากนี้ยังมีบริการที่คิดเป็นรายเดือน (ที่ปรึกษา) ที่จะช่วยพัฒนาระบบได้เรื่อย ๆ ไม่จำกัดด้วย โดยราคาจะขึ้นอยู่กับขอบเขตและความยากของงาน เหมาะสำหรับลูกค้าที่มีความต้องการเปลี่ยนแปลงตลอดเวลา'
|
||||
},
|
||||
{
|
||||
q: 'มีบริการแบบรายเดือนไหม?',
|
||||
a: 'มี! บริการบางอย่างเช่น SEO, Marketing Automation มีแบบรายเดือน ซึ่งรวมถึงการดูแลอย่างต่อเนื่องและปรับปรุงระบบ'
|
||||
},
|
||||
{
|
||||
q: 'ชำระเงินได้อย่างไร?',
|
||||
a: 'รับชำระเงินผ่านการโอนเงินธนาคาร บริษัทออกใบเสร็จและใบกำกับภาษีให้ได้'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'เทคนิคและการรองรับ',
|
||||
questions: [
|
||||
{
|
||||
q: 'เว็บไซต์รองรับมือถือไหม?',
|
||||
a: 'รองรับ 100%! ทุกเว็บไซต์ที่เราทำเป็น Responsive Design แสดงผลสวยงามทั้งบนมือถือ แท็บเล็ต และคอมพิวเตอร์'
|
||||
},
|
||||
{
|
||||
q: 'มี Warranty ไหม?',
|
||||
a: 'มี! เราให้ Warranty สำหรับ bug และ error ที่เกิดจากระบบของเรา ตลอดอายุสัญญา'
|
||||
},
|
||||
{
|
||||
q: 'ถ้ามีปัญหาต้องทำอย่างไร?',
|
||||
a: 'ติดต่อเราได้หลายช่องทาง: โทรศัพท์, LINE, Email เราจะตอบกลับภายใน 24 ชั่วโมงทำการ'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title={title}>
|
||||
|
||||
<!-- Hero Section - Teal Theme -->
|
||||
<section class="relative overflow-hidden min-h-[40vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-16">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
คำถามที่พบบ่อย
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-white/90 max-w-2xl mx-auto">
|
||||
รวบรวมคำถามที่ลูกค้าถามบ่อย พร้อมคำตอบที่ชัดเจน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Content Section -->
|
||||
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
{faqs.map((category) => (
|
||||
<div class="max-w-4xl mx-auto mb-12">
|
||||
<h2 class="text-2xl font-bold mb-6 text-teal-700 flex items-center gap-3">
|
||||
<span class="w-2 h-8 bg-teal-500 rounded-full"></span>
|
||||
{category.category}
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
{category.questions.map((faq) => (
|
||||
<details class="group bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300">
|
||||
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg text-gray-900 hover:bg-teal-50 transition">
|
||||
<span>{faq.q}</span>
|
||||
<svg class="w-5 h-5 text-teal-600 group-open:rotate-45 transition transform" 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>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-700 leading-relaxed border-t border-gray-100">
|
||||
{faq.a}
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="max-w-3xl mx-auto text-center mt-16 py-12 bg-gradient-to-r from-teal-500 to-teal-600 rounded-2xl">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4 text-white">
|
||||
ยังมีคำถามอื่นอีก?
|
||||
</h2>
|
||||
<p class="text-lg text-white/90 mb-8">
|
||||
ติดต่อเรามาได้เลย ยินดีให้คำปรึกษาฟรี!
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-colors inline-flex items-center justify-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
<a href="/contact-us" class="bg-teal-800 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-700 transition-colors inline-flex items-center justify-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
||||
</svg>
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
33% { transform: translateY(-20px) rotate(2deg); }
|
||||
66% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
603
src/pages/index.astro
Normal file
603
src/pages/index.astro
Normal file
@@ -0,0 +1,603 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const schemaData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "ProfessionalService",
|
||||
"name": "บริษัท มอร์มินิมอร์ จำกัด",
|
||||
"description": "รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ SMEs ไทย เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีที่ทันสมัย",
|
||||
"url": "https://www.moreminimore.com",
|
||||
"telephone": "0809955945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว",
|
||||
"addressLocality": "สมุทรสาคร",
|
||||
"postalCode": "74120",
|
||||
"addressCountry": "TH"
|
||||
},
|
||||
"priceRange": "฿฿",
|
||||
"areaServed": "Thailand",
|
||||
"sameAs": [
|
||||
"https://www.facebook.com/moreminimore",
|
||||
"https://twitter.com/moreminimore",
|
||||
"https://www.linkedin.com/company/moreminimore"
|
||||
]
|
||||
};
|
||||
---
|
||||
|
||||
<Layout title="รับทำเว็บไซต์ SEO AI Chatbot | MoreminiMore - โซลูชัน IT เพื่อ SMEs ไทย">
|
||||
<script type="application/ld+json" set:html={JSON.stringify(schemaData)} />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="relative min-h-[90vh] flex items-center overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-teal-600 via-teal-500 to-teal-700"></div>
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-300/20 rounded-full blur-3xl animate-float-delay-1"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-delay-2"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-20">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="reveal animate-fade-in-up inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-5 py-2 rounded-full mb-8">
|
||||
<span class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-white/90 text-sm font-medium">พร้อมช่วยธุรกิจคุณเติบโต</span>
|
||||
</div>
|
||||
|
||||
<h1 class="reveal stagger-1 text-4xl md:text-6xl lg:text-7xl font-bold mb-8 text-white leading-tight animate-fade-in-up">
|
||||
เปลี่ยนธุรกิจให้<br/>
|
||||
<span class="text-teal-200">เติบโตด้วย AI</span>
|
||||
</h1>
|
||||
|
||||
<p class="reveal stagger-2 text-lg md:text-xl text-white/80 mb-12 max-w-2xl mx-auto leading-relaxed animate-fade-in-up">
|
||||
รับทำเว็บไซต์ AI Chatbot และระบบอัตโนมัติทางการตลาด
|
||||
ที่ช่วยเพิ่มยอดขาย ลดต้นทุน ให้ธุรกิจ SMEs ไทย
|
||||
</p>
|
||||
|
||||
<div class="reveal stagger-3 flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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-teal-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-400 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-4 mt-16 pt-8 border-t border-white/10 animate-fade-in-up">
|
||||
<p class="text-sm text-white/50 mb-4">เชื่อถือได้</p>
|
||||
<div class="flex flex-wrap justify-center gap-8 text-white/70 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-teal-300" 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-5 h-5 text-teal-300" 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-5 h-5 text-teal-300" 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 class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="py-24 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="reveal text-center mb-16 max-w-2xl mx-auto">
|
||||
<span class="inline-block px-4 py-1.5 bg-teal-100 text-teal-700 rounded-full text-sm font-medium mb-4">
|
||||
บริการของเรา
|
||||
</span>
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
|
||||
โซลูชันครบวงจร<br/>สำหรับธุรกิจของคุณ
|
||||
</h2>
|
||||
<p class="text-gray-600 text-lg">
|
||||
เราช่วยคุณตั้งแต่เริ่มต้นจนถึงการเติบโต ด้วยเทคโนโลยีที่เหมาะกับงบประมาณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<a href="/web-development" class="reveal stagger-1 group bg-gray-50 rounded-3xl p-8 hover:bg-teal-600 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/20 transition-colors">
|
||||
<svg class="w-8 h-8 text-teal-600 group-hover:text-white" 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-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900 group-hover:text-white">AI-Enhanced Website</h3>
|
||||
<p class="text-gray-600 group-hover:text-white/80 mb-4">
|
||||
เว็บไซต์ที่มี AI Chatbot ตอบคำถามลูกค้า 24/7 พร้อมระบบ SEO ที่ติดอันดับ Google
|
||||
</p>
|
||||
<span class="text-sm font-medium text-teal-600 group-hover:text-white flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="/marketing-automation" class="reveal stagger-2 group bg-gray-50 rounded-3xl p-8 hover:bg-teal-600 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/20 transition-colors">
|
||||
<svg class="w-8 h-8 text-teal-600 group-hover:text-white" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900 group-hover:text-white">Marketing Automation</h3>
|
||||
<p class="text-gray-600 group-hover:text-white/80 mb-4">
|
||||
ระบบการตลาดอัตโนมัติ รวม SEO, LINE, Facebook, Email ลดงานซ้ำซ้อน
|
||||
</p>
|
||||
<span class="text-sm font-medium text-teal-600 group-hover:text-white flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="/ai-automation" class="reveal stagger-3 group bg-gray-50 rounded-3xl p-8 hover:bg-teal-600 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/20 transition-colors">
|
||||
<svg class="w-8 h-8 text-teal-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" 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="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900 group-hover:text-white">AI Automation</h3>
|
||||
<p class="text-gray-600 group-hover:text-white/80 mb-4">
|
||||
ระบบอัตโนมัติทุกอย่าง ตอบคำถาม ส่งข้อมูล บันทึกออร์เดอร์ 24/7
|
||||
</p>
|
||||
<span class="text-sm font-medium text-teal-600 group-hover:text-white flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="/tech-consult" class="reveal stagger-4 group bg-gray-50 rounded-3xl p-8 hover:bg-teal-600 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-white/20 transition-colors">
|
||||
<svg class="w-8 h-8 text-teal-600 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900 group-hover:text-white">Tech Consult</h3>
|
||||
<p class="text-gray-600 group-hover:text-white/80 mb-4">
|
||||
คำปรึกษาระบบ IT และ Cloud เลือกเครื่องมือที่เหมาะกับธุรกิจคุณ
|
||||
</p>
|
||||
<span class="text-sm font-medium text-teal-600 group-hover:text-white flex items-center gap-1">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="reveal stagger-5 bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl p-8 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-3 text-white">ไม่แน่ใจเลือกอะไร?</h3>
|
||||
<p class="text-gray-400 mb-6">
|
||||
ปรึกษาฟรี! เราพร้อมแนะนำโซลูชันที่เหมาะกับธุรกิจและงบประมาณของคุณ
|
||||
</p>
|
||||
</div>
|
||||
<a href="tel:0809955945" class="bg-teal-500 text-white px-6 py-3 rounded-full font-bold text-sm text-center hover:bg-teal-400 transition-colors">
|
||||
ปรึกษาฟรี
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section id="why-choose-us" class="py-24 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="reveal text-3xl md:text-4xl lg:text-5xl font-bold text-center mb-16 text-gray-900">
|
||||
ทำไมเลือกเรา?
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div class="reveal stagger-1 bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div class="w-14 h-14 bg-teal-100 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-teal-600" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-xl mb-3 text-gray-900">เน้นผลลัพธ์</h3>
|
||||
<p class="text-gray-600 leading-relaxed">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-2 bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div class="w-14 h-14 bg-teal-100 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-teal-600" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-xl mb-3 text-gray-900">ราคาเหมาะสม</h3>
|
||||
<p class="text-gray-600 leading-relaxed">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-3 bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div class="w-14 h-14 bg-teal-100 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-teal-600" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-xl mb-3 text-gray-900">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-gray-600 leading-relaxed">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-4 bg-white p-8 rounded-3xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100">
|
||||
<div class="w-14 h-14 bg-teal-100 rounded-2xl flex items-center justify-center mb-5">
|
||||
<svg class="w-7 h-7 text-teal-600" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-xl mb-3 text-gray-900">ทำงานเร็ว</h3>
|
||||
<p class="text-gray-600 leading-relaxed">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section id="process" class="py-24 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<span class="reveal inline-block px-4 py-1.5 bg-teal-100 text-teal-700 rounded-full text-sm font-medium mb-4">
|
||||
กระบวนการทำงาน
|
||||
</span>
|
||||
<h2 class="reveal stagger-1 text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
|
||||
เริ่มต้นง่ายๆ 4 ขั้นตอน
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="reveal stagger-1 flex gap-6 mb-8 group">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-teal-600 rounded-2xl flex items-center justify-center text-2xl font-bold text-white shadow-lg group-hover:scale-110 transition-transform">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 class="font-bold text-lg mb-2 text-gray-900">ปรึกษาฟรี</h3>
|
||||
<p class="text-gray-600 text-sm">พูดคุยกับเราฟรี! เราจะฟังความต้องการของคุณและแนะนำโซลูชันที่เหมาะสม</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-2 flex gap-6 mb-8 group">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-teal-600 rounded-2xl flex items-center justify-center text-2xl font-bold text-white shadow-lg group-hover:scale-110 transition-transform">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 class="font-bold text-lg mb-2 text-gray-900">วางแผนและเสนอราคา</h3>
|
||||
<p class="text-gray-600 text-sm">เราจะส่ง proposal พร้อมราคาและ timeline ที่ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-3 flex gap-6 mb-8 group">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-teal-600 rounded-2xl flex items-center justify-center text-2xl font-bold text-white shadow-lg group-hover:scale-110 transition-transform">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 class="font-bold text-lg mb-2 text-gray-900">พัฒนาและติดตั้ง</h3>
|
||||
<p class="text-gray-600 text-sm">ทีมงานเริ่มพัฒนาระบบให้คุณ พร้อมอัปเดตความคืบหน้าตลอด</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-4 flex gap-6 group">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 bg-teal-600 rounded-2xl flex items-center justify-center text-2xl font-bold text-white shadow-lg group-hover:scale-110 transition-transform">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||||
<h3 class="font-bold text-lg mb-2 text-gray-900">ส่งมอบและดูแลต่อเนื่อง</h3>
|
||||
<p class="text-gray-600 text-sm">ส่งมอบพร้อมอบรมการใช้งาน และดูแลหลังการขายให้ตลอด</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="cta" class="py-24 bg-gradient-to-br from-teal-600 to-teal-700">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="reveal text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-white">
|
||||
พร้อมเปลี่ยนธุรกิจแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="reveal stagger-1 text-white/80 mb-10 max-w-xl mx-auto text-lg">
|
||||
เริ่มต้นง่ายๆ แค่โทรหาหรือเพิ่ม LINE มาคุยกันก่อน ไม่มีค่าใช้จ่าย!
|
||||
</p>
|
||||
<div class="reveal stagger-2 flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 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-teal-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-400 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="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629"/>
|
||||
</svg>
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEO Content Section -->
|
||||
<section id="seo-content" class="py-24 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="reveal text-3xl md:text-4xl lg:text-5xl font-bold mb-8 text-center text-gray-900">
|
||||
บริการรับทำเว็บไซต์ SEO และ AI Chatbot เพื่อธุรกิจ SMEs
|
||||
</h2>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div class="reveal">
|
||||
<p class="text-gray-700 leading-relaxed text-lg">
|
||||
<strong class="text-gray-900">บริษัท มอร์มินิมอร์ จำกัด</strong> ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot ครบวงจร สำหรับธุรกิจ SMEs ทั่วประเทศ เราเข้าใจดีว่าในยุคดิจิทัลปัจจุบัน การมีเว็บไซต์ที่สวยงามอย่างเดียวไม่เพียงพอ แต่ต้องเป็นเว็บไซต์ที่สามารถเพิ่มยอดขายได้จริง ติดอันดับ Google และมีระบบอัตโนมัติที่ช่วยลดต้นทุนในการดำเนินงาน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-1">
|
||||
<h3 class="text-xl font-bold mt-8 mb-4 text-gray-900">ทำไมต้องเลือกบริการของเรา?</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
ด้วยประสบการณ์ในการพัฒนาระบบ IT และ AI ให้กับธุรกิจหลากหลายประเภท เราพร้อมมอบโซลูชันที่เหมาะสมกับงบประมาณและความต้องการของคุณ ไม่ว่าจะเป็นเว็บไซต์สำหรับร้านค้าออนไลน์ ระบบ Chatbot ตอบคำถามอัตโนมัติ หรือการทำ SEO ให้เว็ติดอันดับ Google เราดูแลครบทุกขั้นตอนตั้งแต่ต้นจนจบ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-2">
|
||||
<h3 class="text-xl font-bold mt-8 mb-4 text-gray-900">บริการรับทำเว็บไซต์ครบวงจร</h3>
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
ออกแบบ UI/UX ที่ใช้งานง่าย สวยงาม ทันสมัย
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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 ตั้งแต่โครงสร้างเว็บไซต์
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
Responsive Design แสดงผลสวยงามทุกอุปกรณ์
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
ระบบจัดการเนื้อหา (CMS) ใช้งานง่าย
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
ติดตั้ง SSL Certificate เพื่อความปลอดภัย
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
เชื่อมต่อ Google Analytics และ Search Console
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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 class="reveal stagger-3">
|
||||
<h3 class="text-xl font-bold mt-8 mb-4 text-gray-900">บริการทำ SEO ติดอันดับ Google</h3>
|
||||
<p class="text-gray-700 mb-4 leading-relaxed">
|
||||
การทำ SEO (Search Engine Optimization) คือกระบวนการปรับแต่งเว็บไซต์ให้ติดอันดับต้นๆ ของ Google เมื่อลูกค้าค้นหาด้วยคำค้นหาที่เกี่ยวข้องกับธุรกิจคุณ เราใช้กลยุทธ์ที่เน้นความยั่งยืน ไม่ใช้วิธีลัดที่เสี่ยงต่อการถูกลงโทษจาก Google
|
||||
</p>
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
วิจัย Keyword ที่มีศักยภาพและคู่แข่งไม่สูงเกินไป
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
ปรับแต่ง On-Page SEO (Title, Meta Description, Headings)
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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>
|
||||
สร้าง Backlinks จากแหล่งที่น่าเชื่อถือ
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" 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 class="reveal stagger-4">
|
||||
<h3 class="text-xl font-bold mt-8 mb-4 text-gray-900">AI Chatbot ตอบคำถามลูกค้า 24/7</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
Chatbot คือระบบตอบคำถามอัตโนมัติที่ทำงานตลอด 24 ชั่วโมง ไม่มีวันหยุด ช่วยคุณตอบคำถามลูกค้าได้ทันที แม้ในเวลาที่ร้านปิด ลดภาระงานของพนักงาน และเพิ่มโอกาสในการปิดการขาย เพราะลูกค้าได้รับคำตอบทันทีที่ต้องการ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-5">
|
||||
<h3 class="text-xl font-bold mt-8 mb-4 text-gray-900">Marketing Automation ลดงานซ้ำซ้อน</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
ระบบอัตโนมัติทางการตลาดช่วยให้คุณสื่อสารกับลูกค้าได้อย่างมีประสิทธิภาพโดยไม่ต้องทำด้วยตนเองทุกครั้ง เช่น การส่งอีเมลติดตามลูกค้าที่ทิ้งตะกร้าสินค้า การส่งโปรโมชั่นวันเกิด หรือการแจ้งเตือนเมื่อมีลูกค้าใหม่
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-6 bg-teal-50 rounded-2xl p-6 mt-8">
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-900">เริ่มต้นอย่างไร?</h3>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
หากคุณสนใจบริการของเรา สามารถติดต่อมาปรึกษาฟรี ไม่มีค่าใช้จ่าย เราพร้อมช่วยคุณวิเคราะห์ความต้องการและแนะนำโซลูชันที่เหมาะสมที่สุดกับธุรกิจและงบประมาณของคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="py-24 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-3xl">
|
||||
<h2 class="reveal text-3xl md:text-4xl lg:text-5xl font-bold text-center mb-12 text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<details class="reveal stagger-1 group bg-white rounded-2xl overflow-hidden">
|
||||
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-gray-900 hover:bg-gray-50 transition">
|
||||
<span>SMEs ขนาดเล็ก ใช้บริการของคุณได้ไหม?</span>
|
||||
<svg class="w-6 h-6 text-teal-600 group-open:rotate-45 transition-transform" 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"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-600 leading-relaxed">
|
||||
ได้แน่นอน! เราออกแบบบริการสำหรับ SMEs โดยเฉพาะ มีทั้ง Package เล็กสำหรับธุรกิจเริ่มต้น และโซลูชันใหญ่สำหรับธุรกิจที่กำลังขยาย
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="reveal stagger-2 group bg-white rounded-2xl overflow-hidden">
|
||||
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-gray-900 hover:bg-gray-50 transition">
|
||||
<span>ต้องใช้ความรู้ทางเทคนิคไหม?</span>
|
||||
<svg class="w-6 h-6 text-teal-600 group-open:rotate-45 transition-transform" 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"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-600 leading-relaxed">
|
||||
ไม่จำเป็น! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ และอบรมทีมของคุณให้ใช้งานระบบได้อย่างมั่นใจ
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="reveal stagger-3 group bg-white rounded-2xl overflow-hidden">
|
||||
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-gray-900 hover:bg-gray-50 transition">
|
||||
<span>ใช้เวลานานแค่ไหนถึงจะเห็นผล?</span>
|
||||
<svg class="w-6 h-6 text-teal-600 group-open:rotate-45 transition-transform" 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"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-600 leading-relaxed">
|
||||
ขึ้นอยู่กับบริการ: เว็บไซต์ใช้เวลา 2-6 สัปดาห์, Marketing Automation เห็นผลใน 1-3 เดือน, SEO ใช้เวลา 3-6 เดือนในการติดอันดับ
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="reveal stagger-4 group bg-white rounded-2xl overflow-hidden">
|
||||
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-gray-900 hover:bg-gray-50 transition">
|
||||
<span>มีบริการหลังการขายไหม?</span>
|
||||
<svg class="w-6 h-6 text-teal-600 group-open:rotate-45 transition-transform" 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"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-600 leading-relaxed">
|
||||
มี! เราดูแลหลังการติดตั้ง อบรมการใช้งาน และพร้อมให้คำปรึกษาเมื่อคุณต้องการ
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="reveal stagger-5 group bg-white rounded-2xl overflow-hidden">
|
||||
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-gray-900 hover:bg-gray-50 transition">
|
||||
<span>เริ่มต้นอย่างไร?</span>
|
||||
<svg class="w-6 h-6 text-teal-600 group-open:rotate-45 transition-transform" 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"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-600 leading-relaxed">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราจะพูดคุยความต้องการ และแนะนำโซลูชันที่เหมาะสมที่สุดสำหรับธุรกิจคุณ
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Final CTA -->
|
||||
<section id="final-cta" class="relative py-32 bg-gray-900 text-white overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-teal-600/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-72 h-72 bg-teal-400/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 text-center relative z-10">
|
||||
<div class="reveal max-w-3xl mx-auto">
|
||||
<span class="inline-block px-4 py-1.5 bg-teal-600/20 text-teal-300 rounded-full text-sm font-medium mb-6">
|
||||
เริ่มต้นวันนี้
|
||||
</span>
|
||||
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
พร้อมเปลี่ยน<br/><span class="text-teal-400">องค์กรด้วย AI</span> หรือยัง?
|
||||
</h2>
|
||||
<p class="text-gray-400 text-lg mb-12 max-w-xl mx-auto leading-relaxed">
|
||||
ปรึกษาผู้เชี่ยวชาญฟรี เราพร้อมช่วยคุณวางกลยุทธ์ AI ที่วัดผลได้
|
||||
</p>
|
||||
|
||||
<div class="reveal stagger-1 flex flex-col sm:flex-row gap-6 justify-center items-center">
|
||||
<a href="tel:0809955945" class="group bg-teal-500 text-white px-10 py-5 rounded-full font-bold text-xl hover:bg-teal-400 transition-all hover:scale-105 shadow-2xl shadow-teal-500/30 flex items-center justify-center gap-3 w-full sm:w-auto">
|
||||
<svg class="w-6 h-6" 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="group bg-white text-gray-900 px-10 py-5 rounded-full font-bold text-xl hover:bg-gray-100 transition-all hover:scale-105 shadow-2xl flex items-center justify-center gap-3 w-full sm:w-auto">
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629"/>
|
||||
</svg>
|
||||
เพิ่ม Line
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-2 mt-16 pt-8 border-t border-white/10">
|
||||
<div class="flex flex-wrap justify-center gap-8 text-gray-500 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-teal-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-5 h-5 text-teal-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-5 h-5 text-teal-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>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
const reveals = document.querySelectorAll('.reveal');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
reveals.forEach(el => observer.observe(el));
|
||||
</script>
|
||||
692
src/pages/marketing-automation.astro
Normal file
692
src/pages/marketing-automation.astro
Normal file
@@ -0,0 +1,692 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "ระบบ Marketing Automation | MoreminiMore - การตลาดอัตโนมัติ + GEO พร้อม AI วิเคราะห์";
|
||||
const description = "บริการ Marketing Automation สำหรับ SME ไทย การตลาดอัตโนมัติทุกช่องทาง Website, Social Media, Ads, Email พร้อม GEO รองรับ AI Search และ AI วิเคราะห์";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
|
||||
<!-- Schema.org Structured Data -->
|
||||
<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"]
|
||||
})} />
|
||||
|
||||
<!-- BreadcrumbList Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"name": "หน้าแรก",
|
||||
"item": "https://www.moreminimore.com"
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "Marketing Automation",
|
||||
"item": "https://www.moreminimore.com/marketing-automation"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- HowTo Schema for Process -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
"name": "ขั้นตอนการทำ Marketing Automation",
|
||||
"description": "กระบวนการทำ Marketing Automation ตั้งแต่วิเคราะห์จนถึงปรับปรุง",
|
||||
"step": [
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "วิเคราะห์",
|
||||
"text": "วิเคราะห์ธุรกิจและการตลาดของลูกค้า"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "วางแผน",
|
||||
"text": "วาง Content Plan และ Strategy การตลาด"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ตั้งค่า",
|
||||
"text": "ติดตั้งระบบ Automation ทุกช่องทาง"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "วิเคราะห์",
|
||||
"text": "AI วิเคราะห์ผลลัพธ์และปรับปรุงอย่างต่อเนื่อง"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- GEO FAQ Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Marketing Automation ต่างจาก AI Automation อย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "AI Automation เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม การประมวลผลข้อมูล Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ราคารวมค่าโฆษณาด้วยไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ด้านเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "AI วิเคราะห์อะไรบ้าง?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "AI วิเคราะห์พฤติกรรมลูกค้า หาช่องว่างทางการตลาด และนำวิธีปรับปรุง วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "GEO คืออะไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI"
|
||||
}
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Teal Theme -->
|
||||
<section class="relative overflow-hidden min-h-[60vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-20">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white/90">บริการ Marketing Automation ครบวงจร</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Headline -->
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
การตลาดอัตโนมัติ<br/>
|
||||
<span class="text-teal-200">ทุกช่องทาง</span><br/>
|
||||
พร้อม AI วิเคราะห์
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline -->
|
||||
<p class="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
ส่งข้อความอัตโนมัติ วิเคราะห์ข้อมูล SEO ติด Google<br/>
|
||||
ครอบคลุม Website, Social Media, Ads และ Email<br/>
|
||||
<span class="text-yellow-300 font-medium">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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-teal-800/50 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="mt-10 pt-6 border-t border-white/20">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white/80 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" 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-green-300" 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-green-300" 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>
|
||||
|
||||
<!-- What We Do -->
|
||||
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
เราทำอะไรบ้าง?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
การตลาดอัตโนมัติครบทุกช่องทาง พร้อม AI วิเคราะห์ให้คุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Website + SEO -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Website + SEO</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• สร้างบทความด้วย AI</li>
|
||||
<li>• SEO ติด Google อันดับ</li>
|
||||
<li>• วิเคราะห์คีย์เวิร์ด</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- GEO -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-purple-200">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">GEO</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• ปรากฏใน AI Search</li>
|
||||
<li>• ติด ChatGPT, Perplexity</li>
|
||||
<li>• Schema markup ครบ</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Social Media -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">Social Media</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• โพสต์ตาม Content Plan</li>
|
||||
<li>• Chatbot ตอบคำถาม</li>
|
||||
<li>• วิเคราะห์ Engagement</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Ads -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">โฆษณา</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• Google Ads</li>
|
||||
<li>• Facebook Ads</li>
|
||||
<li>• บริหารจัดการแทน</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">Email</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• สร้างอีเมล์ด้วย AI</li>
|
||||
<li>• ตอบกลับอัตโนมัติ</li>
|
||||
<li>• วิเคราะห์ผล</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เรามีความเชี่ยวชาญในการทำการตลาดอัตโนมัติให้ธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Benefit 1 -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">AI วิเคราะห์อัจฉริยะ</h3>
|
||||
<p class="text-gray-600">
|
||||
AI วิเคราะห์ข้อมูลและหาช่องว่างทางการตลาดให้คุณ พร้อมแนะนำวิธีปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 2 -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">อัตโนมัติครบวงจร</h3>
|
||||
<p class="text-gray-600">
|
||||
ระบบทำงานอัตโนมัติทุกช่องทาง ตั้งแต่ Website จนถึง Email ไม่ต้องทำเอง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 3 -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">วัดผลได้ชัดเจน</h3>
|
||||
<p class="text-gray-600">
|
||||
ดูผลการตลาดได้ตลอดเวลา รู้ว่าอะไรเวิร์ค อะไรไม่เวิร์ค พร้อมปรับปรุง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Target Audience -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
เหมาะกับใคร?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
ธุรกิจที่ต้องการเพิ่มประสิทธิภาพการตลาดด้วยระบบอัตโนมัติ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 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="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจท้องถิ่นที่ต้องการเพิ่มยอดขายและดูแลลูกค้าได้มากขึ้น</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" 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="text-lg font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจ E-commerce ที่ต้องการติดตามลูกค้าและเพิ่มยอดขายซ้ำ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 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="text-lg font-bold text-gray-900 mb-2">บริษัท / องค์กร</h3>
|
||||
<p class="text-sm text-gray-600">บริษัทที่ต้องการวิเคราะห์ข้อมูลและทำการตลาดอัตโนมัติ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ตัวอย่างการใช้งานจริง
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
AI วิเคราะห์และการตลาดอัตโนมัติให้ธุรกิจต่าง ๆ มากกว่า 50+ ราย
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" 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-gray-900">ร้านค้าออนไลน์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์พฤติกรรมลูกค้า + แนะนำสินค้าเฉพาะบุคคล + ติดตามตะกร้า</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" 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-gray-900">คลินิก/สถานพยาบาล</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ pattern คนไม่มานัด + ปรับปรุงการนัดหมาย + เตือนอัจฉริยะ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" 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-gray-900">ร้านอาหาร</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ความชอบลูกค้า + ส่งโปรโมชันตรงกลุ่ม + วิเคราะห์ยอดขาย</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" 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-gray-900">โรงเรียน/สถาบันการศึกษา</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ trend การสมัครเรียน + หาแคมเปญที่ได้ผล + ติดตามผู้ปกครอง</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">ธุรกิจบริการ</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ Customer Lifetime Value + ส่งข้อความตามความถี่ที่เหมาะสม</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" 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-gray-900">อสังหาริมทรัพย์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ Lead Scoring + ติดตามลูกค้าที่มีโอกาสซื้อสูง + ส่งข้อมูลตรงใจ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" 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-gray-900">Startup/SaaS</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์ User Behavior + ปรับ Onboarding ให้ตรงกลุ่ม + ลด churn rate</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">Agency/ที่ปรึกษา</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราาห์ผลแคมเปญ + แนะนำวิธีปรับปรุง + รายงานอัตโนมัติ</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">Healthcare/Wellness</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์การกลับมาใช้บริการ + ส่งข้อความกระตุ้นให้กลับมา</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
<h3 class="font-bold text-gray-900">E-learning</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">AI วิเคราะห์พฤติกรรมการเรียน + ส่งเนื้อหาที่ตรงความต้องการ + ติดตามความก้าวหน้า</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กระบวนการทำงานที่ชัดเจน
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">วิเคราะห์ธุรกิจและการตลาด</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วางแผน</h3>
|
||||
<p class="text-sm text-gray-600">วาง Content Plan และ Strategy</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ตั้งค่า</h3>
|
||||
<p class="text-sm text-gray-600">ติดตั้งระบบอัตโนมัติ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">AI วิเคราะห์และปรับปรุง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการ
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- FAQ 1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">Marketing Automation ต่างจาก AI Automation อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>AI Automation</strong> เน้นการทำ automation ภายในองค์กร เช่น ระบบตอบคำถาม, การประมวลผลข้อมูล<br/>
|
||||
<strong>Marketing Automation</strong> เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 2 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ราคารวมค่าโฆษณาด้วยไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ไม่รวมค่าโฆษณา ลูกค้าเป็นเจ้าของบัญชีโฆษณาเองและจ่ายค่าโฆษณาแยกต่างหาก เราเป็นเพียง Agency ที่เข้าไปบริหารจัดการให้</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลและดูผลลัพธ์</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">AI วิเคราะห์อะไรบ้าง?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>AI วิเคราะห์พฤติกรรมลูกค้า, หาช่องว่างทางการตลาด, และนำวิธีปรับปรุง, วิเคราะห์ผลแคมเปญ และอื่น ๆ ตามความเหมาะสม</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 5 - GEO -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-purple-100">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">GEO คืออะไร? ต่างจาก SEO อย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews<br/>
|
||||
<strong>SEO</strong> ทำให้ติด Google ปกติ<br/>
|
||||
<strong>GEO</strong> ทำให้ปรากฏในคำตอบของ AI<br/>
|
||||
เราทำทั้งสองอย่างคู่กัน — เนื้อหาที่เขียนดีด้วย AI จะได้ทั้ง Google และ AI Search</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-4xl text-center">
|
||||
<h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2 border border-gray-200">
|
||||
<svg class="w-5 h-5 text-purple-600" 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>
|
||||
AI Automation
|
||||
</a>
|
||||
<a href="/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2 border border-gray-200">
|
||||
<svg class="w-5 h-5 text-teal-600" 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>
|
||||
พัฒนาเว็บไซต์
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20 bg-gradient-to-r from-teal-500 to-teal-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
พร้อมเพิ่มประสิทธิภาพการตลาดแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-white/90">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบการตลาดอัตโนมัติที่ตอบโจทย์
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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="group bg-teal-800 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
33% { transform: translateY(-20px) rotate(2deg); }
|
||||
66% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
285
src/pages/portfolio.astro
Normal file
285
src/pages/portfolio.astro
Normal file
@@ -0,0 +1,285 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const portfolioItems = [
|
||||
{
|
||||
name: "Lungfinler",
|
||||
url: "https://lungfinler.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/lungfinler.png",
|
||||
description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
|
||||
services: ["Website", "Branding", "Graphic Design", "Product Photography"]
|
||||
},
|
||||
{
|
||||
name: "Jet Industries",
|
||||
url: "https://jetindustries.co.th",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/jetindustries.png",
|
||||
description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
|
||||
services: ["Website", "Industrial Manufacturing"]
|
||||
},
|
||||
{
|
||||
name: "สำนักงานกฎหมาย ตถาตา",
|
||||
url: "https://lawyernoom.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/lawyernoom.png",
|
||||
description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - ให้บริการด้านคดีความ คดีแพ่ง คดีอาญา คดียาเสพติด กฎหมายภาษีอากร และการประกันตัว",
|
||||
services: ["Website", "Legal Services", "Criminal Law", "Tax Law"]
|
||||
},
|
||||
{
|
||||
name: "Underdog Marketing",
|
||||
url: "https://underdog.run",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/underdog.png",
|
||||
description: "บล็อกการตลาดและการขายสไตล์ \"ลุยไม่ยั้ง\" โดย บุ้ง ดีดติ่งหู - ที่ปรึกษาการตลาดและการขาย มีบทความ VDO Clip และหลักสูตรอบรม",
|
||||
services: ["Website", "Content Marketing", "Training Courses"]
|
||||
},
|
||||
{
|
||||
name: "Baofuling Shop",
|
||||
url: "https://baofulingshop.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/baofuling.png",
|
||||
description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน - ครีมบัวหิมะ กอเอี๊ยะ น้ำมันชะมด ครีมไข่มุก และผลิตภัณฑ์ดูแลผิวพรรณ",
|
||||
services: ["E-commerce", "Beauty Products", "Skincare"]
|
||||
},
|
||||
{
|
||||
name: "เทรนเนอร์ซันนี่",
|
||||
url: "https://trainersunny.com",
|
||||
category: "webdev",
|
||||
thumbnail: "/images/portfolio/trainersunny.png",
|
||||
description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill - หลักสูตรฝึกอบรม การสื่อสาร ภาวะผู้นำ การทำงานเป็นทีม และการพัฒนาตนเอง",
|
||||
services: ["Website", "Corporate Training", "Soft Skill Development"]
|
||||
},
|
||||
{
|
||||
name: "เลือดจระเข้วานิไทย",
|
||||
url: "https://เลือดจระเข้วานิไทย.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/luadjob.png",
|
||||
description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ - ผลิตภัณฑ์เสริมอาหารเลือดจระเข้แคปซูล จากงานวิจัย ม.เกษตรศาสตร์ บำรุงเลือด ลดน้ำตาลในเลือด",
|
||||
services: ["E-commerce", "Health Supplements", "Crocodile Blood"]
|
||||
},
|
||||
{
|
||||
name: "ทวนทอง 99",
|
||||
url: "https://tuanthong99.com",
|
||||
category: "ecommerce",
|
||||
thumbnail: "/images/portfolio/tuanthong.png",
|
||||
description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง - ยาสตรี ยาขับลม ยาริดสีดวงทวาร ขมิ้นชัน กระชายขาว และผลิตภัณฑ์สุขภาพอื่นๆ",
|
||||
services: ["E-commerce", "Thai Herbal Medicine", "Health Products"]
|
||||
},
|
||||
{
|
||||
name: "Odoo Portal",
|
||||
url: "https://odooportal.com",
|
||||
category: "marketing",
|
||||
thumbnail: "/images/portfolio/odooportal.png",
|
||||
description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย - บริการติดตั้งและดูแลระบบ Odoo ERP สำหรับธุรกิจ",
|
||||
services: ["Odoo ERP", "System Implementation", "Technical Support"]
|
||||
}
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: 'ทั้งหมด', count: portfolioItems.length },
|
||||
{ id: 'webdev', name: 'พัฒนาเว็บไซต์', count: portfolioItems.filter(p => p.category === 'webdev').length },
|
||||
{ id: 'ecommerce', name: 'อีคอมเมิร์ซ', count: portfolioItems.filter(p => p.category === 'ecommerce').length },
|
||||
{ id: 'marketing', name: 'ที่ปรึกษาการตลาด', count: portfolioItems.filter(p => p.category === 'marketing').length }
|
||||
];
|
||||
---
|
||||
|
||||
<Layout title="ผลงานของเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="hero" class="relative overflow-hidden min-h-[50vh] flex items-center">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-teal-600 via-teal-500 to-teal-700"></div>
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-300/20 rounded-full blur-3xl animate-float-delay-1"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-delay-2"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-20">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
|
||||
ผลงานของเรา
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
|
||||
ผลงานพัฒนาเว็บไซต์และลูกค้าที่ไว้วางใจเรา
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Grid Section -->
|
||||
<section id="portfolio" class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
|
||||
<!-- Category Filter -->
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-12">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
class="filter-btn px-6 py-3 rounded-full font-medium transition-all duration-300"
|
||||
data-category={cat.id}
|
||||
>
|
||||
{cat.name} ({cat.count})
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Grid -->
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto" id="portfolio-grid">
|
||||
{portfolioItems.map((item, index) => (
|
||||
<article
|
||||
class="portfolio-card group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500"
|
||||
data-category={item.category}
|
||||
style={`animation-delay: ${index * 0.1}s`}
|
||||
>
|
||||
<div class="relative h-48 bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden">
|
||||
<img
|
||||
src={item.thumbnail}
|
||||
alt={item.name}
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-teal-600/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="bg-white text-teal-700 px-6 py-3 rounded-full font-bold transform scale-90 group-hover:scale-100 transition-transform duration-300"
|
||||
>
|
||||
เยี่ยมชมเว็บไซต์ →
|
||||
</a>
|
||||
</div>
|
||||
<span class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm text-gray-800 px-3 py-1 rounded-full text-sm font-semibold">
|
||||
{item.category === 'webdev' ? 'พัฒนาเว็บ' : item.category === 'ecommerce' ? 'อีคอมเมิร์ซ' : 'ที่ปรึกษาการตลาด'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-teal-600 transition-colors">
|
||||
{item.name}
|
||||
</h3>
|
||||
<p class="text-gray-700 text-sm mb-4 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{item.services.map((service) => (
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-md text-xs font-medium">
|
||||
{service}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="mt-4 inline-flex items-center text-teal-600 font-medium hover:text-teal-800 transition-colors"
|
||||
>
|
||||
เยี่ยมชมเว็บไซต์
|
||||
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="empty-state" class="hidden text-center py-16">
|
||||
<svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<h3 class="text-xl font-bold text-gray-800 mb-2">ไม่พบผลงานในหมวดหมู่นี้</h3>
|
||||
<p class="text-gray-600">ลองเลือกหมวดหมู่อื่นๆ ดูนะครับ</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="cta" class="py-20 bg-gradient-to-br from-teal-600 to-teal-700">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
อยากได้เว็บไซต์แบบนี้บ้าง?
|
||||
</h2>
|
||||
<p class="text-lg text-white/80 mb-8">
|
||||
ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/contact-us" class="bg-white text-gray-900 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10-10z"/>
|
||||
</svg>
|
||||
ปรึกษาฟรี
|
||||
</a>
|
||||
<a href="tel:0809955945" class="bg-teal-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-400 transition-colors inline-flex items-center justify-center">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
080-995-5945
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const portfolioCards = document.querySelectorAll('.portfolio-card');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const grid = document.getElementById('portfolio-grid');
|
||||
|
||||
filterBtns[0]?.classList.add('active');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const category = btn.getAttribute('data-category');
|
||||
|
||||
filterBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
let visibleCount = 0;
|
||||
portfolioCards.forEach(card => {
|
||||
const cardCategory = card.getAttribute('data-category');
|
||||
if (category === 'all' || cardCategory === category) {
|
||||
(card as HTMLElement).style.display = 'block';
|
||||
(card as HTMLElement).style.animation = 'fadeInUp 0.5s ease forwards';
|
||||
visibleCount++;
|
||||
} else {
|
||||
(card as HTMLElement).style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
if (visibleCount === 0 && emptyState) {
|
||||
emptyState.classList.remove('hidden');
|
||||
grid?.classList.add('hidden');
|
||||
} else {
|
||||
emptyState?.classList.add('hidden');
|
||||
grid?.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.filter-btn {
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: 2px solid #d1d5db;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
border-color: #0d9488;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #0d9488;
|
||||
color: white;
|
||||
border-color: #0d9488;
|
||||
}
|
||||
</style>
|
||||
209
src/pages/privacy-policy.astro
Normal file
209
src/pages/privacy-policy.astro
Normal file
@@ -0,0 +1,209 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "นโยบายความเป็นส่วนตัว | MoreminiMore";
|
||||
const description = "นโยบายความเป็นส่วนตัวตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 (PDPA)";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<section class="py-20 bg-gradient-to-br from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-12 text-teal-700">
|
||||
นโยบายความเป็นส่วนตัว
|
||||
</h1>
|
||||
|
||||
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
|
||||
<p class="text-gray-700 mb-8 text-base">
|
||||
<strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br/>
|
||||
<strong>ผู้ควบคุมข้อมูล:</strong> MoreminiMore Co.,Ltd.<br/>
|
||||
<strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว จ.สมุทรสาคร 74120<br/>
|
||||
<strong>มีผลบังคับใช้วันที่:</strong> 1 มีนาคม 2569<br/>
|
||||
<strong>แก้ไขล่าสุด:</strong> 1 เมษายน 2569
|
||||
</p>
|
||||
|
||||
<div class="bg-teal-50 rounded-lg p-6 mb-8 border border-teal-200">
|
||||
<h2 class="text-xl font-bold mb-4 text-teal-700">สารบัญ</h2>
|
||||
<nav class="space-y-2">
|
||||
<a href="#section-1" class="block text-gray-700 hover:text-teal-600 transition-colors">1. บทนำ</a>
|
||||
<a href="#section-2" class="block text-gray-700 hover:text-teal-600 transition-colors">2. ข้อมูลส่วนบุคคลที่เก็บรวบรวม</a>
|
||||
<a href="#section-3" class="block text-gray-700 hover:text-teal-600 transition-colors">3. วัตถุประสงค์ในการใช้ข้อมูล</a>
|
||||
<a href="#section-4" class="block text-gray-700 hover:text-teal-600 transition-colors">4. ฐานทางกฎหมายในการประมวลผลข้อมูล</a>
|
||||
<a href="#section-5" class="block text-gray-700 hover:text-teal-600 transition-colors">5. การเปิดเผยข้อมูลให้กับบุคคลที่สาม</a>
|
||||
<a href="#section-6" class="block text-gray-700 hover:text-teal-600 transition-colors">6. การเก็บรักษาข้อมูล</a>
|
||||
<a href="#section-7" class="block text-gray-700 hover:text-teal-600 transition-colors">7. สิทธิของท่าน</a>
|
||||
<a href="#section-8" class="block text-gray-700 hover:text-teal-600 transition-colors">8. Cookie และเทคโนโลยีการติดตาม</a>
|
||||
<a href="#section-9" class="block text-gray-700 hover:text-teal-600 transition-colors">9. ความปลอดภัยของข้อมูล</a>
|
||||
<a href="#section-10" class="block text-gray-700 hover:text-teal-600 transition-colors">10. การแจ้งเหตุละเมิดข้อมูล</a>
|
||||
<a href="#section-11" class="block text-gray-700 hover:text-teal-600 transition-colors">11. เด็กและเยาวชน</a>
|
||||
<a href="#section-12" class="block text-gray-700 hover:text-teal-600 transition-colors">12. การติดต่อ</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<h2 id="section-1" class="text-2xl font-bold mb-4 text-teal-700 mt-8">1. บทนำ</h2>
|
||||
<p class="mb-6 text-gray-600">
|
||||
บริษัท MoreminiMore Co.,Ltd. ("เรา", "ของเรา" หรือ "บริษัท") ให้คำมั่นสัญญาที่จะปกป้องข้อมูลส่วนบุคคลของผู้ใช้บริการ ("ผู้ใช้", "ของคุณ" หรือ "ท่าน") ที่ใช้งานเว็บไซต์ moreminimore.com ("เว็บไซต์") นโยบายความเป็นส่วนตัวฉบับนี้อธิบายถึงวิธีการเก็บรวบรวม ใช้ เปิดเผย และคุ้มครองข้อมูลส่วนบุคคลของท่าน
|
||||
</p>
|
||||
<p class="mb-6 text-gray-600">
|
||||
นโยบายนี้จัดทำขึ้นตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562 (PDPA) และกฎหมายที่เกี่ยวข้องของประเทศไทย
|
||||
</p>
|
||||
|
||||
<h2 id="section-2" class="text-2xl font-bold mb-4 text-teal-700 mt-8">2. ข้อมูลส่วนบุคคลที่เก็บรวบรวม</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">2.1 ข้อมูลที่ท่านให้โดยตรง</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราอาจเก็บรวบรวมข้อมูลส่วนบุคคลต่อไปนี้ที่ท่านให้โดยตรง:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ข้อมูลการติดต่อ:</strong> ชื่อและนามสกุล, ที่อยู่อีเมล, เบอร์โทรศัพท์, ที่อยู่สำหรับติดต่อ</li>
|
||||
<li><strong>ข้อมูลบัญชีผู้ใช้:</strong> ชื่อผู้ใช้ (Username), รหัสผ่าน (Password), ประวัติการใช้งาน</li>
|
||||
<li><strong>ข้อมูลการชำระเงิน:</strong> ข้อมูลบัตรเครดิต/เดบิต, ข้อมูลบัญชีธนาคาร, ประวัติการทำธุรกรรม</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">2.2 ข้อมูลที่เก็บรวบรวมโดยอัตโนมัติ</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เมื่อท่านใช้งานเว็บไซต์ เราอาจเก็บรวบรวมข้อมูลต่อไปนี้โดยอัตโนมัติ:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ข้อมูลอุปกรณ์:</strong> ประเภทของอุปกรณ์ (คอมพิวเตอร์, สมาร์ทโฟน, แท็บเล็ต), ระบบปฏิบัติการ, เบราว์เซอร์ที่ใช้, ที่อยู่ IP (ในรูปแบบ hashed)</li>
|
||||
<li><strong>ข้อมูลการใช้งาน:</strong> หน้าเว็บที่ท่านเข้าชม, เวลาและวันที่เข้าชม, ระยะเวลาการใช้งาน, ลิงก์ที่ท่านคลิก, ข้อมูล Cookie</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-3" class="text-2xl font-bold mb-4 text-teal-700 mt-8">3. วัตถุประสงค์ในการใช้ข้อมูล</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราใช้ข้อมูลส่วนบุคคลของท่านเพื่อวัตถุประสงค์ดังต่อไปนี้:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ให้บริการและบำรุงรักษาเว็บไซต์</li>
|
||||
<li>ประมวลผลคำขอและธุรกรรมของท่าน</li>
|
||||
<li>ส่งมอบสินค้าหรือบริการที่ท่านสั่งซื้อ</li>
|
||||
<li>จัดการบัญชีผู้ใช้ของท่าน</li>
|
||||
<li>ตอบกลับคำถามและข้อร้องเรียน</li>
|
||||
<li>ส่งข้อมูลเกี่ยวกับบริการของเรา</li>
|
||||
<li>แจ้งเตือนเกี่ยวกับการอัปเดตหรือการเปลี่ยนแปลง</li>
|
||||
<li>ส่งข่าวสารโปรโมชัน (หากท่านยินยอม)</li>
|
||||
<li>วิเคราะห์การใช้งานเว็บไซต์และปรับปรุงบริการ</li>
|
||||
<li>ระบุและป้องกันภัยคุกคามด้านความปลอดภัย</li>
|
||||
<li>ปฏิบัติตามข้อกำหนดทางกฎหมาย</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-4" class="text-2xl font-bold mb-4 text-teal-700 mt-8">4. ฐานทางกฎหมายในการประมวลผลข้อมูล</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราประมวลผลข้อมูลส่วนบุคคลของท่านบนฐานทางกฎหมายดังต่อไปนี้:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ความยินยอม (Consent):</strong> การส่งข่าวสารทางอีเมล, การใช้ Cookie สำหรับการตลาด</li>
|
||||
<li><strong>การปฏิบัติตามสัญญา (Contract):</strong> การประมวลผลการสั่งซื้อ, การให้บริการที่ท่านร้องขอ</li>
|
||||
<li><strong>หน้าที่ทางกฎหมาย (Legal Obligation):</strong> การเก็บรักษาบันทึกทางการเงิน, การรายงานต่อหน่วยงานราชการ</li>
|
||||
<li><strong>ผลประโยชน์โดยชอบด้วยกฎหมาย (Legitimate Interest):</strong> การป้องกันและตรวจสอบการฉ้อโกง, ความปลอดภัยของเครือข่าย</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-5" class="text-2xl font-bold mb-4 text-teal-700 mt-8">5. การเปิดเผยข้อมูลให้กับบุคคลที่สาม</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราไม่ขายหรือให้เช่าข้อมูลส่วนบุคคลของท่านให้กับบุคคลที่สาม อย่างไรก็ตาม เราอาจเปิดเผยข้อมูลของท่านในกรณีต่อไปนี้:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ผู้ให้บริการ:</strong> ผู้ให้บริการชำระเงิน, ผู้ให้บริการจัดส่ง, ผู้ให้บริการคลาวด์, ผู้ให้บริการอีเมล, ผู้ให้บริการวิเคราะห์ข้อมูล</li>
|
||||
<li><strong>หน่วยงานราชการ:</strong> ศาล, หน่วยงานบังคับใช้กฎหมาย, หน่วยงานกำกับดูแล, หน่วยงานภาษี</li>
|
||||
<li><strong>การโอนกิจการ:</strong> กรณีควบรวมกิจการหรือขายทรัพย์สิน</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-6" class="text-2xl font-bold mb-4 text-teal-700 mt-8">6. การเก็บรักษาข้อมูล</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราเก็บรักษาข้อมูลส่วนบุคคลของท่านไว้เฉพาะเท่าที่จำเป็น:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>ข้อมูลบัญชีผู้ใช้:</strong> เก็บรักษาตลอดระยะเวลาที่ท่านเป็นผู้ใช้บริการ และ 10 ปีหลังจากนั้น</li>
|
||||
<li><strong>ข้อมูลธุรกรรม:</strong> 10 ปี ตามข้อกำหนดของกฎหมายภาษี</li>
|
||||
<li><strong>ข้อมูลการติดต่อ:</strong> 10 ปีหลังจากการติดต่อล่าสุด</li>
|
||||
<li><strong>ข้อมูลการใช้งาน (Cookie):</strong> 26 เดือน (สำหรับ Umami Analytics)</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-7" class="text-2xl font-bold mb-4 text-teal-700 mt-8">7. สิทธิของท่าน</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
ภายใต้ PDPA ท่านมีสิทธิดังต่อไปนี้เกี่ยวกับข้อมูลส่วนบุคคลของท่าน:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>สิทธิในการเข้าถึง:</strong> ขอสำเนาข้อมูลส่วนบุคคล</li>
|
||||
<li><strong>สิทธิในการแก้ไข:</strong> ขอให้แก้ไขข้อมูลที่ไม่ถูกต้อง</li>
|
||||
<li><strong>สิทธิในการลบ:</strong> ขอให้ลบข้อมูลในกรณีที่ไม่จำเป็นต้องใช้แล้ว หรือถอนความยินยอม</li>
|
||||
<li><strong>สิทธิในการจำกัดการประมวลผล:</strong> ขอให้ระงับการใช้ข้อมูลชั่วคราว</li>
|
||||
<li><strong>สิทธิในการโอนย้ายข้อมูล:</strong> ขอให้โอนข้อมูลไปยังผู้ควบคุมข้อมูลอื่น</li>
|
||||
<li><strong>สิทธิในการคัดค้าน:</strong> คัดค้านการประมวลผลเพื่อประโยชน์โดยชอบด้วยกฎหมาย</li>
|
||||
<li><strong>สิทธิในการถอนความยินยอม:</strong> ถอนความยินยอมเมื่อใดก็ได้</li>
|
||||
<li><strong>สิทธิในการร้องเรียน:</strong> ร้องเรียนต่อสำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (สคส.)</li>
|
||||
</ul>
|
||||
<p class="mb-6 text-gray-600">
|
||||
ในการใช้สิทธิเหล่านี้ กรุณาติดต่อเราที่ <a href="mailto:contact@moreminimore.com" class="text-teal-600 hover:underline">contact@moreminimore.com</a>
|
||||
</p>
|
||||
|
||||
<h2 id="section-8" class="text-2xl font-bold mb-4 text-teal-700 mt-8">8. Cookie และเทคโนโลยีการติดตาม</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราใช้ Cookie และเทคโนโลยีการติดตามเพื่อปรับปรุงประสบการณ์การใช้งานของท่าน:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>Cookie ที่จำเป็น (Necessary):</strong> จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้</li>
|
||||
<li><strong>Cookie เพื่อประสิทธิภาพ (Performance):</strong> รวบรวมข้อมูลการใช้เว็บไซต์เพื่อปรับปรุง (ต้องได้รับความยินยอม)</li>
|
||||
<li><strong>Cookie เพื่อการทำงาน (Functional):</strong> จดจำการตั้งค่าของท่าน (ต้องได้รับความยินยอม)</li>
|
||||
<li><strong>Cookie เพื่อการตลาด (Marketing):</strong> ติดตามกิจกรรมการท่องเว็บเพื่อแสดงโฆษณาที่เกี่ยวข้อง (ต้องได้รับความยินยอม)</li>
|
||||
</ul>
|
||||
<p class="mb-6 text-gray-600">
|
||||
ท่านสามารถจัดการการตั้งค่า Cookie ได้ตลอดเวลาผ่านแบนเนอร์คุกกี้บนเว็บไซต์ของเรา
|
||||
</p>
|
||||
|
||||
<h2 id="section-9" class="text-2xl font-bold mb-4 text-teal-700 mt-8">9. ความปลอดภัยของข้อมูล</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราใช้มาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อปกป้องข้อมูลส่วนบุคคลของท่าน:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>การเข้ารหัส:</strong> ข้อมูลถูกเข้ารหัสระหว่างการส่ง (SSL/TLS)</li>
|
||||
<li><strong>การควบคุมการเข้าถึง:</strong> จำกัดการเข้าถึงข้อมูลเฉพาะผู้ที่จำเป็น</li>
|
||||
<li><strong>Firewall:</strong> ป้องกันการเข้าถึงโดยไม่ได้รับอนุญาต</li>
|
||||
<li><strong>การสำรองข้อมูล:</strong> สำรองข้อมูลเป็นประจำ</li>
|
||||
<li><strong>การตรวจสอบ:</strong> ทบทวนและปรับปรุงมาตรการความปลอดภัยอย่างสม่ำเสมอ</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-10" class="text-2xl font-bold mb-4 text-teal-700 mt-8">10. การแจ้งเหตุละเมิดข้อมูล</h2>
|
||||
<p class="mb-4 text-gray-600">
|
||||
ในกรณีที่มีการละเมิดข้อมูลส่วนบุคคล เราจะ:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>แจ้งสำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคลภายใน 72 ชั่วโมง</li>
|
||||
<li>แจ้งให้ท่านทราบหากมีความเสี่ยงสูงต่อสิทธิและเสรีภาพของท่าน</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-11" class="text-2xl font-bold mb-4 text-teal-700 mt-8">11. เด็กและเยาวชน</h2>
|
||||
<p class="mb-6 text-gray-600">
|
||||
เว็บไซต์ของเราไม่ได้ออกแบบมาสำหรับเด็กอายุต่ำกว่า 20 ปี หากท่านอายุต่ำกว่า 20 ปี กรุณาให้ผู้ปกครองอ่านและยินยอมแทน
|
||||
</p>
|
||||
|
||||
<h2 id="section-12" class="text-2xl font-bold mb-4 text-teal-700 mt-8">12. การติดต่อ</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">เจ้าหน้าที่คุ้มครองข้อมูลส่วนบุคคล (DPO)</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
<strong>อีเมล:</strong> <a href="mailto:contact@moreminimore.com" class="text-teal-600 hover:underline">contact@moreminimore.com</a><br/>
|
||||
<strong>โทรศัพท์:</strong> <a href="tel:0809955945" class="text-teal-600 hover:underline">080-995-5945</a><br/>
|
||||
<strong>Line:</strong> @539hdlul<br/>
|
||||
<strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว จ.สมุทรสาคร 74120
|
||||
</p>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">หน่วยงานกำกับดูแล</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
หากท่านไม่พอใจกับการตอบสนองของเรา ท่านสามารถติดต่อ:
|
||||
</p>
|
||||
<p class="mb-6 text-gray-600">
|
||||
<strong>สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล (สคส.)</strong><br/>
|
||||
ที่อยู่: 120 ถนนแจ้งวัฒนะ แขวงทุ่งสองห้อง เขตหลักสี่ กรุงเทพมหานคร 10210<br/>
|
||||
โทรศัพท์: 0-2141-6900<br/>
|
||||
อีเมล: ocppd@pdpc.or.th<br/>
|
||||
เว็บไซต์: <a href="https://www.pdpc.or.th" class="text-teal-600 hover:underline" target="_blank" rel="noopener">www.pdpc.or.th</a>
|
||||
</p>
|
||||
|
||||
<div class="mt-12 p-6 bg-teal-50 border-l-4 border-teal-500 rounded">
|
||||
<p class="text-gray-700 text-base">
|
||||
<strong>หมายเหตุ:</strong> เราอาจอัปเดตนโยบายความเป็นส่วนตัวนี้เป็นครั้งคราว การเปลี่ยนแปลงใดๆ จะถูกโพสต์บนหน้านี้พร้อมวันที่อัปเดตใหม่ เราขอแนะนำให้ท่านตรวจสอบหน้านี้เป็นระยะเพื่อรับทราบการเปลี่ยนแปลง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
647
src/pages/tech-consult.astro
Normal file
647
src/pages/tech-consult.astro
Normal file
@@ -0,0 +1,647 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Tech Consult | MoreminiMore - ที่ปรึกษา AI ครบวงจร"
|
||||
description="บริการที่ปรึกษา AI ครบวงจร สำหรับธุรกิจไทย ที่ปรึกษา Marketing Automation, AI Automation, AI Hardware และการรวมระบบ"
|
||||
>
|
||||
|
||||
<!-- Schema.org Structured Data -->
|
||||
<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"]
|
||||
})} />
|
||||
|
||||
<!-- BreadcrumbList Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"name": "หน้าแรก",
|
||||
"item": "https://www.moreminimore.com"
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "Tech Consult",
|
||||
"item": "https://www.moreminimore.com/tech-consult"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- HowTo Schema for Process -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
"name": "ขั้นตอนการให้คำปรึกษา AI",
|
||||
"description": "กระบวนการให้คำปรึกษา AI ตั้งแต่วิเคราะห์จนถึงดูแลต่อเนื่อง",
|
||||
"step": [
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "วิเคราะห์",
|
||||
"text": "วิเคราะห์ธุรกิจและความต้องการของลูกค้า"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "วางแผน",
|
||||
"text": "เสนอแนวทางและ Solution ที่เหมาะสม"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ดำเนินการ",
|
||||
"text": "Implementation ระบบที่เหมาะสม"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ดูแลต่อเนื่อง",
|
||||
"text": "Support และปรับปรุงอย่างต่อเนื่อง"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- FAQPage Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Tech Consult ต่างจากการซื้อ Software ทั่วไปอย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราให้คำปรึกษาแบบแนวทางการแก้ปัญหา ไม่ใช่แค่ขาย Software เราจะวิเคราะห์ธุรกิจของคุณก่อน จากนั้นจึงแนะนำ Solution ที่เหมาะสม ทั้ง Free Tools, Paid Software หรือ Custom Development"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "AI Hardware Consulting ช่วยอะไรได้บ้าง?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราช่วยแนะนำสเปค Server/GPU ที่เหมาะสมกับการใช้งาน AI ของคุณ, ช่วยเปรียบเทียบราคาและทางเลือก, ติดตั้งระบบ On-premise และดูแลและบำรุงรักษา ช่วยประหยัดค่าใช้จ่ายที่ไม่จำเป็น"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ด้านเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลธุรกิจและดูผลลัพธ์ เราจะอธิบายให้เข้าใจง่าย ไม่ใช้ศัพท์เทคนิคมากเกินไป"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ค่าใช้จ่ายในการปรึกษาเป็นอย่างไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราให้คำปรึกษาเบื้องต้นฟรี! สำหรับการปรึกษาเชิงลึกและ Implementation จะคิดตามความซับซ้อนของโปรเจกต์ เราจะแจ้งราคาก่อนเริ่มงานเสมอ ไม่มีค่าใช้จ่ายที่ซ่อนไว้"
|
||||
}
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Teal Theme -->
|
||||
<section class="relative overflow-hidden min-h-[60vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-20">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white/90">บริการที่ปรึกษา AI ครบวงจร</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Headline -->
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
ที่ปรึกษา AI<br/>
|
||||
<span class="text-teal-200">ครบวงจร</span><br/>
|
||||
สำหรับธุรกิจไทย
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline -->
|
||||
<p class="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
ที่ปรึกษาด้าน Marketing Automation, AI Automation<br/>
|
||||
และ AI Hardware สำหรับธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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-teal-800/50 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="mt-10 pt-6 border-t border-white/20">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white/80 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" 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-green-300" 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-green-300" 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 Section -->
|
||||
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
บริการของเรา
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
บริการที่ปรึกษา AI ครบวงจรสำหรับธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Marketing Automation -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">Marketing Automation</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<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-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">AI Automation</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<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-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">AI Hardware</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<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-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">รวมระบบ</h3>
|
||||
<ul class="text-gray-600 text-sm space-y-2">
|
||||
<li>• รวมระบบที่มีอยู่</li>
|
||||
<li>• เชื่อมต่อ API</li>
|
||||
<li>• สร้าง Workflow</li>
|
||||
<li>• ฝึกอบรมพนักงาน</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Supporting Illustration -->
|
||||
<section class="py-16 bg-gradient-to-r from-teal-500 to-teal-600">
|
||||
<div class="container mx-auto px-4 max-w-5xl">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4 text-white">
|
||||
พร้อมเปลี่ยนธุรกิจของคุณด้วย AI แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-white/80 mb-6 leading-relaxed">
|
||||
ทีมงานของเรามีประสบการณ์ให้คำปรึกษาธุรกิจหลากหลายประเภท ตั้งแต่ SME ไปจนถึงองค์กรขนาดใหญ่
|
||||
เราพร้อมช่วยวิเคราะห์และหา Solution ที่เหมาะสมกับงบประมาณและความต้องการของคุณ
|
||||
</p>
|
||||
<ul class="space-y-3 text-white/90">
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-teal-300 flex-shrink-0" 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-3">
|
||||
<svg class="w-5 h-5 text-teal-300 flex-shrink-0" 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>
|
||||
แนะนำ Solution ที่เหมาะสม
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-teal-300 flex-shrink-0" 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>
|
||||
ดูแลต่อเนื่องหลัง Implementation
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="/images/illustrations/tech-consult-1.jpg"
|
||||
alt="ภาพประกอบการให้คำปรึกษา AI สำหรับธุรกิจ - ทีมงานมืออาชีพวิเคราะห์และแก้ปัญหาธุรกิจ"
|
||||
class="w-full h-auto rounded-2xl shadow-xl"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เรามีความเชี่ยวชาญในการให้คำปรึกษา AI ให้ธุรกิจของคุณ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Benefit 1: ครบวงจร -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">ครบวงจร</h3>
|
||||
<p class="text-gray-600">
|
||||
ให้คำปรึกษาครบทุกด้าน ทั้ง marketing Automation, AI Automation และ Hardware คุณไม่ต้องไปหาหลายที่
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 2: ประหยัด -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">ประหยัด</h3>
|
||||
<p class="text-gray-600">
|
||||
ปรึกษาฟรีในเบื้องต้น แนะนำแนวทางที่เหมาะสมกับงบประมาณของคุณ ไม่ต้องซื้อของที่ไม่จำเป็น
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 3: ทำงานด้วยกัน -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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 mb-3 text-gray-900">ทำงานด้วยกัน</h3>
|
||||
<p class="text-gray-600">
|
||||
เราทำงานร่วมกับคุณตลอดกระบวนการ ตั้งแต่วางแผน จนถึง implementation และดูแลต่อเนื่อง
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ตัวอย่างการใช้งาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
ตัวอย่างการให้คำปรึกษา AI ให้ธุรกิจต่าง ๆ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<!-- Case 1 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" 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-gray-900">ร้านค้าออนไลน์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา Marketing Automation + AI Chatbot สำหรับตอบคำถามลูกค้าและแนะนำสินค้า</p>
|
||||
</div>
|
||||
<!-- Case 2 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" 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-gray-900">คลินิก/สถานพยาบาล</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI ระบบนัดหมายอัตโนมัติ + วิเคราะห์ข้อมูลผู้ป่วย + AI ตอบคำถามเบื้องต้น</p>
|
||||
</div>
|
||||
<!-- Case 3 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">ร้านอาหาร</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI Order System + Marketing Automation ส่งโปรโมชันตรงกลุ่มลูกค้า</p>
|
||||
</div>
|
||||
<!-- Case 4 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" 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>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">โรงเรียน/สถาบันการศึกษา</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI ระบบรับสมัครอัตโนมัติ + Chatbot ตอบคำถามผู้ปกครอง + วิเคราะห์ข้อมูล</p>
|
||||
</div>
|
||||
<!-- Case 5 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" 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>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">อสังหาริมทรัพย์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI Lead Scoring + Marketing Automation ติดตามลูกค้า + Chatbot สนทนา</p>
|
||||
</div>
|
||||
<!-- Case 6 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" 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-gray-900">โรงงาน/Manufacturing</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI Hardware สำหรับ Machine Learning + ระบบ Predictive Maintenance</p>
|
||||
</div>
|
||||
<!-- Case 7 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" 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>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Startup/SaaS</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI Integration + Marketing Automation + รวมระบบ API ต่าง ๆ</p>
|
||||
</div>
|
||||
<!-- Case 8 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" 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="font-bold text-gray-900">บริษัท/องค์กร</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI ภายในองค์กร + ระบบ Document Processing + AI Hardware Consulting</p>
|
||||
</div>
|
||||
<!-- Case 9 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">ธุรกิจรถยนต์</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ให้คำปรึกษา AI สำหรับการตลาด + Chatbot สอบถามข้อมูล + AI Hardware สำหรับวิเคราะห์ข้อมูล</p>
|
||||
</div>
|
||||
<!-- Case 10 -->
|
||||
<div class="bg-white rounded-xl p-6 shadow-md">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">ห้างสรรพสินค้า/ค้าปลีก</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">ที่ปรึกษา AI Analytics + Marketing Automation + ระบบแนะนำสินค้า personalize</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กระบวนการให้คำปรึกษาที่ชัดเจน
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
|
||||
<p class="text-sm text-gray-600">วิเคราะห์ธุรกิจและความต้องการ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">วางแผน</h3>
|
||||
<p class="text-sm text-gray-600">เสนอแนวทางและ Solution</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ดำเนินการ</h3>
|
||||
<p class="text-sm text-gray-600">Implementation ระบบที่เหมาะสม</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ดูแลต่อเนื่อง</h3>
|
||||
<p class="text-sm text-gray-600">Support และปรับปรุงต่อไป</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการที่ปรึกษา
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- FAQ 1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">Tech Consult ต่างจากการซื้อ Software ทั่วไปอย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราให้คำปรึกษาแบบ <strong>แนวทางการแก้ปัญหา</strong> ไม่ใช่แค่ขาย Software เราจะวิเคราะห์ธุรกิจของคุณก่อน จากนั้นจึงแนะนำ Solution ที่เหมาะสม ทั้ง Free Tools, Paid Software หรือ Custom Development</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 2 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">AI Hardware Consulting ช่วยอะไรได้บ้าง?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราช่วยแนะนำ<strong>สเปค Server/GPU</strong> ที่เหมาะสมกับการใช้งาน AI ของคุณ, ช่วยเปรียบเทียบราคาและทางเลือก, ติดตั้งระบบ On-premise และดูแลและบำรุงรักษา ช่วยประหยัดค่าใช้จ่ายที่ไม่จำเป็น</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ให้ข้อมูลธุรกิจและดูผลลัพธ์ เราจะอธิบายให้เข้าใจง่าย ไม่ใช้ศัพท์เทคนิคมากเกินไป</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ค่าใช้จ่ายในการปรึกษาเป็นอย่างไร?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราให้คำปรึกษาเบื้องต้น<strong>ฟรี!</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-4xl text-center">
|
||||
<h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
|
||||
<svg class="w-4 h-4" 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>
|
||||
Marketing Automation
|
||||
</a>
|
||||
<a href="/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
|
||||
<svg class="w-4 h-4" 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>
|
||||
AI Automation
|
||||
</a>
|
||||
<a href="/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md flex items-center gap-2">
|
||||
<svg class="w-4 h-4" 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>
|
||||
พัฒนาเว็บไซต์
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section - Teal Gradient -->
|
||||
<section class="py-20 bg-gradient-to-r from-teal-500 to-teal-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
พร้อมเริ่มต้นใช้ AI ในธุรกิจแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-white/90">
|
||||
ติดต่อเราเพื่อปรึกษาฟรี! เราพร้อมช่วยคุณหา Solution ที่เหมาะสมกับธุรกิจ
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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="group bg-teal-800/50 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
33% { transform: translateY(-20px) rotate(2deg); }
|
||||
66% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
282
src/pages/terms-and-conditions.astro
Normal file
282
src/pages/terms-and-conditions.astro
Normal file
@@ -0,0 +1,282 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "ข้อกำหนดและเงื่อนไข | MoreminiMore";
|
||||
const description = "ข้อกำหนดและเงื่อนไขการใช้บริการของ MoreminiMore Co.,Ltd.";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<section class="py-20 bg-gradient-to-br from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-12 text-teal-700">
|
||||
ข้อกำหนดและเงื่อนไข
|
||||
</h1>
|
||||
|
||||
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
|
||||
<p class="text-gray-700 mb-8 text-base">
|
||||
<strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br/>
|
||||
<strong>เว็บไซต์:</strong> moreminimore.com<br/>
|
||||
<strong>ผู้ให้บริการ:</strong> MoreminiMore Co.,Ltd.<br/>
|
||||
<strong>มีผลบังคับใช้วันที่:</strong> 1 มีนาคม 2569<br/>
|
||||
<strong>แก้ไขล่าสุด:</strong> 1 เมษายน 2569
|
||||
</p>
|
||||
|
||||
<div class="bg-teal-50 rounded-lg p-6 mb-8 border border-teal-200">
|
||||
<h2 class="text-xl font-bold mb-4 text-teal-700">สารบัญ</h2>
|
||||
<nav class="space-y-2">
|
||||
<a href="#section-1" class="block text-gray-700 hover:text-teal-600 transition-colors">1. การยอมรับเงื่อนไข</a>
|
||||
<a href="#section-2" class="block text-gray-700 hover:text-teal-600 transition-colors">2. บริการของเรา</a>
|
||||
<a href="#section-3" class="block text-gray-700 hover:text-teal-600 transition-colors">3. บัญชีผู้ใช้</a>
|
||||
<a href="#section-4" class="block text-gray-700 hover:text-teal-600 transition-colors">4. ความเป็นเจ้าของทรัพย์สินทางปัญญา</a>
|
||||
<a href="#section-5" class="block text-gray-700 hover:text-teal-600 transition-colors">5. ข้อห้ามในการใช้งาน</a>
|
||||
<a href="#section-6" class="block text-gray-700 hover:text-teal-600 transition-colors">6. เนื้อหาที่ผู้ใช้ส่ง</a>
|
||||
<a href="#section-7" class="block text-gray-700 hover:text-teal-600 transition-colors">7. การชำระเงิน</a>
|
||||
<a href="#section-8" class="block text-gray-700 hover:text-teal-600 transition-colors">8. การปฏิเสธความรับผิดชอบ</a>
|
||||
<a href="#section-9" class="block text-gray-700 hover:text-teal-600 transition-colors">9. การชดเชย</a>
|
||||
<a href="#section-10" class="block text-gray-700 hover:text-teal-600 transition-colors">10. ความเป็นส่วนตัว</a>
|
||||
<a href="#section-11" class="block text-gray-700 hover:text-teal-600 transition-colors">11. การยุติบริการ</a>
|
||||
<a href="#section-12" class="block text-gray-700 hover:text-teal-600 transition-colors">12. กฎหมายที่ใช้บังคับ</a>
|
||||
<a href="#section-13" class="block text-gray-700 hover:text-teal-600 transition-colors">13. การติดต่อ</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<h2 id="section-1" class="text-2xl font-bold mb-4 text-teal-700 mt-8">1. การยอมรับเงื่อนไข</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">1.1 ข้อตกลง</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
ด้วยการเข้าถึงและใช้งานเว็บไซต์ moreminimore.com ("เว็บไซต์") ของบริษัท MoreminiMore Co.,Ltd. ("เรา", "ของเรา" หรือ "บริษัท") ท่าน ("ผู้ใช้", "ท่าน" หรือ "ของคุณ") ยอมรับและตกลงที่จะถูกผูกมัดด้วยข้อกำหนดและเงื่อนไขฉบับนี้ ("เงื่อนไข")
|
||||
</p>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">1.2 การแก้ไขเงื่อนไข</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์</li>
|
||||
<li>ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</li>
|
||||
<li>การใช้งานเว็บไซต์ต่อเนื่องแสดงว่าท่านยอมรับการแก้ไข</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">1.3 อายุขั้นต่ำ</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
ท่านต้องมีอายุไม่ต่ำกว่า 20 ปีบริบูรณ์เพื่อใช้งานเว็บไซต์ หากท่านอายุต่ำกว่า 20 ปี ท่านต้องได้รับความยินยอมจากผู้ปกครองและผู้ปกครองต้องตกลงที่จะผูกพันด้วยเงื่อนไขนี้
|
||||
</p>
|
||||
|
||||
<h2 id="section-2" class="text-2xl font-bold mb-4 text-teal-700 mt-8">2. บริการของเรา</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">2.1 คำอธิบายบริการ</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
MoreminiMore Co.,Ltd. ให้บริการดังต่อไปนี้:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>บริการพัฒนาเว็บไซต์และแอปพลิเคชัน</strong> - ออกแบบและพัฒนาเว็บไซต์, แอปพลิเคชัน, ระบบออนไลน์</li>
|
||||
<li><strong>บริการให้คำปรึกษาเกี่ยวกับเทคโนโลยี</strong> - ที่ปรึกษาด้าน AI, Marketing Automation, Tech Infrastructure</li>
|
||||
<li><strong>จำหน่ายหรือให้เช่าอุปกรณ์ไอที</strong> - อุปกรณ์คอมพิวเตอร์, ซอฟต์แวร์, อุปกรณ์เครือข่าย</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">2.2 การเปลี่ยนแปลงบริการ</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เราขอสงวนสิทธิในการ:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>เพิ่ม ลบ หรือแก้ไขฟีเจอร์ของบริการ</li>
|
||||
<li>ระงับหรือยุติบริการชั่วคราวหรือถาวร</li>
|
||||
<li>จำกัดการเข้าถึงบางส่วนหรือทั้งหมดของบริการ</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">2.3 ความพร้อมของบริการ</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
เราพยายามให้บริการอย่างต่อเนื่อง แต่เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด และไม่รับผิดชอบต่อ downtime ที่ไม่ได้ตั้งใจ เราขอสงวนสิทธิในการหยุดให้บริการโดยไม่แจ้งล่วงหน้า
|
||||
</p>
|
||||
|
||||
<h2 id="section-3" class="text-2xl font-bold mb-4 text-teal-700 mt-8">3. บัญชีผู้ใช้</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">3.1 การสร้างบัญชี</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เพื่อใช้งานบริการบางอย่าง ท่านอาจต้องสร้างบัญชีผู้ใช้:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ท่านต้องให้ข้อมูลที่ถูกต้อง ครบถ้วน และทันสมัย</li>
|
||||
<li>ท่านต้องรักษารหัสผ่านให้เป็นความลับ</li>
|
||||
<li>ท่านรับผิดชอบต่อทุกกิจกรรมที่เกิดขึ้นภายใต้บัญชีของท่าน</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">3.2 ข้อกำหนดของบัญชี</h3>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>หนึ่งคนต่อหนึ่งบัญชีเท่านั้น</li>
|
||||
<li>ห้ามแบ่งปันบัญชีกับผู้อื่น</li>
|
||||
<li>ห้ามใช้ชื่อบัญชีที่ผิดกฎหมายหรือละเมิดสิทธิผู้อื่น</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">3.3 การระงับและลบบัญชี</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
เราขอสงวนสิทธิในการระงับหรือลบบัญชีของท่านหากท่านละเมิดเงื่อนไขนี้ มีกิจกรรมที่น่าสงสัย หรือตามข้อกำหนดของกฎหมาย ท่านสามารถลบบัญชีได้เมื่อใดก็ได้โดยติดต่อเราที่ <a href="mailto:contact@moreminimore.com" class="text-teal-600 hover:underline">contact@moreminimore.com</a>
|
||||
</p>
|
||||
|
||||
<h2 id="section-4" class="text-2xl font-bold mb-4 text-teal-700 mt-8">4. ความเป็นเจ้าของทรัพย์สินทางปัญญา</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">4.1 สิทธิของเรา</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เว็บไซต์และเนื้อหาทั้งหมดเป็นทรัพย์สินของเราหรือผู้ให้ใบอนุญาต:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>เนื้อหา ข้อความ กราฟิก โลโก้</li>
|
||||
<li>ซอฟต์แวร์ โค้ด ฐานข้อมูล</li>
|
||||
<li>การออกแบบ เลย์เอาต์</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">4.2 เครื่องหมายการค้า</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
เครื่องหมายการค้า โลโก้ และชื่อบริการของเราเป็นเครื่องหมายการค้าของ MoreminiMore Co.,Ltd. ห้ามใช้โดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร
|
||||
</p>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">4.3 สิทธิของท่าน</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
ท่านยังคงเป็นเจ้าของเนื้อหาที่ท่านส่งมา แต่ท่านให้ใบอนุญาตแก่เราในการใช้เนื้อหานั้น ท่านรับประกันว่ามีสิทธิในการให้ใบอนุญาต
|
||||
</p>
|
||||
|
||||
<h2 id="section-5" class="text-2xl font-bold mb-4 text-teal-700 mt-8">5. ข้อห้ามในการใช้งาน</h2>
|
||||
|
||||
<p class="mb-4 text-gray-600">
|
||||
ท่านตกลงที่จะไม่:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ใช้เว็บไซต์เพื่อกิจกรรมที่ผิดกฎหมาย</li>
|
||||
<li>ละเมิดสิทธิทางปัญญาของผู้อื่น</li>
|
||||
<li>ละเมิดความเป็นส่วนตัวของผู้อื่น</li>
|
||||
<li>ส่งเนื้อหาที่ผิดกฎหมายหรือเป็นอันตราย</li>
|
||||
<li>เผยแพร่ไวรัส มัลแวร์ หรือโค้ดที่เป็นอันตราย</li>
|
||||
<li>พยายามเข้าถึงระบบโดยไม่ได้รับอนุญาต</li>
|
||||
<li>รบกวนหรือขัดขวางการทำงานของเว็บไซต์</li>
|
||||
<li>ส่งสแปมหรือข้อความเชิงพาณิชย์ที่ไม่พึงประสงค์</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-6" class="text-2xl font-bold mb-4 text-teal-700 mt-8">6. เนื้อหาที่ผู้ใช้ส่ง</h2>
|
||||
|
||||
<p class="mb-6 text-gray-600">
|
||||
โดยส่งเนื้อหาบนเว็บไซต์ ท่านให้ใบอนุญาตแก่เราในการใช้ ทำซ้ำ ดัดแปลง และเผยแพร่เนื้อหานั้น ท่านรับประกันว่ามีสิทธิในการส่งเนื้อหาและเนื้อหาไม่ละเมิดสิทธิของผู้อื่น
|
||||
</p>
|
||||
|
||||
<h2 id="section-7" class="text-2xl font-bold mb-4 text-teal-700 mt-8">7. การชำระเงิน</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">7.1 ราคาและค่าธรรมเนียม</h3>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ราคาทั้งหมดแสดงเป็นเงินบาทไทย (THB)</li>
|
||||
<li>ราคายังไม่รวมภาษีมูลค่าเพิ่ม (VAT) หากมี</li>
|
||||
<li>เราขอสงวนสิทธิในการเปลี่ยนราคาเมื่อใดก็ได้</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">7.2 วิธีการชำระเงิน</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เรายอมรับการชำระเงินผ่าน:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>โอนเงินผ่านธนาคาร</li>
|
||||
<li>บัตรเครดิต/เดบิต (ผ่าน payment gateway)</li>
|
||||
<li>QR Code / PromptPay</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">7.3 นโยบายการคืนเงิน</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
<strong>เนื่องจากบริการของเราเป็นบริการดิจิทัลและการให้คำปรึกษา การชำระเงินถือเป็นการสั่งซื้อที่สมบูรณ์แล้ว จึงไม่มีนโยบายการคืนเงิน</strong> กรุณาตรวจสอบรายละเอียดและขอบเขตบริการก่อนชำระเงินเสมอ หากมีข้อสงสัย กรุณาติดต่อเราก่อนสั่งซื้อ
|
||||
</p>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">7.4 การต่ออายุอัตโนมัติ</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
หากบริการมีการต่ออายุอัตโนมัติ ท่านจะได้รับแจ้งก่อนการต่ออายุ และสามารถยกเลิกได้เมื่อใดก็ได้ก่อนวันต่ออายุ
|
||||
</p>
|
||||
|
||||
<h2 id="section-8" class="text-2xl font-bold mb-4 text-teal-700 mt-8">8. การปฏิเสธความรับผิดชอบ</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">8.1 "ตามที่เป็น"</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
บริการให้บริการ "ตามที่เป็น" และ "ตามที่มี" เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด ตรงตามความต้องการของท่าน หรือถูกต้องสมบูรณ์
|
||||
</p>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">8.2 การปฏิเสธความรับผิดชอบ</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
ภายใต้ขอบเขตที่กฎหมายอนุญาต เราปฏิเสธความรับผิดชอบต่อ:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>ความเสียหายโดยตรง ทางอ้อม โดยบังเอิญ หรือเชิงลงโทษ</li>
|
||||
<li>การสูญเสียข้อมูลหรือข้อมูล</li>
|
||||
<li>การหยุดชะงักของธุรกิจ</li>
|
||||
<li>ความเสียหายอื่นๆ</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">8.3 ข้อจำกัดความรับผิด</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
ความรับผิดรวมของเราจะไม่เกินจำนวนที่ท่านจ่ายให้เราในช่วง 12 เดือนที่ผ่านมา
|
||||
</p>
|
||||
|
||||
<h2 id="section-9" class="text-2xl font-bold mb-4 text-teal-700 mt-8">9. การชดเชย</h2>
|
||||
|
||||
<p class="mb-4 text-gray-600">
|
||||
ท่านตกลงที่จะชดใช้และปกป้องเราจาก:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>การเรียกร้อง ค่าเสียหาย ค่าใช้จ่ายที่เกิดจากการใช้งานเว็บไซต์ของท่าน</li>
|
||||
<li>ที่เกิดจากการละเมิดเงื่อนไขนี้</li>
|
||||
<li>ที่เกิดจากการละเมิดสิทธิของผู้อื่น</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="section-10" class="text-2xl font-bold mb-4 text-teal-700 mt-8">10. ความเป็นส่วนตัว</h2>
|
||||
|
||||
<p class="mb-4 text-gray-600">
|
||||
การใช้ข้อมูลส่วนบุคคลอยู่ภายใต้นโยบายความเป็นส่วนตัวของเรา ซึ่งเป็นส่วนหนึ่งของเงื่อนไขนี้ อ่านได้ที่ <a href="/privacy-policy" class="text-teal-600 hover:underline">นโยบายความเป็นส่วนตัว</a>
|
||||
</p>
|
||||
<p class="mb-6 text-gray-600">
|
||||
เราใช้ Cookie และเทคโนโลยีการติดตาม ท่านสามารถจัดการการตั้งค่า Cookie ได้ผ่านแบนเนอร์คุกกี้บนเว็บไซต์
|
||||
</p>
|
||||
|
||||
<h2 id="section-11" class="text-2xl font-bold mb-4 text-teal-700 mt-8">11. การยุติบริการ</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">11.1 การยุติโดยท่าน</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
ท่านสามารถยุติการใช้งานเว็บไซต์ได้เมื่อใดก็ได้โดยการหยุดใช้งานและลบบัญชีของท่าน
|
||||
</p>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">11.2 การยุติโดยเรา</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
เราขอสงวนสิทธิในการยุติการเข้าถึงของท่านโดยไม่แจ้งล่วงหน้า ด้วยเหตุผลใดๆ หรือไม่มีเหตุผล
|
||||
</p>
|
||||
|
||||
<h2 id="section-12" class="text-2xl font-bold mb-4 text-teal-700 mt-8">12. กฎหมายที่ใช้บังคับ</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">12.1 กฎหมายไทย</h3>
|
||||
<p class="mb-4 text-gray-600">
|
||||
เงื่อนไขนี้ถูกควบคุมและตีความตามกฎหมายแห่งราชอาณาจักรไทย:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li>พระราชบัญญัติคุ้มครองผู้บริโภค</li>
|
||||
<li>พระราชบัญญัติว่าด้วยการกระทำความผิดเกี่ยวกับคอมพิวเตอร์</li>
|
||||
<li>พระราชบัญญัติลิขสิทธิ์</li>
|
||||
<li>พระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3 text-gray-700">12.2 เขตอำนาจศาล</h3>
|
||||
<p class="mb-6 text-gray-600">
|
||||
ข้อพิพาทใดๆ อยู่ภายใต้เขตอำนาจศาลของศาลแพ่ง/ศาลล้มละลายกลาง กรุงเทพมหานคร หรือศาลที่มีเขตอำนาจในประเทศไทย
|
||||
</p>
|
||||
|
||||
<h2 id="section-13" class="text-2xl font-bold mb-4 text-teal-700 mt-8">13. การติดต่อ</h2>
|
||||
|
||||
<p class="mb-4 text-gray-600">
|
||||
หากท่านมีคำถามเกี่ยวกับเงื่อนไขนี้ กรุณาติดต่อเรา:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 text-gray-600 space-y-2">
|
||||
<li><strong>อีเมล:</strong> <a href="mailto:contact@moreminimore.com" class="text-teal-600 hover:underline">contact@moreminimore.com</a></li>
|
||||
<li><strong>โทรศัพท์:</strong> <a href="tel:0809955945" class="text-teal-600 hover:underline">080-995-5945</a></li>
|
||||
<li><strong>Line:</strong> @539hdlul</li>
|
||||
<li><strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว จ.สมุทรสาคร 74120</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-12 p-6 bg-teal-50 border-l-4 border-teal-500 rounded">
|
||||
<p class="text-gray-700 text-base">
|
||||
<strong>หมายเหตุ:</strong> ข้อกำหนดและเงื่อนไขนี้เป็นข้อตกลงทางกฎหมายระหว่างคุณกับบริษัท MoreminiMore Co.,Ltd. กรุณาอ่านอย่างละเอียดและเก็บไว้เป็นหลักฐาน หากมีข้อสงสัย กรุณาปรึกษาที่ปรึกษากฎหมาย
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
771
src/pages/web-development.astro
Normal file
771
src/pages/web-development.astro
Normal file
@@ -0,0 +1,771 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
|
||||
const title = "รับทำเว็บไซต์ | MoreMiniMore - พัฒนาเว็บไซต์ รองรับ AI + GEO สำหรับ SME ไทย";
|
||||
const description = "บริการรับทำเว็บไซต์ ราคาเริ่มต้น 10,000 บาท พร้อม Server จดโดเมน รองรับ AI ช่วยแก้ไขเนื้อหา + GEO ติด AI Search ทำเองได้ง่าย ไม่ต้องพึ่งเรา";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
|
||||
<!-- Schema.org Structured Data -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "MoreminiMore Co.,Ltd.",
|
||||
"description": "บริการรับทำเว็บไซต์สำหรับ SME ไทย",
|
||||
"telephone": "+66809955945",
|
||||
"email": "contact@moreminimore.com",
|
||||
"url": "https://www.moreminimore.com/web-development",
|
||||
"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": ["Web Development", "AI Integration", "SEO Optimization", "GEO Optimization", "Server Hosting"]
|
||||
})} />
|
||||
|
||||
<!-- BreadcrumbList Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
"itemListElement": [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 1,
|
||||
"name": "หน้าแรก",
|
||||
"item": "https://www.moreminimore.com"
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
"position": 2,
|
||||
"name": "รับทำเว็บไซต์",
|
||||
"item": "https://www.moreminimore.com/web-development"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- HowTo Schema for Process -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "HowTo",
|
||||
"name": "ขั้นตอนการพัฒนาเว็บไซต์",
|
||||
"description": "กระบวนการพัฒนาเว็บไซต์ตั้งแต่ปรึกษาจนถึงส่งมอบ",
|
||||
"step": [
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ปรึกษา",
|
||||
"text": "คุยรายละเอียดและวิเคราะห์ความต้องการของลูกค้า"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ออกแบบ",
|
||||
"text": "สร้าง Mockup ให้ดูก่อนพัฒนา"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "พัฒนา",
|
||||
"text": "เขียนโค้ดและติดตั้งระบบ"
|
||||
},
|
||||
{
|
||||
"@type": "HowToStep",
|
||||
"name": "ส่งมอบ",
|
||||
"text": "อบรมการใช้งานและส่งมอบเว็บไซต์พร้อมใช้งาน"
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- GEO FAQ Schema -->
|
||||
<script type="application/ld+json" set:html={JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "แก้ไขเว็บเองยากไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีผู้เข้าชมเกิน 100,000 คนต่อเดือน ค่าบริการ Server จะปรับเพิ่มขึ้น"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "Server ดูแลให้ไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ทำเว็บขายของ (E-commerce) ได้ไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "ต้องมีความรู้ทางเทคนิคไหม?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "GEO คืออะไร?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI นอกจากจะติด Google ปกติแล้ว ยังติด AI Search อีกด้วย"
|
||||
}
|
||||
}
|
||||
]
|
||||
})} />
|
||||
|
||||
<!-- Hero Section - Teal Theme -->
|
||||
<section class="relative overflow-hidden min-h-[60vh] flex items-center bg-gradient-to-br from-teal-500 via-teal-600 to-teal-700">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-400/20 rounded-full blur-3xl animate-float" style="animation-delay: 1s;"></div>
|
||||
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float" style="animation-delay: 2s;"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10 py-20">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
||||
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium text-white/90">บริการรับทำเว็บไซต์สำหรับ SME ไทย</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Headline -->
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
|
||||
สร้างเว็บไซต์<br/>
|
||||
<span class="text-teal-200">เปลี่ยนแปลงเองได้</span><br/>
|
||||
ด้วย AI
|
||||
</h1>
|
||||
|
||||
<!-- Subheadline -->
|
||||
<p class="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ๆ ไม่ต้องรอเราทุกครั้ง<br/>
|
||||
พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที<br/>
|
||||
<span class="text-yellow-300 font-medium">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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-teal-800/50 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<div class="mt-10 pt-6 border-t border-white/20">
|
||||
<div class="flex flex-wrap justify-center gap-6 text-white/80 text-sm">
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-green-300" 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-green-300" 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-green-300" 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>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ทำไมต้องเลือกเรา?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
เราสร้างเว็บไซต์ให้คุณสามารถจัดการเองได้ ไม่ต้องพึ่งเราทุกครั้ง
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Benefit 1 -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">แก้ไขเองได้ง่าย</h3>
|
||||
<p class="text-gray-600">
|
||||
ระบบหลังบ้านใช้งานง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเอง ไม่ต้องมีความรู้เทคนิค
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 2 -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" 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>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">AI ช่วยสร้างเนื้อหา</h3>
|
||||
<p class="text-gray-600">
|
||||
สั่ง AI ให้เขียนบทความ แก้ไขเนื้อหา เพิ่มสินค้าใหม่ ได้ทันที ไม่ต้องรอคนช่วย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 3 - GEO -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border-2 border-purple-200">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 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 mb-3 text-gray-900">GEO ติด AI Search</h3>
|
||||
<p class="text-gray-600">
|
||||
เว็บไซต์ถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews นอกจากติด Google ยังติด AI ด้วย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 4 -->
|
||||
<div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||||
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3 text-gray-900">Server คุณภาพสูง</h3>
|
||||
<p class="text-gray-600">
|
||||
เราดูแล Server ให้ เว็บไซต์โหลดเร็ว ปลอดภัย มีปัญหาน้อย ส่งผลดีต่อ SEO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What's Included -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
สิ่งที่ได้รับ
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
|
||||
ทุกเว็บไซต์มาพร้อมให้ครบ ไม่ต้องจ่ายเพิ่ม
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" 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>
|
||||
<h3 class="font-bold text-gray-900 mb-1">เว็บไซต์</h3>
|
||||
<p class="text-sm text-gray-600">พร้อมใช้งาน</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900 mb-1">SSL ฟรี</h3>
|
||||
<p class="text-sm text-gray-600">ปลอดภัยทุกการเข้าชม</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" 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>
|
||||
<h3 class="font-bold text-gray-900 mb-1">โดเมน</h3>
|
||||
<p class="text-sm text-gray-600">จดให้ได้เลย</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div class="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-white" 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="font-bold text-gray-900 mb-1">Analytics</h3>
|
||||
<p class="text-sm text-gray-600">ติดตามผู้เข้าชม</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Target Audience -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
เหมาะกับใคร?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
บริการของเราเหมาะสำหรับธุรกิจหลากหลายประเภท
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-6 text-center border border-teal-200">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 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="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 text-center border border-green-200">
|
||||
<div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" 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="text-lg font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
|
||||
<p class="text-sm text-gray-600">ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 text-center border border-blue-200">
|
||||
<div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 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="text-lg font-bold text-gray-900 mb-2">บริษัท / องค์กร</h3>
|
||||
<p class="text-sm text-gray-600">บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timeline -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ระยะเวลาในการพัฒนา
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
ขึ้นอยู่กับความซับซ้อนของงาน และสื่อที่ลูกค้าให้
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Astro Timeline -->
|
||||
<div class="bg-gradient-to-br from-teal-50 to-teal-100 rounded-2xl p-8 border border-teal-200">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-teal-600 to-teal-700 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Astro</h3>
|
||||
<p class="text-sm text-gray-600">เว็บไซต์ทั่วไป / Corporate / Blog</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-4xl font-bold text-teal-600">14-30</div>
|
||||
<div class="text-gray-600">วัน<br/><span class="text-sm">(ขึ้นอยู่กับความซับซ้อน)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WordPress Timeline -->
|
||||
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 border border-blue-200">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold">WP</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900">WordPress</h3>
|
||||
<p class="text-sm text-gray-600">เว็บขายของ / E-commerce</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-4xl font-bold text-blue-600">2-4</div>
|
||||
<div class="text-gray-600">เดือน<br/><span class="text-sm">(ขึ้นอยู่กับความซับซ้อน)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center text-gray-500 mt-6 text-sm">
|
||||
* ระยะเวลาอาจเปลี่ยนแปลงตามความพร้อมของเนื้อหาและสื่อที่ลูกค้าจัดเตรียมให้
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ราคาค่าบริการ
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น
|
||||
</p>
|
||||
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<div class="grid md:grid-cols-2 divide-x divide-gray-100">
|
||||
<!-- Development -->
|
||||
<div class="p-8">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-6">ค่าพัฒนาเว็บไซต์</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
||||
<span class="text-gray-600">เว็บไซต์ Astro (AI Ready)</span>
|
||||
<span class="font-bold text-teal-600">เริ่มต้น ฿10,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
||||
<span class="text-gray-600">เว็บไซต์ WordPress</span>
|
||||
<span class="font-bold text-teal-600">เริ่มต้น ฿15,000</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-3">
|
||||
<span class="text-gray-600">Landing Page</span>
|
||||
<span class="font-bold text-teal-600">เริ่มต้น ฿5,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server & Domain -->
|
||||
<div class="p-8">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-6">ค่าบริการต่อปี</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
||||
<span class="text-gray-600">Server Hosting</span>
|
||||
<span class="font-bold text-teal-600">฿5,000/ปี</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
||||
<span class="text-gray-600">Domain .com</span>
|
||||
<span class="font-bold text-teal-600">฿500/ปี</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-3">
|
||||
<span class="text-gray-600">Domain อื่น ๆ</span>
|
||||
<span class="font-bold text-teal-600">ตามราคาจด</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-teal-50 px-8 py-4 text-center">
|
||||
<p class="text-gray-700">
|
||||
<strong>รวม:</strong> เว็บไซต์ + Server 1 ปี + Domain .com = เริ่มต้น ฿15,500*
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mt-1">*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technology -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
เลือกระบบที่เหมาะกับคุณ
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
เรามีให้เลือก 2 ระบบ ตามความต้องการ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<!-- Astro -->
|
||||
<div class="border-2 border-gray-200 rounded-2xl p-8 hover:border-teal-500 hover:shadow-xl transition-all">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-teal-600 to-teal-700 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold">A</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Astro</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">เหมาะสำหรับ:</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">เว็บไซต์ทั่วไป / Corporate</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">เน้น AI และ SEO</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">โหลดเร็ว ประสิทธิภาพสูง</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">บล็อก / เว็บบริษัท</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- WordPress -->
|
||||
<div class="border-2 border-gray-200 rounded-2xl p-8 hover:border-teal-500 hover:shadow-xl transition-all">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold">WP</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">WordPress</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-4">เหมาะสำหรับ:</p>
|
||||
<ul class="space-y-2 mb-6">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">เว็บขายของ (E-commerce)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">เว็บไซต์ที่ซับซ้อน</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">มีระบบหลังบ้านซับซ้อน</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-teal-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<span class="text-gray-600">ต้องการ Plugin เยอะ</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
คำถามที่พบบ่อย
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
คำถามที่ลูกค้ามักถามเกี่ยวกับบริการเว็บไซต์ของเรา
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- FAQ 1 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">แก้ไขเว็บเองยากไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ไม่ยากเลย สำหรับ <strong>Astro</strong> การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน <strong>WordPress</strong> มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 2 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ค่าบริการ Server และโดเมนจะ<strong>ฟรีในปีแรก</strong> และจะมีค่าใช้จ่ายในปีถัดไป ทั้งนี้ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีความซับซ้อนสูง หรือมีผู้เข้าชมเกิน <strong>100,000 คนต่อเดือน</strong> ค่าบริการ Server จะปรับเพิ่มขึ้นเพื่อรองรับปริมาณการใช้งาน</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 3 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">Server ดูแลให้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>เราดูแลเรื่อง Server ให้คุณโดยครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ <strong>100,000 คนต่อเดือนขึ้นไป</strong> หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ทำเว็บขายของ (E-commerce) ได้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ทำได้แน่นอน เราใช้ <strong>WordPress</strong> เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 5 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">Server สามารถติดตั้งแอปอื่นเพิ่มเติมได้ไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p>ได้เลย หากลูกค้าใช้บริการ Server และจดทะเบียนโดเมนกับเรา สามารถให้เราติดตั้งแอปพิเศษเพิ่มเติมใน Server ได้ตามต้องการ ไม่จำกัดว่าต้องใช้กับเว็บไซต์เท่านั้น ซึ่งเป็น<strong>Value Added</strong> ที่ลูกค้าจะได้รับมากกว่าการใช้บริการจากเจ้าอื่น</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 6 -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">ต้องมีความรู้ทางเทคนิคไหม?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>ไม่จำเป็นเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 7 - GEO -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-purple-100">
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-6 cursor-pointer list-none">
|
||||
<span class="font-semibold text-gray-900">GEO คืออะไร? ทำไมต้องมี?</span>
|
||||
<span class="transition group-open:rotate-180">
|
||||
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="text-gray-600 px-6 pb-6">
|
||||
<p><strong>GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews<br/>
|
||||
<strong>ทำไมต้องมี?</strong> เพราะคนจำนวนมากเริ่มใช้ AI ค้นหาข้อมูลแทน Google ถ้าเว็บของคุณถูก AI อ้างอิง จะเป็นการโฆษณาฟรีที่มีประสิทธิภาพสูงมาก เราทำทั้ง SEO (ติด Google) และ GEO (ติด AI Search) คู่กัน</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
|
||||
ขั้นตอนการทำงาน
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
|
||||
กระบวนการทำงานที่ชัดเจน ส่งมอบตรงเวลา
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ปรึกษา</h3>
|
||||
<p class="text-sm text-gray-600">คุยรายละเอียด วิเคราะห์ความต้องการ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ออกแบบ</h3>
|
||||
<p class="text-sm text-gray-600">สร้าง Mockup ให้ดูก่อนพัฒนา</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">พัฒนา</h3>
|
||||
<p class="text-sm text-gray-600">เขียนโค้ด ติดตั้งระบบ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
|
||||
<h3 class="font-bold text-gray-900 mb-2">ส่งมอบ</h3>
|
||||
<p class="text-sm text-gray-600">อบรมการใช้งาน พร้อมใช้งาน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Link -->
|
||||
<section class="py-20 bg-gray-900">
|
||||
<div class="container mx-auto px-4 max-w-4xl text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">
|
||||
ดูผลงานของเรา
|
||||
</h2>
|
||||
<p class="text-lg text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||
ผลงานเว็บไซต์ที่เราได้ส่งมอบให้กับลูกค้าจริง คุณสามารถดูรายละเอียดและเข้าเยี่ยมชมเว็บไซต์ได้โดยตรง
|
||||
</p>
|
||||
<a href="/portfolio" class="inline-flex items-center gap-3 bg-teal-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-400 transition-all duration-300 hover:scale-105 shadow-2xl">
|
||||
<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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
ดูผลงานทั้งหมด
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20 bg-gradient-to-r from-teal-500 to-teal-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
|
||||
พร้อมสร้างเว็บไซต์แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-xl mb-8 max-w-2xl mx-auto text-white/90">
|
||||
ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างเว็บไซต์ที่ตอบโจทย์ธุรกิจ
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="tel:0809955945" class="group bg-white text-teal-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-50 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5 group-hover:animate-bounce" 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="group bg-teal-800 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-700 transition-all duration-300 hover:scale-105 shadow-2xl inline-flex items-center justify-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
สอบถามราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
33% { transform: translateY(-20px) rotate(2deg); }
|
||||
66% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
267
src/styles/global.css
Normal file
267
src/styles/global.css
Normal file
@@ -0,0 +1,267 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
border-color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: rgb(17 24 39);
|
||||
antialiased: yes;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
background-color: rgb(20 184 166);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: rgb(13 148 136);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: white;
|
||||
color: rgb(17 24 39);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 500;
|
||||
border: 2px solid rgb(226 232 240);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: rgb(20 184 166);
|
||||
color: rgb(20 184 166);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
}
|
||||
|
||||
.section-padding {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.section-padding {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.section-padding {
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container-padding {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container-padding {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container-padding {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
background-image: linear-gradient(to right, rgb(20 184 166), rgb(45 212 191));
|
||||
}
|
||||
|
||||
.bg-gradient-hero {
|
||||
background-image: linear-gradient(to bottom right, rgb(20 184 166), rgb(45 212 191), rgb(13 148 136));
|
||||
}
|
||||
}
|
||||
|
||||
/* Reveal Animations */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reveal-left {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.reveal-left.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.reveal-right {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.reveal-right.visible {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Stagger children */
|
||||
.stagger-1 { transition-delay: 0.1s; }
|
||||
.stagger-2 { transition-delay: 0.2s; }
|
||||
.stagger-3 { transition-delay: 0.3s; }
|
||||
.stagger-4 { transition-delay: 0.4s; }
|
||||
.stagger-5 { transition-delay: 0.5s; }
|
||||
.stagger-6 { transition-delay: 0.6s; }
|
||||
|
||||
/* Floating Animations */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-20px) translateX(10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) translateX(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-25px) translateX(5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-slow {
|
||||
animation: float-slow 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-float-delay-1 {
|
||||
animation: float 6s ease-in-out 1s infinite;
|
||||
}
|
||||
|
||||
.animate-float-delay-2 {
|
||||
animation: float 6s ease-in-out 2s infinite;
|
||||
}
|
||||
|
||||
/* Fade In Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fadeInDown 0.8s ease forwards;
|
||||
}
|
||||
|
||||
/* Pulse Animation */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(20, 184, 166, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(20, 184, 166, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Scroll Reveal Observer */
|
||||
.reveal-observer {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Line Clamp */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user