Add sticky wrapper to pages with img-hover class

This commit is contained in:
Kunthawat Greethong
2026-05-24 20:11:00 +07:00
parent e1136fbfbd
commit f12f84cf52
6 changed files with 8 additions and 2 deletions

View File

@@ -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> <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">Realflex</span>
</nav> </nav>
<div class="grid lg:grid-cols-2 gap-8 items-start"> <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"> <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" /> <img src="/images/products-cropped/realflex_000C.jpg" alt="Realflex" class="w-full" loading="eager" />
</div> </div>

View File

@@ -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> <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบกรองน้ำ</span>
</nav> </nav>
<div class="grid lg:grid-cols-2 gap-8 items-start"> <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"> <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" /> <img src="/images/products-cropped/water-treatment_000C.jpg" alt="ระบบกรองน้ำ" class="w-full" loading="eager" />
</div> </div>

View File

@@ -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> <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ท่อ XYLENT</span>
</nav> </nav>
<div class="grid lg:grid-cols-2 gap-8 items-start"> <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" /> <img src="/images/products-cropped/XYLENT_001.png" alt="ท่อ XYLENT" class="w-full" loading="eager" />
</div> </div>
<div> <div>

View File

@@ -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> <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบรั้วไวน์แมน</span>
</nav> </nav>
<div class="grid lg:grid-cols-2 gap-8 items-start"> <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"> <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" /> <img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg" alt="ระบบรั้วไวน์แมน Vineman" class="w-full" loading="eager" />
</div> </div>

View File

@@ -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> <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">รั้วเทวดา</span>
</nav> </nav>
<div class="grid lg:grid-cols-2 gap-8 items-start"> <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" /> <img src="/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg" alt="รั้วเทวดา" class="w-full" loading="eager" />
</div> </div>
<div> <div>

View File

@@ -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> <a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">เทอร์โมเบรค Thermobreak</span>
</nav> </nav>
<div class="grid lg:grid-cols-2 gap-8 items-start"> <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"> <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" /> <img src="/images/thermobreak/thermobreak-solarblock.png" alt="เทอร์โมเบรค Thermobreak" class="w-full" loading="eager" />
</div> </div>