Complete redesign with ALL original services

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.

src/pages/ai-automation.astro

@@ -2,19 +2,19 @@
 import Layout from '../layouts/Layout.astro'
 ---
 
-<Layout title="AI Automation | MoreminiMore - Chatbot & Workflow">
+<Layout title="AI Automation & Chatbot | MoreminiMore">
-  <section class="relative py-24 gradient-primary text-white overflow-hidden">
+  <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>
+        <div class="text-8xl mb-6">🤖</div>
-        <h1 class="text-4xl md:text-6xl font-bold mb-8">AI Automation</h1>
+        <h1 class="text-5xl md:text-7xl font-bold mb-8">ระบบแชทบอท AI & Automation</h1>
-        <p class="text-2xl text-gray-100 mb-10">ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพด้วย Chatbot, RPA และ Workflow Automation</p>
+        <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="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-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</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>
+      <h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการระบบแชทบอท AI</h2>
-      <div class="grid md:grid-cols-2 gap-8 mb-12">
+      <div class="prose prose-lg max-w-none">
-        <div class="glass p-6 rounded-2xl border border-gray-200 card-hover">
+        <p class="text-xl text-gray-600 mb-8">
-          <div class="text-5xl mb-4">💬</div>
+          บริการให้คำปรึกษาในการวางระบบแชทบอท โดยการแนะนำแชทบอทที่เหมาะสมกับลูกค้า นอกจากนี้ เรายังมี Partner กับระบบบอทที่สามารถปิดการขายและชำระเงินได้ด้วยตัวเอง
-          <h3 class="text-2xl font-bold mb-3">AI Chatbot</h3>
+        </p>
-          <p class="text-gray-600 mb-4">ตอบคำถามลูกค้าอัตโนมัติ 24/7 ลดงานบริการลูกค้า 40%</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>• ธุรกิจที่ต้องการตอบคำถามลูกค้าอัตโนมัติ</li>
-            <li>• Website Chat Widget</li>
+            <li>• องค์กรที่ต้องการลดงานบริการลูกค้า</li>
-            <li>• AI-powered Responses</li>
+            <li>• ร้านค้าที่ต้องการปิดการขาย 24/7</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>
           </ul>
         </div>
       </div>
-      <div class="text-center">
+    </div>
-        <a href="tel:0809955945" class="btn-accent text-lg shadow-xl inline-block">📞 ปรึกษาฟรี</a>
+  </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>

src/pages/ai-transformation-consult.astro

@@ -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>

src/pages/app-development.astro

@@ -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>

src/pages/index.astro

@@ -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">
+  <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 opacity-10">
+    <div class="absolute inset-0">
-      <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>
+      <img src="/images/hero/homepage-ai.png" alt="AI Transformation" class="w-full h-full object-cover opacity-10" loading="eager" />
-      <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 inset-0 bg-gradient-to-br from-yellow-50/80 via-blue-50/80 to-purple-50/80"></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>
     </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">
+        <h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary leading-tight">
-          เปลี่ยนองค์กรของคุณด้วย<br />
+          เปลี่ยนองค์กรของคุณด้วย<br /><span class="text-accent-blue">AI Transformation</span>
-          <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">
+        <p class="text-2xl md:text-3xl text-gray-600 mb-10 max-w-3xl mx-auto">
-          เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้ เราพร้อมพาคุณสู่ยุค AI อย่างมั่นใจ
+          เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ 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 href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 ปรึกษาผู้เชี่ยวชาญ</a>
-            📞 ปรึกษาผู้เชี่ยวชาญ
+          <a href="#services" class="btn-secondary text-xl shadow-xl">ดูบริการของเรา</a>
-          </a>
-          <a href="#services" class="btn-secondary text-lg shadow-xl">
-            ดูบริการของเรา
-          </a>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Tech Stack Section -->
+  <!-- Services Section - ALL Original Services -->
-  <section class="py-20 bg-white">
+  <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">
+        <h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">บริการของเรา</h2>
-          เทคโนโลยี AI ที่เรานำมาใช้
+        <p class="text-xl text-gray-600 max-w-3xl mx-auto">เพื่อตอบโจทย์ของลูกค้า</p>
-        </h2>
-        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
-          เราคัดสรรเทคโนโลยี AI ที่ดีที่สุดในโลก มาประยุกต์ใช้กับธุรกิจของคุณ
-        </p>
       </div>
       
