From 861afce086d8838d029d12298a20026e0eb35af4 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Fri, 27 Feb 2026 21:30:29 +0700
Subject: [PATCH] Redesign Services page and fix featured products images on
 homepage

---
 src/app/page.tsx          |  10 +-
 src/app/services/page.tsx | 260 ++++++++++++++++++++++++++++++++------
 2 files changed, 229 insertions(+), 41 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e87b5694f..6e57d2ea2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,15 @@ import Link from 'next/link';
 import { productCategories, siteConfig } from '@/data/site-config';
 
 export default function HomePage() {
-  const featuredProducts = productCategories.slice(0, 6);
+  // Featured products with proper images - manually selected for variety
+  const featuredProducts = [
+    productCategories.find(p => p.id === 'ppr-elephant')!,
+    productCategories.find(p => p.id === 'hdpe')!,
+    productCategories.find(p => p.id === 'valve')!,
+    productCategories.find(p => p.id === 'grilles')!,
+    productCategories.find(p => p.id === 'thermobreak')!,
+    productCategories.find(p => p.id === 'upvc')!,
+  ];
 
   return (
     <>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index a2f581f4f..aad8928d9 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
 export const metadata = {
   title: 'บริการของเรา',
@@ -9,75 +10,254 @@ const services = [
   {
     title: 'จำหน่ายวัสดุท่อ',
     description: 'จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร สินค้าคุณภาพ ราคาแข่งขันได้',
-    image: '/images/2021/03/ppr-pipe_000C.jpg',
+    icon: (
+      <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+    ),
   },
   {
     title: 'ให้คำปรึกษา',
     description: 'ทีมงานมืออาชีพพร้อมให้คำปรึกษาเกี่ยวกับการเลือกวัสดุท่อที่เหมาะสมกับโครงการของคุณ',
-    image: '/images/2021/03/hdpe-pipe_000C.jpg',
+    icon: (
+      <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+      </svg>
+    ),
   },
   {
     title: 'ออกแบบระบบ',
     description: 'บริการออกแบบระบบท่อน้ำ ระบบดับเพลิง และระบบปรับอากาศ โดยวิศวกรผู้เชี่ยวชาญ',
-    image: '/images/2021/03/valve_000C.jpg',
+    icon: (
+      <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+      </svg>
+    ),
+  },
+  {
+    title: 'ติดตั้งระบบ',
+    description: 'ทีมช่างผู้เชี่ยวชาญติดตั้งระบบท่อครบวงจร พร้อมรับประกันงาน',
+    icon: (
+      <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
   },
   {
     title: 'จัดส่งสินค้า',
     description: 'บริการจัดส่งสินค้าทั่วประเทศ รวดเร็ว ปลอดภัย มีประกันความเสียหาย',
-    image: '/images/2021/03/hdpe-welding_000C-1.jpg',
+    icon: (
+      <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+      </svg>
+    ),
+  },
+  {
+    title: 'บริการหลังการขาย',
+    description: 'ทีมงานพร้อมให้การดูแลและบริการซ่อมบำรุงหลังการขายตลอดอายุการใช้งาน',
+    icon: (
+      <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
+      </svg>
+    ),
+  },
+];
+
+const processSteps = [
+  {
+    step: '01',
+    title: 'ปรึกษา',
+    description: 'ติดต่อเราเพื่อปรึกษาเกี่ยวกับความต้องการของโครงการ',
+  },
+  {
+    step: '02',
+    title: 'ออกแบบ',
+    description: 'ทีมวิศวกรออกแบบระบบให้เหมาะสมกับการใช้งาน',
+  },
+  {
+    step: '03',
+    title: 'เสนอราคา',
+    description: 'เสนอราคาสินค้าและบริการอย่างโปร่งใส',
+  },
+  {
+    step: '04',
+    title: 'ติดตั้ง',
+    description: 'ทีมช่างติดตั้งโดยมืออาชีพตรงตามกำหนด',
   },
 ];
 
 export default function ServicesPage() {
   return (
-    <div className="pt-32 pb-16">
-      <div className="container mx-auto px-4">
-        {/* Hero */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">
-            บริการ<span className="text-primary-600">ของเรา</span>
-          </h1>
-          <p className="text-xl text-secondary-600 max-w-2xl mx-auto">
-            บริการครบวงจรตั้งแต่การให้คำปรึกษาจนถึงการจัดส่งสินค้า
-          </p>
+    <div className="pt-20">
+      {/* Hero Section */}
+      <section className="relative h-[50vh] min-h-[400px] bg-secondary-900">
+        <div className="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
+        <Image
+          src="/images/2021/03/hdpe-pipe_000C.jpg"
+          alt="บริการของเรา"
+          fill
+          className="object-cover opacity-40"
+          priority
+        />
+        <div className="relative z-20 container mx-auto px-4 h-full flex items-center">
+          <div className="max-w-2xl">
+            <span className="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
+              บริการครบวงจร
+            </span>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
+              บริการ<span className="text-primary-400">ของเรา</span>
+            </h1>
+            <p className="text-xl text-secondary-200">
+              ตั้งแต่การให้คำปรึกษา ออกแบบ จัดส่ง จนถึงติดตั้ง เราพร้อมดูแลโครงการของคุณครบวงจร
+            </p>
+          </div>
         </div>
+      </section>
 
-        {/* Services Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          {services.map((service, index) => (
-            <div key={index} className="card overflow-hidden group">
-              <div className="relative h-64 bg-secondary-100">
-                <Image
-                  src={service.image}
-                  alt={service.title}
-                  fill
-                  className="object-cover group-hover:scale-105 transition-transform duration-300"
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-secondary-900/80 to-transparent" />
-                <div className="absolute bottom-0 left-0 right-0 p-6">
-                  <h3 className="text-2xl font-bold text-white">{service.title}</h3>
+      {/* Services Grid */}
+      <section className="py-20 bg-white">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {services.map((service, index) => (
+              <div 
+                key={index} 
+                className="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl"
+              >
+                <div className="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
+                  {service.icon}
+                </div>
+                <h3 className="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
+                  {service.title}
+                </h3>
+                <p className="text-secondary-600 group-hover:text-primary-100 transition-colors">
+                  {service.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Process Section */}
+      <section className="py-20 bg-secondary-900">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+              ขั้นตอน<span className="text-primary-400">การทำงาน</span>
+            </h2>
+            <p className="text-secondary-300 text-lg max-w-2xl mx-auto">
+              เราให้ความสำคัญกับทุกขั้นตอน เพื่อให้ลูกค้าได้รับบริการที่ดีที่สุด
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            {processSteps.map((item, index) => (
+              <div key={index} className="relative">
+                <div className="text-center">
+                  <span className="text-6xl font-bold text-primary-600/30">{item.step}</span>
+                  <h3 className="text-xl font-bold text-white mt-4 mb-2">{item.title}</h3>
+                  <p className="text-secondary-400">{item.description}</p>
+                </div>
+                {index < processSteps.length - 1 && (
+                  <div className="hidden lg:block absolute top-8 right-0 transform translate-x-1/2">
+                    <svg className="w-8 h-8 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Why Choose Us */}
+      <section className="py-20 bg-secondary-50">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <h2 className="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">
+                ทำไมต้องเลือก<span className="text-primary-600">ดีลพลัสเทค</span>
+              </h2>
+              <div className="space-y-6">
+                <div className="flex gap-4">
+                  <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-secondary-900 mb-1">ประสบการณ์กว่า 10 ปี</h3>
+                    <p className="text-secondary-600">เชี่ยวชาญด้านระบบท่อและอุปกรณ์ครบวงจร</p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-secondary-900 mb-1">สินค้าคุณภาพ</h3>
+                    <p className="text-secondary-600">สินค้าผ่านมาตรฐาน มอก. / FM / UL พร้อมรับประกัน</p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-secondary-900 mb-1">ทีมงานมืออาชีพ</h3>
+                    <p className="text-secondary-600">วิศวกรและช่างผู้เชี่ยวชาญพร้อมให้คำปรึกษา</p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <div className="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-secondary-900 mb-1">บริการรวดเร็ว</h3>
+                    <p className="text-secondary-600">จัดส่งสินค้าทั่วประเทศ ตรงตามกำหนด</p>
+                  </div>
                 </div>
               </div>
-              <div className="p-6">
-                <p className="text-secondary-600">{service.description}</p>
-              </div>
             </div>
-          ))}
+            <div className="relative aspect-video bg-secondary-200 rounded-2xl overflow-hidden">
+              <Image
+                src="/images/2021/03/hdpe-welding_000C-1.jpg"
+                alt="ทีมงานมืออาชีพ"
+                fill
+                className="object-cover"
+              />
+            </div>
+          </div>
         </div>
+      </section>
 
-        {/* CTA */}
-        <div className="mt-16 bg-secondary-800 rounded-2xl p-8 md:p-12 text-center">
-          <h2 className="text-3xl font-bold text-white mb-4">
+      {/* CTA */}
+      <section className="py-20 bg-primary-600">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
             พร้อมเริ่มโครงการของคุณ?
           </h2>
-          <p className="text-secondary-300 mb-6 max-w-xl mx-auto">
+          <p className="text-primary-100 text-lg mb-8 max-w-2xl mx-auto">
             ติดต่อเราวันนี้เพื่อรับคำปรึกษาและใบเสนอราคาฟรี
           </p>
-          <a href="/contact-us" className="btn-primary">
-            ติดต่อเรา
-          </a>
+          <div className="flex flex-wrap justify-center gap-4">
+            <Link href="/contact-us" className="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
+              ติดต่อเรา
+            </Link>
+            <a href="tel:090-555-1415" className="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
+              โทร: 090-555-1415
+            </a>
+          </div>
         </div>
-      </div>
+      </section>
     </div>
   );
 }