From b4a41c3ed4e4fa7001873d7dab15f8ffa8cfdbb5 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Sat, 23 May 2026 20:36:39 +0700
Subject: [PATCH] Add animated hero background to all product pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All 30 pages now have the same animated hero effect:
- Mesh gradient blur animation (animate-mesh-1)
- Floating particles
- Water wave SVG animations

Pages updated include ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-hdpe, ท่อ-upvc, ท่อ-xy-lent, เม็กกรู๊ฟ-คับปลิ้ง, water-treatment, อุปกรณ์ปรับอากาศ, ตู้ดับเพลิง, realflex, เทอร์โมเบรค-thermobreak, รั้วเทวดา, ระบบรั้วไวน์แมน
---
 src/pages/realflex.astro               | 35 +++++++++++++++++++++++++-
 src/pages/water-treatment.astro        | 35 +++++++++++++++++++++++++-
 src/pages/ตู้ดับเพลิง.astro                | 35 +++++++++++++++++++++++++-
 src/pages/ท่อ-hdpe.astro                | 35 +++++++++++++++++++++++++-
 src/pages/ท่อ-ppr-scg.astro             | 35 +++++++++++++++++++++++++-
 src/pages/ท่อ-ppr-thai-ppr.astro        | 35 +++++++++++++++++++++++++-
 src/pages/ท่อ-upvc.astro                | 35 +++++++++++++++++++++++++-
 src/pages/ท่อ-xy-lent.astro             | 33 ++++++++++++++++++++++++
 src/pages/ระบบรั้วไวน์แมน.astro           | 35 +++++++++++++++++++++++++-
 src/pages/รั้วเทวดา.astro                | 33 ++++++++++++++++++++++++
 src/pages/อุปกรณ์ปรับอากาศ.astro          | 33 ++++++++++++++++++++++++
 src/pages/เทอร์โมเบรค-thermobreak.astro | 35 +++++++++++++++++++++++++-
 src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro           | 35 +++++++++++++++++++++++++-
 13 files changed, 439 insertions(+), 10 deletions(-)

diff --git a/src/pages/realflex.astro b/src/pages/realflex.astro
index af4ac0d..826c1c7 100644
--- a/src/pages/realflex.astro
+++ b/src/pages/realflex.astro
@@ -27,7 +27,40 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
   <main class="bg-white min-h-screen pb-24 md:pb-0">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <nav class="text-sm mb-4 text-primary-100">
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">Realflex</span>
         </nav>
diff --git a/src/pages/water-treatment.astro b/src/pages/water-treatment.astro
index 635bb1a..6cae419 100644
--- a/src/pages/water-treatment.astro
+++ b/src/pages/water-treatment.astro
@@ -27,7 +27,40 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
   <main class="bg-white min-h-screen pb-24 md:pb-0">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <nav class="text-sm mb-4 text-primary-100">
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบกรองน้ำ</span>
         </nav>
diff --git a/src/pages/ตู้ดับเพลิง.astro b/src/pages/ตู้ดับเพลิง.astro
index f6a37b7..b0a337f 100644
--- a/src/pages/ตู้ดับเพลิง.astro
+++ b/src/pages/ตู้ดับเพลิง.astro
@@ -345,7 +345,40 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
 
     <!-- CTA Section -->
     <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center">
-      <div class="max-w-4xl mx-auto px-4">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-4xl mx-auto px-4">
         <h2 class="text-2xl md:text-3xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
         <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
           ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ
diff --git a/src/pages/ท่อ-hdpe.astro b/src/pages/ท่อ-hdpe.astro
index a85e9c7..3b44ad5 100644
--- a/src/pages/ท่อ-hdpe.astro
+++ b/src/pages/ท่อ-hdpe.astro
@@ -6,7 +6,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
   <main class="bg-white min-h-screen">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
           <div class="order-2 lg:order-1">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ HDPE</span>
diff --git a/src/pages/ท่อ-ppr-scg.astro b/src/pages/ท่อ-ppr-scg.astro
index 5249cd8..ee0da1a 100644
--- a/src/pages/ท่อ-ppr-scg.astro
+++ b/src/pages/ท่อ-ppr-scg.astro
@@ -6,7 +6,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
   <main class="bg-white min-h-screen">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
           <div class="order-2 lg:order-1">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
diff --git a/src/pages/ท่อ-ppr-thai-ppr.astro b/src/pages/ท่อ-ppr-thai-ppr.astro
index 2b33da1..bcaec47 100644
--- a/src/pages/ท่อ-ppr-thai-ppr.astro
+++ b/src/pages/ท่อ-ppr-thai-ppr.astro
@@ -6,7 +6,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
   <main class="bg-white min-h-screen">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
           <div class="order-2 lg:order-1">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
