Complete website updates

Changes:
1. Removed Chatbot as separate service (integrated in AI Automation)
2. Added official social media icons (Facebook, Twitter, LinkedIn logos)
3. Added submenu in navigation for all services
4. Updated footer to match services (5 services)
5. Reordered services: Website, App, AI Transform, Marketing, AI Automation
6. All menu items link to specific pages (not landing page)
7. Redesigned process section (grid cards instead of connected line)
8. Added blog with Astro Content Collections (4 posts as .md files)
9. Created blog listing and individual post pages
10. All services have dedicated pages with original content

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

Blog:
- 4 posts migrated from original site
- Astro Content Collections setup
- /blog listing page
- Dynamic /blog/[slug] pages

src/pages/index.astro

@@ -11,12 +11,8 @@ import Layout from '../layouts/Layout.astro'
     </div>
     <div class="container mx-auto px-4 relative z-10">
       <div class="max-w-5xl mx-auto text-center">
-        <h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary leading-tight">
-          เปลี่ยนองค์กรของคุณด้วย<br /><span class="text-accent-blue">AI Transformation</span>
-        </h1>
-        <p class="text-2xl md:text-3xl text-gray-600 mb-10 max-w-3xl mx-auto">
-          เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้
-        </p>
+        <h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary leading-tight">เปลี่ยนองค์กรของคุณด้วย<br /><span class="text-accent-blue">AI Transformation</span></h1>
+        <p class="text-2xl md:text-3xl text-gray-600 mb-10 max-w-3xl mx-auto">เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้</p>
         <div class="flex flex-col sm:flex-row gap-5 justify-center">
           <a href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 ปรึกษาผู้เชี่ยวชาญ</a>
           <a href="#services" class="btn-secondary text-xl shadow-xl">ดูบริการของเรา</a>
@@ -25,7 +21,7 @@ import Layout from '../layouts/Layout.astro'
     </div>
   </section>
 
-  <!-- Services Section - ALL Original Services -->
+  <!-- Services Section - 5 Services (No Chatbot) -->
   <section id="services" class="py-20 bg-white">
     <div class="container mx-auto px-4">
       <div class="text-center mb-16">
@@ -34,49 +30,7 @@ import Layout from '../layouts/Layout.astro'
       </div>
       
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-        <!-- Service 1: AI Transformation (was Digital Transformation) -->
-        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="h-48 relative">
-            <img src="/images/hero/strategy-ai.png" alt="AI Transformation" class="w-full h-full object-cover" loading="lazy" />
-            <div class="absolute inset-0 gradient-ai opacity-90"></div>
-            <div class="absolute inset-0 flex items-center justify-center text-8xl">🏢</div>
-          </div>
-          <div class="p-6">
-            <h3 class="text-2xl font-bold mb-3">ที่ปรึกษาองค์กร AI</h3>
-            <p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการ ปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น จนทำให้ได้ข้อมูลอย่างเป็นระบบ และนำมาใช้ประโยชน์ในการบริหารได้</p>
-            <a href="/ai-transformation-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
-          </div>
-        </div>
-
-        <!-- Service 2: Online Marketing Consult -->
-        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="h-48 relative">
-            <img src="/images/hero/automation-ai.png" alt="Online Marketing" class="w-full h-full object-cover" loading="lazy" />
-            <div class="absolute inset-0 gradient-primary opacity-90"></div>
-            <div class="absolute inset-0 flex items-center justify-center text-8xl">📱</div>
-          </div>
-          <div class="p-6">
-            <h3 class="text-2xl font-bold mb-3">ที่ปรึกษาการตลาดออนไลน์</h3>
-            <p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน</p>
-            <a href="/online-marketing-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
-          </div>
-        </div>
-
-        <!-- Service 3: Full-service Marketing -->
-        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
-          <div class="h-48 relative">
-            <img src="/images/hero/analytics-ai.png" alt="Full Marketing" class="w-full h-full object-cover" loading="lazy" />
-            <div class="absolute inset-0 bg-accent-purple opacity-90"></div>
-            <div class="absolute inset-0 flex items-center justify-center text-8xl">📢</div>
-          </div>
-          <div class="p-6">
-            <h3 class="text-2xl font-bold mb-3">บริการตลาดออนไลน์ครบวงจร</h3>
-            <p class="text-gray-600 mb-4">บริการในการทำการตลาดออนไลน์แบบครบวงจร เหมาะสำหรับองค์กรที่ต้องการทีมงานวางกลยุทธ์ และผลิตสื่อพร้อมกัน</p>
-            <a href="/online-marketing-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
-          </div>
-        </div>
-
-        <!-- Service 4: Website Development -->
+        <!-- Service 1: Website Development -->
         <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
           <div class="h-48 relative">
             <img src="/images/hero/training-ai.png" alt="Website" class="w-full h-full object-cover" loading="lazy" />
@@ -90,7 +44,7 @@ import Layout from '../layouts/Layout.astro'
           </div>
         </div>
 
-        <!-- Service 5: App Development -->
+        <!-- Service 2: App Development -->
         <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
           <div class="h-48 relative">
             <img src="/images/hero/strategy-ai.png" alt="App" class="w-full h-full object-cover" loading="lazy" />
@@ -104,15 +58,43 @@ import Layout from '../layouts/Layout.astro'
           </div>
         </div>
 
-        <!-- Service 6: AI Chatbot (integrated, not separate) -->
+        <!-- Service 3: AI Transformation -->
         <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
           <div class="h-48 relative">
