dealplustech-astroreal/src/pages/portfolio.astro

---
import BaseLayout from '@/layouts/BaseLayout.astro';
---

<BaseLayout title="ผลงาน - ดีล พลัส เทค" description="ผลงานติดตั้งระบบน้ำของ ดีล พลัส เทค จำกัด">
  <!-- Hero -->
  <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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>
      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></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">
      <h1 class="text-4xl lg:text-5xl font-bold mb-4">ผลงาน</h1>
      <p class="text-lg text-primary-100">ตัวอย่างโครงการที่ได้รับความไว้วางใจจากลูกค้าทั่วประเทศ</p>
    </div>
  </section>

  <!-- Portfolio Grid -->
  <section class="py-16 lg:py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Project 1 - Cyber World -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/cyber-world.jpg" alt="Cyber World" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Cyber World</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ PPR</p>
          </div>
        </div>

        <!-- Project 2 - Toyox -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/toyox.jpg" alt="Toyox" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Toyox</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่ออุตสาหกรรม</p>
          </div>
        </div>

        <!-- Project 4 - Ethanol Factory -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/ethanol-factory.jpg" alt="โรงงานเอธานอล" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">โรงงานเอธานอล</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่ออุตสาหกรรม</p>
          </div>
        </div>

        <!-- Project 6 - Seacon Bang Khae -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/seacon-bang-khae.jpg" alt="ซีคอนบางแค" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">ซีคอนบางแค (Seacon Bang Khae)</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
          </div>
        </div>

        <!-- Project 7 - CP Ram Ladkrabang -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/cp-ram-ladkrabang.jpg" alt="ซีพีแรม ลาดกระบัง" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">ซีพีแรม ลาดกระบัง (CP Ram Ladkrabang)</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
          </div>
        </div>

        <!-- Project 9 - Begrim -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/begrim.jpg" alt="บริษัท บีกริม" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">บริษัท บีกริม (Begrim Co., Ltd.)</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
          </div>
        </div>

        <!-- Project 11 - Eminent Air Factory -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/eminent-air-factory.jpg" alt="Eminent Air Factory" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Eminent Air Factory</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
          </div>
        </div>

        <!-- Project 12 - Thai Nam Tip -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/thai-nam-tip.jpg" alt="ไทยน้ำทิพย์" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">ไทยน้ำทิพย์ (Thai Nam Tip)</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
          </div>
        </div>

        <!-- Project 13 - Essilor Factory -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/essilor-factory.jpg" alt="Essilor Factory" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">Essilor Factory</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
          </div>
        </div>

        <!-- Project 15 - Pracharat Project -->
        <div class="group bg-neutral-50 rounded-xl overflow-hidden border border-neutral-200 hover:shadow-xl transition-all">
          <div class="aspect-video img-hover bg-neutral-200">
            <img src="/images/portfolio/pracharat-project.jpg" alt="โครงการประชารัฐ" class="w-full h-full object-cover" loading="lazy" />
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-primary-700 group-hover:text-primary-600">โครงการประชารัฐ (Pracharat Project)</h3>
            <p class="text-sm text-neutral-500 mt-1">ติดตั้งระบบท่อ</p>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <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 transition-colors">ติดต่อเรา</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 transition-colors">แอดไลน์</a>
      </div>
    </div>
  </section>
</BaseLayout>