diff --git a/src/pages/ท่อ-upvc.astro b/src/pages/ท่อ-upvc.astro
index c0ecbe1..49e481a 100644
--- a/src/pages/ท่อ-upvc.astro
+++ b/src/pages/ท่อ-upvc.astro
@@ -6,7 +6,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
   <main class="bg-white min-h-screen">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="grid lg:grid-cols-2 gap-12 items-center">
           <div class="order-2 lg:order-1">
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ UPVC</span>
diff --git a/src/pages/ท่อ-xy-lent.astro b/src/pages/ท่อ-xy-lent.astro
index 49fcbc3..9d3f500 100644
--- a/src/pages/ท่อ-xy-lent.astro
+++ b/src/pages/ท่อ-xy-lent.astro
@@ -3,6 +3,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 ---
 <BaseLayout title="ท่อ XYLENT - ดีล พลัส เทค" description="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT) ระบบ Push Fit เงียบสนิท 22 เดซิเบล จาก Poloplast">
   <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
+    
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <nav class="text-sm mb-4 text-primary-100">
         <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ท่อ XYLENT</span>
diff --git a/src/pages/ระบบรั้วไวน์แมน.astro b/src/pages/ระบบรั้วไวน์แมน.astro
index d242b53..2b12f8a 100644
--- a/src/pages/ระบบรั้วไวน์แมน.astro
+++ b/src/pages/ระบบรั้วไวน์แมน.astro
@@ -27,7 +27,40 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
   <main class="bg-white min-h-screen pb-24 md:pb-0">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <nav class="text-sm mb-4 text-primary-100">
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบรั้วไวน์แมน</span>
         </nav>
diff --git a/src/pages/รั้วเทวดา.astro b/src/pages/รั้วเทวดา.astro
index 64a75d7..2972f97 100644
--- a/src/pages/รั้วเทวดา.astro
+++ b/src/pages/รั้วเทวดา.astro
@@ -4,6 +4,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 
 <BaseLayout title="รั้วเทวดา | ระบบรั้วสำเร็จรูป คุณภาพสูง ราคาคุ้มค่า" description="รั้วเทวดา ระบบรั้วสำเร็จรูปสำหรับโรงงาน โกดัง สถานที่เกษตร รีสอร์ท และอื่นๆ พร้อมบริการติดตั้งครบวงจร">
   <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
+    
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <nav class="text-sm mb-4 text-primary-100">
         <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">รั้วเทวดา</span>
diff --git a/src/pages/อุปกรณ์ปรับอากาศ.astro b/src/pages/อุปกรณ์ปรับอากาศ.astro
index 5168ade..f8aa2bd 100644
--- a/src/pages/อุปกรณ์ปรับอากาศ.astro
+++ b/src/pages/อุปกรณ์ปรับอากาศ.astro
@@ -4,6 +4,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 
 <BaseLayout title="อุปกรณ์ปรับอากาศ | ระบบปรับอากาศคุณภาพสูง ประหยัดพลังงาน" description="อุปกรณ์ปรับอากาศคุณภาพสูง ระบบ VRF, แอร์ธรรมดา, พัดลมและอุปกรณ์เสริม พร้อมบริการติดตั้งและดูแล">
   <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
+    
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
       <nav class="text-sm mb-4 text-primary-100">
         <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">อุปกรณ์ปรับอากาศ</span>
diff --git a/src/pages/เทอร์โมเบรค-thermobreak.astro b/src/pages/เทอร์โมเบรค-thermobreak.astro
index 81017a2..a1d99d3 100644
--- a/src/pages/เทอร์โมเบรค-thermobreak.astro
+++ b/src/pages/เทอร์โมเบรค-thermobreak.astro
@@ -27,7 +27,40 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
   <main class="bg-white min-h-screen pb-24 md:pb-0">
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <nav class="text-sm mb-4 text-primary-100">
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">เทอร์โมเบรค Thermobreak</span>
         </nav>
diff --git a/src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro b/src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro
index d044056..a3350ed 100644
--- a/src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro
+++ b/src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro
@@ -326,7 +326,40 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
 
     <!-- Price List Section -->
     <section id="pricelist" class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+      
+    <!-- Animated Background -->
+    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
+      
+      <!-- Floating Particles -->
+      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
+      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
+      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
+      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
+      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
+      
+      <!-- Water-inspired Waves -->
+      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
+        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
+          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
+        </path>
+        <defs>
+          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#40916c"/>
+            <stop offset="50%" stop-color="#74c69d"/>
+            <stop offset="100%" stop-color="#40916c"/>
+          </linearGradient>
+        </defs>
+      </svg>
+      
+      <!-- Second Wave Layer -->
+      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
+        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
+          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
+        </path>
+      </svg>
+    </div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div class="max-w-lg mx-auto">
           <h2 class="text-lg sm:text-xl font-bold mb-6 text-center">ดาวน์โหลดราคาสินค้า</h2>
           <a href="/documents/Price List MECH_V13-2021 [260864](1).pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow group">