From fe442790ab84e373faef51a4ddaeead861cde63c Mon Sep 17 00:00:00 2001
From: hermes <hermes@dealplustech.com>
Date: Mon, 8 Jun 2026 22:56:52 +0700
Subject: [PATCH] feat(homepage): rework homepage + align about-us + footer
 popular products
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## homepage (index.astro)

- Drop '500+ รายการสินค้า' from stat badges and rebuild the trust-badges
  section to show only 15+ ปีประสบการณ์, 400+ ลูกค้าทั่วประเทศ, 98%
  ลูกค้าพึงพอใจ — bigger numbers (text-5xl/6xl), no icons, counter animation
- Add 'ทำไมเลือกเรา' section (4 cards: ส่งฟรี กทม./ปริมณฑล, Lead time 1-3
  วัน, ราคาโรงงาน, ทีมช่างแนะนำ) — no icons, primary/accent border hover
- Add 'หมวดสินค้า' section (8 tiles: 7 categories + 'สินค้าทั้งหมด')
  placed after 'สินค้าแนะนำ' — each tile is a real product photo with
  dark gradient overlay and a CTA link to /all-products?filter=<id>
- Reorder: Hero → ทำไมเลือกเรา → สินค้าแนะนำ → หมวดสินค้า → Stats →
  บทความล่าสุด → CTA

## all-products (filter from URL)

- Script now reads ?filter=<id> on load and applies it without rewriting
  the URL, then on click updates both the filter and the URL via
  history.replaceState so the back/forward buttons work

## footer (BaseLayout.astro)

- Replace productLinks with the curated 6 popular products: ไทยพีพีอาร์,
  เทอร์โมเบรค, กริลแอร์, หัวจ่ายแอร์ Ball Jet, ท่อ HDPE, ท่อ Syler

## about-us

- Stats: 10+/1000+/500+ replaced with 15+ / 400+ + counter animation,
  bigger numbers, rounded-3xl + shadow (matches home)
- Why Choose Us: rebuilt with the same 4 cards + same style as home's
  'ทำไมเลือกเรา' (no icons, pill header, larger h2 + subtitle)
---
 src/layouts/BaseLayout.astro |  10 +-
 src/pages/about-us.astro     |  74 +++++-------
 src/pages/all-products.astro |  65 +++++++----
 src/pages/index.astro        | 217 +++++++++++++++++++++++++++++------
 4 files changed, 261 insertions(+), 105 deletions(-)

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index aab2f07..40a2625 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -314,12 +314,12 @@ if (jsonLd) {
 }
 
 const productLinks = [
-  { title: "ท่อพีพีอาร์", href: "/ท่อ-ppr-thai-ppr" },
+  { title: "ไทยพีพีอาร์", href: "/ท่อ-ppr-thai-ppr" },
+  { title: "เทอร์โมเบรค", href: "/เทอร์โมเบรค-thermobreak" },
+  { title: "กริลแอร์", href: "/grilles" },
+  { title: "หัวจ่ายแอร์ Ball Jet", href: "/หัวจ่าย-ball-jet" },
   { title: "ท่อ HDPE", href: "/ท่อ-hdpe" },
-  { title: "ท่อ UPVC", href: "/ท่อ-upvc" },
-  { title: "เครื่องเชื่อมท่อ", href: "/เครื่องเชื่อม-hdpe" },
-  { title: "วาล์ว", href: "/วาล์ว-valve" },
-  { title: "ปั๊มน้ำ", href: "/water-pump" },
+  { title: "ท่อ Syler", href: "/ท่อ-syler" },
 ];
 ---
 
diff --git a/src/pages/about-us.astro b/src/pages/about-us.astro
index 0e76ada..07867db 100644
--- a/src/pages/about-us.astro
+++ b/src/pages/about-us.astro
@@ -122,20 +122,20 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
   </section>
 
   <!-- Stats -->
