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

Refactor: Update category structure, mega menu, footer, and remove unused pages

Browse Source 
- Move DURGO from ระบบน้ำ to อุปกรณ์ปรับอากาศ
- Add -category suffix to อุปกรณ์ดับเพลิง and ฉนวนหุ้มท่อ category pages
- Update Header mega menu with correct category slugs
- Fix Footer layout: split categories to 2 columns, remove quick links
- Delete unused pages: all-projects, join-us, services, product
- All product images fixed to 1:1 aspect ratio
This commit is contained in:
Kunthawat
2026-03-31 22:54:54 +07:00
parent dbbd9e22a2
commit 9cddd3da57
53 changed files with 3865 additions and 2888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.astro/settings.json
View File

@@ -1,5 +1,5 @@
{
"_variables": {
"lastUpdateCheck": 1773885716458
"lastUpdateCheck": 1774930788095
}
}

5
.gitignore vendored
View File

@@ -13,6 +13,11 @@ node_modules/
*.log
npm-debug.log*
# Environment
.env
.env.*
!.env.example
# OS files
.DS_Store
Thumbs.db

70
public/llms.txt Normal file
View File

@@ -0,0 +1,70 @@
# Deal Plus Tech - AI-Crawlable Documentation
## About
Deal Plus Tech (ดีล พลัส เทค) is a Thai industrial products company specializing in water pipe systems, fittings, and accessories. We serve contractors, factories, and individuals across Thailand.
## Products
### Pipe Systems
- **PPR Pipes** (ท่อ PPR) - Thai PPR, ท่อ PPR ตราช้าง
- **HDPE Pipes** (ท่อ HDPE)
- **UPVC Pipes** (ท่อ UPVC)
- **PVC Pipes & Fittings** (ท่อและข้อต่อ PVC)
- **Drainage Pipes** (ท่อระบายน้ำ 3 ชั้น ไซเลนท์)
### Pipe Fittings & Couplings
- **Pipe Coupling** - Mechanical couplings
- **Groove Coupling** (กรู๊ฟท่อ)
- **เม็กกรู๊ฟ คับปลิ้ง** (Mechanical Grub)
### Welding Equipment
- **Pipe Coupling Machine** (เครื่องเชื่อมท่อ)
- **HDPE Welding Machine** (เครื่องเชื่อม HDPE)
- **PPR Welding Machine** (เครื่องเชื่อม PPR)
### Water & Climate Control
- **Water Pumps** (ปั๊มน้ำ)
- **Valves** (วาล์ว)
- **Air Grilles** (กริลแอร์, หัวจ่ายแอร์)
- **DURGO Air Valve** (วาล์วเติมอากาศ)
- **Water Treatment** (ระบบกรองน้ำ)
### Insulation
- **Pipe Insulation** (ฉนวนหุ้มท่อ)
- **Thermobreak**
### Fence Systems
- **Vineman Fence** (ระบบรั้วไวน์แมน)
- **Angel Fence** (รั้วเทวดา)
### Other Products
- **Fire Fighting Equipment** (อุปกรณ์ดับเพลิง)
- **Realflex**
## Services
- Product consultation
- Free delivery in Bangkok Metropolitan Area
- Delivery to Chonburi and Rayong
## Contact
- **Phone**: 090-555-1415
- **Email**: dealplustech@gmail.com
- **Location**: Bangkok, Thailand
- **LINE**: @dealplustech
## Business Hours
- Monday - Saturday: 08:30 - 17:30
- Sunday: Closed
## Brand Names We Carry
- ท่อ PPR ตราช้าง (GMC)
- Thermobreak
- DURGO
- Dukelarrsen
- Poloplast
## Keywords (Thai SEO)
ท่อ PPR, ท่อ HDPE, ท่อ PVC, วาล์ว, ปั๊มน้ำ, รั้วตาข่าย, ฉนวนท่อ, เครื่องเชื่อมท่อ, ข้อต่อท่อ, ท่อระบายน้ำ, กริลแอร์, อุปกรณ์ดับเพลิง
## Pricing
Price lists available as PDF downloads on product pages.

11
public/robots.txt Normal file
View File

@@ -0,0 +1,11 @@
User-agent: *
Allow: /
# Disallow admin areas
Disallow: /admin/
# Sitemap location
Sitemap: https://dealplustech.co.th/sitemap-index.xml
# Crawl delay (optional, be nice to small servers)
Crawl-delay: 1

113
src/components/common/Footer.astro
View File

@@ -1,118 +1,83 @@
---
const currentYear = new Date().getFullYear();
const mainCategories = [
{ name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr' },
{ name: 'ท่อ HDPE', slug: '/ท่อhdpe' },
{ name: 'ท่อ UPVC', slug: '/ท่อ-upvc' },
{ name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc' },
{ name: 'ท่อไซเลอร์', slug: '/ท่อไซเลอร์' },
{ name: 'ท่อระบายน้ำ 3 ชั้น', slug: '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท' },
{ name: 'ท่อพีพีอาร์', slug: '/ท่อพีพีอาร์' },
{ name: 'เครื่องเชื่อมท่อ', slug: '/เครื่องเชื่อมท่อ-pipe-coupling-machine' },
{ name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
{ name: 'กรู๊ฟท่อ', slug: '/groove-coupling' },
{ name: 'Pipe Coupling', slug: '/pipe-coupling' },
{ name: 'วาล์ว', slug: '/วาล์ว-valve' },
{ name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
{ name: 'ปั๊มน้ำ', slug: '/water-pump' },
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
{ name: 'กริลแอร์', slug: '/grilles' },
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
{ name: 'Realflex', slug: '/realflex' },
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
{ name: 'ระบบกรองน้ำ', slug: '/water-treatment' },
{ name: 'ระบบน้ำ', slug: '/ระบบน้ำ' },
{ name: 'อุปกรณ์ปรับอากาศ', slug: '/อุปกรณ์ปรับอากาศ' },
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง-category' },
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-category' },
{ name: 'ระบบรั้ว', slug: '/ระบบรั้ว' },
{ name: 'รั้วเทวดา', slug: '/รั้วเทวดา' },
];
---
<footer id="footer" class="footer py-8 md:py-12">
<footer class="footer pt-16 pb-8">
<div class="container-custom">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
<!-- Company Info -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-12 mb-12">
<div>
<div class="flex items-center mb-4">
<img src="/images/logo/dealplustech-logo.png" alt="Deal Plus Tech" class="h-10 w-auto" />
<div class="flex items-center mb-6">
<img src="/images/logo/dealplustech-logo.png" alt="Deal Plus Tech" class="h-12 w-auto" width="200" height="56" loading="lazy" decoding="async" />
</div>
<p class="text-secondary-600 text-lg mb-6">
ผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
<p class="text-secondary-600 text-base mb-6 leading-relaxed">
ผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย คุณภาพสูง ราคาถูก
</p>
<div class="flex space-x-4">
<a href="https://www.facebook.com/Dealplustech/" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-green-100 flex items-center justify-center transition-colors">
<svg class="w-5 h-5 text-green-700" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
<div class="flex space-x-3">
<a href="https://www.facebook.com/Dealplustech/" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-primary-600 hover:bg-primary-700 flex items-center justify-center transition-all duration-200">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-green-100 flex items-center justify-center transition-colors">
<img src="/images/line-icon.png" alt="Line" class="w-6 h-6" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-lg bg-primary-600 hover:bg-primary-700 flex items-center justify-center transition-all duration-200">
<span class="text-white font-bold text-sm">LINE</span>
</a>
</div>
</div>
<!-- Main Categories Column 1 -->
<div>
<h3 class="text-lg font-bold mb-4">หมวดหมู่หลัก</h3>
<ul class="space-y-2">
{mainCategories.slice(0, 8).map(cat => (
<li><a href={cat.slug} class="text-secondary-600 hover:text-green-600 transition-colors text-lg">{cat.name}</a></li>
<h3 class="footer-title">หมวดหมู่สินค้า</h3>
<div class="grid grid-cols-2 gap-x-8 gap-y-3">
{mainCategories.map(cat => (
<a href={cat.slug} class="text-secondary-600 hover:text-primary-600 transition-colors text-base">{cat.name}</a>
))}
</ul>
</div>
<!-- Main Categories Column 2 -->
<div>
<h3 class="text-lg font-bold mb-4">&nbsp;</h3>
<ul class="space-y-2">
{mainCategories.slice(8, 16).map(cat => (
<li><a href={cat.slug} class="text-secondary-600 hover:text-green-600 transition-colors text-lg">{cat.name}</a></li>
))}
</ul>
</div>
<!-- Quick Links + Contact -->
<div>
<div class="mb-6">
<h3 class="text-lg font-bold mb-4">ลิงก์ด่วน</h3>
<ul class="space-y-2">
<li><a href="/about-us" class="text-secondary-600 hover:text-green-600 transition-colors text-lg">เกี่ยวกับเรา</a></li>
<li><a href="/all-products" class="text-secondary-600 hover:text-green-600 transition-colors text-lg">สินค้าทั้งหมด</a></li>
<li><a href="/portfolio" class="text-secondary-600 hover:text-green-600 transition-colors text-lg">ผลงาน</a></li>
<li><a href="/contact-us" class="text-secondary-600 hover:text-green-600 transition-colors text-lg">ติดต่อเรา</a></li>
</ul>
</div>
</div>
<h3 class="text-lg font-bold mb-4">ติดต่อเรา</h3>
<ul class="space-y-3">
<div>
<h3 class="footer-title">ติดต่อเรา</h3>
<ul class="space-y-4">
<li class="flex items-start space-x-3">
<svg class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-primary-600 mt-0.5 flex-shrink-0" 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 class="text-secondary-600 text-lg">090-555-1415</span>
<div>
<span class="text-secondary-700 text-base block font-medium">090-555-1415</span>
<span class="text-secondary-500 text-sm">วันจันทร์-เสาร์ 08:30-17:30</span>
</div>
</li>
<li class="flex items-start space-x-3">
<svg class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-primary-600 mt-0.5 flex-shrink-0" 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>
<span class="text-secondary-600 text-lg">dealplustech@gmail.com</span>
<span class="text-secondary-700 text-base">dealplustech@gmail.com</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-primary-600 mt-0.5 flex-shrink-0" 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 class="text-secondary-600 text-lg">กรุงเทพมหานคร และปริมณฑล</span>
<span class="text-secondary-700 text-base">9/69 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค กรุงเทพมหานคร 10160</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-200 pt-6">
<div class="border-t border-secondary-200 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p class="text-secondary-500 text-sm sm:text-lg">
<p class="text-secondary-500 text-sm">
&copy; {currentYear} Deal Plus Tech. สงวนลิขสิทธิ์
</p>
<div class="flex flex-wrap justify-center gap-3 sm:gap-6">
<a href="/privacy-policy" class="text-secondary-500 hover:text-green-600 transition-colors text-sm sm:text-lg">นโยบายความเป็นส่วนตัว</a>
<a href="/terms-and-conditions" class="text-secondary-500 hover:text-green-600 transition-colors text-sm sm:text-lg">ข้อกำหนดการใช้งาน</a>
<button onclick="openConsentPreferences()" class="text-secondary-500 hover:text-green-600 transition-colors text-sm sm:text-lg">
<div class="flex flex-wrap justify-center gap-6">
<a href="/privacy-policy" class="text-secondary-500 hover:text-primary-600 transition-colors text-sm">นโยบายความเป็นส่วนตัว</a>
<a href="/terms-and-conditions" class="text-secondary-500 hover:text-primary-600 transition-colors text-sm">ข้อกำหนดการใช้งาน</a>
<button onclick="openConsentPreferences()" class="text-secondary-500 hover:text-primary-600 transition-colors text-sm">
การตั้งค่าคุกกี้
</button>
</div>

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

@@ -26,13 +26,40 @@ const categories = [
{ name: 'เม็กกรู๊ฟ', slug: '/เม็กกรู๊ฟ-คับปลิ้ง' },
]
},
{ name: 'วาล์ว | Valve', slug: '/วาล์ว-valve' },
{ name: 'ปั๊มน้ำ', slug: '/water-pump' },
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
{ name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
{ name: 'Realflex', slug: '/realflex' },
{ name: 'ระบบกรองน้ำ', slug: '/water-treatment' },
{
name: 'ระบบน้ำ',
slug: '/ระบบน้ำ',
subcategories: [
{ name: 'วาล์ว', slug: '/วาล์ว-valve' },
{ name: 'ปั๊มน้ำ', slug: '/water-pump' },
{ name: 'ระบบกรองน้ำ', slug: '/water-treatment' },
]
},
{
name: 'อุปกรณ์ปรับอากาศ',
slug: '/อุปกรณ์ปรับอากาศ',
subcategories: [
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
{ name: 'กริลแอร์', slug: '/grilles' },
{ name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
]
},
{
name: 'อุปกรณ์ดับเพลิง',
slug: '/อุปกรณ์ดับเพลิง-category',
subcategories: [
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
{ name: 'Realflex', slug: '/realflex' },
]
},
{
name: 'ฉนวนหุ้มท่อ',
slug: '/ฉนวนหุ้มท่อ-category',
subcategories: [
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
]
},
{
name: 'ระบบรั้ว',
slug: '/ระบบรั้ว',
@@ -41,45 +68,39 @@ const categories = [
{ name: 'ระบบรั้วไวน์แมน', slug: '/ระบบรั้วไวน์แมน-vineman-2' },
]
},
{ name: 'กริลแอร์', slug: '/grilles' },
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
];
---
<header id="header" class="navbar">
<div class="container-custom">
<div class="flex items-center justify-between h-20">
<!-- Logo (No Text) -->
<a href="/" class="flex items-center group">
<img src="/images/logo/dealplustech-logo.png" alt="Deal Plus Tech" class="h-10 sm:h-14 w-auto transition-transform group-hover:scale-105" />
<img src="/images/logo/dealplustech-logo.png" alt="Deal Plus Tech" class="h-10 sm:h-14 w-auto transition-transform duration-300 group-hover:scale-105" width="200" height="56" loading="eager" fetchpriority="high" decoding="sync" />
</a>
<!-- Desktop Navigation -->
<nav class="hidden lg:flex items-center space-x-1">
<a href="/" class="px-4 py-2 text-lg font-medium text-secondary-700 hover:text-green-600 transition-colors">หน้าแรก</a>
<a href="/about-us" class="px-4 py-2 text-lg font-medium text-secondary-700 hover:text-green-600 transition-colors">เกี่ยวกับเรา</a>
<a href="/" class="nav-link">หน้าแรก</a>
<a href="/about-us" class="nav-link">เกี่ยวกับเรา</a>
<!-- Products Mega Menu -->
<div class="relative group">
<button class="px-4 py-2 text-lg font-medium text-secondary-700 group-hover:text-green-600 transition-colors flex items-center space-x-1">
<button class="nav-link flex items-center space-x-1">
<span>สินค้า</span>
<svg class="w-4 h-4 transition-transform 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-0 mt-0 w-[700px] max-w-[90vw] bg-white rounded-xl shadow-2xl border border-green-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2 z-50">
<div class="grid grid-cols-3 gap-6 p-6">
<div class="absolute top-full left-0 mt-0 w-[720px] max-w-[90vw] bg-white rounded-2xl shadow-2xl border border-secondary-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2 z-50">
<div class="grid grid-cols-4 gap-4 p-6">
{categories.map(cat => (
<div class="space-y-3">
<a href={cat.slug} class="block text-lg font-bold text-green-700 hover:text-green-600 mb-2">
<a href={cat.slug} class="block text-sm font-bold text-secondary-800 hover:text-accent-500 transition-colors">
{cat.name}
</a>
{cat.subcategories && (
<ul class="space-y-2">
{cat.subcategories.map(sub => (
<li>
<a href={sub.slug} class="block text-lg text-secondary-600 hover:text-green-600 transition-colors">
<a href={sub.slug} class="block text-sm text-secondary-500 hover:text-accent-500 transition-colors">
{sub.name}
</a>
</li>
@@ -89,16 +110,20 @@ const categories = [
</div>
))}
</div>
<div class="border-t border-secondary-100 px-6 py-4 bg-secondary-50 rounded-b-2xl">
<a href="/all-products" class="text-sm font-semibold text-accent-500 hover:text-accent-600 transition-colors">
ดูสินค้าทั้งหมด →
</a>
</div>
</div>
</div>
<a href="/portfolio" class="px-4 py-2 text-lg font-medium text-secondary-700 hover:text-green-600 transition-colors">ผลงาน</a>
<a href="/contact-us" class="px-4 py-2 text-lg font-medium text-secondary-700 hover:text-green-600 transition-colors">ติดต่อเรา</a>
<a href="/portfolio" class="nav-link">ผลงาน</a>
<a href="/contact-us" class="nav-link">ติดต่อเรา</a>
</nav>
<!-- Contact Button -->
<div class="hidden lg:flex items-center space-x-4">
<a href="tel:0905551415" class="flex items-center space-x-2 text-green-600 hover:text-green-700 transition-colors">
<a href="tel:0905551415" class="flex items-center space-x-2 text-secondary-700 hover:text-accent-500 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>
@@ -106,32 +131,83 @@ const categories = [
</a>
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="lg:hidden p-2 rounded-lg hover:bg-green-50 transition-colors">
<button id="mobile-menu-btn" class="lg:hidden p-2 rounded-lg hover:bg-secondary-100 transition-colors">
<svg class="w-6 h-6 text-secondary-700" 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>
<!-- Mobile Menu -->
<div id="mobile-menu" class="lg:hidden hidden pb-4">
<nav class="flex flex-col space-y-2">
<a href="/" class="px-4 py-3 text-lg font-medium text-secondary-700 hover:bg-green-50 hover:text-green-600 rounded-lg transition-colors">หน้าแรก</a>
<a href="/about-us" class="px-4 py-3 text-lg font-medium text-secondary-700 hover:bg-green-50 hover:text-green-600 rounded-lg transition-colors">เกี่ยวกับเรา</a>
<a href="/ท่อพีพีอาร์" class="px-4 py-3 text-lg font-medium text-secondary-700 hover:bg-green-50 hover:text-green-600 rounded-lg transition-colors">สินค้าทั้งหมด</a>
<a href="/portfolio" class="px-4 py-3 text-lg font-medium text-secondary-700 hover:bg-green-50 hover:text-green-600 rounded-lg transition-colors">ผลงาน</a>
<a href="/contact-us" class="px-4 py-3 text-lg font-medium text-secondary-700 hover:bg-green-50 hover:text-green-600 rounded-lg transition-colors">ติดต่อเรา</a>
<a href="/" class="mobile-nav-link">หน้าแรก</a>
<a href="/about-us" class="mobile-nav-link">เกี่ยวกับเรา</a>
<a href="/ท่อพีพีอาร์" class="mobile-nav-link">สินค้าทั้งหมด</a>
<a href="/portfolio" class="mobile-nav-link">ผลงาน</a>
<a href="/contact-us" class="mobile-nav-link">ติดต่อเรา</a>
</nav>
</div>
</div>
</header>
<style>
.nav-link {
@apply px-4 py-2 text-base font-medium text-secondary-700 hover:text-accent-500 transition-all duration-200 relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
@apply bg-accent-500;
transition: all 0.3s ease-out;
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 60%;
}
.mobile-nav-link {
@apply px-4 py-3 text-base font-medium text-secondary-700 hover:bg-secondary-100 hover:text-accent-500 rounded-lg transition-colors;
}
</style>
<script>
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const header = document.getElementById('header');
menuBtn?.addEventListener('click', () => {
mobileMenu?.classList.toggle('hidden');
});
let lastScroll = 0;
const handleScroll = () => {
const currentScroll = window.scrollY;
if (currentScroll > 50) {
header?.classList.add('navbar-scrolled');
} else {
header?.classList.remove('navbar-scrolled');
}
lastScroll = currentScroll;
};
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(() => {
handleScroll();
ticking = false;
});
ticking = true;
}
}, { passive: true });
handleScroll();
</script>

175
src/layouts/BaseLayout.astro
View File

@@ -42,6 +42,73 @@ const siteUrl = 'https://dealplustech.co.th';
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, siteUrl)} />
<!-- Structured Data - Organization -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Deal Plus Tech",
"alternateName": "ดีล พลัส เทค",
"url": "https://dealplustech.co.th",
"logo": "https://dealplustech.co.th/images/logo/dealplustech-logo.png",
"description": "ผู้เชี่ยวชาญระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย คุณภาพสูง ราคาถูก",
"address": {
"@type": "PostalAddress",
"streetAddress": "9/69 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค",
"addressLocality": "กรุงเทพมหานคร",
"postalCode": "10160",
"addressCountry": "TH"
},
"telephone": "+6690-555-1415",
"email": "dealplustech@gmail.com",
"sameAs": [
"https://www.facebook.com/Dealplustech/"
]
}
</script>
<!-- Structured Data - WebSite with Search -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Deal Plus Tech",
"url": "https://dealplustech.co.th",
"potentialAction": {
"@type": "SearchAction",
"target": "https://dealplustech.co.th/all-products?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- Structured Data - LocalBusiness -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Deal Plus Tech",
"image": "https://dealplustech.co.th/images/logo/dealplustech-logo.png",
"priceRange": "฿฿",
"address": {
"@type": "PostalAddress",
"streetAddress": "9/69 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค",
"addressLocality": "กรุงเทพมหานคร",
"postalCode": "10160",
"addressCountry": "TH"
},
"telephone": "+6690-555-1415",
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
"opens": "08:30",
"closes": "17:30"
}
]
}
</script>
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -221,5 +288,113 @@ const siteUrl = 'https://dealplustech.co.th';
};
})();
</script>
<!-- Enhanced Scroll Animation Initialization -->
<script>
// Intersection Observer for scroll animations
(function() {
// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
// If user prefers reduced motion, show all elements immediately
document.querySelectorAll('.stagger-item, .stagger-from-left, .stagger-from-right, .stagger-scale, .fade-reveal, .img-reveal, .animate-on-scroll').forEach(el => {
el.classList.add('revealed', 'visible');
});
return;
}
const observerOptions = {
root: null,
rootMargin: '0px 0px -50px 0px',
threshold: 0.1
};
const animationObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed', 'visible');
// Unobserve after animation to save resources
animationObserver.unobserve(entry.target);
}
});
}, observerOptions);
// Observe all animated elements
const animatedSelectors = [
'.stagger-item',
'.stagger-from-left',
'.stagger-from-right',
'.stagger-scale',
'.fade-reveal',
'.img-reveal',
'.animate-on-scroll'
];
animatedSelectors.forEach(selector => {
document.querySelectorAll(selector).forEach(el => {
animationObserver.observe(el);
});
});
// Image lazy load with skeleton
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.dataset.src;
if (src) {
img.src = src;
img.removeAttribute('data-src');
img.onload = () => {
img.classList.remove('skeleton-image');
img.classList.add('loaded');
};
img.onerror = () => {
img.classList.remove('skeleton-image');
img.classList.add('error');
};
}
imageObserver.unobserve(img);
}
});
}, { rootMargin: '50px' });
document.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});
// Stagger animation for children within containers
document.querySelectorAll('.stagger-container').forEach(container => {
const children = container.querySelectorAll('.stagger-item');
children.forEach((child, index) => {
if (!child.hasAttribute('data-delay')) {
child.setAttribute('data-delay', String((index % 8) + 1));
}
});
});
})();
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId && targetId !== '#') {
const target = document.querySelector(targetId);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
});
</script>
</body>
</html>

148
src/pages/about-us/index.astro
View File

@@ -7,68 +7,136 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="เกี่ยวกับเรา | About US" description="เกี่ยวกับเรา บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบน้ำ ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="about-content" class="section">
<main class="bg-white min-h-screen">
<!-- Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<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 text-white mb-4">บริษัท ดีล พลัส เทค จำกัด</h1>
<p class="text-lg sm:text-xl text-white/80 max-w-2xl">ผู้เชี่ยวชาญด้านระบบน้ำ คุณภาพสูง ราคาโรงงาน บริการจัดส่งฟรี กรุงเทพฯ และปริมณฑล</p>
</div>
</section>
<!-- About Content -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">เกี่ยวกับเรา</h1>
<div class="card p-8 md:p-12 bg-white">
<div class="card-glass p-8 md:p-12">
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
<strong>บริษัท ดีล พลัส เทค จำกัด</strong> เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่าย ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
<strong>บริษัท ดีล พลัส เทค จำกัด</strong> เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่าย ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
บริษัท ดีล พลัส เทค จำกัด ได้ก่อตั้งเพื่อดำเนินธุรกิจจัดจำหน่าย ท่อน้ำ อุปกรณ์ท่อน้ำ ในระบบประปาทั่วไป (ระบบน้ำดี น้ำเสีย ระบบรับแรงดัน ระบบระบายน้ำ) ระบบประปาอุตสาหกรรมเคมี ระบบประปาเกษตร ระบบการชลประทาน โดยทางบริษัทได้จัดจำหน่ายสินค้าที่ได้รับความนิยมอย่างแพร่หลาย สินค้าที่มีนวัตกรรมใหม่ๆ คุณภาพสูง มีมาตรฐานเป็นที่ยอมรับ อาทิเช่น
บริษัท ดีล พลัส เทค จำกัด ได้ก่อตั้งเพื่อดำเนินธุรกิจจัดจำหน่าย ท่อน้ำ อุปกรณ์ท่อน้ำ ในระบบประปาทั่วไป (ระบบน้ำดี น้ำเสีย ระบบรับแรงดัน ระบบระบายน้ำ) ระบบประปาอุตสาหกรรมเคมี ระบบประปาเกษตร ระบบการชลประทาน โดยทางบริษัทได้จัดจำหน่ายสินค้าที่ได้รับความนิยมอย่างแพร่หลาย สินค้าที่มีนวัตกรรมใหม่ๆ คุณภาพสูง มีมาตรฐานเป็นที่ยอมรับ
</p>
<ul class="list-disc pl-6 mb-6 space-y-2 text-lg text-secondary-700">
<li>ท่อ PP-R (Polypropylene copolymer random),เครื่องเชื่อมท่อ PP-R</li>
<h2 class="text-xl sm:text-xl font-bold text-secondary-900 mb-4 mt-10">สินค้าหลักของเรา</h2>
<ul class="list-disc pl-6 mb-6 space-y-2 text-secondary-700">
<li>ท่อ PP-R (Polypropylene copolymer random), เครื่องเชื่อมท่อ PP-R</li>
<li>ท่อดับเพลิง และ Groove Coupling</li>
<li>ท่อ Syler</li>
<li>Water Pump</li>
<li>แผ่นความร้อนและเครื่องเชื่อมท่อ HDPE</li>
<li>งานระบบ งานแอร์ ฉนวน Insulation</li>
<li>ระบบ Water Treatment, UV, RO, UF Water, DI&EDI Water, Softener, Sand Filter, Carbon Filter</li>
<li>Pipe Coupling อุปกรณ์ซ่อมท่อที่ชำรุดหรือท่อรั่ว</li>
</ul>
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
<strong>งานระบบ งานแอร์ แอร์ งานท่อระบบ หัวจ่ายแอร์ ฉนวน Insulation</strong><br/>
ระบบ Water Treatment, UV, RO, UF Water, DI&EDI Water, Softener, Sand Filter, Carbon Filter
</p>
<h2 class="text-xl sm:text-xl font-bold text-secondary-900 mb-4 mt-10">ทำไมต้องเลือกเรา</h2>
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
<strong>Pipe Coupling</strong> อุปกรณ์ซ่อมท่อที่ชำรุดหรือท่อรั่ว อุปกรณ์ยึดท่อให้เชื่อมต่อกัน โดยไม่ต้องเชื่อมท่อ
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
พร้อมกันนี้ทางบริษัทได้จัดจำหน่ายอุปกรณ์เกี่ยวกับระบบประปาไม่ว่าจะเป็นข้อต่อต่างๆ และ อุปกรณ์อื่ๆ
</p>
<h2 class="text-2xl font-bold text-secondary-900 mb-4">จัดจำหน่าย:</h2>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
ท่อ PPR ตราช้าง, ท่อพีพีอาร์, ท่อ PPR, ท่อ HDPE, Thai PPR, รั้วตาข่าย
</p>
<h2 class="text-2xl font-bold text-secondary-900 mb-4 mt-8">Contact Details</h2>
<div class="bg-green-50 p-6 rounded-xl">
<p class="text-lg text-secondary-700 leading-relaxed mb-2">
<strong>บริษัท ดีล พลัส เทค จำกัด</strong><br/>
9/70 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค กทม. 10160
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-2">
ส่งสินค้าฟรี กรุงเทพมหานคร ปริมณฑล
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-2">
<strong>โทร:</strong> 090-555-1415
</p>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>อีเมล:</strong> dealplustech@gmail.com
</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" 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>
</div>
<div>
<h3 class="font-semibold text-secondary-900">คุณภาพสูง</h3>
<p class="text-secondary-600 text-sm">สินค้ามาตรฐานอุตสาหกรรม</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 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>
<div>
<h3 class="font-semibold text-secondary-900">ราคาโรงงาน</h3>
<p class="text-secondary-600 text-sm">คุ้มค่าต่อการลงทุน</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-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>
<div>
<h3 class="font-semibold text-secondary-900">จัดส่งรวดเร็ว</h3>
<p class="text-secondary-600 text-sm">ส่งฟรี กทม. ปริมณฑล</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<div>
<h3 class="font-semibold text-secondary-900">บริการดี</h3>
<p class="text-secondary-600 text-sm">ให้คำปรึกษาฟรี</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="grid grid-cols-3 gap-8 text-center">
<div>
<div class="text-4xl sm:text-5xl font-bold text-primary-600 mb-2">10+</div>
<div class="text-secondary-600">ปีประสบการณ์</div>
</div>
<div>
<div class="text-4xl sm:text-5xl font-bold text-primary-600 mb-2">1000+</div>
<div class="text-secondary-600">โปรเจคต์สำเร็จ</div>
</div>
<div>
<div class="text-4xl sm:text-5xl font-bold text-primary-600 mb-2">500+</div>
<div class="text-secondary-600">สินค้าในคลัง</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-white 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="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
</div>
</div>
</section>
</main>
<Footer slot="footer" />

205
src/pages/all-products/index.astro
View File