-            <img src="/images/hero/chatbot-ai.png" alt="AI Chatbot" class="w-full h-full object-cover" loading="lazy" />
-            <div class="absolute inset-0 gradient-primary opacity-90"></div>
-            <div class="absolute inset-0 flex items-center justify-center text-8xl">🤖</div>
+            <img src="/images/hero/strategy-ai.png" alt="AI Transformation" class="w-full h-full object-cover" loading="lazy" />
+            <div class="absolute inset-0 gradient-ai opacity-90"></div>
+            <div class="absolute inset-0 flex items-center justify-center text-8xl">🏢</div>
           </div>
           <div class="p-6">
-            <h3 class="text-2xl font-bold mb-3">ระบบแชทบอท (AI)</h3>
+            <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>
+
+        <!-- Service 4: Online Marketing -->
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
+          <div class="h-48 relative">
+            <img src="/images/hero/automation-ai.png" alt="Marketing" class="w-full h-full object-cover" loading="lazy" />
+            <div class="absolute inset-0 gradient-primary opacity-90"></div>
+            <div class="absolute inset-0 flex items-center justify-center text-8xl">📱</div>
+          </div>
+          <div class="p-6">
+            <h3 class="text-2xl font-bold mb-3">ที่ปรึกษาการตลาดออนไลน์</h3>
+            <p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน</p>
+            <a href="/online-marketing-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
+          </div>
+        </div>
+
+        <!-- Service 5: AI Automation -->
+        <div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
+          <div class="h-48 relative">
+            <img src="/images/hero/chatbot-ai.png" alt="AI Automation" class="w-full h-full object-cover" loading="lazy" />
+            <div class="absolute inset-0 gradient-primary opacity-90"></div>
+            <div class="absolute inset-0 flex items-center justify-center text-8xl">⚙️</div>
+          </div>
+          <div class="p-6">
+            <h3 class="text-2xl font-bold mb-3">AI Automation</h3>
             <p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางระบบแชทบอท โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง</p>
             <a href="/ai-automation" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
           </div>
@@ -121,7 +103,7 @@ import Layout from '../layouts/Layout.astro'
     </div>
   </section>
 
-  <!-- Strategy Section (from original) -->
+  <!-- Strategy Section -->
   <section class="py-20 bg-gray-light">
     <div class="container mx-auto px-4">
       <div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
@@ -130,16 +112,14 @@ import Layout from '../layouts/Layout.astro'
         </div>
         <div>
           <h2 class="text-4xl font-bold mb-6 text-secondary">เพราะแต่ละธุรกิจ มี<br /><span class="text-accent-blue">จุดแข็งและจุดอ่อน</span> ที่ไม่เหมือนกัน</h2>
-          <p class="text-lg text-gray-600 mb-8">
-            กลยุทธ์การตลาดออนไลน์จากเรา จะมีแนวคิดพื้นฐาน คือ การประหยัด ต้นทุน และเพิ่มโอกาสในการขายให้กับลูกค้า เช่น ระบบที่ทำให้ลูกค้า ประหยัดค่าใช้จ่ายด้านบุคลากร ระบบที่ไม่จำเป็นต้องใช้คนที่มีทักษะสูง และระบบที่ช่วยหาลูกค้าได้ง่ายขึ้น
-          </p>
+          <p class="text-lg text-gray-600 mb-8">กลยุทธ์การตลาดออนไลน์จากเรา จะมีแนวคิดพื้นฐาน คือ การประหยัด ต้นทุน และเพิ่มโอกาสในการขายให้กับลูกค้า</p>
           <a href="#contactform" class="btn-secondary text-lg inline-block">สนใจติดต่อเรา</a>
         </div>
       </div>
     </div>
   </section>
 
-  <!-- Process Section (Fixed connector lines) -->
+  <!-- Process Section - New Grid Layout -->
   <section id="process" class="py-20 bg-white">
     <div class="container mx-auto px-4">
       <div class="text-center mb-16">
@@ -147,34 +127,31 @@ import Layout from '../layouts/Layout.astro'
         <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">
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
         <!-- Step 1 -->
-        <div class="process-step text-center">
-          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white shadow-xl">1</div>
-          <div class="hidden md:block process-step-connector"></div>
+        <div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
+          <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 shadow-xl">1</div>
           <h3 class="text-2xl font-bold mb-3">วิเคราะห์</h3>
           <p class="text-gray-600">ศึกษาธุรกิจ วิเคราะห์ปัญหา หาโอกาสใช้ AI</p>
         </div>
         
         <!-- Step 2 -->
-        <div class="process-step text-center">
-          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full gradient-ai flex items-center justify-center text-4xl font-bold text-white shadow-xl">2</div>
-          <div class="hidden md:block process-step-connector"></div>
+        <div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
+          <div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-ai flex items-center justify-center text-4xl font-bold text-white shadow-xl">2</div>
           <h3 class="text-2xl font-bold mb-3">วางแผน</h3>
           <p class="text-gray-600">ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน</p>
         </div>
         
         <!-- Step 3 -->
-        <div class="process-step text-center">
-          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full bg-accent-purple flex items-center justify-center text-4xl font-bold text-white shadow-xl">3</div>
-          <div class="hidden md:block process-step-connector"></div>
+        <div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
+          <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 shadow-xl">3</div>
           <h3 class="text-2xl font-bold mb-3">ดำเนินการ</h3>
           <p class="text-gray-600">ติดตั้งระบบ AI ฝึกอบรมทีม เริ่มใช้งาน</p>
         </div>
         
         <!-- Step 4 -->
-        <div class="process-step text-center">
-          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full bg-accent-teal flex items-center justify-center text-4xl font-bold text-white shadow-xl">4</div>
+        <div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
+          <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-teal flex items-center justify-center text-4xl font-bold text-white shadow-xl">4</div>
           <h3 class="text-2xl font-bold mb-3">วัดผล</h3>
           <p class="text-gray-600">ติดตามผล ปรับปรุงอย่างต่อเนื่อง</p>
         </div>