Update insulation brand pages (Armaflex, Aeroflex, Maxflex)

- Added 3 new brand pages: armflex.astro, aeroflex.astro, maxflex.astro
- Updated hero images with product photos from 3t-insulation.com
- Enhanced content with product specifications and benefits
- Added standard certifications (FM Approved, UL 94, GREENGUARD)
- Added product gallery sections
- Shortened menu names to brand only (Armaflex, Aeroflex, Maxflex)
- Removed old ฉนวนหุ้มท่อ.astro page
- Updated Header and BaseLayout navigation
- Downloaded product images for all 3 brands

src/pages/ระบบน้ำ.astro

@@ -5,8 +5,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ระบบน้ำ - วาล์ว ปั๊มน้ำ ระบบกรองน้ำ" description="ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
   <main class="bg-white min-h-screen">
     <!-- Category Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
+    <!-- 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="grid lg:grid-cols-2 gap-12 items-center">
           <div>
             <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ระบบน้ำ</span>
@@ -30,7 +62,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
             </div>
           </div>
           <div>
-            <img src="/images/products-cropped/water-pump_000C.jpg" alt="ระบบน้ำ" class="rounded-2xl" loading="eager" />
+            <img src="/images/products-cropped/water-pump_000C.svg" alt="ระบบน้ำ" class="rounded-2xl" loading="eager" />
           </div>
         </div>
       </div>
@@ -38,12 +70,12 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 
     <!-- Products -->
     <section class="py-16 bg-neutral-50">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">สินค้าในหมวดนี้</h2>
         <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
           <a href="/วาล์ว-valve" class="group overflow-hidden block bg-white rounded-xl border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
             <div class="aspect-square overflow-hidden">
-              <img src="/images/products-cropped/valve_000C.jpg" alt="วาล์ว" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
+              <img src="/images/products-cropped/valve_000C.svg" alt="วาล์ว" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
             </div>
             <div class="p-4 text-center">
               <h3 class="text-lg font-bold text-neutral-800 group-hover:text-primary-600 transition-colors">วาล์ว</h3>
@@ -52,7 +84,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 
           <a href="/water-pump" class="group overflow-hidden block bg-white rounded-xl border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
             <div class="aspect-square overflow-hidden">
-              <img src="/images/products-cropped/water-pump_000C.jpg" alt="ปั๊มน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
+              <img src="/images/products-cropped/water-pump_000C.svg" alt="ปั๊มน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
             </div>
             <div class="p-4 text-center">
               <h3 class="text-lg font-bold text-neutral-800 group-hover:text-primary-600 transition-colors">ปั๊มน้ำ</h3>
@@ -61,7 +93,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 
           <a href="/water-treatment" class="group overflow-hidden block bg-white rounded-xl border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
             <div class="aspect-square overflow-hidden">
-              <img src="/images/products-cropped/water-treatment_000C.jpg" alt="ระบบกรองน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
+              <img src="/images/products-cropped/water-treatment_000C.svg" alt="ระบบกรองน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
             </div>
             <div class="p-4 text-center">
               <h3 class="text-lg font-bold text-neutral-800 group-hover:text-primary-600 transition-colors">ระบบกรองน้ำ</h3>