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: "ภาพสินค้าจริงจากงานติดตั้ง — คลิกเพื่อดูภาพขนาดเต็ม"
This commit is contained in:
Kunthawat Greethong
@@ -237,7 +237,49 @@ const description = "MICROFIBER ผู้ผลิตฉนวนใยแก้
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
|
||||
<!-- 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">
|
||||
<h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
|
||||
|
||||
Reference in New Issue
Block a user