Add comprehensive About, Contact, and Process pages
Implemented full content from documentation: ABOUT PAGE (/about-us): - Complete origin story - Mission section (3 pillars) - Comparison table (us vs competitors) - Location info - CTA sections CONTACT PAGE (/contact-us): - 3 contact methods (Phone, Line, Email) - Contact form with all fields - 'What happens next' 4-step process - FAQ section (5 questions) - CTA sections PROCESS PAGE (/process): - 3-step process (matching new design) - Step 1: ปรึกษาฟรี (detailed breakdown) - Step 2: พัฒนาเว็บ (timeline table, process) - Step 3: ใช้งานจริง (deliverables) - 'Why our process works' section - CTA sections All pages include: - Full hero sections with gradients - Comprehensive content from docs - Multiple CTA buttons - Proper internal linking - Responsive design - Modern styling with blended colors Build: 18 pages, 1.06s
This commit is contained in:
Kunthawat Greethong
@@ -2,86 +2,153 @@
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="About Us | MoreminiMore Co.,Ltd.">
|
||||
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
|
||||
เกี่ยวกับเรา
|
||||
</h1>
|
||||
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
|
||||
ระบบเบื้องหลังการทำงานของเรา ระบบของเราจะมี Server ประมวลผล 3 เครื่อง ในการดึงข้อมูลจากแหล่งต่าง ๆ
|
||||
</p>
|
||||
|
||||
<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="Our System"
|
||||
class="rounded-lg shadow-xl w-full"
|
||||
width="500"
|
||||
height="500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-6 text-secondary">ระบบของเรา</h2>
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">1️⃣</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Server ประมวลผลหลัก</h3>
|
||||
<p class="text-gray-600">ประมวลผลข้อมูลจากแหล่งต่าง ๆ อย่างรวดเร็วและมีประสิทธิภาพ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">2️⃣</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Server วิเคราะห์ข้อมูล</h3>
|
||||
<p class="text-gray-600">วิเคราะห์ข้อมูลเชิงลึก เพื่อหาแนวทางที่เหมาะสม</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">3️⃣</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Server จัดเก็บข้อมูล</h3>
|
||||
<p class="text-gray-600">จัดเก็บข้อมูลอย่างเป็นระบบ ปลอดภัย เข้าถึงได้ง่าย</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Layout title="เกี่ยวกับเรา | moreminimore — บริษัท IT Services เพื่อ SMEs ไทย">
|
||||
<!-- Hero -->
|
||||
<section class="relative py-32 gradient-secondary text-white overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<img src="/images/hero/strategy-ai.png" alt="About MoreminiMore" 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">เกี่ยวกับ moreminimore</h1>
|
||||
<p class="text-2xl text-gray-100 mb-10">เราเชื่อ rằng SMEs ไทย deserve เว็บคุณภาพในราคาที่จ่ายได้</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="#services" 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>
|
||||
|
||||
<!-- Our Story -->
|
||||
<section class="py-20 bg-white">
|
||||
<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-secondary">วิสัยทัศน์ของเรา</h2>
|
||||
<div class="prose prose-lg mx-auto text-gray-600">
|
||||
<p class="mb-6">
|
||||
MoreminiMore มุ่งมั่นที่จะช่วยธุรกิจไทยเติบโตในยุคดิจิตอล ด้วยการใช้ข้อมูลเป็นพื้นฐานในการตัดสินใจ
|
||||
และพัฒนาศักยภาพของคนในองค์กรให้สามารถขับเคลื่อนธุรกิจได้อย่างยั่งยืน
|
||||
<div class="container mx-auto px-4 max-w-5xl">
|
||||
<h2 class="text-4xl font-bold mb-8 text-center">จุดเริ่มต้นของเรา</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-xl text-gray-600 mb-8 text-center">
|
||||
moreminimore เกิดขึ้นจากความตั้งใจที่จะลดช่องว่างระหว่างธุรกิจใหญ่และ SMEs ด้านเทคโนโลยี
|
||||
</p>
|
||||
|
||||
<div class="bg-gray-light p-8 rounded-2xl my-12">
|
||||
<p class="text-lg text-gray-700 mb-6">
|
||||
หลังจากทำงานกับธุรกิจขนาดใหญ่มามาก เราพบว่า SMEs ไทยจำนวนมาก:
|
||||
</p>
|
||||
<p class="mb-6">
|
||||
เราไม่เพียงแค่ให้คำแนะนำ แต่เรายังลงมือทำร่วมกับคุณ เพื่อให้มั่นใจว่ากลยุทธ์ที่วางไว้จะเกิดขึ้นจริง
|
||||
และวัดผลได้อย่างชัดเจน
|
||||
</p>
|
||||
<p>
|
||||
ด้วยประสบการณ์และทีมงานที่มีความเชี่ยวชาญ เราพร้อมที่จะเป็นพาร์ทเนอร์ในการเติบโตของธุรกิจคุณ
|
||||
<ul class="space-y-4 text-gray-700">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-secondary text-2xl">❌</span>
|
||||
<span><strong>ไม่มีเว็บไซต์</strong> หรือมีเว็บเก่าล้าสมัย</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-secondary text-2xl">❌</span>
|
||||
<span><strong>งบทำเว็บจำกัด</strong> ไม่อยากจ่ายล่วงหน้าหลักหมื่น</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-secondary text-2xl">❌</span>
|
||||
<span><strong>ต้องการระบบอัตโนมัติ</strong> แต่ไม่รู้ว่าเริ่มยังไง</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="text-center my-12">
|
||||
<h3 class="text-3xl font-bold mb-4 text-secondary">"ทำไมเว็บคุณภาพต้องแพง?"</h3>
|
||||
<p class="text-xl text-gray-600">
|
||||
คำถามนี้ทำให้เราตัดสินใจสร้าง moreminimore ด้วยโมเดล <strong class="text-primary">"เว็บฟรี + จ่ายค่า Server รายปี"</strong>
|
||||
เพื่อให้ SMEs เข้าถึงเทคโนโลยีได้ง่ายขึ้น
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-gray-100">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมร่วมงานกับคุณ</h2>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
ให้เราช่วยคุณพัฒนาระบบและกลยุทธ์ที่ตอบโจทย์ธุรกิจ
|
||||
<!-- Mission -->
|
||||
<section 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="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md text-center">
|
||||
<div class="text-6xl mb-6">🎯</div>
|
||||
<h3 class="text-2xl font-bold mb-4">ทำให้เทคโนโลยีเข้าถึงได้</h3>
|
||||
<p class="text-gray-600">เราเชื่อว่าธุรกิจทุกขนาดควรมีโอกาสใช้เทคโนโลยีคุณภาพ ไม่จำกัดด้วยงบประมาณ</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md text-center">
|
||||
<div class="text-6xl mb-6">⚡</div>
|
||||
<h3 class="text-2xl font-bold mb-4">ใช้ AI Agents ทำงานให้รวดเร็ว</h3>
|
||||
<p class="text-gray-600">moreminimore ใช้ OpenClaw AI Agents ช่วยลดเวลาทำงาน เพิ่มความแม่นยำ ลดต้นทุน ส่งต่อประโยชน์ให้ลูกค้า</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md text-center">
|
||||
<div class="text-6xl mb-6">🤝</div>
|
||||
<h3 class="text-2xl font-bold mb-4">เป็นพาร์ทเนอร์ที่ไว้ใจได้</h3>
|
||||
<p class="text-gray-600">เราไม่ใช่แค่ผู้รับจ้าง แต่เป็นพาร์ทเนอร์ที่ร่วมเติบโตไปกับธุรกิจคุณ</p>
|
||||
</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-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">moreminimore</th>
|
||||
<th class="px-6 py-4 text-left text-lg">เจ้าอื่น</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4"><span class="text-accent-green">✓</span> เว็บฟรี จ่ายค่า Server รายปี</td>
|
||||
<td class="px-6 py-4"><span class="text-red-500">✗</span> ค่าทำเว็บหลักหมื่นล่วงหน้า</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4"><span class="text-accent-green">✓</span> ใช้ AI Agents งานเร็ว คุณภาพสูง</td>
|
||||
<td class="px-6 py-4"><span class="text-red-500">✗</span> ทำงานแบบดั้งเดิม ใช้เวลานาน</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4"><span class="text-accent-green">✓</span> เข้าใจ SMEs ไทย</td>
|
||||
<td class="px-6 py-4"><span class="text-red-500">✗</span> เน้นลูกค้าใหญ่</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4"><span class="text-accent-green">✓</span> ราคาเข้าถึงได้</td>
|
||||
<td class="px-6 py-4"><span class="text-red-500">✗</span> ราคามาตรฐานตลาด</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4"><span class="text-accent-green">✓</span> ดูแลระยะยาว</td>
|
||||
<td class="px-6 py-4"><span class="text-red-500">✗</span> จบงานแล้วจบกัน</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Location -->
|
||||
<section class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4 max-w-4xl text-center">
|
||||
<h2 class="text-4xl font-bold mb-8">เราอยู่ที่ไหน?</h2>
|
||||
<div class="text-6xl mb-6">📍</div>
|
||||
<p class="text-2xl text-gray-700 mb-8"><strong>ประเทศไทย</strong></p>
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
เราพร้อมให้บริการ SMEs ทั่วประเทศ ทั้งออนไลน์และออนไซต์ (ตามตกลง)
|
||||
</p>
|
||||
<a href="/contact-us" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
<a href="/contact-us" class="btn-secondary text-xl">ติดต่อเรา</a>
|
||||
</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">
|
||||
ถ้าคุณเป็นเจ้าของธุรกิจ SMEs ที่ต้องการเว็บไซต์คุณภาพในงบจำกัด
|
||||
ระบบอัตโนมัติลดงานซ้ำซ้อน หรือที่ปรึกษา AI ที่เข้าใจธุรกิจคุณ
|
||||
<br /><strong class="text-primary">moreminimore คือคำตอบ</strong>
|
||||
</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="/services" 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>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
@@ -2,83 +2,236 @@
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="Contact Us | MoreminiMore Co.,Ltd.">
|
||||
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
|
||||
ติดต่อเรา
|
||||
</h1>
|
||||
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
|
||||
คุณสามารถติดต่อเราได้หลายช่องทาง พร้อมข้อมูลเบื้องต้น กรอกแบบฟอร์ม
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||||
<!-- Contact Info -->
|
||||
<div class="space-y-8">
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<h2 class="text-2xl font-bold mb-6 text-secondary">ช่องทางติดต่อ</h2>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📧</div>
|
||||
<div>
|
||||
<h3 class="font-bold mb-1">อีเมล</h3>
|
||||
<a href="mailto:contact@moreminimore.com" class="text-gray-600 hover:text-primary transition">contact@moreminimore.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📞</div>
|
||||
<div>
|
||||
<h3 class="font-bold mb-1">โทรศัพท์</h3>
|
||||
<a href="tel:0809955945" class="text-gray-600 hover:text-primary transition">080-995-5945</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">💬</div>
|
||||
<div>
|
||||
<h3 class="font-bold mb-1">Social Media</h3>
|
||||
<div class="flex gap-4 mt-2">
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">Facebook</a>
|
||||
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">Twitter</a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-black text-white p-8 rounded-lg">
|
||||
<h3 class="text-xl font-bold mb-4">เวลาทำการ</h3>
|
||||
<p class="text-gray-300">จันทร์ - ศุกร์: 9:00 - 18:00 น.</p>
|
||||
<p class="text-gray-300">เสาร์ - อาทิตย์: ตามนัดหมาย</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form Placeholder -->
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<h2 class="text-2xl font-bold mb-6 text-secondary">ส่งข้อความถึงเรา</h2>
|
||||
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
|
||||
<p class="text-gray-500 mb-4">📝 แบบฟอร์มติดต่อ</p>
|
||||
<p class="text-gray-400 text-base mb-4">
|
||||
ในระหว่างนี้ คุณสามารถติดต่อเราผ่านช่องทางด้านซ้าย
|
||||
</p>
|
||||
<a href="mailto:contact@moreminimore.com" class="bg-primary text-black px-6 py-3 rounded-full font-bold hover:bg-primary-hover transition inline-block">
|
||||
ส่งอีเมล
|
||||
</a>
|
||||
</div>
|
||||
<Layout title="ติดต่อเรา | moreminimore — ปรึกษาฟรี บริการเว็บไซต์ & AI สำหรับ SMEs">
|
||||
<!-- 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="Contact Us" 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">ปรึกษาฟรี ไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น<br />เราพร้อมช่วยธุรกิจคุณเติบโต</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">📞 โทรเลย</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 inline-flex items-center justify-center gap-2">💬 ทัก Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-gray-100">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl font-bold mb-8 text-secondary">สนใจรับปรึกษาฟรี?</h2>
|
||||
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
เราพร้อมให้คำปรึกษาเบื้องต้น โดยไม่มีค่าใช้จ่าย
|
||||
<!-- Contact Methods -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">ช่องทางติดต่อ</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Phone -->
|
||||
<div class="bg-gray-light p-8 rounded-2xl text-center">
|
||||
<div class="text-6xl mb-6">📞</div>
|
||||
<h3 class="text-2xl font-bold mb-4">โทรศัพท์</h3>
|
||||
<p class="text-2xl font-bold text-secondary mb-2"><a href="tel:0809955945" class="hover:text-primary transition">080-995-5945</a></p>
|
||||
<p class="text-gray-600 mb-4">จันทร์ - ศุกร์, 9:00 - 18:00 น.</p>
|
||||
<p class="text-sm text-gray-500 italic">นอกเวลาทำการ ทิ้งข้อความไว้ เรายินดีติดต่อกลับ</p>
|
||||
<a href="tel:0809955945" class="btn-secondary mt-6 inline-block">โทรเลย</a>
|
||||
</div>
|
||||
|
||||
<!-- Line -->
|
||||
<div class="bg-gray-light p-8 rounded-2xl text-center">
|
||||
<div class="text-6xl mb-6">💬</div>
|
||||
<h3 class="text-2xl font-bold mb-4">Line</h3>
|
||||
<p class="text-2xl font-bold text-secondary mb-4">@moreminimore</p>
|
||||
<div class="bg-white p-4 rounded-lg mb-4 inline-block">
|
||||
<div class="w-32 h-32 bg-gray-200 flex items-center justify-center text-gray-400">QR Code</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-4">สแกน QR Code หรือค้นหาด้วย Line ID</p>
|
||||
<a href="https://line.me/" class="btn-accent mt-6 inline-block">เพิ่มเพื่อน Line</a>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="bg-gray-light p-8 rounded-2xl text-center">
|
||||
<div class="text-6xl mb-6">📩</div>
|
||||
<h3 class="text-2xl font-bold mb-4">อีเมล</h3>
|
||||
<p class="text-2xl font-bold text-secondary mb-4"><a href="mailto:contact@moreminimore.com" class="hover:text-primary transition">contact@moreminimore.com</a></p>
|
||||
<p class="text-gray-600 mb-4">ตอบกลับภายใน 24 ชั่วโมง</p>
|
||||
<a href="mailto:contact@moreminimore.com" class="btn-secondary mt-6 inline-block">ส่งอีเมล</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-4xl font-bold mb-8 text-center">แบบฟอร์มติดต่อ</h2>
|
||||
<p class="text-center text-gray-600 mb-12 text-lg">กรอกแบบฟอร์มด้านล่าง เราติดต่อกลับภายใน 24 ชั่วโมง</p>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-lg">
|
||||
<form class="space-y-6">
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-bold mb-2">ชื่อ <span class="text-red-500">*</span></label>
|
||||
<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-secondary" placeholder="ชื่อของคุณ" required />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-bold mb-2">เบอร์โทรศัพท์ <span class="text-red-500">*</span></label>
|
||||
<input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-secondary" placeholder="080-xxx-xxxx" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-gray-700 font-bold mb-2">Email</label>
|
||||
<input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-secondary" placeholder="email@example.com" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-gray-700 font-bold mb-2">ชื่อบริษัท</label>
|
||||
<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-secondary" placeholder="ชื่อบริษัทของคุณ" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-gray-700 font-bold mb-2">ประเภทธุรกิจ</label>
|
||||
<select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-secondary">
|
||||
<option value="">เลือกประเภทธุรกิจ</option>
|
||||
<option value="retail">ค้าปลีก</option>
|
||||
<option value="service">บริการ</option>
|
||||
<option value="manufacturing">การผลิต</option>
|
||||
<option value="ecommerce">E-Commerce</option>
|
||||
<option value="other">อื่นๆ</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-gray-700 font-bold mb-2">บริการที่สนใจ</label>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" class="w-5 h-5 text-secondary rounded" />
|
||||
<span>Web Development</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" class="w-5 h-5 text-secondary rounded" />
|
||||
<span>AI Automation Setup</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" class="w-5 h-5 text-secondary rounded" />
|
||||
<span>AI Consult & Implementation</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-gray-700 font-bold mb-2">รายละเอียดเพิ่มเติม</label>
|
||||
<textarea rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-secondary" placeholder="บอกเราเกี่ยวกับความต้องการของคุณ"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn-secondary text-xl px-12 py-4">ส่งข้อความ</button>
|
||||
<p class="text-sm text-gray-500 mt-4">*ช่องที่มีเครื่องหมาย * คือข้อมูลจำเป็น</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What Happens Next -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">หลังจากติดต่อเรา</h2>
|
||||
<div class="grid md:grid-cols-4 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-secondary flex items-center justify-center text-4xl font-bold text-white">1</div>
|
||||
<h3 class="text-xl font-bold mb-2">เราติดต่อกลับ</h3>
|
||||
<p class="text-gray-600">ภายใน 24 ชั่วโมง (วันทำการ)</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white">2</div>
|
||||
<h3 class="text-xl font-bold mb-2">นัดคุย</h3>
|
||||
<p class="text-gray-600">จัดเวลาคุยตามความสะดวกของคุณ</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-purple flex items-center justify-center text-4xl font-bold text-white">3</div>
|
||||
<h3 class="text-xl font-bold mb-2">ปรึกษาฟรี</h3>
|
||||
<p class="text-gray-600">คุยความต้องการ เราแนะนำโซลูชัน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-green flex items-center justify-center text-4xl font-bold text-white">4</div>
|
||||
<h3 class="text-xl font-bold mb-2">เริ่มงาน</h3>
|
||||
<p class="text-gray-600">ถ้าทั้งสองฝ่ายโอเค</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-gray-600 mt-12 text-lg italic">ไม่มีแรงกดดัน ไม่มีข้อผูกมัด</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-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">
|
||||
<strong>ใช่!</strong> การปรึกษาครั้งแรกฟรี ไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น คุณแค่บอกความต้องการ เราแนะนำสิ่งที่เหมาะสม
|
||||
</div>
|
||||
</details>
|
||||
<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">
|
||||
<strong>ไม่!</strong> บริการ Web Development เราไม่คิดค่าทำเว็บ คุณจ่ายเฉพาะค่า Server รายปีเท่านั้น
|
||||
</div>
|
||||
</details>
|
||||
<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">
|
||||
<strong>ได้!</strong> เราให้บริการออนไลน์ทั่วประเทศ ถ้าต้องการ onsite สามารถตกลงเพิ่มเติมได้
|
||||
</div>
|
||||
</details>
|
||||
<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">
|
||||
เว็บพื้นฐานใช้เวลา <strong>3-5 วันทำการ</strong> เว็บที่มีความซับซ้อนมากขึ้นอาจใช้เวลา <strong>1-3 สัปดาห์</strong>
|
||||
</div>
|
||||
</details>
|
||||
<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">
|
||||
<strong>มี!</strong> เรา Support ลูกค้าหลังส่งมอบงาน ตามแพ็กเกจที่เลือก
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<p class="text-center mt-12 text-lg">
|
||||
<a href="tel:0809955945" class="text-secondary font-bold hover:underline">มีคำถามอื่น? ติดต่อเราได้เลย →</a>
|
||||
</p>
|
||||
<a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
|
||||
นัดคุยกับเรา
|
||||
</a>
|
||||
</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">
|
||||
เว็บไซต์และระบบอัตโนมัติคือกุญแจสำคัญของการเติบโตธุรกิจยุคใหม่
|
||||
<br />เริ่มวันนี้ กับ moreminimore
|
||||
</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>
|
||||
|
||||
279
src/pages/process.astro
Normal file
279
src/pages/process.astro
Normal file
@@ -0,0 +1,279 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="ขั้นตอนการทำงาน | moreminimore — 3 ขั้นตอนง่ายๆ ได้เว็บพร้อมใช้">
|
||||
<!-- 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="Process" 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 ขั้นตอน ง่ายๆ ได้เว็บพร้อมใช้<br />เราทำให้กระบวนการทำเว็บเป็นเรื่องง่าย โปร่งใส และรวดเร็ว</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="#step1" 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>
|
||||
|
||||
<!-- Step 1 -->
|
||||
<section id="step1" 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="w-24 h-24 rounded-full gradient-secondary flex items-center justify-center text-5xl font-bold text-white mb-8">1</div>
|
||||
<h2 class="text-4xl font-bold mb-6">📞 ขั้นตอนที่ 1: ปรึกษาฟรี</h2>
|
||||
<h3 class="text-2xl font-bold mb-6 text-secondary">เราคุยกันก่อน เริ่มงานทีหลัง</h3>
|
||||
<p class="text-lg text-gray-600 mb-6">ไม่มีการขายกดดัน ไม่มีการบังคับเซ็นสัญญา</p>
|
||||
</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> โซลูชันที่เหมาะสมกับธุรกิจคุณ</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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-20">
|
||||
<h3 class="text-3xl font-bold mb-8 text-center">สิ่งที่เกิดขึ้น</h3>
|
||||
<div class="grid md:grid-cols-5 gap-6">
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">1️⃣</div>
|
||||
<h4 class="font-bold mb-2">ติดต่อเรา</h4>
|
||||
<p class="text-sm text-gray-600">ผ่าน Line, โทรศัพท์ หรือแบบฟอร์ม</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">2️⃣</div>
|
||||
<h4 class="font-bold mb-2">นัดคุย</h4>
|
||||
<p class="text-sm text-gray-600">จัดเวลาคุย (ออนไลน์หรือออนไซต์)</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">3️⃣</div>
|
||||
<h4 class="font-bold mb-2">เข้าใจความต้องการ</h4>
|
||||
<p class="text-sm text-gray-600">คุณบอกเราว่าอยากได้อะไร</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">4️⃣</div>
|
||||
<h4 class="font-bold mb-2">แนะนำโซลูชัน</h4>
|
||||
<p class="text-sm text-gray-600">เราแนะนำสิ่งที่เหมาะกับคุณ</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">5️⃣</div>
|
||||
<h4 class="font-bold mb-2">ตกลงกัน</h4>
|
||||
<p class="text-sm text-gray-600">ถ้าทั้งสองฝ่ายโอเค ก็เริ่มงาน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 bg-gray-light p-8 rounded-2xl">
|
||||
<h4 class="text-2xl font-bold mb-6">คำถามที่เราจะถาม</h4>
|
||||
<ul class="grid md:grid-cols-2 gap-4 text-gray-700">
|
||||
<li class="flex items-start gap-3"><span class="text-secondary">•</span> ธุรกิจคุณทำอะไร?</li>
|
||||
<li class="flex items-start gap-3"><span class="text-secondary">•</span> กลุ่มลูกค้าคือใคร?</li>
|
||||
<li class="flex items-start gap-3"><span class="text-secondary">•</span> มีเว็บเดิมไหม? (ถ้ามี)</li>
|
||||
<li class="flex items-start gap-3"><span class="text-secondary">•</span> ต้องการฟีเจอร์อะไรบ้าง?</li>
|
||||
<li class="flex items-start gap-3"><span class="text-secondary">•</span> งบประมาณที่คาดหวัง?</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<section id="step2" 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="w-24 h-24 rounded-full gradient-primary flex items-center justify-center text-5xl font-bold text-white mb-8">2</div>
|
||||
<h2 class="text-4xl font-bold mb-6">⚡ ขั้นตอนที่ 2: พัฒนาเว็บ</h2>
|
||||
<h3 class="text-2xl font-bold mb-6 text-secondary">ทีมงาน + AI Agents สร้างเว็บให้คุณ</h3>
|
||||
<p class="text-lg text-gray-600 mb-6">moreminimore ใช้ OpenClaw AI Agents ช่วยทำงาน ทำให้เร็วขึ้น คุณภาพสูงขึ้น</p>
|
||||
</div>
|
||||
<div class="order-1 md:order-2 bg-white p-8 rounded-2xl shadow-lg">
|
||||
<h4 class="text-2xl font-bold mb-6">ระยะเวลา</h4>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="bg-secondary text-white">
|
||||
<th class="px-4 py-3 text-left">ประเภทเว็บ</th>
|
||||
<th class="px-4 py-3 text-left">ระยะเวลา</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y">
|
||||
<tr><td class="px-4 py-3">เว็บพื้นฐาน</td><td class="px-4 py-3">3-5 วันทำการ</td></tr>
|
||||
<tr><td class="px-4 py-3">เว็บมีฟีเจอร์เพิ่ม</td><td class="px-4 py-3">7-14 วันทำการ</td></tr>
|
||||
<tr><td class="px-4 py-3">เว็บ E-commerce</td><td class="px-4 py-3">14-21 วันทำการ</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="text-sm text-gray-500 mt-4 italic">*หมายเหตุ: ระยะเวลาขึ้นอยู่กับความซับซ้อนและเนื้อหาที่เตรียมไว้</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-20">
|
||||
<h3 class="text-3xl font-bold mb-8 text-center">กระบวนการพัฒนา</h3>
|
||||
<div class="grid md:grid-cols-6 gap-4">
|
||||
<div class="text-center p-4 bg-white rounded-xl shadow">
|
||||
<div class="text-3xl mb-2">📝</div>
|
||||
<h4 class="font-bold mb-2">1. เก็บ Requirement</h4>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-white rounded-xl shadow">
|
||||
<div class="text-3xl mb-2">🏗️</div>
|
||||
<h4 class="font-bold mb-2">2. ออกแบบโครงสร้าง</h4>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-white rounded-xl shadow">
|
||||
<div class="text-3xl mb-2">💻</div>
|
||||
<h4 class="font-bold mb-2">3. พัฒนาเว็บ</h4>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-white rounded-xl shadow">
|
||||
<div class="text-3xl mb-2">📄</div>
|
||||
<h4 class="font-bold mb-2">4. ใส่เนื้อหา</h4>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-white rounded-xl shadow">
|
||||
<div class="text-3xl mb-2">✅</div>
|
||||
<h4 class="font-bold mb-2">5. ทดสอบ</h4>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-white rounded-xl shadow">
|
||||
<div class="text-3xl mb-2">🔧</div>
|
||||
<h4 class="font-bold mb-2">6. แก้ไข</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 bg-white p-8 rounded-2xl shadow-lg">
|
||||
<h4 class="text-2xl font-bold mb-6 text-center">คุณต้องเตรียมอะไร?</h4>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h5 class="font-bold mb-4 text-lg">สิ่งที่ควรมี</h5>
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> โลโก้ (ถ้ามี)</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> เนื้อหาเกี่ยวกับธุรกิจ</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> รูปภาพ (หรือเราช่วยหาได้)</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> ข้อมูลติดต่อ</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gray-light p-6 rounded-xl">
|
||||
<p class="text-gray-700 italic text-center">
|
||||
<strong class="text-secondary">ถ้าไม่มีอะไรเลย?</strong><br />
|
||||
เรายินดีช่วยแนะนำและจัดหาให้
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<section id="step3" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<div class="text-center mb-12">
|
||||
<div class="w-24 h-24 mx-auto rounded-full bg-accent-green flex items-center justify-center text-5xl font-bold text-white mb-8">3</div>
|
||||
<h2 class="text-4xl font-bold mb-6">🚀 ขั้นตอนที่ 3: ใช้งานจริง</h2>
|
||||
<h3 class="text-2xl font-bold mb-6 text-secondary">เว็บพร้อม คุณพร้อม ธุรกิจพร้อมเติบโต</h3>
|
||||
<p class="text-lg text-gray-600">เมื่อเว็บเสร็จ คุณไม่ได้ทิ้งเราไป เรายังอยู่ดูแล</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-6 mb-20">
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">📦</div>
|
||||
<h4 class="font-bold mb-2">1. ส่งมอบงาน</h4>
|
||||
<p class="text-sm text-gray-600">เราส่งเว็บให้คุณตรวจสอบ</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">📚</div>
|
||||
<h4 class="font-bold mb-2">2. อบรมใช้งาน</h4>
|
||||
<p class="text-sm text-gray-600">สอนคุณหรือทีมจัดการเว็บพื้นฐาน</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">🎉</div>
|
||||
<h4 class="font-bold mb-2">3. Launch</h4>
|
||||
<p class="text-sm text-gray-600">เปิดเว็บอย่างเป็นทางการ</p>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-gray-light rounded-xl">
|
||||
<div class="text-4xl mb-4">🤝</div>
|
||||
<h4 class="font-bold mb-2">4. Support</h4>
|
||||
<p class="text-sm text-gray-600">เราพร้อมช่วยเหลือหลังเปิดเว็บ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-light p-8 rounded-2xl mb-12">
|
||||
<h4 class="text-2xl font-bold mb-6 text-center">สิ่งที่รวมหลังส่งมอบ</h4>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Support ทางเทคนิค (ตามแพ็กเกจ)</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> แนะนำการอัปเดตเนื้อหา</li>
|
||||
</ul>
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> คำปรึกษา SEO เบื้องต้น</li>
|
||||
<li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> แจ้งเตือนอัปเดตความปลอดภัย</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<h4 class="text-2xl font-bold mb-6">แล้วหลังจากนั้น?</h4>
|
||||
<div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
<div class="text-center p-6 bg-white rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">📈</div>
|
||||
<h5 class="font-bold mb-2">คุณโฟกัสทำธุรกิจ</h5>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-white rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">🌐</div>
|
||||
<h5 class="font-bold mb-2">เว็บทำงานเป็นหน้าร้าน</h5>
|
||||
</div>
|
||||
<div class="text-center p-6 bg-white rounded-xl shadow">
|
||||
<div class="text-4xl mb-4">🤝</div>
|
||||
<h5 class="font-bold mb-2">เราพร้อมช่วยเหลือ</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Our Process Works -->
|
||||
<section class="py-20 bg-secondary text-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">ทำไมกระบวนการของเราได้ผล?</h2>
|
||||
<div class="grid md:grid-cols-4 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-4">🎯</div>
|
||||
<h3 class="text-xl font-bold mb-2">โปร่งใส</h3>
|
||||
<p class="text-gray-200">คุณรู้ทุกขั้นตอน ไม่มีอะไรซ่อน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-4">⚡</div>
|
||||
<h3 class="text-xl font-bold mb-2">รวดเร็ว</h3>
|
||||
<p class="text-gray-200">AI Agents ช่วยลดเวลาทำงาน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-4">💰</div>
|
||||
<h3 class="text-xl font-bold mb-2">คุ้มค่า</h3>
|
||||
<p class="text-gray-200">เว็บฟรี จ่ายแค่ค่า Server รายปี</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-6xl mb-4">🤝</div>
|
||||
<h3 class="text-xl font-bold mb-2">เป็นพาร์ทเนอร์</h3>
|
||||
<p class="text-gray-200">เราอยู่ด้วยตลอด ไม่ใช่ทำแล้วหายไป</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">พร้อมเริ่มขั้นตอนที่ 1 หรือยัง?</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="/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="tel:0809955945" class="bg-accent-green text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">📞 080-995-5945</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user