-      <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-8">
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-        <!-- Tech 1 -->
+        <!-- Service 1: AI Transformation (was Digital Transformation) -->
-        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="text-5xl mb-4">🤖</div>
+          <div class="h-48 relative">
-          <h3 class="text-xl font-bold mb-2">Machine Learning</h3>
+            <img src="/images/hero/strategy-ai.png" alt="AI Transformation" class="w-full h-full object-cover" loading="lazy" />
-          <p class="text-gray-600 text-base">ทำนายแนวโน้ม วิเคราะห์ข้อมูลเชิงลึก</p>
+            <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 -->
+        <!-- Service 2: Online Marketing Consult -->
-        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="text-5xl mb-4">💬</div>
+          <div class="h-48 relative">
-          <h3 class="text-xl font-bold mb-2">NLP / Chatbot</h3>
+            <img src="/images/hero/automation-ai.png" alt="Online Marketing" class="w-full h-full object-cover" loading="lazy" />
-          <p class="text-gray-600 text-base">ประมวลผลภาษาธรรมชาติ ตอบคำถามอัตโนมัติ</p>
+            <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 -->
+        <!-- Service 3: Full-service Marketing -->
-        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="text-5xl mb-4">📊</div>
+          <div class="h-48 relative">
-          <h3 class="text-xl font-bold mb-2">Predictive Analytics</h3>
+            <img src="/images/hero/analytics-ai.png" alt="Full Marketing" class="w-full h-full object-cover" loading="lazy" />
-          <p class="text-gray-600 text-base">วิเคราะห์ล่วงหน้า วางแผนแม่นยำ</p>
+            <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 -->
+        <!-- Service 4: Website Development -->
-        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="text-5xl mb-4">👁️</div>
+          <div class="h-48 relative">
-          <h3 class="text-xl font-bold mb-2">Computer Vision</h3>
+            <img src="/images/hero/training-ai.png" alt="Website" class="w-full h-full object-cover" loading="lazy" />
-          <p class="text-gray-600 text-base">วิเคราะห์ภาพ ตรวจสอบอัตโนมัติ</p>
+            <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 -->
+        <!-- Service 5: App Development -->
-        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="text-5xl mb-4">🔄</div>
+          <div class="h-48 relative">
-          <h3 class="text-xl font-bold mb-2">RPA</h3>
+            <img src="/images/hero/strategy-ai.png" alt="App" class="w-full h-full object-cover" loading="lazy" />
-          <p class="text-gray-600 text-base">อัตโนมัติกระบวนการทำงาน</p>
+            <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 -->
+        <!-- Service 6: AI Chatbot (integrated, not separate) -->
-        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="text-5xl mb-4">📈</div>
+          <div class="h-48 relative">
-          <h3 class="text-xl font-bold mb-2">Business Intelligence</h3>
+            <img src="/images/hero/chatbot-ai.png" alt="AI Chatbot" class="w-full h-full object-cover" loading="lazy" />
-          <p class="text-gray-600 text-base">Dashboard แสดงผลแบบ Real-time</p>
+            <div class="absolute inset-0 gradient-primary opacity-90"></div>
-        </div>
+            <div class="absolute inset-0 flex items-center justify-center text-8xl">🤖</div>
-        
+          </div>
-        <!-- Tech 7 -->
+          <div class="p-6">
-        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
+            <h3 class="text-2xl font-bold mb-3">ระบบแชทบอท (AI)</h3>
-          <div class="text-5xl mb-4">🌐</div>
+            <p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางระบบแชทบอท โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง</p>
-          <h3 class="text-xl font-bold mb-2">Generative AI</h3>
+            <a href="/ai-automation" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
-          <p class="text-gray-600 text-base">สร้างเนื้อหา อัตโนมัติด้วย AI</p>
+          </div>
-        </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>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Services Section -->
+  <!-- Strategy Section (from original) -->
-  <section id="services" class="py-20 bg-gray-light">
+  <section class="py-20 bg-gray-light">
     <div class="container mx-auto px-4">
-      <div class="text-center mb-16">
+      <div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
-        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
+        <div>
-          บริการที่ปรึกษาองค์กร AI
+          <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" />
-        </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>
-        
+        <div>
-        <!-- Service 2 -->
+          <h2 class="text-4xl font-bold mb-6 text-secondary">เพราะแต่ละธุรกิจ มี<br /><span class="text-accent-blue">จุดแข็งและจุดอ่อน</span> ที่ไม่เหมือนกัน</h2>
-        <div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
+          <p class="text-lg text-gray-600 mb-8">
-          <div class="h-48 gradient-primary flex items-center justify-center">
+            กลยุทธ์การตลาดออนไลน์จากเรา จะมีแนวคิดพื้นฐาน คือ การประหยัด ต้นทุน และเพิ่มโอกาสในการขายให้กับลูกค้า เช่น ระบบที่ทำให้ลูกค้า ประหยัดค่าใช้จ่ายด้านบุคลากร ระบบที่ไม่จำเป็นต้องใช้คนที่มีทักษะสูง และระบบที่ช่วยหาลูกค้าได้ง่ายขึ้น
-            <div class="text-7xl">⚙️</div>
+          </p>
-          </div>
+          <a href="#contactform" class="btn-secondary text-lg inline-block">สนใจติดต่อเรา</a>
-          <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>
       </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 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>
