Fix missing product images across all pages
- Fixed รั้วเทวดา page: Replaced รุ่นสินค้า section with gallery of actual photos from LINE album - Fixed ระบบรั้วไวน์แมน page: Changed all SVG refs to JPG - Fixed ท่อ-upvc, ท่อ-xy-lent, ระบบน้ำ pages - Fixed วาล์ว-valve, อุปกรณ์ดับเพลิง, อุปกรณ์ปรับอากาศ pages - Fixed เครื่องเชื่อม-ppr, เทอร์โมเบรค-thermobreak, เม็กกรู๊ฟ-คับปลิ้ง pages - Copied รั้วเทวดา images to public/images/tevada/
This commit is contained in:
Kunthawat Greethong
@@ -10,7 +10,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</nav>
|
||||
<div class="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div class="img-hover rounded-2xl overflow-hidden bg-white/10">
|
||||
<img src="/images/products-raw/tevada/TEVADA_001-987x1024.svg" alt="รั้วเทวดา" class="w-full" loading="eager" />
|
||||
<img src="/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg" alt="รั้วเทวดา" class="w-full" loading="eager" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-primary-200 font-medium">ระบบรั้วและฉากกั้น</span>
|
||||
@@ -60,175 +60,22 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Models Section -->
|
||||
<!-- Gallery Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-4">รุ่นสินค้า</h2>
|
||||
<p class="text-neutral-600 max-w-2xl mx-auto">เลือกขนาดตามความต้องการ</p>
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-4">ภาพตัวอย่างผลงาน</h2>
|
||||
<p class="text-neutral-600 max-w-2xl mx-auto">รั้วเทวดาติดตั้งจริงในพื้นที่ต่างๆ</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- TVD-1250 -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-neutral-200">
|
||||
<div class="aspect-video overflow-hidden">
|
||||
<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>
|
||||
|
||||
<img src="/images/products-raw/tevada/TEVADA_003-1024x647.svg" alt="TVD-1250" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-xl font-bold text-neutral-900">TVD-1250</h3>
|
||||
<span class="text-lg font-semibold text-primary-600">฿3,200</span>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm text-neutral-600 mb-4">
|
||||
<div class="flex justify-between"><span>ความหนา:</span><span class="font-medium">0.5 มิลลิเมตร</span></div>
|
||||
<div class="flex justify-between"><span>สูง:</span><span class="font-medium">1.25 เมตร</span></div>
|
||||
<div class="flex justify-between"><span>กว้าง:</span><span class="font-medium">2 เมตร</span></div>
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>เหมาะสำหรับรั้วส่วนตัว</li>
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>น้ำหนักเบา ติดตั้งง่าย</li>
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>ราคาประหยัด</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
|
||||
<img src="/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg" alt="รั้วเทวดา ภาพที่ 1" class="w-full h-auto" loading="lazy" />
|
||||
</div>
|
||||
<!-- TVD-1500 -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-neutral-200">
|
||||
<div class="aspect-video overflow-hidden">
|
||||
<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>
|
||||
|
||||
<img src="/images/products-raw/tevada/TEVADA_004.svg" alt="TVD-1500" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-xl font-bold text-neutral-900">TVD-1500</h3>
|
||||
<span class="text-lg font-semibold text-primary-600">฿3,800</span>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm text-neutral-600 mb-4">
|
||||
<div class="flex justify-between"><span>ความหนา:</span><span class="font-medium">0.6 มิลลิเมตร</span></div>
|
||||
<div class="flex justify-between"><span>สูง:</span><span class="font-medium">1.50 เมตร</span></div>
|
||||
<div class="flex justify-between"><span>กว้าง:</span><span class="font-medium">2 เมตร</span></div>
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>เหมาะสำหรับโกดัง</li>
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>ความแข็งแรงสูง</li>
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>ทนสนิมได้ดี</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
|
||||
<img src="/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_2.jpg" alt="รั้วเทวดา ภาพที่ 2" class="w-full h-auto" loading="lazy" />
|
||||
</div>
|
||||
<!-- TVD-2000 -->
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-neutral-200">
|
||||
<div class="aspect-video overflow-hidden">
|
||||
<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>
|
||||
|
||||
<img src="/images/products-raw/tevada/TEVADA_005.svg" alt="TVD-2000" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-xl font-bold text-neutral-900">TVD-2000</h3>
|
||||
<span class="text-lg font-semibold text-primary-600">฿4,500</span>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm text-neutral-600 mb-4">
|
||||
<div class="flex justify-between"><span>ความหนา:</span><span class="font-medium">0.7 มิลลิเมตร</span></div>
|
||||
<div class="flex justify-between"><span>สูง:</span><span class="font-medium">2.00 เมตร</span></div>
|
||||
<div class="flex justify-between"><span>กว้าง:</span><span class="font-medium">2 เมตร</span></div>
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>เหมาะสำหรับโรงงาน</li>
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>ทนทานสูงสุด</li>
|
||||
<li class="flex items-center text-sm text-neutral-700"><span class="text-primary-600 mr-2">✓</span>รองรับพื้นที่ขนาดใหญ่</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
|
||||
<img src="/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_3.jpg" alt="รั้วเทวดา ภาพที่ 3" class="w-full h-auto" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user