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

Complete redesign with ALL original services

Browse Source 
Fixes:
- Process section connector line overflow bug (z-index fix)
- Restored ALL 6 original services from moreminimore.com
- Changed 'Digital Transformation' to 'AI Transformation'
- Chatbot integrated into AI Automation (not separate)
- Migrated original service content to all pages
- Updated CSS with proper process-step positioning
- All text-base for better readability
- Hero images on all pages

Services:
1. ที่ปรึกษาองค์กร AI (was Digital Transformation)
2. ที่ปรึกษาการตลาดออนไลน์
3. บริการตลาดออนไลน์ครบวงจร
4. พัฒนาเว็บไซต์
5. พัฒนาแอปพลิเคชัน
6. ระบบแชทบอท AI (integrated)

Content migrated from original website with AI transformation theme.
This commit is contained in:
Kunthawat Greethong
2026-03-04 22:01:46 +07:00
parent c6b56b9e26
commit 6830a79bd9
7 changed files with 461 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/ai-automation.astro
View File

@@ -2,19 +2,19 @@
import Layout from '../layouts/Layout.astro'
---
<Layout title="AI Automation | MoreminiMore - Chatbot & Workflow">
<section class="relative py-24 gradient-primary text-white overflow-hidden">
<Layout title="AI Automation & Chatbot | MoreminiMore">
<section class="relative py-32 bg-gradient-primary text-white overflow-hidden">
<div class="absolute inset-0 opacity-20">
<div class="absolute top-20 right-10 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
<img src="/images/hero/chatbot-ai.png" alt="AI Chatbot" 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">
<div class="text-7xl mb-6">⚙️</div>
<h1 class="text-4xl md:text-6xl font-bold mb-8">AI Automation</h1>
<p class="text-2xl text-gray-100 mb-10">ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพด้วย Chatbot, RPA และ Workflow Automation</p>
<div class="text-8xl mb-6">🤖</div>
<h1 class="text-5xl md:text-7xl font-bold mb-8">ระบบแชทบอท AI & Automation</h1>
<p class="text-2xl text-gray-100 mb-10">บริการให้คำปรึกษาในการวางระบบแชทบอท โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง</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-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
<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 inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
</div>
</div>
</div>
@@ -22,33 +22,46 @@ import Layout from '../layouts/Layout.astro'
<section class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-5xl">
<h2 class="text-3xl font-bold mb-8 text-center text-secondary">บริการ AI Automation</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="glass p-6 rounded-2xl border border-gray-200 card-hover">
<div class="text-5xl mb-4">💬</div>
<h3 class="text-2xl font-bold mb-3">AI Chatbot</h3>
<p class="text-gray-600 mb-4">ตอบคำถามลูกค้าอัตโนมัติ 24/7 ลดงานบริการลูกค้า 40%</p>
<h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการระบบแชทบอท AI</h2>
<div class="prose prose-lg max-w-none">
<p class="text-xl text-gray-600 mb-8">
บริการให้คำปรึกษาในการวางระบบแชทบอท โดยการแนะนำแชทบอทที่เหมาะสมกับลูกค้า นอกจากนี้ เรายังมี Partner กับระบบบอทที่สามารถปิดการขายและชำระเงินได้ด้วยตัวเอง
</p>
<h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">สิ่งที่คุณจะได้รับ</h3>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>แชทบอทที่เหมาะสม:</strong> เลือก AI ที่เหมาะกับธุรกิจคุณ</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>ปิดการขายอัตโนมัติ:</strong> ระบบบอทที่ชำระเงินได้เอง</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>ประหยัดบุคลากร:</strong> ลดงานตอบคำถามซ้ำซ้อน</span>
</li>
</ul>
<div class="bg-gray-light p-8 rounded-2xl my-12">
<h3 class="text-2xl font-bold mb-4 text-accent-blue">เหมาะสำหรับ</h3>
<ul class="space-y-2 text-gray-700">
<li>• Facebook Messenger, LINE OA</li>
<li>• Website Chat Widget</li>
<li>• AI-powered Responses</li>
<li>• Handover to Human</li>
</ul>
</div>
<div class="glass p-6 rounded-2xl border border-gray-200 card-hover">
<div class="text-5xl mb-4">🔄</div>
<h3 class="text-2xl font-bold mb-3">Workflow Automation</h3>
<p class="text-gray-600 mb-4">อัตโนมัติกระบวนการทำงาน ลดเวลา ลดข้อผิดพลาด</p>
<ul class="space-y-2 text-gray-700">
<li>• Data Entry Automation</li>
<li>• Email Processing</li>
<li>• Document Generation</li>
<li>• Approval Workflow</li>
<li>• ธุรกิจที่ต้องการตอบคำถามลูกค้าอัตโนมัติ</li>
<li>• องค์กรที่ต้องการลดงานบริการลูกค้า</li>
<li>• ร้านค้าที่ต้องการปิดการขาย 24/7</li>
</ul>
</div>
</div>
<div class="text-center">
<a href="tel:0809955945" class="btn-accent text-lg shadow-xl inline-block">📞 ปรึกษาฟรี</a>
</div>
</section>
<section class="py-20 gradient-primary text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-6">สนใจบริการนี้?</h2>
<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-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">💬 เพิ่ม Line</a>
</div>
</div>
</section>