-  <section class="py-16 bg-neutral-50">
+  <section class="py-16 bg-gradient-to-br from-neutral-50 to-primary-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-      <div class="grid grid-cols-3 gap-6 lg:gap-8">
-        <div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
-          <div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">10+</div>
-          <div class="text-neutral-600">ปีประสบการณ์</div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8" data-animate-stagger>
+        <div class="text-center p-8 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
+          <h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
+            <span data-counter="15">0</span>+
+          </h3>
+          <p class="text-neutral-600 font-medium">ปีประสบการณ์</p>
         </div>
-        <div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
-          <div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">1000+</div>
-          <div class="text-neutral-600">โปรเจคสำเร็จ</div>
-        </div>
-        <div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
-          <div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">500+</div>
-          <div class="text-neutral-600">สินค้าในคลัง</div>
+        <div class="text-center p-8 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
+          <h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
+            <span data-counter="400">0</span>+
+          </h3>
+          <p class="text-neutral-600 font-medium">ลูกค้าทั่วประเทศ</p>
         </div>
       </div>
     </div>
@@ -145,44 +145,26 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
   <section class="py-16 lg:py-24 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold text-primary-700 mb-4">ทำไมต้องเลือกเรา</h2>
+        <span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">จุดเด่นของเรา</span>
+        <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">ทำไมช่าง/ผู้รับเหมาเลือกเรา</h2>
+        <p class="text-neutral-600 max-w-2xl mx-auto text-lg">ครบทั้งสินค้า บริการ และความเร็ว — เพื่อให้งานของคุณเดินหน้าไม่สะดุด</p>
       </div>
-      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div class="text-center p-6">
-          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
-            <svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <h3 class="text-lg font-semibold text-primary-700 mb-2">คุณภาพสูง</h3>
-          <p class="text-sm text-neutral-600">สินค้าผ่านมาตรฐาน มอก. รับประกันคุณภาพ</p>
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">ส่งฟรี กทม./ปริมณฑล</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">ส่งถึงไซต์งานฟรี ไม่ต้องวิ่งรับเอง ลดเวลา ลดต้นทุนขนส่ง</p>
         </div>
-        <div class="text-center p-6">
-          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
-            <svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <h3 class="text-lg font-semibold text-primary-700 mb-2">ราคาโรงงาน</h3>
-          <p class="text-sm text-neutral-600">ราคาพิเศษ ราคาโรงงาน ไม่มีมาร์จิ้นกลาง</p>
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">Lead time 1–3 วัน</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">สั่งวันนี้ ได้ของไว — ไม่ต้องรอ 1-2 สัปดาห์เหมือนเจ้าอื่น</p>
         </div>
-        <div class="text-center p-6">
-          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
-            <svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-          </div>
-          <h3 class="text-lg font-semibold text-primary-700 mb-2">จัดส่งรวดเร็ว</h3>
-          <p class="text-sm text-neutral-600">สินค้าพร้อมส่ง จัดส่งภายใน 1-3 วัน</p>
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">ราคาโรงงาน</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">ตรงจากผู้ผลิต ไม่ผ่านตัวกลาง คุณภาพเดียวกันในราคาที่ต่ำกว่า</p>
         </div>
-        <div class="text-center p-6">
-          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
-            <svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
-            </svg>
-          </div>
-          <h3 class="text-lg font-semibold text-primary-700 mb-2">บริการดี</h3>
-          <p class="text-sm text-neutral-600">ให้คำปรึกษาฟรี ตอบคำถามทุกคำถาม</p>
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">ทีมช่างแนะนำ</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">ส่งสเปกมา ช่วยเทียบยี่ห้อ ขนาด PN ฟรี — ไม่ต้องเดาว่าท่อตัวไหนใช่</p>
         </div>
       </div>
     </div>
diff --git a/src/pages/all-products.astro b/src/pages/all-products.astro
index 7a9a5c9..e0eaa30 100644
--- a/src/pages/all-products.astro
+++ b/src/pages/all-products.astro
@@ -136,35 +136,58 @@ const categoryIdMap = Object.fromEntries(categories.map(c => [c.name, c.id]));
   </section>
 
   <script>
