From f12f84cf529a38828ba39f1e65b29f96cf5530f6 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Sun, 24 May 2026 20:11:00 +0700
Subject: [PATCH] Add sticky wrapper to pages with img-hover class

---
 src/pages/realflex.astro               | 1 +
 src/pages/water-treatment.astro        | 1 +
 src/pages/ท่อ-xy-lent.astro             | 3 ++-
 src/pages/ระบบรั้วไวน์แมน.astro           | 1 +
 src/pages/รั้วเทวดา.astro                | 3 ++-
 src/pages/เทอร์โมเบรค-thermobreak.astro | 1 +
 6 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/realflex.astro b/src/pages/realflex.astro
index 74538ab..38da5da 100644
--- a/src/pages/realflex.astro
+++ b/src/pages/realflex.astro
@@ -65,6 +65,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">Realflex</span>
         </nav>
         <div class="grid lg:grid-cols-2 gap-8 items-start">
+          <div class="lg:sticky lg:top-24">
           <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
             <img src="/images/products-cropped/realflex_000C.jpg" alt="Realflex" class="w-full" loading="eager" />
           </div>
diff --git a/src/pages/water-treatment.astro b/src/pages/water-treatment.astro
index 7cf7d8b..998b9ab 100644
--- a/src/pages/water-treatment.astro
+++ b/src/pages/water-treatment.astro
@@ -65,6 +65,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบกรองน้ำ</span>
         </nav>
         <div class="grid lg:grid-cols-2 gap-8 items-start">
+          <div class="lg:sticky lg:top-24">
           <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
             <img src="/images/products-cropped/water-treatment_000C.jpg" alt="ระบบกรองน้ำ" class="w-full" loading="eager" />
           </div>
diff --git a/src/pages/ท่อ-xy-lent.astro b/src/pages/ท่อ-xy-lent.astro
index 364d837..d9449ba 100644
--- a/src/pages/ท่อ-xy-lent.astro
+++ b/src/pages/ท่อ-xy-lent.astro
@@ -41,7 +41,8 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
         <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ท่อ XYLENT</span>
       </nav>
       <div class="grid lg:grid-cols-2 gap-8 items-start">
-        <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
+        <div class="lg:sticky lg:top-24">
+          <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
           <img src="/images/products-cropped/XYLENT_001.png" alt="ท่อ XYLENT" class="w-full" loading="eager" />
         </div>
         <div>
diff --git a/src/pages/ระบบรั้วไวน์แมน.astro b/src/pages/ระบบรั้วไวน์แมน.astro
index 0303e4f..d065a64 100644
--- a/src/pages/ระบบรั้วไวน์แมน.astro
+++ b/src/pages/ระบบรั้วไวน์แมน.astro
@@ -65,6 +65,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบรั้วไวน์แมน</span>
         </nav>
         <div class="grid lg:grid-cols-2 gap-8 items-start">
+          <div class="lg:sticky lg:top-24">
           <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
             <img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg" alt="ระบบรั้วไวน์แมน Vineman" class="w-full" loading="eager" />
           </div>
diff --git a/src/pages/รั้วเทวดา.astro b/src/pages/รั้วเทวดา.astro
index 52af1a3..816f6a1 100644
--- a/src/pages/รั้วเทวดา.astro
+++ b/src/pages/รั้วเทวดา.astro
@@ -42,7 +42,8 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
         <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">รั้วเทวดา</span>
       </nav>
       <div class="grid lg:grid-cols-2 gap-8 items-start">
-        <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
+        <div class="lg:sticky lg:top-24">
+          <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
           <img src="/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg" alt="รั้วเทวดา" class="w-full" loading="eager" />
         </div>
         <div>
diff --git a/src/pages/เทอร์โมเบรค-thermobreak.astro b/src/pages/เทอร์โมเบรค-thermobreak.astro
index f590b69..76e1f39 100644
--- a/src/pages/เทอร์โมเบรค-thermobreak.astro
+++ b/src/pages/เทอร์โมเบรค-thermobreak.astro
@@ -65,6 +65,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
           <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">เทอร์โมเบรค Thermobreak</span>
         </nav>
         <div class="grid lg:grid-cols-2 gap-8 items-start">
+          <div class="lg:sticky lg:top-24">
           <div class="img-hover rounded-2xl overflow-hidden bg-white/10">
             <img src="/images/thermobreak/thermobreak-solarblock.png" alt="เทอร์โมเบรค Thermobreak" class="w-full" loading="eager" />
           </div>