-        </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="process-step text-center">
-          <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">
+          <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>
-            1
+          <div class="hidden md:block process-step-connector"></div>
-          </div>
+          <h3 class="text-2xl font-bold mb-3">วิเคราะห์</h3>
-          <h3 class="text-xl font-bold mb-3">วิเคราะห์</h3>
+          <p class="text-gray-600">ศึกษาธุรกิจ วิเคราะห์ปัญหา หาโอกาสใช้ AI</p>
-          <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>
         
         <!-- Step 2 -->
-        <div class="text-center relative">
+        <div class="process-step text-center">
-          <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">
+          <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>
-            2
+          <div class="hidden md:block process-step-connector"></div>
-          </div>
+          <h3 class="text-2xl font-bold mb-3">วางแผน</h3>
-          <h3 class="text-xl font-bold mb-3">วางแผน</h3>
+          <p class="text-gray-600">ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน</p>
-          <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>
         
         <!-- Step 3 -->
-        <div class="text-center relative">
+        <div class="process-step text-center">
-          <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">
+          <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>
-            3
+          <div class="hidden md:block process-step-connector"></div>
-          </div>
+          <h3 class="text-2xl font-bold mb-3">ดำเนินการ</h3>
-          <h3 class="text-xl font-bold mb-3">ดำเนินการ</h3>
+          <p class="text-gray-600">ติดตั้งระบบ AI ฝึกอบรมทีม เริ่มใช้งาน</p>
-          <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>
         
         <!-- Step 4 -->
-        <div class="text-center">
+        <div class="process-step 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">
+          <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>
-            4
+          <h3 class="text-2xl font-bold mb-3">วัดผล</h3>
-          </div>
+          <p class="text-gray-600">ติดตามผล ปรับปรุงอย่างต่อเนื่อง</p>
-          <h3 class="text-xl 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">
+      <h2 class="text-4xl md:text-6xl font-bold mb-6">พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?</h2>
-        พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?
+      <p class="text-2xl text-gray-100 mb-10 max-w-3xl mx-auto">ปรึกษาผู้เชี่ยวชาญฟรี</p>
-      </h2>
-      <p class="text-xl text-gray-100 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="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">
+        <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>
-          📞 080-995-5945
+        <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>
-        </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>
       </div>
     </div>
   </section>

src/pages/online-marketing-consult.astro

@@ -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>

src/pages/website-development.astro

@@ -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>

src/styles/global.css

@@ -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 {
+  html { scroll-behavior: smooth; }
-    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;
   }
-  
+  p { margin-bottom: 1.25em; font-size: 1.0625rem; }
-  /* Smooth animations */
+  * { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
-  * {
-    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); border: 1px solid rgba(255, 255, 255, 0.2); }
-  .glass {
+  .glass-dark { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
-    background: rgba(255, 255, 255, 0.1);
+  .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
-    backdrop-filter: blur(10px);
+  .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
-    -webkit-backdrop-filter: blur(10px);
+  .gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%); }
-    border: 1px solid rgba(255, 255, 255, 0.2);
+  .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; }
-  .glass-dark {
+  .btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3); }
-    background: rgba(0, 0, 0, 0.7);
+  .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; }
-    backdrop-filter: blur(10px);
+  .btn-secondary:hover { background-color: var(--color-secondary-light); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
-    -webkit-backdrop-filter: blur(10px);
+  .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; }
-    border: 1px solid rgba(255, 255, 255, 0.1);
+  .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4); }
-  }
-  
-  /* 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);
-  }
 }
 
 @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); }
-  
+  .animate-float { animation: float 6s ease-in-out infinite; }
-  /* Animation Utilities */
+  .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% {
+  0%, 100% { transform: translateY(0px); }
-    transform: translateY(0px);
+  50% { transform: translateY(-20px); }
-  }
-  50% {
-    transform: translateY(-20px);
-  }
 }
 
-/* Parallax Effect Class */
+/* Process Section - Fixed connector line positioning */
-.parallax {
+.process-step {
-  background-attachment: fixed;
+  position: relative;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
 }
+.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; }