dealplustech-astroreal/src/pages/ท่อ-xy-lent.astro

---
import BaseLayout from '@/layouts/BaseLayout.astro';
---
<BaseLayout title="ท่อ XYLENT - ดีล พลัส เทค" description="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT) ระบบ Push Fit เงียบสนิท 22 เดซิเบล จาก Poloplast">
  <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
    
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
      
      <!-- Floating Particles -->
      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
      
      <!-- Water-inspired Waves -->
      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
        </path>
        <defs>
          <linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#40916c"/>
            <stop offset="50%" stop-color="#74c69d"/>
            <stop offset="100%" stop-color="#40916c"/>
          </linearGradient>
        </defs>
      </svg>
      
      <!-- Second Wave Layer -->
      <svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
        </path>
      </svg>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <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-12 items-start">
        <div class="lg:sticky lg:top-24">
            <div class="rounded-2xl overflow-hidden bg-white/10">
          <img src="/images/products-cropped/XYLENT_001.png" alt="ท่อ XYLENT" class="w-full" loading="eager" />
        </div>
          </div>
        <div>
          <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อระบายน้ำ</span>
          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT)</h1>
          <p class="text-lg sm:text-xl text-white/80 mb-6 leading-relaxed">นวัตกรรมท่อระบายน้ำคุณภาพสูงจาก 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>
            <a href="#pricelist" data-price-button class="hidden bg-white/10 hover:bg-white/20 text-white py-3 px-6 rounded-xl font-semibold border border-white/30 flex items-center gap-2">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              <span>ราคาสินค้า</span>
            </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 relative z-10">
      <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-primary-700 mb-4">เทคโนโลยี 3 ชั้น ไซเลนท์</h2>
        <p class="text-neutral-600 max-w-2xl mx-auto">โครงสร้างผนังท่อ 3 ชั้นที่ทำงานร่วมกันในการลดเสียงและเพิ่มความแข็งแรง ผลิตจาก Polypropylene (PP) เกรดพิเศษ ทนทานต่อความร้อนและสารเคมี</p>
      </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-start 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-start 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-start 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 relative z-10">
      <div class="grid lg:grid-cols-2 gap-12 items-start">
        <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-start 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-start 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-start 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-start 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-start 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-start 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 relative z-10">
      <h2 class="text-3xl font-bold text-primary-700 mb-8 text-center">การใช้งานท่อ XYLENT</h2>
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="flex items-start gap-4 bg-neutral-50 rounded-xl p-4">
          <div class="w-12 h-12 bg-primary-100 rounded-full flex items-start 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-start gap-4 bg-neutral-50 rounded-xl p-4">
          <div class="w-12 h-12 bg-primary-100 rounded-full flex items-start 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-start gap-4 bg-neutral-50 rounded-xl p-4">
          <div class="w-12 h-12 bg-primary-100 rounded-full flex items-start 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-start gap-4 bg-neutral-50 rounded-xl p-4">
          <div class="w-12 h-12 bg-primary-100 rounded-full flex items-start 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-start gap-4 bg-neutral-50 rounded-xl p-4">
          <div class="w-12 h-12 bg-primary-100 rounded-full flex items-start 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-start gap-4 bg-neutral-50 rounded-xl p-4">
          <div class="w-12 h-12 bg-primary-100 rounded-full flex items-start 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>

  <!-- Pricelist -->
  <section id="pricelist" class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="max-w-lg mx-auto text-center">
        <h2 class="text-xl font-bold mb-6">📥 ดาวน์โหลดราคาสินค้า ท่อ XYLENT</h2>
        <a href="/documents/Price List XYLENT_Novat_V12-2022 [080265]_220727_155718 (1).pdf" target="_blank" class="inline-flex items-center gap-4 p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow text-left">
          <svg class="w-8 h-8 text-red-600 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 9V3.5L18.5 9H13zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h2v2H8V9z" />
          </svg>
          <div>
            <div class="font-medium text-slate-900">Price List XYLENT_Novat_V12-2022</div>
            <div class="text-sm text-slate-500">PDF Document</div>
          </div>
        </a>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
    <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>