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

243
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>
@@ -355,4 +342,4 @@ import Footer from '@/components/common/Footer.astro';
</main>
<Footer slot="footer" />
</BaseLayout>
</BaseLayout>