From 57a8a1eb881b9b5c9ffa267c54fbb9c81e66278d Mon Sep 17 00:00:00 2001
From: Kunthawat <kunthawat@dealplustech.co.th>
Date: Mon, 16 Mar 2026 10:47:12 +0700
Subject: [PATCH] fix: Update homepage categories, product images, all-products
 page, mobile fixes

---
 src/components/common/Footer.astro            |   4 +-
 src/components/common/Header.astro            |   2 +-
 src/pages/about-us/index.astro                |   4 +-
 src/pages/all-products/index.astro            | 188 ++++++++++++++++++
 src/pages/all-projects/index.astro            |   2 +-
 src/pages/contact-us/index.astro              |   4 +-
 src/pages/dukelarrsen/index.astro             |   4 +-
 src/pages/durgo-avvs/index.astro              |   8 +-
 src/pages/grilles/index.astro                 |   8 +-
 src/pages/groove-coupling/index.astro         |   8 +-
 src/pages/index.astro                         |  12 +-
 src/pages/join-us/index.astro                 |   2 +-
 src/pages/pipe-coupling/index.astro           |   8 +-
 src/pages/pipe/index.astro                    |   6 +-
 src/pages/portfolio/index.astro               |   4 +-
 src/pages/pp-r-pp-rct-poloplast/index.astro   |   4 +-
 src/pages/privacy-policy/index.astro          |   2 +-
 src/pages/product/index.astro                 |   2 +-
 src/pages/realflex/index.astro                |   8 +-
 src/pages/services/index.astro                |   2 +-
 src/pages/terms-and-conditions/index.astro    |   2 +-
 src/pages/water-pump/index.astro              |   8 +-
 src/pages/water-treatment/index.astro         |   8 +-
 .../ฉนวนหุ้มท่อ-pipe-insulation/index.astro      |   6 +-
 src/pages/ท่อ-ppr-thai-ppr/index.astro         |   8 +-
 src/pages/ท่อ-upvc/index.astro                 |   8 +-
 src/pages/ท่อhdpe/index.astro                  |   8 +-
 src/pages/ท่อพีพีอาร์/index.astro                 |   4 +-
 src/pages/ท่อพีพีอาร์ตราช้าง/index.astro           |   6 +-
 src/pages/ท่อระบายน้ำ-3-ชั้น-ไซเลนท/index.astro   |   8 +-
 src/pages/ท่อและข้อต่อpvc/index.astro            |   8 +-
 src/pages/ท่อไซเลอร์/index.astro                |   8 +-
 .../index.astro                               |   4 +-
 src/pages/พุกต่างๆ/index.astro                  |   4 +-
 .../พุกเหล็ก-sleeve-anchor-bolt/index.astro     |   6 +-
 src/pages/ยูโบลท์-u-bolt/index.astro            |   6 +-
 .../ยูโบลท์-ประกับ-u-bolt-clamp/index.astro      |   6 +-
 src/pages/ยูโบลท์เหล็กแผ่น-ยูแบน-strap/index.astro |   4 +-
 src/pages/ระบบรั้ว/index.astro                  |   6 +-
 src/pages/ระบบรั้วไวน์แมน-vineman-2/index.astro  |   6 +-
 src/pages/รั้วเทวดา/index.astro                 |   6 +-
 src/pages/วาล์ว-valve/index.astro              |   8 +-
 .../index.astro                               |   4 +-
 .../index.astro                               |   6 +-
 src/pages/หัวจ่ายแอร์-ball-jet/index.astro       |   6 +-
 src/pages/อุปกรณ์ดับเพลิง/index.astro             |   6 +-
 src/pages/เครื่องเชื่อม-hdpe/index.astro          |   6 +-
 .../index.astro                               |   8 +-
 src/pages/เครื่องเชื่อมท่อพีพีอา/index.astro         |   6 +-
 src/pages/เควิสแฮงเกอร์/index.astro             |   4 +-
 .../เจโบลท์-แอลโบลท์-j-bolt-l-bolt/index.astro  |   6 +-
 src/pages/เทอร์โมเบรค-thermobreak/index.astro  |   8 +-
 src/pages/เม็กกรู๊ฟ-คับปลิ้ง/index.astro            |   4 +-
 src/pages/แคล้มประกับ-ชุบรุ้ง-ชุบ/index.astro       |   4 +-
 src/pages/แคล้มฟันจระเข้-beam-clamp/index.astro  |   6 +-
 .../index.astro                               |   6 +-
 src/pages/แคล้มเลเวล-level-clamp/index.astro   |   6 +-
 src/pages/แฮงเกอร์-แคล้ม-โบลท์-แหว/index.astro   |   6 +-
 58 files changed, 350 insertions(+), 162 deletions(-)
 create mode 100644 src/pages/all-products/index.astro

diff --git a/src/components/common/Footer.astro b/src/components/common/Footer.astro
index 87795ea..4f084fb 100644
--- a/src/components/common/Footer.astro
+++ b/src/components/common/Footer.astro
@@ -27,7 +27,7 @@ const mainCategories = [
 ];
 ---
 
-<footer class="footer py-8 md:py-12">
+<footer id="footer" class="footer py-8 md:py-12">
   <div class="container-custom">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
       <!-- Company Info -->
