Add comprehensive Services overview page with package comparison
FEATURES: - Complete 3-service overview (Web Dev, AI Automation, AI Consult) - Detailed service descriptions from services.md - Package comparison table - Pricing information - Use cases for each service - Results/benefits sections - Multiple CTA sections COMPARISON TABLE: - Shows all 3 services side by side - Compares: ปรึกษาฟรี, จ่ายล่วงหน้า, เหมาะกับ, ราคา - Clear visual differentiation PRICING: - Web Dev: ฟรี! (จ่ายแค่ค่า Server/ปี) - AI Automation: เริ่มต้น 15,000 บาท - AI Consult: เริ่มต้น 5,000 บาท All sections include: - Hero with gradient background - Service icons and descriptions - Feature lists - CTA buttons to detail pages - Responsive design Build: 19 pages, 1.05s
This commit is contained in:
Kunthawat Greethong
251
src/pages/services.astro
Normal file
251
src/pages/services.astro
Normal file
@@ -0,0 +1,251 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="บริการของเรา | moreminimore — Web Development, AI Automation, AI Consult">
|
||||
<!-- Hero -->
|
||||
<section class="relative py-32 gradient-secondary text-white overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<img src="/images/hero/homepage-ai.png" alt="Our Services" class="w-full h-full object-cover" loading="eager" />
|
||||
</div>
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-8">บริการของเรา</h1>
|
||||
<p class="text-2xl text-gray-100 mb-10">3 โซลูชัน ครบทุกความต้องการด้าน IT ของธุรกิจคุณ<br />moreminimore มอบบริการ IT Solutions ที่ออกแบบมาเพื่อ SMEs โดยเฉพาะ</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="/contact-us" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">ปรึกษาฟรี</a>
|
||||
<a href="#comparison" class="bg-accent-green text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">เปรียบเทียบแพ็กเกจ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service 1: Web Development -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div class="text-7xl mb-6">🌐</div>
|
||||
<h2 class="text-4xl font-bold mb-6">Web Development</h2>
|
||||
<h3 class="text-2xl font-bold mb-6 text-secondary">รับทำเว็บไซต์ WordPress — ฟรี! จ่ายแค่ค่า Server รายปี</h3>
|
||||
<p class="text-lg text-gray-600 mb-8">เว็บไซต์คือหน้าร้านออนไลน์ของคุณ เราทำให้คุณมีเว็บคุณภาพในงบที่จ่ายได้</p>
|
||||
<a href="/website-development" class="btn-secondary text-xl">ดูรายละเอียด</a>
|
||||
</div>
|
||||
<div class="bg-gray-light p-8 rounded-2xl">
|
||||
<h4 class="text-2xl font-bold mb-6">สิ่งที่รวมในแพ็กเกจ</h4>
|
||||
<ul class="space-y-4 text-gray-700">
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> เว็บไซต์ WordPress มืออาชีพ</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ออกแบบ Responsive (รองรับทุกอุปกรณ์)</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> SEO-ready โครงสร้างพร้อมติด Google</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ความเร็วสูง โหลดเร็ว ไม่หลุดลูกค้า</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ปลอดภัย อัปเดตสม่ำเสมอ</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-primary">ฟรีค่าทำเว็บ</strong> — จ่ายเฉพาะค่า Server รายปี</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<h4 class="text-2xl font-bold mb-4">เหมาะสำหรับ</h4>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<span class="px-6 py-3 bg-gray-light rounded-full text-gray-700">ธุรกิจที่ยังไม่มีเว็บไซต์</span>
|
||||
<span class="px-6 py-3 bg-gray-light rounded-full text-gray-700">ธุรกิจที่มีเว็บเก่าล้าสมัย</span>
|
||||
<span class="px-6 py-3 bg-gray-light rounded-full text-gray-700">SMEs ที่ต้องการประหยัดงบทำเว็บ</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 bg-gradient-to-r from-primary to-yellow-200 p-8 rounded-2xl text-center">
|
||||
<h4 class="text-2xl font-bold mb-4">โมเดลราคา</h4>
|
||||
<div class="text-4xl font-bold text-secondary mb-2">ค่าทำเว็บ: ฟรี!</div>
|
||||
<div class="text-xl text-gray-700">ค่า Server: เริ่มต้น 2,900 บาท/ปี</div>
|
||||
<p class="text-sm text-gray-600 mt-4">*แล้วแต่แพ็กเกจ</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service 2: AI Automation -->
|
||||
<section class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div class="order-2 md:order-1">
|
||||
<div class="bg-white p-8 rounded-2xl shadow-lg">
|
||||
<h4 class="text-2xl font-bold mb-6">ผลลัพธ์ที่ลูกค้าได้รับ</h4>
|
||||
<ul class="space-y-4 text-gray-700">
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">⏱️</strong> ประหยัดเวลาทีม 30-50%</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">💰</strong> ลดต้นทุนดำเนินงาน</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">📈</strong> เพิ่มความพึงพอใจลูกค้า</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">😌</strong> ทีมมีเวลาโฟกัสงานสำคัญ</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 md:order-2">
|
||||
<div class="text-7xl mb-6">🤖</div>
|
||||
<h2 class="text-4xl font-bold mb-6">AI Automation Setup</h2>
|
||||
<h3 class="text-2xl font-bold mb-6 text-secondary">ตั้งค่าระบบอัตโนมัติ ลดงานซ้ำซ้อน ประหยัดเวลาทีม</h3>
|
||||
<p class="text-lg text-gray-600 mb-8">ให้ AI ทำงานซ้ำๆ แทนคุณ ทีมได้โฟกัสงานที่สร้างมูลค่า</p>
|
||||
<a href="/ai-automation" class="btn-secondary text-xl">ดูรายละเอียด</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12">
|
||||
<h4 class="text-2xl font-bold mb-6 text-center">ตัวอย่างระบบที่ทำได้</h4>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-white p-6 rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">📧</div>
|
||||
<h5 class="font-bold mb-2">Auto-respond Email</h5>
|
||||
<p class="text-gray-600 text-sm">ตอบอีเมลลูกค้าอัตโนมัติ</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">💬</div>
|
||||
<h5 class="font-bold mb-2">Chatbot</h5>
|
||||
<p class="text-gray-600 text-sm">ตอบคำถามอัตโนมัติ</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">📊</div>
|
||||
<h5 class="font-bold mb-2">รายงานอัตโนมัติ</h5>
|
||||
<p class="text-gray-600 text-sm">ดึงข้อมูล สร้างรายงาน</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">📅</div>
|
||||
<h5 class="font-bold mb-2">นัดหมาย</h5>
|
||||
<p class="text-gray-600 text-sm">Auto-booking</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">📝</div>
|
||||
<h5 class="font-bold mb-2">ย้ายข้อมูล</h5>
|
||||
<p class="text-gray-600 text-sm">กรอกฟอร์ม ย้ายข้อมูลข้ามระบบ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service 3: AI Consult -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div class="text-7xl mb-6">💡</div>
|
||||
<h2 class="text-4xl font-bold mb-6">AI Consult & Implementation</h2>
|
||||
<h3 class="text-2xl font-bold mb-6 text-secondary">ที่ปรึกษา AI ช่วยคุณนำเทคโนโลยีไปใช้จริง ได้ผลลัพธ์จับต้องได้</h3>
|
||||
<p class="text-lg text-gray-600 mb-8">AI ไม่ใช่แค่คำเทรนด์ แต่คือเครื่องมือที่สร้างผลลัพธ์ได้ ถ้าใช้ถูกวิธี</p>
|
||||
<a href="/ai-consult" class="btn-secondary text-xl">ดูรายละเอียด</a>
|
||||
</div>
|
||||
<div class="bg-gray-light p-8 rounded-2xl">
|
||||
<h4 class="text-2xl font-bold mb-6">บริการปรึกษา</h4>
|
||||
<ul class="space-y-4 text-gray-700">
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ประเมินความพร้อมธุรกิจคุณ</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> แนะนำ Use Cases ที่เหมาะสม</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> วางแผน Implementation เป็นขั้นตอน</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> คำนวณ ROI ที่คาดหวัง</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> เลือก Tools ที่คุ้มค่า</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12">
|
||||
<h4 class="text-2xl font-bold mb-6 text-center">บริการ Implementation</h4>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="bg-gray-light p-6 rounded-xl">
|
||||
<div class="text-4xl mb-4">⚙️</div>
|
||||
<h5 class="font-bold mb-2">ติดตั้งและตั้งค่า</h5>
|
||||
<p class="text-gray-600 text-sm">ติดตั้งระบบ AI และตั้งค่า</p>
|
||||
</div>
|
||||
<div class="bg-gray-light p-6 rounded-xl">
|
||||
<div class="text-4xl mb-4">🔗</div>
|
||||
<h5 class="font-bold mb-2">เชื่อมต่อกับระบบเดิม</h5>
|
||||
<p class="text-gray-600 text-sm">Integrate กับระบบที่มีอยู่</p>
|
||||
</div>
|
||||
<div class="bg-gray-light p-6 rounded-xl">
|
||||
<div class="text-4xl mb-4">📚</div>
|
||||
<h5 class="font-bold mb-2">อบรมทีมใช้งาน</h5>
|
||||
<p class="text-gray-600 text-sm">สอนทีม Support หลังติดตั้ง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 bg-secondary text-white p-8 rounded-2xl">
|
||||
<h4 class="text-2xl font-bold mb-6 text-center">ทำไมต้องที่ปรึกษา AI?</h4>
|
||||
<div class="grid md:grid-cols-4 gap-6 text-center">
|
||||
<div>
|
||||
<div class="text-4xl mb-4">🎯</div>
|
||||
<h5 class="font-bold mb-2">ไม่เสียเวลาทดลองผิดถูก</h5>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl mb-4">💡</div>
|
||||
<h5 class="font-bold mb-2">ได้โซลูชันที่เหมาะกับธุรกิจคุณ</h5>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl mb-4">📊</div>
|
||||
<h5 class="font-bold mb-2">วัดผลได้ชัดเจน</h5>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-4xl mb-4">💰</div>
|
||||
<h5 class="font-bold mb-2">คุ้มค่าการลงทุน</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Package Comparison -->
|
||||
<section id="comparison" class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">เปรียบเทียบแพ็กเกจ</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
<thead class="gradient-secondary text-white">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left text-lg">บริการ</th>
|
||||
<th class="px-6 py-4 text-center text-lg">Web Dev</th>
|
||||
<th class="px-6 py-4 text-center text-lg">AI Automation</th>
|
||||
<th class="px-6 py-4 text-center text-lg">AI Consult</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 font-bold">ปรึกษาฟรี</td>
|
||||
<td class="px-6 py-4 text-center text-2xl">✅</td>
|
||||
<td class="px-6 py-4 text-center text-2xl">✅</td>
|
||||
<td class="px-6 py-4 text-center text-2xl">✅</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 font-bold">จ่ายล่วงหน้า</td>
|
||||
<td class="px-6 py-4 text-center text-lg text-accent-green font-bold">❌ (ฟรี)</td>
|
||||
<td class="px-6 py-4 text-center text-lg text-red-500 font-bold">✅</td>
|
||||
<td class="px-6 py-4 text-center text-lg text-red-500 font-bold">✅</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 font-bold">เหมาะกับ</td>
|
||||
<td class="px-6 py-4 text-center text-sm">ทุกธุรกิจ</td>
|
||||
<td class="px-6 py-4 text-center text-sm">มีงานซ้ำซ้อน</td>
|
||||
<td class="px-6 py-4 text-center text-sm">ต้องการวางแผน AI</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 font-bold">เริ่มที่</td>
|
||||
<td class="px-6 py-4 text-center text-lg font-bold text-secondary">ค่า Server/ปี</td>
|
||||
<td class="px-6 py-4 text-center text-lg font-bold text-secondary">15,000 บาท</td>
|
||||
<td class="px-6 py-4 text-center text-lg font-bold text-secondary">5,000 บาท</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="text-center mt-8 text-gray-600 text-lg">
|
||||
<strong class="text-secondary">ต้องการมากกว่า 1 บริการ?</strong> ติดต่อเราสำหรับแพ็กเกจพิเศษ
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-20 gradient-cta text-white">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-4xl md:text-6xl font-bold mb-6">บริการไหนเหมาะกับคุณ?</h2>
|
||||
<p class="text-2xl text-gray-100 mb-10 max-w-3xl mx-auto">
|
||||
ไม่แน่ใจ? ปรึกษาฟรี เราช่วยวิเคราะห์และแนะนำโซลูชันที่เหมาะสม
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" class="bg-[#06C755] text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">💬 ทัก Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user