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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user