@@ -74,7 +74,7 @@ const mainCategories = [
           <h3 class="text-lg font-bold mb-4">ลิงก์ด่วน</h3>
           <ul class="space-y-2">
             <li><a href="/about-us" class="text-secondary-600 hover:text-green-600 transition-colors text-base">เกี่ยวกับเรา</a></li>
-            <li><a href="/pipe" class="text-secondary-600 hover:text-green-600 transition-colors text-base">สินค้าทั้งหมด</a></li>
+            <li><a href="/all-products" class="text-secondary-600 hover:text-green-600 transition-colors text-base">สินค้าทั้งหมด</a></li>
             <li><a href="/portfolio" class="text-secondary-600 hover:text-green-600 transition-colors text-base">ผลงาน</a></li>
             <li><a href="/contact-us" class="text-secondary-600 hover:text-green-600 transition-colors text-base">ติดต่อเรา</a></li>
           </ul>
diff --git a/src/components/common/Header.astro b/src/components/common/Header.astro
index 422643b..9b8931b 100644
--- a/src/components/common/Header.astro
+++ b/src/components/common/Header.astro
@@ -64,7 +64,7 @@ const categories = [
 ];
 ---
 
-<header class="navbar">
+<header id="header" class="navbar">
   <div class="container-custom">
     <div class="flex items-center justify-between h-20">
       <!-- Logo (No Text) -->
diff --git a/src/pages/about-us/index.astro b/src/pages/about-us/index.astro
index facf238..d3a1eab 100644
--- a/src/pages/about-us/index.astro
+++ b/src/pages/about-us/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="เกี่ยวกับเรา | About US" description="เกี่ยวกับเรา บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบน้ำ ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="about-content" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">เกี่ยวกับเรา</h1>
diff --git a/src/pages/all-products/index.astro b/src/pages/all-products/index.astro
new file mode 100644
index 0000000..722832c
--- /dev/null
+++ b/src/pages/all-products/index.astro
@@ -0,0 +1,188 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Header from '@/components/common/Header.astro';
+import Footer from '@/components/common/Footer.astro';
+
+const productCategories = [
+  {
+    name: 'ท่อ | Pipe',
+    slug: '/pipe',
+    image: '/images/products-cropped/foot-ppr1.jpg',
+    products: [
+      { name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr' },
+      { name: 'ท่อ PPR ตราช้าง', slug: '/ท่อพีพีอาร์ตราช้าง' },
+      { name: 'ท่อ PP-R Poloplast', slug: '/pp-r-pp-rct-poloplast' },
+      { name: 'ท่อ HDPE', slug: '/ท่อhdpe' },
+      { name: 'ท่อ UPVC', slug: '/ท่อ-upvc' },
+      { name: 'ท่อไซเลอร์', slug: '/ท่อไซเลอร์' },
+      { name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc' },
+      { name: 'ท่อระบายน้ำ 3 ชั้น', slug: '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท' },
+      { name: 'ท่อพีพีอาร์', slug: '/ท่อพีพีอาร์' },
+    ]
+  },
+  {
+    name: 'เครื่องเชื่อมท่อ',
+    slug: '/เครื่องเชื่อมท่อ-pipe-coupling-machine',
+    image: '/images/products-cropped/pipe-coupling-machine_000.jpg',
+    products: [
+      { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
+      { name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' },
+      { name: 'กรู๊ฟท่อ', slug: '/groove-coupling' },
+      { name: 'Pipe Coupling', slug: '/pipe-coupling' },
+      { name: 'Dukelarrsen', slug: '/dukelarrsen' },
+      { name: 'เม็กกรู๊ฟ', slug: '/เม็กกรู๊ฟ-คับปลิ้ง' },
+    ]
+  },
+  {
+    name: 'แฮงเกอร์ แคล้ม โบลท์',
+    slug: '/แฮงเกอร์-แคล้ม-โบลท์-แหว',
+    image: '/images/products-cropped/Hanger-Clamp-Bolt_000.jpg',
+    products: [
+      { name: 'สปริทริงแฮงเกอร์', slug: '/สปริทริงแฮงเกอร์-sr19-adjustable-split-ring-hanger' },
+      { name: 'เควิสแฮงเกอร์', slug: '/เควิสแฮงเกอร์' },
+      { name: 'แคล้มประกับ', slug: '/แคล้มประกับ-ชุบรุ้ง-ชุบ' },
+      { name: 'แคล้มฟันจระเข้', slug: '/แคล้มฟันจระเข้-beam-clamp' },
+      { name: 'แคล้มหยดน้ำ', slug: '/แคล้มหยดน้ำ-adjustable-band-hanger' },
+      { name: 'แคล้มเลเวล', slug: '/แคล้มเลเวล-level-clamp' },
+      { name: 'ยูโบลท์', slug: '/ยูโบลท์-u-bolt' },
+      { name: 'ยูโบลท์ ประกับ', slug: '/ยูโบลท์-ประกับ-u-bolt-clamp' },
+      { name: 'ยูโบลท์เหล็กแผ่น', slug: '/ยูโบลท์เหล็กแผ่น-ยูแบน-strap' },
+      { name: 'เจโบลท์ แอลโบลท์', slug: '/เจโบลท์-แอลโบลท์-j-bolt-l-bolt' },
+      { name: 'น็อต แหวน สกรู', slug: '/น็อต-แหวน-สกรู-hex-nut-flat-washer-hexagon-head-screw' },
+      { name: 'พุกต่างๆ', slug: '/พุกต่างๆ' },
+      { name: 'พุกเหล็ก', slug: '/พุกเหล็ก-sleeve-anchor-bolt' },
+      { name: 'สตัดเกลียวตลอด', slug: '/สตัดเกลียวตลอด-เหล็ก-threaded-rod' },
+    ]
+  },
+  {
+    name: 'วาล์ว | Valve',
+    slug: '/วาล์ว-valve',
+    image: '/images/products-cropped/valve_000C.jpg',
+    products: [
+      { name: 'วาล์ว', slug: '/วาล์ว-valve' },
+      { name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
+    ]
+  },
+  {
+    name: 'ปั๊มน้ำ',
+    slug: '/water-pump',
+    image: '/images/products-cropped/water-pump_000C.jpg',
+    products: [
+      { name: 'ปั๊มน้ำ', slug: '/water-pump' },
+    ]
+  },
+  {
+    name: 'อุปกรณ์ปรับอากาศ',
+    slug: '/หัวจ่ายแอร์-ball-jet',
+    image: '/images/products-cropped/Eye-Ball.jpg',
+    products: [
+      { name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
+      { name: 'กริลแอร์', slug: '/grilles' },
+    ]
+  },
+  {
+    name: 'อุปกรณ์ดับเพลิง',
+    slug: '/อุปกรณ์ดับเพลิง',
+    image: '/images/products-cropped/extinguishers_000C.jpg',
+    products: [
+      { name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
+    ]
+  },
+  {
+    name: 'ฉนวนหุ้มท่อ',
+    slug: '/ฉนวนหุ้มท่อ-pipe-insulation',
+    image: '/images/products-cropped/Thermobreak_-LS_0.png',
+    products: [
+      { name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
+      { name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
+      { name: 'Realflex', slug: '/realflex' },
+    ]
+  },
+  {
+    name: 'ระบบกรองน้ำ',
+    slug: '/water-treatment',
+    image: '/images/products-cropped/water-treatment_000C.jpg',
+    products: [
+      { name: 'ระบบกรองน้ำ', slug: '/water-treatment' },
+    ]
+  },
+  {
+    name: 'รั้วและระบบรั้ว',
+    slug: '/ระบบรั้ว',
+    image: '/images/products-cropped/vineman_000C.jpg',
+    products: [
+      { name: 'ระบบรั้ว', slug: '/ระบบรั้ว' },
+      { name: 'ระบบรั้วไวน์แมน', slug: '/ระบบรั้วไวน์แมน-vineman-2' },
+      { name: 'รั้วเทวดา', slug: '/รั้วเทวดา' },
+    ]
+  },
+];
+---
+
+<BaseLayout title="สินค้าทั้งหมด | All Products" description="สินค้าทั้งหมด ของ บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบน้ำ">
+  <Header slot="header" />
+  
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="all-products" class="section">
+      <div class="container-custom">
+        <div class="text-center mb-12">
+          <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4">สินค้าทั้งหมด</h1>
+          <p class="text-base sm:text-lg text-secondary-600 max-w-2xl mx-auto">
+            รวมสินค้าคุณภาพสูงของเราทั้งหมด จำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย และอุปกรณ์ระบบน้ำครบวงจร
+          </p>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
+          {productCategories.map(category => (
+            <a href={category.slug} class="product-card group">
+              <div class="product-card-image">
+                <img src={category.image} alt={category.name} onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              </div>
+              <div class="p-4">
+                <h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">{category.name}</h3>
+              </div>
+            </a>
+          ))}
+        </div>
+
+        <div class="mt-16">
+          <h2 class="text-xl sm:text-2xl font-bold text-secondary-900 mb-8 text-center">สินค้าทั้งหมดตามหมวดหมู่</h2>
+          <div class="space-y-8">
+            {productCategories.map(category => (
+              <div class="border border-gray-200 rounded-2xl overflow-hidden">
+                <div class="bg-green-600 px-6 py-4">
+                  <h3 class="text-xl font-bold text-white">{category.name}</h3>
+                </div>
+                <div class="p-6 bg-white">
+                  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                    {category.products.map(product => (
+                      <a href={product.slug} class="block p-4 rounded-xl border border-gray-200 hover:border-green-500 hover:bg-green-50 transition-all text-center">
+                        <span class="text-sm sm:text-base text-secondary-700 font-medium">{product.name}</span>
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div class="mt-12 text-center">
+          <p class="text-lg text-secondary-600 mb-6">ติดต่อเราเพื่อรับคำแนะนำและราคาพิเศษ</p>
+          <div class="flex flex-wrap justify-center gap-4">
+            <a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
+              <img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
+              <span>แชท Line</span>
+            </a>
+            <a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
+              <span>090-555-1415</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  
+  <Footer slot="footer" />
+</BaseLayout>
diff --git a/src/pages/all-projects/index.astro b/src/pages/all-projects/index.astro
index 2bae8c4..56469ba 100644
--- a/src/pages/all-projects/index.astro
+++ b/src/pages/all-projects/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">all-projects</h1>
diff --git a/src/pages/contact-us/index.astro b/src/pages/contact-us/index.astro
index 9a46ec0..fb28173 100644
--- a/src/pages/contact-us/index.astro
+++ b/src/pages/contact-us/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ติดต่อเรา" description="ติดต่อเรา บริษัท ดีล พลัส เทค จำกัด โทร 090-555-1415">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="contact-content" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">ติดต่อเรา</h1>
diff --git a/src/pages/dukelarrsen/index.astro b/src/pages/dukelarrsen/index.astro
index 90b0a52..ff60782 100644
--- a/src/pages/dukelarrsen/index.astro
+++ b/src/pages/dukelarrsen/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/durgo-avvs/index.astro b/src/pages/durgo-avvs/index.astro
index b4aa320..cfb0846 100644
--- a/src/pages/durgo-avvs/index.astro
+++ b/src/pages/durgo-avvs/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ระบบวาล์วเติมอากาศ DURGO AVVs" description="จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVsคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/durgo-clean.jpg" alt="ระบบวาล์วเติมอากาศ DURGO AVVs" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/durgo_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/grilles/index.astro b/src/pages/grilles/index.astro
index fed7c6f..08c36de 100644
--- a/src/pages/grilles/index.astro
+++ b/src/pages/grilles/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="กริลแอร์พลาสติก (Grilles air plastic)" description="จำหน่ายกริลแอร์พลาสติก (Grilles air plastic)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/grilles-clean.jpg" alt="กริลแอร์พลาสติก (Grilles air plastic)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/grilles_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/groove-coupling/index.astro b/src/pages/groove-coupling/index.astro
index 67e984c..c46c26f 100644
--- a/src/pages/groove-coupling/index.astro
+++ b/src/pages/groove-coupling/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="กรู๊ฟท่อ (Groove Coupling) - ข้อต่อกรู๊ฟ" description="จำหน่ายกรู๊ฟท่อ (Groove Coupling) - ข้อต่อกรู๊ฟคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/Grooved01.jpg" alt="กรู๊ฟท่อ (Groove Coupling) - ข้อต่อกรู๊ฟ" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/mech_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a8196d2..89cb329 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -39,8 +39,8 @@ const featuredProducts = [
 <BaseLayout title="หน้าแรก">
   <Header slot="header" />
   
-  <!-- Hero Section with PPR Product Images -->
-  <section class="relative bg-gradient-to-br from-green-50 via-white to-accent-50 section overflow-hidden">
+  <!-- Hero Section -->
+  <section id="hero" class="relative bg-white section overflow-hidden">
     <div class="container-custom">
       <div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
         <div class="animate-fade-in">
@@ -52,7 +52,7 @@ const featuredProducts = [
             บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
           </p>
           <div class="flex flex-wrap justify-center gap-3 md:gap-4">
-            <a href="/pipe" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 md:px-8 md:py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">ดูสินค้าทั้งหมด</a>
+            <a href="/all-products" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 md:px-8 md:py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">ดูสินค้าทั้งหมด</a>
             <a href="/contact-us" class="bg-white text-green-600 px-5 py-3 md:px-8 md:py-4 rounded-xl border-2 border-green-500 font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">ติดต่อเรา</a>
           </div>
           <div class="flex items-center sm:space-x-8 space-x-4 sm:mt-12 mt-8 justify-center">
@@ -89,7 +89,7 @@ const featuredProducts = [
   </section>
   
   <!-- Featured Products -->
-  <section class="section bg-gradient-to-br from-green-50 via-white to-accent-50">
+  <section id="featured-products" class="section bg-gray-50">
     <div class="container-custom">
       <div class="text-center mb-16">
         <h2 class="section-title">สินค้าแนะนำ</h2>
@@ -121,7 +121,7 @@ const featuredProducts = [
   </section>
   
   <!-- Product Categories -->
-  <section class="section bg-white">
+  <section id="product-categories" class="section bg-white">
     <div class="container-custom">
       <div class="text-center mb-16">
         <h2 class="section-title">หมวดหมู่สินค้าทั้งหมด</h2>
@@ -143,7 +143,7 @@ const featuredProducts = [
   </section>
   
   <!-- Why Choose Us -->
-  <section class="section bg-gradient-to-br from-green-50 via-white to-accent-50">
+  <section id="why-choose-us" class="section bg-gray-50">
     <div class="container-custom">
       <div class="text-center mb-16">
         <h2 class="section-title">ทำไมต้องเลือกเรา</h2>
diff --git a/src/pages/join-us/index.astro b/src/pages/join-us/index.astro
index 36ebd7c..e337011 100644
--- a/src/pages/join-us/index.astro
+++ b/src/pages/join-us/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">ร่วมงานกับเรา</h1>
diff --git a/src/pages/pipe-coupling/index.astro b/src/pages/pipe-coupling/index.astro
index ae4ef05..4163ea6 100644
--- a/src/pages/pipe-coupling/index.astro
+++ b/src/pages/pipe-coupling/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ข้อต่อท่อ (Pipe Coupling)" description="จำหน่ายข้อต่อท่อ (Pipe Coupling)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products/pipe-coupling/pipec-coupling_000C.jpg" alt="ข้อต่อท่อ (Pipe Coupling)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/MECH_001.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/pipe/index.astro b/src/pages/pipe/index.astro
index dc46891..3529deb 100644
--- a/src/pages/pipe/index.astro
+++ b/src/pages/pipe/index.astro
@@ -8,12 +8,12 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/ppr-pipe_000C_cropped.jpg" alt="ท่อ | Pipe" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/foot-ppr1.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/portfolio/index.astro b/src/pages/portfolio/index.astro
index b27eafb..a0e58e6 100644
--- a/src/pages/portfolio/index.astro
+++ b/src/pages/portfolio/index.astro
@@ -23,8 +23,8 @@ const projects = [
 <BaseLayout title="ผลงาน | Portfolio" description="ผลงานของบริษัท ดีล พลัส เทค จำกัด ติดตั้งท่อ PPR ท่อ HDPE ระบบประปา">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="portfolio-content" class="section">
       <div class="container-custom">
         <div class="text-center mb-12">
           <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">ผลงาน</h1>
diff --git a/src/pages/pp-r-pp-rct-poloplast/index.astro b/src/pages/pp-r-pp-rct-poloplast/index.astro
index 3f21838..50cf258 100644
--- a/src/pages/pp-r-pp-rct-poloplast/index.astro
+++ b/src/pages/pp-r-pp-rct-poloplast/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/privacy-policy/index.astro b/src/pages/privacy-policy/index.astro
index 9b9f972..2b1f4bb 100644
--- a/src/pages/privacy-policy/index.astro
+++ b/src/pages/privacy-policy/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">นโยบายความเป็นส่วนตัว</h1>
diff --git a/src/pages/product/index.astro b/src/pages/product/index.astro
index b3b3bcc..5f948b2 100644
--- a/src/pages/product/index.astro
+++ b/src/pages/product/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">สินค้าของเรา</h1>
diff --git a/src/pages/realflex/index.astro b/src/pages/realflex/index.astro
index e402755..8e953c7 100644
--- a/src/pages/realflex/index.astro
+++ b/src/pages/realflex/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="Realflex Flexible hose fitting" description="จำหน่ายRealflex Flexible hose fittingคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/REALFLEX_001.png" alt="Realflex Flexible hose fitting" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/realflex_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/services/index.astro b/src/pages/services/index.astro
index e4d8e7a..9ed72fc 100644
--- a/src/pages/services/index.astro
+++ b/src/pages/services/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">บริการของเรา | Services</h1>
diff --git a/src/pages/terms-and-conditions/index.astro b/src/pages/terms-and-conditions/index.astro
index 769e619..d828b08 100644
--- a/src/pages/terms-and-conditions/index.astro
+++ b/src/pages/terms-and-conditions/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="max-w-4xl mx-auto">
           <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">ข้อกำหนดการใช้งาน</h1>
diff --git a/src/pages/water-pump/index.astro b/src/pages/water-pump/index.astro
index b2e5648..6c34b39 100644
--- a/src/pages/water-pump/index.astro
+++ b/src/pages/water-pump/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ปั๊มน้ำ (Water Pump)" description="จำหน่ายปั๊มน้ำ (Water Pump)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/water-pump-clean.jpg" alt="ปั๊มน้ำ (Water Pump)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/water-pump_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -80,7 +80,7 @@ import Footer from '@/components/common/Footer.astro';
     
     
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/water-treatment/index.astro b/src/pages/water-treatment/index.astro
index f33d30e..1133948 100644
--- a/src/pages/water-treatment/index.astro
+++ b/src/pages/water-treatment/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ระบบกรองน้ำดี (Water Treatment)" description="จำหน่ายระบบกรองน้ำดี (Water Treatment)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/water-treatment_000C.jpg" alt="ระบบกรองน้ำดี (Water Treatment)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/water-treatment_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -80,7 +80,7 @@ import Footer from '@/components/common/Footer.astro';
     
     
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ฉนวนหุ้มท่อ-pipe-insulation/index.astro b/src/pages/ฉนวนหุ้มท่อ-pipe-insulation/index.astro
index 4630e9a..57a433a 100644
--- a/src/pages/ฉนวนหุ้มท่อ-pipe-insulation/index.astro
+++ b/src/pages/ฉนวนหุ้มท่อ-pipe-insulation/index.astro
@@ -8,12 +8,12 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/Thermobreak_-Raised-Floor-Insulation_0.png" alt="ฉนวนหุ้มท่อ | Pipe Insulation" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/Thermobreak_-LS_0.png" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อ-ppr-thai-ppr/index.astro b/src/pages/ท่อ-ppr-thai-ppr/index.astro
index ed5c45c..5464d72 100644
--- a/src/pages/ท่อ-ppr-thai-ppr/index.astro
+++ b/src/pages/ท่อ-ppr-thai-ppr/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ท่อ PPR (Polypropylene Random Copolymer)" description="จำหน่ายท่อ PPR (Polypropylene Random Copolymer)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/ppr-pipe_000C_cropped.jpg" alt="ท่อ PPR (Polypropylene Random Copolymer)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/foot-ppr1.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             
     <div class="mt-8 p-6 bg-green-50 rounded-xl border border-green-200">
       <div class="prose prose-lg max-w-none text-secondary-700">
@@ -145,7 +145,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อ-upvc/index.astro b/src/pages/ท่อ-upvc/index.astro
index 6378c4b..e8c543a 100644
--- a/src/pages/ท่อ-upvc/index.astro
+++ b/src/pages/ท่อ-upvc/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ท่อ PVC (Polyvinyl Chloride)" description="จำหน่ายท่อ PVC (Polyvinyl Chloride)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/upvc-pipe_000C_cropped.jpg" alt="ท่อ PVC (Polyvinyl Chloride)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -168,7 +168,7 @@ import Footer from '@/components/common/Footer.astro';
     
     
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อhdpe/index.astro b/src/pages/ท่อhdpe/index.astro
index 0ebc6b1..0d743b1 100644
--- a/src/pages/ท่อhdpe/index.astro
+++ b/src/pages/ท่อhdpe/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ท่อ HDPE (High Density Polyethylene Pipe)" description="จำหน่ายท่อ HDPE (High Density Polyethylene Pipe)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/hdpe-clean.jpg" alt="ท่อ HDPE (High Density Polyethylene Pipe)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/hdpe001.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             
     <div class="mt-8 p-6 bg-green-50 rounded-xl border border-green-200">
       <div class="prose prose-lg max-w-none text-secondary-700">
@@ -267,7 +267,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อพีพีอาร์/index.astro b/src/pages/ท่อพีพีอาร์/index.astro
index 7ab2837..3fee5f0 100644
--- a/src/pages/ท่อพีพีอาร์/index.astro
+++ b/src/pages/ท่อพีพีอาร์/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อพีพีอาร์ตราช้าง/index.astro b/src/pages/ท่อพีพีอาร์ตราช้าง/index.astro
index d970563..41af343 100644
--- a/src/pages/ท่อพีพีอาร์ตราช้าง/index.astro
+++ b/src/pages/ท่อพีพีอาร์ตราช้าง/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ท่อพีพีอาร์ (ท่อ PPR) ตราช้าง" description="จำหน่ายท่อพีพีอาร์ (ท่อ PPR) ตราช้างคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อระบายน้ำ-3-ชั้น-ไซเลนท/index.astro b/src/pages/ท่อระบายน้ำ-3-ชั้น-ไซเลนท/index.astro
index 43e5f9c..3a236fd 100644
--- a/src/pages/ท่อระบายน้ำ-3-ชั้น-ไซเลนท/index.astro
+++ b/src/pages/ท่อระบายน้ำ-3-ชั้น-ไซเลนท/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENT" description="จำหน่ายท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENTคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/XYLENT_001.png" alt="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENT" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/XYLENT_001.png" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อและข้อต่อpvc/index.astro b/src/pages/ท่อและข้อต่อpvc/index.astro
index 9353a99..7735b10 100644
--- a/src/pages/ท่อและข้อต่อpvc/index.astro
+++ b/src/pages/ท่อและข้อต่อpvc/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ท่อ PVC (Polyvinyl Chloride)" description="จำหน่ายท่อ PVC (Polyvinyl Chloride)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/pvc2017-1.jpg" alt="ท่อ PVC (Polyvinyl Chloride)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/pvc-pipe_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -177,7 +177,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ท่อไซเลอร์/index.astro b/src/pages/ท่อไซเลอร์/index.astro
index d3972b3..0146d32 100644
--- a/src/pages/ท่อไซเลอร์/index.astro
+++ b/src/pages/ท่อไซเลอร์/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" description="จำหน่ายท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/SYLER01.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/SYLER01.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/น็อต-แหวน-สกรู-hex-nut-flat-washer-hexagon-head-screw/index.astro b/src/pages/น็อต-แหวน-สกรู-hex-nut-flat-washer-hexagon-head-screw/index.astro
index 00062de..bae5b1b 100644
--- a/src/pages/น็อต-แหวน-สกรู-hex-nut-flat-washer-hexagon-head-screw/index.astro
+++ b/src/pages/น็อต-แหวน-สกรู-hex-nut-flat-washer-hexagon-head-screw/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/พุกต่างๆ/index.astro b/src/pages/พุกต่างๆ/index.astro
index 28eb41e..89bb266 100644
--- a/src/pages/พุกต่างๆ/index.astro
+++ b/src/pages/พุกต่างๆ/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/พุกเหล็ก-sleeve-anchor-bolt/index.astro b/src/pages/พุกเหล็ก-sleeve-anchor-bolt/index.astro
index d9c7b3e..1198722 100644
--- a/src/pages/พุกเหล็ก-sleeve-anchor-bolt/index.astro
+++ b/src/pages/พุกเหล็ก-sleeve-anchor-bolt/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="พุกเหล็ก | SLEEVE ANCHOR BOLT" description="จำหน่ายพุกเหล็ก | SLEEVE ANCHOR BOLTคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -80,7 +80,7 @@ import Footer from '@/components/common/Footer.astro';
     
     
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ยูโบลท์-u-bolt/index.astro b/src/pages/ยูโบลท์-u-bolt/index.astro
index c9213b7..63d31c9 100644
--- a/src/pages/ยูโบลท์-u-bolt/index.astro
+++ b/src/pages/ยูโบลท์-u-bolt/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ยูโบลท์ | U-Bolt" description="จำหน่ายยูโบลท์ | U-Boltคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ยูโบลท์-ประกับ-u-bolt-clamp/index.astro b/src/pages/ยูโบลท์-ประกับ-u-bolt-clamp/index.astro
index 78311e0..e5d6ec6 100644
--- a/src/pages/ยูโบลท์-ประกับ-u-bolt-clamp/index.astro
+++ b/src/pages/ยูโบลท์-ประกับ-u-bolt-clamp/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ยูโบลท์ + ประกับ | U-BOLT CLAMP" description="จำหน่ายยูโบลท์ + ประกับ | U-BOLT CLAMPคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -80,7 +80,7 @@ import Footer from '@/components/common/Footer.astro';
     
     
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ยูโบลท์เหล็กแผ่น-ยูแบน-strap/index.astro b/src/pages/ยูโบลท์เหล็กแผ่น-ยูแบน-strap/index.astro
index a02d5bb..eb1964d 100644
--- a/src/pages/ยูโบลท์เหล็กแผ่น-ยูแบน-strap/index.astro
+++ b/src/pages/ยูโบลท์เหล็กแผ่น-ยูแบน-strap/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ระบบรั้ว/index.astro b/src/pages/ระบบรั้ว/index.astro
index ce13eac..89beeb9 100644
--- a/src/pages/ระบบรั้ว/index.astro
+++ b/src/pages/ระบบรั้ว/index.astro
@@ -8,12 +8,12 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/vineman_000C.jpg" alt="ระบบรั้ว" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/vineman_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/ระบบรั้วไวน์แมน-vineman-2/index.astro b/src/pages/ระบบรั้วไวน์แมน-vineman-2/index.astro
index 7e79471..01ee629 100644
--- a/src/pages/ระบบรั้วไวน์แมน-vineman-2/index.astro
+++ b/src/pages/ระบบรั้วไวน์แมน-vineman-2/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนาม" description="จำหน่ายระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนามคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/รั้วเทวดา/index.astro b/src/pages/รั้วเทวดา/index.astro
index e4b8c7d..9742aff 100644
--- a/src/pages/รั้วเทวดา/index.astro
+++ b/src/pages/รั้วเทวดา/index.astro
@@ -8,12 +8,12 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/Banner-TDV2.jpg" alt="รั้วเทวดา" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/Banner-TDV2.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/วาล์ว-valve/index.astro b/src/pages/วาล์ว-valve/index.astro
index 7df9c73..1f3527e 100644
--- a/src/pages/วาล์ว-valve/index.astro
+++ b/src/pages/วาล์ว-valve/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" description="จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/valve-clean.jpg" alt="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/valve_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/สตัดเกลียวตลอด-เหล็ก-threaded-rod/index.astro b/src/pages/สตัดเกลียวตลอด-เหล็ก-threaded-rod/index.astro
index faa9e6f..b172843 100644
--- a/src/pages/สตัดเกลียวตลอด-เหล็ก-threaded-rod/index.astro
+++ b/src/pages/สตัดเกลียวตลอด-เหล็ก-threaded-rod/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/สปริทริงแฮงเกอร์-sr19-adjustable-split-ring-hanger/index.astro b/src/pages/สปริทริงแฮงเกอร์-sr19-adjustable-split-ring-hanger/index.astro
index 40a21f6..f198986 100644
--- a/src/pages/สปริทริงแฮงเกอร์-sr19-adjustable-split-ring-hanger/index.astro
+++ b/src/pages/สปริทริงแฮงเกอร์-sr19-adjustable-split-ring-hanger/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="แฮงเกอร์ แคล้ม (Hanger & Clamp) - อุปกรณ์ยึดยึดท่อ" description="จำหน่ายแฮงเกอร์ แคล้ม (Hanger & Clamp) - อุปกรณ์ยึดยึดท่อคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/หัวจ่ายแอร์-ball-jet/index.astro b/src/pages/หัวจ่ายแอร์-ball-jet/index.astro
index efbb590..0d3d817 100644
--- a/src/pages/หัวจ่ายแอร์-ball-jet/index.astro
+++ b/src/pages/หัวจ่ายแอร์-ball-jet/index.astro
@@ -8,12 +8,12 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/ball-jet-clean.jpg" alt="หัวจ่ายแอร์ | BALL JET" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/Eye-Ball.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/อุปกรณ์ดับเพลิง/index.astro b/src/pages/อุปกรณ์ดับเพลิง/index.astro
index 0ccf2a5..a266c5a 100644
--- a/src/pages/อุปกรณ์ดับเพลิง/index.astro
+++ b/src/pages/อุปกรณ์ดับเพลิง/index.astro
@@ -8,12 +8,12 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/extinguishers_000C_cropped.jpg" alt="อุปกรณ์ดับเพลิง ตู้ดับเพลิงเก็บเครื่องดับเพลิง" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/extinguishers_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/เครื่องเชื่อม-hdpe/index.astro b/src/pages/เครื่องเชื่อม-hdpe/index.astro
index cac220a..54358e3 100644
--- a/src/pages/เครื่องเชื่อม-hdpe/index.astro
+++ b/src/pages/เครื่องเชื่อม-hdpe/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="เครื่องเชื่อมท่อ HDPE (HDPE Pipe Welding Machine)" description="จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน เครื่องเชื่อมแบบ Butt Fusion และ Electrofusion">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/HDPE-Welding2.jpg" alt="เครื่องเชื่อมท่อ HDPE" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/HDPE-Welding2.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
               
               <div class="mt-8 p-6 bg-green-50 rounded-xl border border-green-200">
                 <div class="prose prose-lg max-w-none text-secondary-700">
diff --git a/src/pages/เครื่องเชื่อมท่อ-pipe-coupling-machine/index.astro b/src/pages/เครื่องเชื่อมท่อ-pipe-coupling-machine/index.astro
index c3b9053..81bda67 100644
--- a/src/pages/เครื่องเชื่อมท่อ-pipe-coupling-machine/index.astro
+++ b/src/pages/เครื่องเชื่อมท่อ-pipe-coupling-machine/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="เครื่องเชื่อมท่อ | Pipe Coupling Machine" description="จำหน่ายเครื่องเชื่อมท่อ | Pipe Coupling Machineคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/groove-coupling_000C_cropped.jpg" alt="เครื่องเชื่อมท่อ | Pipe Coupling Machine" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/pipe-coupling-machine_000.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/เครื่องเชื่อมท่อพีพีอา/index.astro b/src/pages/เครื่องเชื่อมท่อพีพีอา/index.astro
index 43593c0..1b449bf 100644
--- a/src/pages/เครื่องเชื่อมท่อพีพีอา/index.astro
+++ b/src/pages/เครื่องเชื่อมท่อพีพีอา/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="เครื่องเชื่อมท่อพีพีอาร์" description="จำหน่ายเครื่องเชื่อมท่อพีพีอาร์คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/เควิสแฮงเกอร์/index.astro b/src/pages/เควิสแฮงเกอร์/index.astro
index 0d833cb..13d168f 100644
--- a/src/pages/เควิสแฮงเกอร์/index.astro
+++ b/src/pages/เควิสแฮงเกอร์/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/เจโบลท์-แอลโบลท์-j-bolt-l-bolt/index.astro b/src/pages/เจโบลท์-แอลโบลท์-j-bolt-l-bolt/index.astro
index a62d490..c741c8c 100644
--- a/src/pages/เจโบลท์-แอลโบลท์-j-bolt-l-bolt/index.astro
+++ b/src/pages/เจโบลท์-แอลโบลท์-j-bolt-l-bolt/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="เจโบลท์, แอลโบลท์ | J-Bolt, L-Bolt" description="จำหน่ายเจโบลท์, แอลโบลท์ | J-Bolt, L-Boltคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/เทอร์โมเบรค-thermobreak/index.astro b/src/pages/เทอร์โมเบรค-thermobreak/index.astro
index aeff626..da293ca 100644
--- a/src/pages/เทอร์โมเบรค-thermobreak/index.astro
+++ b/src/pages/เทอร์โมเบรค-thermobreak/index.astro
@@ -7,13 +7,13 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)" description="จำหน่ายฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/13523630950840.png" alt="ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/Thermobreak_-LS_0.png" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/เม็กกรู๊ฟ-คับปลิ้ง/index.astro b/src/pages/เม็กกรู๊ฟ-คับปลิ้ง/index.astro
index f00f834..4c28809 100644
--- a/src/pages/เม็กกรู๊ฟ-คับปลิ้ง/index.astro
+++ b/src/pages/เม็กกรู๊ฟ-คับปลิ้ง/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/แคล้มประกับ-ชุบรุ้ง-ชุบ/index.astro b/src/pages/แคล้มประกับ-ชุบรุ้ง-ชุบ/index.astro
index b3631d4..27b71fa 100644
--- a/src/pages/แคล้มประกับ-ชุบรุ้ง-ชุบ/index.astro
+++ b/src/pages/แคล้มประกับ-ชุบรุ้ง-ชุบ/index.astro
@@ -8,7 +8,7 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/แคล้มฟันจระเข้-beam-clamp/index.astro b/src/pages/แคล้มฟันจระเข้-beam-clamp/index.astro
index 13d90f7..01fecc8 100644
--- a/src/pages/แคล้มฟันจระเข้-beam-clamp/index.astro
+++ b/src/pages/แคล้มฟันจระเข้-beam-clamp/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="แคล้มฟันจระเข้ | BEAM CLAMP" description="จำหน่ายแคล้มฟันจระเข้ | BEAM CLAMPคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/แคล้มหยดน้ำ-adjustable-band-hanger/index.astro b/src/pages/แคล้มหยดน้ำ-adjustable-band-hanger/index.astro
index abbb0de..8d666d9 100644
--- a/src/pages/แคล้มหยดน้ำ-adjustable-band-hanger/index.astro
+++ b/src/pages/แคล้มหยดน้ำ-adjustable-band-hanger/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="แฮงเกอร์ แคล้ม (Hanger & Clamp) - อุปกรณ์ยึดยึดท่อ" description="จำหน่ายแฮงเกอร์ แคล้ม (Hanger & Clamp) - อุปกรณ์ยึดยึดท่อคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/แคล้มเลเวล-level-clamp/index.astro b/src/pages/แคล้มเลเวล-level-clamp/index.astro
index c80d0d9..c5489b7 100644
--- a/src/pages/แคล้มเลเวล-level-clamp/index.astro
+++ b/src/pages/แคล้มเลเวล-level-clamp/index.astro
@@ -7,8 +7,8 @@ import Footer from '@/components/common/Footer.astro';
 <BaseLayout title="แคล้มเลเวล | LEVEL CLAMP" description="จำหน่ายแคล้มเลเวล | LEVEL CLAMPคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
   <Header slot="header" />
   
-  <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+  <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
@@ -89,7 +89,7 @@ import Footer from '@/components/common/Footer.astro';
     </section>
         
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
diff --git a/src/pages/แฮงเกอร์-แคล้ม-โบลท์-แหว/index.astro b/src/pages/แฮงเกอร์-แคล้ม-โบลท์-แหว/index.astro
index 7970f88..a24ccba 100644
--- a/src/pages/แฮงเกอร์-แคล้ม-โบลท์-แหว/index.astro
+++ b/src/pages/แฮงเกอร์-แคล้ม-โบลท์-แหว/index.astro
@@ -8,12 +8,12 @@ import Footer from '@/components/common/Footer.astro';
   <Header slot="header" />
   
   <main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
-    <section class="section">
+    <section id="product-detail" class="section">
       <div class="container-custom">
         <div class="grid lg:grid-cols-2 gap-12 items-start">
           <div class="lg:sticky lg:top-24">
             <div class="card p-8 bg-white">
-              <img src="/images/products-misc/ADJUSTABLE_SPLIT_RING_HANGER_cover_01.jpg" alt="แฮงเกอร์, แคล้ม, โบลท์, แหวน, น็อต, สกรู, พุก, สตัดเกลียว | Hanger, Clamp, Bolt, Flat washer, Nut, Screw, Anchor" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+              <img src="/images/products-cropped/Hanger-Clamp-Bolt_000.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
             </div>
           </div>
           
@@ -67,7 +67,7 @@ import Footer from '@/components/common/Footer.astro';
       </div>
     </section>
     
-    <section class="section gradient-bg">
+    <section id="contact-cta" class="section bg-gray-50">
       <div class="container-custom text-center">
         <h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">