Update insulation brand pages (Armaflex, Aeroflex, Maxflex)
- Added 3 new brand pages: armflex.astro, aeroflex.astro, maxflex.astro - Updated hero images with product photos from 3t-insulation.com - Enhanced content with product specifications and benefits - Added standard certifications (FM Approved, UL 94, GREENGUARD) - Added product gallery sections - Shortened menu names to brand only (Armaflex, Aeroflex, Maxflex) - Removed old ฉนวนหุ้มท่อ.astro page - Updated Header and BaseLayout navigation - Downloaded product images for all 3 brands
This commit is contained in:
Kunthawat Greethong
@@ -4,8 +4,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<BaseLayout title="เกี่ยวกับเรา - ดีล พลัส เทค" description="ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำคุณภาพสูง ราคาโรงงาน มีประสบการณ์กว่า 10 ปี">
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16 lg:py-24">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-3xl">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-6">เกี่ยวกับเรา</h1>
|
||||
<p class="text-lg text-primary-100">
|
||||
@@ -17,7 +48,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Company Info -->
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-primary-700 mb-6">บริษัท ดีล พลัส เทค จำกัด</h2>
|
||||
@@ -92,7 +123,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Stats -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid grid-cols-3 gap-6 lg:gap-8">
|
||||
<div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">10+</div>
|
||||
@@ -112,7 +143,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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 font-bold text-primary-700 mb-4">ทำไมต้องเลือกเรา</h2>
|
||||
</div>
|
||||
|
||||
287
src/pages/aeroflex.astro
Normal file
287
src/pages/aeroflex.astro
Normal file
@@ -0,0 +1,287 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import Header from '@/components/common/Header.astro';
|
||||
import Footer from '@/components/common/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Aerocel D-AL ฉนวนยางดำเคลือบอลูมิเนียม | ดีล พลัส เทค" description="AEROCEL D-AL ฉนวนยางดำ EPDM เคลือบอลูมิเนียมฟอยล์ สำหรับงานหุ้มท่อลมเย็น ระบบปรับอากาศ กันความชื้น ไม่มีฟอร์มาลดีไฮด์">
|
||||
<Header slot="header" />
|
||||
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<!-- Water Wave -->
|
||||
<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-aero)" 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-aero" 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>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/aeroflex/aerocel-d-al-real.jpg" alt="AEROCEL D-AL ฉนวนยางดำเคลือบอลูมิเนียม" class="w-full h-auto rounded-xl" width="600" height="450" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
|
||||
ฉนวนยางดำ EPDM
|
||||
</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">AEROCEL D-AL</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-6 leading-relaxed">
|
||||
ฉนวนยางดำ EPDM เคลือบอลูมิเนียมฟอยล์ (D/AL) จาก Aeroflex ผู้ผลิตฉนวนยางดำคุณภาพสูง สำหรับงานหุ้มระบบปรับอากาศ รักษาอุณหภูมิในท่อดักท์ ลดการสูญเสียพลังงาน และเพิ่มความสวยงาม
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-8">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-primary-700 hover:bg-primary-50 py-3 px-6 rounded-xl font-semibold flex items-center gap-2">
|
||||
<span>แชท</span>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-6 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<span>090-555-1415</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>เคลือบอลูมิเนียมฟอยล์</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>ป้องกันความชื้น</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>ไม่มีฟอร์มาลดีไฮด์</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>ทนรังสี UV</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-8">รายละเอียดสินค้า AEROCEL D-AL</h2>
|
||||
|
||||
<div class="prose prose-lg max-w-none mb-8">
|
||||
<p class="text-lg text-slate-700 leading-relaxed mb-6">
|
||||
<strong>AEROCEL D-AL</strong> ฉนวนยางดำ EPDM เคลือบผิวด้วยอลูมิเนียมฟอยล์ สำหรับงานหุ้มระบบปรับอากาศ ผลิตจากฉนวนยางดำชนิด EPDM รีดออกมาเป็นแผ่นและปิดผิวทับด้วยอลูมิเนียมฟอยล์ นำมาหุ้มท่อปรับอากาศ เพื่อรักษาอุณหภูมิในท่อดักท์ ลดการสูญเสียพลังงาน ลดเสียงรบกวน ช่วยลดการเกิดเชื้อราและแบคทีเรียสะสม
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="bg-primary-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold text-primary-700 mb-4">คุณสมบัติเด่น</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>เคลือบอลูมิเนียมฟอยล์</strong> — ป้องกันความชื้น เพิ่มความทนทาน</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>โครงสร้างเซลล์ปิด</strong> — กันไอน้ำและความชื้นได้ดี</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ยืดหยุ่นสูง</strong> — ติดตั้งง่าย เข้ามุม เข้ารูปได้ดี</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ลดเสียงรบกวน</strong> — ดูดซับเสียงจากระบบท่อ</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ปลอดภัย</strong> — ไม่มีเส้นใย ไม่มีฟอร์มาลดีไฮด์</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-4">ข้อมูลจำเพาะ</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">วัสดุ:</span>
|
||||
<span class="text-slate-700">ยาง EPDM (Ethylene Propylene Diene Monomer)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">การเคลือบ:</span>
|
||||
<span class="text-slate-700">อลูมิเนียมฟอยล์ 1 ด้าน</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">โครงสร้าง:</span>
|
||||
<span class="text-slate-700">เซลล์ปิด (Close Cell)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">อุณหภูมิใช้งาน:</span>
|
||||
<span class="text-slate-700">-50°C ถึง +116°C</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">ขนาด:</span>
|
||||
<span class="text-slate-700">กว้าง 1 เมตร x ยาว 10 เมตร</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">ประโยชน์จากการใช้งาน AEROCEL D-AL</h3>
|
||||
<ul class="list-disc pl-6 mb-6 space-y-3">
|
||||
<li><strong>รักษาอุณหภูมิในท่อดักท์</strong> — ลดการสูญเสียความเย็น ประหยัดพลังงาน</li>
|
||||
<li><strong>ป้องกันการเกิดหยดน้ำ (Condensation)</strong> — โครงสร้างเซลล์ปิดและเคลือบอลูมิเนียมช่วยป้องกันความชื้น</li>
|
||||
<li><strong>ลดเสียงรบกวน</strong> — ดูดซับเสียงจากการไหลของอากาศในท่อ</li>
|
||||
<li><strong>ป้องกันเชื้อราและแบคทีเรีย</strong> — ผิวเรียบไม่เป็นที่สะสมของเชื้อรา</li>
|
||||
<li><strong>เพิ่มความสวยงาม</strong> — ผิวอลูมิเนียมเรียบสวย เหมาะกับงานที่ต้องการความสวยงาม</li>
|
||||
<li><strong>เพิ่มคุณภาพอากาศในอาคาร</strong> — ปลอดภัย ไม่มีเส้นใย ไม่มีฟอร์มาลดีไฮด์</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">การประยุกต์ใช้งาน</h3>
|
||||
<p class="text-lg text-slate-700 mb-6">
|
||||
AEROCEL D-AL เหมาะสำหรับใช้ในงานต่างๆ ดังนี้:
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ท่อลมเย็น (Air Duct)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบปรับอากาศ (HVAC)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ท่อน้ำเย็น (Chilled Water)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบทำความเย็น (Refrigeration)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 mb-8">
|
||||
<h4 class="font-semibold text-slate-900 mb-2">💡 คำแนะนำการเลือกความหนา</h4>
|
||||
<ul class="text-slate-700 space-y-1">
|
||||
<li>• ท่อลมเย็น ขนาดเล็ก: 10-15 มม.</li>
|
||||
<li>• ท่อลมเย็น ขนาดกลาง-ใหญ่: 15-25 มม.</li>
|
||||
<li>• ท่อลมเย็น ขนาดใหญ่พิเศษ: 25-40 มม.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-primary-50 border-l-4 border-primary-600 p-4 mt-6">
|
||||
<p class="text-slate-700">
|
||||
<strong>สอบถามราคาและสั่งซื้อ:</strong> ติดต่อเราได้ที่ Line: <a href="https://line.me/ti/p/~JPPSELECTION" class="text-primary-700 underline">@JPPSELECTION</a> หรือโทร <a href="tel:0905551415" class="text-primary-700 underline">090-555-1415</a> ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Image Gallery -->
|
||||
<section class="py-12 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-8 text-center">ภาพสินค้า AEROCEL D-AL</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
<div class="rounded-xl overflow-hidden shadow-lg">
|
||||
<img src="/images/aeroflex/aerocel-d-al-real.jpg" alt="AEROCEL D-AL ภาพมุมบน" class="w-full h-auto" loading="lazy" />
|
||||
</div>
|
||||
<div class="rounded-xl overflow-hidden shadow-lg">
|
||||
<img src="/images/aeroflex/aerocel-d-al-duct.jpg" alt="AEROCEL D-AL หุ้มท่อลมเย็น" class="w-full h-auto" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download Section -->
|
||||
<section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-lg mx-auto text-center">
|
||||
<h2 class="text-xl font-bold mb-6">📥 ดาวน์โหลดราคาสินค้า Aeroflex</h2>
|
||||
<a href="/documents/19 Pricelist Aeroflex (update 2565).pdf" target="_blank" class="inline-flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow text-left">
|
||||
<svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-slate-900">Pricelist Aeroflex (update 2565)</div>
|
||||
<div class="text-sm text-slate-500">PDF Document</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-16 bg-primary-600 text-white text-center">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4">สนใจสินค้า Aeroflex?</h2>
|
||||
<p class="text-lg text-white/80 mb-8">ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-primary-700 hover:bg-gray-100 py-3 px-8 rounded-xl font-semibold flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
<span>แชท Line</span>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-8 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
<span>090-555-1415</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
@@ -7,8 +7,8 @@ const products = [
|
||||
{ name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-cropped/hdpe001.png", category: "ท่อพีพีอาร์" },
|
||||
{ name: "ท่อ UPVC", href: "/ท่อ-upvc", image: "/images/products-cropped/upvc-pipe_000C.jpg", category: "ท่อ UPVC" },
|
||||
{ name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-cropped/syler-pipe-cold-water.jpg", category: "ท่อ UPVC" },
|
||||
{ name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อ UPVC" },
|
||||
{ name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/HDPE-welding-crop.jpg", category: "เครื่องเชื่อม" },
|
||||
{ name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/xylent.svg", category: "ท่อ UPVC" },
|
||||
{ name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/HDPE/welding.svg", category: "เครื่องเชื่อม" },
|
||||
{ name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr-welding-machine-main.jpg", category: "เครื่องเชื่อม" },
|
||||
{ name: "Pipe Coupling", href: "/pipe-coupling", image: "/images/pipe-coupling/BG-SMC02.png", category: "เครื่องเชื่อม" },
|
||||
{ name: "เม็กกรู๊ฟ คับปลิ้ง", href: "/เม็กกรู๊ฟ-คับปลิ้ง", image: "/images/products-misc/MECH_001.jpg", category: "เครื่องเชื่อม" },
|
||||
@@ -20,7 +20,9 @@ const products = [
|
||||
{ name: "กริลแอร์", href: "/grilles", image: "/images/products-cropped/grilles_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
||||
{ name: "อุปกรณ์ดับเพลิง", href: "/อุปกรณ์ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
|
||||
{ name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "ฉนวนหุ้มท่อ", href: "/ฉนวนหุ้มท่อ", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนและรั้ว" },
|
||||
{ name: "Armaflex", href: "/armflex", image: "/images/armflex/armflex-product.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "Aeroflex", href: "/aeroflex", image: "/images/aeroflex/aeroflex-product.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "Maxflex", href: "/maxflex", image: "/images/maxflex/maxflex-product.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนและรั้ว" },
|
||||
{ name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/products-raw/tevada/TEVADA_001-987x1024.png", category: "ฉนวนและรั้ว" },
|
||||
{ name: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน", image: "/images/products-cropped/vineman_000C.jpg", category: "ฉนวนและรั้ว" },
|
||||
@@ -39,8 +41,40 @@ const categories = [
|
||||
|
||||
<BaseLayout title="สินค้าทั้งหมด - ดีล พลัส เทค" description="สินค้าระบบน้ำคุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ">
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">สินค้าทั้งหมด</h1>
|
||||
<p class="text-lg text-primary-100">สินค้าระบบน้ำคุณภาพสูง {products.length} รายการ</p>
|
||||
</div>
|
||||
@@ -48,7 +82,7 @@ const categories = [
|
||||
|
||||
<!-- Categories -->
|
||||
<section class="py-8 bg-white border-b border-neutral-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="#all" class="px-4 py-2 bg-primary-600 text-white rounded-full text-sm font-medium">ทั้งหมด ({products.length})</a>
|
||||
{categories.map(cat => (
|
||||
@@ -62,7 +96,7 @@ const categories = [
|
||||
|
||||
<!-- Products Grid -->
|
||||
<section class="py-16 lg:py-24 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 stagger-container">
|
||||
{products.map(product => (
|
||||
<a href={product.href} class="group bg-white rounded-xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
|
||||
|
||||
302
src/pages/armflex.astro
Normal file
302
src/pages/armflex.astro
Normal file
@@ -0,0 +1,302 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import Header from '@/components/common/Header.astro';
|
||||
import Footer from '@/components/common/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Armaflex Class Roll ฉนวนยางดำแบบม้วน | ดีล พลัส เทค" description="Armaflex Class 1 ฉนวนยางดำแบบม้วน (Sheet/Roll) สำหรับงานเครื่องเย็น ระบบปรับอากาศ อุณหภูมิใช้งาน -50°C ถึง 105°C มาตรฐาน FM Approved">
|
||||
<Header slot="header" />
|
||||
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<!-- Water Wave -->
|
||||
<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-arm)" 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-arm" 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>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/armflex/armaflex-sheet-roll.jpg" alt="Armaflex Class Roll ฉนวนยางดำแบบม้วน" class="w-full h-auto rounded-xl" width="600" height="450" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
|
||||
ฉนวนยางดำ NBR
|
||||
</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">Armaflex Class 1 ชนิดม้วน</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-6 leading-relaxed">
|
||||
ฉนวนยางดำสังเคราะห์ชนิด NBR (Nitrile Rubber) แบบม้วน (Sheet/Roll) จาก Armacell ผู้นำด้านนวัติกรรมฉนวนระดับโลก อุณหภูมิใช้งาน -50°C ถึง 105°C เหมาะสำหรับงานเครื่องเย็น ระบบปรับอากาศ และท่อน้ำเย็น มาตรฐาน FM Approved
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-8">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-primary-700 hover:bg-primary-50 py-3 px-6 rounded-xl font-semibold flex items-center gap-2">
|
||||
<span>แชท</span>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-6 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<span>090-555-1415</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>FM Approved</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>UL 94 V-0</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>GREENGUARD Gold</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>โครงสร้างเซลล์ปิด</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-8">รายละเอียดสินค้า Armaflex Class 1 ชนิดม้วน</h2>
|
||||
|
||||
<div class="prose prose-lg max-w-none mb-8">
|
||||
<p class="text-lg text-slate-700 leading-relaxed mb-6">
|
||||
<strong>Armaflex Class 1</strong> เป็นผลิตภัณฑ์ในเครือของ <strong>Armacell</strong> ซึ่งเป็นบริษัทผลิตและวิจัยพัฒนาฉนวนยางดำชั้นนำของโลก ฉนวนยางดำแบบม้วน (Sheet/Roll) ผลิตจากยางสังเคราะห์ชนิด NBR มีโครงสร้างเซลล์ปิด (Close Cell Structure) ช่วยป้องกันการซึมผ่านของไอน้ำและความชื้นได้อย่างมีประสิทธิภาพ
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="bg-primary-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold text-primary-700 mb-4">คุณสมบัติเด่น</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>โครงสร้างเซลล์ปิด</strong> — ป้องกันการดูดซับน้ำและไอน้ำ</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ค่าการนำความร้อนต่ำ</strong> — ประหยัดพลังงาน รักษาอุณหภูมิได้ดี</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ยืดหยุ่นสูง</strong> — ติดตั้งง่าย เข้ามุม เข้ารูปได้ดี</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ทนทาน</strong> — ทนต่อสภาพอากาศและรังสี UV</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ปลอดภัย</strong> — ไม่มีเส้นใย ไม่มีฟอร์มาลดีไฮด์</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-4">ข้อมูลจำเพาะ</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">วัสดุ:</span>
|
||||
<span class="text-slate-700">ยางสังเคราะห์ NBR (Nitrile Rubber)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">โครงสร้าง:</span>
|
||||
<span class="text-slate-700">เซลล์ปิด (Close Cell)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">อุณหภูมิใช้งาน:</span>
|
||||
<span class="text-slate-700">-50°C ถึง +105°C</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">ความหนา:</span>
|
||||
<span class="text-slate-700">6-25 มม.</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">ขนาดม้วน:</span>
|
||||
<span class="text-slate-700">กว้าง 1 เมตร x ยาว 10-30 เมตร</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">มาตรฐานและการรับรอง</h3>
|
||||
<p class="text-lg text-slate-700 mb-6">
|
||||
Armaflex Class 1 ได้รับการรับรองมาตรฐานระดับโลกหลายรายการ:
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-4 mb-8">
|
||||
<div class="p-4 bg-blue-50 rounded-xl text-center">
|
||||
<div class="text-2xl font-bold text-blue-700 mb-2">FM Approved</div>
|
||||
<p class="text-sm text-slate-700">มาตรฐานความปลอดภัยจากประกันภัย</p>
|
||||
</div>
|
||||
<div class="p-4 bg-green-50 rounded-xl text-center">
|
||||
<div class="text-2xl font-bold text-green-700 mb-2">UL 94 V-0</div>
|
||||
<p class="text-sm text-slate-700">มาตรฐานทนไฟระดับสูง</p>
|
||||
</div>
|
||||
<div class="p-4 bg-purple-50 rounded-xl text-center">
|
||||
<div class="text-2xl font-bold text-purple-700 mb-2">GREENGUARD Gold</div>
|
||||
<p class="text-sm text-slate-700">รับรองคุณภาพอากาศในอาคาร</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">ค่าความต้านทานการแพร่ของไอน้ำ (μ)</h3>
|
||||
<p class="text-lg text-slate-700 mb-4">
|
||||
ฉนวนยางดำ Armaflex Class 1 มีค่า μ = <strong>10,000</strong> ซึ่งสูงกว่าวัสดุก่อสร้างทั่วไป:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||
<li>ก้อนอิฐ: μ = 14.28</li>
|
||||
<li>แผ่นคอนกรีต: μ = 76</li>
|
||||
<li>แผ่นเหล็กสแตนเลส: μ = 1,000</li>
|
||||
<li><strong>Armaflex Class 1: μ = 10,000</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">การประยุกต์ใช้งาน</h3>
|
||||
<p class="text-lg text-slate-700 mb-6">
|
||||
ด้วยอุณหภูมิการใช้งานที่ค่อนไปทางต่ำ (-50°C ถึง +105°C) Armaflex Class 1 ชนิดม้วน เหมาะสำหรับงานระบบเย็นดังนี้:
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบปรับอากาศ (HVAC/R)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ท่อน้ำเย็น (Chilled Water)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ห้องแช่แข็ง (Cold Storage)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบท่อลมเย็น</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">ข้อดีของการใช้ Armaflex Class 1</h3>
|
||||
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||
<li><strong>ป้องกัน CUI (Corrosion Under Insulation)</strong> — โครงสร้างเซลล์ปิดป้องกันไอน้ำซึมเข้าทำให้เกิดสนิมใต้ฉนวน</li>
|
||||
<li><strong>ประหยัดค่าพลังงาน</strong> — ค่าการนำความร้อนต่ำ ลดการสูญเสียความเย็น</li>
|
||||
<li><strong>ลดการเกิดหยดน้ำ</strong> — ผิวฉนวนเซลล์ปิดไม่ดูดซับความชื้น</li>
|
||||
<li><strong>คุณภาพอากาศในอาคาร</strong> — ปลอดภัย ไม่มีเส้นใย ไม่มีฟอร์มาลดีไฮด์</li>
|
||||
<li><strong>ติดตั้งง่าย</strong> — ยืดหยุ่น เข้ารูปได้ดี ไม่ต้องใช้เครื่องมือพิเศษ</li>
|
||||
</ul>
|
||||
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 mb-8">
|
||||
<h4 class="font-semibold text-slate-900 mb-2">💡 คำแนะนำการเลือกความหนา</h4>
|
||||
<ul class="text-slate-700 space-y-1">
|
||||
<li>• ท่อน้ำเย็น: 15-25 มม.</li>
|
||||
<li>• ท่อลมเย็น: 20-40 มม.</li>
|
||||
<li>• ห้องแช่แข็ง: 25-50 มม.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-primary-50 border-l-4 border-primary-600 p-4 mt-6">
|
||||
<p class="text-slate-700">
|
||||
<strong>สอบถามราคาและสั่งซื้อ:</strong> ติดต่อเราได้ที่ Line: <a href="https://line.me/ti/p/~JPPSELECTION" class="text-primary-700 underline">@JPPSELECTION</a> หรือโทร <a href="tel:0905551415" class="text-primary-700 underline">090-555-1415</a> ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download Section -->
|
||||
<section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-lg mx-auto text-center">
|
||||
<h2 class="text-xl font-bold mb-6">📥 ดาวน์โหลดราคาสินค้า Armaflex</h2>
|
||||
<a href="/documents/16 Price List Armaflex 2567.pdf" target="_blank" class="inline-flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow text-left">
|
||||
<svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-slate-900">Price List Armaflex 2567</div>
|
||||
<div class="text-sm text-slate-500">PDF Document</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-16 bg-primary-600 text-white text-center">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4">สนใจสินค้า Armaflex?</h2>
|
||||
<p class="text-lg text-white/80 mb-8">ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-primary-700 hover:bg-gray-100 py-3 px-8 rounded-xl font-semibold flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
<span>แชท Line</span>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-8 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
<span>090-555-1415</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
@@ -4,8 +4,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<BaseLayout title="ติดต่อเรา - ดีล พลัส เทค" description="ติดต่อ ดีล พลัส เทค จำกัด โทร 090-555-1415 แอดไลน์ @JPPSELECTION">
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">ติดต่อเรา</h1>
|
||||
<p class="text-lg text-primary-100">พร้อมให้บริการและให้คำปรึกษาฟรี</p>
|
||||
</div>
|
||||
@@ -13,7 +45,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Contact Info -->
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
<!-- Phone -->
|
||||
<a href="tel:090-555-1415" class="bg-neutral-50 rounded-xl p-6 border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all text-center group">
|
||||
|
||||
@@ -5,8 +5,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ระบบวาล์วเติมอากาศ DURGO AVVs" description="จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVs คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
@@ -58,7 +90,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
@@ -176,7 +208,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Range Section -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">ผลิตภัณฑ์วาล์วเติมอากาศ DURGO AVVs</h2>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-6 my-8">
|
||||
@@ -223,7 +255,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">คำถามที่พบบ่อยเกี่ยวกับวาล์วเติมอากาศ DURGO AVVs</h2>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="space-y-4">
|
||||
|
||||
@@ -5,8 +5,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="กริลแอร์พลาสติก (Grilles air plastic)" description="จำหน่ายกริลแอร์พลาสติก (ABS) และอลูมิเนียม คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
@@ -64,7 +96,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none space-y-8 mb-8">
|
||||
|
||||
@@ -3,190 +3,326 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="ดีล พลัส เทค - ระบบน้ำคุณภาพสูง ราคาโรงงาน" description="ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำคุณภาพสูง ราคาโรงงาน ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ และอุปกรณ์โรงงานคุณภาพ">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-700 via-primary-600 to-primary-500 text-white overflow-hidden">
|
||||
<!-- Animated Background Orbs -->
|
||||
|
||||
<!-- Hero Section with Modern Animations -->
|
||||
<section class="relative min-h-[70vh] flex items-center overflow-hidden bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white">
|
||||
<!-- Advanced Animated Background -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-24 -right-24 w-[500px] h-[500px] bg-accent-400/40 rounded-full blur-sm animate-orb-1"></div>
|
||||
<div class="absolute -bottom-24 -left-24 w-[450px] h-[450px] bg-primary-300/40 rounded-full blur-sm animate-orb-2"></div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary-400/20 rounded-full blur-sm animate-orb-3"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
<!-- Animated Gradient Orbs -->
|
||||
<div class="absolute -top-1/4 -right-1/4 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/40 via-primary-500/20 to-transparent rounded-full blur-[120px] animate-mesh-1"></div>
|
||||
<div class="absolute -bottom-1/4 -left-1/4 w-[700px] h-[700px] bg-gradient-to-tr from-primary-300/30 via-primary-400/10 to-transparent rounded-full blur-[100px] animate-mesh-2"></div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] bg-gradient-to-r from-primary-500/10 via-primary-400/5 to-primary-600/10 rounded-full blur-[150px] animate-mesh-3"></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-[300px] opacity-20" viewBox="0 0 1440 300" preserveAspectRatio="none">
|
||||
<path d="M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z" fill="none" stroke="url(#water-gradient)" stroke-width="2">
|
||||
<animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z;M0,180 Q360,80 720,180 T1440,180 L1440,300 L0,300 Z;M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z"/>
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="water-gradient" 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-[250px] opacity-10" viewBox="0 0 1440 250" preserveAspectRatio="none">
|
||||
<path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,250 L0,250 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,250 L0,250 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,250 L0,250 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,250 L0,250 Z"/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
<!-- Text Content -->
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-4">
|
||||
<span class="inline-block px-4 py-1 bg-white/20 rounded-full text-sm font-medium">
|
||||
ระบบน้ำคุณภาพสูง ราคาโรงงาน
|
||||
</span>
|
||||
<h1 class="text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight">
|
||||
ระบบน้ำคุณภาพสูง<br/>
|
||||
<span class="text-accent-400">ราคาโรงงาน</span>
|
||||
</h1>
|
||||
<p class="text-lg text-primary-100 max-w-xl">
|
||||
ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ อุปกรณ์ปรับอากาศ และฉนวนหุ้มท่อสำหรับโรงงานและบ้านเรือน
|
||||
</p>
|
||||
<!-- Badge -->
|
||||
<div data-animate="fade-up" class="inline-flex items-center gap-2 px-5 py-2 bg-white/10 backdrop-blur-sm rounded-full border border-white/20">
|
||||
<span class="w-2 h-2 bg-primary-400 rounded-full animate-pulse"></span>
|
||||
<span class="text-sm font-medium">ระบบน้ำคุณภาพสูง ราคาโรงงาน</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
|
||||
<!-- Main Heading with Text Reveal -->
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.1] tracking-tight">
|
||||
<span data-animate="fade-up" data-animate-delay="100" class="block">ระบบน้ำ</span>
|
||||
<span data-animate="fade-up" data-animate-delay="200" class="block text-transparent bg-clip-text bg-gradient-to-r from-white to-primary-200">คุณภาพสูง</span>
|
||||
<span data-animate="fade-up" data-animate-delay="300" class="block mt-2">
|
||||
<span class="text-primary-300">ราคาโรงงาน</span>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<!-- Description -->
|
||||
<p data-animate="fade-up" data-animate-delay="400" class="text-lg lg:text-xl text-primary-100 max-w-xl leading-relaxed">
|
||||
ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ อุปกรณ์ปรับอากาศ และฉนวนหุ้มท่อสำหรับโรงงานและบ้านเรือน
|
||||
</p>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div data-animate="fade-up" data-animate-delay="500" class="flex flex-wrap gap-4">
|
||||
<a
|
||||
href="/all-products"
|
||||
class="relative z-10 inline-flex items-center justify-center gap-2 bg-accent-500 hover:bg-accent-600 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all hover:shadow-lg hover:-translate-y-0.5"
|
||||
class="group relative inline-flex items-center justify-center gap-3 bg-accent-500 hover:bg-accent-600 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-accent-500/30 hover:-translate-y-1 magnetic-btn btn-shimmer overflow-hidden"
|
||||
>
|
||||
ดูสินค้าทั้งหมด
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
<span class="relative z-10 flex items-center gap-2">
|
||||
ดูสินค้าทั้งหมด
|
||||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="/contact-us"
|
||||
class="relative z-10 inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white py-4 px-8 rounded-xl font-semibold text-lg border border-white/30 transition-all"
|
||||
class="group inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white py-4 px-8 rounded-xl font-semibold text-lg border border-white/30 transition-all duration-300 hover:-translate-y-1 magnetic-btn"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Product Cards -->
|
||||
<div class="relative h-96 lg:h-[500px]">
|
||||
<!-- Card 1 - PPR Pipe (smallest) -->
|
||||
<div class="absolute top-8 right-12 w-36 lg:w-44 rounded-2xl shadow-2xl overflow-hidden animate-float">
|
||||
<div class="relative h-[300px] lg:h-[400px] perspective-1000">
|
||||
<!-- Card 1 - Small, back left -->
|
||||
<div class="absolute top-0 left-0 w-32 lg:w-44 rounded-2xl shadow-2xl overflow-hidden animate-float glass-strong tilt-card">
|
||||
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- Card 2 - Thermobreak (2nd biggest) -->
|
||||
<div class="absolute top-20 left-8 w-44 lg:w-56 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-1">
|
||||
<!-- Card 2 - Medium, back right -->
|
||||
<div class="absolute top-16 right-4 lg:right-12 w-40 lg:w-52 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-1 glass-strong tilt-card">
|
||||
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="เทอร์โมเบรค" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- Card 3 - Grilles (biggest, center) -->
|
||||
<div class="absolute top-32 left-1/2 -translate-x-1/2 w-56 lg:w-72 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-2">
|
||||
<!-- Card 3 - Large, center front -->
|
||||
<div class="absolute top-32 left-1/2 -translate-x-1/2 w-52 lg:w-72 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-2 glass-strong tilt-card z-10">
|
||||
<img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์" class="w-full h-full object-cover" loading="lazy" />
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
|
||||
<p class="text-white font-medium">กริลแอร์คุณภาพสูง</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Decorative Elements -->
|
||||
<div class="absolute bottom-8 left-4 lg:left-8 w-20 h-20 rounded-full bg-primary-400/20 blur-xl animate-pulse-glow"></div>
|
||||
<div class="absolute top-8 right-8 w-16 h-16 rounded-full bg-primary-300/20 blur-xl animate-pulse-glow" style="animation-delay: 1s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Indicator -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-primary-200">
|
||||
<span class="text-sm font-medium">เลื่อนลง</span>
|
||||
<div class="w-6 h-10 rounded-full border-2 border-primary-200/50 flex justify-center pt-2">
|
||||
<div class="w-1.5 h-3 bg-primary-200 rounded-full scroll-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Featured Products -->
|
||||
<!-- Featured Products Section -->
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
<!-- Section Header -->
|
||||
<div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
|
||||
<span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">สินค้าของเรา</span>
|
||||
<h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">สินค้าแนะนำ</h2>
|
||||
<p class="text-neutral-600 max-w-2xl mx-auto text-lg">สินค้าคุณภาพสูงจากแบรนด์ชั้นนำ ที่ได้รับความไว้วางใจจากลูกค้าทั่วประเทศ</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8 stagger-container">
|
||||
<!-- Product 1 -->
|
||||
<a href="/ท่อ-ppr-thai-ppr" class="group bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all">
|
||||
<div class="aspect-square img-hover">
|
||||
<!-- Product Grid -->
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" data-animate-stagger>
|
||||
<!-- Product Card 1 -->
|
||||
<a href="/ท่อ-ppr-thai-ppr" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
|
||||
<div class="aspect-square img-hover relative overflow-hidden">
|
||||
<img
|
||||
src="/images/products-cropped/ppr-pipe_000C.jpg"
|
||||
alt="ท่อ PPR ไทยพีพีอาร์"
|
||||
class="w-full h-full object-cover"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||||
<span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-primary-700 group-hover:text-primary-600">ท่อ PPR ไทยพีพีอาร์</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ท่อน้ำดื่มคุณภาพสูง ทนความร้อน ทนแรงดัน</p>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">ท่อ PPR ไทยพีพีอาร์</h3>
|
||||
<svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-neutral-500">ท่อน้ำดื่มคุณภาพสูง ทนความร้อน ทนแรงดัน มาตรฐาน ม.อ.ก.</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product 2 -->
|
||||
<a href="/grilles" class="group bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all">
|
||||
<div class="aspect-square img-hover">
|
||||
<!-- Product Card 2 -->
|
||||
<a href="/grilles" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
|
||||
<div class="aspect-square img-hover relative overflow-hidden">
|
||||
<img
|
||||
src="/images/products-cropped/grilles_000C.jpg"
|
||||
alt="กริลแอร์"
|
||||
class="w-full h-full object-cover"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||||
<span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-primary-700 group-hover:text-primary-600">กริลแอร์</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">อุปกรณ์ปรับอากาศ ระบายอากาศคุณภาพสูง</p>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">กริลแอร์</h3>
|
||||
<svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-neutral-500">อุปกรณ์ปรับอากาศ ระบายอากาศคุณภาพสูง หลากหลายรูปแบบ</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product 3 -->
|
||||
<a href="/เทอร์โมเบรค-thermobreak" class="group bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all">
|
||||
<div class="aspect-square img-hover">
|
||||
<!-- Product Card 3 -->
|
||||
<a href="/เทอร์โมเบรค-thermobreak" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
|
||||
<div class="aspect-square img-hover relative overflow-hidden">
|
||||
<img
|
||||
src="/images/thermobreak/thermobreak-solarblock.png"
|
||||
alt="เทอร์โมเบรค ฉนวนหุ้มท่อ"
|
||||
class="w-full h-full object-cover"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||||
<span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-primary-700 group-hover:text-primary-600">เทอร์โมเบรค ฉนวนหุ้มท่อ</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ฉนวนกันความร้อน ประหยัดพลังงาน</p>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">เทอร์โมเบรค</h3>
|
||||
<svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-neutral-500">ฉนวนกันความร้อน ประหยัดพลังงาน ทนทาน คุณภาพสูง</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- View All Button -->
|
||||
<div class="text-center mt-12" data-animate="fade-up">
|
||||
<a
|
||||
href="/all-products"
|
||||
class="inline-flex items-center gap-2 bg-primary-600 hover:bg-primary-700 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all hover:shadow-lg hover:shadow-primary-600/25 hover:-translate-y-0.5 magnetic-btn btn-shimmer"
|
||||
>
|
||||
ดูสินค้าทั้งหมด
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<section class="py-16 lg:py-20 bg-neutral-50">
|
||||
<!-- Trust Badges with Counter Animation -->
|
||||
<section class="py-16 lg:py-20 bg-gradient-to-br from-neutral-50 to-primary-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
|
||||
<!-- Badge 1 -->
|
||||
<div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-2xl mb-4">
|
||||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-primary-700">รับรองคุณภาพ</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">มาตรฐาน ม.อ.ก.</p>
|
||||
<h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
|
||||
<span data-counter="15">0</span>+
|
||||
</h3>
|
||||
<p class="text-neutral-600 font-medium">ปีประสบการณ์</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
|
||||
<!-- Badge 2 -->
|
||||
<div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-accent-100 rounded-2xl mb-4">
|
||||
<svg class="w-8 h-8 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
|
||||
<span data-counter="2500">0</span>+
|
||||
</h3>
|
||||
<p class="text-neutral-600 font-medium">ลูกค้าทั่วประเทศ</p>
|
||||
</div>
|
||||
|
||||
<!-- Badge 3 -->
|
||||
<div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-2xl mb-4">
|
||||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
|
||||
<span data-counter="5000">0</span>+
|
||||
</h3>
|
||||
<p class="text-neutral-600 font-medium">รายการสินค้า</p>
|
||||
</div>
|
||||
|
||||
<!-- Badge 4 -->
|
||||
<div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-accent-100 rounded-2xl mb-4">
|
||||
<svg class="w-8 h-8 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-primary-700">จัดส่งรวดเร็ว</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ภายใน 1-3 วัน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-primary-700">ราคาโรงงาน</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ตรงจากผู้ผลิต</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364a4.5 4.5 0 006.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-primary-700">บริการด้วยใจ</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ให้คำปรึกษาฟรี</p>
|
||||
<h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
|
||||
<span data-counter="98">0</span>%
|
||||
</h3>
|
||||
<p class="text-neutral-600 font-medium">ลูกค้าพึงพอใจ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 lg:py-20 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold mb-4">ต้องการสอบถามราคา?</h2>
|
||||
<p class="text-lg text-primary-100 mb-8 max-w-2xl mx-auto">
|
||||
<section class="py-16 lg:py-24 bg-gradient-to-br from-primary-700 via-primary-600 to-primary-800 text-white relative overflow-hidden">
|
||||
<!-- Background Elements -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-20 -right-20 w-[400px] h-[400px] bg-primary-400/20 rounded-full blur-3xl animate-mesh-1"></div>
|
||||
<div class="absolute -bottom-20 -left-20 w-[300px] h-[300px] bg-primary-300/20 rounded-full blur-3xl animate-mesh-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
||||
<h2 data-animate="fade-up" class="text-3xl lg:text-4xl xl:text-5xl font-bold mb-6">ต้องการสอบถามราคา?</h2>
|
||||
<p data-animate="fade-up" data-animate-delay="100" class="text-lg lg:text-xl text-primary-100 mb-10 max-w-2xl mx-auto">
|
||||
ติดต่อทีมงานของเราได้เลย พร้อมให้บริการให้คำปรึกษาฟรี ตอบทุกคำถามเรื่องระบบน้ำและอุปกรณ์ต่างๆ
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<div data-animate="fade-up" data-animate-delay="200" class="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="tel:090-555-1415"
|
||||
class="inline-flex items-center justify-center gap-2 bg-white text-primary-700 py-4 px-8 rounded-xl font-semibold text-lg hover:bg-primary-50 transition-all"
|
||||
class="group inline-flex items-center justify-center gap-3 bg-white text-primary-700 py-4 px-10 rounded-xl font-semibold text-lg hover:bg-primary-50 transition-all hover:shadow-2xl hover:shadow-white/25 hover:-translate-y-1 magnetic-btn btn-shimmer"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
090-555-1415
|
||||
@@ -195,14 +331,14 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
href="https://line.me/ti/p/~JPPSELECTION"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="inline-flex items-center justify-center gap-2 bg-accent-500 hover:bg-accent-600 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all"
|
||||
class="group inline-flex items-center justify-center gap-3 bg-accent-500 hover:bg-accent-600 text-white py-4 px-10 rounded-xl font-semibold text-lg transition-all hover:shadow-2xl hover:shadow-accent-500/30 hover:-translate-y-1 magnetic-btn btn-shimmer"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
แอดไลน์
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
</BaseLayout>
|
||||
|
||||
286
src/pages/maxflex.astro
Normal file
286
src/pages/maxflex.astro
Normal file
@@ -0,0 +1,286 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import Header from '@/components/common/Header.astro';
|
||||
import Footer from '@/components/common/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Maxflex FSK ฉนวนยางดำเคลือบอลูมิเนียม | ดีล พลัส เทค" description="MAXFLEX FSK ฉนวนยางดำ EPDM เคลือบอลูมิเนียมฟอยล์ 1 ด้าน ชนิดไม่ลามไฟ (Fire Retardant) สำหรับระบบปรับอากาศและทำความเย็น">
|
||||
<Header slot="header" />
|
||||
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<!-- Water Wave -->
|
||||
<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-max)" 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-max" 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>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/maxflex/maxflex-fsk-foil.jpg" alt="MAXFLEX FSK ฉนวนยางดำเคลือบอลูมิเนียม" class="w-full h-auto rounded-xl" width="600" height="450" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
|
||||
ฉนวนยางดำ FR
|
||||
</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">MAXFLEX FSK</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-6 leading-relaxed">
|
||||
ฉนวนยางดำ EPDM เคลือบผิวด้วยอลูมิเนียมฟอยล์ 1 ด้าน ชนิดไม่ลามไฟ (Fire Retardant) สำหรับระบบปรับอากาศและระบบทำความเย็น เพิ่มประสิทธิภาพ ทนทาน และการติดตั้งที่รวดเร็ว
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-8">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-primary-700 hover:bg-primary-50 py-3 px-6 rounded-xl font-semibold flex items-center gap-2">
|
||||
<span>แชท</span>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-6 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<span>090-555-1415</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>เคลือบอลูมิเนียมฟอยล์</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>ทนไฟ (Fire Retardant)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>โครงสร้างเซลล์ปิด</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>ติดตั้งง่าย</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-8">รายละเอียดสินค้า MAXFLEX FSK</h2>
|
||||
|
||||
<div class="prose prose-lg max-w-none mb-8">
|
||||
<p class="text-lg text-slate-700 leading-relaxed mb-6">
|
||||
<strong>MAXFLEX FSK</strong> ฉนวนยางดำ EPDM เคลือบผิวด้วยอลูมิเนียมฟอยล์ 1 ด้าน เป็นฉนวนยางดำชนิดเซลล์ปิด (Close Cell Structure) ชนิดไม่ลามไฟ (Fire Retardant) เนื้อฉนวนเป็นโฟมยืดหยุ่นสีดำ มีค่าการนำความร้อนต่ำ (Low Thermal Conductivity) ออกแบบมาสำหรับระบบปรับอากาศและระบบทำความเย็น
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="bg-primary-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold text-primary-700 mb-4">คุณสมบัติเด่น</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>เคลือบอลูมิเนียมฟอยล์</strong> — ป้องกันความชื้น เพิ่มความทนทาน</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ทนไฟ (Fire Retardant)</strong> — มาตรฐานความปลอดภัยจากประกายไฟ</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>โครงสร้างเซลล์ปิด</strong> — กันไอน้ำและความชื้นได้ดี</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ค่าการนำความร้อนต่ำ</strong> — ประหยัดพลังงาน</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span class="text-slate-700"><strong>ยืดหยุ่นสูง</strong> — ติดตั้งง่าย</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 rounded-xl p-6">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-4">ข้อมูลจำเพาะ</h3>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">วัสดุ:</span>
|
||||
<span class="text-slate-700">ยาง EPDM (Ethylene Propylene Diene Monomer)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">การเคลือบ:</span>
|
||||
<span class="text-slate-700">อลูมิเนียมฟอยล์ 1 ด้าน</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">คุณสมบัติ:</span>
|
||||
<span class="text-slate-700">ทนไฟ (Fire Retardant)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">อุณหภูมิใช้งาน:</span>
|
||||
<span class="text-slate-700">-57°C ถึง +125°C</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="text-primary-600 font-semibold min-w-[140px]">ขนาด:</span>
|
||||
<span class="text-slate-700">กว้าง 1 เมตร x ยาว 10 เมตร</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">ข้อดีของ MAXFLEX FSK</h3>
|
||||
<ul class="list-disc pl-6 mb-6 space-y-3">
|
||||
<li><strong>เคลือบอลูมิเนียมฟอยล์</strong> — ช่วยป้องกันความชื้น เพิ่มความทนทาน ยืดอายุการใช้งาน</li>
|
||||
<li><strong>ทนไฟ (Fire Retardant)</strong> — มาตรฐานความปลอดภัยจากประกายไฟ เหมาะสำหรับอาคารสูงและโรงแรม</li>
|
||||
<li><strong>โครงสร้างเซลล์ปิด</strong> — ป้องกันไอน้ำและความชื้นซึมผ่าน</li>
|
||||
<li><strong>ค่าการนำความร้อนต่ำ</strong> — ลดการสูญเสียความเย็น ประหยัดพลังงาน</li>
|
||||
<li><strong>ติดตั้งง่าย</strong> — ยืดหยุ่น เข้ามุม เข้ารูปได้ดี</li>
|
||||
<li><strong>ทาสวยงาม</strong> — ผิวอลูมิเนียมเรียบสวย เหมาะกับงานที่ต้องการความสวยงาม</li>
|
||||
<li><strong>สามารถเคลือบกาวเพิ่มเติม</strong> — ติดตั้งโดยลอกฟิล์มออกแล้วติดได้เลย (Self-Adhesive option)</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">การประยุกต์ใช้งาน</h3>
|
||||
<p class="text-lg text-slate-700 mb-6">
|
||||
MAXFLEX FSK เหมาะสำหรับใช้ในงานต่างๆ ดังนี้:
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบปรับอากาศ (HVAC)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบทำความเย็น (Refrigeration)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-blue-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ท่อลมเย็น (Air Duct)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-red-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบดับเพลิง</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-orange-50 rounded-lg">
|
||||
<svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">ระบบท่อน้ำร้อน</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-4 bg-slate-100 rounded-lg">
|
||||
<svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
<span class="font-medium text-slate-900">โรงแรม/โรงพยาบาล</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 mb-8">
|
||||
<h4 class="font-semibold text-slate-900 mb-2">💡 คำแนะนำการเลือกความหนา</h4>
|
||||
<ul class="text-slate-700 space-y-1">
|
||||
<li>• ท่อลมเย็น ขนาดเล็ก: 10-15 มม.</li>
|
||||
<li>• ท่อลมเย็น ขนาดกลาง-ใหญ่: 15-25 มม.</li>
|
||||
<li>• ระบบทำความเย็น: 20-30 มม.</li>
|
||||
<li>• ระบบดับเพลิง/น้ำร้อน: 25-40 มม.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-primary-50 border-l-4 border-primary-600 p-4 mt-6">
|
||||
<p class="text-slate-700">
|
||||
<strong>สอบถามราคาและสั่งซื้อ:</strong> ติดต่อเราได้ที่ Line: <a href="https://line.me/ti/p/~JPPSELECTION" class="text-primary-700 underline">@JPPSELECTION</a> หรือโทร <a href="tel:0905551415" class="text-primary-700 underline">090-555-1415</a> ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download Section -->
|
||||
<section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-lg mx-auto text-center">
|
||||
<h2 class="text-xl font-bold mb-6">📥 ดาวน์โหลดราคาสินค้า Maxflex FR</h2>
|
||||
<a href="/documents/22 Price List Maxflex แบบม้วน FR Roll MSR15M.pdf" target="_blank" class="inline-flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow text-left mb-4">
|
||||
<svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-slate-900">Maxflex FR Roll แบบม้วน</div>
|
||||
<div class="text-sm text-slate-500">PDF Document</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-16 bg-primary-600 text-white text-center">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-4">สนใจสินค้า Maxflex?</h2>
|
||||
<p class="text-lg text-white/80 mb-8">ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-primary-700 hover:bg-gray-100 py-3 px-8 rounded-xl font-semibold flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
<span>แชท Line</span>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-8 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
<span>090-555-1415</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
@@ -5,8 +5,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ข้อต่อท่อ SMC (Pipe Coupling)" description="จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6">
|
||||
@@ -64,7 +96,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-4">รายละเอียดสินค้า</h2>
|
||||
|
||||
@@ -98,7 +130,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Types -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-neutral-800 mb-12 text-center">รุ่นของสินค้า</h2>
|
||||
|
||||
@@ -139,7 +171,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-neutral-800 mb-8">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
@@ -4,8 +4,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<BaseLayout title="ผลงาน - ดีล พลัส เทค" description="ผลงานติดตั้งระบบน้ำของ ดีล พลัส เทค จำกัด">
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">ผลงาน</h1>
|
||||
<p class="text-lg text-primary-100">ตัวอย่างโครงการที่ได้รับความไว้วางใจจากลูกค้าทั่วประเทศ</p>
|
||||
</div>
|
||||
@@ -13,7 +45,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Portfolio Grid -->
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Project 1 - Cyber World -->
|
||||
|
||||
@@ -27,7 +27,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<main class="bg-white min-h-screen pb-24 md:pb-0">
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">Realflex</span>
|
||||
</nav>
|
||||
|
||||
@@ -5,8 +5,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ปั๊มน้ำ (Water Pump)" description="จำหน่ายปั๊มน้ำ (Water Pump) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
@@ -58,7 +90,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="flex justify-center">
|
||||
@@ -89,7 +121,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Pump Types Guide -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">ประเภทของปั๊มน้ำ (Pump Types)</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
@@ -142,7 +174,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Selection Guide -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">วิธีเลือกปั๊มน้ำให้เหมาะกับการใช้งาน</h2>
|
||||
<div class="space-y-6">
|
||||
@@ -197,7 +229,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Installation Tips -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">ข้อแนะนำการติดตั้งและบำรุงรักษา</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
@@ -240,7 +272,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">คำถามที่พบบ่อยเกี่ยวกับปั๊มน้ำ (FAQ)</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
@@ -27,7 +27,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<main class="bg-white min-h-screen pb-24 md:pb-0">
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบกรองน้ำ</span>
|
||||
</nav>
|
||||
|
||||
@@ -1,335 +0,0 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import Header from '@/components/common/Header.astro';
|
||||
import Footer from '@/components/common/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="ฉนวนหุ้มท่อ | Pipe Insulation - ดีล พลัส เทค" description="ฉนวนหุ้มท่อ (Pipe Insulation) คืออะไร? ทำไมถึงสำคัญในอุตสาหกรรม? ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
|
||||
<Header slot="header" />
|
||||
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="ฉนวนหุ้มท่อ" class="w-full h-auto rounded-xl" width="600" height="600" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
|
||||
ฉนวนหุ้มท่อ
|
||||
</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ฉนวนหุ้มท่อ | Pipe Insulation</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
|
||||
ฉนวนหุ้มท่อ (Pipe Insulation) คืออะไร? ทำไมถึงสำคัญในอุตสาหกรรม? ส่งฟรี กรุงเทพมหานคร ปริมณฑล
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-8">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-primary-700 hover:bg-primary-50 py-3 px-6 rounded-xl font-semibold flex items-center gap-2">
|
||||
<span>แชท</span>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-6 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<span>090-555-1415</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#pricelist" data-price-button class="hidden bg-white text-primary-700 hover:bg-primary-50 py-3 px-6 rounded-xl font-semibold flex items-center gap-2">
|
||||
<span>ราคาสินค้า</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>ราคาโรงงาน คุ้มค่า</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/80">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>รับประกันสินค้า</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Specifications -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">รายละเอียดสินค้า</h2>
|
||||
|
||||
<div class="prose prose-lg max-w-none mb-8">
|
||||
<p class="text-lg text-slate-700 leading-relaxed mb-6">
|
||||
<strong>ฉนวนหุ้มท่อ (Pipe Insulation)</strong> เป็นฉนวนที่ใช้หุ้มท่อเพื่อป้องกันการสูญเสียความร้อนหรือความเย็นของระบบท่อ ลดการเกิดการควบแน่นของไอน้ำบนผิวท่อ ประหยัดพลังงาน และป้องกันอุบัติเหตุจากผิวท่อที่ร้อน เหมาะสำหรับระบบประปา ระบบปรับอากาศ ระบบท่อน้ำร้อน ระบบท่อน้ำเย็น ระบบท่อส่งน้ำมันร้อน และอุตสาหกรรมต่างๆ
|
||||
</p>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">ประเภทฉนวนหุ้มท่อที่จำหน่าย</h3>
|
||||
|
||||
<div class="space-y-6 mb-8">
|
||||
<div class="p-6 bg-gray-50 rounded-lg">
|
||||
<h4 class="text-xl font-bold text-primary-700 mb-2">Armaflex</h4>
|
||||
<p class="text-slate-700 mb-3">ฉนวนยางอีลาสโตเมอริก (Elastomeric Rubber Foam) แบบเซลล์ปิด ผลิตจากยาง NBR/PVC หุ้มท่อและอุปกรณ์ท่อเพื่อป้องกันการสูญเสียความเย็นและความร้อน ลดการเกิดการควบแน่น ทนต่อไอน้ำและความชื้น มีค่าสัมประสิทธิ์การนำความร้อนต่ำ ผิวเรียบสวยงาม ใช้งานง่าย รับประกันคุณภาพมาตรฐาน</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-primary-100 text-primary-800 text-sm rounded-full">ทนความเย็น -50°C ถึง +105°C</span>
|
||||
<span class="px-3 py-1 bg-primary-100 text-primary-800 text-sm rounded-full">แบบท่อน (Slit Pipe)</span>
|
||||
<span class="px-3 py-1 bg-primary-100 text-primary-800 text-sm rounded-full">แบบม้วน (Sheet/Roll)</span>
|
||||
<span class="px-3 py-1 bg-primary-100 text-primary-800 text-sm rounded-full">ป้องกันการควบแน่น</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-gray-50 rounded-lg">
|
||||
<h4 class="text-xl font-bold text-blue-700 mb-2">Aeroflex</h4>
|
||||
<p class="text-slate-700 mb-3">ฉนวนยางอีลาสโตเมอริกคุณภาพสูง ผลิตจากยาง EPDM หรือ NBR/PVC แบบเซลล์ปิด มีคุณสมบัติยืดหยุ่นสูง ติดตั้งง่าย ทนต่อรังสี UV ทนต่อสภาพอากาศ เหมาะสำหรับงานระบบปรับอากาศ ระบบทำความเย็น ระบบท่อน้ำร้อน ทนอุณหภูมิได้ในช่วงกว้าง มีทั้งแบบท่อนและแบบแผ่น</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">ทนความร้อน -50°C ถึง +116°C</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">ยืดหยุ่นสูง</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">ทนรังสี UV</span>
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">ติดตั้งง่าย</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-gray-50 rounded-lg">
|
||||
<h4 class="text-xl font-bold text-orange-700 mb-2">Maxflex FR</h4>
|
||||
<p class="text-slate-700 mb-3">ฉนวนยางที่มีคุณสมบัติทนไฟ (Fire Retardant) ผลิตตามมาตรฐานความปลอดภัยจากประกายไฟ มีทั้งแบบท่อน (FR ST) และแบบม้วน (FR Roll) เหมาะสำหรับงานที่ต้องการความปลอดภัยจากอัคคีภัย ระบบท่อดับเพลิง ระบบท่อน้ำร้อน ระบบท่อที่ต้องการความทนไฟ</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-orange-100 text-orange-800 text-sm rounded-full">ทนไฟ (Fire Retardant)</span>
|
||||
<span class="px-3 py-1 bg-orange-100 text-orange-800 text-sm rounded-full">FR ST แบบท่อน</span>
|
||||
<span class="px-3 py-1 bg-orange-100 text-orange-800 text-sm rounded-full">FR Roll แบบม้วน</span>
|
||||
<span class="px-3 py-1 bg-orange-100 text-orange-800 text-sm rounded-full">มาตรฐานความปลอดภัย</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">ฉนวนใยแก้ว (Glasswool & Mineral Wool)</h3>
|
||||
<p class="text-lg text-slate-700 mb-8">นอกจากฉนวนยางแล้ว เรายังจำหน่ายฉนวนใยแก้วและใยหินสำหรับงานอุตสาหกรรมและงานระบบท่อลม ซึ่งเหมาะกับการใช้งานที่ต้องการความทนไฟและราคาประหยัด</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="bg-white p-5 rounded-lg shadow-sm">
|
||||
<h3 class="font-bold text-slate-900 mb-3">SCG Glasswool</h3>
|
||||
<p class="text-slate-700 text-sm mb-3">ฉนวนใยแก้วคุณภาพจาก SCG สำหรับงานฉนวนระบบท่อลมและฉนวนอาคาร</p>
|
||||
<ul class="text-sm text-slate-600 space-y-1">
|
||||
<li>• ทนความร้อนสูง</li>
|
||||
<li>• ดูดซับเสียงได้ดี</li>
|
||||
<li>• ราคาประหยัด</li>
|
||||
<li>• เหมาะกับท่อลม</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-lg shadow-sm">
|
||||
<h3 class="font-bold text-slate-900 mb-3">MicroFiber</h3>
|
||||
<p class="text-slate-700 text-sm mb-3">ฉนวนใยแก้วเกรดพรีเมียม สำหรับงานที่ต้องการประสิทธิภาพสูง</p>
|
||||
<ul class="text-sm text-slate-600 space-y-1">
|
||||
<li>• เส้นใยละเอียด</li>
|
||||
<li>• ประสิทธิภาพสูง</li>
|
||||
<li>• ทนความร้อนได้ดี</li>
|
||||
<li>• เหมาะกับงานอุตสาหกรรม</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white p-5 rounded-lg shadow-sm">
|
||||
<h3 class="font-bold text-slate-900 mb-3">ROCKWOOL (Stonewool)</h3>
|
||||
<p class="text-slate-700 text-sm mb-3">ฉนวนใยหินจาก ROCKWOOL สำหรับงานที่ต้องการความทนไฟและความแข็งแรงสูง</p>
|
||||
<ul class="text-sm text-slate-600 space-y-1">
|
||||
<li>• ทนไฟได้ดีเยี่ยม</li>
|
||||
<li>• แข็งแรง ทนทาน</li>
|
||||
<li>• เหมาะกับงานอุตสาหกรรม</li>
|
||||
<li>• ดูดซับเสียงได้ดี</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">คุณสมบัติเด่นของฉนวนหุ้มท่อ</h3>
|
||||
|
||||
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||
<li><strong>ป้องกันการสูญเสียความร้อน/ความเย็น</strong> — ลดการถ่ายเทความร้อนระหว่างตัวท่อกับสิ่งแวดล้อม ช่วยประหยัดพลังงานในระบบทำความเย็นและทำความร้อน</li>
|
||||
<li><strong>ป้องกันการเกิดการควบแน่น</strong> — ผิวฉนวนที่เป็นเซลล์ปิดไม่ดูดซับความชื้น ป้องกันการเกิดหยดน้ำบนผิวท่อ ลดความเสียหายต่อโครงสร้างและอุปกรณ์</li>
|
||||
<li><strong>ป้องกันอุบัติเหตุจากผิวท่อร้อน</strong> — ปกป้องผู้สัมผัสจากผิวท่อที่ร้อน เหมาะสำหรับท่อน้ำร้อน ท่อไอน้ำ และท่อที่มีอุณหภูมิสูง</li>
|
||||
<li><strong>ลดเสียงรบกวน</strong> — ดูดซับเสียงจากการไหลของน้ำและการสั่นสะเทือนของท่อ ลดความเสียหายต่อโครงสร้าง</li>
|
||||
<li><strong>ทนทานต่อสภาพอากาศและสารเคมี</strong> — ทนต่อรังสี UV ความชื้น และสารเคมีทั่วไป อายุการใช้งานยาวนาน</li>
|
||||
<li><strong>ติดตั้งง่าย รวดเร็ว</strong> — ฉนวนยางมีความยืดหยุ่นสูง เข้ามุม เข้ารูปอุปกรณ์ท่อได้ง่าย ไม่ต้องใช้เครื่องมือพิเศษ</li>
|
||||
<li><strong>น้ำหนักเบา ไม่ดูดซับน้ำ</strong> — โครงสร้างเซลล์ปิดไม่ดูดซับน้ำหรือไอน้ำ รักษาประสิทธิภาพฉนวนได้ตลอดอายุการใช้งาน</li>
|
||||
</ul>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4 my-8">
|
||||
<img src="/images/products-raw/pipe-insulation/Insulte_06.png" alt="การติดตั้งฉนวนหุ้มท่อ" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/pipe-insulation/Insulte_07.png" alt="การประยุกต์ใช้ฉนวนหุ้มท่อ" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 mt-8 mb-4">การประยุกต์ใช้งาน</h3>
|
||||
|
||||
<p class="text-lg text-slate-700 leading-relaxed mb-4">
|
||||
ฉนวนหุ้มท่อ Armaflex, Aeroflex และ Maxflex FR เหมาะสำหรับใช้ในงานต่างๆ ดังนี้:
|
||||
</p>
|
||||
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||
<li>ระบบปรับอากาศและระบบทำความเย็น (HVAC/R) — ท่อน้ำเย็น ท่อน้ำย้อนกลับ คอยล์ระเหย</li>
|
||||
<li>ระบบท่อน้ำร้อนและท่อไอน้ำ — ป้องกันการสูญเสียความร้อน ป้องกันอุบัติเหตุ</li>
|
||||
<li>ระบบประปา — ป้องกันการแตกจากน้ำแข็งในท่อ ป้องกันการควบแน่น</li>
|
||||
<li>ระบบดับเพลิง — ท่อน้ำดับเพลิงที่ต้องการความทนไฟ</li>
|
||||
<li>อุตสาหกรรมอาหารและเครื่องดื่ม — รักษาอุณหภูมิผลิตภัณฑ์</li>
|
||||
<li>อุตสาหกรรมเคมีและปิโตรเคมี — ป้องกันการเกิดปฏิกิริยาทางเคมี</li>
|
||||
</ul>
|
||||
|
||||
<div class="bg-primary-50 border-l-4 border-primary-600 p-4 mt-6">
|
||||
<p class="text-slate-700">
|
||||
<strong>สอบถามราคาและสั่งซื้อ:</strong> ติดต่อเราได้ที่ Line: <a href="https://line.me/ti/p/~JPPSELECTION" class="text-primary-700 underline">@JPPSELECTION</a> หรือโทร <a href="tel:0905551415" class="text-primary-700 underline">090-555-1415</a> ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Thickness Selection Guide -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">คำแนะนำการเลือกความหนาฉนวน</h2>
|
||||
<p class="text-lg text-slate-700 mb-6">การเลือกความหนาฉนวนขึ้นอยู่กับปัจจัยหลายอย่าง เช่น อุณหภูมิของไหลในท่อ อุณหภูมิแวดล้อม และความชื้น</p>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse bg-white rounded-lg">
|
||||
<thead>
|
||||
<tr class="bg-primary-600 text-white">
|
||||
<th class="px-4 py-3 text-left">ขนาดท่อ (นิ้ว)</th>
|
||||
<th class="px-4 py-3 text-center">ท่อน้ำเย็น (มม.)</th>
|
||||
<th class="px-4 py-3 text-center">ท่อลมเย็น (มม.)</th>
|
||||
<th class="px-4 py-3 text-center">ท่อน้ำร้อน (มม.)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr><td class="px-4 py-2 font-medium">1/2"</td><td class="px-4 py-2 text-center">15-20</td><td class="px-4 py-2 text-center">20-25</td><td class="px-4 py-2 text-center">20-25</td></tr>
|
||||
<tr><td class="px-4 py-2 font-medium">3/4"</td><td class="px-4 py-2 text-center">15-20</td><td class="px-4 py-2 text-center">20-25</td><td class="px-4 py-2 text-center">25-30</td></tr>
|
||||
<tr><td class="px-4 py-2 font-medium">1"</td><td class="px-4 py-2 text-center">20-25</td><td class="px-4 py-2 text-center">25-30</td><td class="px-4 py-2 text-center">25-30</td></tr>
|
||||
<tr><td class="px-4 py-2 font-medium">1-1/2"</td><td class="px-4 py-2 text-center">20-25</td><td class="px-4 py-2 text-center">25-30</td><td class="px-4 py-2 text-center">30-40</td></tr>
|
||||
<tr><td class="px-4 py-2 font-medium">2"</td><td class="px-4 py-2 text-center">25-30</td><td class="px-4 py-2 text-center">30-40</td><td class="px-4 py-2 text-center">30-40</td></tr>
|
||||
<tr><td class="px-4 py-2 font-medium">3"</td><td class="px-4 py-2 text-center">25-30</td><td class="px-4 py-2 text-center">30-40</td><td class="px-4 py-2 text-center">40-50</td></tr>
|
||||
<tr><td class="px-4 py-2 font-medium">4"</td><td class="px-4 py-2 text-center">30-40</td><td class="px-4 py-2 text-center">40-50</td><td class="px-4 py-2 text-center">40-50</td></tr>
|
||||
<tr><td class="px-4 py-2 font-medium">6"</td><td class="px-4 py-2 text-center">30-40</td><td class="px-4 py-2 text-center">40-50</td><td class="px-4 py-2 text-center">50-60</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid md:grid-cols-3 gap-4">
|
||||
<div class="p-4 bg-blue-50 rounded-lg">
|
||||
<h4 class="font-semibold text-slate-900 mb-2">ท่อน้ำเย็น</h4>
|
||||
<p class="text-sm text-slate-700">ต้องการป้องกันการควบแน่น ความหนา 15-30 มม. ขึ้นอยู่กับขนาดท่อและความชื้นแวดล้อม</p>
|
||||
</div>
|
||||
<div class="p-4 bg-orange-50 rounded-lg">
|
||||
<h4 class="font-semibold text-slate-900 mb-2">ท่อลมเย็น</h4>
|
||||
<p class="text-sm text-slate-700">ต้องการป้องกันการสูญเสียความเย็น ความหนา 20-50 มม. ขึ้นอยู่กับอุณหภูมิลมและแวดล้อม</p>
|
||||
</div>
|
||||
<div class="p-4 bg-red-50 rounded-lg">
|
||||
<h4 class="font-semibold text-slate-900 mb-2">ท่อน้ำร้อน</h4>
|
||||
<p class="text-sm text-slate-700">ต้องการป้องกันการสูญเสียความร้อนและป้องกันแผลมือ ความหนา 20-60 มม. ขึ้นอยู่กับอุณหภูมิน้ำร้อน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h3 class="font-semibold text-slate-900 mb-2">Q: ฉนวนยาง (Armaflex/Aeroflex) กับ ฉนวนใยแก้ว (Glasswool) ต่างกันอย่างไร?</h3>
|
||||
<p class="text-slate-700">ฉนวนยางมีโครงสร้างเซลล์ปิด ยืดหยุ่น กันความชื้นได้ดี เหมาะกับท่อขนาดเล็ก-กลาง ส่วนฉนวนใยแก้วมีราคาถูกกว่า เหมาะกับท่อขนาดใหญ่และงานอุตสาหกรรมที่ต้องการทนไฟ</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h3 class="font-semibold text-slate-900 mb-2">Q: เลือกความหนาฉนวนอย่างไร?</h3>
|
||||
<p class="text-slate-700">การเลือกความหนาขึ้นอยู่กับ: 1) อุณหภูมิของไหลในท่อ 2) อุณหภูมิแวดล้อม 3) ความชื้น 4) ขนาดท่อ โดยทั่วไปท่อน้ำเย็นควรใช้ 15-25 มม. ท่อลมเย็น 20-40 มม. และท่อน้ำร้อน 25-50 มม.</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h3 class="font-semibold text-slate-900 mb-2">Q: ฉนวนยางใช้ภายนอกอาคารได้ไหม?</h3>
|
||||
<p class="text-slate-700">ได้ แต่ควรเลือกชนิดที่ทนรังสี UV และอาจต้องติดตั้งแผ่นเคลือบเพิ่มเติมเพื่อป้องกันการเสื่อมสภาพจากแสงแดด</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h3 class="font-semibold text-slate-900 mb-2">Q: ติดตั้งฉนวนยางยากไหม?</h3>
|
||||
<p class="text-slate-700">ไม่ยาก ฉนวนยางมีความยืดหยุ่นสูง สามารถเปิดรอยต่อแล้วสวมเข้าท่อได้ หรือใช้กาวพิเศษติดที่ข้อต่อและรอยต่อ</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg p-4">
|
||||
<h3 class="font-semibold text-slate-900 mb-2">Q: Maxflex FR ต่างจาก Armaflex/Aeroflex อย่างไร?</h3>
|
||||
<p class="text-slate-700">Maxflex FR มีคุณสมบัติทนไฟ (Fire Retardant) ซึ่งเหมาะกับงานที่ต้องการความปลอดภัยจากอัคคีภัย เช่น ระบบดับเพลิง ระบบท่อน้ำร้อนในโรงแรมหรือโรงพยาบาล</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Price Lists -->
|
||||
<section id="pricelist" class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-lg mx-auto">
|
||||
<h2 class="text-xl font-bold mb-6 text-center">📥 ดาวน์โหลดราคาสินค้า</h2>
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<a href="/documents/16 Price List Armaflex 2567.pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
||||
<svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/></svg>
|
||||
<div><div class="font-medium text-slate-900">Price List Armaflex 2567</div><div class="text-sm text-slate-500">PDF</div></div>
|
||||
</a>
|
||||
<a href="/documents/19 Pricelist Aeroflex (update 2565).pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
||||
<svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/></svg>
|
||||
<div><div class="font-medium text-slate-900">Pricelist Aeroflex (update 2565)</div><div class="text-sm text-slate-500">PDF</div></div>
|
||||
</a>
|
||||
<a href="/documents/22 Price List Maxflex แบบม้วน FR Roll MSR15M.pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
||||
<svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/></svg>
|
||||
<div><div class="font-medium text-slate-900">Maxflex FR Roll MSR15M</div><div class="text-sm text-slate-500">PDF - แบบม้วน</div></div>
|
||||
</a>
|
||||
<a href="/documents/22 Price list MAXFLEX แบบท่อน FR ST_Rev05_01012025 29-1-68.pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
||||
<svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z"/></svg>
|
||||
<div><div class="font-medium text-slate-900">Maxflex FR ST แบบท่อน</div><div class="text-sm text-slate-500">PDF - แบบท่อน</div></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-gradient-to-br from-accent-500 to-accent-600 text-white text-center">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
|
||||
<p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
|
||||
ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="bg-white text-accent-600 hover:bg-gray-100 py-3 px-8 rounded-xl font-semibold flex items-center gap-2">
|
||||
<span>แชท</span>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
|
||||
</a>
|
||||
<a href="tel:0905551415" class="bg-white/10 hover:bg-white/20 text-white py-3 px-8 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
<span>090-555-1415</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
@@ -60,7 +60,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
|
||||
@@ -60,7 +60,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
|
||||
@@ -60,7 +60,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
|
||||
@@ -5,8 +5,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ท่อ Syler | ท่อเหล็กบุพีอี" description="จำหน่ายท่อ Syler ท่อเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
@@ -64,7 +96,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
@@ -109,9 +141,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<img src="/images/products-misc/SYLER-b01.jpg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/SYLER-b02.jpg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/SYLER-b03.jpg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/syler001.jpg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/syler002.jpg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/syler003.jpg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/syler001.svg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/syler002.svg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
<img src="/images/products-misc/syler003.svg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,7 +152,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Installation Section -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-primary-700 mb-12 text-center">วิธีการติดตั้ง</h2>
|
||||
|
||||
@@ -133,7 +165,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<div class="bg-white rounded-2xl p-8 mb-8">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<img src="/images/groove-coupling/G1.png" alt="เครื่องกรู๊ฟท่อไซเลอร์" class="w-full h-auto rounded-lg mb-6" style="max-height: 300px; object-fit: contain;" width="800" height="400" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G1.svg" alt="เครื่องกรู๊ฟท่อไซเลอร์" class="w-full h-auto rounded-lg mb-6" style="max-height: 300px; object-fit: contain;" width="800" height="400" loading="lazy" />
|
||||
<h4 class="text-xl font-bold text-neutral-800 mb-2">เครื่องกรู๊ฟท่อไซเลอร์</h4>
|
||||
<p class="text-neutral-600">หมายเหตุ: การ Grooved ท่อ Syler ต้องใช้เครื่อง Grooved ของ Syler เท่านั้น</p>
|
||||
</div>
|
||||
@@ -145,7 +177,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<span class="bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.1 - 1.3</span>
|
||||
</div>
|
||||
<p class="text-neutral-700 mb-4">ตั้งเครื่องกรู๊ฟ สอดท่อให้หน้าตัดท่อชนแนบกับหัวกรู๊ฟ ปรับระดับท่อที่วางพาดกับขาตั้งท่อด้วยมาตรวัดระดับน้ำ จากนั้นดึงคันโยกไฮโดริกให้หัวกดทับเนื้อท่อแล้ว จึงเปิดสวิทช์เครื่องเพื่อเริ่มทำการกรู๊ฟ</p>
|
||||
<img src="/images/groove-coupling/G2.png" alt="การกรู๊ฟท่อ" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G2.svg" alt="การกรู๊ฟท่อ" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-neutral-200 rounded-xl p-6 shadow-sm">
|
||||
@@ -154,8 +186,8 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<p class="text-neutral-700 mb-4">เมื่อกรู๊ฟเสร็จแล้ว ให้ปิดเครื่องแล้วยกคันโยกไฮโดริกขึ้น นำสายวัดระยะร่องกรู๊ฟมาวัดร่องตามขนาดท่อที่กรู๊ฟ ทั้งนี้ระยะความลึกของร่องกรู๊ฟอนุโลมให้ขาดเกินได้ไม่เกิน 3 มิลลิเมตร</p>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<img src="/images/groove-coupling/G6.png" alt="การวัดร่องกรู๊ฟ" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G7.png" alt="ล็อคระดับปั้มไฮโดริก" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G6.svg" alt="การวัดร่องกรู๊ฟ" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G7.svg" alt="ล็อคระดับปั้มไฮโดริก" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -179,34 +211,34 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<div class="bg-white border border-neutral-200 rounded-xl p-6 shadow-sm">
|
||||
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.1</span>
|
||||
<p class="text-neutral-700 mb-4">ทากาวเฮอร์เมสซีล 55 ที่หน้าตัดท่อเพื่อป้องกันสนิมบริเวณหน้าตัดท่อ</p>
|
||||
<img src="/images/groove-coupling/G8.png" alt="ทากาวเฮอร์เมสซีล" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G8.svg" alt="ทากาวเฮอร์เมสซีล" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-neutral-200 rounded-xl p-6 shadow-sm">
|
||||
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.2</span>
|
||||
<p class="text-neutral-700 mb-4">นำ Grooved line gasket มาสวมที่ปลายท่อ เพื่อป้องกันไม่ให้น้ำที่ไหลผ่านสัมผัสหน้าตัดท่อ</p>
|
||||
<img src="/images/groove-coupling/G9.png" alt="สวม Grooved line gasket" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G9.svg" alt="สวม Grooved line gasket" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-neutral-200 rounded-xl p-6 shadow-sm">
|
||||
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.3</span>
|
||||
<p class="text-neutral-700 mb-4">ทาน้ำยาหล่อลื่น Lubricant ให้ทั่วแหวนยาง EPDM เพื่อยืดอายุการใช้งาน</p>
|
||||
<img src="/images/groove-coupling/G10.png" alt="ทาน้ำยาหล่อลื่น" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G10.svg" alt="ทาน้ำยาหล่อลื่น" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-neutral-200 rounded-xl p-6 shadow-sm">
|
||||
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.4</span>
|
||||
<p class="text-neutral-700 mb-4">นำยางที่ทา Lubricant แล้วมาสวมเข้ากับท่อก่อนจากนั้นจึงสวมเข้ากับข้อต่อ</p>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<img src="/images/groove-coupling/G11.png" alt="สวมยางเข้ากับท่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G12.png" alt="สวมเข้ากับข้อต่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G11.svg" alt="สวมยางเข้ากับท่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G12.svg" alt="สวมเข้ากับข้อต่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-neutral-200 rounded-xl p-6 shadow-sm md:col-span-2">
|
||||
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.5</span>
|
||||
<p class="text-neutral-700 mb-4">นำข้อต่อ Coupling มาประกบพร้อมขันน๊อตจนแน่น</p>
|
||||
<img src="/images/groove-coupling/G13.png" alt="ขันน๊อตจนแน่น" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
<img src="/images/groove-coupling/G13.svg" alt="ขันน๊อตจนแน่น" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -284,7 +316,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-primary-700 mb-8">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
@@ -51,7 +51,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="ท่อ UPVC" class="w-full" loading="eager" />
|
||||
<img src="/images/products-cropped/upvc-pipe_000C.svg" alt="ท่อ UPVC" class="w-full" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,7 +60,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
|
||||
@@ -3,13 +3,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
---
|
||||
<BaseLayout title="ท่อ XYLENT - ดีล พลัส เทค" description="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT) ระบบ Push Fit เงียบสนิท 22 เดซิเบล จาก Poloplast">
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<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-center">
|
||||
<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.svg" alt="ท่อ XYLENT" class="w-full" loading="eager" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-primary-200 font-medium">ท่อระบายน้ำ</span>
|
||||
@@ -26,7 +26,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Features -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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 font-bold text-primary-700 mb-4">เทคโนโลยี 3 ชั้น ไซเลนท์</h2>
|
||||
<p class="text-neutral-600 max-w-2xl mx-auto">โครงสร้างผนังท่อ 3 ชั้นที่ทำงานร่วมกันในการลดเสียงและเพิ่มความแข็งแรง ผลิตจาก Polypropylene (PP) เกรดพิเศษ ทนทานต่อความร้อนและสารเคมี</p>
|
||||
@@ -65,7 +65,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Benefits -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold text-primary-700 mb-6">ข้อดีของท่อระบายน้ำ ไซเลนท์</h2>
|
||||
@@ -97,10 +97,10 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</ul>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<img src="/images/products-raw/xylent/XYLENT_004-805x1024.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
<img src="/images/products-raw/xylent/XYLENT_031-771x1024.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
<img src="/images/products-raw/xylent/XYLENT_016-1024x617.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
<img src="/images/products-raw/xylent/XYLENT_008-1024x357.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
<img src="/images/products-raw/xylent/XYLENT_004-805x1024.svg" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
<img src="/images/products-raw/xylent/XYLENT_031-771x1024.svg" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
<img src="/images/products-raw/xylent/XYLENT_016-1024x617.svg" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
<img src="/images/products-raw/xylent/XYLENT_008-1024x357.svg" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,7 +108,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Applications -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h2 class="text-3xl font-bold text-primary-700 mb-8 text-center">การใช้งานท่อ XYLENT</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
|
||||
|
||||
@@ -5,8 +5,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ระบบน้ำ - วาล์ว ปั๊มน้ำ ระบบกรองน้ำ" description="ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Category Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ระบบน้ำ</span>
|
||||
@@ -30,7 +62,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/images/products-cropped/water-pump_000C.jpg" alt="ระบบน้ำ" class="rounded-2xl" loading="eager" />
|
||||
<img src="/images/products-cropped/water-pump_000C.svg" alt="ระบบน้ำ" class="rounded-2xl" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,12 +70,12 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Products -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8 text-center">สินค้าในหมวดนี้</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
<a href="/วาล์ว-valve" class="group overflow-hidden block bg-white rounded-xl border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
|
||||
<div class="aspect-square overflow-hidden">
|
||||
<img src="/images/products-cropped/valve_000C.jpg" alt="วาล์ว" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
|
||||
<img src="/images/products-cropped/valve_000C.svg" alt="วาล์ว" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4 text-center">
|
||||
<h3 class="text-lg font-bold text-neutral-800 group-hover:text-primary-600 transition-colors">วาล์ว</h3>
|
||||
@@ -52,7 +84,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<a href="/water-pump" class="group overflow-hidden block bg-white rounded-xl border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
|
||||
<div class="aspect-square overflow-hidden">
|
||||
<img src="/images/products-cropped/water-pump_000C.jpg" alt="ปั๊มน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
|
||||
<img src="/images/products-cropped/water-pump_000C.svg" alt="ปั๊มน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4 text-center">
|
||||
<h3 class="text-lg font-bold text-neutral-800 group-hover:text-primary-600 transition-colors">ปั๊มน้ำ</h3>
|
||||
@@ -61,7 +93,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<a href="/water-treatment" class="group overflow-hidden block bg-white rounded-xl border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
|
||||
<div class="aspect-square overflow-hidden">
|
||||
<img src="/images/products-cropped/water-treatment_000C.jpg" alt="ระบบกรองน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
|
||||
<img src="/images/products-cropped/water-treatment_000C.svg" alt="ระบบกรองน้ำ" class="w-full h-full object-cover group-hover:scale-105 transition-transform" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-4 text-center">
|
||||
<h3 class="text-lg font-bold text-neutral-800 group-hover:text-primary-600 transition-colors">ระบบกรองน้ำ</h3>
|
||||
|
||||
@@ -11,7 +11,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
"@type": "Product",
|
||||
"name": "ระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนาม",
|
||||
"description": "จำหน่ายระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนามคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล",
|
||||
"image": "https://dealplustech.co.th/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg",
|
||||
"image": "https://dealplustech.co.th/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.svg",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"url": "https://dealplustech.co.th/ระบบรั้วไวน์แมน-vineman-2",
|
||||
@@ -27,13 +27,13 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<main class="bg-white min-h-screen pb-24 md:pb-0">
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<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-center">
|
||||
<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.svg" alt="ระบบรั้วไวน์แมน Vineman" class="w-full" loading="eager" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-primary-200 font-medium">ระบบรั้ว</span>
|
||||
@@ -77,19 +77,19 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">ลวดหนาม/เสารั้ว/เสารับแรง</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน.jpg" alt="ระบบรั้วไวน์แมน" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน.svg" alt="ระบบรั้วไวน์แมน" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ระบบรั้วไวน์แมน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ลวดหนาม.jpg" alt="ลวดหนาม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ลวดหนาม.svg" alt="ลวดหนาม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ลวดหนาม</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ตาข่ายถักปม.jpg" alt="ตาข่ายถักปม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ตาข่ายถักปม.svg" alt="ตาข่ายถักปม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ตาข่ายถักปม</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ฟิคซ์ล็อค.jpg" alt="ฟิคซ์ล็อค" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ฟิคซ์ล็อค.svg" alt="ฟิคซ์ล็อค" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ฟิคซ์ล็อค</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">6 เทคนิคน่ารู้ ก่อนเลือกใช้ ระบบรั้วตาข่าย</h2>
|
||||
<div class="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/เทคนิคน่ารู้-ก่อนเลือกใช้-ระบบรั้วตาข่าย-488x1024.jpg" alt="6 เทคนิคน่ารู้" class="w-full h-auto rounded-xl max-w-md mx-auto" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เทคนิคน่ารู้-ก่อนเลือกใช้-ระบบรั้วตาข่าย-488x1024.svg" alt="6 เทคนิคน่ารู้" class="w-full h-auto rounded-xl max-w-md mx-auto" loading="lazy" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start space-x-3">
|
||||
@@ -146,27 +146,27 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<!-- Problems Grid -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/จุดเชื่อมของเสาค้ำยันไม่คงทน.jpg" alt="จุดเชื่อมของเสาค้ำยันไม่คงทน" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/จุดเชื่อมของเสาค้ำยันไม่คงทน.svg" alt="จุดเชื่อมของเสาค้ำยันไม่คงทน" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">จุดเชื่อมของเสาค้ำยันไม่คงทน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เปราะ-แตกหักง่าย.jpg" alt="เปราะ แตกหักง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เปราะ-แตกหักง่าย.svg" alt="เปราะ แตกหักง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">เปราะ แตกหักง่าย</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ตัวยึดลวดหนาม-หลุดง่าย.jpg" alt="ตัวยึดลวดหนาม หลุดง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ตัวยึดลวดหนาม-หลุดง่าย.svg" alt="ตัวยึดลวดหนาม หลุดง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">ตัวยึดลวดหนาม หลุดง่าย</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เสาค้ำยันไม่แข็งแรง.jpg" alt="เสาค้ำยันไม่แข็งแรง" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เสาค้ำยันไม่แข็งแรง.svg" alt="เสาค้ำยันไม่แข็งแรง" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">เสาค้ำยันไม่แข็งแรง</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เกิดรอยร้าวง่าย.jpg" alt="เกิดรอยร้าวง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เกิดรอยร้าวง่าย.svg" alt="เกิดรอยร้าวง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">เกิดรอยร้าวง่าย</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ต้องหล่อปูนทำฐานรากทุกต้น.jpg" alt="ต้องหล่อปูนทำฐานรากทุกต้น" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ต้องหล่อปูนทำฐานรากทุกต้น.svg" alt="ต้องหล่อปูนทำฐานรากทุกต้น" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">ต้องหล่อปูนทำฐานรากทุกต้น</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,10 +174,10 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<!-- Solutions -->
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/รั้วโปร่งโล่งสบายตา-1024x1013.jpg" alt="รั้วโปร่งโล่งสบายตา" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/รั้วโปร่งโล่งสบายตา-1024x1013.svg" alt="รั้วโปร่งโล่งสบายตา" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/แข็งแรง-ติดตั้งง่าย-ได้ทุกภูมิทัศน์.jpg" alt="แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/แข็งแรง-ติดตั้งง่าย-ได้ทุกภูมิทัศน์.svg" alt="แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<p class="text-center text-neutral-700 font-medium mt-4">แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์</p>
|
||||
<p class="text-neutral-600 text-sm mt-2">ระบบรั้วตาข่ายไวน์แมน สามารถติดตั้งเดินแนวรั้วบนพื้นที่ทุกรูปแบบทั้งขึ้น-ลง เนินส่วนเว้า-ส่วนโค้งได้อย่างแข็งแรงและต่อเนื่อง</p>
|
||||
</div>
|
||||
@@ -193,15 +193,15 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">รั้วตาข่ายไวน์แมน ใช้ได้กับเสาทุกประเภท</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-ระยะห่างของเสา-5-8-เมตร-1024x302.jpg" alt="ระยะห่างของเสา 5-8 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-ระยะห่างของเสา-5-8-เมตร-1024x302.svg" alt="ระยะห่างของเสา 5-8 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">เสาไวน์แมน ระยะห่าง 5-8 เมตร</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เสาปูน-ระยะห่างของเสา-4-6-เมตร-1024x299.jpg" alt="เสาปูน ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เสาปูน-ระยะห่างของเสา-4-6-เมตร-1024x299.svg" alt="เสาปูน ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">เสาปูน ระยะห่าง 4-6 เมตร</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เสาไม้เนื้อแข็ง-ระยะห่างของเสา-4-6-เมตร-1024x295.jpg" alt="เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เสาไม้เนื้อแข็ง-ระยะห่างของเสา-4-6-เมตร-1024x295.svg" alt="เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -216,7 +216,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">ไวน์แมน รั้วตาข่ายกึ่งสปริง</h2>
|
||||
<div class="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/ไวน์แมน-รั้วตาข่ายกึ่งสปริง.jpg" alt="รั้วตาข่ายกึ่งสปริง" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ไวน์แมน-รั้วตาข่ายกึ่งสปริง.svg" alt="รั้วตาข่ายกึ่งสปริง" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-neutral-700 leading-relaxed">
|
||||
@@ -253,7 +253,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">VINEMAN Buying Guide</h2>
|
||||
<div class="grid lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/VINEMAN-Buying-Guide.jpg" alt="VINEMAN Buying Guide" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/VINEMAN-Buying-Guide.svg" alt="VINEMAN Buying Guide" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-neutral-700 font-medium">สูตรคำนวณความยาวรอบพื้นที่โดยประมาณ</p>
|
||||
@@ -273,7 +273,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">ตาราง การคำนวณปริมาณเบื้องต้น</h2>
|
||||
<img src="/images/products-raw/vineman/ตารางการคำนวณปริมาณเบื้องต้น-1024x322.jpg" alt="ตารางการคำนวณปริมาณเบื้องต้น" class="w-full max-w-3xl mx-auto h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ตารางการคำนวณปริมาณเบื้องต้น-1024x322.svg" alt="ตารางการคำนวณปริมาณเบื้องต้น" class="w-full max-w-3xl mx-auto h-auto rounded-xl" loading="lazy" />
|
||||
<div class="mt-6 p-4 bg-yellow-50 rounded-xl max-w-3xl mx-auto">
|
||||
<p class="text-neutral-700 text-sm"><strong>หมายเหตุ:</strong></p>
|
||||
<ul class="text-neutral-600 text-sm list-disc list-inside space-y-1 mt-2">
|
||||
@@ -456,6 +456,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border border-neutral-200 rounded-xl 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>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ระบบรั้วไวน์แมนมีอายุการใช้งานนานเท่าไหร่?</span>
|
||||
@@ -470,6 +502,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</div>
|
||||
|
||||
<div class="border border-neutral-200 rounded-xl 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>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ระยะห่างของเสาควรเท่าไหร่?</span>
|
||||
@@ -484,6 +548,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</div>
|
||||
|
||||
<div class="border border-neutral-200 rounded-xl 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>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ติดตั้งระบบรั้วไวน์แมนยากหรือไม่?</span>
|
||||
@@ -498,6 +594,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</div>
|
||||
|
||||
<div class="border border-neutral-200 rounded-xl 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>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ควรเลือกตาข่ายถักปมหรือตาข่ายฟิคซ์ล็อค?</span>
|
||||
|
||||
@@ -4,13 +4,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<BaseLayout title="รั้วเทวดา | ระบบรั้วสำเร็จรูป คุณภาพสูง ราคาคุ้มค่า" description="รั้วเทวดา ระบบรั้วสำเร็จรูปสำหรับโรงงาน โกดัง สถานที่เกษตร รีสอร์ท และอื่นๆ พร้อมบริการติดตั้งครบวงจร">
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<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-center">
|
||||
<div class="img-hover rounded-2xl overflow-hidden bg-white/10">
|
||||
<img src="/images/products-raw/tevada/TEVADA_001-987x1024.png" alt="รั้วเทวดา" class="w-full" loading="eager" />
|
||||
<img src="/images/products-raw/tevada/TEVADA_001-987x1024.svg" alt="รั้วเทวดา" class="w-full" loading="eager" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-primary-200 font-medium">ระบบรั้วและฉากกั้น</span>
|
||||
@@ -30,7 +30,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
@@ -62,7 +62,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Models Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
@@ -71,7 +71,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<!-- 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">
|
||||
<img src="/images/products-raw/tevada/TEVADA_003-1024x647.png" alt="TVD-1250" class="w-full h-full object-cover" loading="lazy" />
|
||||
<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">
|
||||
@@ -93,7 +125,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<!-- 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">
|
||||
<img src="/images/products-raw/tevada/TEVADA_004.png" alt="TVD-1500" class="w-full h-full object-cover" loading="lazy" />
|
||||
<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">
|
||||
@@ -115,7 +179,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<!-- 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">
|
||||
<img src="/images/products-raw/tevada/TEVADA_005.png" alt="TVD-2000" class="w-full h-full object-cover" loading="lazy" />
|
||||
<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">
|
||||
@@ -140,7 +236,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Applications Section -->
|
||||
<section class="py-16 bg-primary-700 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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 mb-4">การประยุกต์ใช้งาน</h2>
|
||||
<p class="text-primary-100 max-w-2xl mx-auto">เหมาะสำหรับหลายประเภทธุรกิจ</p>
|
||||
@@ -182,7 +278,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Installation Steps -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
|
||||
@@ -8,7 +8,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
"@type": "Product",
|
||||
"name": "วาล์ว (Valve) - วาล์วน้ำทุกประเภท",
|
||||
"description": "จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล",
|
||||
"image": "https://dealplustech.co.th/images/products-cropped/valve_000C.jpg",
|
||||
"image": "https://dealplustech.co.th/images/products-cropped/valve_000C.svg",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"url": "https://dealplustech.co.th/วาล์ว-valve",
|
||||
@@ -21,12 +21,44 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" description="จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div>
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10">
|
||||
<img src="/images/products-cropped/valve_000C.jpg" alt="วาล์ว (Valve)" class="w-full" width="600" height="400" loading="eager" />
|
||||
<img src="/images/products-cropped/valve_000C.svg" alt="วาล์ว (Valve)" class="w-full" width="600" height="400" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -70,13 +102,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-lg text-neutral-700 leading-relaxed mb-4">จำหน่ายวาล์วน้ำทุกประเภท คุณภาพสูงจากแบรนด์ชั้นนำ เหมาะสำหรับงานระบบประปา ระบบน้ำในอาคาร และโรงงานอุตสาหกรรม มีทีมงานผู้เชี่ยวชาญพร้อมให้คำแนะนำและบริการติดตั้ง</p>
|
||||
|
||||
<img src="/images/products-misc/valve_logo.jpg" alt="Valve Brands" class="w-full max-w-md mx-auto my-8 rounded-lg shadow-md" width="600" height="300" loading="lazy" />
|
||||
<img src="/images/products-misc/valve_logo.svg" alt="Valve Brands" class="w-full max-w-md mx-auto my-8 rounded-lg shadow-md" width="600" height="300" loading="lazy" />
|
||||
|
||||
<p class="text-lg text-neutral-700 leading-relaxed mb-4"><strong>ประเภทวาล์วที่มีจำหน่าย:</strong></p>
|
||||
<ul class="list-disc pl-6 mb-4 space-y-2 text-neutral-700">
|
||||
@@ -125,18 +157,18 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Additional Images -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<img src="/images/valve-In01.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In02.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In03.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In05.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In08.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In10.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In15.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In17.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In01.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In02.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In03.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In05.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In08.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In10.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In15.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
<img src="/images/valve-In17.svg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" onerror="this.style.display='none'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,7 +176,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Valve Selection Guide -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">วิธีเลือกวาล์วให้เหมาะสม</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
@@ -175,7 +207,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
@@ -12,7 +12,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<!-- Mobile: Full-width Hero Image -->
|
||||
<section class="md:hidden">
|
||||
<div class="w-full aspect-square bg-gray-100">
|
||||
<img src="/images/products-cropped/extinguishers_000C.jpg" alt="อุปกรณ์ดับเพลิง" class="w-full h-full object-cover" width="600" height="600" loading="eager" fetchpriority="high" onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
<img src="/images/products-cropped/extinguishers_000C.svg" alt="อุปกรณ์ดับเพลิง" class="w-full h-full object-cover" width="600" height="600" loading="eager" fetchpriority="high" onerror="this.src='/images/logo/dealplustech-logo.svg'" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -50,7 +50,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/extinguishers_000C.jpg" alt="อุปกรณ์ดับเพลิง" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
<img src="/images/products-cropped/extinguishers_000C.svg" alt="อุปกรณ์ดับเพลิง" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.svg'" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -107,12 +107,12 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- Product Specifications -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">รายละเอียดสินค้า</h2>
|
||||
|
||||
<div class="flex justify-center mb-8">
|
||||
<img src="/images/fire-extinguisher-p1.jpg" alt="ถังดับเพลิง" class="max-w-md w-full rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
|
||||
<img src="/images/fire-extinguisher-p1.svg" alt="ถังดับเพลิง" class="max-w-md w-full rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
|
||||
</div>
|
||||
|
||||
<div class="prose prose-lg max-w-none mb-8">
|
||||
@@ -145,7 +145,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</thead>
|
||||
<tbody class="bg-white">
|
||||
<tr class="hover:bg-primary-50 transition-colors">
|
||||
<td class="px-6 py-4 border-b border-gray-200" rowspan="3"><img src="/images/fire-cabinet-1-crop.jpg" alt="ตู้ดับเพลิงแบบเดี่ยว" class="w-24 h-auto rounded" width="96" height="72" loading="lazy" decoding="async" /></td>
|
||||
<td class="px-6 py-4 border-b border-gray-200" rowspan="3"><img src="/images/fire-cabinet-1-crop.svg" alt="ตู้ดับเพลิงแบบเดี่ยว" class="w-24 h-auto rounded" width="96" height="72" loading="lazy" decoding="async" /></td>
|
||||
<td class="px-6 py-4 border-b border-gray-200 text-lg" rowspan="3">แบบเดี่ยว</td>
|
||||
<td class="px-6 py-4 border-b border-gray-200 text-lg">300 x 600 x 250 มม.</td>
|
||||
<td class="px-6 py-4 border-b border-gray-200 text-lg" rowspan="3">เหล็ก#16 พ่นสีแดง</td>
|
||||
@@ -161,7 +161,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<td class="px-6 py-4 border-b border-gray-200 text-lg"></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-primary-50 transition-colors">
|
||||
<td class="px-6 py-4 border-b border-gray-200"><img src="/images/fire-cabinet-2-crop.jpg" alt="ตู้ดับเพลิงแบบใส่สายดับเพลิง" class="w-24 h-auto rounded" width="96" height="72" loading="lazy" decoding="async" /></td>
|
||||
<td class="px-6 py-4 border-b border-gray-200"><img src="/images/fire-cabinet-2-crop.svg" alt="ตู้ดับเพลิงแบบใส่สายดับเพลิง" class="w-24 h-auto rounded" width="96" height="72" loading="lazy" decoding="async" /></td>
|
||||
<td class="px-6 py-4 border-b border-gray-200 text-lg">แบบใส่สายดับเพลิง</td>
|
||||
<td class="px-6 py-4 border-b border-gray-200 text-lg">600 x 700 x 200 มม.</td>
|
||||
<td class="px-6 py-4 border-b border-gray-200 text-lg">เหล็ก#21 พ่นสีแดง</td>
|
||||
@@ -173,14 +173,14 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-4">วิธีการเลือกตู้ดับเพลิงเก็บเครื่องดับเพลิง</h3>
|
||||
<img src="/images/fire-extinguisher-p3.jpg" alt="วิธีการเลือกตู้ดับเพลิง" class="w-full rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
|
||||
<img src="/images/fire-extinguisher-p3.svg" alt="วิธีการเลือกตู้ดับเพลิง" class="w-full rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Fire System Types Guide -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8 text-center">ระบบดับเพลิงและอุปกรณ์ป้องกันอัคคีภัย</h2>
|
||||
|
||||
@@ -239,7 +239,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- Product Selection Guide -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8 text-center">วิธีเลือกอุปกรณ์ดับเพลิงให้เหมาะกับการใช้งาน</h2>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
@@ -311,7 +311,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8 text-center">คำถามที่พบบ่อยเกี่ยวกับอุปกรณ์ดับเพลิง</h2>
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-4">
|
||||
|
||||
@@ -4,13 +4,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<BaseLayout title="อุปกรณ์ปรับอากาศ | ระบบปรับอากาศคุณภาพสูง ประหยัดพลังงาน" description="อุปกรณ์ปรับอากาศคุณภาพสูง ระบบ VRF, แอร์ธรรมดา, พัดลมและอุปกรณ์เสริม พร้อมบริการติดตั้งและดูแล">
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<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-center">
|
||||
<div class="img-hover rounded-2xl overflow-hidden bg-white/10">
|
||||
<img src="/images/products-raw/ball-jet/main-ball-jet.jpg" alt="อุปกรณ์ปรับอากาศ" class="w-full" loading="eager" />
|
||||
<img src="/images/products-raw/ball-jet/main-main-ball-jet.jpg" alt="อุปกรณ์ปรับอากาศ" class="w-full" loading="eager" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-primary-200 font-medium">ระบบปรับอากาศ</span>
|
||||
@@ -30,7 +30,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
@@ -62,7 +62,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Types Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
@@ -71,7 +71,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<!-- แอร์ติดผนัง -->
|
||||
<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">
|
||||
<img src="/images/grilles/supply-air-content.jpg" alt="แอร์ติดผนัง" class="w-full h-full object-cover" loading="lazy" />
|
||||
<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/grilles/supply-air-content.svg" alt="แอร์ติดผนัง" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h3 class="text-lg font-bold text-neutral-900 mb-2">แอร์ติดผนัง</h3>
|
||||
@@ -86,7 +118,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<!-- แอร์ตั้งตู้ -->
|
||||
<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">
|
||||
<img src="/images/grilles/air-grille-content.jpg" alt="แอร์ตั้งตู้" class="w-full h-full object-cover" loading="lazy" />
|
||||
<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/grilles/air-grille-content.svg" alt="แอร์ตั้งตู้" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h3 class="text-lg font-bold text-neutral-900 mb-2">แอร์ตั้งตู้</h3>
|
||||
@@ -101,7 +165,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<!-- แอร์ฝังเพดาน -->
|
||||
<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">
|
||||
<img src="/images/grilles/supply-air-content.jpg" alt="แอร์ฝังเพดาน" class="w-full h-full object-cover" loading="lazy" />
|
||||
<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/grilles/supply-air-content.svg" alt="แอร์ฝังเพดาน" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h3 class="text-lg font-bold text-neutral-900 mb-2">แอร์ฝังเพดาน</h3>
|
||||
@@ -116,7 +212,39 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<!-- ระบบ VRF -->
|
||||
<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">
|
||||
<img src="/images/grilles/linear-slot-content.jpg" alt="ระบบ VRF" class="w-full h-full object-cover" loading="lazy" />
|
||||
<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/grilles/linear-slot-content.svg" alt="ระบบ VRF" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<h3 class="text-lg font-bold text-neutral-900 mb-2">ระบบ VRF</h3>
|
||||
@@ -134,7 +262,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Selection Guide -->
|
||||
<section class="py-16 bg-primary-700 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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 mb-4">แนะนำการเลือกขนาดแอร์</h2>
|
||||
<p class="text-primary-100 max-w-2xl mx-auto">เลือกขนาด BTU ให้เหมาะกับพื้นที่</p>
|
||||
@@ -163,7 +291,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Accessories Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<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>
|
||||
@@ -171,25 +299,25 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow text-center border border-neutral-200">
|
||||
<div class="aspect-square rounded-lg overflow-hidden mb-3">
|
||||
<img src="/images/grilles/linear-bar.jpg" alt="คอยล์ร้อน" class="w-full h-full object-cover" loading="lazy" />
|
||||
<img src="/images/grilles/linear-bar.svg" alt="คอยล์ร้อน" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<h4 class="font-medium text-neutral-900">คอยล์ร้อน</h4>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow text-center border border-neutral-200">
|
||||
<div class="aspect-square rounded-lg overflow-hidden mb-3">
|
||||
<img src="/images/grilles/fresh-air-hing-type.jpg" alt="พัดลมระบายอากาศ" class="w-full h-full object-cover" loading="lazy" />
|
||||
<img src="/images/grilles/fresh-air-hing-type.svg" alt="พัดลมระบายอากาศ" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<h4 class="font-medium text-neutral-900">พัดลมระบายอากาศ</h4>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow text-center border border-neutral-200">
|
||||
<div class="aspect-square rounded-lg overflow-hidden mb-3">
|
||||
<img src="/images/grilles/return-air.jpg" alt="ท่อลมแอร์" class="w-full h-full object-cover" loading="lazy" />
|
||||
<img src="/images/grilles/return-air.svg" alt="ท่อลมแอร์" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<h4 class="font-medium text-neutral-900">ท่อลมแอร์</h4>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow text-center border border-neutral-200">
|
||||
<div class="aspect-square rounded-lg overflow-hidden mb-3">
|
||||
<img src="/images/grilles/eye-ball.jpg" alt="ควบคุมอุณหภูมิ" class="w-full h-full object-cover" loading="lazy" />
|
||||
<img src="/images/grilles/eye-ball.svg" alt="ควบคุมอุณหภูมิ" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<h4 class="font-medium text-neutral-900">ควบคุมอุณหภูมิ</h4>
|
||||
</div>
|
||||
|
||||
@@ -21,8 +21,40 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="เครื่องเชื่อมท่อ HDPE (HDPE Pipe Welding Machine)" description="จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน เครื่องเชื่อมแบบ Butt Fusion และ Electrofusion">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10">
|
||||
@@ -76,7 +108,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
@@ -124,7 +156,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Welding Type Guide -->
|
||||
<section id="welding-types" class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">ประเภทการเชื่อม HDPE</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
@@ -162,7 +194,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- Specifications -->
|
||||
<section id="specs" class="py-16 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">ข้อมูลจำเพาะเครื่องเชื่อม HDPE</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
@@ -192,7 +224,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
<!-- FAQ -->
|
||||
<section id="faq" class="py-16 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-primary-700 mb-8">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
@@ -9,12 +9,44 @@ import Footer from '@/components/common/Footer.astro';
|
||||
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
|
||||
<!-- Animated Background -->
|
||||
<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>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-misc/ppr-welding-machine-main.jpg" alt="เครื่องเชื่อมท่อพีพีอาร์" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
<img src="/images/products-misc/ppr-welding-machine-main.svg" alt="เครื่องเชื่อมท่อพีพีอาร์" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.svg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -79,7 +111,7 @@ import Footer from '@/components/common/Footer.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none mb-8">
|
||||
@@ -116,7 +148,7 @@ import Footer from '@/components/common/Footer.astro';
|
||||
|
||||
<!-- Product Price Table -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-12 text-center">เครื่องเชื่อมพร้อมหัวเชื่อม Welding Machine</h2>
|
||||
|
||||
@@ -131,19 +163,19 @@ import Footer from '@/components/common/Footer.astro';
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="background: white;"><td rowspan="5" class="px-4 py-3 text-center vertical-align: middle;">ใช้กับท่อขนาด 1/2"-1"<br/><img src="/images/products-misc/D20-32small.jpg" alt="D20-32 Small" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">411W020-032S</td><td style="padding: 12px; text-align: center;">D20-32 (Small)</td><td style="padding: 12px; text-align: center;">5,957.00</td></tr>
|
||||
<tr style="background: white;"><td rowspan="5" class="px-4 py-3 text-center vertical-align: middle;">ใช้กับท่อขนาด 1/2"-1"<br/><img src="/images/products-misc/D20-32small.svg" alt="D20-32 Small" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">411W020-032S</td><td style="padding: 12px; text-align: center;">D20-32 (Small)</td><td style="padding: 12px; text-align: center;">5,957.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">411W020-032L</td><td style="padding: 12px; text-align: center;">D20-32 (Large)</td><td style="padding: 12px; text-align: center;">8,676.00</td></tr>
|
||||
<tr style="background: white;"><td style="padding: 12px; text-align: center;">411W020-063</td><td style="padding: 12px; text-align: center;">D20-63</td><td style="padding: 12px; text-align: center;">11,748.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">411W075-110</td><td style="padding: 12px; text-align: center;">D75-110</td><td style="padding: 12px; text-align: center;">15,362.00</td></tr>
|
||||
<tr style="background: white;"><td style="padding: 12px; text-align: center;">411W125-000</td><td style="padding: 12px; text-align: center;">D125</td><td style="padding: 12px; text-align: center;">33,000.00</td></tr>
|
||||
<tr><td colspan="4" style="border-bottom: 2px solid #15803d; height: 8px;"></td></tr>
|
||||
|
||||
<tr style="background: white;"><td rowspan="3" class="px-4 py-3 text-center vertical-align: middle;">หัวเจาะอานม้า Aiguille<br/><img src="/images/products-misc/D25-32-40.jpg" alt="Aiguille" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">401A025-000</td><td style="padding: 12px; text-align: center;">D25</td><td style="padding: 12px; text-align: center;">770.00</td></tr>
|
||||
<tr style="background: white;"><td rowspan="3" class="px-4 py-3 text-center vertical-align: middle;">หัวเจาะอานม้า Aiguille<br/><img src="/images/products-misc/D25-32-40.svg" alt="Aiguille" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">401A025-000</td><td style="padding: 12px; text-align: center;">D25</td><td style="padding: 12px; text-align: center;">770.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">401A032-000</td><td style="padding: 12px; text-align: center;">D32</td><td style="padding: 12px; text-align: center;">858.00</td></tr>
|
||||
<tr style="background: white;"><td style="padding: 12px; text-align: center;">401A040-000</td><td style="padding: 12px; text-align: center;">D40</td><td style="padding: 12px; text-align: center;">1,180.00</td></tr>
|
||||
<tr><td colspan="4" style="border-bottom: 2px solid #15803d; height: 8px;"></td></tr>
|
||||
|
||||
<tr style="background: white;"><td rowspan="18" class="px-4 py-3 text-center vertical-align: middle;">หัวเชื่อมอานม้า Welding Saddle Mould<br/><img src="/images/products-misc/D50-25.jpg" alt="Welding Saddle Mould" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">411S050-025</td><td style="padding: 12px; text-align: center;">D50-25</td><td style="padding: 12px; text-align: center;">1,206.00</td></tr>
|
||||
<tr style="background: white;"><td rowspan="18" class="px-4 py-3 text-center vertical-align: middle;">หัวเชื่อมอานม้า Welding Saddle Mould<br/><img src="/images/products-misc/D50-25.svg" alt="Welding Saddle Mould" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">411S050-025</td><td style="padding: 12px; text-align: center;">D50-25</td><td style="padding: 12px; text-align: center;">1,206.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">411S063-025</td><td style="padding: 12px; text-align: center;">D63-25</td><td style="padding: 12px; text-align: center;">1,206.00</td></tr>
|
||||
<tr style="background: white;"><td style="padding: 12px; text-align: center;">411S063-032</td><td style="padding: 12px; text-align: center;">D63-32</td><td style="padding: 12px; text-align: center;">1,815.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">411S075-025</td><td style="padding: 12px; text-align: center;">D75-25</td><td style="padding: 12px; text-align: center;">1,307.00</td></tr>
|
||||
@@ -162,11 +194,11 @@ import Footer from '@/components/common/Footer.astro';
|
||||
<tr style="background: white;"><td style="padding: 12px; text-align: center;">411S160-040</td><td style="padding: 12px; text-align: center;">D160-40</td><td style="padding: 12px; text-align: center;">2,680.00</td></tr>
|
||||
<tr><td colspan="4" style="border-bottom: 2px solid #15803d; height: 8px;"></td></tr>
|
||||
|
||||
<tr style="background: white;"><td rowspan="2" class="px-4 py-3 text-center vertical-align: middle;">หัวเชื่อมแท่งซ่อม Repairing Stick Mould<br/><img src="/images/products-misc/D7.jpg" alt="Repairing Stick Mould" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">401R007-000</td><td style="padding: 12px; text-align: center;">D7</td><td style="padding: 12px; text-align: center;">679.00</td></tr>
|
||||
<tr style="background: white;"><td rowspan="2" class="px-4 py-3 text-center vertical-align: middle;">หัวเชื่อมแท่งซ่อม Repairing Stick Mould<br/><img src="/images/products-misc/D7.svg" alt="Repairing Stick Mould" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">401R007-000</td><td style="padding: 12px; text-align: center;">D7</td><td style="padding: 12px; text-align: center;">679.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">401R011-000</td><td style="padding: 12px; text-align: center;">D11</td><td style="padding: 12px; text-align: center;">679.00</td></tr>
|
||||
<tr><td colspan="4" style="border-bottom: 2px solid #15803d; height: 8px;"></td></tr>
|
||||
|
||||
<tr style="background: white;"><td rowspan="10" class="px-4 py-3 text-center vertical-align: middle;">หัวเชื่อม Welding Mould<br/><img src="/images/products-misc/D20.jpg" alt="Welding Mould" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">401W020-000</td><td style="padding: 12px; text-align: center;">D20</td><td style="padding: 12px; text-align: center;">504.00</td></tr>
|
||||
<tr style="background: white;"><td rowspan="10" class="px-4 py-3 text-center vertical-align: middle;">หัวเชื่อม Welding Mould<br/><img src="/images/products-misc/D20.svg" alt="Welding Mould" style="object-fit: contain; margin: auto;" width="80" height="80" loading="lazy" decoding="async" /></td><td style="padding: 12px; text-align: center;">401W020-000</td><td style="padding: 12px; text-align: center;">D20</td><td style="padding: 12px; text-align: center;">504.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">401W025-000</td><td style="padding: 12px; text-align: center;">D25</td><td style="padding: 12px; text-align: center;">603.00</td></tr>
|
||||
<tr style="background: white;"><td style="padding: 12px; text-align: center;">401W032-000</td><td style="padding: 12px; text-align: center;">D32</td><td style="padding: 12px; text-align: center;">705.00</td></tr>
|
||||
<tr style="background: #f9fafb;"><td style="padding: 12px; text-align: center;">401W040-000</td><td style="padding: 12px; text-align: center;">D40</td><td style="padding: 12px; text-align: center;">1,387.00</td></tr>
|
||||
@@ -185,7 +217,7 @@ import Footer from '@/components/common/Footer.astro';
|
||||
|
||||
<!-- Temperature Guide -->
|
||||
<section id="temperature" class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">อุณหภูมิการเชื่อม PPR</h2>
|
||||
<div class="overflow-x-auto">
|
||||
@@ -213,7 +245,7 @@ import Footer from '@/components/common/Footer.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
@@ -27,7 +27,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<main class="bg-white min-h-screen pb-24 md:pb-0">
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">เทอร์โมเบรค Thermobreak</span>
|
||||
</nav>
|
||||
@@ -83,7 +83,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8">รายละเอียดสินค้า</h2>
|
||||
|
||||
<div class="mb-8">
|
||||
<img src="/images/thermobreak/thermobreak-banner.png" alt="Thermobreak Banner" class="w-full h-auto rounded-xl shadow-md" loading="lazy" />
|
||||
<img src="/images/thermobreak/thermobreak-banner.svg" alt="Thermobreak Banner" class="w-full h-auto rounded-xl shadow-md" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<p class="text-lg text-neutral-700 leading-relaxed mb-6">
|
||||
|
||||
@@ -12,7 +12,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<!-- Mobile: Full-width Hero Image -->
|
||||
<section class="md:hidden">
|
||||
<div class="w-full aspect-square bg-gray-100">
|
||||
<img src="/images/products-misc/MECH_001.jpg" alt="ข้อต่อกรู๊ฟคับปลิ้ง | MECH Grooved Coupling" class="w-full h-full object-cover" width="600" height="600" loading="eager" fetchpriority="high" onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
<img src="/images/products-misc/MECH_001.svg" alt="ข้อต่อกรู๊ฟคับปลิ้ง | MECH Grooved Coupling" class="w-full h-full object-cover" width="600" height="600" loading="eager" fetchpriority="high" onerror="this.src='/images/logo/dealplustech-logo.svg'" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -50,7 +50,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-misc/MECH_001.jpg" alt="ข้อต่อกรู๊ฟคับปลิ้ง | MECH Grooved Coupling" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
<img src="/images/products-misc/MECH_001.svg" alt="ข้อต่อกรู๊ฟคับปลิ้ง | MECH Grooved Coupling" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.svg'" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -113,7 +113,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- Product Details -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl sm:text-xl font-bold text-slate-900 mb-8">รายละเอียดสินค้า</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
@@ -201,7 +201,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- Quick Mech Coupling Section -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl sm:text-xl font-bold text-slate-900 mb-8">Quick Mech Coupling</h2>
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
@@ -252,7 +252,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- Comparison Section -->
|
||||
<section class="py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl sm:text-xl font-bold text-slate-900 mb-8">เปรียบเทียบ Grooved Coupling กับ การเชื่อม</h2>
|
||||
<div class="overflow-x-auto">
|
||||
@@ -299,7 +299,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section id="faq" class="py-16 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-xl font-bold text-slate-900 mb-8">คำถามที่พบบ่อย</h2>
|
||||
<div class="space-y-4">
|
||||
@@ -326,7 +326,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<!-- Price List Section -->
|
||||
<section id="pricelist" class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-lg mx-auto">
|
||||
<h2 class="text-lg sm:text-xl font-bold mb-6 text-center">ดาวน์โหลดราคาสินค้า</h2>
|
||||
<a href="/documents/Price List MECH_V13-2021 [260864](1).pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow group">
|
||||
|
||||
Reference in New Issue
Block a user