dealplustech-astro/src/pages/index.astro

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
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.png' },
  { name: 'ท่อ UPVC', slug: '/ท่อ-upvc', image: '/images/products-cropped/upvc-pipe_000C.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' },
  { name: 'กรู๊ฟท่อ', slug: '/groove-coupling', image: '/images/products-cropped/mech_000C.jpg' },
  { name: 'Pipe Coupling', slug: '/pipe-coupling', image: '/images/pipe-coupling/BG-SMC02.png' },
  { name: 'DUKELARRSEN', slug: '/dukelarrsen', image: '/images/dukelarrsen/dukelarrsen-43.jpg' },
  { 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-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' },
  { name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation', image: '/images/thermobreak/thermobreak-solarblock.png' },
  { 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-raw/tevada/TEVADA_001-987x1024.png' },
];

const featuredProducts = [
  { name: 'ท่อ PPR ตราช้าง', slug: '/ท่อ-ppr-thai-ppr', image: '/images/products-cropped/ppr-pipe_000C.jpg', description: 'ท่อ PPR คุณภาพสูง มาตรฐาน สำหรับงานประปาและอุตสาหกรรม' },
  { name: 'กริลแอร์พลาสติก', slug: '/grilles', image: '/images/products-cropped/grilles_000C.jpg', description: 'กริลแอร์พลาสติก ระบายอากาศดี ทนทาน เหมาะสำหรับงานระบบปรับอากาศ' },
  { name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak', image: '/images/thermobreak/thermobreak-solarblock.png', description: 'ฉนวนหุ้มท่อกันความร้อน ประหยัดพลังงาน' },
];
---

<BaseLayout title="หน้าแรก">
  <Header slot="header" />
  
  <!-- 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>
          <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 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="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="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>
      </div>
    </div>
  </section>
  
  <!-- Stats Section - Light contrast -->
  <section class="bg-gray-100 py-12">
    <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 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>
  </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-lg font-bold text-white">{product.name}</h3>
              </div>
            </div>
            <div class="p-6">
              <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" />
                </svg>
              </span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
  
  <!-- Product Categories - Horizontal Scroll on Mobile -->
  <section class="section gradient-mesh">
    <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 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} width="300" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
            </div>
            <div class="p-4">
              <h3 class="text-base font-bold text-secondary-800 group-hover:text-primary-600 transition-colors text-center">{cat.name}</h3>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
  
  <!-- Why Choose Us - Dark Section -->
  <section class="section-dark">
    <div class="container-custom">
      <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 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-xl font-bold text-white mb-4">คุณภาพสูง</h3>
          <p class="text-white/80">สินค้าคุณภาพมาตรฐาน มั่นใจได้ในความทนทาน</p>
        </div>
        <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-xl font-bold text-white mb-4">ราคาโรงงาน</h3>
          <p class="text-white/80">ราคาแข่งขันได้ คุ้มค่าต่อการลงทุน</p>
        </div>
        <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-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>