feat(insulation): add product photo gallery to 6 insulation pages

User provided 61 additional product photos across 6 insulation
brands. Added a responsive image gallery section (before CTA)
to each of these product pages:

- armflex.astro: 7 photos
- aeroflex.astro: 15 photos
- maxflex.astro: 9 photos
- เทอร์โมเบรค-thermobreak.astro: 9 photos
- rockwool.astro: 11 photos
- microfiber.astro: 10 photos

Files renamed to gallery-1.jpg ... gallery-N.jpg format in
public/images/{brand}/. Each image is clickable (opens full
size in new tab), uses lazy loading, and has hover zoom.

Gallery section layout:
- 2 columns on mobile, 3 on tablet, 4 on desktop
- Title: "แกลอรี่ภาพสินค้า"
- Subtitle: "ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม"

src/pages/aeroflex.astro

@@ -125,6 +125,63 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       </div>
     </section>
 
+        
+    <!-- Gallery -->
+    <section class="py-16 bg-white">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-10">
+          <h2 class="text-2xl font-bold text-primary-700 mb-2">แกลอรี่ภาพสินค้า</h2>
+          <p class="text-neutral-600">ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม</p>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <a href="/images/aeroflex/gallery-1.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-1.jpg" alt="Aeroflex ภาพที่ 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-2.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-2.jpg" alt="Aeroflex ภาพที่ 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-3.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-3.jpg" alt="Aeroflex ภาพที่ 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-4.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-4.jpg" alt="Aeroflex ภาพที่ 4" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-5.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-5.jpg" alt="Aeroflex ภาพที่ 5" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-6.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-6.jpg" alt="Aeroflex ภาพที่ 6" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-7.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-7.jpg" alt="Aeroflex ภาพที่ 7" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-8.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-8.jpg" alt="Aeroflex ภาพที่ 8" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-9.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-9.jpg" alt="Aeroflex ภาพที่ 9" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-10.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-10.jpg" alt="Aeroflex ภาพที่ 10" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-11.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-11.jpg" alt="Aeroflex ภาพที่ 11" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-12.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-12.jpg" alt="Aeroflex ภาพที่ 12" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-13.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-13.jpg" alt="Aeroflex ภาพที่ 13" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-14.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-14.jpg" alt="Aeroflex ภาพที่ 14" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/aeroflex/gallery-15.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/aeroflex/gallery-15.jpg" alt="Aeroflex ภาพที่ 15" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+        </div>
+      </div>
+    </section>
 <!-- CTA -->
     <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

src/pages/armflex.astro

@@ -123,6 +123,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       </div>
     </section>
 
+        
+    <!-- Gallery -->
+    <section class="py-16 bg-white">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-10">
+          <h2 class="text-2xl font-bold text-primary-700 mb-2">แกลอรี่ภาพสินค้า</h2>
+          <p class="text-neutral-600">ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม</p>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <a href="/images/armflex/gallery-1.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/armflex/gallery-1.jpg" alt="Armflex ภาพที่ 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/armflex/gallery-2.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/armflex/gallery-2.jpg" alt="Armflex ภาพที่ 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/armflex/gallery-3.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/armflex/gallery-3.jpg" alt="Armflex ภาพที่ 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/armflex/gallery-4.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/armflex/gallery-4.jpg" alt="Armflex ภาพที่ 4" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/armflex/gallery-5.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/armflex/gallery-5.jpg" alt="Armflex ภาพที่ 5" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/armflex/gallery-6.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/armflex/gallery-6.jpg" alt="Armflex ภาพที่ 6" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/armflex/gallery-7.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/armflex/gallery-7.jpg" alt="Armflex ภาพที่ 7" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+        </div>
+      </div>
+    </section>
 <!-- CTA -->
     <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

src/pages/maxflex.astro

@@ -110,6 +110,45 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
       </div>
     </section>
 
+        
+    <!-- Gallery -->
+    <section class="py-16 bg-white">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-10">
+          <h2 class="text-2xl font-bold text-primary-700 mb-2">แกลอรี่ภาพสินค้า</h2>
+          <p class="text-neutral-600">ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม</p>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <a href="/images/maxflex/gallery-1.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-1.jpg" alt="Maxflex ภาพที่ 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-2.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-2.jpg" alt="Maxflex ภาพที่ 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-3.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-3.jpg" alt="Maxflex ภาพที่ 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-4.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-4.jpg" alt="Maxflex ภาพที่ 4" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-5.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-5.jpg" alt="Maxflex ภาพที่ 5" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-6.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-6.jpg" alt="Maxflex ภาพที่ 6" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-7.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-7.jpg" alt="Maxflex ภาพที่ 7" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-8.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-8.jpg" alt="Maxflex ภาพที่ 8" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/maxflex/gallery-9.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/maxflex/gallery-9.jpg" alt="Maxflex ภาพที่ 9" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+        </div>
+      </div>
+    </section>
 <!-- CTA -->
     <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

