kunthawat/dealplustech-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update insulation brand pages (Armaflex, Aeroflex, Maxflex)

Browse Source 
- 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
2026-05-22 12:50:17 +07:00
parent 5219cf8f72
commit 882fa7f819
643 changed files with 21612 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/Header.astro
View File

@@ -56,7 +56,9 @@ const productCategories = [
{
title: "ฉนวนและรั้ว",
items: [
{ label: "ฉนวนหุ้มท่อ", href: "/ฉนวนหุ้มท่อ" },
{ label: "Armaflex", href: "/armflex" },
{ label: "Aeroflex", href: "/aeroflex" },
{ label: "Maxflex", href: "/maxflex" },
{ label: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak" },
{ label: "Realflex", href: "/realflex" },
{ label: "อุปกรณ์ดับเพลิง", href: "/อุปกรณ์ดับเพลิง" },

476
src/layouts/BaseLayout.astro
View File

@@ -62,9 +62,11 @@ const categories = [
},
{
name: 'ฉนวนหุ้มท่อ',
slug: '/ฉนวนหุ้มท่อ',
slug: '/armflex',
subcategories: [
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ' },
{ name: 'Armaflex', slug: '/armflex' },
{ name: 'Aeroflex', slug: '/aeroflex' },
{ name: 'Maxflex', slug: '/maxflex' },
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
]
},
@@ -89,34 +91,49 @@ const productLinks = [
---
<Layout title="ดีล พลัส เทค">
<header class="bg-white shadow-sm sticky top-0 z-50">
<!-- Header with Scroll Effects -->
<header id="main-header" class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-20">
<a href="/" class="flex items-center">
<img src="/images/logo.png" alt="ดีล พลัส เทค" class="h-10 lg:h-14 w-auto" />
<a href="/" class="flex items-center group">
<img
src="/images/logo/dealplustech-logo.png"
alt="ดีล พลัส เทค"
class="h-10 lg:h-14 w-auto transition-transform duration-300 group-hover:scale-105"
/>
</a>
<div class="hidden lg:flex items-center gap-6">
<a href="/" class="text-neutral-600 hover:text-primary-600 font-medium">หน้าแรก</a>
<a href="/about-us" class="text-neutral-600 hover:text-primary-600 font-medium">เกี่ยวกับเรา</a>
<a href="/" class="nav-link text-neutral-600 hover:text-primary-600 font-medium relative">
หน้าแรก
<span class="nav-underline"></span>
</a>
<a href="/about-us" class="nav-link text-neutral-600 hover:text-primary-600 font-medium relative">
เกี่ยวกับเรา
<span class="nav-underline"></span>
</a>
<div class="relative group">
<button class="flex items-center gap-1 text-neutral-600 hover:text-primary-600 font-medium">
<button class="nav-link flex items-center gap-1 text-neutral-600 hover:text-primary-600 font-medium">
<span>สินค้า</span>
<svg class="w-4 h-4 transition-transform duration-200 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="absolute top-full left-1/2 -translate-x-1/2 mt-0 w-[600px] max-w-[95vw] bg-white rounded-b-2xl shadow-xl border border-neutral-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform group-hover:translate-y-0 translate-y-2 z-50">
<div class="grid grid-cols-4 gap-4 p-6">
<!-- Mega Menu with Stagger Animation -->
<div class="absolute top-full left-1/2 -translate-x-1/2 mt-0 w-[650px] max-w-[95vw] bg-white/95 backdrop-blur-xl rounded-b-2xl shadow-2xl border border-neutral-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-4 z-50">
<div class="grid grid-cols-4 gap-5 p-6" data-animate-stagger>
{categories.map(cat => (
<div class="space-y-2">
<span class="block text-sm font-bold text-primary-700 cursor-default">
<div class="space-y-2 group/sub">
<span class="block text-sm font-bold text-primary-700 cursor-default hover:text-primary-600 transition-colors">
{cat.name}
</span>
<ul class="space-y-1">
{cat.subcategories.map(sub => (
<li>
<a href={sub.slug} class="block text-sm text-neutral-600 hover:text-primary-600 transition-colors">
<a
href={sub.slug}
class="block text-sm text-neutral-600 hover:text-primary-600 hover:translate-x-1 transition-all duration-200"
>
{sub.name}
</a>
</li>
@@ -125,10 +142,10 @@ const productLinks = [
</div>
))}
</div>
<div class="border-t border-neutral-100 px-6 py-4 bg-neutral-50 rounded-b-2xl">
<a href="/all-products" class="text-sm font-semibold text-primary-600 hover:text-primary-700 transition-colors flex items-center gap-1">
<div class="border-t border-neutral-100 px-6 py-4 bg-gradient-to-r from-primary-50 to-accent-50 rounded-b-2xl">
<a href="/all-products" class="inline-flex items-center gap-2 text-sm font-semibold text-primary-600 hover:text-primary-700 transition-colors group/btn">
ดูสินค้าทั้งหมด
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-4 h-4 transition-transform duration-200 group-hover/btn:translate-x-1" 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>
</a>
@@ -136,124 +153,349 @@ const productLinks = [
</div>
</div>
<a href="/portfolio" class="text-neutral-600 hover:text-primary-600 font-medium">ผลงาน</a>
<a href="/contact-us" class="bg-primary-600 hover:bg-primary-700 text-white py-2 px-4 rounded-lg font-medium">ติดต่อเรา</a>
<a href="/portfolio" class="nav-link text-neutral-600 hover:text-primary-600 font-medium relative">
ผลงาน
<span class="nav-underline"></span>
</a>
<a
href="/contact-us"
class="bg-primary-600 hover:bg-primary-700 text-white py-2 px-5 rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:shadow-primary-600/25 hover:-translate-y-0.5 magnetic-btn"
>
ติดต่อเรา
</a>
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="lg:hidden p-2 rounded-lg hover:bg-neutral-100 transition-colors">
<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="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>
<!-- Mobile Menu -->
<div id="mobile-menu" class="lg:hidden hidden bg-white border-t border-neutral-100">
<div class="px-4 py-6 space-y-4">
<a href="/" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">หน้าแรก</a>
<a href="/about-us" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">เกี่ยวกับเรา</a>
<a href="/all-products" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">สินค้าทั้งหมด</a>
<a href="/portfolio" class="block text-neutral-600 hover:text-primary-600 font-medium py-2">ผลงาน</a>
<a href="/contact-us" class="block bg-primary-600 text-white text-center py-3 rounded-lg font-medium mt-4">ติดต่อเรา</a>
</div>
</div>
</header>
<slot />
<footer class="text-neutral-800">
<div class="bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
<!-- Company Info -->
<div class="lg:col-span-1">
<img src="/images/logo.png" alt="ดีล พลัส เทค" class="h-10 w-auto mb-4" />
<div class="space-y-3 text-sm text-neutral-600">
<p class="flex items-start gap-2">
<svg class="w-5 h-5 shrink-0 mt-0.5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>{companyInfo.address}</span>
</p>
<p class="flex items-center gap-2">
<svg class="w-5 h-5 shrink-0 text-primary-600" 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 href={`tel:${companyInfo.phone}`} class="hover:text-primary-600">{companyInfo.phone}</a>
</p>
<p class="flex items-center gap-2">
<svg class="w-5 h-5 shrink-0 text-primary-600" 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 href={`mailto:${companyInfo.email}`} class="hover:text-primary-600">{companyInfo.email}</a>
</p>
<p class="flex items-center gap-2">
<svg class="w-5 h-5 shrink-0 text-primary-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.346 0 .628.285.628.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>
<span>LINE: {companyInfo.line}</span>
</p>
<p class="text-neutral-400 text-xs">{companyInfo.hours}</p>
</div>
</div>
<!-- Quick Links -->
<div>
<h3 class="font-semibold text-lg mb-4 text-primary-700">ลิงก์ด่วน</h3>
<ul class="space-y-2 text-sm text-neutral-600">
<li><a href="/" class="hover:text-primary-600 transition-colors">หน้าแรก</a></li>
<li><a href="/about-us" class="hover:text-primary-600 transition-colors">เกี่ยวกับเรา</a></li>
<li><a href="/all-products" class="hover:text-primary-600 transition-colors">สินค้าทั้งหมด</a></li>
<li><a href="/portfolio" class="hover:text-primary-600 transition-colors">ผลงาน</a></li>
<li><a href="/contact-us" class="hover:text-primary-600 transition-colors">ติดต่อเรา</a></li>
</ul>
</div>
<!-- Products -->
<div>
<h3 class="font-semibold text-lg mb-4 text-primary-700">สินค้ายอดนิยม</h3>
<ul class="space-y-2 text-sm text-neutral-600">
{productLinks.map(link => (
<li><a href={link.href} class="hover:text-primary-600 transition-colors">{link.title}</a></li>
))}
</ul>
</div>
<!-- Contact CTA -->
<div>
<h3 class="font-semibold text-lg mb-4 text-primary-700">ติดต่อเรา</h3>
<div class="space-y-3">
<a
href={`tel:${companyInfo.phone}`}
class="flex items-center justify-center gap-2 w-full bg-primary-600 hover:bg-primary-700 text-white py-3 px-4 rounded-lg font-medium transition-colors"
>
<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 class="flex flex-col items-center gap-2">
<img
src="/images/line-qr.svg"
alt="LINE QR Code"
class="w-28 h-28 rounded-lg bg-white p-2 shadow-sm"
/>
<a
href="https://line.me/ti/p/~JPPSELECTION"
target="_blank"
rel="noopener"
class="flex items-center justify-center gap-2 w-full bg-accent-500 hover:bg-accent-600 text-white py-3 px-4 rounded-lg font-medium transition-colors"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.346 0 .628.285.628.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>
<!-- Footer -->
<footer class="text-neutral-800 bg-gradient-to-b from-white to-neutral-50" data-animate="fade-up">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
<!-- Company Info -->
<div class="lg:col-span-1" data-animate="fade-left" data-animate-delay="0">
<img src="/images/logo/dealplustech-logo.png" alt="ดีล พลัส เทค" class="h-10 w-auto mb-4 transition-transform hover:scale-105 duration-300" />
<div class="space-y-3 text-sm text-neutral-600">
<p class="flex items-start gap-2 hover:text-primary-600 transition-colors">
<svg class="w-5 h-5 shrink-0 mt-0.5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>{companyInfo.address}</span>
</p>
<p class="flex items-center gap-2 hover:text-primary-600 transition-colors">
<svg class="w-5 h-5 shrink-0 text-primary-600" 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 href={`tel:${companyInfo.phone}`}>{companyInfo.phone}</a>
</p>
<p class="flex items-center gap-2 hover:text-primary-600 transition-colors">
<svg class="w-5 h-5 shrink-0 text-primary-600" 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 href={`mailto:${companyInfo.email}`}>{companyInfo.email}</a>
</p>
<p class="flex items-center gap-2 hover:text-primary-600 transition-colors">
<svg class="w-5 h-5 shrink-0 text-primary-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.346 0 .628.285.628.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>
<span>LINE: {companyInfo.line}</span>
</p>
<p class="text-neutral-400 text-xs">{companyInfo.hours}</p>
</div>
</div>
<!-- Bottom bar -->
<div class="mt-12 pt-8 border-t border-neutral-200">
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-neutral-500">
<p>&copy; {new Date().getFullYear()} {companyInfo.name}. สงวนลิขสิทธิ์.</p>
<div class="flex gap-6">
<a href="/privacy-policy" class="hover:text-primary-600 transition-colors">นโยบายความเป็นส่วนตัว</a>
<a href="/terms-and-conditions" class="hover:text-primary-600 transition-colors">ข้อกำหนดการใช้งาน</a>
<!-- Quick Links -->
<div data-animate="fade-up" data-animate-delay="100">
<h3 class="font-semibold text-lg mb-4 text-primary-700">ลิงก์ด่วน</h3>
<ul class="space-y-2 text-sm text-neutral-600">
<li><a href="/" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">หน้าแรก</a></li>
<li><a href="/about-us" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">เกี่ยวกับเรา</a></li>
<li><a href="/all-products" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">สินค้าทั้งหมด</a></li>
<li><a href="/portfolio" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">ผลงาน</a></li>
<li><a href="/contact-us" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">ติดต่อเรา</a></li>
</ul>
</div>
<!-- Products -->
<div data-animate="fade-up" data-animate-delay="200">
<h3 class="font-semibold text-lg mb-4 text-primary-700">สินค้ายอดนิยม</h3>
<ul class="space-y-2 text-sm text-neutral-600">
{productLinks.map(link => (
<li>
<a href={link.href} class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">{link.title}</a>
</li>
))}
</ul>
</div>
<!-- Contact CTA -->
<div data-animate="fade-right" data-animate-delay="300">
<h3 class="font-semibold text-lg mb-4 text-primary-700">ติดต่อเรา</h3>
<div class="space-y-3">
<a
href={`tel:${companyInfo.phone}`}
class="flex items-center justify-center gap-2 w-full bg-primary-600 hover:bg-primary-700 text-white py-3 px-4 rounded-xl font-medium 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="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 class="flex flex-col items-center gap-2">
<img
src="/images/line-qr.svg"
alt="LINE QR Code"
class="w-28 h-28 rounded-xl bg-white p-2 shadow-lg hover:shadow-xl transition-shadow"
/>
<a
href="https://line.me/ti/p/~JPPSELECTION"
target="_blank"
rel="noopener"
class="flex items-center justify-center gap-2 w-full bg-accent-500 hover:bg-accent-600 text-white py-3 px-4 rounded-xl font-medium transition-all hover:shadow-lg hover:shadow-accent-500/25 hover:-translate-y-0.5 magnetic-btn btn-shimmer"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.346 0 .628.285.628.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>
</div>
</div>
<!-- Bottom bar -->
<div class="mt-12 pt-8 border-t border-neutral-200">
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-neutral-500">
<p>&copy; {new Date().getFullYear()} {companyInfo.name}. สงวนลิขสิทธิ์.</p>
<div class="flex gap-6">
<a href="/privacy-policy" class="hover:text-primary-600 transition-colors">นโยบายความเป็นส่วนตัว</a>
<a href="/terms-and-conditions" class="hover:text-primary-600 transition-colors">ข้อกำหนดการใช้งาน</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Animation Initialization Scripts -->
<script>
// ============================================
// SCROLL-TRIGGERED ANIMATIONS (Intersection Observer)
// ============================================
document.addEventListener('DOMContentLoaded', () => {
const animatedElements = document.querySelectorAll('[data-animate]');
const staggerElements = document.querySelectorAll('[data-animate-stagger]');
const observerOptions = {
root: null,
rootMargin: '0px 0px -50px 0px',
threshold: 0.1
};
const animateOnScroll = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
// Unobserve after animation to save resources
animateOnScroll.unobserve(entry.target);
}
});
}, observerOptions);
// Observe regular animated elements
animatedElements.forEach(el => {
animateOnScroll.observe(el);
});
// Observe stagger containers
const staggerObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
staggerObserver.unobserve(entry.target);
}
});
}, observerOptions);
staggerElements.forEach(el => {
staggerObserver.observe(el);
});
});
// ============================================
// HEADER SCROLL EFFECTS
// ============================================
const header = document.getElementById('main-header');
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
// Add shadow on scroll
if (currentScroll > 10) {
header?.classList.add('shadow-md');
header?.classList.remove('shadow-sm');
} else {
header?.classList.remove('shadow-md');
header?.classList.add('shadow-sm');
}
// Hide/show header on scroll direction
if (currentScroll > lastScroll && currentScroll > 100) {
header?.classList.add('-translate-y-full');
} else {
header?.classList.remove('-translate-y-full');
}
lastScroll = currentScroll;
});
// ============================================
// MOBILE MENU TOGGLE
// ============================================
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn?.addEventListener('click', () => {
mobileMenu?.classList.toggle('hidden');
});
// ============================================
// MAGNETIC BUTTON EFFECT
// ============================================
const magneticBtns = document.querySelectorAll('.magnetic-btn');
magneticBtns.forEach(btn => {
btn.addEventListener('mousemove', (e: MouseEvent) => {
const rect = (btn as HTMLElement).getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
(btn as HTMLElement).style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
});
btn.addEventListener('mouseleave', () => {
(btn as HTMLElement).style.transform = 'translate(0, 0)';
});
});
// ============================================
// RIPPLE EFFECT
// ============================================
const rippleBtns = document.querySelectorAll('.ripple');
rippleBtns.forEach(btn => {
btn.addEventListener('click', (e: MouseEvent) => {
const target = e.currentTarget as HTMLElement;
const rect = target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const ripple = document.createElement('span');
ripple.className = 'ripple-effect';
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
target.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
});
});
// ============================================
// 3D TILT EFFECT FOR CARDS
// ============================================
const tiltCards = document.querySelectorAll('.tilt-card');
tiltCards.forEach(card => {
card.addEventListener('mousemove', (e: MouseEvent) => {
const target = card as HTMLElement;
const rect = target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 10;
const rotateY = (centerX - x) / 10;
target.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
card.addEventListener('mouseleave', () => {
(card as HTMLElement).style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});
});
// ============================================
// COUNTER ANIMATION
// ============================================
const counters = document.querySelectorAll('[data-counter]');
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = entry.target as HTMLElement;
const end = parseInt(target.getAttribute('data-counter') || '0');
const duration = 2000;
const step = end / (duration / 16);
let current = 0;
const updateCounter = () => {
current += step;
if (current < end) {
target.textContent = Math.floor(current).toString();
requestAnimationFrame(updateCounter);
} else {
target.textContent = end.toString();
}
};
updateCounter();
counterObserver.unobserve(target);
}
});
}, { threshold: 0.5 });
counters.forEach(counter => {
counterObserver.observe(counter);
});
// ============================================
// SMOOTH SCROLL FOR ANCHOR LINKS
// ============================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', (e) => {
e.preventDefault();
const target = document.querySelector((anchor as HTMLAnchorElement).getAttribute('href') || '');
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
<script>
// Price button auto-detection
document.addEventListener('DOMContentLoaded', () => {
const priceButton = document.querySelector('[data-price-button]');
if (!priceButton) return;
@@ -266,4 +508,4 @@ const productLinks = [
}
});
</script>
</Layout>
</Layout>