68
src/pages/ai-transformation-consult.astro Normal file
View File

@@ -0,0 +1,68 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ที่ปรึกษาองค์กร AI | MoreminiMore">
<section class="relative py-32 bg-gradient-ai text-white overflow-hidden">
<div class="absolute inset-0 opacity-20">
<img src="/images/hero/strategy-ai.png" alt="AI Transformation" 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">
<div class="text-8xl mb-6">🏢</div>
<h1 class="text-5xl md:text-7xl font-bold mb-8">ที่ปรึกษาองค์กร AI</h1>
<p class="text-2xl text-gray-100 mb-10">บริการให้คำปรึกษาในการ ปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น จนทำให้ได้ข้อมูลอย่างเป็นระบบ</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="bg-white text-accent-blue px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
</div>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-5xl">
<h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการให้คำปรึกษาองค์กร AI</h2>
<div class="prose prose-lg max-w-none">
<p class="text-xl text-gray-600 mb-8">
บริการให้คำปรึกษาในการ ปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น จนทำให้ได้ข้อมูลอย่างเป็นระบบ และนำมาใช้ประโยชน์ในการบริหารได้ บริการนี้ เหมาะสำหรับองค์กรที่ต้องการพัฒนาตัวเองให้ทันต่อยุคสมัย
</p>
<h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">สิ่งที่คุณจะได้รับ</h3>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>ระบบข้อมูลอย่างเป็นระบบ:</strong> จัดการข้อมูลองค์กรให้สามารถนำมาใช้ประโยชน์ได้</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>การใช้ AI ในการบริหาร:</strong> นำ AI มาช่วยในการตัดสินใจทางธุรกิจ</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>พัฒนาองค์กรให้ทันยุค:</strong> ปรับตัวให้ทันกับเทคโนโลยีที่เปลี่ยนไป</span>
</li>
</ul>
<div class="bg-gray-light p-8 rounded-2xl my-12">
<h3 class="text-2xl font-bold mb-4 text-accent-blue">เหมาะสำหรับ</h3>
<ul class="space-y-2 text-gray-700">
<li>• องค์กรที่ต้องการพัฒนาตัวเองให้ทันต่อยุคสมัย</li>
<li>• ธุรกิจที่ต้องการใช้ข้อมูลในการบริหาร</li>
<li>• องค์กรที่ต้องการนำ AI มาใช้</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-20 gradient-ai text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-6">สนใจบริการนี้?</h2>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="bg-white text-accent-blue 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-green-500 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>

59
src/pages/app-development.astro Normal file
View File

@@ -0,0 +1,59 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="พัฒนาแอปพลิเคชัน | MoreminiMore">
<section class="relative py-32 bg-gradient-to-br from-purple-50 to-pink-50 overflow-hidden">
<div class="absolute inset-0 opacity-20">
<img src="/images/hero/strategy-ai.png" alt="App" 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">
<div class="text-8xl mb-6">📲</div>
<h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary">พัฒนาแอปพลิเคชัน</h1>
<p class="text-2xl text-gray-600 mb-10">บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 080-995-5945</a>
<a href="https://line.me/" class="btn-secondary text-xl shadow-xl">💬 เพิ่ม Line</a>
</div>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-5xl">
<h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการพัฒนาแอปพลิเคชัน</h2>
<div class="prose prose-lg max-w-none">
<p class="text-xl text-gray-600 mb-8">
บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ รวมถึงการแก้ปัญหาเฉพาะด้าน เช่น ระบบการเชื่อมต่อยอดขายระหว่าง SAP กับเว็บไซต์ เป็นต้น
</p>
<h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">บริการของเรา</h3>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>Mobile App:</strong> ทำตลาดจากอุปกรณ์โมบาย</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>แก้ปัญหาเฉพาะ:</strong> เช่น เชื่อม SAP กับเว็บไซต์</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>iOS & Android:</strong> ครบทุกแพลตฟอร์ม</span>
</li>
</ul>
</div>
</div>
</section>
<section class="py-20 gradient-ai text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-6">สนใจบริการนี้?</h2>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="bg-white text-accent-blue 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-green-500 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>