src/pages/microfiber.astro

@@ -237,6 +237,48 @@ const description = "MICROFIBER ผู้ผลิตฉนวนใยแก้
       </div>
     </section>
 
+        
+    <!-- Gallery -->
+    <section class="py-16 bg-white">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-10">
+          <h2 class="text-2xl font-bold text-primary-700 mb-2">แกลอรี่ภาพสินค้า</h2>
+          <p class="text-neutral-600">ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม</p>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <a href="/images/microfiber/gallery-1.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-1.jpg" alt="Microfiber ภาพที่ 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-2.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-2.jpg" alt="Microfiber ภาพที่ 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-3.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-3.jpg" alt="Microfiber ภาพที่ 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-4.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-4.jpg" alt="Microfiber ภาพที่ 4" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-5.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-5.jpg" alt="Microfiber ภาพที่ 5" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-6.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-6.jpg" alt="Microfiber ภาพที่ 6" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-7.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-7.jpg" alt="Microfiber ภาพที่ 7" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-8.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-8.jpg" alt="Microfiber ภาพที่ 8" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-9.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-9.jpg" alt="Microfiber ภาพที่ 9" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/microfiber/gallery-10.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/microfiber/gallery-10.jpg" alt="Microfiber ภาพที่ 10" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+        </div>
+      </div>
+    </section>
 <!-- CTA -->
     <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

src/pages/rockwool.astro

@@ -232,6 +232,51 @@ const description = "ROCKWOOL ฉนวนใยหินคุณภาพส
       </div>
     </section>
 
+        
+    <!-- Gallery -->
+    <section class="py-16 bg-white">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-10">
+          <h2 class="text-2xl font-bold text-primary-700 mb-2">แกลอรี่ภาพสินค้า</h2>
+          <p class="text-neutral-600">ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม</p>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <a href="/images/rockwool/gallery-1.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-1.jpg" alt="Rockwool ภาพที่ 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-2.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-2.jpg" alt="Rockwool ภาพที่ 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-3.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-3.jpg" alt="Rockwool ภาพที่ 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-4.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-4.jpg" alt="Rockwool ภาพที่ 4" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-5.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-5.jpg" alt="Rockwool ภาพที่ 5" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-6.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-6.jpg" alt="Rockwool ภาพที่ 6" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-7.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-7.jpg" alt="Rockwool ภาพที่ 7" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-8.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-8.jpg" alt="Rockwool ภาพที่ 8" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-9.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-9.jpg" alt="Rockwool ภาพที่ 9" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-10.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-10.jpg" alt="Rockwool ภาพที่ 10" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/rockwool/gallery-11.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/rockwool/gallery-11.jpg" alt="Rockwool ภาพที่ 11" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+        </div>
+      </div>
+    </section>
 <!-- CTA -->
     <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">

src/pages/เทอร์โมเบรค-thermobreak.astro

@@ -394,6 +394,45 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
     </section>
 
     <!-- Contact CTA Section -->
+      
+    <!-- Gallery -->
+    <section class="py-16 bg-white">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-10">
+          <h2 class="text-2xl font-bold text-primary-700 mb-2">แกลอรี่ภาพสินค้า</h2>
+          <p class="text-neutral-600">ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม</p>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <a href="/images/thermobreak/gallery-1.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-1.jpg" alt="Thermobreak ภาพที่ 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-2.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-2.jpg" alt="Thermobreak ภาพที่ 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-3.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-3.jpg" alt="Thermobreak ภาพที่ 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-4.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-4.jpg" alt="Thermobreak ภาพที่ 4" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-5.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-5.jpg" alt="Thermobreak ภาพที่ 5" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-6.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-6.jpg" alt="Thermobreak ภาพที่ 6" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-7.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-7.jpg" alt="Thermobreak ภาพที่ 7" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-8.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-8.jpg" alt="Thermobreak ภาพที่ 8" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+            <a href="/images/thermobreak/gallery-9.jpg" target="_blank" rel="noopener" class="group block overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
+              <img src="/images/thermobreak/gallery-9.jpg" alt="Thermobreak ภาพที่ 9" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+            </a>
+        </div>
+      </div>
+    </section>
 <!-- CTA -->
     <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
       <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">