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

Part 1: Source code - Astro project structure and components

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-05-21 16:33:59 +07:00
commit 5219cf8f72
74 changed files with 14762 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
src/pages/ท่อ-xy-lent.astro Normal file
View File

@@ -0,0 +1,222 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
---
<BaseLayout title="ท่อ XYLENT - ดีล พลัส เทค" description="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT) ระบบ Push Fit เงียบสนิท 22 เดซิเบล จาก Poloplast">
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<nav class="text-sm mb-4 text-primary-100">
<a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ท่อ XYLENT</span>
</nav>
<div class="grid lg:grid-cols-2 gap-8 items-center">
<div class="img-hover rounded-2xl overflow-hidden bg-white/10">
<img src="/images/products-cropped/XYLENT_001.png" alt="ท่อ XYLENT" class="w-full" loading="eager" />
</div>
<div>
<span class="text-sm text-primary-200 font-medium">ท่อระบายน้ำ</span>
<h1 class="text-3xl lg:text-4xl font-bold mt-2 mb-4">ท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT)</h1>
<p class="text-primary-100 text-lg mb-6">นวัตกรรมท่อระบายน้ำคุณภาพสูงจาก Poloplast ผู้ผลิตชั้นนำจากยุโรป ด้วยเทคโนโลยี 3 ชั้นที่ลดเสียงรบกวนได้อย่างมีประสิทธิภาพ ระดับเสียงเพียง 22 เดซิเบล ซึ่งเงียบกว่าท่อระบายน้ำทั่วไปถึง 3 เท่า</p>
<div class="flex flex-wrap gap-4">
<a href="/contact-us" class="bg-accent-500 hover:bg-accent-600 text-white py-3 px-6 rounded-xl font-semibold">สอบถามราคา</a>
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" rel="noopener" class="bg-white/10 hover:bg-white/20 text-white py-3 px-6 rounded-xl font-semibold border border-white/30">แอดไลน์</a>
</div>
</div>
</div>
</div>
</section>
<!-- Product Features -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-primary-700 mb-4">เทคโนโลยี 3 ชั้น ไซเลนท์</h2>
<p class="text-neutral-600 max-w-2xl mx-auto">โครงสร้างผนังท่อ 3 ชั้นที่ทำงานร่วมกันในการลดเสียงและเพิ่มความแข็งแรง ผลิตจาก Polypropylene (PP) เกรดพิเศษ ทนทานต่อความร้อนและสารเคมี</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-neutral-50 rounded-xl p-6 text-center">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12l5 5L20 7" />
</svg>
</div>
<h3 class="font-semibold text-primary-700 mb-2">เงียบสนิท 22 dB</h3>
<p class="text-sm text-neutral-600">ระดับเสียงเพียง 22 เดซิเบล เทียบเท่ากับเสียงกระซิบ ทำให้ห้องน้ำและพื้นที่ใกล้เคียงเงียบสงบ</p>
</div>
<div class="bg-neutral-50 rounded-xl p-6 text-center">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="font-semibold text-primary-700 mb-2">ระบบ Push Fit</h3>
<p class="text-sm text-neutral-600">ต่อและถอดได้ง่าย ติดตั้งง่าย รวดเร็ว ไม่ต้องใช้กาวหรือเครื่องมือพิเศษ</p>
</div>
<div class="bg-neutral-50 rounded-xl p-6 text-center">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 class="font-semibold text-primary-700 mb-2">ทนความร้อน 90°C</h3>
<p class="text-sm text-neutral-600">ทนความร้อนได้ถึง 90°C เหมาะสำหรับน้ำร้อนและน้ำเย็น ใช้งานได้ยาวนานตลอดอายุอาคาร</p>
</div>
</div>
</div>
</section>
<!-- Benefits -->
<section class="py-16 bg-neutral-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl font-bold text-primary-700 mb-6">ข้อดีของท่อระบายน้ำ ไซเลนท์</h2>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>เงียบสนิท:</strong> ลดเสียงรบกวนจากการไหลของน้ำได้อย่างมีประสิทธิภาพ เหมาะสำหรับอาคารที่ต้องการความเงียบสงบ</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>ติดตั้งง่าย รวดเร็ว:</strong> ระบบ Push Fit ประหยัดเวลาในการติดตั้งและซ่อมแซม</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>ป้องกันการรั่วซึม:</strong> ระบบล็อกแน่นหนึบ ป้องกันการรั่วซึมได้ดีเยี่ยม</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>ทนเคมี:</strong> ทนทานต่อสารเคมีในครัวเรือนและงานอุตสาหกรรม</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>รับแรงกดดันได้สูง:</strong> โครงสร้าง 3 ชั้นให้ความแข็งแรงในการรับแรงกดดันจากภายนอกสูง</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>อายุการใช้งานยาวนาน:</strong> ไม่เสื่อมสภาพง่าย มีอายุการใช้งานยาวนานตลอดอาคาร</span>
</li>
</ul>
</div>
<div class="grid grid-cols-2 gap-4">
<img src="/images/products-raw/xylent/XYLENT_004-805x1024.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
<img src="/images/products-raw/xylent/XYLENT_031-771x1024.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
<img src="/images/products-raw/xylent/XYLENT_016-1024x617.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
<img src="/images/products-raw/xylent/XYLENT_008-1024x357.png" alt="XYLENT product" class="rounded-xl img-hover" loading="lazy" />
</div>
</div>
</div>
</section>
<!-- Applications -->
<section class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-primary-700 mb-8 text-center">การใช้งานท่อ XYLENT</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full 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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<span class="text-neutral-700 font-medium">ระบบระบายน้ำในอาคารสูง</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</div>
<span class="text-neutral-700 font-medium">ระบบน้ำทิ้งในบ้านพัก</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full 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 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
</div>
<span class="text-neutral-700 font-medium">โรงแรมและรีสอร์ท</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</div>
<span class="text-neutral-700 font-medium">โรงพยาบาล</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<span class="text-neutral-700 font-medium">อาคารสำนักงาน</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full 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="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
</div>
<span class="text-neutral-700 font-medium">งานอุตสาหกรรม</span>
</div>
</div>
</div>
</section>
<!-- Comparison Table -->
<section class="py-16 bg-neutral-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-primary-700 mb-8 text-center">เปรียบเทียบท่อ XYLENT กับท่อระบายน้ำทั่วไป</h2>
<div class="bg-white rounded-xl overflow-hidden shadow-sm">
<table class="w-full">
<thead>
<tr class="bg-primary-700 text-white">
<th class="py-4 px-6 text-left font-semibold">คุณสมบัติ</th>
<th class="py-4 px-6 text-center font-semibold">ท่อ XYLENT 3 ชั้น</th>
<th class="py-4 px-6 text-center font-semibold">ท่อ PVC ทั่วไป</th>
</tr>
</thead>
<tbody class="divide-y divide-neutral-200">
<tr>
<td class="py-4 px-6 font-medium text-neutral-700">ระดับเสียง</td>
<td class="py-4 px-6 text-center text-primary-600 font-semibold">22 dB (เงียบมาก)</td>
<td class="py-4 px-6 text-center text-neutral-500">50-60 dB (เสียงดัง)</td>
</tr>
<tr>
<td class="py-4 px-6 font-medium text-neutral-700">โครงสร้าง</td>
<td class="py-4 px-6 text-center text-primary-600 font-semibold">3 ชั้น (PP)</td>
<td class="py-4 px-6 text-center text-neutral-500">1 ชั้น (PVC)</td>
</tr>
<tr>
<td class="py-4 px-6 font-medium text-neutral-700">ระบบต่อ</td>
<td class="py-4 px-6 text-center text-primary-600 font-semibold">Push Fit (ล็อกแน่น)</td>
<td class="py-4 px-6 text-center text-neutral-500">กาว/เชื่อม</td>
</tr>
<tr>
<td class="py-4 px-6 font-medium text-neutral-700">ทนความร้อน</td>
<td class="py-4 px-6 text-center text-primary-600 font-semibold">90°C</td>
<td class="py-4 px-6 text-center text-neutral-500">60°C</td>
</tr>
<tr>
<td class="py-4 px-6 font-medium text-neutral-700">ความแข็งแรง</td>
<td class="py-4 px-6 text-center text-primary-600 font-semibold">สูงมาก</td>
<td class="py-4 px-6 text-center text-neutral-500">ปานกลาง</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center">
<div class="max-w-4xl mx-auto px-4">
<h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
<p class="text-lg text-primary-100 mb-8">ติดต่อ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="/contact-us" class="bg-white text-primary-700 py-3 px-8 rounded-xl font-semibold hover:bg-primary-50">ติดต่อเรา</a>
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" rel="noopener" class="bg-accent-500 hover:bg-accent-600 text-white py-3 px-8 rounded-xl font-semibold">แอดไลน์</a>
</div>
</div>
</section>
</BaseLayout>