475
src/pages/index.astro
View File

@@ -2,407 +2,194 @@
import Layout from '../layouts/Layout.astro'
---
<Layout title="ที่ปรึกษาองค์กร AI | MoreminiMore - เพิ่มยอดขายด้วย AI Transformation">
<Layout title="ที่ปรึกษาองค์กร AI | MoreminiMore">
<!-- Hero Section -->
<section class="relative py-24 gradient-hero overflow-hidden">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-20 left-10 w-72 h-72 bg-accent-blue rounded-full mix-blend-multiply filter blur-xl animate-float"></div>
<div class="absolute top-40 right-10 w-72 h-72 bg-accent-purple rounded-full mix-blend-multiply filter blur-xl animate-float-delayed"></div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-primary rounded-full mix-blend-multiply filter blur-xl animate-float"></div>
<section class="relative py-32 bg-gradient-to-br from-yellow-50 via-blue-50 to-purple-50 overflow-hidden">
<div class="absolute inset-0">
<img src="/images/hero/homepage-ai.png" alt="AI Transformation" class="w-full h-full object-cover opacity-10" loading="eager" />
<div class="absolute inset-0 bg-gradient-to-br from-yellow-50/80 via-blue-50/80 to-purple-50/80"></div>
</div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-5xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-8 text-secondary leading-tight">
เปลี่ยนองค์กรของคุณด้วย<br />
<span class="text-accent-blue">AI Transformation</span>
<h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary leading-tight">
เปลี่ยนองค์กรของคุณด้วย<br /><span class="text-accent-blue">AI Transformation</span>
</h1>
<p class="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto">
เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้ เราพร้อมพาคุณสู่ยุค AI อย่างมั่นใจ
<p class="text-2xl md:text-3xl text-gray-600 mb-10 max-w-3xl mx-auto">
เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้
</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="btn-accent text-lg shadow-xl">
📞 ปรึกษาผู้เชี่ยวชาญ
</a>
<a href="#services" class="btn-secondary text-lg shadow-xl">
ดูบริการของเรา
</a>
<a href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 ปรึกษาผู้เชี่ยวชาญ</a>
<a href="#services" class="btn-secondary text-xl shadow-xl">ดูบริการของเรา</a>
</div>
</div>
</div>
</section>
<!-- Tech Stack Section -->
<section class="py-20 bg-white">
<!-- Services Section - ALL Original Services -->
<section id="services" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
เทคโนโลยี AI ที่เรานำมาใช้
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
เราคัดสรรเทคโนโลยี AI ที่ดีที่สุดในโลก มาประยุกต์ใช้กับธุรกิจของคุณ
</p>
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">บริการของเรา</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">เพื่อตอบโจทย์ของลูกค้า</p>
</div>
<div class="grid md:grid-cols-3 lg:grid-cols-4 gap-8">
<!-- Tech 1 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">🤖</div>
<h3 class="text-xl font-bold mb-2">Machine Learning</h3>
<p class="text-gray-600 text-base">ทำนายแนวโน้ม วิเคราะห์ข้อมูลเชิงลึก</p>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1: AI Transformation (was Digital Transformation) -->
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 relative">
<img src="/images/hero/strategy-ai.png" alt="AI Transformation" class="w-full h-full object-cover" loading="lazy" />
<div class="absolute inset-0 gradient-ai opacity-90"></div>
<div class="absolute inset-0 flex items-center justify-center text-8xl">🏢</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">ที่ปรึกษาองค์กร AI</h3>
<p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการ ปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น จนทำให้ได้ข้อมูลอย่างเป็นระบบ และนำมาใช้ประโยชน์ในการบริหารได้</p>
<a href="/ai-transformation-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
</div>
</div>
<!-- Tech 2 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">💬</div>
<h3 class="text-xl font-bold mb-2">NLP / Chatbot</h3>
<p class="text-gray-600 text-base">ประมวลผลภาษาธรรมชาติ ตอบคำถามอัตโนมัติ</p>
<!-- Service 2: Online Marketing Consult -->
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 relative">
<img src="/images/hero/automation-ai.png" alt="Online Marketing" class="w-full h-full object-cover" loading="lazy" />
<div class="absolute inset-0 gradient-primary opacity-90"></div>
<div class="absolute inset-0 flex items-center justify-center text-8xl">📱</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">ที่ปรึกษาการตลาดออนไลน์</h3>
<p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน</p>
<a href="/online-marketing-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
</div>
</div>
<!-- Tech 3 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">📊</div>
<h3 class="text-xl font-bold mb-2">Predictive Analytics</h3>
<p class="text-gray-600 text-base">วิเคราะห์ล่วงหน้า วางแผนแม่นยำ</p>
<!-- Service 3: Full-service Marketing -->
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 relative">
<img src="/images/hero/analytics-ai.png" alt="Full Marketing" class="w-full h-full object-cover" loading="lazy" />
<div class="absolute inset-0 bg-accent-purple opacity-90"></div>
<div class="absolute inset-0 flex items-center justify-center text-8xl">📢</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">บริการตลาดออนไลน์ครบวงจร</h3>
<p class="text-gray-600 mb-4">บริการในการทำการตลาดออนไลน์แบบครบวงจร เหมาะสำหรับองค์กรที่ต้องการทีมงานวางกลยุทธ์ และผลิตสื่อพร้อมกัน</p>
<a href="/online-marketing-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
</div>
</div>
<!-- Tech 4 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">👁️</div>
<h3 class="text-xl font-bold mb-2">Computer Vision</h3>
<p class="text-gray-600 text-base">วิเคราะห์ภาพ ตรวจสอบอัตโนมัติ</p>
<!-- Service 4: Website Development -->
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 relative">
<img src="/images/hero/training-ai.png" alt="Website" class="w-full h-full object-cover" loading="lazy" />
<div class="absolute inset-0 bg-accent-teal opacity-90"></div>
<div class="absolute inset-0 flex items-center justify-center text-8xl">💻</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">พัฒนาเว็บไซต์</h3>
<p class="text-gray-600 mb-4">บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต</p>
<a href="/website-development" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
</div>
</div>
<!-- Tech 5 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">🔄</div>
<h3 class="text-xl font-bold mb-2">RPA</h3>
<p class="text-gray-600 text-base">อัตโนมัติกระบวนการทำงาน</p>
<!-- Service 5: App Development -->
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 relative">
<img src="/images/hero/strategy-ai.png" alt="App" class="w-full h-full object-cover" loading="lazy" />
<div class="absolute inset-0 gradient-ai opacity-90"></div>
<div class="absolute inset-0 flex items-center justify-center text-8xl">📲</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">พัฒนาแอปพลิเคชัน</h3>
<p class="text-gray-600 mb-4">บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ</p>
<a href="/app-development" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
</div>
</div>
<!-- Tech 6 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">📈</div>
<h3 class="text-xl font-bold mb-2">Business Intelligence</h3>
<p class="text-gray-600 text-base">Dashboard แสดงผลแบบ Real-time</p>
</div>
<!-- Tech 7 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">🌐</div>
<h3 class="text-xl font-bold mb-2">Generative AI</h3>
<p class="text-gray-600 text-base">สร้างเนื้อหา อัตโนมัติด้วย AI</p>
</div>
<!-- Tech 8 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">☁️</div>
<h3 class="text-xl font-bold mb-2">Cloud AI</h3>
<p class="text-gray-600 text-base">บริการ AI บน Cloud ประสิทธิภาพสูง</p>
<!-- Service 6: AI Chatbot (integrated, not separate) -->
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 relative">
<img src="/images/hero/chatbot-ai.png" alt="AI Chatbot" class="w-full h-full object-cover" loading="lazy" />
<div class="absolute inset-0 gradient-primary opacity-90"></div>
<div class="absolute inset-0 flex items-center justify-center text-8xl">🤖</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">ระบบแชทบอท (AI)</h3>
<p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางระบบแชทบอท โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง</p>
<a href="/ai-automation" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-light">
<!-- Strategy Section (from original) -->
<section class="py-20 bg-gray-light">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
บริการที่ปรึกษาองค์กร AI
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
บริการครบวงจร เพื่อการเปลี่ยนแปลงองค์กรสู่ยุค AI
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Service 1 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 gradient-ai flex items-center justify-center">
<div class="text-7xl">🎯</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Strategy Consulting</h3>
<p class="text-gray-600 mb-4">วางกลยุทธ์ AI ที่สอดคล้องกับเป้าหมายธุรกิจ วิเคราะห์โอกาส และกำหนด Roadmap ที่ชัดเจน</p>
<a href="/ai-strategy-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
<div>
<img src="https://www.moreminimore.com/wp-content/uploads/2022/01/Bright-Wisdom-Backgroud-service-2@2x.png" alt="Strategy" class="rounded-lg shadow-xl w-full" loading="lazy" width="500" height="500" />
</div>
<!-- Service 2 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 gradient-primary flex items-center justify-center">
<div class="text-7xl">⚙️</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Automation</h3>
<p class="text-gray-600 mb-4">นำ Chatbot, Workflow Automation และ RPA มาใช้ ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพ</p>
<a href="/ai-automation" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
</div>
<!-- Service 3 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 bg-accent-purple flex items-center justify-center">
<div class="text-7xl">🎓</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Training</h3>
<p class="text-gray-600 mb-4">ฝึกอบรมทีมของคุณ ให้ใช้งาน AI Tools เป็น และประยุกต์ใช้ในงานจริง</p>
<a href="/ai-training" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
</div>
<!-- Service 4 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 bg-accent-teal flex items-center justify-center">
<div class="text-7xl">📊</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Analytics</h3>
<p class="text-gray-600 mb-4">ใช้ AI วิเคราะห์ข้อมูล หาลูกค้าที่มีแนวโน้มซื้อสูง เพิ่มยอดขายอย่างชาญฉลาด</p>
<a href="/ai-analytics" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
<div>
<h2 class="text-4xl font-bold mb-6 text-secondary">เพราะแต่ละธุรกิจ มี<br /><span class="text-accent-blue">จุดแข็งและจุดอ่อน</span> ที่ไม่เหมือนกัน</h2>
<p class="text-lg text-gray-600 mb-8">
กลยุทธ์การตลาดออนไลน์จากเรา จะมีแนวคิดพื้นฐาน คือ การประหยัด ต้นทุน และเพิ่มโอกาสในการขายให้กับลูกค้า เช่น ระบบที่ทำให้ลูกค้า ประหยัดค่าใช้จ่ายด้านบุคลากร ระบบที่ไม่จำเป็นต้องใช้คนที่มีทักษะสูง และระบบที่ช่วยหาลูกค้าได้ง่ายขึ้น
</p>
<a href="#contactform" class="btn-secondary text-lg inline-block">สนใจติดต่อเรา</a>
</div>
</div>
</div>
</section>
<!-- Process Section -->
<!-- Process Section (Fixed connector lines) -->
<section id="process" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
กระบวนการทำงาน
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
4 ขั้นตอนง่ายๆ สู่การเป็นองค์กร AI
</p>
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">กระบวนการทำงาน</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">4 ขั้นตอนง่ายๆ สู่การเป็นองค์กร AI</p>
</div>
<div class="grid md:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="text-center relative">
<div class="w-24 h-24 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white shadow-xl">
1
</div>
<h3 class="text-xl font-bold mb-3">วิเคราะห์</h3>
<p class="text-gray-600">ศึกษาธุรกิจ ปัจจุบัน วิเคราะห์ปัญหา และหาโอกาสที่ใช้ AI แก้ได้</p>
<div class="hidden md:block absolute top-12 left-full w-full h-1 bg-gradient-to-r from-primary to-transparent -translate-x-1/2"></div>
<div class="process-step text-center">
<div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white shadow-xl">1</div>
<div class="hidden md:block process-step-connector"></div>
<h3 class="text-2xl font-bold mb-3">วิเคราะห์</h3>
<p class="text-gray-600">ศึกษาธุรกิจ วิเคราะห์ปัญหา หาโอกาสใช้ AI</p>
</div>
<!-- Step 2 -->
<div class="text-center relative">
<div class="w-24 h-24 mx-auto mb-6 rounded-full gradient-ai flex items-center justify-center text-4xl font-bold text-white shadow-xl">
2
</div>
<h3 class="text-xl font-bold mb-3">วางแผน</h3>
<p class="text-gray-600">ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน วัดผลได้ เหมาะกับองค์กร</p>
<div class="hidden md:block absolute top-12 left-full w-full h-1 bg-gradient-to-r from-accent-blue to-transparent -translate-x-1/2"></div>
<div class="process-step text-center">
<div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full gradient-ai flex items-center justify-center text-4xl font-bold text-white shadow-xl">2</div>
<div class="hidden md:block process-step-connector"></div>
<h3 class="text-2xl font-bold mb-3">วางแผน</h3>
<p class="text-gray-600">ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน</p>
</div>
<!-- Step 3 -->
<div class="text-center relative">
<div class="w-24 h-24 mx-auto mb-6 rounded-full bg-accent-purple flex items-center justify-center text-4xl font-bold text-white shadow-xl">
3
</div>
<h3 class="text-xl font-bold mb-3">ดำเนินการ</h3>
<p class="text-gray-600">ติดตั้งระบบ AI ฝึกอบรมทีม และเริ่มใช้งานจริง</p>
<div class="hidden md:block absolute top-12 left-full w-full h-1 bg-gradient-to-r from-accent-purple to-transparent -translate-x-1/2"></div>
<div class="process-step text-center">
<div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full bg-accent-purple flex items-center justify-center text-4xl font-bold text-white shadow-xl">3</div>
<div class="hidden md:block process-step-connector"></div>
<h3 class="text-2xl font-bold mb-3">ดำเนินการ</h3>
<p class="text-gray-600">ติดตั้งระบบ AI ฝึกอบรมทีม เริ่มใช้งาน</p>
</div>
<!-- Step 4 -->
<div class="text-center">
<div class="w-24 h-24 mx-auto mb-6 rounded-full bg-accent-teal flex items-center justify-center text-4xl font-bold text-white shadow-xl">
4
</div>
<h3 class="text-xl font-bold mb-3">วัดผล</h3>
<p class="text-gray-600">ติดตามผล วิเคราะห์ข้อมูล ปรับปรุงอย่างต่อเนื่อง เพื่อผลลัพธ์สูงสุด</p>
<div class="process-step text-center">
<div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full bg-accent-teal flex items-center justify-center text-4xl font-bold text-white shadow-xl">4</div>
<h3 class="text-2xl font-bold mb-3">วัดผล</h3>
<p class="text-gray-600">ติดตามผล ปรับปรุงอย่างต่อเนื่อง</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-gray-light">
<div class="container mx-auto px-4 max-w-5xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
คำถามที่พบบ่อย
</h2>
<p class="text-xl text-gray-600">
ข้อสงสัยเกี่ยวกับการนำ AI มาใช้ในองค์กร
</p>
</div>
<div class="space-y-4">
<!-- FAQ 1 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>AI Transformation คืออะไร?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
AI Transformation คือกระบวนการเปลี่ยนแปลงองค์กร โดยการนำ AI มาใช้ในทุกด้าน เพื่อเพิ่มประสิทธิภาพ ลดต้นทุน และสร้างโอกาสทางธุรกิจใหม่
</div>
</details>
<!-- FAQ 2 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>ธุรกิจของฉันพร้อมสำหรับ AI หรือยัง?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
ธุรกิจส่วนใหญ่พร้อมใช้ AI แล้ว! เราช่วยวิเคราะห์ความพร้อม และเริ่มต้นจากจุดเล็กๆ ก่อนขยายผล
</div>
</details>
<!-- FAQ 3 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>ใช้เวลานานแค่ไหนที่จะเห็นผล?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
โดยทั่วไปจะเริ่มเห็นผลภายใน 1-3 เดือน สำหรับโครงการเล็กๆ และ 6-12 เดือน สำหรับโครงการใหญ่
</div>
</details>
<!-- FAQ 4 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>ลงทุนเท่าไหร่?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
ขึ้นอยู่กับขอบเขตโครงการ เรามีทั้งโครงการเริ่มต้นหลักหมื่น ไปจนถึงโครงการใหญ่หลักล้าน คุยรายละเอียดได้ฟรี!
</div>
</details>
<!-- FAQ 5 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>พนักงานจะถูกแทนที่ด้วย AI หรือไม่?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
ไม่! AI เป็นเครื่องมือช่วยงาน ไม่ใช่แทนที่คน เราฝึกอบรมให้พนักงานใช้ AI ทำงานได้ดีขึ้น
</div>
</details>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
เรื่องน่ารู้เกี่ยวกับ AI
</h2>
<p class="text-xl text-gray-600">
อัปเดตความรู้ AI ล่าสุด เพื่อธุรกิจของคุณ
</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Blog 1 -->
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 gradient-ai flex items-center justify-center">
<div class="text-6xl">📝</div>
</div>
<div class="p-6">
<div class="text-accent-blue text-base font-bold mb-2">AI Strategy</div>
<h3 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
<a href="/blog/ai-transformation-guide">
คู่มือ AI Transformation สำหรับ SME
</a>
</h3>
<p class="text-gray-600 text-base mb-4">
ขั้นตอนการนำ AI มาใช้ในธุรกิจขนาดกลางและย่อม เริ่มต้นอย่างไร ให้ได้ผลเร็ว
</p>
<a href="/blog/ai-transformation-guide" class="text-accent-blue font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
<!-- Blog 2 -->
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 gradient-primary flex items-center justify-center">
<div class="text-6xl">🤖</div>
</div>
<div class="p-6">
<div class="text-accent-blue text-base font-bold mb-2">Chatbot</div>
<h3 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
<a href="/blog/chatbot-roi">
Chatbot ช่วยเพิ่มยอดขายได้อย่างไร?
</a>
</h3>
<p class="text-gray-600 text-base mb-4">
กรณีศึกษาจริง การใช้ Chatbot ลดต้นทุนบริการลูกค้า 40% และเพิ่มยอดขาย 25%
</p>
<a href="/blog/chatbot-roi" class="text-accent-blue font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
<!-- Blog 3 -->
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 bg-accent-purple flex items-center justify-center">
<div class="text-6xl">📊</div>
</div>
<div class="p-6">
<div class="text-accent-blue text-base font-bold mb-2">Analytics</div>
<h3 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
<a href="/blog/predictive-analytics">
Predictive Analytics ทำนายยอดขายล่วงหน้า
</a>
</h3>
<p class="text-gray-600 text-base mb-4">
ใช้ Machine Learning ทำนายยอดขายล่วงหน้า 90% แม่นยำ ช่วยวางแผนสต็อกและการตลาด
</p>
<a href="/blog/predictive-analytics" class="text-accent-blue font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
</div>
<div class="text-center mt-12">
<a href="/category/seo" class="btn-secondary inline-block">
ดูบทความทั้งหมด →
</a>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 gradient-ai text-white">
<section id="contactform" class="py-20 gradient-ai text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-5xl font-bold mb-6">
พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?
</h2>
<p class="text-xl text-gray-100 mb-10 max-w-3xl mx-auto">
ปรึกษาผู้เชี่ยวชาญฟรี เราพร้อมช่วยคุณวางกลยุทธ์ AI ที่วัดผลได้
</p>
<h2 class="text-4xl md:text-6xl font-bold mb-6">พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?</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-accent-blue px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
📞 080-995-5945
</a>
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
💬 เพิ่ม Line
</a>
<a href="tel:0809955945" class="bg-white text-accent-blue px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
</div>
</div>
</section>