-    document.addEventListener('DOMContentLoaded', () => {
+    function applyFilter(filter, updateUrl = false) {
       const filterBtns = document.querySelectorAll('.filter-btn');
       const productCards = document.querySelectorAll('.product-card');
 
+      // Update active state on buttons
+      filterBtns.forEach(b => {
+        b.classList.remove('bg-primary-600', 'text-white', 'active');
+        b.classList.add('bg-neutral-100', 'text-neutral-700');
+        if (b.getAttribute('data-filter') === filter) {
+          b.classList.add('bg-primary-600', 'text-white', 'active');
+          b.classList.remove('bg-neutral-100', 'text-neutral-700');
+        }
+      });
+
+      // Filter products
+      productCards.forEach((card, index) => {
+        if (filter === 'all' || card.getAttribute('data-category') === filter) {
+          card.style.display = 'block';
+          card.style.animationDelay = `${index * 50}ms`;
+          card.classList.add('animate-fade-in');
+        } else {
+          card.style.display = 'none';
+          card.classList.remove('animate-fade-in');
+        }
+      });
+
+      if (updateUrl) {
+        const url = new URL(window.location.href);
+        if (filter === 'all') {
+          url.searchParams.delete('filter');
+        } else {
+          url.searchParams.set('filter', filter);
+        }
+        window.history.replaceState({}, '', url);
+      }
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      // Read ?filter=<id> from URL on page load
+      const params = new URLSearchParams(window.location.search);
+      const initialFilter = params.get('filter') || 'all';
+
+      const filterBtns = document.querySelectorAll('.filter-btn');
       filterBtns.forEach(btn => {
         btn.addEventListener('click', () => {
           const filter = btn.getAttribute('data-filter');
-
-          // Update active state
-          filterBtns.forEach(b => {
-            b.classList.remove('bg-primary-600', 'text-white', 'active');
-            b.classList.add('bg-neutral-100', 'text-neutral-700');
-          });
-          btn.classList.add('bg-primary-600', 'text-white', 'active');
-          btn.classList.remove('bg-neutral-100', 'text-neutral-700');
-
-          // Filter products with animation
-          productCards.forEach((card, index) => {
-            if (filter === 'all' || card.getAttribute('data-category') === filter) {
-              card.style.display = 'block';
-              card.style.animationDelay = `${index * 50}ms`;
-              card.classList.add('animate-fade-in');
-            } else {
-              card.style.display = 'none';
-              card.classList.remove('animate-fade-in');
-            }
-          });
+          applyFilter(filter, true);
         });
       });
+
+      // Apply initial filter from URL (no URL update on load)
+      applyFilter(initialFilter, false);
     });
   </script>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2914704..7015e20 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -129,6 +129,64 @@ const articles = (await getCollection('blog')).sort(
     </div>
   </section>
 
+  <!-- ทำไมเลือกเรา -->
+  <section class="py-16 lg:py-24 bg-gradient-to-br from-neutral-50 to-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Section Header -->
+      <div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
+        <span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">จุดเด่นของเรา</span>
+        <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">ทำไมช่าง/ผู้รับเหมาเลือกเรา</h2>
+        <p class="text-neutral-600 max-w-2xl mx-auto text-lg">ครบทั้งสินค้า บริการ และความเร็ว — เพื่อให้งานของคุณเดินหน้าไม่สะดุด</p>
+      </div>
+
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
+        <!-- Why 1: ส่งฟรี -->
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <div class="inline-flex items-center justify-center w-14 h-14 bg-primary-100 rounded-2xl mb-5 group-hover:bg-primary-600 group-hover:text-white transition-colors">
+            <svg class="w-7 h-7 text-primary-600 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">ส่งฟรี กทม./ปริมณฑล</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">ส่งถึงไซต์งานฟรี ไม่ต้องวิ่งรับเอง ลดเวลา ลดต้นทุนขนส่ง</p>
+        </div>
+
+        <!-- Why 2: Lead time -->
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <div class="inline-flex items-center justify-center w-14 h-14 bg-accent-100 rounded-2xl mb-5 group-hover:bg-accent-500 group-hover:text-white transition-colors">
+            <svg class="w-7 h-7 text-accent-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">Lead time 1–3 วัน</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">สั่งวันนี้ ได้ของไว — ไม่ต้องรอ 1-2 สัปดาห์เหมือนเจ้าอื่น</p>
+        </div>
+
+        <!-- Why 3: ราคาโรงงาน -->
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <div class="inline-flex items-center justify-center w-14 h-14 bg-primary-100 rounded-2xl mb-5 group-hover:bg-primary-600 group-hover:text-white transition-colors">
+            <svg class="w-7 h-7 text-primary-600 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">ราคาโรงงาน</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">ตรงจากผู้ผลิต ไม่ผ่านตัวกลาง คุณภาพเดียวกันในราคาที่ต่ำกว่า</p>
+        </div>
+
+        <!-- Why 4: ทีมช่างแนะนำ -->
+        <div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
+          <div class="inline-flex items-center justify-center w-14 h-14 bg-accent-100 rounded-2xl mb-5 group-hover:bg-accent-500 group-hover:text-white transition-colors">
+            <svg class="w-7 h-7 text-accent-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold text-neutral-900 mb-2">ทีมช่างแนะนำ</h3>
+          <p class="text-neutral-600 text-sm leading-relaxed">ส่งสเปกมา ช่วยเทียบยี่ห้อ ขนาด PN ฟรี — ไม่ต้องเดาว่าท่อตัวไหนใช่</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- Featured Products Section -->
   <section class="py-16 lg:py-24 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -247,18 +305,134 @@ const articles = (await getCollection('blog')).sort(
     </div>
   </section>
 
+  <!-- หมวดสินค้า -->
+  <section class="py-16 lg:py-24 bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <!-- Section Header -->
+      <div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
+        <span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">เลือกตามงาน</span>
+        <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">หมวดสินค้าของเรา</h2>
+        <p class="text-neutral-600 max-w-2xl mx-auto text-lg">ทุกหมวดเน้นงานอาคาร/โรงงาน/โรงแรม — คลิกเพื่อดูสินค้าเฉพาะหมวด</p>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6" data-animate-stagger>
+        <!-- Category 1: ท่อพีพีอาร์ (ไทย PPR) -->
+        <a href="/all-products?filter=ppr" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+          <img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อพีพีอาร์" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
+          <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
+          <div class="relative h-full flex flex-col justify-end p-6 text-white">
+            <h3 class="text-xl font-bold mb-1">ท่อพีพีอาร์</h3>
+            <p class="text-sm text-white/80 mb-2">6 รายการ</p>
+            <span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
+              ดูสินค้า
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </a>
+
+        <!-- Category 2: เครื่องเชื่อมท่อ -->
+        <a href="/all-products?filter=welding" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+          <img src="/images/products-misc/ppr-welding-machine-main.jpg" alt="เครื่องเชื่อมท่อ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
+          <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
+          <div class="relative h-full flex flex-col justify-end p-6 text-white">
+            <h3 class="text-xl font-bold mb-1">เครื่องเชื่อมท่อ</h3>
+            <p class="text-sm text-white/80 mb-2">4 รายการ</p>
+            <span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
+              ดูสินค้า
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </a>
+
+        <!-- Category 3: ระบบน้ำ -->
+        <a href="/all-products?filter=water" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+          <img src="/images/products-cropped/water-pump_000C.jpg" alt="ระบบน้ำ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
+          <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
+          <div class="relative h-full flex flex-col justify-end p-6 text-white">
+            <h3 class="text-xl font-bold mb-1">ระบบน้ำ</h3>
+            <p class="text-sm text-white/80 mb-2">3 รายการ</p>
+            <span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
+              ดูสินค้า
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </a>
+
+        <!-- Category 4: อุปกรณ์ปรับอากาศ (กริล) -->
+        <a href="/all-products?filter=ac" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+          <img src="/images/products-cropped/grilles_000C.jpg" alt="อุปกรณ์ปรับอากาศ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
+          <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
+          <div class="relative h-full flex flex-col justify-end p-6 text-white">
+            <h3 class="text-xl font-bold mb-1">อุปกรณ์ปรับอากาศ</h3>
+            <p class="text-sm text-white/80 mb-2">3 รายการ</p>
+            <span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
+              ดูสินค้า
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </a>
+
+        <!-- Category 5: อุปกรณ์ดับเพลิง -->
+        <a href="/all-products?filter=fire" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+          <img src="/images/products-cropped/extinguishers_000C.jpg" alt="อุปกรณ์ดับเพลิง" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
+          <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
+          <div class="relative h-full flex flex-col justify-end p-6 text-white">
+            <h3 class="text-xl font-bold mb-1">อุปกรณ์ดับเพลิง</h3>
+            <p class="text-sm text-white/80 mb-2">2 รายการ</p>
+            <span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
+              ดูสินค้า
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </a>
+
+        <!-- Category 6: ฉนวนหุ้มท่อ (Thermobreak) -->
+        <a href="/all-products?filter=insulation" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+          <img src="/images/thermobreak/thermobreak-solarblock.png" alt="ฉนวนหุ้มท่อ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
+          <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
+          <div class="relative h-full flex flex-col justify-end p-6 text-white">
+            <h3 class="text-xl font-bold mb-1">ฉนวนหุ้มท่อ</h3>
+            <p class="text-sm text-white/80 mb-2">4 รายการ</p>
+            <span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
+              ดูสินค้า
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </a>
+
+        <!-- Category 7: ระบบรั้ว -->
+        <a href="/all-products?filter=fence" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
+          <img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg" alt="ระบบรั้ว" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
+          <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
+          <div class="relative h-full flex flex-col justify-end p-6 text-white">
+            <h3 class="text-xl font-bold mb-1">ระบบรั้ว</h3>
+            <p class="text-sm text-white/80 mb-2">2 รายการ</p>
+            <span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
+              ดูสินค้า
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </a>
+
+        <!-- All products tile (no image, just text CTA) -->
+        <a href="/all-products" class="group relative h-64 rounded-3xl overflow-hidden bg-gradient-to-br from-neutral-900 to-neutral-700 border border-neutral-700 hover:border-neutral-500 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1 text-white flex flex-col justify-end p-6">
+          <h3 class="text-xl font-bold mb-1 group-hover:text-primary-300 transition-colors">สินค้าทั้งหมด</h3>
+          <p class="text-sm text-white/70 mb-2">ดูทุกหมวดพร้อมกัน</p>
+          <span class="inline-flex items-center gap-1 text-sm font-medium text-primary-300 group-hover:gap-2 transition-all">
+            เปิดหน้ารวม
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+          </span>
+        </a>
+      </div>
+    </div>
+  </section>
   <!-- Trust Badges with Counter Animation -->
   <section class="py-16 lg:py-20 bg-gradient-to-br from-neutral-50 to-primary-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8" data-animate-stagger>
         <!-- Badge 1 -->
         <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
-          <div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-2xl mb-4">
-            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-            </svg>
-          </div>
-          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
+          <h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
             <span data-counter="15">0</span>+
           </h3>
           <p class="text-neutral-600 font-medium">ปีประสบการณ์</p>
@@ -266,38 +440,15 @@ const articles = (await getCollection('blog')).sort(
 
         <!-- Badge 2 -->
         <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
-          <div class="inline-flex items-center justify-center w-16 h-16 bg-accent-100 rounded-2xl mb-4">
-            <svg class="w-8 h-8 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-            </svg>
-          </div>
-          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
-            <span data-counter="2500">0</span>+
+          <h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
+            <span data-counter="400">0</span>+
           </h3>
           <p class="text-neutral-600 font-medium">ลูกค้าทั่วประเทศ</p>
         </div>
 
         <!-- Badge 3 -->
         <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
-          <div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-2xl mb-4">
-            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-            </svg>
-          </div>
-          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
-            <span data-counter="5000">0</span>+
-          </h3>
-          <p class="text-neutral-600 font-medium">รายการสินค้า</p>
-        </div>
-
-        <!-- Badge 4 -->
-        <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
-          <div class="inline-flex items-center justify-center w-16 h-16 bg-accent-100 rounded-2xl mb-4">
-            <svg class="w-8 h-8 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-          </div>
-          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
+          <h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
             <span data-counter="98">0</span>%
           </h3>
           <p class="text-neutral-600 font-medium">ลูกค้าพึงพอใจ</p>