2
src/layouts/Layout.astro
View File

@@ -15,7 +15,7 @@ const { title, description = "ดีล พลัส เทค - ระบบน
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600&display=swap" rel="stylesheet" />

41
src/pages/about-us.astro
View File

@@ -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
View 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>

48
src/pages/all-products.astro
View File

@@ -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
View 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>

38
src/pages/contact-us.astro
View File

@@ -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">

42
src/pages/durgo-avvs.astro
View File

@@ -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">

38
src/pages/grilles.astro
View File

@@ -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">

334
src/pages/index.astro
View File

@@ -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
View 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>

42
src/pages/pipe-coupling.astro
View File

@@ -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">

38
src/pages/portfolio.astro
View File

@@ -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 -->

2
src/pages/realflex.astro
View File

@@ -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>

46
src/pages/water-pump.astro
View File

@@ -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">

2
src/pages/water-treatment.astro
View File

@@ -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>

335
src/pages/ฉนวนหุ้มท่อ.astro
View File

@@ -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>

2
src/pages/ท่อ-hdpe.astro
View File

@@ -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">

2
src/pages/ท่อ-ppr-scg.astro
View File

@@ -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">

2
src/pages/ท่อ-ppr-thai-ppr.astro
View File

@@ -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">

68
src/pages/ท่อ-syler.astro
View File

@@ -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">

4
src/pages/ท่อ-upvc.astro
View File

@@ -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">

18
src/pages/ท่อ-xy-lent.astro
View File

@@ -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">

46
src/pages/ระบบน้ำ.astro
View File

@@ -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>

172
src/pages/ระบบรั้วไวน์แมน.astro
View File

@@ -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>

114
src/pages/รั้วเทวดา.astro
View File

@@ -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>

66
src/pages/วาล์ว-valve.astro
View File

@@ -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">

20
src/pages/อุปกรณ์ดับเพลิง.astro
View File

@@ -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">

156
src/pages/อุปกรณ์ปรับอากาศ.astro
View File

@@ -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>

44
src/pages/เครื่องเชื่อม-hdpe.astro
View File

@@ -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">

56
src/pages/เครื่องเชื่อม-ppr.astro
View File

@@ -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">

4
src/pages/เทอร์โมเบรค-thermobreak.astro
View File

@@ -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">

14
src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro
View File

@@ -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">

816
src/styles/global.css
View File

@@ -64,7 +64,565 @@
}
}
/* Animations */
/* ============================================
SCROLL-TRIGGERED ANIMATIONS
============================================ */
/* Base state for scroll animations */
[data-animate] {
opacity: 0;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* Animation variants */
[data-animate="fade-up"] {
transform: translateY(30px);
}
[data-animate="fade-down"] {
transform: translateY(-30px);
}
[data-animate="fade-left"] {
transform: translateX(30px);
}
[data-animate="fade-right"] {
transform: translateX(-30px);
}
[data-animate="scale-in"] {
transform: scale(0.9);
}
[data-animate="zoom-in"] {
transform: scale(0.8);
}
/* Animation triggered state */
[data-animate].is-visible {
opacity: 1;
transform: translate(0) scale(1);
}
/* Stagger delays for children */
[data-animate-stagger] > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
[data-animate-stagger].is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
[data-animate-stagger].is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
[data-animate-stagger].is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
[data-animate-stagger].is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
[data-animate-stagger].is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
[data-animate-stagger].is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
[data-animate-stagger].is-visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
[data-animate-stagger].is-visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 700ms; }
/* ============================================
TEXT ANIMATIONS
============================================ */
/* Text reveal animation */
[data-text-reveal] {
overflow: hidden;
}
[data-text-reveal] span {
display: inline-block;
transform: translateY(100%);
animation: text-reveal 0.8s ease-out forwards;
}
@keyframes text-reveal {
to {
transform: translateY(0);
}
}
/* Character by character reveal */
.char-reveal span {
opacity: 0;
animation: char-fade-in 0.3s ease-out forwards;
}
@keyframes char-fade-in {
to {
opacity: 1;
}
}
/* Word reveal */
.word-reveal span {
opacity: 0;
margin-right: 0.3em;
}
.word-reveal span {
animation: word-slide-up 0.5s ease-out forwards;
}
@keyframes word-slide-up {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
GRADIENT ANIMATIONS
============================================ */
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes gradient-flow {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient-shift 8s ease infinite;
}
.animate-gradient-flow {
background-size: 300% 300%;
animation: gradient-flow 15s ease infinite;
}
/* Animated mesh gradient */
@keyframes mesh-move-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(2%, 3%) scale(1.05); }
50% { transform: translate(5%, 0%) scale(1.1); }
75% { transform: translate(0%, 2%) scale(1.02); }
}
@keyframes mesh-move-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(-3%, 2%) scale(1.08); }
50% { transform: translate(-1%, 5%) scale(1.03); }
75% { transform: translate(2%, 1%) scale(1.06); }
}
@keyframes mesh-move-3 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(4%, -2%) scale(1.04); }
66% { transform: translate(-2%, 4%) scale(1.07); }
}
@keyframes grid-drift {
0% { transform: translate(0, 0); }
25% { transform: translate(5px, 5px); }
50% { transform: translate(0, 10px); }
75% { transform: translate(-5px, 5px); }
100% { transform: translate(0, 0); }
}
@keyframes wave-morph {
0%, 100% {
d: path("M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z");
}
50% {
d: path("M0,180 Q360,80 720,180 T1440,180 L1440,300 L0,300 Z");
}
}
.animate-mesh-1 {
animation: mesh-move-1 20s ease-in-out infinite;
}
.animate-mesh-2 {
animation: mesh-move-2 25s ease-in-out infinite;
}
.animate-mesh-3 {
animation: mesh-mesh-3 18s ease-in-out infinite;
}
/* ============================================
FLOAT & ORB ANIMATIONS
============================================ */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
@keyframes float-slow {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(3deg); }
}
@keyframes float-reverse {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(15px); }
}
@keyframes orb-drift {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.3;
}
33% {
transform: translate(30px, -30px) scale(1.1);
opacity: 0.5;
}
66% {
transform: translate(-20px, 20px) scale(0.95);
opacity: 0.25;
}
}
@keyframes orb-drift-2 {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.25;
}
33% {
transform: translate(-40px, 25px) scale(1.08);
opacity: 0.4;
}
66% {
transform: translate(25px, -15px) scale(0.98);
opacity: 0.2;
}
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 20px rgba(45, 106, 79, 0.3);
}
50% {
box-shadow: 0 0 40px rgba(45, 106, 79, 0.6);
}
}
.animate-float {
animation: float 4s ease-in-out infinite;
}
.animate-float-slow {
animation: float-slow 6s ease-in-out infinite;
}
.animate-float-reverse {
animation: float-reverse 4s ease-in-out infinite;
}
.animate-float-delayed-1 {
animation: float 4s ease-in-out infinite;
animation-delay: 0.5s;
}
.animate-float-delayed-2 {
animation: float 4s ease-in-out infinite;
animation-delay: 1s;
}
.animate-float-delayed-3 {
animation: float 4s ease-in-out infinite;
animation-delay: 1.5s;
}
.animate-orb-1 {
animation: orb-drift 10s ease-in-out infinite;
}
.animate-orb-2 {
animation: orb-drift-2 12s ease-in-out infinite;
}
.animate-pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
/* ============================================
CARD EFFECTS
============================================ */
/* 3D Tilt Effect */
.tilt-card {
transform-style: preserve-3d;
transition: transform 0.3s ease-out;
}
.tilt-card-inner {
transform: translateZ(30px);
transition: transform 0.3s ease-out;
}
/* Hover lift effect */
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* Image hover zoom with reveal */
.img-hover {
overflow: hidden;
}
.img-hover img,
.img-hover .img-overlay {
transition: transform 0.5s ease, opacity 0.5s ease;
}
.img-hover:hover img {
transform: scale(1.1);
}
.img-hover .img-overlay {
opacity: 0;
}
.img-hover:hover .img-overlay {
opacity: 1;
}
/* Card shine effect on hover */
.card-shine {
position: relative;
overflow: hidden;
}
.card-shine::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
}
.card-shine:hover::before {
left: 100%;
}
/* ============================================
GLASSMORPHISM
============================================ */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-strong {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.glass-dark {
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ============================================
MAGNETIC BUTTON EFFECT
============================================ */
.magnetic-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.15s ease-out;
}
/* ============================================
PARALLAX UTILITIES
============================================ */
.parallax-container {
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-slow {
transform: translateZ(-1px) scale(2);
}
.parallax-slower {
transform: translateZ(-2px) scale(3);
}
.parallax-faster {
transform: translateZ(0.5px) scale(0.75);
}
/* ============================================
COUNTER ANIMATION
============================================ */
.counter {
display: inline-block;
font-variant-numeric: tabular-nums;
}
/* ============================================
PAGE TRANSITIONS
============================================ */
.page-transition-enter {
opacity: 0;
transform: translateY(20px);
}
.page-transition-enter-active {
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.page-transition-exit {
opacity: 1;
}
.page-transition-exit-active {
opacity: 0;
transition: opacity 0.3s ease-in;
}
/* ============================================
SKELETON LOADING
============================================ */
@keyframes skeleton-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skeleton {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* ============================================
BUTTON EFFECTS
============================================ */
.btn-shimmer {
position: relative;
overflow: hidden;
}
.btn-shimmer::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.6s ease;
}
.btn-shimmer:hover::after {
left: 100%;
}
/* Ripple effect */
.ripple {
position: relative;
overflow: hidden;
}
.ripple-effect {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
/* ============================================
SCROLL INDICATORS
============================================ */
@keyframes scroll-indicator {
0% {
opacity: 0;
transform: translateY(-100%);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(100%);
}
}
.scroll-indicator {
animation: scroll-indicator 2s ease-in-out infinite;
}
/* ============================================
ENTRANCE ANIMATIONS
============================================ */
@keyframes fadeIn {
from {
opacity: 0;
@@ -87,93 +645,63 @@
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
transform: translateY(-10px);
transform: scale(1.05);
}
}
@keyframes orb-drift {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.3;
70% {
transform: scale(0.9);
}
33% {
transform: translate(20px, -20px) scale(1.1);
opacity: 0.4;
100% {
opacity: 1;
transform: scale(1);
}
66% {
transform: translate(-10px, 10px) scale(0.95);
opacity: 0.25;
}
}
@keyframes orb-drift-2 {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.25;
}
33% {
transform: translate(-25px, 15px) scale(1.05);
opacity: 0.35;
}
66% {
transform: translate(15px, -10px) scale(0.98);
opacity: 0.2;
}
}
@keyframes orb-drift-3 {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.15;
}
50% {
transform: translate(-45%, -55%) scale(1.1);
opacity: 0.25;
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-float-delayed-1 {
animation: float 3s ease-in-out infinite;
animation-delay: 0.5s;
}
.animate-float-delayed-2 {
animation: float 3s ease-in-out infinite;
animation-delay: 1s;
}
.animate-float-delayed-3 {
animation: float 3s ease-in-out infinite;
animation-delay: 1.5s;
}
.animate-orb-1 {
animation: orb-drift 8s ease-in-out infinite;
}
.animate-orb-2 {
animation: orb-drift-2 10s ease-in-out infinite;
}
.animate-orb-3 {
animation: orb-drift-3 12s ease-in-out infinite;
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
animation: fadeIn 0.5s ease-out forwards;
}
.animate-zoom-in {
animation: zoomIn 0.3s ease-out forwards;
animation: zoomIn 0.4s ease-out forwards;
}
.animate-slide-left {
animation: slideInLeft 0.5s ease-out forwards;
}
.animate-slide-right {
animation: slideInRight 0.5s ease-out forwards;
}
.animate-bounce-in {
animation: bounceIn 0.6s ease-out forwards;
}
/* Stagger animations for grids */
@@ -190,16 +718,136 @@
.stagger-container > *:nth-child(6) { animation-delay: 250ms; }
.stagger-container > *:nth-child(7) { animation-delay: 300ms; }
.stagger-container > *:nth-child(8) { animation-delay: 350ms; }
.stagger-container > *:nth-child(9) { animation-delay: 400ms; }
.stagger-container > *:nth-child(10) { animation-delay: 450ms; }
.stagger-container > *:nth-child(11) { animation-delay: 500ms; }
.stagger-container > *:nth-child(12) { animation-delay: 550ms; }
/* Image hover zoom */
.img-hover {
@apply overflow-hidden;
/* ============================================
BENTO GRID UTILITIES
============================================ */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.img-hover img {
@apply transition-transform duration-300 ease-out;
.bento-item {
border-radius: var(--radius-2xl);
overflow: hidden;
}
.img-hover:hover img {
@apply scale-105;
.bento-1 { grid-column: span 1; }
.bento-2 { grid-column: span 2; }
.bento-3 { grid-column: span 3; }
.bento-4 { grid-column: span 4; }
.bento-5 { grid-column: span 5; }
.bento-6 { grid-column: span 6; }
.bento-7 { grid-column: span 7; }
.bento-8 { grid-column: span 8; }
.bento-9 { grid-column: span 9; }
.bento-10 { grid-column: span 10; }
.bento-11 { grid-column: span 11; }
.bento-12 { grid-column: span 12; }
.bento-row-2 { grid-row: span 2; }
.bento-row-3 { grid-row: span 3; }
/* ============================================
REDUCED MOTION SUPPORT
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-animate] {
opacity: 1;
transform: none;
}
[data-animate-stagger] > * {
opacity: 1;
transform: none;
}
}
/* ============================================
CUSTOM CURSOR (optional)
============================================ */
.cursor-grow {
cursor: pointer;
transition: transform 0.2s ease;
}
.cursor-grow:hover {
transform: scale(1.1);
}
/* ============================================
IMAGE REVEAL ON SCROLL
============================================ */
.img-reveal {
position: relative;
overflow: hidden;
}
.img-reveal::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: currentColor;
transform-origin: left;
transition: transform 0.6s ease-out;
}
.img-reveal.is-visible::before {
transform: scaleX(0);
}
.img-reveal img {
transform: scale(1.2);
transition: transform 0.6s ease-out;
}
.img-reveal.is-visible img {
transform: scale(1);
}
/* ============================================
NAVIGATION LINK STYLES
============================================ */
.nav-link {
position: relative;
padding: 0.25rem 0;
}
.nav-underline {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #2d6a4f, #e35c1c);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease-out;
}
.nav-link:hover .nav-underline {
transform: scaleX(1);
transform-origin: left;
}