59
src/pages/online-marketing-consult.astro Normal file
View File

@@ -0,0 +1,59 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ที่ปรึกษาการตลาดออนไลน์ | MoreminiMore">
<section class="relative py-32 bg-gradient-primary text-white overflow-hidden">
<div class="absolute inset-0 opacity-20">
<img src="/images/hero/automation-ai.png" alt="Marketing" 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">
<div class="text-8xl mb-6">📱</div>
<h1 class="text-5xl md:text-7xl font-bold mb-8">ที่ปรึกษาการตลาดออนไลน์</h1>
<p class="text-2xl text-gray-100 mb-10">บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน</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 inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
</div>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-5xl">
<h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการที่ปรึกษาการตลาดออนไลน์</h2>
<div class="prose prose-lg max-w-none">
<p class="text-xl text-gray-600 mb-8">
บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน บริการนี้ เหมาะสำหรับองค์กรที่มีทีมการตลาดในการสร้างสื่ออยู่แล้ว
</p>
<h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">สิ่งที่คุณจะได้รับ</h3>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>กลยุทธ์ที่วัดผลได้:</strong> วางแผนการตลาดโดยใช้ข้อมูลจริง</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>ประหยัดต้นทุน:</strong> เน้นประสิทธิภาพและการประหยัด</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>เพิ่มโอกาสขาย:</strong> ระบบช่วยหาลูกค้าได้ง่ายขึ้น</span>
</li>
</ul>
</div>
</div>
</section>
<section class="py-20 gradient-primary text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-6">สนใจบริการนี้?</h2>
<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-green-500 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>

