Refactor: Update category structure, mega menu, footer, and remove unused pages

- Move DURGO from ระบบน้ำ to อุปกรณ์ปรับอากาศ - Add -category suffix to อุปกรณ์ดับเพลิง and ฉนวนหุ้มท่อ category pages - Update Header mega menu with correct category slugs - Fix Footer layout: split categories to 2 columns, remove quick links - Delete unused pages: all-projects, join-us, services, product - All product images fixed to 1:1 aspect ratio
2026-03-31 22:54:54 +07:00
parent dbbd9e22a2
commit 9cddd3da57
53 changed files with 3865 additions and 2888 deletions
--- a/src/pages/all-products/index.astro
+++ b/src/pages/all-products/index.astro
@@ -4,25 +4,25 @@ import Header from '@/components/common/Header.astro';
 import Footer from '@/components/common/Footer.astro';

 const productImages: Record<string, string> = {
-  '/ท่อ-ppr-thai-ppr': '/images/products-cropped/foot-ppr1.jpg',
-  '/ท่อพีพีอาร์ตราช้าง': '/images/products-cropped/ppr-pipe_000C.jpg',
-  '/pp-r-pp-rct-poloplast': '/images/products-cropped/ppr_000C.jpg',
-  '/ท่อhdpe': '/images/products-cropped/hdpe001.jpg',
+  '/ท่อ-ppr-thai-ppr': '/images/products-cropped/ppr-pipe_000C.jpg',
+  '/ท่อพีพีอาร์ตราช้าง': '/images/products-cropped/ppr-scg.jpg',
+  '/pp-r-pp-rct-poloplast': '/images/poloplast/POLOPLAST_001.png',
+  '/ท่อhdpe': '/images/products-cropped/hdpe001.png',
  '/ท่อ-upvc': '/images/products-cropped/upvc-pipe_000C.jpg',
-  '/ท่อไซเลอร์': '/images/products-cropped/SYLER01.jpg',
-  '/ท่อและข้อต่อpvc': '/images/products-cropped/pvc-pipe_000C.jpg',
+  '/ท่อไซเลอร์': '/images/products-cropped/syler-pipe-cold-water.jpg',
+  '/ท่อและข้อต่อpvc': '/images/products-cropped/pvc-standard-01.jpg',
  '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท': '/images/products-cropped/XYLENT_001.png',
-  '/ท่อพีพีอาร์': '/images/products-cropped/foot-ppr1.jpg',
+  '/ท่อพีพีอาร์': '/images/products-cropped/ppr-pipe_000C.jpg',
  '/เครื่องเชื่อม-hdpe': '/images/HDPE-welding-crop.jpg',
-  '/เครื่องเชื่อมท่อพีพีอา': '/images/products-cropped/pipe-coupling-machine_000.jpg',
+  '/เครื่องเชื่อมท่อพีพีอา': '/images/products-misc/ppr-welding-machine-main.jpg',
  '/groove-coupling': '/images/products-cropped/mech_000C.jpg',
  '/pipe-coupling': '/images/pipe-coupling/BG-SMC02.png',
  '/dukelarrsen': '/images/dukelarrsen/dukelarrsen-43.jpg',
-  '/เม็กกรู๊ฟ-คับปลิ้ง': '/images/products-cropped/mech_000C.jpg',
+  '/เม็กกรู๊ฟ-คับปลิ้ง': '/images/products-misc/MECH_001.jpg',
  '/วาล์ว-valve': '/images/products-cropped/valve_000C.jpg',
  '/durgo-avvs': '/images/products-cropped/durgo_000C.jpg',
  '/water-pump': '/images/products-cropped/water-pump_000C.jpg',
-  '/หัวจ่ายแอร์-ball-jet': '/images/products-cropped/Eye-Ball.jpg',
+  '/หัวจ่ายแอร์-ball-jet': '/images/products-raw/ball-jet/main-ball-jet.jpg',
  '/grilles': '/images/products-cropped/grilles_000C.jpg',
  '/อุปกรณ์ดับเพลิง': '/images/products-cropped/extinguishers_000C.jpg',
  '/ฉนวนหุ้มท่อ-pipe-insulation': '/images/thermobreak/thermobreak-solarblock.png',
@@ -30,17 +30,16 @@ const productImages: Record<string, string> = {
  '/realflex': '/images/products-cropped/realflex_000C.jpg',
  '/water-treatment': '/images/products-cropped/water-treatment_000C.jpg',
  '/ระบบรั้ว': '/images/products-cropped/vineman_000C.jpg',
-  '/ระบบรั้วไวน์แมน-vineman-2': '/images/products-cropped/vineman_000C.jpg',
-  '/รั้วเทวดา': '/images/products-cropped/Banner-TDV2.jpg',
+  '/ระบบรั้วไวน์แมน-vineman-2': '/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg',
+  '/รั้วเทวดา': '/images/products-raw/tevada/TEVADA_001-987x1024.png',
 };

 const productCategories = [
  {
-    name: 'ท่อ',
-    slug: '/ท่อพีพีอาร์',
-    image: '/images/products-cropped/foot-ppr1.jpg',
+    name: 'ท่อพีพีอาร์',
+    image: '/images/products-cropped/ppr-pipe_000C.jpg',
    products: [
-      { name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr' },
+      { name: 'ไทยพีพีอาร์', slug: '/ท่อ-ppr-thai-ppr' },
      { name: 'ท่อ PPR ตราช้าง', slug: '/ท่อพีพีอาร์ตราช้าง' },
      { name: 'ท่อ PP-R Poloplast', slug: '/pp-r-pp-rct-poloplast' },
      { name: 'ท่อ HDPE', slug: '/ท่อhdpe' },
@@ -48,13 +47,11 @@ const productCategories = [
      { 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',
+    image: '/images/HDPE-welding-crop.jpg',
    products: [
      { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
      { name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' },
@@ -65,84 +62,43 @@ const productCategories = [
    ]
  },
  {
-    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',
+    name: 'ระบบน้ำ',
    image: '/images/products-cropped/water-pump_000C.jpg',
    products: [
+      { name: 'วาล์ว', slug: '/วาล์ว-valve' },
      { 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/thermobreak/thermobreak-solarblock.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',
+    name: 'อุปกรณ์ปรับอากาศ',
+    image: '/images/products-raw/ball-jet/main-ball-jet.jpg',
+    products: [
+      { name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
+      { name: 'กริลแอร์', slug: '/grilles' },
+      { name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
+    ]
+  },
+  {
+    name: 'อุปกรณ์ดับเพลิง',
+    image: '/images/products-cropped/extinguishers_000C.jpg',
+    products: [
+      { name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
+      { name: 'Realflex', slug: '/realflex' },
+    ]
+  },
+  {
+    name: 'ฉนวนหุ้มท่อ',
+    image: '/images/thermobreak/thermobreak-solarblock.png',
+    products: [
+      { name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
+      { name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
+    ]
+  },
+  {
+    name: 'ระบบรั้ว',
+    image: '/images/products-raw/tevada/TEVADA_001-987x1024.png',
    products: [
-      { name: 'ระบบรั้ว', slug: '/ระบบรั้ว' },
      { name: 'ระบบรั้วไวน์แมน', slug: '/ระบบรั้วไวน์แมน-vineman-2' },
      { name: 'รั้วเทวดา', slug: '/รั้วเทวดา' },
    ]
@@ -152,29 +108,38 @@ const productCategories = [

 <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">
+  
+  <main class="bg-white min-h-screen">
+    <!-- Hero Section -->
+    <section class="hero-gradient py-16">
+      <div class="container-custom">
+        <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
+          สินค้าทั้งหมด
+        </span>
+        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">สินค้าทั้งหมด</h1>
+        <p class="text-lg sm:text-xl text-white/80 max-w-2xl">
+          รวมสินค้าคุณภาพสูงของเราทั้งหมด จำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย และอุปกรณ์ระบบน้ำครบวงจร
+        </p>
+      </div>
+    </section>
+    
+    <!-- Product Categories -->
+    <section 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-lg sm:text-lg text-secondary-600 max-w-2xl mx-auto">
-            รวมสินค้าคุณภาพสูงของเราทั้งหมด จำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย และอุปกรณ์ระบบน้ำครบวงจร
-          </p>
-        </div>
-
        <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 class="card-glass overflow-hidden">
+              <div class="bg-primary-600 px-6 py-4">
+                <h2 class="text-xl font-bold text-white">{category.name}</h2>
              </div>
-              <div class="p-6 bg-white">
+              <div class="p-6">
                <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">
-                      <img src={productImages[product.slug] || category.image} alt={product.name} class="w-full h-24 object-cover rounded-lg mb-3" onerror="this.src='/images/logo/dealplustech-logo.png'" />
-                      <span class="text-sm sm:text-lg text-secondary-700 font-medium">{product.name}</span>
+                    <a href={product.slug} class="block p-4 rounded-xl bg-white border border-gray-200 hover:border-primary-500 hover:bg-primary-50 transition-all text-center">
+                      <div class="w-full aspect-square overflow-hidden rounded-lg mb-3 bg-gray-100">
+                        <img src={productImages[product.slug] || category.image} alt={product.name} class="w-full h-full object-cover" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
+                      </div>
+                      <span class="text-sm sm:text-base text-secondary-700 font-medium">{product.name}</span>
                    </a>
                  ))}
                </div>
@@ -182,23 +147,31 @@ const productCategories = [
            </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>
+    </section>
+    
+    <!-- CTA Section -->
+    <section class="cta-gradient py-16">
+      <div class="container-custom text-center">
+        <h2 class="text-xl sm:text-2xl font-bold text-white mb-6">ติดต่อเราวันนี้</h2>
+        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
+          ติดต่อเราเพื่อรับคำแนะนำและราคาพิเศษ
+        </p>
+        <div class="flex flex-wrap justify-center gap-4">
+          <a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
+            <img src="/images/line-icon.png" alt="Line" class="w-5 h-5" width="20" height="20" loading="lazy" decoding="async" />
+            <span>แชท Line</span>
+          </a>
+          <a href="tel:0905551415" class="btn-white flex items-center gap-2">
+            <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>
    </section>
  </main>
  
  <Footer slot="footer" />
-</BaseLayout>
+</BaseLayout>