@@ -4,25 +4,25 @@ import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
const productImages: Record<string, string> = {
'/ท่อ-ppr-thai-ppr': '/images/products-cropped/foot-ppr1.jpg',
'/ท่อพีพีอาร์ตราช้าง': '/images/products-cropped/ppr-pipe_000C.jpg',
'/pp-r-pp-rct-poloplast': '/images/products-cropped/ppr_000C.jpg',
'/ท่อhdpe': '/images/products-cropped/hdpe001.jpg',
'/ท่อ-ppr-thai-ppr': '/images/products-cropped/ppr-pipe_000C.jpg',
'/ท่อพีพีอาร์ตราช้าง': '/images/products-cropped/ppr-scg.jpg',
'/pp-r-pp-rct-poloplast': '/images/poloplast/POLOPLAST_001.png',
'/ท่อhdpe': '/images/products-cropped/hdpe001.png',
'/ท่อ-upvc': '/images/products-cropped/upvc-pipe_000C.jpg',
'/ท่อไซเลอร์': '/images/products-cropped/SYLER01.jpg',
'/ท่อและข้อต่อpvc': '/images/products-cropped/pvc-pipe_000C.jpg',
'/ท่อไซเลอร์': '/images/products-cropped/syler-pipe-cold-water.jpg',
'/ท่อและข้อต่อpvc': '/images/products-cropped/pvc-standard-01.jpg',
'/ท่อระบายน้ำ-3-ชั้น-ไซเลนท': '/images/products-cropped/XYLENT_001.png',
'/ท่อพีพีอาร์': '/images/products-cropped/foot-ppr1.jpg',
'/ท่อพีพีอาร์': '/images/products-cropped/ppr-pipe_000C.jpg',
'/เครื่องเชื่อม-hdpe': '/images/HDPE-welding-crop.jpg',
'/เครื่องเชื่อมท่อพีพีอา': '/images/products-cropped/pipe-coupling-machine_000.jpg',
'/เครื่องเชื่อมท่อพีพีอา': '/images/products-misc/ppr-welding-machine-main.jpg',
'/groove-coupling': '/images/products-cropped/mech_000C.jpg',
'/pipe-coupling': '/images/pipe-coupling/BG-SMC02.png',
'/dukelarrsen': '/images/dukelarrsen/dukelarrsen-43.jpg',
'/เม็กกรู๊ฟ-คับปลิ้ง': '/images/products-cropped/mech_000C.jpg',
'/เม็กกรู๊ฟ-คับปลิ้ง': '/images/products-misc/MECH_001.jpg',
'/วาล์ว-valve': '/images/products-cropped/valve_000C.jpg',
'/durgo-avvs': '/images/products-cropped/durgo_000C.jpg',
'/water-pump': '/images/products-cropped/water-pump_000C.jpg',
'/หัวจ่ายแอร์-ball-jet': '/images/products-cropped/Eye-Ball.jpg',
'/หัวจ่ายแอร์-ball-jet': '/images/products-raw/ball-jet/main-ball-jet.jpg',
'/grilles': '/images/products-cropped/grilles_000C.jpg',
'/อุปกรณ์ดับเพลิง': '/images/products-cropped/extinguishers_000C.jpg',
'/ฉนวนหุ้มท่อ-pipe-insulation': '/images/thermobreak/thermobreak-solarblock.png',
@@ -30,17 +30,16 @@ const productImages: Record<string, string> = {
'/realflex': '/images/products-cropped/realflex_000C.jpg',
'/water-treatment': '/images/products-cropped/water-treatment_000C.jpg',
'/ระบบรั้ว': '/images/products-cropped/vineman_000C.jpg',
'/ระบบรั้วไวน์แมน-vineman-2': '/images/products-cropped/vineman_000C.jpg',
'/รั้วเทวดา': '/images/products-cropped/Banner-TDV2.jpg',
'/ระบบรั้วไวน์แมน-vineman-2': '/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg',
'/รั้วเทวดา': '/images/products-raw/tevada/TEVADA_001-987x1024.png',
};
const productCategories = [
{
name: 'ท่อ',
slug: '/ท่อพีพีอาร์',
image: '/images/products-cropped/foot-ppr1.jpg',
name: 'ท่อพีพีอาร์',
image: '/images/products-cropped/ppr-pipe_000C.jpg',
products: [
{ name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr' },
{ name: 'ไทยพีพีอาร์', slug: '/ท่อ-ppr-thai-ppr' },
{ name: 'ท่อ PPR ตราช้าง', slug: '/ท่อพีพีอาร์ตราช้าง' },
{ name: 'ท่อ PP-R Poloplast', slug: '/pp-r-pp-rct-poloplast' },
{ name: 'ท่อ HDPE', slug: '/ท่อhdpe' },
@@ -48,13 +47,11 @@ const productCategories = [
{ name: 'ท่อไซเลอร์', slug: '/ท่อไซเลอร์' },
{ name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc' },
{ name: 'ท่อระบายน้ำ 3 ชั้น', slug: '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท' },
{ name: 'ท่อพีพีอาร์', slug: '/ท่อพีพีอาร์' },
]
},
{
name: 'เครื่องเชื่อมท่อ',
slug: '/เครื่องเชื่อมท่อ-pipe-coupling-machine',
image: '/images/products-cropped/pipe-coupling-machine_000.jpg',
image: '/images/HDPE-welding-crop.jpg',
products: [
{ name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
{ name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' },
@@ -65,84 +62,43 @@ const productCategories = [
]
},
{
name: 'แฮงเกอร์ แคล้ม โบลท์',
slug: '/แฮงเกอร์-แคล้ม-โบลท์-แหว',
image: '/images/products-cropped/Hanger-Clamp-Bolt_000.jpg',
products: [
{ name: 'สปริทริงแฮงเกอร์', slug: '/สปริทริงแฮงเกอร์-sr19-adjustable-split-ring-hanger' },
{ name: 'เควิสแฮงเกอร์', slug: '/เควิสแฮงเกอร์' },
{ name: 'แคล้มประกับ', slug: '/แคล้มประกับ-ชุบรุ้ง-ชุบ' },
{ name: 'แคล้มฟันจระเข้', slug: '/แคล้มฟันจระเข้-beam-clamp' },
{ name: 'แคล้มหยดน้ำ', slug: '/แคล้มหยดน้ำ-adjustable-band-hanger' },
{ name: 'แคล้มเลเวล', slug: '/แคล้มเลเวล-level-clamp' },
{ name: 'ยูโบลท์', slug: '/ยูโบลท์-u-bolt' },
{ name: 'ยูโบลท์ ประกับ', slug: '/ยูโบลท์-ประกับ-u-bolt-clamp' },
{ name: 'ยูโบลท์เหล็กแผ่น', slug: '/ยูโบลท์เหล็กแผ่น-ยูแบน-strap' },
{ name: 'เจโบลท์ แอลโบลท์', slug: '/เจโบลท์-แอลโบลท์-j-bolt-l-bolt' },
{ name: 'น็อต แหวน สกรู', slug: '/น็อต-แหวน-สกรู-hex-nut-flat-washer-hexagon-head-screw' },
{ name: 'พุกต่างๆ', slug: '/พุกต่างๆ' },
{ name: 'พุกเหล็ก', slug: '/พุกเหล็ก-sleeve-anchor-bolt' },
{ name: 'สตัดเกลียวตลอด', slug: '/สตัดเกลียวตลอด-เหล็ก-threaded-rod' },
]
},
{
name: 'วาล์ว | Valve',
slug: '/วาล์ว-valve',
image: '/images/products-cropped/valve_000C.jpg',
products: [
{ name: 'วาล์ว', slug: '/วาล์ว-valve' },
{ name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
]
},
{
name: 'ปั๊มน้ำ',
slug: '/water-pump',
name: 'ระบบน้ำ',
image: '/images/products-cropped/water-pump_000C.jpg',
products: [
{ name: 'วาล์ว', slug: '/วาล์ว-valve' },
{ name: 'ปั๊มน้ำ', slug: '/water-pump' },
]
},
{
name: 'อุปกรณ์ปรับอากาศ',
slug: '/หัวจ่ายแอร์-ball-jet',
image: '/images/products-cropped/Eye-Ball.jpg',
products: [
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
{ name: 'กริลแอร์', slug: '/grilles' },
]
},
{
name: 'อุปกรณ์ดับเพลิง',
slug: '/อุปกรณ์ดับเพลิง',
image: '/images/products-cropped/extinguishers_000C.jpg',
products: [
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
]
},
{
name: 'ฉนวนหุ้มท่อ',
slug: '/ฉนวนหุ้มท่อ-pipe-insulation',
image: '/images/thermobreak/thermobreak-solarblock.png',
products: [
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
{ name: 'Realflex', slug: '/realflex' },
]
},
{
name: 'ระบบกรองน้ำ',
slug: '/water-treatment',
image: '/images/products-cropped/water-treatment_000C.jpg',
products: [
{ name: 'ระบบกรองน้ำ', slug: '/water-treatment' },
]
},
{
name: 'รั้วและระบบรั้ว',
slug: '/ระบบรั้ว',
image: '/images/products-cropped/vineman_000C.jpg',
name: 'อุปกรณ์ปรับอากาศ',
image: '/images/products-raw/ball-jet/main-ball-jet.jpg',
products: [
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet' },
{ name: 'กริลแอร์', slug: '/grilles' },
{ name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs' },
]
},
{
name: 'อุปกรณ์ดับเพลิง',
image: '/images/products-cropped/extinguishers_000C.jpg',
products: [
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง' },
{ name: 'Realflex', slug: '/realflex' },
]
},
{
name: 'ฉนวนหุ้มท่อ',
image: '/images/thermobreak/thermobreak-solarblock.png',
products: [
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation' },
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak' },
]
},
{
name: 'ระบบรั้ว',
image: '/images/products-raw/tevada/TEVADA_001-987x1024.png',
products: [
{ name: 'ระบบรั้ว', slug: '/ระบบรั้ว' },
{ name: 'ระบบรั้วไวน์แมน', slug: '/ระบบรั้วไวน์แมน-vineman-2' },
{ name: 'รั้วเทวดา', slug: '/รั้วเทวดา' },
]
@@ -153,28 +109,37 @@ const productCategories = [
<BaseLayout title="สินค้าทั้งหมด | All Products" description="สินค้าทั้งหมด ของ บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบน้ำ">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="all-products" class="section">
<main class="bg-white min-h-screen">
<!-- Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="text-center mb-12">
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4">สินค้าทั้งหมด</h1>
<p class="text-lg sm:text-lg text-secondary-600 max-w-2xl mx-auto">
รวมสินค้าคุณภาพสูงของเราทั้งหมด จำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย และอุปกรณ์ระบบน้ำครบวงจร
</p>
</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 text-white mb-4">สินค้าทั้งหมด</h1>
<p class="text-lg sm:text-xl text-white/80 max-w-2xl">
รวมสินค้าคุณภาพสูงของเราทั้งหมด จำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย และอุปกรณ์ระบบน้ำครบวงจร
</p>
</div>
</section>
<!-- Product Categories -->
<section class="section">
<div class="container-custom">
<div class="space-y-8">
{productCategories.map(category => (
<div class="border border-gray-200 rounded-2xl overflow-hidden">
<div class="bg-green-600 px-6 py-4">
<h3 class="text-xl font-bold text-white">{category.name}</h3>
<div class="card-glass overflow-hidden">
<div class="bg-primary-600 px-6 py-4">
<h2 class="text-xl font-bold text-white">{category.name}</h2>
</div>
<div class="p-6 bg-white">
<div class="p-6">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{category.products.map(product => (
<a href={product.slug} class="block p-4 rounded-xl border border-gray-200 hover:border-green-500 hover:bg-green-50 transition-all text-center">
<img src={productImages[product.slug] || category.image} alt={product.name} class="w-full h-24 object-cover rounded-lg mb-3" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<span class="text-sm sm:text-lg text-secondary-700 font-medium">{product.name}</span>
<a href={product.slug} class="block p-4 rounded-xl bg-white border border-gray-200 hover:border-primary-500 hover:bg-primary-50 transition-all text-center">
<div class="w-full aspect-square overflow-hidden rounded-lg mb-3 bg-gray-100">
<img src={productImages[product.slug] || category.image} alt={product.name} class="w-full h-full object-cover" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<span class="text-sm sm:text-base text-secondary-700 font-medium">{product.name}</span>
</a>
))}
</div>
@@ -182,19 +147,27 @@ const productCategories = [
</div>
))}
</div>
</div>
</section>
<div class="mt-12 text-center">
<p class="text-lg text-secondary-600 mb-6">ติดต่อเราเพื่อรับคำแนะนำและราคาพิเศษ</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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>
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5" width="20" height="20" loading="lazy" decoding="async" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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>

26
src/pages/all-projects/index.astro
View File

@@ -1,26 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="all-projects" description="all-projects">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">all-projects</h1>
<div class="card p-8 md:p-12 bg-white">
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">all-projects - Deal Plus Tech บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่าย ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก ปรึกษา Dealplustech ได้ตลอดเวลาทำการ เกี่ยวกับบริษัท Thermobreak ® – ฉนวนกันความร้อน ท่อSYLER‬ เป็นท่อเหล็กกล้าClass M ชุบสังกะสี Waterpump‬ ‪‎Grundfos‬ จำหน่ายและติดตั้งชุดปั้มราคาโรงงาน Grooved Coupling‪ ติดตั้งง่าย สะดวกรวดเร็ว ข้อต่อท่อ ข้อต่อซ่อมท่อแตก ซ่อมท่อร้าว และซ่อมท่อรั่วซึม Watertreatment‬ ระบบผลิตน้ำประปาและระบบผลิตน้ำบริสุทธิ์ จำหน่ายเครื่องเชื่อมHDPE ราค</p>
</div>
</div>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

31
src/pages/api/consent/index.ts Normal file
View File

@@ -0,0 +1,31 @@
import type { APIRoute } from 'astro';
export const POST: APIRoute = async ({ request }) => {
const consentData = await request.json();
const record = {
id: crypto.randomUUID(),
essential: consentData.essential ?? true,
analytics: consentData.analytics ?? false,
marketing: consentData.marketing ?? false,
timestamp: consentData.timestamp || Date.now(),
policyVersion: consentData.policyVersion || '1.0',
ip: request.headers.get('x-forwarded-for') || 'unknown',
userAgent: request.headers.get('user-agent') || 'unknown',
createdAt: new Date().toISOString()
};
console.log('[Consent Log]', JSON.stringify(record));
return new Response(JSON.stringify({ success: true, record }), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
};
export const GET: APIRoute = () => {
return new Response(JSON.stringify({ error: 'Method not allowed' }), {
status: 405,
headers: { 'Content-Type': 'application/json', 'Allow': 'POST' },
});
};

171
src/pages/contact-us/index.astro
View File

@@ -7,103 +7,114 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ติดต่อเรา" description="ติดต่อเรา บริษัท ดีล พลัส เทค จำกัด โทร 090-555-1415">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="contact-content" class="section">
<main class="bg-white min-h-screen">
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">ติดต่อเรา</h1>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">ติดต่อเรา</h1>
<p class="text-xl text-secondary-300">พร้อมให้คำปรึกษาคุณตลอดเวลาทำการ</p>
</div>
</section>
<div class="card p-8 md:p-12 bg-white mb-8">
<p class="text-lg text-secondary-600 mb-8">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ปรึกษา Dealplustech ได้ตลอดเวลาทำการ
</p>
<h2 class="text-2xl font-bold text-secondary-900 mb-6">Send Us A Message</h2>
<form class="space-y-6">
<div>
<label for="name" class="block text-lg font-medium text-secondary-700 mb-2">ชื่อของคุณ (จำเป็นต้องกรอก)</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-secondary-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500" />
</div>
<div>
<label for="email" class="block text-lg font-medium text-secondary-700 mb-2">อีเมล์ของคุณ (จำเป็นต้องกรอก)</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-secondary-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500" />
</div>
<div>
<label for="subject" class="block text-lg font-medium text-secondary-700 mb-2">หัวข้อ</label>
<input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-secondary-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500" />
</div>
<div>
<label for="message" class="block text-lg font-medium text-secondary-700 mb-2">ข้อความของคุณ</label>
<textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-secondary-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-green-500"></textarea>
</div>
<button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg">
ส่งข้อความ
</button>
</form>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="card p-8 bg-white">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">Contact Details</h2>
<div class="space-y-4">
<section class="section">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12">
<div>
<div class="card-glass p-8 mb-8">
<h2 class="text-xl font-bold text-secondary-900 mb-6">ส่งข้อความถึงเรา</h2>
<form id="contact-form" class="space-y-6">
<div>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>บริษัท ดีล พลัส เทค จำกัด</strong><br/>
9/70 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค กทม. 10160
</p>
<label for="name" class="block text-base font-medium text-secondary-700 mb-2">ชื่อของคุณ *</label>
<input type="text" id="name" name="name" required class="input-modern" />
</div>
<div>
<p class="text-lg text-secondary-700 leading-relaxed">
ส่งสินค้าฟรี กรุงเทพมหานคร ปริมณฑล ชลบุรี ระยอง
</p>
<label for="email" class="block text-base font-medium text-secondary-700 mb-2">อีเมล์ของคุณ *</label>
<input type="email" id="email" name="email" required class="input-modern" />
</div>
<div>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>โทร:</strong> 090-555-1415
</p>
<label for="subject" class="block text-base font-medium text-secondary-700 mb-2">หัวข้อ</label>
<input type="text" id="subject" name="subject" class="input-modern" />
</div>
<div>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>อีเมล:</strong> dealplustech@gmail.com
</p>
<label for="message" class="block text-base font-medium text-secondary-700 mb-2">ข้อความ</label>
<textarea id="message" name="message" rows="5" class="input-modern"></textarea>
</div>
<button type="submit" id="submit-btn" class="btn-primary w-full">
ส่งข้อความ
</button>
</form>
<div id="form-success" class="hidden mt-6 p-4 bg-primary-100 border border-primary-300 rounded-xl text-primary-700">
<p class="font-medium">ส่งข้อความสำเร็จ! เราจะติดต่อกลับโดยเร็วที่สุด</p>
</div>
</div>
</div>
<div class="card p-8 bg-white">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">Work Hour</h2>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-lg text-secondary-700">วันจันทร์</span>
<span class="text-lg text-secondary-700">08:30 - 17:30</span>
<div>
<div class="card-glass p-8 mb-8">
<h2 class="text-xl font-bold text-secondary-900 mb-6">ข้อมูลติดต่อ</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 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>
</div>
<div>
<h3 class="font-semibold text-secondary-900">โทรศัพท์</h3>
<p class="text-secondary-600">090-555-1415</p>
<p class="text-secondary-500 text-sm">วันจันทร์-เสาร์ 08:30-17:30</p>
</div>
</div>
<div class="flex justify-between">
<span class="text-lg text-secondary-700">วันอังคาร</span>
<span class="text-lg text-secondary-700">08:30 - 17:30</span>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 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>
</div>
<div>
<h3 class="font-semibold text-secondary-900">อีเมล</h3>
<p class="text-secondary-600">dealplustech@gmail.com</p>
</div>
</div>
<div class="flex justify-between">
<span class="text-lg text-secondary-700">วันพุธ</span>
<span class="text-lg text-secondary-700">08:30 - 17:30</span>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 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>
</div>
<div>
<h3 class="font-semibold text-secondary-900">ที่อยู่</h3>
<p class="text-secondary-600">9/69 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค กรุงเทพมหานคร 10160</p>
</div>
</div>
<div class="flex justify-between">
<span class="text-lg text-secondary-700">วันพฤหัสบดี</span>
<span class="text-lg text-secondary-700">08:30 - 17:30</span>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</div>
<div>
<h3 class="font-semibold text-secondary-900">Facebook</h3>
<a href="https://www.facebook.com/Dealplustech/" target="_blank" class="text-primary-500 hover:text-primary-600">facebook.com/Dealplustech</a>
</div>
</div>
<div class="flex justify-between">
<span class="text-lg text-secondary-700">วันศุกร์</span>
<span class="text-lg text-secondary-700">08:30 - 17:30</span>
</div>
<div class="flex justify-between">
<span class="text-lg text-secondary-700">วันเสาร์</span>
<span class="text-lg text-secondary-700">08:30 - 17:30</span>
</div>
<div class="flex justify-between">
<span class="text-lg text-secondary-700">วันอาทิตย์</span>
<span class="text-lg text-secondary-700">ปิดทำการ</span>
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="font-bold text-primary-600 text-sm">LINE</span>
</div>
<div>
<h3 class="font-semibold text-secondary-900">Line</h3>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="text-primary-500 hover:text-primary-600">@dealplustech</a>
</div>
</div>
</div>
</div>

232
src/pages/dukelarrsen/index.astro
View File

@@ -7,59 +7,56 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="DUKELARRSEN กรู๊ฟท่อ และข้อต่อกรู๊ฟ" description="DUKELARRSEN Grooved Coupling and Fitting กรู๊ฟท่อคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/dukelarrsen/dukelarrsen-43.jpg" alt="DUKELARRSEN Grooved Coupling" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/dukelarrsen/dukelarrsen-43.jpg" alt="DUKELARRSEN 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">DUKELARRSEN กรู๊ฟท่อและข้อต่อกรู๊ฟ</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">DUKELARRSEN กรู๊ฟท่อและข้อต่อกรู๊ฟ</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
DUKELARRSEN Grooved Coupling and Fitting ระบบกรู๊ฟท่อคุณภาพสูง ประหยัดค่าติดตั้ง ติดตั้งง่าย รวดเร็ว ไม่ต้องเชื่อม ส่งฟรี กรุงเทพมหานครและปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
</div>
</div>
@@ -70,25 +67,25 @@ import Footer from '@/components/common/Footer.astro';
<!-- 4 Reasons Section -->
<section id="reasons" class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">4 เหตุผลที่ควรใช้ระบบกรู๊ฟ</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">4 เหตุผลที่ควรใช้ระบบกรู๊ฟ</h2>
<div class="space-y-12">
<!-- Reason 1 -->
<div class="bg-white rounded-2xl p-8 shadow-sm">
<h3 class="text-2xl font-bold text-red-600 mb-6">1. ไม่เกิดการอุดตันจาก Slag (เศษผงเหล็ก)</h3>
<img src="/images/dukelarrsen/dukelarrsen-02-03.jpg" alt="ไม่เกิด Slag" class="w-full h-auto rounded-xl" />
<img src="/images/dukelarrsen/dukelarrsen-02-03.jpg" alt="ไม่เกิด Slag" class="w-full h-auto rounded-xl" width="800" height="600" loading="lazy" decoding="async" />
</div>
<!-- Reason 2 -->
<div class="bg-white rounded-2xl p-8 shadow-sm">
<h3 class="text-2xl font-bold text-red-600 mb-6">2. รูพรุนจากรอยเชื่อม ต้นเหตุของการเกิดท่อผุ รั่ว ซึมในที่สุด</h3>
<img src="/images/dukelarrsen/dukelarrsen-04.jpg" alt="รูพรุนจากรอยเชื่อม" class="w-full h-auto rounded-xl" />
<img src="/images/dukelarrsen/dukelarrsen-04.jpg" alt="รูพรุนจากรอยเชื่อม" class="w-full h-auto rounded-xl" width="800" height="600" loading="lazy" decoding="async" />
</div>
<!-- Reason 3 -->
<div class="bg-white rounded-2xl p-8 shadow-sm">
<h3 class="text-2xl font-bold text-red-600 mb-6">3. การเชื่อมแบบดั้งเดิมอาจก่อให้เกิดเศษผงเหล็ก (Slag) ฝังในรอยเชื่อม</h3>
<img src="/images/dukelarrsen/dukelarrsen-05.jpg" alt="เศษผงเหล็กจากการเชื่อม" class="w-full h-auto rounded-xl" />
<img src="/images/dukelarrsen/dukelarrsen-05.jpg" alt="เศษผงเหล็กจากการเชื่อม" class="w-full h-auto rounded-xl" width="800" height="600" loading="lazy" decoding="async" />
</div>
<!-- Reason 4 -->
@@ -97,13 +94,13 @@ import Footer from '@/components/common/Footer.astro';
<div class="grid md:grid-cols-2 gap-6">
<div>
<p class="text-lg font-bold text-secondary-900 mb-4">ระบบเชื่อม</p>
<img src="/images/dukelarrsen/dukelarrsen-06.jpg" alt="ระบบเชื่อมมีประกายไฟ" class="w-full h-auto rounded-xl mb-2" />
<img src="/images/dukelarrsen/dukelarrsen-06.jpg" alt="ระบบเชื่อมมีประกายไฟ" class="w-full h-auto rounded-xl mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-red-600 font-medium">ระบบเชื่อมมีประกายไฟ ต้นเหตุของเพลิงไหม้</p>
</div>
<div>
<p class="text-lg font-bold text-secondary-900 mb-4">ระบบกรู๊ฟ</p>
<img src="/images/dukelarrsen/dukelarrsen-07.jpg" alt="ระบบกรู๊ฟไม่มีประกายไฟ" class="w-full h-auto rounded-xl mb-2" />
<p class="text-green-600 font-medium">ระบบกรู๊ฟไม่ก่อให้เกิดประกายไฟ</p>
<img src="/images/dukelarrsen/dukelarrsen-07.jpg" alt="ระบบกรู๊ฟไม่มีประกายไฟ" class="w-full h-auto rounded-xl mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-primary-600 font-medium">ระบบกรู๊ฟไม่ก่อให้เกิดประกายไฟ</p>
</div>
</div>
</div>
@@ -117,16 +114,16 @@ import Footer from '@/components/common/Footer.astro';
<!-- Fire Incident Section -->
<section id="fire-incident" class="section bg-white">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">เหตุการณ์จริง..เพลิงไหม้จากการเชื่อมท่อ</h2>
<img src="/images/dukelarrsen/dukelarrsen-08.jpg" alt="เพลิงไหม้จากการเชื่อมท่อ" class="w-full h-auto rounded-xl max-w-3xl mx-auto" />
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">เหตุการณ์จริง..เพลิงไหม้จากการเชื่อมท่อ</h2>
<img src="/images/dukelarrsen/dukelarrsen-08.jpg" alt="เพลิงไหม้จากการเชื่อมท่อ" class="w-full h-auto rounded-xl max-w-3xl mx-auto" width="800" height="600" loading="lazy" decoding="async" />
</div>
</section>
<!-- Benefits Section -->
<section id="benefits" class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">GROOVED COUPLINGS AND FITTINGS</h2>
<img src="/images/dukelarrsen/dukelarrsen-09.jpg" alt="Grooved Couplings and Fittings" class="w-full h-auto rounded-xl mb-8" />
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">GROOVED COUPLINGS AND FITTINGS</h2>
<img src="/images/dukelarrsen/dukelarrsen-09.jpg" alt="Grooved Couplings and Fittings" class="w-full h-auto rounded-xl mb-8" width="800" height="600" loading="lazy" decoding="async" />
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
@@ -178,17 +175,17 @@ import Footer from '@/components/common/Footer.astro';
<section id="coupling-types" class="section bg-white">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">ประเภทของ Coupling</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">ประเภทของ Coupling</h2>
<div class="space-y-12">
<div>
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Rigid Coupling DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-10.jpg" alt="Rigid Coupling" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-8" />
<h3 class="text-xl font-bold text-secondary-900 mb-6">Rigid Coupling DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-10.jpg" alt="Rigid Coupling" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-8" width="800" height="600" loading="lazy" decoding="async" />
<!-- specification Table -->
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-3 py-2 text-center text-xs font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-3 py-2 text-center text-xs font-semibold align-middle">Pipe OD<br>mm/in</th>
@@ -226,11 +223,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
<div>
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Flexible Coupling DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-11.jpg" alt="Flexible Coupling" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-6" />
<h3 class="text-xl font-bold text-secondary-900 mb-6">Flexible Coupling DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-11.jpg" alt="Flexible Coupling" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-6" width="800" height="600" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-3 py-2 text-center text-xs font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-3 py-2 text-center text-xs font-semibold align-middle">Pipe OD<br>mm/in</th>
@@ -267,11 +264,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
<div>
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Reducing Flexible Coupling DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-12.jpg" alt="Reducing Flexible Coupling" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-6" />
<h3 class="text-xl font-bold text-secondary-900 mb-6">Reducing Flexible Coupling DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-12.jpg" alt="Reducing Flexible Coupling" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-6" width="800" height="600" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-3 py-2 text-center text-xs font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-3 py-2 text-center text-xs font-semibold align-middle">Pipe OD Dxd<br>mm/in</th>
@@ -312,15 +309,15 @@ import Footer from '@/components/common/Footer.astro';
<section id="fittings" class="section bg-gray-50">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">ประเภทของ Fitting</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">ประเภทของ Fitting</h2>
<div class="space-y-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">หน้าจาน PN16 Grooved DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-13.jpg" alt="หน้าจาน PN16" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-13.jpg" alt="หน้าจาน PN16" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -350,10 +347,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">หน้าจาน ANSI 150 Grooved DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-14.jpg" alt="หน้าจาน ANSI 150" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-14.jpg" alt="หน้าจาน ANSI 150" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -381,10 +378,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ข้องอ 22.5° Grooved</h3>
<img src="/images/dukelarrsen/dukelarrsen-15.jpg" alt="ข้องอ 22.5" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-15.jpg" alt="ข้องอ 22.5" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -409,10 +406,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ข้องอ 45° Grooved</h3>
<img src="/images/dukelarrsen/dukelarrsen-16.jpg" alt="ข้องอ 45" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-16.jpg" alt="ข้องอ 45" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -441,10 +438,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ข้องอ 90° Grooved</h3>
<img src="/images/dukelarrsen/dukelarrsen-17.jpg" alt="ข้องอ 90" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-17.jpg" alt="ข้องอ 90" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -473,10 +470,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ข้อลดกลม Grooved DUKELARRSEN (1)</h3>
<img src="/images/dukelarrsen/dukelarrsen-18.jpg" alt="ข้อลดกลม 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-18.jpg" alt="ข้อลดกลม 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -508,10 +505,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ข้อลดกลม Grooved DUKELARRSEN (2)</h3>
<img src="/images/dukelarrsen/dukelarrsen-19.jpg" alt="ข้อลดกลม 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-19.jpg" alt="ข้อลดกลม 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -541,10 +538,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ข้อลดเบี้ยว Grooved DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-20.jpg" alt="ข้อลดเบี้ยว" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-20.jpg" alt="ข้อลดเบี้ยว" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -577,10 +574,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">สามทาง Grooved DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-21.jpg" alt="สามทาง" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-21.jpg" alt="สามทาง" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -609,10 +606,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">สามทางลด Grooved DUKELARRSEN (1)</h3>
<img src="/images/dukelarrsen/dukelarrsen-22.jpg" alt="สามทางลด 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-22.jpg" alt="สามทางลด 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -644,10 +641,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">สามทางลด Grooved DUKELARRSEN (2)</h3>
<img src="/images/dukelarrsen/dukelarrsen-23.jpg" alt="สามทางลด 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-23.jpg" alt="สามทางลด 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -680,10 +677,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">สามทางลดเกลียวใน Grooved DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-24.jpg" alt="สามทางลดเกลียวใน" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-24.jpg" alt="สามทางลดเกลียวใน" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -722,10 +719,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">สี่ทาง Grooved</h3>
<img src="/images/dukelarrsen/dukelarrsen-26.jpg" alt="สี่ทาง" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-26.jpg" alt="สี่ทาง" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -748,10 +745,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">สี่ทางลด Grooved</h3>
<img src="/images/dukelarrsen/dukelarrsen-27.jpg" alt="สี่ทางลด" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-27.jpg" alt="สี่ทางลด" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -773,10 +770,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ฝาครอบ DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-28.jpg" alt="ฝาครอบ" class="w-full max-w-lg mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-28.jpg" alt="ฝาครอบ" class="w-full max-w-lg mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -805,10 +802,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">Cap with Eccentric Hole</h3>
<img src="/images/dukelarrsen/dukelarrsen-29.jpg" alt="Cap with Eccentric Hole" class="w-full max-w-lg mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-29.jpg" alt="Cap with Eccentric Hole" class="w-full max-w-lg mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -834,15 +831,15 @@ import Footer from '@/components/common/Footer.astro';
<section id="coupling" class="section bg-white">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">Coupling ต่างๆ</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">Coupling ต่างๆ</h2>
<div class="space-y-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">รัดแยกสามทาง Grooved DUKELARRSEN (1)</h3>
<img src="/images/dukelarrsen/dukelarrsen-30.jpg" alt="รัดแยกสามทาง 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-30.jpg" alt="รัดแยกสามทาง 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Pipe OD<br>mm/in</th>
@@ -882,10 +879,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">รัดแยกสามทาง Grooved DUKELARRSEN (2)</h3>
<img src="/images/dukelarrsen/dukelarrsen-31.jpg" alt="รัดแยกสามทาง 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-31.jpg" alt="รัดแยกสามทาง 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Pipe OD<br>mm/in</th>
@@ -919,10 +916,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">รัดแยกสามทางเกลียวใน Threaded Grooved DUKELARRSEN (1)</h3>
<img src="/images/dukelarrsen/dukelarrsen-32.jpg" alt="รัดแยกเกลียวใน 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-32.jpg" alt="รัดแยกเกลียวใน 1" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Pipe OD<br>mm/in</th>
@@ -956,10 +953,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">รัดแยกสามทางเกลียวใน Threaded Grooved DUKELARRSEN (2)</h3>
<img src="/images/dukelarrsen/dukelarrsen-33.jpg" alt="รัดแยกเกลียวใน 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-33.jpg" alt="รัดแยกเกลียวใน 2" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Pipe OD<br>mm/in</th>
@@ -995,10 +992,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">รัดแยกสามทางเกลียวใน Threaded Grooved DUKELARRSEN (3)</h3>
<img src="/images/dukelarrsen/dukelarrsen-34.jpg" alt="รัดแยกเกลียวใน 3" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-34.jpg" alt="รัดแยกเกลียวใน 3" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Nominal Size<br>mm/in</th>
<th rowspan="2" class="px-2 py-2 text-center font-semibold align-middle">Pipe OD<br>mm/in</th>
@@ -1030,10 +1027,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">รัดแยกสาม U-Bolt Grooved DUKELARRSEN</h3>
<img src="/images/dukelarrsen/dukelarrsen-35.jpg" alt="รัดแยก U-Bolt" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-35.jpg" alt="รัดแยก U-Bolt" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-4" width="800" height="600" loading="lazy" decoding="async" />
<div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-xl shadow-sm overflow-hidden text-xs">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-2 py-2 text-center font-semibold">Nominal Size<br>mm/in</th>
<th class="px-2 py-2 text-center font-semibold">Pipe OD<br>mm/in</th>
@@ -1070,12 +1067,12 @@ import Footer from '@/components/common/Footer.astro';
<section id="quality" class="section bg-gray-50">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">การควบคุมคุณภาพ</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">การควบคุมคุณภาพ</h2>
<div class="space-y-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">Casting (การหล่อ)</h3>
<img src="/images/dukelarrsen/dukelarrsen-36.jpg" alt="Casting" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-36.jpg" alt="Casting" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-secondary-700">
ในส่วนขององค์ประกอบทางเคมี เราทดสอบและวิเคราะห์ทุกล็อตของชิ้นส่วนหล่อเพื่อให้แน่ใจว่าองค์ประกอบทางเคมีตรงตามข้อกำหนดการออกแบบ สำหรับทุกแพ็คเกจของเหล็กหลอมเหลว มีชิ้นทดสอบแรงดึงในห้องปฏิบัติการ เราตรวจสอบทีละชิ้น เราสามารถมั่นใจได้ว่าการหล่อตรงตามข้อกำหนดเสมอ และรับประกันว่าทุก Coupling และ Fitting ปลอดภัยเพียงพอเมื่อทำงานภายใต้แรงดันใช้งานที่กำหนด
</p>
@@ -1083,14 +1080,14 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">Bolts and Nuts (สกรูและน็อต)</h3>
<img src="/images/dukelarrsen/dukelarrsen-37.jpg" alt="Bolts and Nuts" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-37.jpg" alt="Bolts and Nuts" class="w-full max-w-xl mx-auto h-auto rounded-xl mb-4" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-secondary-700">
สำหรับสกรูและน็อต เราเลือกใช้วัสดุ 40 Cr คุณสมบัติทางกลของสกรูและน็อตสามารถถึงเกรด 8.8 หลังการอบชุบ สามารถใช้ประแจเพียงดอกเดียวในการติดตั้ง และสกรูและน็อตมีความน่าเชื่อถือและความแน่นหนาที่ดีกว่า
</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/dukelarrsen/dukelarrsen-38.jpg" alt="Quality Control" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-4" />
<img src="/images/dukelarrsen/dukelarrsen-38.jpg" alt="Quality Control" class="w-full max-w-2xl mx-auto h-auto rounded-xl mb-4" width="800" height="600" loading="lazy" decoding="async" />
<h3 class="text-xl font-bold text-secondary-900 mb-4">กระบวนการผลิตที่ทันสมัย</h3>
<p class="text-secondary-700">
ผลิตภัณฑ์ที่ได้รับการรับรองขึ้นอยู่กับอุปกรณ์การผลิตทางวิทยาศาสตร์ขั้นสูง การผลิตหล่อของเราใช้การหล่อด้วยอากาศแบบดินเหนียวเปียกเพื่อรับประกันการผลิตในปริมาณที่ต้องการ การผลิตหล่อของเราเลือกใช้ระบบการประมวลผลขั้นสูงของดินเหนียวแบบ Regenerative ทั้งหมด ซึ่งใช้การควบคุมแบบ PLC เพื่อให้คุณภาพของดินเหนียวมั่นคงและน่าเชื่อถือ เราใช้ทรายหล่อสองชนิดที่แตกต่างกันเพื่อเพิ่มความเรียบผิว การจำลองแบบใช้สายการจำลองแบบ Air Microseism Compaction และสายการจำลองแบบ Two-Sided Template with Escaping Box ความแม่นยำของขนาดและความคงตัวของขนาดของผลิตภัณฑ์ทั้งสองดีมาก การหล่อเหล็กใช้เตาหลอมแบบ Inductive ความถี่กลางขั้นสูงในประเทศและดำเนินการทดสอบและปรับโดยเครื่อง Spectrometer และตัวควบคุมคุณภาพของเหล็กหลอมเหลวเพื่อหลีกเลี่ยงการเข้าของสารเจือปนที่เป็นอันตราย
@@ -1102,22 +1099,23 @@ import Footer from '@/components/common/Footer.astro';
</section>
</section><!-- end product-specs wrapper -->
<section id="contact-cta" class="section bg-gray-50">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

168
src/pages/durgo-avvs/index.astro
View File

@@ -7,59 +7,56 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ระบบวาล์วเติมอากาศ DURGO AVVs" description="จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVsคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/durgo_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/durgo_000C.jpg" alt="DURGO AVVs" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ระบบวาล์วเติมอากาศ DURGO AVVs</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">ระบบวาล์วเติมอากาศ DURGO AVVs</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVsคุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
</div>
</div>
@@ -70,70 +67,70 @@ import Footer from '@/components/common/Footer.astro';
<section id="product-specs" class="section bg-white">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>ระบบวาล์วเติมอากาศ DURGO AVVs</strong> นวัตกรรมระดับโลก ที่ประเทศชั้นนําเลือกใช้ ด้วยผลิตภัณฑ์คุณภาพจากยุโรป เชียวชาญเทคโนโลยีระบบวาล์ว ทั้งด้านการผลิต การออกแบบวางระบบ ทางด้านอุตสาหกรรมทําความร้อน และระบบสุขาภิบาลตั้งแต่ปี 1921 จนเป็นที่ยอมรับ ได้สิทธิบัตรมากมายจากทุกทวีปทั่วโลก จึงมั่นใจได้ในคุณภาพของ <strong>ระบบวาล์วเติมอากาศ DURGO AVVs</strong> ที่สามารถตอบโจทย์แก้ปัณหาระบบท่ออากาศแบบเก่า ได้อย่างแท้จริง
</p>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/durgo-avvs/durgo-002.jpg" alt="DURGO AVVs" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-003.jpg" alt="DURGO AVVs" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-002.jpg" alt="DURGO AVVs" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/durgo-avvs/durgo-003.jpg" alt="DURGO AVVs" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">เหตุผลที่ควรเลือกใช้ DURGO AVVs</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">เหตุผลที่ควรเลือกใช้ DURGO AVVs</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
ระบบระบายน้ำฝน และนํ้าทิ้ง เป็นระบบที่มีความสําคัญอย่างมากในโครงการที่พักอาศัย โรงแรม และอาคารสํานักงานต่างๆ ดังนั้น การเลือกระบบวาล์วเติมอากาศ DURGO AVVs ทดแทนท่ออากาศแบบเก่า จะทำให้เจ้าของโครงการตลอดจนผู้อาศัย ได้รับประโยชน์มากมาย
</p>
<div class="grid md:grid-cols-2 gap-8 my-8">
<div class="text-center">
<img src="/images/durgo-avvs/durgo-004.jpg" alt="ลดค่าใช้จ่าย" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-004.jpg" alt="ลดค่าใช้จ่าย" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">ลดค่าใช้จ่าย</h4>
<p class="text-base text-secondary-700">วัสดุท่อนํ้าทิ้ง ค่าแรง และลดระยะเวลาในการก่อสร้าง</p>
</div>
<div class="text-center">
<img src="/images/durgo-avvs/durgo-008.jpg" alt="มั่นใจได้" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-008.jpg" alt="มั่นใจได้" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">มั่นใจได้</h4>
<p class="text-base text-secondary-700">จากการยอมรับ และการใช้งานในต่างประเทศมานาน กว่า 50 ปี</p>
</div>
<div class="text-center">
<img src="/images/durgo-avvs/durgo-005.jpg" alt="เพิ่มมูลค่า" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-005.jpg" alt="เพิ่มมูลค่า" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">เพิ่มมูลค่า</h4>
<p class="text-base text-secondary-700">สามารถลดปริมาณ หรือไม่ต้องใช้ท่ออากาศภายในอาคาร ลดขนาดช่องชาร์ปทําให้เพิ่มพื้นที่ขาย และพื้นที่ใช้สอยได้มากขึ้น</p>
</div>
<div class="text-center">
<img src="/images/durgo-avvs/durgo-009.jpg" alt="ยับยั้งการลามไฟ" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-009.jpg" alt="ยับยั้งการลามไฟ" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">ยับยั้งการลามไฟ</h4>
<p class="text-base text-secondary-700">เมื่อเกิดเหตุเพลิงไหม้ เพราะอากาศเข้าในอาคารน้อยลง เมื่อเทียบกับระบบเก่า</p>
</div>
<div class="text-center">
<img src="/images/durgo-avvs/durgo-006.jpg" alt="ลดกลิ่น" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-006.jpg" alt="ลดกลิ่น" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">ลดกลิ่น</h4>
<p class="text-base text-secondary-700">ในระบบเก่ามักมีปัญหากลิ่นเหม็นจากระบบท่อนํ้าทิ้ง ทั้งภายในอาคาร และนอกอาคาร</p>
</div>
<div class="text-center">
<img src="/images/durgo-avvs/durgo-010.jpg" alt="ตอบโจทย์ทุกการใช้งาน" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-010.jpg" alt="ตอบโจทย์ทุกการใช้งาน" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">ตอบโจทย์ทุกการใช้งาน</h4>
<p class="text-base text-secondary-700">สินค้าหลากหลายติดตั้งกับท่อประเภทต่างๆ (มาตรฐาน EN/JIS) ได้ทุกชนิด</p>
</div>
<div class="text-center">
<img src="/images/durgo-avvs/durgo-007.jpg" alt="ป้องกันเชื้อโรค" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-007.jpg" alt="ป้องกันเชื้อโรค" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">ป้องกันเชื้อโรค</h4>
<p class="text-base text-secondary-700">ที่ปะปนมากับอากาศภายในท่อนํ้าทิ้งระบบเก่าไม่ให้แพร่กระจายเข้าสู่ห้องพักส่วนต่างๆ ภายในอาคารได้</p>
</div>
<div class="text-center">
<img src="/images/durgo-avvs/durgo-011.jpg" alt="ลดอัตราการถ่ายเทอากาศ" class="w-16 h-16 mx-auto mb-3 object-contain" />
<img src="/images/durgo-avvs/durgo-011.jpg" alt="ลดอัตราการถ่ายเทอากาศ" class="w-16 h-16 mx-auto mb-3 object-contain" width="64" height="64" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-secondary-900 mb-2">ลดอัตราการถ่ายเทอากาศ</h4>
<p class="text-base text-secondary-700">ในขณะที่ระบบไม่ถูกใช้งานจึงทําให้น้ำใน Trap (ตัวดักกลิ่น) ระเหยช้าลง และไม่ถูกดูดออกไป ซึ่งจะเป็นสาเหตุหลักของการเกิดกลิ่นเหม็น</p>
</div>
</div>
<div class="my-8 max-w-2xl mx-auto">
<img src="/images/durgo-avvs/durgo-012.jpg" alt="INTERNATIONAL STANDARD" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-012.jpg" alt="INTERNATIONAL STANDARD" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">หลักการทำงานของวาล์วเติมอากาศ DURGO AVVs</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">หลักการทำงานของวาล์วเติมอากาศ DURGO AVVs</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>ระบบวาล์วเติมอากาศ DURGO AVVs</strong> ทดแทนท่อระบายอากาศของระบบท่อน้ำทิ้งแบบเก่า จะช่วยเพิ่มประสิทธิภาพของการเติมอากาศเข้าระบบ และช่วยป้องกันไม่ให้น้าถูกดึงออกจาก Trap (ตัวดักกลิ่น) ซึ่งเป็นสาเหตุหลักของการเกิดกลิ่นเหม็น และลดการแพร่เชื้อโรคที่มากับอากาศภายในระบบท่อน้้าทิ้งได้อย่างดี
</p>
@@ -147,19 +144,19 @@ import Footer from '@/components/common/Footer.astro';
</ul>
<div class="my-8">
<img src="/images/durgo-avvs/durgo-013.jpg" alt="หลักการทำงาน" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-013.jpg" alt="หลักการทำงาน" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">เปรียบเทียบการออกแบบระบบระบายน้ำทิ้ง</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">เปรียบเทียบการออกแบบระบบระบายน้ำทิ้ง</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/durgo-avvs/durgo-014.jpg" alt="ระบบเดิม" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-015.jpg" alt="ระบบ DURGO" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-016.jpg" alt="เปรียบเทียบ" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-014.jpg" alt="ระบบเดิม" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/durgo-avvs/durgo-015.jpg" alt="ระบบ DURGO" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/durgo-avvs/durgo-016.jpg" alt="เปรียบเทียบ" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">หลักการออกแบบระบบระบายน้ำ และเติมอากาศที่สมบูรณ์</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">หลักการออกแบบระบบระบายน้ำ และเติมอากาศที่สมบูรณ์</h3>
<div class="my-8">
<img src="/images/durgo-avvs/durgo-017.jpg" alt="หลักการออกแบบ" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-017.jpg" alt="หลักการออกแบบ" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
<p class="text-lg text-secondary-700 leading-relaxed">
กราฟแรงดันลบของระบบระบายน้ำแบบเก่า (สีน้ำเงิน) แสดงลักษณะการเปลี่ยนแปลงของแรงดันอากาศภายในท่อระบายน้ำหลักแนวดิ่งขณะที่มีการระบายน้ำสําหรับระบบระบายน้ำทิ้งแบบใช้ท่ออากาศ เมื่อมีการระบายน้ำภายในท่อระบายน้ำหลักแนวดึ่ง แรงดันลบจะเกิดขึ้นและเพิ่มขึ้นตามปริมาณของน้ำที่ระบายภายในท่อ
@@ -168,12 +165,12 @@ import Footer from '@/components/common/Footer.astro';
กราฟแรงดันลบของระบบระบายน้ำที่ใช้ DURGO AVVs (สีฟ้า) เมื่อติดตั้ง <strong>วาล์วเติมอากาศ DURGO AVVs</strong> แทนระบบท่ออากาศเดิม จากกราฟจะเห็นว่า ลักษณะการเปลี่ยนแปลงของแรงดันลบและบวกภายในท่อน้ำทิ้งมีความสมดุลมากขึ้น
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">กระบวนการจัดการกับแรงดันบวก</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">กระบวนการจัดการกับแรงดันบวก</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
การจัดการกับแรงดันบวกในระบบของ <strong>วาล์วเติมอากาศ DURGO AVVs</strong> เป็นวิธีอันชาญฉลาด ประหยัด และมีระสิทธิภาพดีที่สุด ได้การรับรองมาตรฐาน SHASE ของประเทศญี่ปุ่น
</p>
<div class="my-8">
<img src="/images/durgo-avvs/durgo-018.jpg" alt="กระบวนการจัดการแรงดันบวก" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-018.jpg" alt="กระบวนการจัดการแรงดันบวก" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
<p class="text-lg text-secondary-700 leading-relaxed">
โดยหลักการคือ ขยายขนาดข้องอ 45 ที่ตำแหน่งข้องอสุดท้าย ก่อนที่จะเปลี่ยนทิศทางการไหลจากแนวดิ่งเป็นแนวราบ โดยขยายขนาดให้ใหญ่กว่าท่อระบายน้ำหลักแนวดิ่ง (Main Stack) 1 ขนาด เช่น จากท่อขนาด 4 นิ้ว ขยายเป็นข้องอและท่อขนาด 5 นิ้ว
@@ -185,35 +182,35 @@ import Footer from '@/components/common/Footer.astro';
หากมีการออกแบบระบบท่อน้ำทิ้งเป็นแบบ Single Stack คือระบบที่รวมท่อน้ำโสโครก (Soil) และท่อน้ำเสีย (Waste) เข้าด้วยกัน ให้ใช้หลักการขยายขนาดข้องอสุดท้าย โดยขยายขนาดให้ใหญ่กว่าท่อระบายน้ำหลักแนวดิ่ง 2 ขนาด เช่น จากท่อขนาด 4 นิ้ว ขยายเป็นข้องอและท่อขนาด 6 นิ้ว
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">NEW DEVELOPMENT</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">NEW DEVELOPMENT</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/durgo-avvs/durgo-019.jpg" alt="NEW DEVELOPMENT 1" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-020.jpg" alt="NEW DEVELOPMENT 2" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-019.jpg" alt="NEW DEVELOPMENT 1" class="max-w-md w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/durgo-avvs/durgo-020.jpg" alt="NEW DEVELOPMENT 2" class="max-w-md w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
</div>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>วาล์วเติมอากาศ DURGO AVVs</strong> ผลิตจากพลาสติก ABS ทำให้มีความแข็งแรง และซีลยางผลิตจาก EPDM เพื่ออายุการใช้งานที่ยาวนาน
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">PRODUCT RANGE</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">PRODUCT RANGE</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/durgo-avvs/durgo-021.jpg" alt="PRODUCT RANGE 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-022.jpg" alt="PRODUCT RANGE 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-021.jpg" alt="PRODUCT RANGE 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/durgo-avvs/durgo-022.jpg" alt="PRODUCT RANGE 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ขนาดของวาล์วเติมอากาศ DURGO AVVs</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ขนาดของวาล์วเติมอากาศ DURGO AVVs</h3>
<div class="my-8">
<img src="/images/durgo-avvs/durgo-023.jpg" alt="ขนาด" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-023.jpg" alt="ขนาด" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">เกณฑ์การเลือกใช้วาล์วเติมอากาศ DURGO AVVs</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">เกณฑ์การเลือกใช้วาล์วเติมอากาศ DURGO AVVs</h3>
<div class="my-8">
<img src="/images/durgo-avvs/durgo-024.jpg" alt="เกณฑ์การเลือกใช้" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-024.jpg" alt="เกณฑ์การเลือกใช้" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">เทคนิคและข้อกำหนดขั้นต้นในการติดตั้งวาล์วเติมอากาศ DURGO AVVs</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">เทคนิคและข้อกำหนดขั้นต้นในการติดตั้งวาล์วเติมอากาศ DURGO AVVs</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/durgo-avvs/durgo-025.jpg" alt="การติดตั้ง 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-026.jpg" alt="การติดตั้ง 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-025.jpg" alt="การติดตั้ง 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/durgo-avvs/durgo-026.jpg" alt="การติดตั้ง 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
</div>
<ul class="list-disc pl-6 space-y-2 text-lg text-secondary-700">
<li>การติดตั้งวาล์วเติมอากาศ DURGO AVVs จะต้องตั้งฉากกับระดับนํ้า ค่าความคลาดเคลื่อนในการติดตั้งไม่ควรเอียงเกิน 5 องศา และห้ามติดตั้งในแนวนอนเด็ดขาด</li>
@@ -223,14 +220,14 @@ import Footer from '@/components/common/Footer.astro';
<li>ในการติดตั้งวาล์วเติมอากาศ DURGO AVVs เมื่อประกอบวาล์วเข้ากับท่อระบายนํ้าเรียบร้อยแล้ว และยังอยู่ในระหว่างการก่อสร้าง ต้องครอบด้วยถุงพลาสติก รัดให้แน่น เพื่อป้องกันฝุ่นหรือเศษผงที่เกิดขึ้นระหว่างการก่อสร้างไปติดบริเวณซีลยาง EPDM เมื่อการก่อสร้างเสร็จเรียบร้อยจึงถอดถุงพลาสติกออกเพื่อการใช้งาน</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">การบำรุงรักษา</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">การบำรุงรักษา</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>วาล์วเติมอากาศ DURGO AVVs</strong> ใช้หลักการตามธรรมชาติของความสมคุลแรงดันในระบบ ไม่ใช้ระบบไฟฟ้าหรือเครื่องกล จึงไม่มีความจําเป็นต้องบํารุงรักษาเป็นพิเศษ แต่ในกรณีที่คํานึงถึงการใช้งานที่มีปัจจัยไม่แน่นอน ควรเตรียมช่องเปิดสําหรับการบํารุงรักษา ขนาด 300 mm x 300 mm ขึ้นไป
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">SOME OF OUR PROJECT REFERENCES</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">SOME OF OUR PROJECT REFERENCES</h3>
<div class="my-8">
<img src="/images/durgo-avvs/durgo-027.jpg" alt="Project References" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/durgo-avvs/durgo-027.jpg" alt="Project References" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</div>
@@ -238,22 +235,23 @@ import Footer from '@/components/common/Footer.astro';
</section>
<section id="contact-cta" class="section bg-gray-50">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

146
src/pages/grilles/index.astro
View File

@@ -7,56 +7,71 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="กริลแอร์พลาสติก (Grilles air plastic)" description="จำหน่ายกริลแอร์พลาสติก (Grilles air plastic)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/grilles_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/grilles_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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">กริลแอร์พลาสติก (Grilles air plastic)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">กริลแอร์พลาสติก (Grilles air plastic)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายกริลแอร์พลาสติก (Grilles air plastic)คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
@@ -70,13 +85,13 @@ import Footer from '@/components/common/Footer.astro';
<section id="product-specs" class="section bg-white">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed">
หลายคนอาจเรียกอุปกรณ์นี้ว่า "ตะแกรงแอร์" หรือ "หน้ากากช่องลม" แต่ชื่อที่ถูกต้องและเป็นทางการคือ <strong>หน้ากากแอร์ (Air Grille and Diffuser)</strong> อุปกรณ์นี้ทำหน้าที่เป็นจุดเชื่อมต่อระหว่างระบบท่อส่งลมเย็นกับพื้นที่ใช้งาน หน้ากากแอร์ไม่ได้เป็นเพียงแค่ส่วนตกแต่ง แต่ยังมีบทบาทสำคัญในการกระจายลมเย็นให้ทั่วถึงและมีประสิทธิภาพ
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">หน้าที่หลักของหน้ากากแอร์</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">หน้าที่หลักของหน้ากากแอร์</h3>
<h4 class="text-xl font-semibold text-secondary-800 mt-6 mb-2">1. ควบคุมทิศทางลม</h4>
<p class="text-lg text-secondary-700 leading-relaxed">
@@ -99,11 +114,11 @@ import Footer from '@/components/common/Footer.astro';
</p>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/grilles/fresh-air1-content-1.jpg" alt="Fresh Air" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/grilles-plastic-content.jpg" alt="กริลแอร์พลาสติก" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/fresh-air1-content-1.jpg" alt="Fresh Air" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/grilles-plastic-content.jpg" alt="กริลแอร์พลาสติก" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ประเภทของหน้ากากแอร์</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ประเภทของหน้ากากแอร์</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
หน้ากากแอร์แบ่งออกเป็นหลายประเภทตามลักษณะการใช้งานและการติดตั้ง แต่ที่นิยมใช้กันทั่วไปได้แก่
</p>
@@ -115,11 +130,11 @@ import Footer from '@/components/common/Footer.astro';
</ul>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/grilles/linear-slot-content.jpg" alt="Linear Slot" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/air-grille-content.jpg" alt="หน้ากากแอร์" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/linear-slot-content.jpg" alt="Linear Slot" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/air-grille-content.jpg" alt="หน้ากากแอร์" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ทำไมต้องเลือกหน้ากากแอร์จากเรา?</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ทำไมต้องเลือกหน้ากากแอร์จากเรา?</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
ในฐานะผู้ผลิต <strong>หน้ากากแอร์</strong> ที่มีประสบการณ์ยาวนาน เราเข้าใจถึงความต้องการที่แตกต่างกันของลูกค้า เราจึงใส่ใจในทุกขั้นตอนการผลิต ตั้งแต่การเลือกใช้วัสดุคุณภาพสูง เช่น อลูมิเนียมเกรดดีที่ทนทานต่อการกัดกร่อน ไปจนถึงการออกแบบที่พิถีพิถันเพื่อให้หน้ากากแอร์ทุกชิ้นของเราทำงานได้อย่างเต็มประสิทธิภาพ
</p>
@@ -131,11 +146,11 @@ import Footer from '@/components/common/Footer.astro';
</p>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/grilles/fresh-air1-content-2.jpg" alt="Fresh Air" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/supply-air-content.jpg" alt="Supply Air" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/fresh-air1-content-2.jpg" alt="Fresh Air" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/supply-air-content.jpg" alt="Supply Air" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">หน้ากากแอร์: รู้จักประเภทก่อนเลือกซื้อ</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">หน้ากากแอร์: รู้จักประเภทก่อนเลือกซื้อ</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
หน้ากากแอร์ (Air Grille) ไม่ได้มีแค่รูปแบบเดียว แต่มีหลายชนิดที่ถูกออกแบบมาเพื่อการใช้งานที่แตกต่างกัน การเลือกชนิดที่เหมาะสมจะช่วยเพิ่มประสิทธิภาพของระบบปรับอากาศและยกระดับความสวยงามของพื้นที่ได้อย่างลงตัว
</p>
@@ -162,7 +177,7 @@ import Footer from '@/components/common/Footer.astro';
<li><strong>Jet Diffuser (หน้ากากแอร์แบบหัวเจ็ต):</strong> เป็นหน้ากากแอร์ที่สามารถส่งลมได้ไกลและพุ่งเป็นลำ เหมาะสำหรับพื้นที่ที่มีเพดานสูงมาก เช่น โกดัง โรงภาพยนตร์ หรือโรงงานอุตสาหกรรม</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">สรุป: เลือกหน้ากากแอร์ให้ตอบโจทย์การใช้งาน</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">สรุป: เลือกหน้ากากแอร์ให้ตอบโจทย์การใช้งาน</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
การเลือกใช้หน้ากากแอร์ที่เหมาะสม ไม่เพียงแค่ช่วยให้ระบบปรับอากาศทำงานได้อย่างเต็มประสิทธิภาพ แต่ยังช่วยประหยัดพลังงานและเสริมความสวยงามให้แก่อาคารของคุณอีกด้วย ในฐานะผู้ผลิต เราพร้อมให้คำปรึกษาและผลิตหน้ากากแอร์คุณภาพสูงที่หลากหลาย เพื่อให้ตอบสนองความต้องการของทุกโครงการอย่างแท้จริง
</p>
@@ -180,45 +195,48 @@ import Footer from '@/components/common/Footer.astro';
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<img src="/images/grilles/fresh-air-hing-type.jpg" alt="Fresh Air Hing Type" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/eye-ball.jpg" alt="Eye Ball" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/perforate.jpg" alt="Perforate" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/return-air-hing-type.jpg" alt="Return Air Hing Type" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/hi-flo-jet-diffuser.jpg" alt="Hi-Flo Jet Diffuser" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/louver-2.jpg" alt="Louver 2" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/rectangular.jpg" alt="Rectangular" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/round-ceiling.jpg" alt="Round Ceiling" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/linear-bar.jpg" alt="Linear Bar" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/louver-4.jpg" alt="Louver 4" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/return-air.jpg" alt="Return Air" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/square-ceiling.jpg" alt="Square Ceiling" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/grilles/fresh-air-hing-type.jpg" alt="Fresh Air Hing Type" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/eye-ball.jpg" alt="Eye Ball" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/perforate.jpg" alt="Perforate" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/return-air-hing-type.jpg" alt="Return Air Hing Type" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/hi-flo-jet-diffuser.jpg" alt="Hi-Flo Jet Diffuser" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/louver-2.jpg" alt="Louver 2" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/rectangular.jpg" alt="Rectangular" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/round-ceiling.jpg" alt="Round Ceiling" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/linear-bar.jpg" alt="Linear Bar" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/louver-4.jpg" alt="Louver 4" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/return-air.jpg" alt="Return Air" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/square-ceiling.jpg" alt="Square Ceiling" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

150
src/pages/groove-coupling/index.astro
View File

@@ -7,59 +7,62 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="กรู๊ฟท่อ (Groove Coupling)" description="จำหน่ายกรู๊ฟท่อ (Groove Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/mech_000C.jpg" alt="กรู๊ฟท่อ" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="card-glass p-8">
<img src="/images/products-cropped/mech_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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">กรู๊ฟท่อ (Groove Coupling)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<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 text-white mb-4">กรู๊ฟท่อ (Groove Coupling)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายกรู๊ฟท่อ (Groove Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,10 +70,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-gray-50">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">ข้อดีของการใช้กรู๊ฟท่อ</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">ข้อดีของการใช้กรู๊ฟท่อ</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>กรู๊ฟท่อ</strong> ติดตั้งง่าย สะดวกรวดเร็ว ทำให้ประหยัดทั้งค่าแรงและเวลาในการติดตั้ง นอกจากนี้ยังคล่องตัวรองรับการออกแบบที่หลากหลายตามแต่สภาพหน้างาน สามารถโยกย้าย เปลี่ยนแปลงรูปแบบการติดตั้ง หรือขยายไลน์ท่อเพิ่มเติม รวมทั้งถอดทำความสะอาดและประกอบเข้าใหม่ได้โดยง่าย
@@ -88,146 +92,138 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Installation Section - Redesigned with better layout -->
<section id="installation" class="section bg-white">
<!-- Installation Section -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">วิธีการติดตั้ง</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">วิธีการติดตั้ง</h2>
<!-- Step 1: Grooved -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-green-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">1</span>
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">1</span>
การกรู๊ฟท่อ (Grooved)
</h3>
<!-- Machine Image - Full Width -->
<!-- Machine Image -->
<div class="bg-gray-50 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;" />
<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" decoding="async" />
<h4 class="text-xl font-bold text-secondary-900 mb-2">เครื่องกรู๊ฟท่อไซเลอร์</h4>
<p class="text-secondary-600">หมายเหตุ: การ Grooved ท่อ Syler ต้องใช้เครื่อง Grooved ของ Syler เท่านั้น</p>
</div>
</div>
<!-- Step Cards with consistent sizing -->
<!-- Step Cards -->
<div class="grid md:grid-cols-2 gap-6">
<!-- Step 1.1-1.3 -->
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex items-center mb-4">
<span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.1 - 1.3</span>
<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-secondary-700 mb-4">ตั้งเครื่องกรู๊ฟ สอดท่อให้หน้าตัดท่อชนแนบกับหัวกรู๊ฟ ปรับระดับท่อที่วางพาดกับขาตั้งท่อด้วยมาตรวัดระดับน้ำ จากนั้นดึงคันโยกไฮโดริกให้หัวกดทับเนื้อท่อแล้ว จึงเปิดสวิทช์เครื่องเพื่อเริ่มทำการกรู๊ฟ</p>
<img src="/images/groove-coupling/G2.png" alt="การกรู๊ฟท่อ" class="w-full h-48 object-cover rounded-lg" />
<img src="/images/groove-coupling/G2.png" alt="การกรู๊ฟท่อ" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<!-- Step 1.4 -->
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex items-center mb-4">
<span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.4</span>
<span class="bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.4</span>
</div>
<p class="text-secondary-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" />
<img src="/images/groove-coupling/G7.png" alt="ล็อคระดับปั้มไฮโดริก" class="w-full h-32 object-cover rounded-lg" />
<img src="/images/groove-coupling/G6.png" alt="การวัดร่องกรู๊ฟ" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G7.png" alt="ล็อคระดับปั้มไฮโดริก" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
</div>
<!-- Important Notice -->
<div class="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-6 mt-6">
<h4 class="font-bold text-amber-800 mb-2">⚠️ ข้อควรระวังในการกรู๊ฟ</h4>
<h4 class="font-bold text-amber-800 mb-2">ข้อควรระวังในการกรู๊ฟ</h4>
<p class="text-amber-700">การกรู๊ฟท่อต่อเนื่องเป็นระยะเวลานานหัวกรู๊ฟท่อจะมีความร้อนสะสม หากหัวกรู๊ฟร้อนเกินไปจะทำให้พลาสติกละลายได้ ควรพักเพื่อให้หัวกรู๊ฟเย็นลงจึงค่อยกรู๊ฟท่อต่อไป</p>
</div>
<!-- Additional Step Images -->
<div class="grid grid-cols-3 gap-4 mt-6">
<img src="/images/groove-coupling/G3.png" alt="ความร้อนสะสม" class="w-full h-40 object-cover rounded-lg" />
<img src="/images/groove-coupling/G4.png" alt="การกรู๊ฟท่อ" class="w-full h-40 object-cover rounded-lg" />
<img src="/images/groove-coupling/G5.png" alt="การกรู๊ฟท่อต่อ" class="w-full h-40 object-cover rounded-lg" />
<img src="/images/groove-coupling/G3.png" alt="ความร้อนสะสม" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G4.png" alt="การกรู๊ฟท่อ" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G5.png" alt="การกรู๊ฟท่อต่อ" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
<!-- Step 2: Coupling -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-green-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">2</span>
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">2</span>
การใส่ข้อต่อคัปปิ้ง (Coupling)
</h3>
<p class="text-lg text-secondary-700 mb-8">เมื่อกรู๊ฟท่อเรียบร้อยแล้ว ให้ทำการสวมข้อต่อ Coupling ตามขั้นตอนดังนี้</p>
<!-- Coupling Steps - Card Grid -->
<!-- Coupling Steps -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Step 2.1 -->
<div class="bg-white border border-gray-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-secondary-700 mb-4">ทากาวเฮอร์เมสซีล 55 ที่หน้าตัดท่อเพื่อป้องกันสนิมบริเวณหน้าตัดท่อ</p>
<img src="/images/groove-coupling/G8.png" alt="ทากาวเฮอร์เมสซีล" class="w-full h-40 object-cover rounded-lg" />
<img src="/images/groove-coupling/G8.png" alt="ทากาวเฮอร์เมสซีล" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<!-- Step 2.2 -->
<div class="bg-white border border-gray-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-secondary-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" />
<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" decoding="async" />
</div>
<!-- Step 2.3 -->
<div class="bg-white border border-gray-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-secondary-700 mb-4">ทาน้ำยาหล่อลื่น Lubricant ให้ทั่วแหวนยาง EPDM เพื่อยืดอายุการใช้งาน</p>
<img src="/images/groove-coupling/G10.png" alt="ทาน้ำยาหล่อลื่น" class="w-full h-40 object-cover rounded-lg" />
<img src="/images/groove-coupling/G10.png" alt="ทาน้ำยาหล่อลื่น" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<!-- Step 2.4 -->
<div class="bg-white border border-gray-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-secondary-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" />
<img src="/images/groove-coupling/G12.png" alt="สวมเข้ากับข้อต่อ" class="w-full h-28 object-cover rounded-lg" />
<img src="/images/groove-coupling/G11.png" alt="สวมยางเข้ากับท่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G12.png" alt="สวมเข้ากับข้อต่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
<!-- Step 2.5 -->
<div class="bg-white border border-gray-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-secondary-700 mb-4">นำข้อต่อ Coupling มาประกบพร้อมขันน๊อตจนแน่น</p>
<img src="/images/groove-coupling/G13.png" alt="ขันน๊อตจนแน่น" class="w-full h-48 object-cover rounded-lg" />
<img src="/images/groove-coupling/G13.png" alt="ขันน๊อตจนแน่น" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</div>
<!-- Completed Result -->
<!-- Deleted as per user request -->
</div>
</section>
<!-- Product Gallery -->
<section id="product-images" class="section bg-gray-50">
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">รุ่นของสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">รุ่นของสินค้า</h2>
<div class="space-y-6 max-w-6xl mx-auto">
<img src="/images/groove-coupling/Grooved01.jpg" alt="รุ่นที่ 1" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/groove-coupling/Grooved02.jpg" alt="รุ่นที่ 2" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/groove-coupling/Grooved01.jpg" alt="รุ่นที่ 1" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/Grooved02.jpg" alt="รุ่นที่ 2" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

237
src/pages/index.astro
View File

@@ -5,10 +5,10 @@ import Footer from '@/components/common/Footer.astro';
const categories = [
{ name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr', image: '/images/products-cropped/ppr-pipe_000C.jpg' },
{ name: 'ท่อ HDPE', slug: '/ท่อhdpe', image: '/images/products-cropped/hdpe001.jpg' },
{ name: 'ท่อ HDPE', slug: '/ท่อhdpe', image: '/images/products-cropped/hdpe001.png' },
{ name: 'ท่อ UPVC', slug: '/ท่อ-upvc', image: '/images/products-cropped/upvc-pipe_000C.jpg' },
{ name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc', image: '/images/products-cropped/pvc-pipe_000C.jpg' },
{ name: 'ท่อไซเลอร์', slug: '/ท่อไซเลอร์', image: '/images/products-cropped/SYLER01.jpg' },
{ name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc', image: '/images/products-cropped/pvc-standard-01.jpg' },
{ name: 'ท่อไซเลอร์', slug: '/ท่อไซเลอร์', image: '/images/products-cropped/syler-pipe-cold-water.jpg' },
{ name: 'ท่อระบายน้ำ 3 ชั้น', slug: '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท', image: '/images/products-cropped/XYLENT_001.png' },
{ name: 'เครื่องเชื่อมท่อ', slug: '/เครื่องเชื่อมท่อ-pipe-coupling-machine', image: '/images/products-cropped/pipe-coupling-machine_000.jpg' },
{ name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe', image: '/images/HDPE-welding-crop.jpg' },
@@ -18,7 +18,7 @@ const categories = [
{ name: 'วาล์ว', slug: '/วาล์ว-valve', image: '/images/products-cropped/valve_000C.jpg' },
{ name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs', image: '/images/products-cropped/durgo_000C.jpg' },
{ name: 'ปั๊มน้ำ', slug: '/water-pump', image: '/images/products-cropped/water-pump_000C.jpg' },
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet', image: '/images/products-cropped/Eye-Ball.jpg' },
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet', image: '/images/products-raw/ball-jet/main-ball-jet.jpg' },
{ name: 'กริลแอร์', slug: '/grilles', image: '/images/products-cropped/grilles_000C.jpg' },
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง', image: '/images/products-cropped/extinguishers_000C.jpg' },
{ name: 'Realflex', slug: '/realflex', image: '/images/products-cropped/realflex_000C.jpg' },
@@ -26,7 +26,7 @@ const categories = [
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak', image: '/images/thermobreak/thermobreak-solarblock.png' },
{ name: 'ระบบกรองน้ำ', slug: '/water-treatment', image: '/images/products-cropped/water-treatment_000C.jpg' },
{ name: 'ระบบรั้ว', slug: '/ระบบรั้ว', image: '/images/products-cropped/vineman_000C.jpg' },
{ name: 'รั้วเทวดา', slug: '/รั้วเทวดา', image: '/images/products-cropped/Banner-TDV2.jpg' },
{ name: 'รั้วเทวดา', slug: '/รั้วเทวดา', image: '/images/products-raw/tevada/TEVADA_001-987x1024.png' },
];
const featuredProducts = [
@@ -39,48 +39,44 @@ const featuredProducts = [
<BaseLayout title="หน้าแรก">
<Header slot="header" />
<!-- Hero Section -->
<section id="hero" class="relative bg-white section overflow-hidden">
<div class="container-custom">
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
<div class="animate-fade-in">
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-secondary-900 mb-4 md:mb-6 leading-tight">
ผู้เชี่ยวชาญระบบน้ำ<br/>
<span class="text-green-600">คุณภาพสูง ราคาโรงงาน</span>
</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 md:mb-8 leading-relaxed">
บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
</p>
<div class="flex flex-wrap justify-center gap-3 md:gap-4">
<a href="/all-products" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 md:px-8 md:py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">ดูสินค้าทั้งหมด</a>
<a href="/contact-us" class="bg-white text-green-600 px-5 py-3 md:px-8 md:py-4 rounded-xl border-2 border-green-500 font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">ติดต่อเรา</a>
<!-- Hero Section - Compact -->
<section class="hero-gradient">
<div class="container-custom py-16">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="stagger-container">
<div class="stagger-item" data-delay="1">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-6">
ผู้เชี่ยวชาญระบบน้ำ
</span>
</div>
<div class="flex items-center sm:space-x-8 space-x-4 sm:mt-12 mt-8 justify-center">
<div>
<div class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">10+</div>
<div class="text-secondary-600 text-xs sm:text-lg">ปีประสบการณ์</div>
</div>
<div>
<div class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">1000+</div>
<div class="text-secondary-600 text-xs sm:text-lg">โปรเจคต์</div>
</div>
<div>
<div class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">500+</div>
<div class="text-secondary-600 text-xs sm:text-lg">สินค้า</div>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight stagger-item" data-delay="2">
ระบบน้ำ<br/>
<span class="text-white">คุณภาพสูง</span><br/>
ราคาโรงงาน
</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed max-w-xl stagger-item" data-delay="3">
บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย คุณภาพสูง ราคาถูก
</p>
<div class="flex flex-wrap gap-4 stagger-item" data-delay="4">
<a href="/all-products" class="btn-white">
ดูสินค้าทั้งหมด
</a>
<a href="/contact-us" class="btn-white">
ติดต่อเรา
</a>
</div>
</div>
<div class="relative animate-slide-up mt-6 md:mt-0">
<div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-accent-500/20 rounded-3xl blur-3xl"></div>
<div class="grid grid-cols-3 gap-2 md:gap-4">
<div class="col-span-2 row-span-2">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="PPR Pipe" class="w-full h-full object-cover rounded-2xl shadow-xl" />
<div class="relative hidden lg:block stagger-item" data-delay="5">
<div class="relative grid grid-cols-3 gap-3">
<div class="col-span-2 row-span-2 image-frame shadow-2xl">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="PPR Pipe" class="w-full h-full object-cover" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="col-span-1">
<img src="/images/products-cropped/grilles_000C.jpg" alt="Grilles" class="w-full h-full object-cover rounded-2xl shadow-xl" />
<div class="image-frame shadow-xl">
<img src="/images/products-cropped/grilles_000C.jpg" alt="Grilles" class="w-full h-full object-cover" width="300" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="col-span-1">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Thermobreak" class="w-full h-full object-cover rounded-2xl shadow-xl" />
<div class="image-frame shadow-xl">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Thermobreak" class="w-full h-full object-cover" width="300" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
</div>
</div>
@@ -88,26 +84,50 @@ const featuredProducts = [
</div>
</section>
<!-- Featured Products -->
<section id="featured-products" class="section bg-gray-50">
<!-- Stats Section - Light contrast -->
<section class="bg-gray-100 py-12">
<div class="container-custom">
<div class="text-center mb-16">
<h2 class="section-title">สินค้าแนะนำ</h2>
<p class="section-subtitle mx-auto">สินค้ายอดนิยมจาก ดีล พลัส เทค</p>
<div class="grid grid-cols-3 gap-8 text-center">
<div>
<div class="text-4xl sm:text-5xl font-bold text-primary-600 tracking-tight">10+</div>
<div class="text-sm sm:text-base text-secondary-600 uppercase tracking-wider mt-2">ปีประสบการณ์</div>
</div>
<div>
<div class="text-4xl sm:text-5xl font-bold text-primary-600 tracking-tight">1000+</div>
<div class="text-sm sm:text-base text-secondary-600 uppercase tracking-wider mt-2">โปรเจคต์สำเร็จ</div>
</div>
<div>
<div class="text-4xl sm:text-5xl font-bold text-primary-600 tracking-tight">500+</div>
<div class="text-sm sm:text-base text-secondary-600 uppercase tracking-wider mt-2">สินค้าในคลัง</div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-8">
{featuredProducts.map(product => (
<a href={product.slug} class="card group overflow-hidden">
<div class="relative h-64 overflow-hidden">
<img src={product.image} alt={product.name} class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
</div>
</section>
<!-- Featured Products -->
<section class="section bg-white">
<div class="container-custom">
<div class="text-center mb-12">
<span class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
สินค้าแนะนำ
</span>
<h2 class="section-title">สินค้ายอดนิยม</h2>
<p class="section-subtitle mx-auto mt-4">สินค้าคุณภาพสูงจาก ดีล พลัส เทค</p>
</div>
<div class="grid md:grid-cols-3 gap-8 stagger-container">
{featuredProducts.map((product, index) => (
<a href={product.slug} class="card-hover group overflow-hidden block stagger-item" data-delay={index + 1}>
<div class="relative h-72 overflow-hidden img-zoom">
<img src={product.image} alt={product.name} class="w-full h-full object-cover" width="400" height="288" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="absolute inset-0 bg-gradient-to-t from-secondary-900/80 via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-6">
<h3 class="text-2xl font-bold text-white mb-2">{product.name}</h3>
<h3 class="text-lg font-bold text-white">{product.name}</h3>
</div>
</div>
<div class="p-6">
<p class="text-secondary-600">{product.description}</p>
<span class="inline-flex items-center mt-4 text-green-600 font-medium group-hover:text-green-700">
<p class="text-secondary-600 mb-4">{product.description}</p>
<span class="inline-flex items-center text-primary-600 font-semibold group-hover:text-primary-700 link-animate">
ดูรายละเอียด
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" 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" />
@@ -120,21 +140,25 @@ const featuredProducts = [
</div>
</section>
<!-- Product Categories -->
<section id="product-categories" class="section bg-white">
<!-- Product Categories - Horizontal Scroll on Mobile -->
<section class="section gradient-mesh">
<div class="container-custom">
<div class="text-center mb-16">
<h2 class="section-title">หมวดหมู่สินค้าทั้งหมด</h2>
<p class="section-subtitle mx-auto">เราจำหน่ายสินค้าระบบน้ำคุณภาพสูง ครบวงจร</p>
<div class="text-center mb-12">
<span class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
หมวดหมู่สินค้า
</span>
<h2 class="section-title">สินค้าทั้งหมด</h2>
<p class="section-subtitle mx-auto mt-4">เราจำหน่ายสินค้าระบบน้ำคุณภาพสูง ครบวงจร</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
{categories.map(cat => (
<a href={cat.slug} class="product-card group">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 stagger-container">
{categories.map((cat, index) => (
<a href={cat.slug} class="product-card group stagger-item" data-delay={((index % 8) + 1)}>
<div class="product-card-image">
<img src={cat.image} alt={cat.name} onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src={cat.image} alt={cat.name} width="300" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">{cat.name}</h3>
<h3 class="text-base font-bold text-secondary-800 group-hover:text-primary-600 transition-colors text-center">{cat.name}</h3>
</div>
</a>
))}
@@ -142,59 +166,68 @@ const featuredProducts = [
</div>
</section>
<!-- Why Choose Us -->
<section id="why-choose-us" class="section bg-gray-50">
<!-- Why Choose Us - Dark Section -->
<section class="section-dark">
<div class="container-custom">
<div class="text-center mb-16">
<h2 class="section-title">ทำไมต้องเลือกเรา</h2>
<p class="section-subtitle mx-auto">ความมุ่งมั่นของเราต่อคุณภาพและบริการ</p>
<div class="text-center mb-12">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
ทำไมเลือกเรา
</span>
<h2 class="section-title text-white">ความมุ่งมั่นของเรา</h2>
<p class="section-subtitle mx-auto mt-4 text-white/70">ต่อคุณภาพและบริการที่ดีที่สุด</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="card p-8 text-center animate-on-scroll">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="grid md:grid-cols-3 gap-8 stagger-container">
<div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20 stagger-item" data-delay="1">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6">
<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-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">คุณภาพสูง</h3>
<p class="text-secondary-600 text-lg">สินค้าคุณภาพมาตรฐาน มั่นใจได้ในความทนทาน</p>
<h3 class="text-xl font-bold text-white mb-4">คุณภาพสูง</h3>
<p class="text-white/80">สินค้าคุณภาพมาตรฐาน มั่นใจได้ในความทนทาน</p>
</div>
<div class="card p-8 text-center animate-on-scroll">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20 stagger-item" data-delay="2">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6">
<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="text-2xl font-bold text-secondary-900 mb-4">ราคาโรงงาน</h3>
<p class="text-secondary-600 text-lg">ราคาแข่งขันได้ คุ้มค่าต่อการลงทุน</p>
<h3 class="text-xl font-bold text-white mb-4">ราคาโรงงาน</h3>
<p class="text-white/80">ราคาแข่งขันได้ คุ้มค่าต่อการลงทุน</p>
</div>
<div class="card p-8 text-center animate-on-scroll">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20 stagger-item" data-delay="3">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-6">
<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="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">จัดส่งรวดเร็ว</h3>
<p class="text-secondary-600 text-lg">จัดส่งทันใจ ส่งฟรี กทม. ปริมณฑล</p>
<h3 class="text-xl font-bold text-white mb-4">จัดส่งรวดเร็ว</h3>
<p class="text-white/80">จัดส่งทันใจ ส่งฟรี กทม. ปริมณฑล</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-gradient py-20">
<div class="container-custom text-center">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
พร้อมให้คำปรึกษาฟรี
</h2>
<p class="text-xl text-secondary-300 mb-8 max-w-2xl mx-auto">
ติดต่อเราวันนี้เพื่อรับคำแนะนำเกี่ยวกับระบบน้ำที่เหมาะสมกับโปรเจคต์ของคุณ
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
</div>
</div>
</section>
<Footer slot="footer" />
</BaseLayout>
<script>
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
},
{ threshold: 0.1 }
);
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
</script>

26
src/pages/join-us/index.astro
View File

@@ -1,26 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="ร่วมงานกับเรา" description="ตำแหน่งงานที่บริษัท ดีล พลัส เทค จำกัด รับสมัครมีดังนี้">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">ร่วมงานกับเรา</h1>
<div class="card p-8 md:p-12 bg-white">
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">ร่วมงานกับเรา - Deal Plus Tech บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่าย ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก ปรึกษา Dealplustech ได้ตลอดเวลาทำการ Sales Engineer Search for: Search Button Contact Details บริษัท ดีล พลัส เทค จำกัด 9/70 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค กทม.</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">10160 ส่งสินค้าฟรี กรุงเทพมหานคร ปริมณฑล Telephone: 090-555-1415 E-mail: dealplustech@gmail.com Newsletter Sign up for our e-mail to get latest news.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

186
src/pages/pipe-coupling/index.astro
View File

@@ -7,59 +7,62 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ข้อต่อท่อ SMC (Pipe Coupling)" description="จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/pipe-coupling/BG-SMC02.png" alt="ข้อต่อท่อ SMC" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="card-glass p-8">
<img src="/images/pipe-coupling/BG-SMC02.png" alt="ข้อต่อท่อ SMC" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ข้อต่อท่อ SMC (Pipe Coupling)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<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 text-white mb-4">ข้อต่อท่อ SMC (Pipe Coupling)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,15 +70,17 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Product Specs Wrapper -->
<section id="product-specs" class="section bg-white">
<div class="container">
<h2 class="text-2xl font-bold mb-4">รายละเอียดสินค้า</h2>
<!-- Technical Revolution Section -->
<section id="technical-revolution" class="section bg-gray-50">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">การปฏิวัติวงการท่อส่งน้ำและก๊าซ</h2>
<h2 class="text-2xl font-bold text-secondary-900 mb-4">รายละเอียดสินค้า</h2>
</div>
</section>
<!-- Technical Revolution -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">การปฏิวัติวงการท่อส่งน้ำและก๊าซ</h2>
<div class="max-w-4xl mx-auto">
<div class="prose prose-lg max-w-none">
@@ -98,13 +103,13 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Certificates Section -->
<section id="certificates" class="section bg-white">
<!-- Certificates -->
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">มาตรฐานและการรับรอง</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">มาตรฐานและการรับรอง</h2>
<div class="max-w-4xl mx-auto">
<img src="/images/pipe-coupling/Certificates-smc.png" alt="มาตรฐานและการรับรองข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-lg mb-8" />
<img src="/images/pipe-coupling/Certificates-smc.png" alt="มาตรฐานและการรับรองข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-lg mb-8" width="800" height="600" loading="lazy" decoding="async" />
<p class="text-lg text-secondary-700 leading-relaxed text-center">
ข้อต่อท่อ SMC ได้รับการรับรองมาตรฐานจากสถาบันระดับสากล สามารถใช้งานได้กับมาตรฐาน มอก. และมาตรฐานสากลอื่นๆ
@@ -113,27 +118,27 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Overall Product Images -->
<section id="product-overview" class="section bg-gray-50">
<!-- Product Overview -->
<section class="section bg-gray-50">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<div class="grid md:grid-cols-2 gap-6">
<img src="/images/pipe-coupling/SMC-Page-03.jpg" alt="ภาพรวมข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-04.jpg" alt="ภาพรวมข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-03.jpg" alt="ภาพรวมข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-04.jpg" alt="ภาพรวมข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</div>
</section>
<!-- Product Types Section -->
<section id="product-types" class="section bg-white">
<!-- Product Types -->
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">รุ่นของสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">รุ่นของสินค้า</h2>
<!-- GR Type (merged with Grip Ring) -->
<!-- GR Type -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 flex items-center">
<span class="bg-green-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4">GR</span>
<h3 class="text-xl font-bold text-secondary-900 mb-6 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4">GR</span>
รุ่น GR / Grip Ring (สำหรับติดตั้งใหม่)
</h3>
<div class="grid md:grid-cols-2 gap-8 items-start">
@@ -142,18 +147,18 @@ import Footer from '@/components/common/Footer.astro';
<strong>รุ่น GR / Grip Ring</strong> เป็นข้อต่อท่อแบบถอดได้ (Disassembly) เหมาะสำหรับการติดตั้งท่อใหม่ มีวงแหวนกันการเคลื่อนที่ (Grip) อยู่ภายใน ช่วยให้ท่อยึดติดแน่นไม่หลุดแม้ในสภาพแรงดันสูง สามารถถอดประกอบใหม่ได้หลังการติดตั้ง เหมาะสำหรับงานที่ต้องการความยืดหยุ่นในการปรับเปลี่ยนระบบท่อภายหลังและงานที่ต้องการความแข็งแรงพิเศษ
</p>
</div>
<img src="/images/pipe-coupling/SMC-Page-05.jpg" alt="รุ่น GR / Grip Ring" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-05.jpg" alt="รุ่น GR / Grip Ring" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
<!-- RCH Type -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 flex items-center">
<h3 class="text-xl font-bold text-secondary-900 mb-6 flex items-center">
<span class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4">RCH</span>
รุ่น RCH (สำหรับงานซ่อม)
</h3>
<div class="grid md:grid-cols-2 gap-8 items-start">
<img src="/images/pipe-coupling/SMC-Page-07.jpg" alt="รุ่น RCH" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-07.jpg" alt="รุ่น RCH" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<div class="bg-white rounded-xl p-6 shadow-sm">
<p class="text-secondary-700 leading-relaxed">
รุ่น RCH เป็นข้อต่อท่อแบบถอดได้เช่นกัน แต่ออกแบบมาเพื่อการซ่อมแซมท่อที่รั่วซึมหรือเสียหาย สามารถติดตั้งได้โดยไม่ต้องตัดท่อส่วนที่เสียหายออก ช่วยประหยัดเวลาและค่าใช้จ่ายในการซ่อมแซม
@@ -164,9 +169,9 @@ import Footer from '@/components/common/Footer.astro';
<!-- Multi-Flex -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Multi-Flex</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6">Multi-Flex</h3>
<div class="grid md:grid-cols-2 gap-8 items-start">
<img src="/images/pipe-coupling/SMC-Page-06.jpg" alt="Multi-Flex" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-06.jpg" alt="Multi-Flex" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<div class="bg-white rounded-xl p-6 shadow-sm">
<p class="text-secondary-700 leading-relaxed">
Multi-Flex เป็นข้อต่อท่อแบบยืดหยุ่นได้ สามารถรับการเคลื่อนที่ของท่อได้ดี เหมาะสำหรับการติดตั้งในพื้นที่ที่มีการสั่นสะเทือนหรือการเคลื่อนตัวเล็กน้อย
@@ -177,22 +182,22 @@ import Footer from '@/components/common/Footer.astro';
<!-- Repair Clamp -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Repair Clamp</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6">Repair Clamp</h3>
<div class="grid md:grid-cols-2 gap-8 items-start">
<div class="bg-white rounded-xl p-6 shadow-sm">
<p class="text-secondary-700 leading-relaxed">
Repair Clamp เป็นอุปกรณ์ซ่อมท่อแบบเร่งด่วน สามารถใช้ห้ามรั่วซึมของท่อได้ทันทีโดยไม่ต้องหยุดระบบน้ำ เหมาะสำหรับการซ่อมฉุกเฉิน
</p>
</div>
<img src="/images/pipe-coupling/SMC-Page-08.jpg" alt="Repair Clamp" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-08.jpg" alt="Repair Clamp" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
<!-- Y.N. Pipe Coupling -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-secondary-900 mb-6">Y.N. Pipe Coupling</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6">Y.N. Pipe Coupling</h3>
<div class="grid md:grid-cols-2 gap-8 items-start">
<img src="/images/pipe-coupling/SMC-Page-09.jpg" alt="Y.N. Pipe Coupling" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-09.jpg" alt="Y.N. Pipe Coupling" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<div class="bg-white rounded-xl p-6 shadow-sm">
<p class="text-secondary-700 leading-relaxed">
Y.N. Pipe Coupling เป็นข้อต่อท่อรูปตัว Y สำหรับการเชื่อมต่อท่อแยก ออกแบบมาเพื่อการติดตั้งระบบท่อที่ต้องการแยกทิศทางการไหลของน้ำหรือก๊าซ
@@ -203,10 +208,10 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Installation Section -->
<section id="installation" class="section bg-gray-50">
<!-- Installation -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">วิธีการติดตั้ง</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">วิธีการติดตั้ง</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-xl p-8 shadow-md">
@@ -222,69 +227,62 @@ import Footer from '@/components/common/Footer.astro';
</div>
<div class="mt-8">
<img src="/images/pipe-coupling/SMC-Page-17.jpg" alt="วิธีการติดตั้งข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-lg mb-6" />
<img src="/images/pipe-coupling/SMC-Page-17.jpg" alt="วิธีการติดตั้งข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-lg mb-6" width="800" height="600" loading="lazy" decoding="async" />
<div class="grid md:grid-cols-2 gap-6">
<img src="/images/pipe-coupling/SMC-Page-16.jpg" alt="วิธีการติดตั้งข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-21.jpg" alt="วิธีการติดตั้งข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-16.jpg" alt="วิธีการติดตั้งข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-21.jpg" alt="วิธีการติดตั้งข้อต่อท่อ SMC" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</div>
</div>
</section>
<!-- Specifications Section -->
<section id="specifications" class="section bg-gray-50">
<!-- Specifications -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">ข้อมูลจำเพาะ</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">ข้อมูลจำเพาะ</h2>
<div class="max-w-4xl mx-auto">
<div class="grid md:grid-cols-2 gap-6">
<img src="/images/pipe-coupling/SMC-Page-12.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-14.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-18.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-20.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-15.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-12.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-14.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-18.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-20.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-15.jpg" alt="ข้อมูลจำเพาะ" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</div>
</section>
<!-- Usage Examples -->
<section id="usage" class="section bg-white">
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">ตัวอย่างการใช้งาน</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">ตัวอย่างการใช้งาน</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<img src="/images/pipe-coupling/SMC-Page-11.jpg" alt="ตัวอย่างการใช้งาน" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-10.jpg" alt="ตัวอย่างการใช้งาน" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-22.jpg" alt="ตัวอย่างการใช้งาน" class="w-full h-auto rounded-xl shadow-md" />
<img src="/images/pipe-coupling/SMC-Page-11.jpg" alt="ตัวอย่างการใช้งาน" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-10.jpg" alt="ตัวอย่างการใช้งาน" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/pipe-coupling/SMC-Page-22.jpg" alt="ตัวอย่างการใช้งาน" class="w-full h-auto rounded-xl shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- More Details -->
<section id="more-details" class="section bg-gray-50">
<div class="container-custom">
</div>
</section>
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

59
src/pages/portfolio/index.astro
View File

@@ -23,54 +23,57 @@ const projects = [
<BaseLayout title="ผลงาน | Portfolio" description="ผลงานของบริษัท ดีล พลัส เทค จำกัด ติดตั้งท่อ PPR ท่อ HDPE ระบบประปา">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<main class="bg-white min-h-screen">
<!-- Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<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 text-white mb-4">ผลงานของเรา</h1>
<p class="text-lg sm:text-xl text-white/80 max-w-2xl">ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ปรึกษา Dealplustech ได้ตลอดเวลาทำการ</p>
</div>
</section>
<section id="portfolio-content" class="section">
<div class="container-custom">
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4">ผลงาน</h1>
<p class="text-lg text-secondary-600">ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ปรึกษา Dealplustech ได้ตลอดเวลาทำการ</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{projects.map(project => (
<div class="card overflow-hidden group">
<div class="card-glass overflow-hidden group">
<div class="relative h-64 overflow-hidden">
<img
src={project.image}
alt={project.name}
class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
width="768" height="1024"
loading="lazy" decoding="async"
onerror="this.src='/images/logo/dealplustech-logo.png'"
/>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-green-600 transition-colors">{project.name}</h3>
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">{project.name}</h3>
</div>
</div>
))}
</div>
<div class="mt-16 bg-green-50 p-8 rounded-xl">
<h2 class="text-2xl font-bold text-secondary-900 mb-4">Contact Details</h2>
<div class="grid md:grid-cols-2 gap-6">
<div>
<p class="text-lg text-secondary-700 leading-relaxed mb-2">
<strong>บริษัท ดีล พลัส เทค จำกัด</strong><br/>
9/70 ซอยนครลุง 17 แขวงบางไผ่ เขตบางแค กทม. 10160
</p>
<p class="text-lg text-secondary-700 leading-relaxed">
ส่งสินค้าฟรี กรุงเทพมหานคร ปริมณฑล
</p>
</div>
<div>
<p class="text-lg text-secondary-700 leading-relaxed mb-2">
<strong>โทร:</strong> 090-555-1415
</p>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>อีเมล:</strong> dealplustech@gmail.com
</p>
<!-- CTA Section -->
<section class="cta-gradient py-16 mt-16 rounded-xl">
<div class="text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-white 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="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
<a href="/contact-us" class="btn-white">
ติดต่อเรา
</a>
</div>
</div>
</div>
</section>
</div>
</section>
</main>

206
src/pages/pp-r-pp-rct-poloplast/index.astro
View File

@@ -7,79 +7,73 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="PP-R / PP-RCT POLOPLAST" description="PP-R / PP-RCT POLOPLAST ทางเลือกที่ดีกว่า ด้วยประสบการณ์ในการผลิตที่ยาวนานกว่า 30 ปี ผลิตจากประเทศเยอรมัน มาตรฐาน DVGW, SKZ, ICC-ES">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img
src="/images/poloplast/POLOPLAST_001.png"
alt="PP-R / PP-RCT POLOPLAST"
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'"
/>
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">PP-R / PP-RCT POLOPLAST</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
ท่อ PPR
</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">PP-R / PP-RCT POLOPLAST</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ติดต่อสอบถามส่วนลด ราคาเพิ่มเติม ติดต่อ Dealplustech ได้ตลอดเวลาทำการ
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ผลิตจากประเทศเยอรมัน มาตรฐาน DVGW, SKZ, ICC-ES</span>
<span>ผลิตจากประเทศเยอรมัน มาตรฐาน DVGW, SKZ, ICC-ES</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ติดตั้งง่าย ประสานเป็นเนื้อเดียวกันได้อย่างสมบูรณ์</span>
<span>ติดตั้งง่าย ประสานเป็นเนื้อเดียวกันได้อย่างสมบูรณ์</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">เหมาะสำหรับท่อน้ำดื่ม สะอาดปราศจากสารตกค้าง</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันอายุการใช้งาน 10 ปี</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">ผลิตตามมาตรฐาน DIN 8077/8078</span>
<span>เหมาะสำหรับท่อน้ำดื่ม สะอาดปราศจากสารตกค้าง</span>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- Factory Section -->
<section id="factory" class="section bg-white">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">FACTORY IN GERMANY</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">FACTORY IN GERMANY</h2>
<div class="grid md:grid-cols-2 gap-6">
<img
src="/images/poloplast/POLOPLAST_002.png"
@@ -99,7 +93,7 @@ import Footer from '@/components/common/Footer.astro';
<section id="product-specs" class="section bg-gray-50">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 mb-6">
<strong>PP-R / PP-RCT POLOPLAST</strong> ทางเลือกที่ดีกว่า ด้วยประสบการณ์ในการผลิตที่ยาวนานกว่า 30 ปี จึงเข้าใจและเชี่ยวชาญด้านระบบท่อน้ำพีพี-อาร์เป็นอย่างดี นำมาสู่การออกแบบและพัฒนาผลิตภัณฑ์ตามหลักวิศวกรรมศาสตร์ เพื่อแก้ไขปัญหาจากการใช้งานจริง
@@ -118,7 +112,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- Comparison Table 1 - Wide -->
<section id="comparison" class="section bg-white">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 text-center">ตารางเปรียบเทียบการใช้งาน</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6 text-center">ตารางเปรียบเทียบการใช้งาน</h3>
<div class="max-w-5xl mx-auto">
<img
src="/images/poloplast/POLOPLAST_004.png"
@@ -132,7 +126,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- Comparison Table 2 - Portrait -->
<section id="pressure-life" class="section bg-gray-50">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 text-center">ตารางเปรียบเทียบแรงดันกับอายุการใช้งานของ PP-R และ PP-RCT</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6 text-center">ตารางเปรียบเทียบแรงดันกับอายุการใช้งานของ PP-R และ PP-RCT</h3>
<div class="max-w-2xl mx-auto">
<img
src="/images/poloplast/POLOPLAST_015.png"
@@ -146,7 +140,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- ML5 Technology -->
<section id="ml5" class="section bg-white">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 text-center">MULTI LAYER รุ่น ML5 เทคโนโลยีของระบบท่อ</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6 text-center">MULTI LAYER รุ่น ML5 เทคโนโลยีของระบบท่อ</h3>
<div class="max-w-3xl mx-auto mb-8">
<img
src="/images/poloplast/POLOPLAST_016.png"
@@ -156,23 +150,23 @@ import Footer from '@/components/common/Footer.astro';
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card p-6 bg-gray-50">
<h4 class="text-lg font-bold text-green-600 mb-2">1. PP-R External Layer</h4>
<h4 class="text-lg font-bold text-primary-600 mb-2">1. PP-R External Layer</h4>
<p class="text-secondary-700">เม็ดพลาสติกคุณภาพสูง ติดตั้งง่าย เชื่อมเป็นเนื้อเดียวกันได้อย่างสมบูรณ์</p>
</div>
<div class="card p-6 bg-gray-50">
<h4 class="text-lg font-bold text-green-600 mb-2">2. HPCE Second Layer</h4>
<h4 class="text-lg font-bold text-primary-600 mb-2">2. HPCE Second Layer</h4>
<p class="text-secondary-700">ชั้นไฟเบอร์พิเศษที่คิดค้นโดย POLOPLAST อัตราการยืด (Linear Expansion) ที่น้อยที่สุดเพียง 0.038 mm/mK ทนต่อแรงกระแทกสูงเป็นพิเศษ</p>
</div>
<div class="card p-6 bg-gray-50">
<h4 class="text-lg font-bold text-green-600 mb-2">3. PP-RCT Central Layer</h4>
<h4 class="text-lg font-bold text-primary-600 mb-2">3. PP-RCT Central Layer</h4>
<p class="text-secondary-700">ยืดอายุการใช้งาน ลดการยืดหดขยายตัวถึง 5 เท่า รองรับอุณหภูมิได้สูงถึง 95°C</p>
</div>
<div class="card p-6 bg-gray-50">
<h4 class="text-lg font-bold text-green-600 mb-2">4. HPCE Second Inner Layer</h4>
<h4 class="text-lg font-bold text-primary-600 mb-2">4. HPCE Second Inner Layer</h4>
<p class="text-secondary-700">เพิ่มความต้านทานและทนต่อแรงกระแทก</p>
</div>
<div class="card p-6 bg-gray-50">
<h4 class="text-lg font-bold text-green-600 mb-2">5. PP-RCT Inner Layer</h4>
<h4 class="text-lg font-bold text-primary-600 mb-2">5. PP-RCT Inner Layer</h4>
<p class="text-secondary-700">แข็งแรง ทนต่อแรงดัน พื้นผิวเรียบ ไม่เกิดตะกรัน</p>
</div>
</div>
@@ -182,15 +176,15 @@ import Footer from '@/components/common/Footer.astro';
<!-- Pipe Types -->
<section id="pipe-types" class="section bg-gray-50">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-8 text-center">ประเภทท่อ PP-R / PP-RCT</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-8 text-center">ประเภทท่อ PP-R / PP-RCT</h3>
<!-- PP-R PIPE SDR 11 -->
<div class="card p-6 bg-white mb-8">
<h4 class="text-xl font-bold text-secondary-900 mb-4">PP-R PIPE SDR 11 / S 5</h4>
<p class="text-secondary-600 mb-4">ใช้กับ ท่อประปา / ท่อน้ำอุ่น / อื่นๆ อุณหภูมิ 3-60°C อายุการใช้งาน 50 ปี* ความดัน 10 บาร์ ความยาว/เส้น 4 เมตร</p>
<div class="grid md:grid-cols-2 gap-4">
<img src="/images/poloplast/POLOPLAST_005.png" alt="PP-R PIPE SDR 11" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_006.png" alt="PP-R PIPE SDR 11 Specifications" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_005.png" alt="PP-R PIPE SDR 11" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/POLOPLAST_006.png" alt="PP-R PIPE SDR 11 Specifications" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
@@ -199,8 +193,8 @@ import Footer from '@/components/common/Footer.astro';
<h4 class="text-xl font-bold text-secondary-900 mb-4">PP-R PIPE SDR 6 / S 2.5</h4>
<p class="text-secondary-600 mb-4">ใช้กับ ท่อประปา / ท่อน้ำร้อน / อื่นๆ อุณหภูมิ 3-95°C อายุการใช้งาน 50 ปี* ความดัน 20 บาร์ ความยาว/เส้น 4 เมตร</p>
<div class="grid md:grid-cols-2 gap-4">
<img src="/images/poloplast/POLOPLAST_007.png" alt="PP-R PIPE SDR 6" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_008.png" alt="PP-R PIPE SDR 6 Specifications" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_007.png" alt="PP-R PIPE SDR 6" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/POLOPLAST_008.png" alt="PP-R PIPE SDR 6 Specifications" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
@@ -209,8 +203,8 @@ import Footer from '@/components/common/Footer.astro';
<h4 class="text-xl font-bold text-secondary-900 mb-4">PP-RCT FIBER FASER COMPOSITE PIPE ML 5 / SDR 7.4 / S 3.2</h4>
<p class="text-secondary-600 mb-4">ใช้กับ ท่อประปา / ท่อน้ำร้อน / อื่นๆ อุณหภูมิ 3-95°C อายุการใช้งาน 50 ปี* ความดัน 20 บาร์ ความยาว/เส้น 4 เมตร</p>
<div class="grid md:grid-cols-2 gap-4">
<img src="/images/poloplast/POLOPLAST_009.png" alt="PP-RCT FIBER FASER ML 5" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_010.png" alt="PP-RCT FIBER FASER ML 5 Specifications" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_009.png" alt="PP-RCT FIBER FASER ML 5" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/POLOPLAST_010.png" alt="PP-RCT FIBER FASER ML 5 Specifications" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
@@ -219,8 +213,8 @@ import Footer from '@/components/common/Footer.astro';
<h4 class="text-xl font-bold text-secondary-900 mb-4">PP-RCT PIPE SDR 11 / S 5</h4>
<p class="text-secondary-600 mb-4">ใช้กับ ท่อประปา / ท่อน้ำร้อน / อื่นๆ อุณหภูมิ 3-95°C อายุการใช้งาน 50 ปี* ความดัน 16 บาร์ ความยาว/เส้น 4 เมตร</p>
<div class="grid md:grid-cols-2 gap-4">
<img src="/images/poloplast/POLOPLAST_011.png" alt="PP-RCT PIPE SDR 11" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_012.png" alt="PP-RCT PIPE SDR 11 Specifications" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_011.png" alt="PP-RCT PIPE SDR 11" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/POLOPLAST_012.png" alt="PP-RCT PIPE SDR 11 Specifications" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
@@ -229,8 +223,8 @@ import Footer from '@/components/common/Footer.astro';
<h4 class="text-xl font-bold text-secondary-900 mb-4">PP-RCT PIPE SDR 7.4 / S 3.2</h4>
<p class="text-secondary-600 mb-4">ใช้กับ ท่อประปา / ท่อน้ำร้อน / อื่นๆ อุณหภูมิ 3-95°C อายุการใช้งาน 50 ปี* ความดัน 20 บาร์ ความยาว/เส้น 4 เมตร</p>
<div class="grid md:grid-cols-2 gap-4">
<img src="/images/poloplast/POLOPLAST_013.png" alt="PP-RCT PIPE SDR 7.4" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_014.png" alt="PP-RCT PIPE SDR 7.4 Specifications" class="w-full h-auto rounded-lg shadow-sm" />
<img src="/images/poloplast/POLOPLAST_013.png" alt="PP-RCT PIPE SDR 7.4" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/POLOPLAST_014.png" alt="PP-RCT PIPE SDR 7.4 Specifications" class="w-full h-auto rounded-lg shadow-sm" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
@@ -241,35 +235,35 @@ import Footer from '@/components/common/Footer.astro';
<!-- Fittings Gallery - 3 columns -->
<section id="fittings" class="section bg-white">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-8 text-center">FITTINGS</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-8 text-center">FITTINGS</h3>
<div class="grid grid-cols-1 gap-6">
<img src="/images/poloplast/MECH_Fitting_001.jpg" alt="Fitting 001" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_002.jpg" alt="Fitting 002" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_003.jpg" alt="Fitting 003" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_004.jpg" alt="Fitting 004" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_005.jpg" alt="Fitting 005" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_006.jpg" alt="Fitting 006" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_007.jpg" alt="Fitting 007" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_008.jpg" alt="Fitting 008" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_009.jpg" alt="Fitting 009" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_010.jpg" alt="Fitting 010" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_011.jpg" alt="Fitting 011" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_012.jpg" alt="Fitting 012" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_013.jpg" alt="Fitting 013" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_014.jpg" alt="Fitting 014" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_015.jpg" alt="Fitting 015" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_016.jpg" alt="Fitting 016" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_017.jpg" alt="Fitting 017" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_018.jpg" alt="Fitting 018" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_019.jpg" alt="Fitting 019" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_020.jpg" alt="Fitting 020" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_021.jpg" alt="Fitting 021" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_022.jpg" alt="Fitting 022" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_023.jpg" alt="Fitting 023" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_024.jpg" alt="Fitting 024" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_025.jpg" alt="Fitting 025" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_026.jpg" alt="Fitting 026" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_027.jpg" alt="Fitting 027" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/poloplast/MECH_Fitting_001.jpg" alt="Fitting 001" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_002.jpg" alt="Fitting 002" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_003.jpg" alt="Fitting 003" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_004.jpg" alt="Fitting 004" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_005.jpg" alt="Fitting 005" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_006.jpg" alt="Fitting 006" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_007.jpg" alt="Fitting 007" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_008.jpg" alt="Fitting 008" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_009.jpg" alt="Fitting 009" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_010.jpg" alt="Fitting 010" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_011.jpg" alt="Fitting 011" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_012.jpg" alt="Fitting 012" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_013.jpg" alt="Fitting 013" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_014.jpg" alt="Fitting 014" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_015.jpg" alt="Fitting 015" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_016.jpg" alt="Fitting 016" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_017.jpg" alt="Fitting 017" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_018.jpg" alt="Fitting 018" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_019.jpg" alt="Fitting 019" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_020.jpg" alt="Fitting 020" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_021.jpg" alt="Fitting 021" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_022.jpg" alt="Fitting 022" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_023.jpg" alt="Fitting 023" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_024.jpg" alt="Fitting 024" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_025.jpg" alt="Fitting 025" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_026.jpg" alt="Fitting 026" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/poloplast/MECH_Fitting_027.jpg" alt="Fitting 027" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</section>
@@ -277,22 +271,22 @@ import Footer from '@/components/common/Footer.astro';
<!-- Installation Steps -->
<section id="installation" class="section bg-gray-50">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-8 text-center">การติดตั้ง PP-R และ PP-RCT</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-8 text-center">การติดตั้ง PP-R และ PP-RCT</h3>
<div class="grid md:grid-cols-3 gap-6">
<div class="card p-6 bg-white text-center">
<img src="/images/poloplast/POLOPLAST_071.png" alt="ขั้นตอนที่ 1" class="w-full h-auto rounded-lg shadow-sm mb-4" />
<h4 class="text-lg font-bold text-green-600 mb-2">1. หลอม (Fusion)</h4>
<img src="/images/poloplast/POLOPLAST_071.png" alt="ขั้นตอนที่ 1" class="w-full h-auto rounded-lg shadow-sm mb-4" width="600" height="400" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-primary-600 mb-2">1. หลอม (Fusion)</h4>
<p class="text-secondary-700 text-sm">หลังจากตัดท่อและวัดระยะกำหนดความลึกในการเชื่อมเสร็จแล้ว ให้ทำความสะอาดท่อ-ข้อต่อ จากนั้นจึงนำท่อ-ข้อต่อสอดเข้าที่หัวเชื่อม</p>
</div>
<div class="card p-6 bg-white text-center">
<img src="/images/poloplast/POLOPLAST_072.png" alt="ขั้นตอนที่ 2" class="w-full h-auto rounded-lg shadow-sm mb-4" />
<h4 class="text-lg font-bold text-green-600 mb-2">2. ประกอบ (Assemble)</h4>
<img src="/images/poloplast/POLOPLAST_072.png" alt="ขั้นตอนที่ 2" class="w-full h-auto rounded-lg shadow-sm mb-4" width="600" height="400" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-primary-600 mb-2">2. ประกอบ (Assemble)</h4>
<p class="text-secondary-700 text-sm">เมื่อเชื่อมท่อ-ข้อต่อตามเวลาที่กำหนด ให้ถอดท่อ-ข้อต่อออกจากหัวเชื่อม</p>
</div>
<div class="card p-6 bg-white text-center">
<img src="/images/poloplast/POLOPLAST_073.png" alt="ขั้นตอนที่ 3" class="w-full h-auto rounded-lg shadow-sm mb-4" />
<h4 class="text-lg font-bold text-green-600 mb-2">3. ปล่อยให้เย็นตัว (Cool)</h4>
<img src="/images/poloplast/POLOPLAST_073.png" alt="ขั้นตอนที่ 3" class="w-full h-auto rounded-lg shadow-sm mb-4" width="600" height="400" loading="lazy" decoding="async" />
<h4 class="text-lg font-bold text-primary-600 mb-2">3. ปล่อยให้เย็นตัว (Cool)</h4>
<p class="text-secondary-700 text-sm">นำท่อ-ข้อต่อสวมเข้าด้วยกัน ห้ามบิดหรือหมุน ปล่อยให้เย็นตามระยะเวลาที่กำหนด แล้วนำไปทดสอบแรงดันน้ำ</p>
</div>
</div>
@@ -302,7 +296,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- System Requirements - Wide Table -->
<section id="system-requirements" class="section bg-white">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 text-center">SYSTEM REQUIREMENTS - ตารางการให้ความร้อน PP-R และ PP-RCT</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6 text-center">SYSTEM REQUIREMENTS - ตารางการให้ความร้อน PP-R และ PP-RCT</h3>
<div class="max-w-5xl mx-auto">
<img
src="/images/poloplast/POLOPLAST_074.png"
@@ -316,7 +310,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- Butt Fusion - Wide -->
<section id="butt-fusion" class="section bg-gray-50">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 text-center">BUTT FUSION (B.F.) - เชื่อมชน (ขนาด 160 – 250 mm)</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6 text-center">BUTT FUSION (B.F.) - เชื่อมชน (ขนาด 160 – 250 mm)</h3>
<div class="max-w-5xl mx-auto">
<img
src="/images/poloplast/POLOPLAST_075.png"
@@ -330,7 +324,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- Electro Fusion -->
<section id="electro-fusion" class="section bg-white">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6 text-center">ELECTRO FUSION (E.F.)</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6 text-center">ELECTRO FUSION (E.F.)</h3>
<div class="max-w-5xl mx-auto space-y-6">
<img
src="/images/poloplast/POLOPLAST_076.png"
@@ -346,24 +340,22 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-lg text-secondary-600 mt-6">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> Jppselection &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>

4
src/pages/privacy-policy/index.astro
View File

@@ -7,11 +7,11 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="นโยบายความเป็นส่วนตัว | Privacy Policy" description="นโยบายความเป็นส่วนตัวของ บริษัท ดีล พลัส เทค จำกัด">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-primary-50 min-h-screen">
<section id="product-detail" class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">นโยบายความเป็นส่วนตัว</h1>
<h1 class="text-2xl md:text-3xl lg:text-5xl font-bold text-secondary-900 mb-8">นโยบายความเป็นส่วนตัว</h1>
<div class="card p-6 md:p-12 bg-white">
<div class="prose prose-lg max-w-none text-secondary-700">
<p class="mb-6">

26
src/pages/product/index.astro
View File

@@ -1,26 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="สินค้าของเรา" description="สินค้าของเรา ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามไ">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">สินค้าของเรา</h1>
<div class="card p-8 md:p-12 bg-white">
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">สินค้าของเรา - Deal Plus Tech บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่าย ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก ปรึกษา Dealplustech ได้ตลอดเวลาทำการ DUKELARRSEN PP-R / PP-RCT POLOPLAST Realflex | Stainless Steel Flexible Hose Fitting กริลแอร์พลาสติก | Grilles plastic กรู๊ฟท่อ (Groove Coupling) ข้อต่อท่อ (Pipe Coupling) ฉนวนหุ้มท่อ | Pipe Insulation ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak) ท่อ HDPE ราคาโรงงาน ท่อ pvc และข้อต่อท่อพีวีซี ราคาส่ง | PVC pipe ท่อ U</p>
</div>
</div>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

140
src/pages/realflex/index.astro
View File

@@ -7,57 +7,54 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="Realflex | สายอ่อนสแตนเลส" description="จำหน่ายRealflex สายอ่อนสแตนเลสคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/realflex_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/realflex_000C.jpg" alt="Realflex" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">Realflex | สายอ่อนสแตนเลส</h1>
<h2 class="text-xl sm:text-xl md:text-2xl text-secondary-600 mb-6 sm:mb-8 text-center sm:text-left">Stainless Steel Flexible Hose Fitting</h2>
<div class="order-1 lg:order-2">
<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 text-white mb-4">Realflex | สายอ่อนสแตนเลส</h1>
<h2 class="text-xl sm:text-xl md:text-2xl text-white/80 mb-8">Stainless Steel Flexible Hose Fitting</h2>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
</div>
</div>
@@ -68,10 +65,10 @@ import Footer from '@/components/common/Footer.astro';
<section id="product-specs" class="section bg-white">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-001.png" alt="Realflex" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-001.png" alt="Realflex" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div>
<p class="text-lg text-secondary-700 leading-relaxed">
@@ -96,11 +93,11 @@ import Footer from '@/components/common/Footer.astro';
</p>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-003.png" alt="Realflex Detail" class="max-w-sm w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-002.png" alt="Realflex Application" class="max-w-md w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-003.png" alt="Realflex Detail" class="max-w-sm w-full h-auto rounded-lg shadow-md" width="350" height="300" loading="lazy" decoding="async" />
<img src="/images/realflex/realflex-002.png" alt="Realflex Application" class="max-w-md w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่น</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่น</h3>
<div class="grid md:grid-cols-2 gap-6 my-8">
<div class="bg-gray-50 p-6 rounded-lg">
@@ -129,10 +126,10 @@ import Footer from '@/components/common/Footer.astro';
</p>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-005.png" alt="Why Realflex" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-005.png" alt="Why Realflex" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ทำไมต้องเลือก Realflex?</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ทำไมต้องเลือก Realflex?</h3>
<ul class="list-disc pl-6 space-y-3 text-lg text-secondary-700">
<li>Realflex® ให้ความยาวเพิ่มอีก 25% สำหรับท่อปล่อย (สูงสุด 140 มม.) และความสูงเพิ่มอีก 50% สำหรับแบร็คเก็ตด้านข้าง (102 มม.) สร้างโซลูชันสำหรับการติดตั้งสเปร์เกลอร์ทุกรูปแบบ รวมถึงสเปร์เกลอร์แบบเพนเดนต์เรียบหรือซ่อน</li>
<li>ท่อปล่อยที่มีร่องเก็บและการออกแบบแบร็คเก็ตด้านข้างที่เป็นเอกลักษณ์ ทำงานกับระบบเพดาน T-bar และโครงไม้หรือโลหะทุกรูปแบบ</li>
@@ -143,40 +140,40 @@ import Footer from '@/components/common/Footer.astro';
<li>แบร็คเกัตประกอบสำเร็จพร้อมบาร์สี่เหลี่ยมมีจำหน่ายตามคำขอ</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ข้อมูลจำเพาะทางเทคนิค</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ข้อมูลจำเพาะทางเทคนิค</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-030.png" alt="Technical Spec 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-031.png" alt="Technical Spec 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-032.png" alt="Technical Spec 3" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-033.png" alt="Technical Spec 4" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-034.png" alt="Technical Spec 5" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-030.png" alt="Technical Spec 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
<img src="/images/realflex/realflex-031.png" alt="Technical Spec 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
<img src="/images/realflex/realflex-032.png" alt="Technical Spec 3" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
<img src="/images/realflex/realflex-033.png" alt="Technical Spec 4" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
<img src="/images/realflex/realflex-034.png" alt="Technical Spec 5" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">โครงสร้างและข้อมูลวัสดุ</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">โครงสร้างและข้อมูลวัสดุ</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-035.png" alt="Structure & Material" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-035.png" alt="Structure & Material" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">อุปกรณ์เสริม</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">อุปกรณ์เสริม</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-020.png" alt="Accessories 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-021.png" alt="Accessories 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-020.png" alt="Accessories 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
<img src="/images/realflex/realflex-021.png" alt="Accessories 2" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ข้อมูลจำเพาะทางเทคนิค (ต่อ)</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ข้อมูลจำเพาะทางเทคนิค (ต่อ)</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-023.png" alt="Technical Spec Continued 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-024.png" alt="Technical Spec Continued 2" class="max-w-2xl w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-023.png" alt="Technical Spec Continued 1" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
<img src="/images/realflex/realflex-024.png" alt="Technical Spec Continued 2" class="max-w-2xl w-full h-auto rounded-lg shadow-md" width="700" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ใช้ Realflex® Radius Gauge ตรวจสอบการงอของสาย</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ใช้ Realflex® Radius Gauge ตรวจสอบการงอของสาย</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-025.png" alt="Radius Gauge" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-025.png" alt="Radius Gauge" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">การงอสาย ถูกต้องหรือไม่ถูกต้อง?</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">การงอสาย ถูกต้องหรือไม่ถูกต้อง?</h3>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/realflex/realflex-026.png" alt="Hose Bending" class="max-w-2xl w-full h-auto rounded-lg shadow-md" />
<img src="/images/realflex/realflex-026.png" alt="Hose Bending" class="max-w-2xl w-full h-auto rounded-lg shadow-md" width="700" height="300" loading="lazy" decoding="async" />
</div>
</div>
</div>
@@ -184,22 +181,23 @@ import Footer from '@/components/common/Footer.astro';
</section>
<section id="contact-cta" class="section bg-gray-50">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

26
src/pages/services/index.astro
View File

@@ -1,26 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="บริการของเรา | Services" description="บริการของเรา ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามไ">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-8">บริการของเรา | Services</h1>
<div class="card p-8 md:p-12 bg-white">
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">บริการของเรา | Services - Deal Plus Tech บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่าย ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก ปรึกษา Dealplustech ได้ตลอดเวลาทำการ บริษัท ดีล พลัส เทค จำกัด มีบริการหลังการขาย และ บริการเพื่อส่งเสริมการขายโดยมุ่งหวังให้ท่านได้รับความพึงพอใจ จากสินค้าของเรา และ เกิดผลประโยชน์ทางธุรกิจแก่ท่านผู้มีอุปการะคุณ อย่างสูงสุดเราบริการท่านด้วยประสบการณ์ ความสามารถ และ ความรับผิดชอบ พร้อมที่จะดูแลงานที่ท่านมอบหมายด้วยความซื่อสัตย์ เต็มใจ ดังนั้นท</p>
</div>
</div>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

4
src/pages/terms-and-conditions/index.astro
View File

@@ -7,11 +7,11 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ข้อกำหนดการใช้งาน | Terms and Conditions" description="ข้อกำหนดการใช้งานเว็บไซต์ บริษัท ดีล พลัส เทค จำกัด">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-primary-50 min-h-screen">
<section id="product-detail" class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">ข้อกำหนดการใช้งาน</h1>
<h1 class="text-2xl md:text-3xl lg:text-5xl font-bold text-secondary-900 mb-8">ข้อกำหนดการใช้งาน</h1>
<div class="card p-6 md:p-12 bg-white">
<div class="prose prose-lg max-w-none text-secondary-700">
<p class="mb-6">

100
src/pages/water-pump/index.astro
View File

@@ -7,59 +7,56 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ปั๊มน้ำ (Water Pump)" description="จำหน่ายปั๊มน้ำ (Water Pump)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/water-pump_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/water-pump_000C.jpg" alt="ปั๊มน้ำ (Water Pump)" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ปั๊มน้ำ (Water Pump)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">ปั๊มน้ำ (Water Pump)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายปั๊มน้ำ (Water Pump)คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
</div>
</div>
@@ -67,12 +64,13 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl sm:text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="flex justify-center">
<img src="/images/water-pump-banner.jpg" alt="ปั๊มน้ำ" class="max-w-md w-full rounded-lg shadow-md mb-8" />
<img src="/images/water-pump-banner.jpg" alt="ปั๊มน้ำ" class="max-w-md w-full rounded-lg shadow-md mb-8" width="400" height="300" loading="lazy" decoding="async" />
</div>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">จำหน่ายปั๊มน้ำทุกประเภท สำหรับบ้านพักอาศัย อาคาร และโรงงานอุตสาหกรรม จากแบรนด์ชั้นนำ</p><p class="text-lg text-secondary-700 leading-relaxed mb-4"><strong>ประเภทปั๊มน้ำ:</strong></p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- <strong>ปั๊มน้ำอัตโนมัติ:</strong> สำหรับบ้านพักอาศัย</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- <strong>ปั๊มน้ำหอยโข่ง:</strong> สำหรับระบบน้ำในอาคาร</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- <strong>ปั๊มน้ำจุ่ม:</strong> สำหรับระบายน้ำท่วม</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- <strong>ปั๊มน้ำแรงดันสูง:</strong> สำหรับระบบดับเพลิง</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- <strong>ปั๊มเคมี:</strong> สำหรับส่งสารเคมี</p><p class="text-lg text-secondary-700 leading-relaxed mb-4"><strong>การใช้งาน:</strong></p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- บ้านพักอาศัย</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- อาคารสูง</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- โรงงานอุตสาหกรรม</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- ระบบดับเพลิง</p><p class="text-lg text-secondary-700 leading-relaxed mb-4">- ระบบชลประทาน</p>
@@ -81,24 +79,24 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

108
src/pages/water-treatment/index.astro
View File

@@ -7,59 +7,56 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ระบบกรองน้ำดี (Water Treatment)" description="จำหน่ายระบบกรองน้ำดี (Water Treatment)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/water-treatment_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/water-treatment_000C.jpg" alt="ระบบกรองน้ำดี (Water Treatment)" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ระบบกรองน้ำดี (Water Treatment)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">ระบบกรองน้ำดี (Water Treatment)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายระบบกรองน้ำดี (Water Treatment)คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
</div>
</div>
@@ -67,14 +64,15 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl sm:text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">จำหน่ายระบบกรองน้ำดีและอุปกรณ์ครบวงจร สำหรับบ้าน อาคาร โรงงานอุตสาหกรรม โรงแรม โรงพยาบาล และสถานประกอบการต่างๆ พร้อมให้คำปรึกษาและออกแบบระบบโดยทีมงานมืออาชีพ</p>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">ระบบผลิตน้ำประปาและน้ำบริสุทธิ์</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-4">ระบบผลิตน้ำประปาและน้ำบริสุทธิ์</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>ระบบผลิตน้ำประปา</strong> - สำหรับโรงงาน อาคาร ชุมชน</li>
<li><strong>ระบบผลิตน้ำ DI</strong> - น้ำบริสุทธิ์สำหรับอุตสาหกรรมอิเล็กทรอนิกส์ อาหาร เครื่องดื่ม</li>
@@ -82,13 +80,13 @@ import Footer from '@/components/common/Footer.astro';
<li><strong>ระบบ Reverse Osmosis (RO)</strong> - กรองน้ำขนาดเล็กมาก ขนาด 0.0001 ไมครอน</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">ระบบนำน้ำทิ้งกลับมาใช้ใหม่</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-4">ระบบนำน้ำทิ้งกลับมาใช้ใหม่</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>ระบบนำน้ำทิ้งกลับมาใช้ใหม่ด้วยระบบ UF</strong> - ประหยัดน้ำ ลดต้นทุน</li>
<li><strong>ระบบนำน้ำทิ้งกลับมาใช้ใหม่ด้วยระบบ UF และ RO</strong> - น้ำคุณภาพสูง ขนาดน้อยกว่า 0.0001 ไมครอน</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">1. สารเคมี (Chemical Supply)</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-4">1. สารเคมี (Chemical Supply)</h3>
<h4 class="text-xl font-semibold text-secondary-800 mb-2">สารเคมีเฉพาะทาง (Specialty Chemicals)</h4>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>สารเคมีบำบัดน้ำ - ระบบ Cooling Tower, Boiler, น้ำบริสุทธิ์, น้ำเสีย</li>
@@ -112,7 +110,7 @@ import Footer from '@/components/common/Footer.astro';
<li>สารเคมีอื่นๆ ตามความต้องการ</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">2. อุปกรณ์ (Equipment Supply)</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-4">2. อุปกรณ์ (Equipment Supply)</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>ระบบกรอง</strong> - Sand Filter, Carbon Filter, Softener และอื่นๆ</li>
<li><strong>อุปกรณ์เติมสารเคมี</strong> - Metering Pump</li>
@@ -120,7 +118,7 @@ import Footer from '@/components/common/Footer.astro';
<li><strong>เครื่องฆ่าเชื้อด้วย UV</strong> - Ultraviolet Sterilizers</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">3. ระบบโรงงาน (Engineering Plant Supply)</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-4">3. ระบบโรงงาน (Engineering Plant Supply)</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>ระบบตกตะกอน</strong> - Clarifier Plant</li>
<li><strong>ระบบกำจัดแร่ธาตุ</strong> - Demineralization Plant</li>
@@ -135,24 +133,24 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

115
src/pages/ฉนวนหุ้มท่อ-category/index.astro Normal file
View File

@@ -0,0 +1,115 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="ฉนวนหุ้มท่อ" description="ฉนวนหุ้มท่อ เทอร์โมเบรค ฉนวนกันความร้อน คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="bg-white min-h-screen">
<!-- Category Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="card-glass p-2">
<img src="/images/thermobreak/thermobreak-solarblock.png" 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'" />
</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 text-white mb-4">ฉนวนหุ้มท่อ</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ฉนวนหุ้มท่อ เทอร์โมเบรค ฉนวนกันความร้อน ประหยัดพลังงาน คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap gap-6 mt-8">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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 text-white" 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 text-white" 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>
<!-- Products -->
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="text-center mb-12">
<h2 class="section-title">สินค้าในหมวดนี้</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<a href="/ฉนวนหุ้มท่อ-pipe-insulation" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="ฉนวนหุ้มท่อ" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ฉนวนหุ้มท่อ</h3>
</div>
</a>
<a href="/เทอร์โมเบรค-thermobreak" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="เทอร์โมเบรค" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">เทอร์โมเบรค</h3>
</div>
</a>
</div>
</div>
</section>
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-white 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/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

208
src/pages/ฉนวนหุ้มท่อ-pipe-insulation/index.astro
View File

@@ -7,59 +7,60 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ฉนวนหุ้มท่อ | Pipe Insulation" description="ฉนวนหุ้มท่อ (Pipe Insulation) คืออะไร? ทำไมถึงสำคัญในอุ">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Product" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ฉนวนหุ้มท่อ | Pipe Insulation</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
ฉนวนหุ้มท่อ (Pipe Insulation) คืออะไร? ทำไมถึงสำคัญในอุ
<div class="order-1 lg:order-2">
<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 text-white 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/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,148 +68,33 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Product Specifications -->
<section id="product-specs" class="section bg-white">
<!-- Rest of content -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
<strong>ฉนวนหุ้มท่อ (Pipe Insulation)</strong> เป็นฉนวนที่ใช้หุ้มท่อเพื่อป้องกันการสูญเสียความร้อนหรือความเย็นของระบบท่อ ลดการเกิดการควบแน่นของไอน้ำบนผิวท่อ ประหยัดพลังงาน และป้องกันอุบัติเหตุจากผิวท่อที่ร้อน เหมาะสำหรับระบบประปา ระบบปรับอากาศ ระบบท่อน้ำร้อน ระบบท่อน้ำเย็น ระบบท่อส่งน้ำมันร้อน และอุตสาหกรรมต่างๆ
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ประเภทฉนวนหุ้มท่อที่จำหน่าย</h3>
<div class="space-y-6 mb-8">
<div class="card p-6 bg-gray-50">
<h4 class="text-xl font-bold text-green-700 mb-2">Armaflex</h4>
<p class="text-secondary-700 mb-3">ฉนวนยางอีลาสโตเมอริก (Elastomeric Rubber Foam) แบบเซลล์ปิด ผลิตจากยาง NBR/PVC หุ้มท่อและอุปกรณ์ท่อเพื่อป้องกันการสูญเสียความเย็นและความร้อน ลดการเกิดการควบแน่น ทนต่อไอน้ำและความชื้น มีค่าสัมประสิทธิ์การนำความร้อนต่ำ ผิวเรียบสวยงาม ใช้งานง่าย รับประกันคุณภาพมาตรฐาน</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">ทนความเย็น -50°C ถึง +105°C</span>
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">แบบท่อน (Slit Pipe)</span>
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">แบบม้วน (Sheet/Roll)</span>
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">ป้องกันการควบแน่น</span>
</div>
</div>
<div class="card p-6 bg-gray-50">
<h4 class="text-xl font-bold text-blue-700 mb-2">Aeroflex</h4>
<p class="text-secondary-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="card p-6 bg-gray-50">
<h4 class="text-xl font-bold text-orange-700 mb-2">Maxflex FR</h4>
<p class="text-secondary-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-secondary-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>
<!-- Application Images -->
<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"
/>
<img
src="/images/products-raw/pipe-insulation/Insulte_07.png"
alt="การประยุกต์ใช้ฉนวนหุ้มท่อ"
class="w-full h-auto rounded-xl"
/>
</div>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">การประยุกต์ใช้งาน</h3>
<p class="text-lg text-secondary-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>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ขนาดและความหนาที่จำหน่าย</h3>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
ฉนวนหุ้มท่อมีให้เลือกหลายขนาด ตั้งแต่ท่อขนาดเล็ก เช่น 1/2 นิ้ว ถึงท่อขนาดใหญ่ 6 นิ้วขึ้นไป และมีความหนาตั้งแต่ 9 มม. ถึง 50 มม. ตามความต้องการในการใช้งาน สามารถสอบถามขนาดและความหนาที่ต้องการได้ที่ Line หรือโทรศัพท์
</p>
<div class="bg-green-50 border-l-4 border-green-600 p-4 mt-6">
<p class="text-secondary-700">
<strong>สอบถามราคาและสั่งซื้อ:</strong> ติดต่อเราได้ที่ Line: <a href="https://line.me/ti/p/~dealplustech" class="text-green-700 underline">@dealplustech</a> หรือโทร <a href="tel:0905551415" class="text-green-700 underline">090-555-1415</a> ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
</div>
</div>
</div>
</div>
</section>
<section id="product-prices" class="section bg-gradient-to-br from-primary-50 to-accent-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">📥 ดาวน์โหลดราคาสินค้า</h2>
<div class="grid md:grid-cols-2 gap-4 max-w-4xl mx-auto">
<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-secondary-900">Price List Armaflex 2567</div><div class="text-sm text-secondary-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-secondary-900">Pricelist Aeroflex (update 2565)</div><div class="text-sm text-secondary-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-secondary-900">Maxflex FR Roll MSR15M</div><div class="text-sm text-secondary-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-secondary-900">Maxflex FR ST แบบท่อน</div><div class="text-sm text-secondary-500">PDF - แบบท่อน</div></div>
</a>
</div>
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>

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

@@ -7,57 +7,56 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ไทยพีพีอาร์ (Thai PPR) | ท่อพีพีอาร์ คุณภาพสูง" description="ไทยพีพีอาร์ (Thai PPR) ทางเลือกที่ดีที่สุดสำหรับงานระบบน้ำคุณภาพสูง ทั้งน้ำร้อนและน้ำเย็น ผลิตจากวัสดุ PP-R เกรดพรีเมียม ทนความร้อน 95°C อายุการใช้งาน 50 ปี ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR ไทย (Thai PPR)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR ไทย (Thai PPR)" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ไทยพีพีอาร์ (Thai PPR)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
ท่อ PPR
</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">ไทยพีพีอาร์ (Thai PPR)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ไทยพีพีอาร์ (Thai PPR) ทางเลือกที่ดีที่สุดสำหรับงานระบบน้ำคุณภาพสูง ทั้งน้ำร้อนและน้ำเย็นในอาคารสมัยใหม่ ผลิตจากวัสดุ Polypropylene Random Copolymer (PPR) เกรดพรีเมียม สะอาด ปลอดภัย และมีสถานะเป็น Food Grade ส่งฟรี กรุงเทพมหานคร ปริมณฑล
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนความร้อนได้สูงถึง 95°C</span>
<span>ทนความร้อน 95°C</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">อายุการใช้งานยาวนานกว่า 50 ปี</span>
<span>อายุ 50+ ปี</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">เชื่อมต่อด้วยความร้อน (Heat Fusion) ไม่รั่วซึม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">Food Grade สะอาด ปลอดภัย ไม่เป็นสนิม</span>
<span>Food Grade</span>
</div>
</div>
</div>
@@ -66,26 +65,26 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Product Details -->
<section id="product-specs" class="section bg-white">
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl sm:text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
<strong>ไทยพีพีอาร์ (Thai PPR)</strong> คือทางเลือกที่ดีที่สุดสำหรับงานระบบน้ำคุณภาพสูง ทั้งน้ำร้อนและน้ำเย็นในอาคารสมัยใหม่ ผลิตจากวัสดุ <strong>Polypropylene Random Copolymer (PPR)</strong> เกรดพรีเมียม ทำให้มั่นใจได้ถึงความสะอาด ปลอดภัย และมีสถานะเป็น <strong>Food Grade</strong> ที่เหมาะสำหรับระบบน้ำดื่มโดยเฉพาะ
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
ด้วยคุณสมบัติเด่นในการ <strong>ทนทานต่ออุณหภูมิสูง</strong> (ได้ถึง 95°C) และแรงดันที่คงที่ ไทยพีพีอาร์ จึงไม่มีปัญหาเรื่องการเกิดสนิมหรือตะกรันสะสม ทำให้มีอายุการใช้งานยาวนานกว่า 50 ปี การติดตั้งใช้เทคโนโลยี <strong>การเชื่อมแบบหลอมรวมด้วยความร้อน (Heat Fusion)</strong> ซึ่งทำให้รอยต่อของท่อและข้อต่อเป็นเนื้อเดียวกัน 100% จึงมั่นใจได้ว่าจะไม่มีปัญหารั่วซึมตลอดอายุการใช้งาน
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
<strong>PPR (Polypropylene Random Copolymer)</strong> เป็นเม็ดพลาสติกคุณภาพสูงชนิดหนึ่ง ผลิตจากเม็ดพลาสติก PP-R(80) ชั้นดีจากยุโรป จึงทำให้มีเนื้อพลาสติกที่มีคุณภาพและความหนาแน่นสูง แสงลอดผ่านไม่ได้ วางใจได้ในคุณภาพและอายุการใช้งาน
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
<strong>PPR (Polypropylene Random Copolymer)</strong> เป็นเม็ดพลาสติกคุณภาพสูงชนิดหนึ่ง ผลิตจากเม็ดพลาสติก PP-R(80) ชั้นดีจากยุโรป จึงทำให้มีเนื้อพลาสติกที่มีคุณภาพและความหนาแน่นสูง แสงลอดผ่านได้ไม่ วางใจได้ในคุณภาพและอายุการใช้งาน
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของไทยพีพีอาร์</h3>
<h3 class="text-lg sm:text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของไทยพีพีอาร์</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<ul class="list-disc pl-6 mb-6 space-y-2 text-secondary-700">
<li><strong>ทนความร้อนได้สูงถึง 95°C</strong> - เหมาะกับการใช้เป็นท่อน้ำร้อนเพื่อการอุปโภคบริโภค</li>
<li><strong>ทนแรงดันได้สูงสุด 20 บาร์</strong> - เหมาะกับงานระบบประปาทั่วไปและอุตสาหกรรม</li>
<li><strong>สะอาดไม่เป็นสนิม ปราศจากโลหะหนักและสิ่งปนเปื้อน</strong> - น้ำที่ไหลผ่านท่อ PPR สะอาดปลอดภัย ไม่เป็นสนิม มีสีหรือกลิ่นปกติ</li>
@@ -95,9 +94,9 @@ import Footer from '@/components/common/Footer.astro';
<li><strong>เชื่อมต่อเป็นเนื้อเดียวกัน ด้วยความร้อน (Heat Fusion) ไม่รั่วซึม</strong></li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ข้อต่อ PPR</h3>
<h3 class="text-lg sm:text-xl font-bold text-secondary-900 mt-8 mb-4">ข้อต่อ PPR</h3>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
ข้อต่อ PPR ผลิตตามมาตรฐาน DIN16962-5 สามารถติดตั้งร่วมกับท่อประเภทอื่นๆ ได้ตามลักษณะงาน เนื่องจากมีข้อต่อประเภทเกลียวชนิดต่างๆ มากมายจึงทำให้สะดวก และไม่มีปัญหาในการใช้งานร่วมกัน รวมทั้งเกลียวเป็นชนิดทำจากทองเหลืองและชนิดทำจากทองเหลืองชุบนิเกิลทำให้ไม่เป็นสนิม อีกทั้งข้อต่อ PPR สามารถทนต่อแรงดันได้สูงสุด 20 บาร์
</p>
</div>
@@ -106,46 +105,53 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Product Photos -->
<section class="section bg-white">
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">รูปภาพสินค้า</h2>
<h2 class="text-lg sm:text-xl font-bold text-secondary-900 mb-6">รูปภาพสินค้า</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR ไทย" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/ppr/TPPR55.jpg" alt="ท่อ PPR ไทย" class="w-full h-auto rounded-lg shadow-md" />
<div class="image-frame aspect-video">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR ไทย" class="w-full h-full object-cover" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="image-frame aspect-video">
<img src="/images/ppr/TPPR55.jpg" alt="ท่อ PPR ไทย" class="w-full h-full object-cover" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</div>
</section>
<section id="product-prices" class="section bg-gradient-to-br from-primary-50 to-accent-50">
<!-- Price List Download -->
<section class="section gradient-mesh">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">📥 ดาวน์โหลดราคาสินค้า</h2>
<div class="max-w-md mx-auto">
<a href="/documents/PRICE-LIST_TPPR_V28-2023 [26012023].pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="card-glass p-8 max-w-lg mx-auto">
<h2 class="text-lg sm:text-xl font-bold text-secondary-900 mb-6 text-center">ดาวน์โหลดราคาสินค้า</h2>
<a href="/documents/PRICE-LIST_TPPR_V28-2023 [26012023].pdf" target="_blank" class="flex items-center gap-4 p-4 bg-secondary-50 rounded-xl hover:bg-secondary-100 transition-colors group">
<svg class="w-10 h-10 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-secondary-900">Price List TPPR V28-2023</div><div class="text-sm text-secondary-500">PDF - ดาวน์โหลดราคา</div></div>
<div>
<div class="font-semibold text-secondary-900 group-hover:text-primary-600 transition-colors">Price List TPPR V28-2023</div>
<div class="text-sm text-secondary-500">PDF - ดาวน์โหลดราคา</div>
</div>
</a>
</div>
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-lg text-secondary-600 mt-6">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> Jppselection &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>

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

@@ -7,68 +7,75 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ท่อ UPVC (Unplasticized Polyvinyl Chloride)" description="ท่อ UPVC ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล ท่อยูพีวีซี ทนสารเคมี ทนความร้อน สำหรับงานอุตสาหกรรม">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img
src="/images/products-cropped/upvc-pipe_000C.jpg"
alt="ท่อ UPVC (Unplasticized Polyvinyl Chloride)"
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'"
/>
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ท่อ UPVC (Unplasticized Polyvinyl Chloride)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
ท่อ UPVC
</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">ท่อ UPVC (Unplasticized Polyvinyl Chloride)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ติดต่อสอบถามส่วนลด ราคาเพิ่มเติม ติดต่อ Dealplustech ได้ตลอดเวลาทำการ
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<a href="tel:0905551415" class="btn-white 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>
<span>090-555-1415</span>
</a>
</div>
<div class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนสารเคมีได้ดี</span>
<span>ทนสารเคมีได้ดี</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนต่อสภาพอากาศ</span>
<span>ทนต่อสภาพอากาศ</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนความร้อนได้ถึง 60°C</span>
<span>ทนความร้อนได้ถึง 60°C</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">เชื่อมต่อด้วยกาว UPVC ง่ายต่อการติดตั้ง</span>
<span>เชื่อมต่อด้วยกาว UPVC ง่ายต่อการติดตั้ง</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนการกัดกร่อน</span>
<span>ทนการกัดกร่อน</span>
</div>
</div>
</div>
@@ -76,10 +83,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 mb-6">
<strong>ท่อ UPVC (Unplasticized Polyvinyl Chloride)</strong> หรือ ท่อยูพีวีซี เป็นท่อพลาสติกที่มีความแข็งแรงและทนทานต่อสารเคมี ใช้ในงานเดินระบบน้ำทิ้ง ระบายน้ำเสีย ทนเคมีใช้ในโรงงานอุตสาหกรรมเคมี หรือเป็นระบบเดินของเหลวที่มีสารเคมีเจือปน สามารถทนอุณหภูมิได้ถึง 60 องศาเซลเซียส มีลักษณะ <strong>สีเทาเข้ม / สีเทาอ่อน</strong> ต่างจากท่อ PVC ทั่วไปที่มักเป็นสีฟ้า
@@ -88,87 +96,87 @@ import Footer from '@/components/common/Footer.astro';
ท่อและอุปกรณ์ยูพีวีซี สามารถใช้กาวทาท่อ UPVC ในการเชื่อมต่อ ซึ่งมีความรวดเร็วและง่ายต่อการติดตั้ง
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">การใช้งาน ท่อ UPVC (UPVC Pipe)</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">การใช้งาน ท่อ UPVC (UPVC Pipe)</h3>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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>
</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของท่อ UPVC</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของท่อ UPVC</h3>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ทนสารเคมีได้ดี</strong></span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ทนต่อสภาพอากาศ</strong></span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ทนความร้อนได้ถึง 60°C</strong></span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ทนการกัดกร่อน</strong></span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ติดตั้งง่ายด้วยกาว UPVC</strong></span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>น้ำหนักเบา ขนส่งสะดวก</strong></span>
</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">มาตรฐานและการเลือกใช้</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">มาตรฐานและการเลือกใช้</h3>
<p class="text-lg text-secondary-700 mb-4">
ปัจจุบันยังไม่มีมาตรฐาน มอก. รองรับท่อและวาล์ว UPVC โดยตรง แต่สามารถใช้มาตรฐาน <strong>ASTM</strong> และมาตรฐาน <strong>Sch.80</strong> ตามมาตรฐานที่ยุโรปและเอเชียใช้ ซึ่งมีทั้งท่อและวาล์ว UPVC ที่ผลิตในยุโรปและผลิตในเอเชีย
</p>
@@ -176,7 +184,7 @@ import Footer from '@/components/common/Footer.astro';
การเลือกใช้ท่อและวาล์ว UPVC ควรปรึกษาวิศวกรออกแบบ และควรใช้ตามแบบที่ถูกออกแบบโดยมีวิศวกรเซ็นสำนักงานกำกับ เพื่อเป็นการประหยัดงบประมาณและไม่ Over Design
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ขนาดท่อ UPVC</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ขนาดท่อ UPVC</h3>
<p class="text-lg text-secondary-700 mb-4">
ท่อ UPVC มีขนาดตั้งแต่ <strong>1/2"</strong> ไปจนถึง <strong>12"</strong> เหมาะสำหรับงานอุตสาหกรรมและงานระบายน้ำทิ้ง
</p>
@@ -185,24 +193,23 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-lg text-secondary-600 mt-6">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> Jppselection &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>

111
src/pages/ท่อhdpe/index.astro
View File

@@ -7,68 +7,75 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ท่อ HDPE (High Density Polyethylene)" description="ท่อ HDPE ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล ท่อ HDPE คุณภาพสูง ทนทาน อายุการใช้งาน 50 ปี">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img
src="/images/products-cropped/hdpe001.png"
alt="ท่อ HDPE (High Density Polyethylene)"
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'"
/>
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ท่อ HDPE (High Density Polyethylene)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
ท่อ HDPE
</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">ท่อ HDPE (High Density Polyethylene)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ติดต่อสอบถามส่วนลด ราคาเพิ่มเติม ติดต่อ Dealplustech ได้ตลอดเวลาทำการ
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<a href="tel:0905551415" class="btn-white 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>
<span>090-555-1415</span>
</a>
</div>
<div class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">อายุการใช้งานยาวนานกว่า 50 ปี</span>
<span>อายุการใช้งานยาวนานกว่า 50 ปี</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนต่อสารเคมี กรด และด่าง</span>
<span>ทนต่อสารเคมี กรด และด่าง</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนต่อรังสี UV ไม่เป็นสนิม</span>
<span>ทนต่อรังสี UV ไม่เป็นสนิม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">น้ำหนักเบา ติดตั้งง่าย</span>
<span>น้ำหนักเบา ติดตั้งง่าย</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">รับแรงดันได้สูงถึง PN25</span>
<span>รับแรงดันได้สูงถึง PN25</span>
</div>
</div>
</div>
@@ -76,10 +83,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 mb-6">
<strong>ท่อ HDPE (High Density Polyethylene)</strong> เป็นท่อประเภทหนึ่งที่ได้รับความนิยมสูงที่สุดที่มีขายในท้องตลาดปัจจุบัน ผลิตจากโพลิเอทิลีนความหนาแน่นสูง ซึ่งเป็นวัสดุพลาสติกที่แข็งแรงและทนทานอย่างไม่น่าเชื่อ ทนทานต่อการกัดกร่อนของสารเคมีได้หลายชนิด ไม่เป็นสนิม น้ำหนักเบา ง่ายต่อการขนส่ง อายุการใช้งานยาวนานกว่า 50 ปี
@@ -91,59 +99,59 @@ import Footer from '@/components/common/Footer.astro';
ผิวมีลักษณะเรียบมันทำให้น้ำหรือของเหลวไหลผ่านได้สะดวก ท่อแบบ HDPE มีความยืดหยุ่นมากกว่าแบบ PVC นิยมใช้แทนท่อ PVC ในงานที่ต้องการความยืดหยุ่นของท่อ เช่นพื้นดินที่ไม่สม่ำเสมอ สามารถใช้กับงานสาธารณูปโภค งานไฟฟ้า และงานเกษตรเป็นต้น
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของท่อ HDPE สำหรับท่อประปา</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของท่อ HDPE สำหรับท่อประปา</h3>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ความทนทาน:</strong> อายุการใช้งานยาวนาน ขั้นต่ำ 50 ปี ทนต่ออุณหภูมิและแรงดันที่รุนแรงได้ ผสมสารป้องกัน UV ทนต่อแสงได้</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ความยืดหยุ่น:</strong> สามารถโค้งงอได้ถึง 45 องศา ทำให้เหมาะสำหรับพื้นที่ติดตั้งจำกัด</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ทนทานต่อสารเคมี:</strong> ทนทานสูงต่อกรดและด่าง เหมาะสำหรับกระบวนการทางเคมีและการใช้งานด้านสิ่งแวดล้อม</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ป้องกันการรั่วซึม:</strong> มีซีลแน่น ป้องกันการรั่วซึม</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ประหยัดค่าใช้จ่าย:</strong> โซลูชันการวางท่อที่คุ้มค่าที่สุด ใช้อุปกรณ์น้อยลง แรงงานและอุปกรณ์น้อยลง</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>น้ำหนักเบา:</strong> ง่ายต่อการขนส่งและติดตั้ง</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>รับแรงดัน:</strong> 12.5-16 บาร์</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ใช้เป็นท่อน้ำดื่ม:</strong> ปราศจากสารก่อมะเร็ง โลหะหนักต่างๆ</span>
</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ยี่ห้อที่มีจำหน่าย</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ยี่ห้อที่มีจำหน่าย</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>Thai Asia PE Pipe</li>
<li>Thai Gow Gai</li>
@@ -156,24 +164,23 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-lg text-secondary-600 mt-6">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> Jppselection &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>

176
src/pages/ท่อพีพีอาร์/index.astro
View File

@@ -7,59 +7,56 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ท่อพีพีอาร์" description="ท่อพีพีอาร์ ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Category Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="card-glass p-2">
<img src="/images/products-cropped/ppr-pipe_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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ท่อพีพีอาร์</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<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 text-white mb-4">ท่อพีพีอาร์</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ท่อพีพีอาร์ ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้
</p>
<div class="flex flex-wrap gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6 mt-8">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>จัดส่งฟรี</span>
</div>
</div>
</div>
@@ -67,92 +64,95 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Subcategories - Cards only, no header text -->
<section class="section bg-gray-50">
<!-- Subcategories -->
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
<a href="/ท่อ-ppr-thai-ppr" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="text-center mb-12">
<h2 class="section-title">สินค้าในหมวดนี้</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<a href="/ท่อ-ppr-thai-ppr" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ไทยพีพีอาร์</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ไทยพีพีอาร์</h3>
</div>
</a>
<a href="/ท่อพีพีอาร์ตราช้าง" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR ตราช้าง" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<a href="/ท่อพีพีอาร์ตราช้าง" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/ppr-scg.jpg" alt="ท่อ PPR ตราช้าง" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ท่อ PPR ตราช้าง</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ PPR ตราช้าง</h3>
</div>
</a>
<a href="/pp-r-pp-rct-poloplast" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PP-R Poloplast" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<a href="/pp-r-pp-rct-poloplast" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/poloplast/POLOPLAST_001.png" alt="ท่อ PP-R Poloplast" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ท่อ PP-R Poloplast</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ PP-R Poloplast</h3>
</div>
</a>
<a href="/ท่อhdpe" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/hdpe001.jpg" alt="ท่อ HDPE" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<a href="/ท่อhdpe" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/hdpe001.png" alt="ท่อ HDPE" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ท่อ HDPE</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ HDPE</h3>
</div>
</a>
<a href="/ท่อ-upvc" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="ท่อ UPVC" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<a href="/ท่อ-upvc" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="ท่อ UPVC" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ท่อ UPVC</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ UPVC</h3>
</div>
</a>
<a href="/ท่อไซเลอร์" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/SYLER01.jpg" alt="ท่อไซเลอร์" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<a href="/ท่อไซเลอร์" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/syler-pipe-cold-water.jpg" alt="ท่อไซเลอร์" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ท่อไซเลอร์</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อไซเลอร์</h3>
</div>
</a>
<a href="/ท่อและข้อต่อpvc" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/pvc-pipe_000C.jpg" alt="ท่อ PVC" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<a href="/ท่อและข้อต่อpvc" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/pvc-standard-01.jpg" alt="ท่อ PVC" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ท่อ PVC</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ PVC</h3>
</div>
</a>
<a href="/ท่อระบายน้ำ-3-ชั้น-ไซเลนท" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/XYLENT_001.png" alt="ท่อระบายน้ำ 3 ชั้น" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<a href="/ท่อระบายน้ำ-3-ชั้น-ไซเลนท" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/XYLENT_001.png" alt="ท่อระบายน้ำ 3 ชั้น" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ท่อระบายน้ำ 3 ชั้น</h3>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อระบายน้ำ 3 ชั้น</h3>
</div>
</a>
</div>
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl sm:text-3xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>

122
src/pages/ท่อพีพีอาร์ตราช้าง/index.astro
View File

@@ -7,69 +7,72 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ท่อ PPR ตราช้าง (SCG)" description="ท่อ PPR ตราช้าง (SCG) ผลิตจากเม็ดพลาสติก PP-R 80 มาตรฐานยุโรป ทนแรงดัน 20 บาร์ ทนอุณหภูมิ 95°C ราคาถูก ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/ppr-scg.jpg" alt="ท่อ PPR ตราช้าง (SCG)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/ppr-scg.jpg" alt="ท่อ PPR ตราช้าง (SCG)" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ท่อ PPR ตราช้าง (SCG)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
ท่อ PPR
</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">ท่อ PPR ตราช้าง (SCG)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ติดต่อสอบถามส่วนลด ราคาเพิ่มเติม ติดต่อ Dealplustech ได้ตลอดเวลาทำการ
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<a href="tel:0905551415" class="btn-white 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>
<span>090-555-1415</span>
</a>
</div>
<div class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนแรงดันได้สูงสุด 20 บาร์</span>
<span>ทนแรงดันได้สูงสุด 20 บาร์</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ทนต่ออุณหภูมิได้สูงถึง 95°C</span>
<span>ทนต่ออุณหภูมิได้สูงถึง 95°C</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">วัตถุดิบคุณภาพสูงมาตรฐานยุโรปจาก LyondellBasell</span>
<span>วัตถุดิบคุณภาพสูงมาตรฐานยุโรป</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">เชื่อมต่อด้วยความร้อน ไม่รั่วซึม</span>
<span>เชื่อมต่อด้วยความร้อน ไม่รั่วซึม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">น้ำหนักเบา ราคาคุ้มค่ากว่าท่อโลหะ</span>
<span>น้ำหนักเบา ราคาคุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">รับประกันสินค้า อายุการใช้งานยาวนาน</span>
<span>อายุการใช้งานยาวนาน</span>
</div>
</div>
</div>
@@ -77,10 +80,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 mb-6">
ท่อ PPR ตราช้าง ผลิตจากเม็ดพลาสติก <strong>PP-R 80 (Polypropylene Random Copolymer 80)</strong> วัตถุดิบคุณภาพสูงมาตรฐานยุโรปจาก LyondellBasell สามารถทนแรงดันได้สูงสุด 20 บาร์ ทนต่ออุณหภูมิได้สูงถึง 95°C เชื่อมต่อด้วยความร้อน หลอมท่อและข้อต่อเป็นเนื้อเดียวกัน ไม่มีปัญหารั่วซึม น้ำหนักเบา และราคาคุ้มค่ากว่าเมื่อเทียบกับท่อโลหะ
@@ -95,46 +99,46 @@ import Footer from '@/components/common/Footer.astro';
ข้อต่อพีพีอาร์ตราช้าง ผลิตตามมาตรฐาน <strong>DIN16962-5</strong> สามารถติดตั้งร่วมกับท่อประเภทอื่นๆ ได้ตามลักษณะงาน เนื่องจากมีข้อต่อประเภทเกลียวชนิดต่างๆ มากมายจึงทำให้สะดวก และไม่มีปัญหาในการใช้งานร่วมกัน รวมทั้งเกลียวเป็นชนิดทำจากทองเหลืองและชนิดทำจากทองเหลืองชุบนิเกิลทำให้ไม่เป็นสนิม อีกทั้งข้อต่อพีพีอาร์สามารถทนต่อแรงดันได้สูงสุด 20 บาร์
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่น</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่น</h3>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ทนแรงดันได้สูง 20 บาร์</strong> - ผลิตจากวัตถุดิบคุณภาพเยี่ยมมาตรฐานยุโรป กระบวนการผลิตตามมาตรฐาน DIN 8077 และ DIN 8078 ของประเทศเยอรมัน</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ทนต่ออุณหภูมิได้สูงสุดถึง 95°C</strong> - เหมาะกับการใช้เป็นท่อน้ำร้อนเพื่อการอุปโภคบริโภค</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>สะอาดไม่เป็นสนิม ปราศจากโลหะหนักและสิ่งปนเปื้อน</strong> - น้ำที่ไหลผ่านสะอาดปลอดภัย ไม่เกิดตะไคร่น้ำภายในท่อ</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ประหยัดพลังงาน</strong> - มีคุณสมบัติเป็นฉนวน ช่วยรักษาอุณหภูมิความร้อนของน้ำได้ดีกว่าท่อโลหะ ลดการสูญเสียความร้อน</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>อายุการใช้งานยาวนาน</strong> - ทนทานต่อการกัดกร่อนของสารเคมี ไม่ผุกร่อนหรือเป็นสนิม</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>น้ำหนักเบา ราคาถูกกว่าท่อทองแดง</strong> - ได้ระบบท่อที่มีประสิทธิภาพในราคาที่คุ้มค่า ง่ายต่อการติดตั้งและขนส่ง</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ติดตั้งง่าย เชื่อมต่อเป็นเนื้อเดียวกัน ไม่รั่วซึม</strong> - ใช้เครื่องเชื่อมท่อพีพีอาร์ เชื่อมต่อท่อและข้อต่อเข้ากันด้วยความร้อน</span>
@@ -145,36 +149,36 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-prices" class="section bg-gradient-to-br from-primary-50 to-accent-50">
<!-- Price List Download -->
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">📥 ดาวน์โหลดราคาสินค้า</h2>
<div class="max-w-md mx-auto">
<a href="/documents/เอสซีเจ ปี68.pdf" target="_blank" class="flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="card-glass p-8 max-w-lg mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-6 text-center">ดาวน์โหลดราคาสินค้า</h2>
<a href="/documents/เอสซีเจ ปี68.pdf" target="_blank" class="flex items-center gap-4 p-4 bg-secondary-50 rounded-xl hover:bg-secondary-100 transition-colors group">
<svg class="w-10 h-10 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-secondary-900">ราคาสินค้า SCG ปี 68</div><div class="text-sm text-secondary-500">PDF - ดาวน์โหลดราคา</div></div>
<div><div class="font-medium text-secondary-900 group-hover:text-primary-600 transition-colors">ราคาสินค้า SCG ปี 68</div><div class="text-sm text-secondary-500">PDF - ดาวน์โหลดราคา</div></div>
</a>
</div>
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-lg text-secondary-600 mt-6">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> Jppselection &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>

241
src/pages/ท่อระบายน้ำ-3-ชั้น-ไซเลนท/index.astro
View File

@@ -7,75 +7,66 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENT" description="จำหน่ายท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT) คุณภาพสูง ผลิตจาก Poloplast ประเทศเยอรมัน-ออสเตรีย มาตรฐาน EN 1451-1 ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/XYLENT_001.png" alt="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENT" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/XYLENT_001.png" alt="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENT" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENT</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | XYLENT</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สอบถามราคาพิเศษได้ที่ Line หรือโทรติดต่อ Deal Plus Tech
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<a href="tel:0905551415" class="btn-white 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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700"><strong>เงียบ</strong> — ดังเพียง 22 dB เท่านั้น ด้วยชั้นพลาสติกพีพีชนิดพิเศษที่เป็นฉนวนกันเสียง</span>
<span>เงียบ — ดังเพียง 22 dB</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700"><strong>แข็งแรง</strong> — ทนต่อแรงกดทับได้ถึง 6 kN/m² ไม่เปราะแตกง่าย</span>
<span>แข็งแรง — ทนแรงกด 6 kN/m²</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700"><strong>ทนสารเคมี</strong> — ผลิตจากโพลีโพรพิลีนตามมาตรฐาน DIN 8087</span>
<span>ทนสารเคมี — มาตรฐาน DIN 8087</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700"><strong>ทนความร้อน</strong> — ได้สูงสุด 95°C อายุการใช้งานยาวนาน 50 ปี</span>
<span>ทนความร้อน 95°C</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700"><strong>ติดตั้งง่าย</strong> — ด้วยระบบ Push Fit สวมล็อค ประหยัดเวลาและแรงงาน</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700"><strong>ปลอดสารฮาโลเจน</strong> — ปลอดภัยกว่าเมื่อเกิดอัคคีภัย</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700"><strong>ประหยัด</strong> — กว่าท่อเหล็กหล่อ (Cast Iron Pipe)</span>
<span>อายุ 50+ ปี</span>
</div>
</div>
</div>
@@ -84,30 +75,30 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Poloplast Factory Section -->
<section class="section bg-gray-50">
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<img src="/images/products-raw/xylent/XYLENT_002.png" alt="Poloplast Factory" class="w-full h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_002.png" alt="Poloplast Factory" class="w-full h-auto rounded-xl shadow-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="text-center md:text-left">
<h2 class="text-3xl font-bold text-secondary-900 mb-4">POLOPLAST FACTORY IN GERMANY & AUSTRIA</h2>
<img src="/images/products-raw/xylent/XYLENT_003-1024x185.png" alt="Factory" class="w-full h-auto rounded-xl mb-4" />
<h2 class="text-xl font-bold text-secondary-900 mb-4">POLOPLAST FACTORY IN GERMANY & AUSTRIA</h2>
<img src="/images/products-raw/xylent/XYLENT_003-1024x185.png" alt="Factory" class="w-full h-auto rounded-xl mb-4" width="600" height="109" loading="lazy" decoding="async" />
</div>
</div>
</div>
</section>
<!-- Product Intro with New Development -->
<section class="section bg-white">
<section class="section">
<div class="container-custom">
<div class="grid md:grid-cols-2 gap-12 items-center mb-12">
<div>
<img src="/images/products-raw/xylent/XYLENT_004-805x1024.png" alt="New Development" class="w-full h-auto rounded-xl shadow-lg mx-auto" style="max-width: 400px;" />
<img src="/images/products-raw/xylent/XYLENT_004-805x1024.png" alt="New Development" class="w-full h-auto rounded-xl shadow-lg mx-auto" style="max-width: 400px;" width="400" height="507" loading="lazy" decoding="async" />
</div>
<div>
<img src="/images/products-raw/xylent/XYLENT_005-1024x487.png" alt="New Development" class="w-full h-auto rounded-xl shadow-lg mb-6" />
<h2 class="text-3xl font-bold text-secondary-900 mb-4">ผู้ผลิตท่อระบายน้ำ 3 ชั้น เป็นรายแรกของโลก</h2>
<img src="/images/products-raw/xylent/XYLENT_005-1024x487.png" alt="New Development" class="w-full h-auto rounded-xl shadow-lg mb-6" width="600" height="400" loading="lazy" decoding="async" />
<h2 class="text-xl font-bold text-secondary-900 mb-4">ผู้ผลิตท่อระบายน้ำ 3 ชั้น เป็นรายแรกของโลก</h2>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
ท่อระบายน้ำ 3 ชั้น ไซเลนท์ ผลิตจากโรงงาน Poloplast ผู้ผลิตท่อ 3 ชั้น รายแรกของโลก ที่มีโรงงานอยู่ในประเทศเยอรมัน และออสเตรีย เริ่มผลิตครั้งแรกในปี ค.ศ. 1991
</p>
@@ -120,15 +111,15 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Sound Insulation Section -->
<section class="section bg-primary-50">
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-6 text-center">เงียบกว่า เก็บเสียงได้ดี ดังเพียง 22 dB เท่านั้น</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6 text-center">เงียบกว่า เก็บเสียงได้ดี ดังเพียง 22 dB เท่านั้น</h2>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<img src="/images/products-raw/xylent/XYLENT_006.png" alt="Sound Insulation" class="w-full h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_006.png" alt="Sound Insulation" class="w-full h-auto rounded-xl shadow-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div>
<img src="/images/products-raw/xylent/XYLENT_007-1024x474.png" alt="Sound Level Test" class="w-full h-auto rounded-xl shadow-lg mb-6" />
<img src="/images/products-raw/xylent/XYLENT_007-1024x474.png" alt="Sound Level Test" class="w-full h-auto rounded-xl shadow-lg mb-6" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-lg text-secondary-700 leading-relaxed">
ท่อระบายน้ำ 3 ชั้น ไซเลนท์ มีชั้นพลาสติกพีพี ชนิดพิเศษที่เป็นฉนวนกันเสียง ที่ผ่านการทดสอบจากระดับเสียงจาก Fraunhofer IBP ซึ่งเป็นผู้เชี่ยวชาญด้านการทดสอบผลกายภาพของวัสดุที่ใช้ในการก่อสร้างอาคาร มีความเชี่ยวชาญพิเศษในด้าน Noise control and sound insulation measures ในอาคาร การทดสอบทำด้วยความเข้มงวดแบบ Installation Sound Level ในระบบ Closed Bracket เสียงดังสุดเพียง 22 dB เท่านั้น
</p>
@@ -138,12 +129,12 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Strength Section -->
<section class="section bg-white">
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-6 text-center">แข็งแรง ทนต่อแรงกดทับได้ถึง 6 kN/m² ไม่เปราะแตกง่าย</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6 text-center">แข็งแรง ทนต่อแรงกดทับได้ถึง 6 kN/m² ไม่เปราะแตกง่าย</h2>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<img src="/images/products-raw/xylent/XYLENT_008-1024x357.png" alt="Strength Test" class="w-full h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_008-1024x357.png" alt="Strength Test" class="w-full h-auto rounded-xl shadow-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div>
<p class="text-lg text-secondary-700 leading-relaxed">
@@ -155,12 +146,12 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Chemical Resistance & Temperature -->
<section class="section bg-gray-50">
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div>
<h2 class="text-3xl font-bold text-secondary-900 mb-4">ความต้านทานสารเคมี</h2>
<img src="/images/products-raw/xylent/XYLENT_009-1024x418.png" alt="Chemical Resistance" class="w-full h-auto rounded-xl shadow-lg mb-4" />
<h2 class="text-xl font-bold text-secondary-900 mb-4">ความต้านทานสารเคมี</h2>
<img src="/images/products-raw/xylent/XYLENT_009-1024x418.png" alt="Chemical Resistance" class="w-full h-auto rounded-xl shadow-lg mb-4" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>ท่อและข้อต่อ:</strong> ผลิตจากโพลีโพรพิลีน ตามมาตรฐานเยอรมัน DIN 8087 Supplement 1
</p>
@@ -169,8 +160,8 @@ import Footer from '@/components/common/Footer.astro';
</p>
</div>
<div>
<h2 class="text-3xl font-bold text-secondary-900 mb-4">ทนอุณหภูมิสูงสุด 95°C อายุการใช้งานยาวนาน 50 ปี</h2>
<img src="/images/products-raw/xylent/XYLENT_010-1024x309.png" alt="Temperature Resistance" class="w-full h-auto rounded-xl shadow-lg mb-4" />
<h2 class="text-xl font-bold text-secondary-900 mb-4">ทนอุณหภูมิสูงสุด 95°C อายุการใช้งานยาวนาน 50 ปี</h2>
<img src="/images/products-raw/xylent/XYLENT_010-1024x309.png" alt="Temperature Resistance" class="w-full h-auto rounded-xl shadow-lg mb-4" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-lg text-secondary-700 leading-relaxed">
ในการใช้งานจริง ผู้อยู่อาศัยอาจเทน้ำร้อนหรือน้ำมันจากการทำครัว ลงท่อระบายน้ำทันทีได้ ท่อระบายน้ำ 3 ชั้น ไซเลนท์ ผ่านการทดสอบจาก TGM ตามมาตรฐาน EN 1055 : 11.1996 สามารถรองรับอุณหภูมิได้ตามรายละเอียดในตาราง
</p>
@@ -179,8 +170,8 @@ import Footer from '@/components/common/Footer.astro';
<!-- Expansion Rate -->
<div class="text-center">
<h2 class="text-3xl font-bold text-secondary-900 mb-4">อัตราการยืดตัวของท่อ ต่ำสุดเพียง 0.05 mm / m K</h2>
<img src="/images/products-raw/xylent/XYLENT_011-1024x325.png" alt="Expansion Rate" class="w-full max-w-3xl mx-auto h-auto rounded-xl shadow-lg mb-4" />
<h2 class="text-xl font-bold text-secondary-900 mb-4">อัตราการยืดตัวของท่อ ต่ำสุดเพียง 0.05 mm / m K</h2>
<img src="/images/products-raw/xylent/XYLENT_011-1024x325.png" alt="Expansion Rate" class="w-full max-w-3xl mx-auto h-auto rounded-xl shadow-lg mb-4" width="800" height="600" loading="lazy" decoding="async" />
<p class="text-lg text-secondary-700 leading-relaxed max-w-3xl mx-auto">
โดยปกติวัตถุจะมีการยืดขยายตัวเมื่อมีอุณหภูมิที่สูงขึ้น สำหรับท่อระบายน้ำนั้น ในแง่ของการใช้งาน มักจะมีการเทน้ำร้อนลงท่อทันที ซึ่งอุณหภูมิที่เปลี่ยนไปจะทำให้ท่อมีการยืดขยายตัวและหดตัวลงเมื่อกลับมาสู่อุณหภูมิห้อง นานไปจะทำให้เกิดปัญหารั่วซึมที่บริเวณข้อต่อได้
</p>
@@ -188,17 +179,16 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Push Fit Installation - Original Layout -->
<section class="section bg-white">
<!-- Push Fit Installation -->
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-6 text-center">ติดตั้งด้วยระบบสวมล็อค (Push Fit)</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6 text-center">ติดตั้งด้วยระบบสวมล็อค (Push Fit)</h2>
<p class="text-lg text-secondary-700 leading-relaxed text-center max-w-3xl mx-auto mb-8">
ติดตั้งง่าย ด้วยการออกแบบพิเศษ ปลายท่อด้านหนึ่งเป็นปากระฆัง พร้อมซีลยางจากโรงงาน ด้วยระบบสวมล็อค (Push Fit) อีกทั้งท่อยังเบากว่าท่อเหล็กหล่อ แต่มีความแข็งแรงกว่าท่อพีวีซี จึงทำให้ท่อระบายน้ำ ไซเลนท์ ติดตั้งได้อย่างง่ายมาก แม้จะเป็นพื้นที่แคบๆ อย่างในช่องชาร์ป
</p>
<h3 class="text-2xl font-bold text-secondary-900 mb-6 text-center">ขั้นตอนง่ายๆ ในการติดตั้งระบบสวมล็อค</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6 text-center">ขั้นตอนง่ายๆ ในการติดตั้งระบบสวมล็อค</h3>
<!-- All Steps as One Text -->
<div class="text-lg text-secondary-700 leading-relaxed max-w-3xl mx-auto mb-12 space-y-4">
<p><strong>ขั้นตอนที่ 1:</strong> ตัดท่อให้ได้ฉาก และแต่งปลายท่อ (มุมที่เหมาะสมในการแต่งปลายท่อคือ 15 องศา ตามตาราง)</p>
<p><strong>ขั้นตอนที่ 2:</strong> ทา Lubricant XYLENT ที่ด้านปลายปากระฆังให้ทั่ว</p>
@@ -207,33 +197,30 @@ import Footer from '@/components/common/Footer.astro';
<p><strong>ขั้นตอนที่ 5:</strong> สำหรับการติดตั้งท่อในแนวตั้ง ใช้ตัวรัดท่อรัดที่ด้านล่างของปากระฆังทันทีหลังจากติดตั้ง เพื่อป้องกันท่อหดกลับเข้าไปในปากปลายระฆัง (ตามรูปที่ 2)</p>
</div>
<!-- All Step Images: Row 1 = 3 cols, Row 2-3 = 1 col centered -->
<!-- All Step Images -->
<div class="max-w-4xl mx-auto">
<!-- Row 1: 3 columns -->
<div class="grid grid-cols-3 gap-4 mb-4">
<img src="/images/products-raw/xylent/XYLENT_012.png" alt="ขั้นตอนที่ 1" class="w-full h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_013.png" alt="ขั้นตอนที่ 2" class="w-full h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_014.png" alt="ขั้นตอนที่ 3" class="w-full h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_012.png" alt="ขั้นตอนที่ 1" class="w-full h-auto rounded-xl shadow-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/xylent/XYLENT_013.png" alt="ขั้นตอนที่ 2" class="w-full h-auto rounded-xl shadow-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/xylent/XYLENT_014.png" alt="ขั้นตอนที่ 3" class="w-full h-auto rounded-xl shadow-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<!-- Row 2: 1 column centered -->
<div class="flex justify-center mb-4">
<img src="/images/products-raw/xylent/XYLENT_015.png" alt="ขั้นตอนที่ 4" class="w-full h-auto rounded-xl shadow-lg" style="max-width: 33.333%;" />
<img src="/images/products-raw/xylent/XYLENT_015.png" alt="ขั้นตอนที่ 4" class="w-full h-auto rounded-xl shadow-lg" style="max-width: 33.333%;" width="600" height="400" loading="lazy" decoding="async" />
</div>
<!-- Row 3: 1 column centered -->
<div class="flex justify-center">
<img src="/images/products-raw/xylent/XYLENT_016-1024x617.png" alt="ขั้นตอนที่ 5" class="w-full h-auto rounded-xl shadow-lg" style="max-width: 33.333%;" />
<img src="/images/products-raw/xylent/XYLENT_016-1024x617.png" alt="ขั้นตอนที่ 5" class="w-full h-auto rounded-xl shadow-lg" style="max-width: 33.333%;" width="600" height="361" loading="lazy" decoding="async" />
</div>
</div>
</div>
</section>
<!-- Cast Iron Comparison -->
<section class="section bg-primary-50">
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-6 text-center">เหตุใดในยุโรป จึงไม่ใช้ท่อเหล็กหล่อ (Cast Iron) เป็นท่อน้ำทิ้ง</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6 text-center">เหตุใดในยุโรป จึงไม่ใช้ท่อเหล็กหล่อ (Cast Iron) เป็นท่อน้ำทิ้ง</h2>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<img src="/images/products-raw/xylent/XYLENT_017.png" alt="Why Not Cast Iron" class="w-full h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_017.png" alt="Why Not Cast Iron" class="w-full h-auto rounded-xl shadow-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div>
<ul class="list-disc pl-6 space-y-3 text-lg text-secondary-700">
@@ -248,12 +235,12 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Halogen Free with XYLENT_018 -->
<section class="section bg-white">
<!-- Halogen Free -->
<section class="section">
<div class="container-custom text-center">
<h2 class="text-3xl font-bold text-secondary-900 mb-6">ท่อระบายน้ำ 3 ชั้น ไซเลนท์ ปลอดสารฮาโลเจน</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6">ท่อระบายน้ำ 3 ชั้น ไซเลนท์ ปลอดสารฮาโลเจน</h2>
<div class="flex justify-center mb-6">
<img src="/images/products-raw/xylent/XYLENT_018-1024x848.png" alt="ปลอดสารฮาโลเจน" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_018-1024x848.png" alt="ปลอดสารฮาโลเจน" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
</div>
<p class="text-lg text-secondary-700 leading-relaxed max-w-3xl mx-auto">
วัตถุดิบที่ใช้ผลิตท่อและข้อต่อ ทำจากพีพี ซึ่งมีความสะอาดสูง และปลอดสารฮาโลเจน จึงปลอดภัยกว่าเมื่อเกิดอัคคีภัย
@@ -262,92 +249,92 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Product Gallery: Pipe -->
<section class="section bg-gray-50">
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">ท่อ / PIPE</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">ท่อ / PIPE</h2>
<div class="flex justify-center">
<img src="/images/products-raw/xylent/XYLENT_022.png" alt="ท่อระบายน้ำ 3 ชั้น ไซเลนท์" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_022.png" alt="ท่อระบายน้ำ 3 ชั้น ไซเลนท์" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- Product Gallery: Fitting - 1 Column -->
<section class="section bg-white">
<!-- Product Gallery: Fitting -->
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">ข้อต่อ / FITTING</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">ข้อต่อ / FITTING</h2>
<div class="flex flex-col items-center gap-8">
<img src="/images/products-raw/xylent/XYLENT_023.png" alt="ข้อต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_024.png" alt="ข้อต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_025.png" alt="ข้อต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_023.png" alt="ข้อต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/products-raw/xylent/XYLENT_024.png" alt="ข้อต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/products-raw/xylent/XYLENT_025.png" alt="ข้อต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- Product Gallery: Trap -->
<section class="section bg-gray-50">
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">อุปกรณ์ดับกลิ่น / TRAP</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">อุปกรณ์ดับกลิ่น / TRAP</h2>
<div class="flex justify-center">
<img src="/images/products-raw/xylent/XYLENT_026.png" alt="อุปกรณ์ดับกลิ่น" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_026.png" alt="อุปกรณ์ดับกลิ่น" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- Product Gallery: Transition Fittings - 1 Column -->
<section class="section bg-white">
<!-- Product Gallery: Transition Fittings -->
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">อุปกรณ์ต่อท่อชนิดอื่น / TRANSITION FITTINGS</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">อุปกรณ์ต่อท่อชนิดอื่น / TRANSITION FITTINGS</h2>
<div class="flex flex-col items-center gap-8">
<img src="/images/products-raw/xylent/XYLENT_027.png" alt="อุปกรณ์ต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_028.png" alt="อุปกรณ์ต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_027.png" alt="อุปกรณ์ต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/products-raw/xylent/XYLENT_028.png" alt="อุปกรณ์ต่อท่อ" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- Product Gallery: Accessories - 1 Column -->
<section class="section bg-gray-50">
<!-- Product Gallery: Accessories -->
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">อุปกรณ์เสริม / ACCESSORIES</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">อุปกรณ์เสริม / ACCESSORIES</h2>
<div class="flex flex-col items-center gap-8">
<img src="/images/products-raw/xylent/XYLENT_029.png" alt="อุปกรณ์เสริม" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_030.png" alt="อุปกรณ์เสริม" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_031-771x1024.png" alt="อุปกรณ์เสริม" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" />
<img src="/images/products-raw/xylent/XYLENT_029.png" alt="อุปกรณ์เสริม" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/products-raw/xylent/XYLENT_030.png" alt="อุปกรณ์เสริม" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/products-raw/xylent/XYLENT_031-771x1024.png" alt="อุปกรณ์เสริม" class="w-full max-w-4xl h-auto rounded-xl shadow-lg" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- PDF Price List -->
<section id="product-prices" class="section bg-gradient-to-br from-primary-50 to-accent-50">
<section class="section">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">📥 ดาวน์โหลดราคาสินค้า</h2>
<div class="grid md:grid-cols-2 gap-4 max-w-4xl mx-auto">
<a href="/documents/Price List XYLENT_Novat_V12-2022 [080265]_220727_155718 (1).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-10 h-10 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-secondary-900">Price List XYLENT Novat V12-2022</div><div class="text-sm text-secondary-500">PDF</div></div>
</a>
<a href="/documents/Price List_novat_18-1-64_210723_094815.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-10 h-10 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-secondary-900">Price List Novat 18-1-64</div><div class="text-sm text-secondary-500">PDF</div></div>
</a>
<div class="card-glass p-8 max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-6 text-center">ดาวน์โหลดราคาสินค้า</h2>
<div class="grid md:grid-cols-2 gap-4">
<a href="/documents/Price List XYLENT_Novat_V12-2022 [080265]_220727_155718 (1).pdf" target="_blank" class="flex items-center gap-4 p-4 bg-secondary-50 rounded-xl hover:bg-secondary-100 transition-colors group">
<svg class="w-10 h-10 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-secondary-900 group-hover:text-primary-600 transition-colors">Price List XYLENT Novat V12-2022</div><div class="text-sm text-secondary-500">PDF</div></div>
</a>
<a href="/documents/Price List_novat_18-1-64_210723_094815.pdf" target="_blank" class="flex items-center gap-4 p-4 bg-secondary-50 rounded-xl hover:bg-secondary-100 transition-colors group">
<svg class="w-10 h-10 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-secondary-900 group-hover:text-primary-600 transition-colors">Price List Novat 18-1-64</div><div class="text-sm text-secondary-500">PDF</div></div>
</a>
</div>
</div>
</div>
</section>
<!-- Contact CTA -->
<section id="contact-cta" class="section bg-gray-50">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>

170
src/pages/ท่อและข้อต่อpvc/index.astro
View File

@@ -7,62 +7,69 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ท่อ PVC และข้อต่อท่อพีวีซี | PVC pipe" description="ท่อ PVC และข้อต่อท่อพีวีซี ราคาส่ง มาตรฐานสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล ยี่ห้อท่อตราช้าง ท่อน้ำไทย ท่อตราเสือ">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img
src="/images/products-cropped/pvc-standard-01.jpg"
alt="ท่อ PVC มาตรฐานสูง ราคาโรงงาน"
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'"
/>
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ท่อ PVC และข้อต่อท่อพีวีซี | PVC pipe</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
ท่อ PVC
</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">ท่อ PVC และข้อต่อท่อพีวีซี | PVC pipe</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ติดต่อสอบถามส่วนลด ราคาเพิ่มเติม ติดต่อ Dealplustech ได้ตลอดเวลาทำการ
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<a href="tel:0905551415" class="btn-white 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>
<span>090-555-1415</span>
</a>
</div>
<div class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">มาตรฐาน มอก. รับรองคุณภาพ</span>
<span>มาตรฐาน มอก. รับรองคุณภาพ</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">น้ำหนักเบา ติดตั้งง่าย</span>
<span>น้ำหนักเบา ติดตั้งง่าย</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ไม่เป็นสนิม ไม่ลามไฟ</span>
<span>ไม่เป็นสนิม ไม่ลามไฟ</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
</div>
</div>
@@ -70,10 +77,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 mb-6">
<strong>ยี่ห้อที่มีจำหน่าย:</strong> ท่อตราช้าง / ท่อน้ำไทย / ท่อตราเสือ / โรงงานทั่วไป
@@ -83,52 +91,52 @@ import Footer from '@/components/common/Footer.astro';
<strong>ท่อ PVC</strong> เป็นวัสดุประเภทท่อประปาที่นิยมใช้งานในประเทศไทยมากที่สุดในปัจจุบัน หาซื้อได้ง่ายตามร้านค้าวัสดุก่อสร้างทั่วไป มีหลายคุณภาพและราคาให้เลือกใช้ ปกติแล้วสีของท่อและข้อต่อจะบ่งบอกถึงการใช้งานต่างๆ สีฟ้าใช้สำหรับระบบประปา/ระบายน้ำ สีเหลืองและสีขาวใช้สำหรับเดินท่อสายไฟฟ้า สีเทาใช้สำหรับงานเกษตรกรรม
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ลักษณะทั่วไปของท่อ PVC</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ลักษณะทั่วไปของท่อ PVC</h3>
<p class="text-lg text-secondary-700 mb-4">
น้ำหนักเบา บิดงอได้พอสมควร ราคาถูก แข็งแรง ไม่ลามไฟ ไม่เป็นสนิม มีข้อเสียที่สำคัญคือเมื่อโดนความร้อนหรือโดนแดดเป็นระยะเวลาหนึ่ง เนื้อ PVC จะเปราะแตกง่าย สามารถยืดเวลาการใช้งานท่อ PVC ได้ถึง 50 ปี หากปรึกษากับผู้เชี่ยวชาญด้านท่อ
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติและการใช้งาน</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติและการใช้งาน</h3>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>การใช้งาน:</strong> ท่อน้ำดี, ท่อน้ำเสีย</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>สี:</strong> ฟ้า เหลือง เทา ขาว</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>การติดตั้ง:</strong> ใช้น้ำยาประสานท่อในการประสานกัน</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>อุณหภูมิที่เหมาะสม:</strong> 3-50 องศาเซลเซียส</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>อายุการใช้งาน:</strong> ประมาณ 30-50 ปี ในอุณหภูมิและแรงดันมาตรฐาน</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ความยาวต่อท่อน:</strong> 4 เมตร (6 เมตร สำหรับงานราชการ)</span>
</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ท่อ PVC สีต่างๆ มีความหมายดังนี้</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ท่อ PVC สีต่างๆ มีความหมายดังนี้</h3>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-blue-500 mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
@@ -148,22 +156,22 @@ import Footer from '@/components/common/Footer.astro';
</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ประเภทท่อ PVC</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ประเภทท่อ PVC</h3>
<ul class="space-y-3">
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ท่อ PVC ปลายเรียบ:</strong> เป็นท่อพีวีซีทั่วไป สามารถต่อกับท่อเส้นอื่นผ่านด้วยข้อต่อพีวีซี หรืออุปกรณ์พีวีซีอื่นๆ ทนความดันได้ดี</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ท่อ PVC ปลายบาน:</strong> สามารถเชื่อมต่อกับท่ออื่นได้โดยไม่ต้องผ่านข้อต่อ แต่ยังต้องใช้น้ำยาประสานเพื่อกันรั่วซึม</span>
</li>
<li class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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><strong>ท่อ PVC เซาะร่อง:</strong> ใช้สำหรับเป็นท่อรับน้ำจากน้ำฝนบนพื้นดินลำเลียงน้ำสู่บ่อบาดาล มีการเซาะร่องเพื่อให้น้ำสามารถไหลผ่าน ขนาด 2"-8"</span>
@@ -174,53 +182,55 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section class="section bg-gray-50">
<!-- Installation Guide -->
<section class="section bg-secondary-50">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6">วิธีการติดตั้ง ท่อ PVC</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6">วิธีการติดตั้ง ท่อ PVC</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">1</div>
<div class="card-glass rounded-xl p-6">
<div class="w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">1</div>
<h4 class="font-bold text-lg mb-2">ตัดท่อ</h4>
<p class="text-secondary-600 text-sm">ตัดให้ตั้งฉาก ใช้กรรไกรตัดท่อหรือเลื่อยหากเป็นท่อขนาดใหญ่ แต่งปลายท่อให้เรียบร้อย ปัดเศษขุยออกให้หมด</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">2</div>
<div class="card-glass rounded-xl p-6">
<div class="w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">2</div>
<h4 class="font-bold text-lg mb-2">วัดระยะความลึก</h4>
<p class="text-secondary-600 text-sm">วัดระยะความลึกในการสวมท่อเข้ากับข้อต่อ</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">3</div>
<div class="card-glass rounded-xl p-6">
<div class="w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">3</div>
<h4 class="font-bold text-lg mb-2">ทำความสะอาด</h4>
<p class="text-secondary-600 text-sm">ใช้น้ำยาทำความสะอาดท่อ เช็ดทำความสะอาดภายในข้อต่อและท่อ เพื่อลบคราบฝุ่น น้ำมัน หรือสิ่งสกปรก</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">4</div>
<div class="card-glass rounded-xl p-6">
<div class="w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">4</div>
<h4 class="font-bold text-lg mb-2">ทาน้ำยาประสานท่อ</h4>
<p class="text-secondary-600 text-sm">ทาน้ำยาประสานท่อด้านในข้อต่อก่อน แล้วจึงทาภายนอกท่อ</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">5</div>
<div class="card-glass rounded-xl p-6">
<div class="w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">5</div>
<h4 class="font-bold text-lg mb-2">สวมปลายท่อ</h4>
<p class="text-secondary-600 text-sm">สวมปลายท่อเข้ากับข้อต่อ ดันให้สุดถึงตำแหน่งที่ทำเครื่องหมายไว้ ดันทิ้งไว้ประมาณ 15 วินาที</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">6</div>
<div class="card-glass rounded-xl p-6">
<div class="w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-4">6</div>
<h4 class="font-bold text-lg mb-2">รอใช้งาน</h4>
<p class="text-secondary-600 text-sm">ก่อนใช้งานควรทิ้งให้น้ำยาประสานท่อแห้งประมาณ 10 นาที</p>
</div>
</div>
<div class="mt-6">
<img src="/images/products-misc/ติดตั้งท่อPVCมาตรฐานสูง-01.jpg" alt="วิธีการติดตั้งท่อ PVC" class="w-full h-auto rounded-xl shadow-md" onerror="this.style.display='none'" />
<img src="/images/products-misc/ติดตั้งท่อPVCมาตรฐานสูง-01.jpg" alt="วิธีการติดตั้งท่อ PVC" class="w-full h-auto rounded-xl shadow-md" width="600" height="400" loading="lazy" decoding="async" onerror="this.style.display='none'" />
</div>
</div>
</section>
<!-- Size Table -->
<section class="section bg-white">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-6">ขนาดท่อ PVC กับการใช้งาน</h3>
<h3 class="text-xl font-bold text-secondary-900 mb-6">ขนาดท่อ PVC กับการใช้งาน</h3>
<div class="overflow-x-auto">
<table class="modern-table w-full">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">ขนาด</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">ชื่อเรียก</th>
@@ -228,37 +238,37 @@ import Footer from '@/components/common/Footer.astro';
</tr>
</thead>
<tbody class="bg-white">
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg font-semibold">½"</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">สี่หุน</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">ท่อประปาภายในบ้าน งานก่อสร้างทั่วไป</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg font-semibold">¾"</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">หกหุน</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">งานประปาที่ต้องลำเลียงน้ำมากขึ้น</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg font-semibold">1"</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">หนึ่งนิ้ว</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">ท่อหลักของงานน้ำประปา ต่อกับข้อต่อลดขนาด</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg font-semibold">1 ¼"</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">หนึ่งนิ้วคูณนึง</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">งานที่ต้องการลำเลียงน้ำปริมาณมากขึ้น</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg font-semibold">1 ½"</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">นิ้วครึ่ง</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">ระบบท่อน้ำทิ้ง ลำเลียงน้ำจากอ่างไปยังบ่อบำบัด</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg font-semibold">2"</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">สองนิ้ว</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">ระบบท่อน้ำทิ้ง ระบายน้ำได้ดี อุดตันยากขึ้น</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg font-semibold">2 ½" ขึ้นไป</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">สองนิ้วครึ่งขึ้นไป</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">งานเฉพาะทาง ก่อสร้างอาคาร งานเกษตร จ่ายน้ำปริมาณมาก</td>
@@ -269,34 +279,34 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section class="section bg-gray-50">
<!-- Product Photos -->
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<img src="/images/products-misc/ติดตั้งท่อPVCมาตรฐานสูง-01.jpg" alt="ติดตั้งท่อ PVC มาตรฐานสูง" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" />
<img src="/images/products-misc/ติดตั้งท่อPVCแรงดัน-01.jpg" alt="ติดตั้งท่อ PVC แรงดัน" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" />
<img src="/images/products-misc/ติดตั้งท่อPVCมาตรฐานสูง-01.jpg" alt="ติดตั้งท่อ PVC มาตรฐานสูง" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" onerror="this.style.display='none'" />
<img src="/images/products-misc/ติดตั้งท่อPVCแรงดัน-01.jpg" alt="ติดตั้งท่อ PVC แรงดัน" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" onerror="this.style.display='none'" />
</div>
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-lg text-secondary-600 mt-6">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> Jppselection &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>

111
src/pages/ท่อไซเลอร์/index.astro
View File

@@ -7,59 +7,60 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" description="จำหน่ายท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/syler-pipe-cold-water.jpg" alt="ท่อไซเลอร์ (Syler)" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/syler-pipe-cold-water.jpg" alt="ท่อไซเลอร์ (Syler)" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,10 +68,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
<strong>ท่อไซเลอร์ (Syler)</strong> เป็นท่อเหล็กกล้า Class M ชุบสังกะสี ภายนอกจะถูกเคลือบด้วยผงโพลีเอทิลีน (PE powder coat) ป้องกันสนิมจากภายนอกอีกชั้นหนึ่ง จึงทำให้มั่นใจได้ว่าท่อไซเลอร์จะมีอายุการใช้งานยาวนานกว่าท่อเหล็ก Galvanized ถึง 50 ปี เพราะไม่เป็นสนิมจากภายนอก
@@ -79,7 +81,7 @@ import Footer from '@/components/common/Footer.astro';
ส่วนภายในถูกบุด้วยพลาสติกโพลีเอทิลีน (PE) เพื่อป้องกันการเกิดสนิมภายใน เนื่องจากน้ำภายในท่อจะไม่สัมผัสกับตัวท่อ ท่อ SYLER ผลิตภายใต้มาตรฐานระบบคุณภาพ ISO 9001:2000 และ FM APPROVED
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่น</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่น</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>ทนแรงดันได้ <strong>50 bar</strong> อุณหภูมิใช้งานได้ถึง <strong>90°C</strong></li>
<li>ป้องกันปัญหาท่อรั่วซึมจากการกัดกร่อนของสนิม ท่อเป็นสนิมอุดตัน ท่อตกท้องช้าง ท่อกรอบแตกเมื่ออยู่กลางแจ้ง</li>
@@ -90,7 +92,7 @@ import Footer from '@/components/common/Footer.astro';
<li>ปริมาณโลหะหนักที่ปนเปื้อนต่ำกว่ามาตรฐานตั้งแต่ 20-500 เท่า</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">การใช้งาน</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">การใช้งาน</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>ท่อเมนขนาดใหญ่และท่อดับเพลิง</li>
<li>ระบบท่อประปาน้ำร้อน น้ำเย็น</li>
@@ -99,7 +101,7 @@ import Footer from '@/components/common/Footer.astro';
<li>ใช้ได้ทั้งภายในและภายนอกอาคาร</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ข้อดีของระบบ Grooved Coupling</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ข้อดีของระบบ Grooved Coupling</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>ติดตั้งง่าย สะดวกรวดเร็ว ประหยัดค่าแรงและเวลา</li>
<li>โยกย้าย เปลี่ยนแปลงรูปแบบการติดตั้ง หรือขยายไลน์ท่อเพิ่มเติมได้โดยง่าย</li>
@@ -112,31 +114,34 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section class="section bg-white">
<!-- Product Photos -->
<section class="section bg-secondary-50">
<div class="container-custom">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<img src="/images/products-misc/SYLER-b01.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/products-misc/SYLER-b02.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/products-misc/SYLER-b03.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/products-misc/syler001.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/products-misc/syler002.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/products-misc/syler003.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" />
<img src="/images/products-misc/SYLER-b01.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" onerror="this.style.display='none'" />
<img src="/images/products-misc/SYLER-b02.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" onerror="this.style.display='none'" />
<img src="/images/products-misc/SYLER-b03.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" onerror="this.style.display='none'" />
<img src="/images/products-misc/syler001.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" onerror="this.style.display='none'" />
<img src="/images/products-misc/syler002.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" onerror="this.style.display='none'" />
<img src="/images/products-misc/syler003.jpg" alt="ท่อไซเลอร์ (Syler) ท่อเหล็กเหล็กบุพีอี" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" onerror="this.style.display='none'" />
</div>
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>

124
src/pages/ระบบน้ำ/index.astro Normal file
View File

@@ -0,0 +1,124 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="ระบบน้ำ" description="ระบบน้ำ วาล์ว ปั๊มน้ำ ระบบกรองน้ำ ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
<Header slot="header" />
<main class="bg-white min-h-screen">
<!-- Category Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="card-glass p-2">
<img src="/images/products-cropped/water-pump_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'" />
</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 text-white mb-4">ระบบน้ำ</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล
</p>
<div class="flex flex-wrap gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap gap-6 mt-8">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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 text-white" 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 text-white" 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>
<!-- Products -->
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="text-center mb-12">
<h2 class="section-title">สินค้าในหมวดนี้</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<a href="/วาล์ว-valve" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/valve_000C.jpg" alt="วาล์ว" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">วาล์ว</h3>
</div>
</a>
<a href="/water-pump" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/water-pump_000C.jpg" alt="ปั๊มน้ำ" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ปั๊มน้ำ</h3>
</div>
</a>
<a href="/water-treatment" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/water-treatment_000C.jpg" alt="ระบบกรองน้ำ" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ระบบกรองน้ำ</h3>
</div>
</a>
</div>
</div>
</section>
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-white 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/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

87
src/pages/ระบบรั้ว/index.astro
View File

@@ -7,57 +7,56 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ระบบรั้ว" description="ระบบรั้ว รั้วเทวดา ระบบรั้วไวน์แมน คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/vineman_000C.jpg" alt="ระบบรั้ว" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-cropped/vineman_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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ระบบรั้ว</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">ระบบรั้ว</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ระบบรั้ว รั้วเทวดา ระบบรั้วไวน์แมน คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
</div>
</div>
@@ -71,40 +70,42 @@ import Footer from '@/components/common/Footer.astro';
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
<a href="/รั้วเทวดา" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/Banner-TDV2.jpg" alt="รั้วเทวดา" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/products-raw/tevada/TEVADA_001-987x1024.png" alt="รั้วเทวดา" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">รั้วเทวดา</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">รั้วเทวดา</h3>
</div>
</a>
<a href="/ระบบรั้วไวน์แมน-vineman-2" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/vineman_000C.jpg" alt="ระบบรั้วไวน์แมน" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg" alt="ระบบรั้วไวน์แมน" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">ระบบรั้วไวน์แมน</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">ระบบรั้วไวน์แมน</h3>
</div>
</a>
</div>
</div>
</section>
<section id="contact-cta" class="section bg-white">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

223
src/pages/ระบบรั้วไวน์แมน-vineman-2/index.astro
View File

@@ -7,65 +7,63 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนาม" description="จำหน่ายระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนามคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<main class="bg-white min-h-screen">
<!-- Hero Section -->
<section id="product-detail" class="section">
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img
src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg"
alt="ระบบรั้วไวน์แมน Vineman"
class="w-full h-auto rounded-xl"
width="600" height="515" loading="eager" fetchpriority="high" decoding="sync"
/>
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ระบบรั้วไวน์แมน | Vineman</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">ระบบรั้วไวน์แมน | Vineman</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ติดต่อสอบถามส่วนลด ราคาเพิ่มเติม ติดต่อ Dealplustech ได้ตลอดเวลาทำการ
</p>
<!-- Feature Bullets -->
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">ลวดแรงดึงสูง เหนียว ทนต่อแรงกระแทก</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">ชุบสังกะสีหนา ตามมาตรฐาน ASTM</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">อายุการใช้งานมากกว่า 50 ปี</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">ติดตั้งง่าย รวดเร็ว</span>
</div>
</div>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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 class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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 text-white" 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>ชุบสังกะสีหนา ตามมาตรฐาน ASTM</span>
</div>
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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>อายุการใช้งานมากกว่า 50 ปี</span>
</div>
</div>
</div>
</div>
</div>
@@ -74,7 +72,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- Products Overview -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">ลวดหนาม/เสารั้ว/เสารับแรง</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">ลวดหนาม/เสารั้ว/เสารับแรง</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="text-center">
<img
@@ -115,7 +113,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- 6 Techniques -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">6 เทคนิคน่ารู้ ก่อนเลือกใช้ ระบบรั้วตาข่าย</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">6 เทคนิคน่ารู้ ก่อนเลือกใช้ ระบบรั้วตาข่าย</h2>
<div class="grid lg:grid-cols-2 gap-8 items-center">
<div>
<img
@@ -126,27 +124,27 @@ import Footer from '@/components/common/Footer.astro';
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<span class="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold">01</span>
<span class="flex-shrink-0 w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold">01</span>
<span class="text-secondary-700">ทนทาน ด้วยลวดแรงดึงสูง เหนียว ทนต่อแรงกระแทก ไม่ขาดง่าย</span>
</div>
<div class="flex items-start space-x-3">
<span class="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold">02</span>
<span class="flex-shrink-0 w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold">02</span>
<span class="text-secondary-700">คุ้มค่า ราคาถูกกว่า รั้วลวดหนาม รั้วคอนกรีต รั้วคาวบอย รั้วตาข่ายถัก CHAINLINK</span>
</div>
<div class="flex items-start space-x-3">
<span class="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold">03</span>
<span class="flex-shrink-0 w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold">03</span>
<span class="text-secondary-700">หนากว่า ด้วยลวดขนาด 2.50 มม. ชุบสังกะสีหนา ตามมาตรฐานอเมริกา (ASTM) อายุการใช้งานมากกว่า 50 ปี</span>
</div>
<div class="flex items-start space-x-3">
<span class="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold">04</span>
<span class="flex-shrink-0 w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold">04</span>
<span class="text-secondary-700">ดีไซน์เหนือกว่า ด้านล่างตีช่องถี่ ด้านบนช่องกว้าง ป้องกันสัตว์เล็กและสัตว์ใหญ่ได้พร้อมกัน</span>
</div>
<div class="flex items-start space-x-3">
<span class="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold">05</span>
<span class="flex-shrink-0 w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold">05</span>
<span class="text-secondary-700">ติดตั้งง่าย สะดวก รวดเร็ว พร้อมใช้งานเพียงตอกเสาเทปูน ขึงตึง</span>
</div>
<div class="flex items-start space-x-3">
<span class="flex-shrink-0 w-8 h-8 bg-green-600 text-white rounded-full flex items-center justify-center font-bold">06</span>
<span class="flex-shrink-0 w-8 h-8 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold">06</span>
<span class="text-secondary-700">สวยกว่า โปร่งโล่งสบายตา ไม่บดบังทัศนียภาพ ลมโกรก ถ่ายเทได้สะดวก</span>
</div>
</div>
@@ -157,32 +155,32 @@ import Footer from '@/components/common/Footer.astro';
<!-- Problems & Solutions -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">ทุกปัญหา! ระบบรั้วเสาปูน แก้ไขด้วยระบบรั้วไวน์แมน</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">ทุกปัญหา! ระบบรั้วเสาปูน แก้ไขด้วยระบบรั้วไวน์แมน</h2>
<!-- Problems -->
<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" />
<img src="/images/products-raw/vineman/จุดเชื่อมของเสาค้ำยันไม่คงทน.jpg" alt="จุดเชื่อมของเสาค้ำยันไม่คงทน" class="w-full h-auto rounded-lg mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-sm text-secondary-700">จุดเชื่อมของเสาค้ำยันไม่คงทน</p>
</div>
<div class="text-center">
<img src="/images/products-raw/vineman/เปราะ-แตกหักง่าย.jpg" alt="เปราะ แตกหักง่าย" class="w-full h-auto rounded-lg mb-2" />
<img src="/images/products-raw/vineman/เปราะ-แตกหักง่าย.jpg" alt="เปราะ แตกหักง่าย" class="w-full h-auto rounded-lg mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-sm text-secondary-700">เปราะ แตกหักง่าย</p>
</div>
<div class="text-center">
<img src="/images/products-raw/vineman/ตัวยึดลวดหนาม-หลุดง่าย.jpg" alt="ตัวยึดลวดหนาม หลุดง่าย" class="w-full h-auto rounded-lg mb-2" />
<img src="/images/products-raw/vineman/ตัวยึดลวดหนาม-หลุดง่าย.jpg" alt="ตัวยึดลวดหนาม หลุดง่าย" class="w-full h-auto rounded-lg mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-sm text-secondary-700">ตัวยึดลวดหนาม หลุดง่าย</p>
</div>
<div class="text-center">
<img src="/images/products-raw/vineman/เสาค้ำยันไม่แข็งแรง.jpg" alt="เสาค้ำยันไม่แข็งแรง" class="w-full h-auto rounded-lg mb-2" />
<img src="/images/products-raw/vineman/เสาค้ำยันไม่แข็งแรง.jpg" alt="เสาค้ำยันไม่แข็งแรง" class="w-full h-auto rounded-lg mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-sm text-secondary-700">เสาค้ำยันไม่แข็งแรง</p>
</div>
<div class="text-center">
<img src="/images/products-raw/vineman/เกิดรอยร้าวง่าย.jpg" alt="เกิดรอยร้าวง่าย" class="w-full h-auto rounded-lg mb-2" />
<img src="/images/products-raw/vineman/เกิดรอยร้าวง่าย.jpg" alt="เกิดรอยร้าวง่าย" class="w-full h-auto rounded-lg mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-sm text-secondary-700">เกิดรอยร้าวง่าย</p>
</div>
<div class="text-center">
<img src="/images/products-raw/vineman/ต้องหล่อปูนทำฐานรากทุกต้น.jpg" alt="ต้องหล่อปูนทำฐานรากทุกต้น" class="w-full h-auto rounded-lg mb-2" />
<img src="/images/products-raw/vineman/ต้องหล่อปูนทำฐานรากทุกต้น.jpg" alt="ต้องหล่อปูนทำฐานรากทุกต้น" class="w-full h-auto rounded-lg mb-2" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-sm text-secondary-700">ต้องหล่อปูนทำฐานรากทุกต้น</p>
</div>
</div>
@@ -190,10 +188,10 @@ import Footer from '@/components/common/Footer.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" />
<img src="/images/products-raw/vineman/รั้วโปร่งโล่งสบายตา-1024x1013.jpg" alt="รั้วโปร่งโล่งสบายตา" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div>
<img src="/images/products-raw/vineman/แข็งแรง-ติดตั้งง่าย-ได้ทุกภูมิทัศน์.jpg" alt="แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์" class="w-full h-auto rounded-xl" />
<img src="/images/products-raw/vineman/แข็งแรง-ติดตั้งง่าย-ได้ทุกภูมิทัศน์.jpg" alt="แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-center text-secondary-700 font-medium mt-4">แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์</p>
<p class="text-secondary-600 text-sm mt-2">ระบบรั้วตาข่ายไวน์แมน สามารถติดตั้งเดินแนวรั้วบนพื้นที่ทุกรูปแบบทั้งขึ้น-ลง เนินส่วนเว้า-ส่วนโค้งได้อย่างแข็งแรงและต่อเนื่อง</p>
</div>
@@ -204,18 +202,18 @@ import Footer from '@/components/common/Footer.astro';
<!-- Pole Types -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">รั้วตาข่ายไวน์แมน ใช้ได้กับเสาทุกประเภท</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-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" />
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-ระยะห่างของเสา-5-8-เมตร-1024x302.jpg" alt="ระยะห่างของเสา 5-8 เมตร" class="w-full h-auto rounded-xl mb-3" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-secondary-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" />
<img src="/images/products-raw/vineman/เสาปูน-ระยะห่างของเสา-4-6-เมตร-1024x299.jpg" alt="เสาปูน ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-secondary-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" />
<img src="/images/products-raw/vineman/เสาไม้เนื้อแข็ง-ระยะห่างของเสา-4-6-เมตร-1024x295.jpg" alt="เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" width="600" height="400" loading="lazy" decoding="async" />
<p class="text-secondary-700 font-medium">เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร</p>
</div>
</div>
@@ -225,29 +223,29 @@ import Footer from '@/components/common/Footer.astro';
<!-- Semi-Spring -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">ไวน์แมน รั้วตาข่ายกึ่งสปริง</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-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" />
<img src="/images/products-raw/vineman/ไวน์แมน-รั้วตาข่ายกึ่งสปริง.jpg" alt="รั้วตาข่ายกึ่งสปริง" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="space-y-4">
<p class="text-secondary-700 leading-relaxed">
รั้วตาข่ายไวน์แมน ผลิตจากลวดกึ่งสปริง คิดค้นและออกแบบรอยหยักบนเส้นลวดในแนวนอน สามารถสปริงตัวได้ รั้วไม่ยืด หรือหย่อยตัวง่าย มีความแข็งแรง ยืดหยุ่นสูง คืนตัวกลับได้ดี เมื่อโดนแรงกระแทก
</p>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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-secondary-700">ยืดหยุ่นสูง เดินแนวรั้วขึ้น/ลงเนินได้อย่างต่อเนื่อง</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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-secondary-700">เส้นแนวนอนมีแรงดึงสูง 750-900 นิวตัน/ตร.มม.</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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-secondary-700">ทนสนิมด้วยชุบสังกะสีตามมาตรฐาน ASTM</span>
@@ -260,15 +258,15 @@ import Footer from '@/components/common/Footer.astro';
<!-- Buying Guide -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">VINEMAN Buying Guide</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-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" />
<img src="/images/products-raw/vineman/VINEMAN-Buying-Guide.jpg" alt="VINEMAN Buying Guide" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="space-y-4">
<p class="text-secondary-700 font-medium">สูตรคำนวณความยาวรอบพื้นที่โดยประมาณ</p>
<div class="bg-green-50 p-6 rounded-xl text-center">
<p class="text-2xl font-bold text-green-700">√ไร่ × 40 × 4</p>
<div class="bg-primary-50 p-6 rounded-xl text-center">
<p class="text-2xl font-bold text-primary-700">√ไร่ × 40 × 4</p>
</div>
<p class="text-secondary-600 text-sm">ตัวอย่าง: พื้นที่ขนาด 2 ไร่ มีความยาวรอบพื้นที่ = √2 × 40 × 4 = <strong>226 เมตร</strong></p>
<p class="text-secondary-500 text-xs">(สูตรในการคำนวณพื้นที่นี้ สามารถนำไปคำนวณกับพื้นที่รูปทรงสี่เหลี่ยมจตุรัส และพื้นที่รูปทรงอื่นๆ ได้โดยประมาณ)</p>
@@ -280,8 +278,8 @@ import Footer from '@/components/common/Footer.astro';
<!-- Calculation Table -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-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" />
<h2 class="text-2xl md:text-xl font-bold text-secondary-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" width="800" height="600" loading="lazy" decoding="async" />
<div class="mt-6 p-4 bg-yellow-50 rounded-xl max-w-3xl mx-auto">
<p class="text-secondary-700 text-sm"><strong>หมายเหตุ:</strong></p>
<ul class="text-secondary-600 text-sm list-disc list-inside space-y-1 mt-2">
@@ -296,21 +294,21 @@ import Footer from '@/components/common/Footer.astro';
<!-- Specifications -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">Specification</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">Specification</h2>
<!-- ตาข่ายถักปม -->
<div class="mb-12 p-6 bg-gray-50 rounded-xl">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ตาข่ายถักปม (ยาวม้วนละ 100 เมตร)</h3>
<div class="grid lg:grid-cols-2 gap-6">
<img src="/images/products-raw/vineman/ยืดหยุ่นสูง-300x294.jpg" alt="ยืดหยุ่นสูง" class="w-full h-auto rounded-xl" />
<img src="/images/products-raw/vineman/ยืดหยุ่นสูง-300x294.jpg" alt="ยืดหยุ่นสูง" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
<div>
<p class="text-secondary-700 mb-4">ตาข่ายที่มีความยืดหยุ่นสูง แข็งแรง รับแรงกระแทกได้ดี ทนสนิมมากขึ้น ด้วยการชุบสังกะสีตามมาตรฐานสหรัฐอเมริกา (ASTM) มี 5 รุ่น แบ่งตามระดับความสูง</p>
<div class="grid grid-cols-5 gap-2 mb-4">
<img src="/images/products-raw/vineman/8-90-15.jpg" alt="8-90-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/10-107-15.jpg" alt="10-107-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/11-142-15.jpg" alt="11-142-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/13-175-15.jpg" alt="13-175-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/14-200-15.jpg" alt="14-200-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/8-90-15.jpg" alt="8-90-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/10-107-15.jpg" alt="10-107-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/11-142-15.jpg" alt="11-142-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/13-175-15.jpg" alt="13-175-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/14-200-15.jpg" alt="14-200-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
@@ -322,7 +320,7 @@ import Footer from '@/components/common/Footer.astro';
<p class="text-secondary-600">ลวดชุบสังกะสี Hot-dipped Heavy Galvanized ASTM Class 3 ชุบสังกะสีหนาพิเศษ เพิ่มอายุการใช้งาน</p>
</div>
</div>
<img src="/images/products-raw/vineman/รั้วใช้กับฟาร์มปศุสัตว์ทั่วไป.jpg" alt="รั้วใช้กับฟาร์มปศุสัตว์ทั่วไป" class="w-full h-auto rounded-xl mt-4" />
<img src="/images/products-raw/vineman/รั้วใช้กับฟาร์มปศุสัตว์ทั่วไป.jpg" alt="รั้วใช้กับฟาร์มปศุสัตว์ทั่วไป" class="w-full h-auto rounded-xl mt-4" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</div>
@@ -331,15 +329,15 @@ import Footer from '@/components/common/Footer.astro';
<div class="mb-12 p-6 bg-gray-50 rounded-xl">
<h3 class="text-xl font-bold text-secondary-900 mb-4">ตาข่ายฟิคซ์ล็อค (ยาวม้วนละ 100 เมตร)</h3>
<div class="grid lg:grid-cols-2 gap-6">
<img src="/images/products-raw/vineman/ตาข่ายฟิคซ์ล็อค.jpg" alt="ตาข่ายฟิคซ์ล็อค" class="w-full h-auto rounded-xl" />
<img src="/images/products-raw/vineman/ตาข่ายฟิคซ์ล็อค.jpg" alt="ตาข่ายฟิคซ์ล็อค" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
<div>
<p class="text-secondary-700 mb-4">ตัวล็อคที่ออกแบบมาเป็นพิเศษ ช่วยทำให้รั้วตาข่ายมีความแข็งแรง ทนทาน และทนแรงกระแทกได้ดี</p>
<div class="grid grid-cols-3 gap-2 mb-4">
<img src="/images/products-raw/vineman/12-120-15.jpg" alt="12-120-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/11-155-15.jpg" alt="11-155-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/17-190-15.jpg" alt="17-190-15" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/12-120-15.jpg" alt="12-120-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/11-155-15.jpg" alt="11-155-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/17-190-15.jpg" alt="17-190-15" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<img src="/images/products-raw/vineman/นิยมใช้ฟาร์ม-แพะ-แกะ-กวาง-จิงโจ้-นกอีมู-นกกระจอกเทศ-หรือสัตว์.jpg" alt="นิยมใช้ฟาร์มสัตว์" class="w-full h-auto rounded-xl" />
<img src="/images/products-raw/vineman/นิยมใช้ฟาร์ม-แพะ-แกะ-กวาง-จิงโจ้-นกอีมู-นกกระจอกเทศ-หรือสัตว์.jpg" alt="นิยมใช้ฟาร์มสัตว์" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</div>
@@ -353,31 +351,31 @@ import Footer from '@/components/common/Footer.astro';
<p class="text-secondary-700 font-medium">ลวดหนามซิงค์อลูมิเนียม</p>
</div>
<div>
<img src="/images/products-raw/vineman/ลวด.png" alt="ลวดไวน์แมน" class="w-32 mx-auto h-auto mb-4" />
<img src="/images/products-raw/vineman/ลวด.png" alt="ลวดไวน์แมน" class="w-32 mx-auto h-auto mb-4" width="128" height="96" loading="lazy" decoding="async" />
<div class="space-y-3 text-secondary-700">
<div class="flex items-start space-x-3">
<svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-primary-600 mt-1 flex-shrink-0" 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><strong>แข็งแรงมากกว่า</strong> รับแรงดึงสูงถึง 1,100-1,200 นิวตัน/ตร.มม.</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-primary-600 mt-1 flex-shrink-0" 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><strong>ป้องกันมากกว่า</strong> หนามพันไขว้สลับสวนทางกันถึง 4 แฉก ชุบซิงค์อลูมิเนียม เคลือบสีดำ</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-5 h-5 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-primary-600 mt-1 flex-shrink-0" 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><strong>ประหยัดมากกว่า</strong> ใช้เสาระยะห่างเฉลี่ย 4 เมตร/ต้น</span>
</div>
</div>
<p class="text-green-700 font-medium mt-4">ล้อมพื้นที่ ทนสนิม อายุการใช้งานยาวนานกว่า 80 ปี*</p>
<p class="text-primary-700 font-medium mt-4">ล้อมพื้นที่ ทนสนิม อายุการใช้งานยาวนานกว่า 80 ปี*</p>
</div>
</div>
<img src="/images/products-raw/vineman/ลวดหนามซิงค์อลูมิเนียม-ไวน์แมน-1024x673.jpg" alt="ลวดหนามซิงค์อลูมิเนียมไวน์แมน" class="w-full h-auto rounded-xl mt-4" />
<img src="/images/products-raw/vineman/ลวดหนามซิงค์อลูมิเนียม-ไวน์แมน-1024x673.jpg" alt="ลวดหนามซิงค์อลูมิเนียมไวน์แมน" class="w-full h-auto rounded-xl mt-4" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</section>
@@ -385,49 +383,50 @@ import Footer from '@/components/common/Footer.astro';
<!-- Salt Spray Test -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-6 text-center">สภาวะกัดกร่อนของละอองเกลือ (Salt Spray Test)</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-6 text-center">สภาวะกัดกร่อนของละอองเกลือ (Salt Spray Test)</h2>
<p class="text-secondary-600 text-center mb-6 max-w-3xl mx-auto">ตามมาตรฐาน DIN SS 5021, ASTM B117, ISO 9227 มาตรฐานการทดสอบด้วยละอองน้ำเกลือ เพื่อพิสูจน์ความทนทานของวัตถุที่ชุบหรือเคลือบสารโลหะ</p>
<div class="mb-6">
<img src="/images/products-raw/vineman/ผลการทดสอบความทนทาน.jpg" alt="ผลการทดสอบความทนทาน" class="w-full max-w-2xl mx-auto h-auto rounded-xl" />
<img src="/images/products-raw/vineman/ผลการทดสอบความทนทาน.jpg" alt="ผลการทดสอบความทนทาน" class="w-full max-w-2xl mx-auto h-auto rounded-xl" width="800" height="600" loading="lazy" decoding="async" />
</div>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<img src="/images/products-raw/vineman/กราฟเปรียบเทียบผลการทดสอบ-1.jpg" alt="กราฟเปรียบเทียบผลการทดสอบ 1" class="w-full h-auto rounded-xl" />
<img src="/images/products-raw/vineman/กราฟเปรียบเทียบผลการทดสอบ-2.jpg" alt="กราฟเปรียบเทียบผลการทดสอบ 2" class="w-full h-auto rounded-xl" />
<img src="/images/products-raw/vineman/กราฟเปรียบเทียบผลการทดสอบ-1.jpg" alt="กราฟเปรียบเทียบผลการทดสอบ 1" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/กราฟเปรียบเทียบผลการทดสอบ-2.jpg" alt="กราฟเปรียบเทียบผลการทดสอบ 2" class="w-full h-auto rounded-xl" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="grid grid-cols-5 gap-2 mb-6">
<img src="/images/products-raw/vineman/result-1-1024x355.jpg" alt="ผลการทดสอบ 1" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/result-2-1024x355.jpg" alt="ผลการทดสอบ 2" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/result-3-1024x355.jpg" alt="ผลการทดสอบ 3" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/result-4-1024x355.jpg" alt="ผลการทดสอบ 4" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/result-5-1024x355.jpg" alt="ผลการทดสอบ 5" class="w-full h-auto rounded-lg" />
<img src="/images/products-raw/vineman/result-1-1024x355.jpg" alt="ผลการทดสอบ 1" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/result-2-1024x355.jpg" alt="ผลการทดสอบ 2" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/result-3-1024x355.jpg" alt="ผลการทดสอบ 3" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/result-4-1024x355.jpg" alt="ผลการทดสอบ 4" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/products-raw/vineman/result-5-1024x355.jpg" alt="ผลการทดสอบ 5" class="w-full h-auto rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="text-center">
<img src="/images/products-raw/vineman/ผลการทดสอบ-16-ปี.jpg" alt="ผลการทดสอบ 16 ปี" class="w-full max-w-3xl mx-auto h-auto rounded-xl" />
<img src="/images/products-raw/vineman/ผลการทดสอบ-16-ปี.jpg" alt="ผลการทดสอบ 16 ปี" class="w-full max-w-3xl mx-auto h-auto rounded-xl" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- Contact CTA -->
<section id="contact-cta" class="section bg-white">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

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

@@ -7,65 +7,63 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="รั้วเทวดา" description="รั้วเทวดา แข็งแรง ทนทาน เหนียวกว่า ลวดแรงดึงสูง หนา 2.5 มม. สามารถทนแรงกระแทกได้สูง ทนสนิม ลวดชุบสังกะสีหนาพิเศษ ด้วยกระบวนการแบบจุ่มร้อน ตามมาตรฐานออสเตรเลีย">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<main class="bg-white min-h-screen">
<!-- Hero Section -->
<section id="product-detail" class="section">
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img
src="/images/products-raw/tevada/TEVADA_001-987x1024.png"
alt="รั้วเทวดา"
class="w-full h-auto rounded-xl"
width="600" height="622" loading="eager" fetchpriority="high" decoding="sync"
/>
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">รั้วเทวดา</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">รั้วเทวดา</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
รั้วเทวดา แข็งแรง ทนทาน เหนียวกว่า ลวดแรงดึงสูง หนา 2.5 มม. สามารถทนแรงกระแทกได้สูง ทนสนิม ลวดชุบสังกะสีหนาพิเศษ ด้วยกระบวนการแบบจุ่มร้อน ตามมาตรฐานออสเตรเลีย
</p>
<!-- Feature Bullets -->
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">ลวดหนา 2.5 มม.</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">ชุบสังกะสีจุ่มร้อน</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">มาตรฐานออสเตรเลีย</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 text-green-600" 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-secondary-700 text-sm">ทนสนิม ทนทาน</span>
</div>
</div>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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 class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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>ลวดหนา 2.5 มม.</span>
</div>
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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 text-white" 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>
@@ -74,7 +72,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- ทำไมต้องรั้วตาข่ายเทวดา -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">ทำไมต้องรั้วตาข่ายเทวดา</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">ทำไมต้องรั้วตาข่ายเทวดา</h2>
<div class="grid lg:grid-cols-2 gap-8 items-center">
<div>
<img
@@ -85,25 +83,25 @@ import Footer from '@/components/common/Footer.astro';
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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-secondary-700">ลวดแรงดึงสูง หนา 2.5 มม. เหนียวกว่ารั้วทั่วไป</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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-secondary-700">ลวดชุบสังกะสีหนาพิเศษ ด้วยกระบวนการแบบจุ่มร้อน</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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-secondary-700">ทนสนิมได้ดีเยี่ยม ตามมาตรฐานออสเตรเลีย</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" 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-secondary-700">สามารถทนแรงกระแทกได้สูง</span>
@@ -116,7 +114,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- เปรียบเทียบ -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">เปรียบเทียบความแตกต่าง</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">เปรียบเทียบความแตกต่าง</h2>
<img
src="/images/products-raw/tevada/TEVADA_003-1024x647.png"
alt="เปรียบเทียบรั้วเทวดา"
@@ -128,7 +126,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- รุ่นสินค้า -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">รุ่นสินค้า</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">รุ่นสินค้า</h2>
<!-- รุ่น 8-90-15 -->
<div class="mb-12 p-6 bg-gray-50 rounded-xl">
@@ -225,7 +223,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- เสารั้ว Y-Post -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">เสารั้ว Y-Post</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">เสารั้ว Y-Post</h2>
<div class="grid lg:grid-cols-2 gap-8 items-center">
<img
src="/images/products-raw/tevada/TEVADA_010-1024x113.png"
@@ -244,7 +242,7 @@ import Footer from '@/components/common/Footer.astro';
<!-- วิธีติดตั้ง -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl md:text-3xl font-bold text-secondary-900 mb-8 text-center">วิธีติดตั้ง</h2>
<h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">วิธีติดตั้ง</h2>
<div class="grid md:grid-cols-4 gap-6">
<!-- ตั้ง -->
@@ -303,22 +301,23 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Contact CTA -->
<section id="contact-cta" class="section bg-gray-50">
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
<p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p>
</div>
</section>
</main>

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

@@ -7,59 +7,62 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" description="จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/valve_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="card-glass p-8">
<img src="/images/products-cropped/valve_000C.jpg" alt="Product" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">วาล์ว (Valve) - วาล์วน้ำทุกประเภท</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<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 text-white mb-4">วาล์ว (Valve) - วาล์วน้ำทุกประเภท</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,14 +70,15 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-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" />
<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" decoding="async" />
<p class="text-lg text-secondary-700 leading-relaxed mb-4"><strong>ประเภทวาล์วที่มีจำหน่าย:</strong></p>
<ul class="list-disc pl-6 mb-4 space-y-2">
@@ -121,31 +125,32 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section class="section bg-white">
<!-- Additional Images -->
<section class="section">
<div class="container-custom">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<h2 class="text-xl font-bold text-secondary-900 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" onerror="this.style.display='none'" /><img src="/images/valve-In02.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/valve-In03.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/valve-In05.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/valve-In08.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/valve-In10.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/valve-In15.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/valve-In17.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" />
<img src="/images/valve-In01.jpg" alt="วาล์ว (Valve)" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" 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" decoding="async" 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" decoding="async" 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" decoding="async" 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" decoding="async" 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" decoding="async" 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" decoding="async" 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" decoding="async" onerror="this.style.display='none'" />
</div>
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

87
src/pages/หัวจ่ายแอร์-ball-jet/index.astro
View File

@@ -7,59 +7,62 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="หัวจ่ายแอร์ | BALL JET" description="หัวจ่ายแอร์ | Ball jet ส่งฟรี กรุงเทพมหานคร ปริมณฑล สาม">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-raw/ball-jet/main-ball-jet.jpg" alt="หัวจ่ายแอร์ BALL JET" class="w-full h-auto rounded-xl" />
<div class="card-glass p-8">
<img src="/images/products-raw/ball-jet/main-ball-jet.jpg" alt="หัวจ่ายแอร์ BALL JET" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">หัวจ่ายแอร์ | BALL JET</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<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 text-white mb-4">หัวจ่ายแอร์ | BALL JET</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
หัวจ่ายแอร์ | Ball jet ส่งฟรี กรุงเทพมหานคร ปริมณฑล สาม
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -68,10 +71,10 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Product Specifications -->
<section id="product-specs" class="section bg-white">
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
<strong>หัวจ่ายแอร์บอลเจ็ต (Ball Jet / Eye Ball)</strong> เป็นอุปกรณ์กระจายลม (Air Diffuser) ที่ใช้ในระบบปรับอากาศและระบบระบายอากาศ มีลักษณะเป็นทรงกลมหรือวงกลมปรับทิศทางได้ ช่วยกระจายลมเย็นหรือลมร้อนให้ทั่วถึงพื้นที่อย่างสม่ำเสมอ ลดการเกิดจุดร้อน-จุดเย็นในห้อง
@@ -81,7 +84,7 @@ import Footer from '@/components/common/Footer.astro';
หัวจ่ายแอร์บอลเจ็ต ผลิตจากวัสดุคุณภาพสูง ทนทานต่อการใช้งาน ติดตั้งง่าย เหมาะสำหรับใช้ในอาคารสำนักงาน โรงแรม ห้างสรรพสินค้า โรงพยาบาล และบ้านพักอาศัย สามารถปรับทิศทางการจ่ายลมได้ตามต้องการ
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของหัวจ่ายแอร์บอลเจ็ต</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของหัวจ่ายแอร์บอลเจ็ต</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>กระจายลมสม่ำเสมอ</strong> - ออกแบบให้ลมกระจายตัวอย่างทั่วถึง ลดจุดร้อน-จุดเย็นในพื้นที่</li>
@@ -92,7 +95,7 @@ import Footer from '@/components/common/Footer.astro';
<li><strong>ราคาคุ้มค่า</strong> - ราคาเหมาะสม คุ้มค่าการลงทุน</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">วัสดุและขนาด</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">วัสดุและขนาด</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>วัสดุ:</strong> พลาสติก ABS คุณภาพสูง ทนความร้อนและสารเคมี</li>
@@ -100,7 +103,7 @@ import Footer from '@/components/common/Footer.astro';
<li><strong>ขนาด:</strong> มีหลายขนาดตามขนาดท่อลมและความต้องการใช้งาน</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">การประยุกต์ใช้งาน</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">การประยุกต์ใช้งาน</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>ระบบปรับอากาศ Central Air Conditioning</li>
@@ -111,7 +114,7 @@ import Footer from '@/components/common/Footer.astro';
<li>บ้านพักอาศัยและคอนโดมิเนียม</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">วิธีการติดตั้ง</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">วิธีการติดตั้ง</h3>
<ol class="list-decimal pl-6 mb-4 space-y-2">
<li>เลือกตำแหน่งที่ต้องการติดตั้งบนเพดานหรือผนัง</li>
@@ -136,20 +139,22 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

115
src/pages/อุปกรณ์ดับเพลิง-category/index.astro Normal file
View File

@@ -0,0 +1,115 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="อุปกรณ์ดับเพลิง" description="อุปกรณ์ดับเพลิง ถังดับเพลิง ตู้ดับเพลิง คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="bg-white min-h-screen">
<!-- Category Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="card-glass 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'" />
</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 text-white mb-4">อุปกรณ์ดับเพลิง</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
อุปกรณ์ดับเพลิง ถังดับเพลิง ตู้ดับเพลิง คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap gap-6 mt-8">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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 text-white" 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 text-white" 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>
<!-- Products -->
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="text-center mb-12">
<h2 class="section-title">สินค้าในหมวดนี้</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<a href="/อุปกรณ์ดับเพลิง" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/extinguishers_000C.jpg" alt="อุปกรณ์ดับเพลิง" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">อุปกรณ์ดับเพลิง</h3>
</div>
</a>
<a href="/realflex" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/realflex_000C.jpg" alt="Realflex" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">Realflex</h3>
</div>
</a>
</div>
</div>
</section>
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-white 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/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

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

@@ -7,59 +7,62 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="อุปกรณ์ดับเพลิง ตู้ดับเพลิงเก็บเครื่องดับเพลิง" description="อุปกรณ์ดับเพลิง ตู้ดับเพลิงเก็บเครื่องดับเพลิง ครบอย่างจบในที่เดียว รับปรึกษาแล้วให้คำแนะนำได้ ไม่ว่าจะติดตั้งที่ไหน เราให้คำตอบคุณได้เสมอ ดีล พลัส เทค">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/extinguishers_000C.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="card-glass p-8">
<img src="/images/products-cropped/extinguishers_000C.jpg" alt="Product" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">อุปกรณ์ดับเพลิง ตู้ดับเพลิงเก็บเครื่องดับเพลิง</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<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 text-white mb-4">อุปกรณ์ดับเพลิง ตู้ดับเพลิงเก็บเครื่องดับเพลิง</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
อุปกรณ์ดับเพลิง ตู้ดับเพลิงเก็บเครื่องดับเพลิง ครบอย่างจบในที่เดียว รับปรึกษาแล้วให้คำแนะนำได้ ไม่ว่าจะติดตั้งที่ไหน เราให้คำตอบคุณได้เสมอ ดีล พลัส เทค
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,13 +70,14 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Specifications -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="flex justify-center">
<img src="/images/fire-extinguisher-p1.jpg" alt="ถังดับเพลิง" class="max-w-md w-full rounded-lg shadow-md mb-8" />
<img src="/images/fire-extinguisher-p1.jpg" alt="ถังดับเพลิง" class="max-w-md w-full rounded-lg shadow-md mb-8" width="400" height="300" loading="lazy" decoding="async" />
</div>
<div class="prose prose-lg max-w-none mb-8">
@@ -94,7 +98,7 @@ import Footer from '@/components/common/Footer.astro';
<div class="overflow-x-auto my-8">
<table class="modern-table w-full">
<thead class="bg-green-600 text-white">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">รูปภาพ</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">ประเภท</th>
@@ -105,24 +109,24 @@ import Footer from '@/components/common/Footer.astro';
</tr>
</thead>
<tbody class="bg-white">
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200" rowspan="3"><img src="/images/fire-cabinet-1-crop.jpg" alt="ตู้ดับเพลิงแบบเดี่ยว" class="w-24 h-auto rounded" /></td>
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-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-secondary-200 text-lg" rowspan="3">แบบเดี่ยว</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">300 x 600 x 250 มม.</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg" rowspan="3">เหล็ก#16 พ่นสีแดง</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">กระจกธรรมดา</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg" rowspan="3">กุญแจเด้ง</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg">400 x 700 x 250 มม.</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">กระจกนิรภัย 4 มม.</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg">400 x 800 x 250 มม.</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg"></td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200"><img src="/images/fire-cabinet-2-crop.jpg" alt="ตู้ดับเพลิงแบบใส่สายดับเพลิง" class="w-24 h-auto rounded" /></td>
<tr class="hover:bg-primary-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-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-secondary-200 text-lg">แบบใส่สายดับเพลิง</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">600 x 700 x 200 มม.</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">เหล็ก#21 พ่นสีแดง</td>
@@ -133,28 +137,29 @@ import Footer from '@/components/common/Footer.astro';
</table>
</div>
<h3 class="text-2xl font-bold text-secondary-900 mb-4">วิธีการเลือกตู้ดับเพลิงเก็บเครื่องดับเพลิง</h3>
<img src="/images/fire-extinguisher-p3.jpg" alt="วิธีการเลือกตู้ดับเพลิง" class="w-full rounded-lg shadow-md" />
<h3 class="text-xl font-bold text-secondary-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" />
</div>
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

123
src/pages/อุปกรณ์ปรับอากาศ/index.astro Normal file
View File

@@ -0,0 +1,123 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<BaseLayout title="อุปกรณ์ปรับอากาศ" description="อุปกรณ์ปรับอากาศ หัวจ่ายแอร์ กริลแอร์ คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="bg-white min-h-screen">
<!-- Category Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div class="card-glass p-2">
<img src="/images/products-raw/ball-jet/main-ball-jet.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'" />
</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 text-white mb-4">อุปกรณ์ปรับอากาศ</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
อุปกรณ์ปรับอากาศ หัวจ่ายแอร์ กริลแอร์ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap gap-6 mt-8">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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 text-white" 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 text-white" 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>
<!-- Products -->
<section class="section bg-secondary-50">
<div class="container-custom">
<div class="text-center mb-12">
<h2 class="section-title">สินค้าในหมวดนี้</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<a href="/หัวจ่ายแอร์-ball-jet" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-raw/ball-jet/main-ball-jet.jpg" alt="หัวจ่ายแอร์" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">หัวจ่ายแอร์</h3>
</div>
</a>
<a href="/grilles" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">กริลแอร์</h3>
</div>
</a>
<a href="/durgo-avvs" class="card-hover group overflow-hidden block">
<div class="relative h-48 overflow-hidden img-zoom">
<img src="/images/products-cropped/durgo_000C.jpg" alt="DURGO วาล์วเติมอากาศ" class="w-full h-full object-cover" width="400" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4 text-center bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">DURGO วาล์วเติมอากาศ</h3>
</div>
</a>
</div>
</div>
</section>
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-white 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/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

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

@@ -7,57 +7,60 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="เครื่องเชื่อมท่อ HDPE (HDPE Pipe Welding Machine)" description="จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน เครื่องเชื่อมแบบ Butt Fusion และ Electrofusion">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/HDPE-welding-crop.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/HDPE-welding-crop.jpg" alt="Product" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">เครื่องเชื่อมท่อ HDPE</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<div class="order-1 lg:order-2">
<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 text-white mb-4">เครื่องเชื่อมท่อ HDPE</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน สำหรับงานเชื่อมท่อ HDPE ทุกขนาด พร้อมบริการติดตั้งและฝึกอบรมการใช้งานฟรี
</p>
<div class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<a href="tel:0905551415" class="btn-white 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>
<span>090-555-1415</span>
</a>
</div>
<div class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">เครื่องเชื่อม HDPE คุณภาพสูง มาตรฐาน ISO</span>
<span>เครื่องเชื่อม HDPE คุณภาพสูง มาตรฐาน ISO</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่าการลงทุน</span>
<span>ราคาโรงงาน คุ้มค่าการลงทุน</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">บริการติดตั้งและฝึกอบรมการใช้งานฟรี</span>
<span>บริการติดตั้งและฝึกอบรมฟรี</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">อะไหล่และบริการซ่อมบำรุง</span>
<span>อะไหล่และบริการซ่อมบำรุง</span>
</div>
</div>
</div>
@@ -66,10 +69,10 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Product Details -->
<section id="product-specs" class="section bg-white">
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">เครื่องเชื่อมท่อ HDPE เป็นอุปกรณ์สำคัญสำหรับงานติดตั้งระบบท่อ HDPE ใช้สำหรับเชื่อมต่อท่อ HDPE เข้าด้วยกันอย่างแน่นสนิท ไม่มีรอยรั่ว เหมาะสำหรับงานระบบประปา งานชลประทาน งานระบายน้ำ และงานอุตสาหกรรม</p>
@@ -78,101 +81,25 @@ import Footer from '@/components/common/Footer.astro';
<li>เครื่องเชื่อมแบบ Butt Fusion (เชื่อมปายท่อ)</li>
<li>เครื่องเชื่อมแบบ Electrofusion (เชื่อมด้วยไฟฟ้า)</li>
<li>เครื่องเชื่อมแบบ Socket Fusion (เชื่อมซ็อกเก็ต)</li>
<li>เครื่องเชื่อมแบบ Stab Pipe (เชื่อมแบบสแต็บ)</li>
</ul>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">1. <strong>Butt Fusion (เชื่อมปลายท่อ)</strong> - เหมาะสำหรับท่อขนาดใหญ่ ขนาด 50mm ขึ้นไป การเชื่อมจะทำโดยการทำให้ปลายท่อร้อนแล้วกดเชื่อมเข้าด้วยกัน</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">2. <strong>Electrofusion (เชื่อมด้วยไฟฟ้า)</strong> - ใช้ข้อต่อแบบ Electrofusion ที่มีขดลวดภายใน เมื่อต่อไฟฟ้าจะทำให้ขดลวดร้อนและเชื่อมท่อเข้าด้วยกัน</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">3. <strong>Socket Fusion (เชื่อมซ็อกเก็ต)</strong> - เหมาะสำหรับท่อขนาดเล็ก ขนาด 20-63mm ใช้หัวเชื่อมที่ทำให้ท่อร้อนแล้วสวมเข้าด้วยกัน</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-4"><strong>ข้อดีของการเชื่อมท่อ HDPE:</strong></p>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li>รอยเชื่อมแข็งแรงเท่ากับตัวท่อ</li>
<li>ไม่มีรอยรั่วที่จุดเชื่อม</li>
<li>ราคาถูกกว่าวิธีอื่น</li>
<li>รวดเร็วและง่าย</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Table Section - Moved here -->
<section id="product-table" class="section bg-gray-50">
<div class="container-custom">
<h3 class="text-2xl font-bold text-secondary-900 mb-4">เครื่องเชื่อมท่อ HDPE ที่เราจำหน่าย</h3>
<div class="overflow-x-auto my-8">
<table class="modern-table w-full">
<thead class="bg-green-600 text-white">
<tr>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">รุ่น</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">ประเภท</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">ขนาดท่อ (mm)</th>
<th class="px-6 py-4 text-left text-sm font-semibold uppercase">กำลังไฟ (W)</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg">HDPE-BF-160</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">Butt Fusion</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">50 - 160</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">2,200</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg">HDPE-BF-315</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">Butt Fusion</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">90 - 315</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">3,500</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg">HDPE-BF-630</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">Butt Fusion</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">200 - 630</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">8,000</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg">HDPE-EF-200</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">Electrofusion</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">20 - 200</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">1,500</td>
</tr>
<tr class="hover:bg-green-50 transition-colors">
<td class="px-6 py-4 border-b border-secondary-200 text-lg">HDPE-SF-63</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">Socket Fusion</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">20 - 63</td>
<td class="px-6 py-4 border-b border-secondary-200 text-lg">800</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Images Section -->
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">รูปภาพเพิ่มเติม</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<img src="/images/hdpe001-page1.jpg" alt="เครื่องเชื่อมท่อ HDPE" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/hdpe001-page2.jpg" alt="เครื่องเชื่อมท่อ HDPE" class="w-full h-auto rounded-lg shadow-md" />
</div>
</div>
</section>
<section class="section gradient-bg">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจเครื่องเชื่อมท่อ HDPE?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>

119
src/pages/เครื่องเชื่อมท่อ-pipe-coupling-machine/index.astro
View File

@@ -7,59 +7,62 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="เครื่องเชื่อมท่อ | Pipe Coupling Machine" description="จำหน่ายเครื่องเชื่อมท่อ | Pipe Coupling Machineคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-cropped/pipe-coupling-machine_000.jpg" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="card-glass p-8">
<img src="/images/products-cropped/pipe-coupling-machine_000.jpg" alt="Product" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">เครื่องเชื่อมท่อ | Pipe Coupling Machine</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
จำหน่ายเครื่องเชื่อมท่อ | Pipe Coupling Machineคุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
<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 text-white mb-4">เครื่องเชื่อมท่อ | Pipe Coupling Machine</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายเครื่องเชื่อมท่อ | Pipe Coupling Machine คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,66 +70,67 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Subcategories - Cards only, no header text -->
<section class="section bg-gray-50">
<!-- Subcategories -->
<section class="section">
<div class="container-custom">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
<a href="/เครื่องเชื่อม-hdpe" class="product-card group">
<div class="product-card-image">
<img src="/images/HDPE-welding-crop.jpg" alt="เครื่องเชื่อม HDPE" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/HDPE-welding-crop.jpg" alt="เครื่องเชื่อม HDPE" width="600" height="400" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">เครื่องเชื่อม HDPE</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">เครื่องเชื่อม HDPE</h3>
</div>
</a>
<a href="/เครื่องเชื่อมท่อพีพีอา" class="product-card group">
<div class="product-card-image">
<img src="/images/products-misc/ppr-welding-machine-main.jpg" alt="เครื่องเชื่อม PPR" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/products-misc/ppr-welding-machine-main.jpg" alt="เครื่องเชื่อม PPR" width="600" height="400" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">เครื่องเชื่อม PPR</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">เครื่องเชื่อม PPR</h3>
</div>
</a>
<a href="/groove-coupling" class="product-card group">
<div class="product-card-image">
<img src="/images/products-cropped/mech_000C.jpg" alt="กรู๊ฟท่อ" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/products-cropped/mech_000C.jpg" alt="กรู๊ฟท่อ" width="600" height="400" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">กรู๊ฟท่อ</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">กรู๊ฟท่อ</h3>
</div>
</a>
<a href="/pipe-coupling" class="product-card group">
<div class="product-card-image">
<img src="/images/pipe-coupling/BG-SMC02.png" alt="Pipe Coupling" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/pipe-coupling/BG-SMC02.png" alt="Pipe Coupling" width="600" height="400" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">Pipe Coupling</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">Pipe Coupling</h3>
</div>
</a>
<a href="/dukelarrsen" class="product-card group">
<div class="product-card-image">
<img src="/images/dukelarrsen/dukelarrsen-43.jpg" alt="Dukelarrsen" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/dukelarrsen/dukelarrsen-43.jpg" alt="Dukelarrsen" width="600" height="400" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">DUKELARRSEN</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">DUKELARRSEN</h3>
</div>
</a>
<a href="/เม็กกรู๊ฟ-คับปลิ้ง" class="product-card group">
<div class="product-card-image">
<img src="/images/products-misc/MECH_001.jpg" alt="เม็กกรู๊ฟ" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<img src="/images/products-misc/MECH_001.jpg" alt="เม็กกรู๊ฟ" width="600" height="400" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">เม็กกรู๊ฟ</h3>
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors text-center">เม็กกรู๊ฟ</h3>
</div>
</a>
</div>
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl sm:text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700">จำหน่าย เครื่องเชื่อมท่อ | Pipe Coupling Machine คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล</p>
</div>
@@ -134,31 +138,32 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section class="section bg-white">
<!-- Additional Images -->
<section class="section">
<div class="container-custom">
<h2 class="text-2xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<img src="/images/products-misc/groove-coupling_000C_cropped.jpg" alt="เครื่องเชื่อมท่อ | Pipe Coupling Machine" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/products-misc/groove-coupling_000C_cropped.jpg" alt="เครื่องเชื่อมท่อ | Pipe Coupling Machine" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" /><img src="/images/products-misc/groove-coupling_000C_cropped.jpg" alt="เครื่องเชื่อมท่อ | Pipe Coupling Machine" class="w-full h-auto rounded-lg shadow-md" onerror="this.style.display='none'" />
<img src="/images/products-misc/groove-coupling_000C_cropped.jpg" alt="เครื่องเชื่อมท่อ | Pipe Coupling Machine" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" onerror="this.style.display='none'" /><img src="/images/products-misc/groove-coupling_000C_cropped.jpg" alt="เครื่องเชื่อมท่อ | Pipe Coupling Machine" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" onerror="this.style.display='none'" /><img src="/images/products-misc/groove-coupling_000C_cropped.jpg" alt="เครื่องเชื่อมท่อ | Pipe Coupling Machine" class="w-full h-auto rounded-lg shadow-md" width="600" height="400" loading="lazy" decoding="async" onerror="this.style.display='none'" />
</div>
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

99
src/pages/เครื่องเชื่อมท่อพีพีอา/index.astro
View File

@@ -7,65 +7,68 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="เครื่องเชื่อมท่อพีพีอาร์ | PPR Welding Machine" description="จำหน่ายเครื่องเชื่อมท่อพีพีอาร์คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-misc/ppr-welding-machine-main.jpg" alt="เครื่องเชื่อมท่อพีพีอาร์" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="card-glass p-8">
<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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">เครื่องเชื่อมท่อพีพีอาร์ | PPR Welding Machine</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
<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 text-white mb-4">เครื่องเชื่อมท่อพีพีอาร์ | PPR Welding Machine</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายเครื่องเชื่อมท่อพีพีอาร์คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">มาตรฐานเยอรมัน DVGW</span>
<span class="text-lg text-white/80">มาตรฐานเยอรมัน DVGW</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -73,10 +76,11 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4"><strong>เครื่องเชื่อม PPR</strong> ในการติดตั้งท่อไทยพีพี-อาร์ หรือท่อ PPR สามารถเชื่อมต่อท่อเข้าหากันได้หลายวิธีขึ้นอยู่กับขนาด และประเภทการใช้งานโดยรวมมี 2 แบบคือ "การเชื่อมสอด" และ "การเชื่อมชน"</p>
@@ -110,9 +114,9 @@ import Footer from '@/components/common/Footer.astro';
</section>
<!-- Product Price Table -->
<section id="product-price" class="section bg-gray-50 py-16">
<section class="section bg-gray-50 py-16">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">เครื่องเชื่อมพร้อมหัวเชื่อม Welding Machine</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">เครื่องเชื่อมพร้อมหัวเชื่อม Welding Machine</h2>
<div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; font-size: 14px;">
@@ -126,7 +130,7 @@ import Footer from '@/components/common/Footer.astro';
</thead>
<tbody>
<!-- เครื่องเชื่อมพร้อมหัวเชื่อม Welding Machine -->
<tr style="background: white;"><td rowspan="5" style="padding: 12px; text-align: 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;" /></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" style="padding: 12px; text-align: 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: #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>
@@ -134,13 +138,13 @@ import Footer from '@/components/common/Footer.astro';
<tr><td colspan="4" style="border-bottom: 2px solid #15803d; height: 8px;"></td></tr>
<!-- หัวเจาะอานม้า Aiguille -->
<tr style="background: white;"><td rowspan="3" style="padding: 12px; text-align: center; vertical-align: middle;">หัวเจาะอานม้า Aiguille<br/><img src="/images/products-misc/D25-32-40.jpg" alt="Aiguille" style="object-fit: contain; margin: auto;" /></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" style="padding: 12px; text-align: 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: #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>
<!-- หัวเชื่อมอานม้า Welding Saddle Mould -->
<tr style="background: white;"><td rowspan="18" style="padding: 12px; text-align: 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;" /></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" style="padding: 12px; text-align: 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: #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>
@@ -160,12 +164,12 @@ import Footer from '@/components/common/Footer.astro';
<tr><td colspan="4" style="border-bottom: 2px solid #15803d; height: 8px;"></td></tr>
<!-- หัวเชื่อมแท่งซ่อม Repairing Stick Mould -->
<tr style="background: white;"><td rowspan="2" style="padding: 12px; text-align: 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;" /></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" style="padding: 12px; text-align: 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: #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>
<!-- หัวเชื่อม Welding Mould -->
<tr style="background: white;"><td rowspan="10" style="padding: 12px; text-align: center; vertical-align: middle;">หัวเชื่อม Welding Mould<br/><img src="/images/products-misc/D20.jpg" alt="Welding Mould" style="object-fit: contain; margin: auto;" /></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" style="padding: 12px; text-align: 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: #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>
@@ -181,21 +185,22 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Contact CTA -->
<section id="contact-cta" class="section bg-white">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

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

@@ -7,59 +7,62 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)" description="จำหน่ายฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Product" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="card-glass p-8">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Product" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
จำหน่ายฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
<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 text-white mb-4">ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak) คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-white mt-1" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,13 +70,14 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-specs" class="section bg-white">
<!-- Product Specifications -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/thermobreak/thermobreak-banner.png" alt="Thermobreak Banner" class="w-full h-auto rounded-lg shadow-md" />
<img src="/images/thermobreak/thermobreak-banner.png" alt="Thermobreak Banner" class="w-full h-auto rounded-lg shadow-md" width="800" height="300" loading="lazy" decoding="async" />
</div>
<p class="text-lg text-secondary-700 leading-relaxed">
@@ -84,7 +88,7 @@ import Footer from '@/components/common/Footer.astro';
ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ ฉนวนกันความร้อน เทอร์โมเบรค (Thermobreak) ถูกคิดค้นมาจากประเทศออสเตรเลีย มากกว่า 30 ปี และมีการรับประกันจากลูกค้าทั่วโลกแล้ว
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ทำไมต้องเลือกใช้ เทอร์โมเบรค (Thermobreak)</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ทำไมต้องเลือกใช้ เทอร์โมเบรค (Thermobreak)</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ ฉนวนกันความร้อน เทอร์โมเบรค (Thermobreak) เป็นผู้นำนวัตกรรมผลิตฉนวน polygon foam คุณภาพสูงที่เป็นที่ยอมรับทั่วโลก ดังนี้
</p>
@@ -102,7 +106,7 @@ import Footer from '@/components/common/Footer.astro';
ผลิตภัณฑ์ฉนวนกันความร้อน ฉนวนหุ้มท่อแอร์ ฉนวนหุ้มท่อน้ำ เทอร์โมเบรค (Thermobreak) เป็นผลิตภัณฑ์สำหรับงานฉนวนระบบปรับอากาศและฉนวนงานหุ้มท่อแอร์ จึงต้องมีการผ่านการรับรองมาตรฐานเกี่ยวกับการติดไฟของวัสดุ ซึ่งเทอร์โมเบรค (Thermobreak) ได้รับการรับรองผ่านมาตรฐานมากมายทั้ง Factory Mutual (FM) และ UL
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">มาตรฐานการรับรองไฟและควัน</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">มาตรฐานการรับรองไฟและควัน</h3>
<ul class="list-disc pl-6 space-y-2 text-lg text-secondary-700">
<li>BRITISH (BS476 Part 6&7 Class 0)</li>
<li>ASTM E84, UL723 (25/50)</li>
@@ -111,12 +115,12 @@ import Footer from '@/components/common/Footer.astro';
<li>ISO STANDARD (ISO 5659-2)</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">เทคโนโลยีเพื่อผลิตภัณฑ์ที่เหนือกว่า</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">เทคโนโลยีเพื่อผลิตภัณฑ์ที่เหนือกว่า</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>Physically cross linked</strong> ทำให้เราได้ผลิตภัณฑ์ที่มีขนาดเซลล์เล็กลงและการกระจายของเซลล์เป็นไปอย่างสม่ำเสมอทำให้ได้ค่าการนำความร้อนที่ต่ำ (0.032 W/m.K) มีความเสถียร และมีการแทรกซึมไอน้ำที่น้อย เป็นจุดประสงค์หลักของฉนวนกันความร้อนด้วยค่าการนำความร้อนที่ต่ำเพียง 0.032 W/m.K
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ค่าการซึมผ่านของไอน้ำที่เกือบจะเป็น 0</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ค่าการซึมผ่านของไอน้ำที่เกือบจะเป็น 0</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
เราสามารถยืนยันได้ว่าผลิตภัณฑ์ เทอร์โมเบรค (Thermobreak) จะมีค่าการนำความร้อนที่คงที่เป็นระยะเวลามากกว่า 10 ปี ซึ่งจะทำให้ลดค่าใช้จ่ายในการซ่อมบำรุงของระบบฉนวน
</p>
@@ -125,7 +129,7 @@ import Footer from '@/components/common/Footer.astro';
<li>Permeability Resistance Factor : μ > 80,000</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ความยั่งยืนและประโยชน์กับสิ่งแวดล้อม</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">ความยั่งยืนและประโยชน์กับสิ่งแวดล้อม</h3>
<p class="text-lg text-secondary-700 leading-relaxed">
ความยั่งยืนของอาคาร (Building Sustainability), คุณภาพอากาศภายในอาคาร (Indoor Air Quality) และสุขภาพและความปลอดภัยของผู้ใช้อาคาร (Health & Safety) เป็นปัจจัยหลักในคอนเซปของอาคารเขียว (Green Building)
</p>
@@ -145,7 +149,7 @@ import Footer from '@/components/common/Footer.astro';
<li>DUBAI GBR Approved</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">การสนับสนุนทางเทคนิคอย่างครอบคลุม</h3>
<h3 class="text-xl font-bold text-secondary-900 mt-8 mb-4">การสนับสนุนทางเทคนิคอย่างครอบคลุม</h3>
<h4 class="text-xl font-bold text-secondary-800 mt-6 mb-3">ฉนวนกันความร้อน Thermobreak LS ชนิดม้วนและแผ่นทั้งภายในและนอกอาคาร</h4>
<p class="text-lg text-secondary-700 leading-relaxed">
@@ -156,7 +160,7 @@ import Footer from '@/components/common/Footer.astro';
</p>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Thermobreak SolarBlock" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="Thermobreak SolarBlock" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h4 class="text-xl font-bold text-secondary-800 mt-6 mb-3">Thermobreak LS Tube : ฉนวนหุ้มท่อความเย็นภายในอาคาร</h4>
@@ -170,7 +174,7 @@ import Footer from '@/components/common/Footer.astro';
</ul>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/thermobreak/thermobreak-ls.png" alt="Thermobreak LS" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/thermobreak/thermobreak-ls.png" alt="Thermobreak LS" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<h4 class="text-xl font-bold text-secondary-800 mt-6 mb-3">เทป Thermobreak LS Foil Tape หน้ากว้าง 50 มิลลิเมตรและ 75 มิลลิเมตร</h4>
@@ -184,7 +188,7 @@ import Footer from '@/components/common/Footer.astro';
</ul>
<div class="flex flex-wrap justify-center gap-4 my-8">
<img src="/images/thermobreak/thermobreak-raised-floor.png" alt="Thermobreak Raised Floor Insulation" class="max-w-lg w-full h-auto rounded-lg shadow-md" />
<img src="/images/thermobreak/thermobreak-raised-floor.png" alt="Thermobreak Raised Floor Insulation" class="max-w-lg w-full h-auto rounded-lg shadow-md" width="500" height="300" loading="lazy" decoding="async" />
</div>
<p class="text-lg text-secondary-700 leading-relaxed mt-8">
@@ -195,10 +199,10 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="product-prices" class="section bg-gradient-to-br from-primary-50 to-accent-50">
<!-- Product Prices Section -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">📥 ดาวน์โหลดราคาสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">ดาวน์โหลดราคาสินค้า</h2>
<div class="max-w-md mx-auto">
<a href="/documents/2026-New Update Thermobreak Price List.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-10 h-10 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>
@@ -208,20 +212,22 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white 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>

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

@@ -7,59 +7,60 @@ import Footer from '@/components/common/Footer.astro';
<BaseLayout title="เม็กกรู๊ฟ คับปลิ้ง | MECH Grooved Coupling Fitting" description="เม็กกรู๊ฟ คับปลิ้ง นวัตกรรมเพื่อการติดตั้ง ทดแทนการเชื่อม สำหรับท่อเห็กและท่อดับเพลิง ไม่ก่อให้เกิดประกายไฟ ติดตั้งง่าย สะดวกรวดเร็ว ทำให้ประหยัด">
<Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-primary-50 via-white to-accent-50 min-h-screen">
<section id="product-detail" class="section">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card p-8 bg-white">
<img src="/images/products-misc/MECH_001.jpg" alt="เม็กกรู๊ฟ คับปลิ้ง | MECH Grooved Coupling Fitting" class="w-full h-auto rounded-xl" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="card-glass p-2">
<img src="/images/products-misc/MECH_001.jpg" alt="เม็กกรู๊ฟ คับปลิ้ง | MECH Grooved Coupling Fitting" 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'" />
</div>
</div>
<div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-4 sm:mb-6 text-center sm:text-left">เม็กกรู๊ฟ คับปลิ้ง | MECH Grooved Coupling Fitting</h1>
<p class="text-lg sm:text-lg md:text-xl text-secondary-600 mb-6 sm:mb-8 leading-relaxed text-center sm:text-left">
เม็กกรู๊ฟ คับปลิ้ง นวัตกรรมเพื่อการติดตั้ง ทดแทนการเชื่อม สำหรับท่อเห็กและท่อดับเพลิง ไม่ก่อให้เกิดประกายไฟ ติดตั้งง่าย สะดวกรวดเร็ว ทำให้ประหยัด
<div class="order-1 lg:order-2">
<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 text-white mb-4">เม็กกรู๊ฟ คับปลิ้ง | MECH Grooved Coupling Fitting</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
เม็กกรู๊ฟ คับปลิ้ง นวัตกรรมเพื่อการติดตั้ง ทดแทนการเชื่อม สำหรับท่อเห็กและท่อดับเพลิง ไม่ก่อให้เกิดประกายไฟ ติดตั้งง่าย สะดวกรวดเร็ว
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="btn-white 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 class="flex flex-wrap justify-center gap-4 mt-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 class="mt-12 space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap gap-6">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
<span>คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">ราคาโรงงาน คุ้มค่า</span>
<span>ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
<span>จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-green-600 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-white/80">
<svg class="w-5 h-5 text-white" 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-lg text-secondary-700">รับประกันสินค้า</span>
<span>รับประกันสินค้า</span>
</div>
</div>
</div>
@@ -67,155 +68,33 @@ import Footer from '@/components/common/Footer.astro';
</div>
</section>
<!-- Product Specifications -->
<section id="product-specs" class="section bg-white">
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
<strong>เม็กกรู๊ฟ คับปลิ้ง (MECH Grooved Coupling)</strong> ระบบข้อต่อแบบเกรูฟที่ได้รับการยอมรับในระดับสากล ออกแบบมาเพื่อทดแทนการเชื่อมท่อเหล็กและท่อดับเพลิง ด้วยคุณสมบัติพิเศษที่ไม่ก่อให้เกิดประกายไฟ ทำให้เหมาะสำหรับงานที่ต้องการความปลอดภัยสูง โดยเฉพาะในพื้นที่ที่มีวัสดุไวไฟ
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
ระบบ MECH Grooved Coupling ใช้หลักการจับยึดท่อด้วยร่องเกรูฟ (Groove) ที่ผลิตไว้ล่วงหน้าที่ปลายท่อ ทำให้การติดตั้งง่าย สะดวก และรวดเร็ว ลดเวลาและค่าใช้จ่ายในการติดตั้งอย่างมากเมื่อเทียบกับการเชื่อมแบบดั้งเดิม
</p>
<p class="text-lg text-secondary-700 leading-relaxed mb-4">
เหมาะสำหรับระบบท่อดับเพลิง (Fire Protection System) ระบบประปา ระบบน้ำอุตสาหกรรม ระบบปรับอากาศ (HVAC) และงานก่อสร้างทั่วไป ใช้กับท่อเหล็กและท่อสแตนเลสได้หลากหลายขนาด
</p>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">คุณสมบัติเด่นของเม็กกรู๊ฟ คับปลิ้ง</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>ติดตั้งง่าย รวดเร็ว</strong> - ไม่ต้องเชื่อม ไม่ต้องใช้เครื่องมือพิเศษ ประหยัดเวลาติดตั้งได้ถึง 50%</li>
<li><strong>ไม่ก่อให้เกิดประกายไฟ</strong> - ปลอดภัยสูง เหมาะสำหรับพื้นที่ที่มีวัสดุไวไฟและพื้นที่ห้ามเชื่อม</li>
<li><strong>รับแรงดันได้สูง</strong> - สามารถรับแรงดันน้ำได้ตามมาตรฐาน ANSI/AWWA C606</li>
<li><strong>ยืดหยุ่นในการรับการขยายตัว</strong> - ดูดซับการสั่นสะเทือนและการเคลื่อนตัวของท่อได้ดี</li>
<li><strong>ดูแลรักษาง่าย</strong> - สามารถถอดประกอบเพื่อซ่อมบำรุงได้โดยไม่ต้องตัดท่อ</li>
<li><strong>ทนการกัดกร่อน</strong> - ผิวเคลือบพิเศษป้องกันสนิมและการกัดกร่อน</li>
<li><strong>มาตรฐานสากล</strong> - ผลิตตามมาตรฐาน UL, FM, VdS และ ISO 9001</li>
</ul>
<h3 class="text-2xl font-bold text-secondary-900 mt-8 mb-4">ประเภทของเม็กกรู๊ฟ คับปลิ้ง</h3>
<ul class="list-disc pl-6 mb-4 space-y-2">
<li><strong>Rigid Coupling</strong> - ข้อต่อแบบแข็ง ใช้รับแรงดันสูง ควบคุมการขยายตัวของท่อ</li>
<li><strong>Flexible Coupling</strong> - ข้อต่อแบบยืดหยุ่น รับการสั่นสะเทือนและการเคลื่อนตัวได้ดี</li>
<li><strong>Grooved Flange</strong> - ข้อต่อแบบจาน ใช้เชื่อมต่อกับอุปกรณ์อื่น</li>
<li><strong>Elbow / Tee / Reducer</strong> - ข้อต่อเลี้ยว สามทาง ลดขนาด แบบเกรูฟ</li>
<li><strong>Mechanical Tee</strong> - ข้อต่อสามทางแบบเจาะท่อ ติดตั้งง่าย ไม่ต้องเชื่อม</li>
<li><strong>Cap</strong> - ฝาปิดปลายท่อแบบเกรูฟ</li>
<li><strong>Gasket</strong> - ประเกทยาง ทนความร้อนและสารเคมี</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Product Images Section -->
<section id="product-images" class="section bg-gray-50 py-16">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-12 text-center">ตารางราคาสินค้า MECH Grooved</h2>
<div class="grid gap-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-002.jpg" alt="Rigid Coupling" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-003.jpg" alt="Flexible Coupling" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-004.jpg" alt="Grooved Flange" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-005.jpg" alt="Elbow" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-006.jpg" alt="Reducer" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-007.jpg" alt="Tee" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-008.jpg" alt="Female Threaded" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-009.jpg" alt="Cap" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-010.jpg" alt="Mechanical Tee Grooved" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-011.jpg" alt="Mechanical Tee Threaded" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-012.jpg" alt="U-Bolt" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-013.jpg" alt="Gasket" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-014.jpg" alt="Coupling" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-015.jpg" alt="Flange" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-016.jpg" alt="Reducer Tee" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-017.jpg" alt="Cross Cap" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<img src="/images/mech/mech-018.jpg" alt="Mechanical Tee" class="w-full max-w-4xl mx-auto h-auto rounded-xl" />
</div>
</div>
</div>
</section>
<section id="product-prices" class="section bg-gradient-to-br from-primary-50 to-accent-50">
<div class="container-custom">
<h2 class="text-3xl font-bold text-secondary-900 mb-8 text-center">📥 ดาวน์โหลดราคาสินค้า</h2>
<div class="max-w-md mx-auto">
<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">
<svg class="w-10 h-10 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-secondary-900">Price List MECH V13-2021</div><div class="text-sm text-secondary-500">PDF - ดาวน์โหลดราคา</div></div>
</a>
</div>
</div>
</section>
<section id="contact-cta" class="section bg-gray-50">
<!-- Contact CTA -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-secondary-600 mb-8 max-w-2xl mx-auto">
<h2 class="text-xl sm:text-2xl font-bold text-white 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/~dealplustech" target="_blank" class="inline-flex items-center space-x-2 bg-white border-2 border-[#06C755] text-[#06C755] hover:bg-[#06C755] hover:text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<img src="/images/line-icon.png" alt="Line" class="w-5 h-5 line-icon" />
<span>แชท Line</span>
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
Line: @dealplustech
</a>
<a href="tel:0905551415" class="inline-flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">
<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 href="tel:0905551415" class="btn-white">
โทร 090-555-1415
</a>
</div>
</div>

517
src/styles/global.css
View File

@@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@@ -39,6 +40,12 @@
body {
@apply font-sans text-secondary-800 antialiased;
overflow-x: hidden;
background: #fafafa;
}
/* Dramatic heading typography */
h1, h2, h3, h4, h5, h6 {
@apply font-sans tracking-tight;
}
strong {
@@ -52,100 +59,206 @@
}
::-webkit-scrollbar-track {
@apply bg-secondary-100;
@apply bg-secondary-50;
}
::-webkit-scrollbar-thumb {
@apply bg-primary-500 rounded-full;
@apply bg-secondary-400 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-primary-600;
@apply bg-secondary-500;
}
}
@layer components {
/* Modern card with hover effects */
/* ========================================
CONTEMPORARY INDUSTRIAL DESIGN SYSTEM
======================================== */
/* ---- Modern card with hover effects ---- */
.card {
@apply bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300
hover:shadow-2xl hover:-translate-y-1;
@apply bg-white rounded-lg overflow-hidden transition-all duration-300;
}
/* Gradient button with modern effects */
.card-hover {
@apply bg-white rounded-lg overflow-hidden transition-all duration-300;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Glass card */
.card-glass {
@apply bg-white/70 backdrop-blur-xl rounded-2xl border border-white/40;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* ---- Gradient Buttons with 3D Press Effect ---- */
.btn-primary {
@apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-3 rounded-xl
font-medium shadow-lg hover:shadow-xl transition-all duration-300
hover:from-primary-500 hover:to-primary-400 active:scale-95;
@apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-4 rounded-lg
font-semibold tracking-wide transition-all duration-200;
box-shadow: 0 4px 0 #2d6b4f, 0 6px 12px rgba(63, 139, 109, 0.25);
}
.btn-secondary {
@apply bg-white text-primary-600 px-8 py-3 rounded-xl border-2 border-primary-500
font-medium shadow-md hover:shadow-lg transition-all duration-300
hover:bg-primary-50 active:scale-95;
.btn-primary:hover {
@apply from-primary-500 to-primary-400;
transform: translateY(-2px);
box-shadow: 0 6px 0 #2d6b4f, 0 10px 20px rgba(63, 139, 109, 0.3);
}
/* Product card styling */
.btn-primary:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #2d6b4f, 0 2px 6px rgba(63, 139, 109, 0.2);
}
/* Accent button (green) */
.btn-accent {
@apply bg-gradient-to-r from-primary-600 to-primary-500 text-white px-8 py-4 rounded-lg
font-semibold tracking-wide transition-all duration-200;
box-shadow: 0 4px 0 #2d6b4f, 0 6px 12px rgba(63, 139, 109, 0.25);
}
.btn-accent:hover {
@apply from-primary-500 to-primary-400;
transform: translateY(-2px);
box-shadow: 0 6px 0 #2d6b4f, 0 10px 20px rgba(63, 139, 109, 0.3);
}
.btn-accent:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #2d6b4f, 0 2px 6px rgba(63, 139, 109, 0.2);
}
/* White CTA button */
.btn-white {
@apply bg-white text-primary-700 px-8 py-4 rounded-lg
font-semibold tracking-wide transition-all duration-200;
box-shadow: 0 4px 0 #e5e7eb, 0 6px 12px rgba(0, 0, 0, 0.1);
}
.btn-white:hover {
@apply text-primary-600;
transform: translateY(-2px);
box-shadow: 0 6px 0 #e5e7eb, 0 10px 20px rgba(0, 0, 0, 0.15);
}
.btn-white:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #e5e7eb, 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Outline button */
.btn-outline {
@apply bg-transparent text-white px-8 py-4 rounded-lg border-2 border-white/50
font-semibold tracking-wide transition-all duration-200;
}
.btn-outline:hover {
@apply border-white bg-white/10;
}
/* ---- Product Card Styling ---- */
.product-card {
@apply card cursor-pointer;
@apply card-hover cursor-pointer block;
}
.product-card.group:hover .product-card-image img {
transform: scale(1.08);
}
.product-card-image {
@apply relative overflow-hidden bg-gradient-to-br from-secondary-50 to-secondary-100
aspect-square flex items-center justify-center;
aspect-square flex items-center justify-center;
}
.product-card-image img {
@apply w-full h-full object-contain p-6 transition-transform duration-500
group-hover:scale-110;
@apply w-full h-full object-contain p-6 transition-transform duration-500;
transform: scale(1);
}
/* Modern section styling */
.product-card:hover .product-card-image img {
transform: scale(1.08);
}
/* ---- Modern Section Styling ---- */
.section {
@apply py-16 md:py-24;
}
.section-dark {
@apply py-16 md:py-24 bg-secondary-900 text-white;
}
.section-title {
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-6
animate-fade-in;
@apply text-2xl sm:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4
tracking-tight leading-tight;
}
.section-subtitle {
@apply text-lg md:text-xl text-secondary-600 max-w-3xl animate-fade-in;
@apply text-lg md:text-xl text-secondary-500 max-w-3xl leading-relaxed;
}
/* Container with modern spacing */
/* ---- Container with modern spacing ---- */
.container-custom {
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
/* Gradient background */
/* ---- Gradient Backgrounds ---- */
.gradient-bg {
@apply bg-gradient-to-br from-primary-50 via-white to-accent-50;
@apply bg-gradient-to-br from-secondary-50 via-white to-secondary-50;
}
.gradient-mesh {
background:
radial-gradient(at 40% 20%, rgba(63, 139, 109, 0.08) 0px, transparent 50%),
radial-gradient(at 80% 0%, rgba(227, 92, 24, 0.05) 0px, transparent 50%),
radial-gradient(at 0% 50%, rgba(63, 139, 109, 0.05) 0px, transparent 50%),
radial-gradient(at 80% 50%, rgba(227, 92, 24, 0.03) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(63, 139, 109, 0.05) 0px, transparent 50%);
}
.main-content {
@apply px-4 sm:px-6 lg:px-8;
}
/* ---- Navbar with Strong Glass Effect ---- */
.navbar {
@apply sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-secondary-200
transition-all duration-300;
@apply sticky top-0 z-50 transition-all duration-300;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.navbar-scrolled {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* ---- Footer ---- */
.footer {
@apply bg-white text-secondary-900;
@apply bg-white text-secondary-600 border-t border-secondary-200;
}
.footer-title {
@apply text-lg font-semibold text-secondary-900 mb-6 tracking-wide uppercase;
}
/* ---- Tables ---- */
.modern-table {
@apply w-full border-collapse rounded-xl overflow-hidden shadow-lg;
}
.modern-table th {
@apply bg-primary-600 text-white px-6 py-4 text-left font-semibold uppercase tracking-wider;
@apply bg-secondary-800 text-white px-6 py-4 text-left font-semibold uppercase tracking-wider text-sm;
}
.modern-table td {
@apply px-6 py-4 border-b border-secondary-200;
@apply px-6 py-4 border-b border-secondary-200 text-secondary-700;
}
.modern-table tr:last-child td {
@@ -153,18 +266,118 @@
}
.modern-table tr:hover td {
@apply bg-primary-50;
@apply bg-secondary-50;
}
/* ---- Badge ---- */
.badge {
@apply inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium
bg-primary-100 text-primary-700;
@apply inline-flex items-center px-4 py-1.5 rounded-full text-sm font-medium;
}
.badge-primary {
@apply bg-secondary-100 text-secondary-700;
}
.badge-accent {
@apply bg-accent-100 text-accent-700;
}
/* ---- Input Modern ---- */
.input-modern {
@apply w-full px-4 py-3 rounded-xl border-2 border-secondary-300
focus:border-primary-500 focus:ring-4 focus:ring-primary-100
transition-all duration-300 outline-none;
@apply w-full px-5 py-4 rounded-lg border-2 border-secondary-200 bg-white
focus:border-secondary-800 focus:ring-0 focus:outline-none
transition-all duration-200 text-secondary-800 placeholder:text-secondary-400;
}
.input-modern:focus {
box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}
/* ---- Hero Section Styles ---- */
.hero-gradient {
background:
linear-gradient(135deg, rgba(63, 139, 109, 0.95) 0%, rgba(45, 107, 79, 0.9) 100%),
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.03'%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");
}
/* ---- Divider ---- */
.divider {
@apply h-px bg-gradient-to-r from-transparent via-secondary-300 to-transparent;
}
/* ---- Animated Underline Link ---- */
.link-animate {
@apply relative inline-block;
}
.link-animate::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
@apply bg-accent-500;
transition: width 0.3s ease-out;
}
.link-animate:hover::after {
width: 100%;
}
/* ---- Stat Counter ---- */
.stat-number {
@apply text-5xl md:text-6xl font-bold text-white tracking-tight;
font-family: 'Space Grotesk', sans-serif;
}
.stat-label {
@apply text-white/70 text-lg font-medium tracking-wide uppercase;
}
/* ---- Feature Card ---- */
.feature-card {
@apply card-glass p-8 text-center;
}
.feature-card:hover {
@apply bg-white/90;
transform: translateY(-4px);
}
.feature-icon {
@apply w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6;
background: linear-gradient(135deg, rgba(63, 139, 109, 0.1) 0%, rgba(63, 139, 109, 0.05) 100%);
}
/* ---- CTA Section ---- */
.cta-gradient {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
/* ---- Image Frame ---- */
.image-frame {
@apply relative overflow-hidden rounded-xl;
}
.image-frame::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid rgba(255, 255, 255, 0.2);
@apply rounded-xl;
z-index: 1;
pointer-events: none;
}
.image-frame::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
@apply rounded-xl;
z-index: 1;
pointer-events: none;
}
}
@@ -180,7 +393,11 @@
/* Gradient text */
.gradient-text {
@apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
@apply bg-gradient-to-r from-secondary-900 to-secondary-600 bg-clip-text text-transparent;
}
.gradient-text-light {
@apply bg-gradient-to-r from-white to-secondary-200 bg-clip-text text-transparent;
}
/* Glass morphism */
@@ -188,6 +405,14 @@
@apply bg-white/10 backdrop-blur-lg border border-white/20;
}
.glass-strong {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Line icon - original color by default, white on hover */
.line-icon {
transition: filter 0.2s ease;
@@ -196,4 +421,220 @@
a:hover .line-icon {
filter: brightness(0) invert(1);
}
/* ========================================
MODERN UX/UI ENHANCEMENTS
======================================== */
/* ---- Staggered Scroll Reveal Animations ---- */
.stagger-container {
@apply overflow-hidden;
}
.stagger-item {
@apply opacity-0 translate-y-8;
transition-property: opacity, transform, box-shadow;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-item.revealed {
@apply opacity-100 translate-y-0;
}
.stagger-item[data-delay="1"] { transition-delay: 0.1s; }
.stagger-item[data-delay="2"] { transition-delay: 0.2s; }
.stagger-item[data-delay="3"] { transition-delay: 0.3s; }
.stagger-item[data-delay="4"] { transition-delay: 0.4s; }
.stagger-item[data-delay="5"] { transition-delay: 0.5s; }
.stagger-item[data-delay="6"] { transition-delay: 0.6s; }
.stagger-item[data-delay="7"] { transition-delay: 0.7s; }
.stagger-item[data-delay="8"] { transition-delay: 0.8s; }
/* Scale reveal for cards */
.stagger-scale {
@apply opacity-0 scale-95;
transition-property: opacity, transform, box-shadow;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stagger-scale.revealed {
@apply opacity-100 scale-100;
}
/* ---- Skeleton Loaders ---- */
.skeleton {
@apply relative overflow-hidden bg-secondary-200 rounded-lg;
background: linear-gradient(
90deg,
theme('colors.secondary.200') 0%,
theme('colors.secondary.100') 50%,
theme('colors.secondary.200') 100%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-image {
@apply skeleton aspect-square;
}
.skeleton-text {
@apply skeleton h-4 rounded;
}
.skeleton-text-lg {
@apply skeleton h-6 rounded;
}
.skeleton-title {
@apply skeleton h-8 rounded;
}
.skeleton-button {
@apply skeleton h-12 rounded-xl;
}
.skeleton-card {
@apply bg-white rounded-xl shadow-lg overflow-hidden p-0;
}
.skeleton-card-image {
@apply skeleton-image;
}
.skeleton-card-content {
@apply p-6 space-y-3;
}
/* ---- Image Hover Effects ---- */
.img-zoom {
@apply overflow-hidden;
}
.img-zoom img {
@apply transition-transform duration-500;
transform: scale(1);
}
.img-zoom:hover img {
transform: scale(1.08);
}
/* Image reveal on scroll */
.img-reveal {
@apply opacity-0 scale-105;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.img-reveal.visible {
@apply opacity-100 scale-100;
}
/* ---- Smooth Section Transitions ---- */
.section-transition {
position: relative;
}
/* Fade in on scroll container */
.fade-reveal {
@apply opacity-0;
transition: opacity 0.8s ease-out;
}
.fade-reveal.visible {
@apply opacity-100;
}
/* ---- Counter Animation Helper ---- */
.counter-animate {
transition: transform 0.3s ease-out;
}
.counter-animate.counting {
transform: scale(1.1);
}
/* ---- Glow Effects ---- */
.glow-primary {
box-shadow: 0 0 40px -10px rgba(63, 139, 109, 0.4);
}
.glow-accent {
box-shadow: 0 0 40px -10px rgba(227, 92, 24, 0.4);
}
/* ---- Text Balance ---- */
.text-balance {
text-wrap: balance;
}
/* ---- Reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
.stagger-item,
.stagger-scale,
.fade-reveal,
.img-reveal,
.img-zoom img {
transition: none;
animation: none;
}
.stagger-item,
.stagger-scale,
.fade-reveal,
.img-reveal {
@apply opacity-100 translate-y-0 translate-x-0 scale-100;
}
}
}
/* ========================================
KEYFRAME ANIMATIONS
======================================== */
@keyframes skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Floating animation for hero elements */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
/* Pulse glow animation */
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 20px -5px rgba(63, 139, 109, 0.4);
}
50% {
box-shadow: 0 0 40px -5px rgba(63, 139, 109, 0.6);
}
}
.animate-pulse-glow {
animation: pulse-glow 3s ease-in-out infinite;
}
/* Gradient shift for hero background */
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient-shift 8s ease infinite;
}