59
src/pages/website-development.astro Normal file
View File

@@ -0,0 +1,59 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="พัฒนาเว็บไซต์ | MoreminiMore">
<section class="relative py-32 bg-gradient-hero overflow-hidden">
<div class="absolute inset-0 opacity-20">
<img src="/images/hero/training-ai.png" alt="Website" 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">
<div class="text-8xl mb-6">💻</div>
<h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary">พัฒนาเว็บไซต์</h1>
<p class="text-2xl text-gray-600 mb-10">บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 080-995-5945</a>
<a href="https://line.me/" class="btn-secondary text-xl shadow-xl">💬 เพิ่ม Line</a>
</div>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-5xl">
<h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการพัฒนาเว็บไซต์</h2>
<div class="prose prose-lg max-w-none">
<p class="text-xl text-gray-600 mb-8">
บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต เช่น การเชื่อมข้อมูลสินค้าและยอดขายกับระบบบัญชี เป็นต้น
</p>
<h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">คุณสมบัติ</h3>
<ul class="space-y-4 mb-8">
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>UX/UI ดี:</strong> ออกแบบให้ใช้งานง่าย สวยงาม</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>เชื่อมต่อระบบ:</strong> เชื่อมข้อมูลกับระบบบัญชีและอื่นๆ</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>E-Commerce:</strong> ขายออนไลน์ได้ทันที</span>
</li>
</ul>
</div>
</div>
</section>
<section class="py-20 gradient-ai text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-6">สนใจบริการนี้?</h2>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="bg-white text-accent-blue 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-green-500 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>

169
src/styles/global.css
View File

@@ -1,183 +1,96 @@
@import "tailwindcss";
@theme {
/* Primary Colors */
--color-primary: #fed400;
--color-primary-hover: #e5c000;
--color-primary-light: #fff4b3;
/* Secondary Colors */
--color-secondary: #000000;
--color-secondary-light: #1a1a1a;
/* AI/Tech Accent Colors */
--color-accent-blue: #2563eb;
--color-accent-blue-hover: #1d4ed8;
--color-accent-purple: #7c3aed;
--color-accent-purple-hover: #6d28d9;
--color-accent-teal: #0891b2;
/* Neutral Colors */
--color-gray-light: #f9fafb;
--color-gray: #6b7280;
--color-gray-dark: #374151;
--color-text: #0f0f0f;
--color-white: #ffffff;
/* Fonts */
--font-sans: 'Noto Sans Thai', system-ui, sans-serif;
--font-display: 'Kanit', var(--font-sans);
}
@layer base {
html {
scroll-behavior: smooth;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--color-text);
line-height: 1.6;
line-height: 1.7;
background: var(--color-white);
font-size: 1.125rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
}
/* Smooth animations */
* {
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
p { margin-bottom: 1.25em; font-size: 1.0625rem; }
* { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
}
@layer components {
/* Glass Morphism */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-dark {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Card Hover Effects */
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Gradient Backgrounds */
.gradient-primary {
background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%);
}
.gradient-ai {
background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-purple) 100%);
}
.gradient-hero {
background: linear-gradient(135deg, #fef3c7 0%, #e0e7ff 50%, #f3e8ff 100%);
}
/* Button Styles */
.btn-primary {
background-color: var(--color-primary);
color: var(--color-secondary);
padding: 0.75rem 2rem;
border-radius: 9999px;
font-weight: 700;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: var(--color-primary-hover);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3);
}
.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-white);
padding: 0.75rem 2rem;
border-radius: 9999px;
font-weight: 700;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background-color: var(--color-secondary-light);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.btn-accent {
background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple));
color: var(--color-white);
padding: 0.75rem 2rem;
border-radius: 9999px;
font-weight: 700;
transition: all 0.3s ease;
}
.btn-accent:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
}
.glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
.glass-dark { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
.gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%); }
.gradient-ai { background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-purple) 100%); }
.gradient-hero { background: linear-gradient(135deg, #fef3c7 0%, #e0e7ff 50%, #f3e8ff 100%); }
.btn-primary { background-color: var(--color-primary); color: var(--color-secondary); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; }
.btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3); }
.btn-secondary { background-color: var(--color-secondary); color: var(--color-white); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; }
.btn-secondary:hover { background-color: var(--color-secondary-light); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
.btn-accent { background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple)); color: var(--color-white); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4); }
}
@layer utilities {
/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent-blue { color: var(--color-accent-blue); }
.text-accent-purple { color: var(--color-accent-purple); }
/* Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent-blue { background-color: var(--color-accent-blue); }
.bg-accent-purple { background-color: var(--color-accent-purple); }
.bg-gray-light { background-color: var(--color-gray-light); }
/* Hover Effects */
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
/* Animation Utilities */
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 6s ease-in-out 3s infinite;
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Parallax Effect Class */
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Process Section - Fixed connector line positioning */
.process-step {
position: relative;
}
.process-step-number {
position: relative;
z-index: 2;
}
.process-step-connector {
position: absolute;
top: 2.5rem;
left: calc(100% + 1rem);
width: calc(100% - 6rem);
height: 2px;
background: linear-gradient(to right, var(--color-primary), transparent);
z-index: 1;
pointer-events: none;
}
.parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }