fe442790ab
## homepage (index.astro) - Drop '500+ รายการสินค้า' from stat badges and rebuild the trust-badges section to show only 15+ ปีประสบการณ์, 400+ ลูกค้าทั่วประเทศ, 98% ลูกค้าพึงพอใจ — bigger numbers (text-5xl/6xl), no icons, counter animation - Add 'ทำไมเลือกเรา' section (4 cards: ส่งฟรี กทม./ปริมณฑล, Lead time 1-3 วัน, ราคาโรงงาน, ทีมช่างแนะนำ) — no icons, primary/accent border hover - Add 'หมวดสินค้า' section (8 tiles: 7 categories + 'สินค้าทั้งหมด') placed after 'สินค้าแนะนำ' — each tile is a real product photo with dark gradient overlay and a CTA link to /all-products?filter=<id> - Reorder: Hero → ทำไมเลือกเรา → สินค้าแนะนำ → หมวดสินค้า → Stats → บทความล่าสุด → CTA ## all-products (filter from URL) - Script now reads ?filter=<id> on load and applies it without rewriting the URL, then on click updates both the filter and the URL via history.replaceState so the back/forward buttons work ## footer (BaseLayout.astro) - Replace productLinks with the curated 6 popular products: ไทยพีพีอาร์, เทอร์โมเบรค, กริลแอร์, หัวจ่ายแอร์ Ball Jet, ท่อ HDPE, ท่อ Syler ## about-us - Stats: 10+/1000+/500+ replaced with 15+ / 400+ + counter animation, bigger numbers, rounded-3xl + shadow (matches home) - Why Choose Us: rebuilt with the same 4 cards + same style as home's 'ทำไมเลือกเรา' (no icons, pill header, larger h2 + subtitle)
185 lines
14 KiB
Plaintext
185 lines
14 KiB
Plaintext
---
|
||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||
---
|
||
|
||
<BaseLayout title="เกี่ยวกับเรา - ดีล พลัส เทค" description="ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำคุณภาพสูง ราคาโรงงาน มีประสบการณ์กว่า 10 ปี">
|
||
<!-- Hero -->
|
||
<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">
|
||
<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">
|
||
<div class="max-w-3xl">
|
||
<h1 class="text-4xl lg:text-5xl font-bold mb-6">เกี่ยวกับเรา</h1>
|
||
<p class="text-lg text-primary-100">
|
||
ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ อุปกรณ์ปรับอากาศ และฉนวนหุ้มท่อสำหรับโรงงานและบ้านเรือน
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Company Info -->
|
||
<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 lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h2 class="text-3xl font-bold text-primary-700 mb-6">บริษัท ดีล พลัส เทค จำกัด</h2>
|
||
<div class="space-y-4 text-neutral-600">
|
||
<p>
|
||
ดีล พลัส เทค จำกัด เป็นผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ด้วยประสบการณ์กว่า 10 ปีในอุตสาหกรรม ทำให้เราเข้าใจความต้องการของลูกค้าเป็นอย่างดี
|
||
</p>
|
||
<p>
|
||
เราเป็นตัวแทนจำหน่ายและจัดจำหน่ายสินค้าระบบน้ำคุณภาพสูงจากแบรนด์ชั้นนำทั่วโลก อาทิ ท่อ PPR ไทยพีพีอาร์ ท่อ PPR ตราช้าง ท่อ HDPE ท่อ UPVC อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ และอุปกรณ์ปรับอากาศ
|
||
</p>
|
||
<p>
|
||
สินค้าของเราได้รับมาตรฐาน มอก. และได้รับความไว้วางใจจากโครงการทั่วประเทศ ทั้งโรงงานอุตสาหกรรม อาคารพาณิชย์ โรงแรม โรงพยาบาล และบ้านเรือน
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-neutral-50 rounded-2xl p-8 border border-neutral-200">
|
||
<h3 class="text-xl font-semibold text-primary-700 mb-6">สินค้าหลัก</h3>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-primary-600" 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>
|
||
</div>
|
||
<span class="text-neutral-700">ท่อ PPR</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-primary-600" 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>
|
||
</div>
|
||
<span class="text-neutral-700">ท่อ HDPE</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-primary-600" 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>
|
||
</div>
|
||
<span class="text-neutral-700">เครื่องเชื่อมท่อ</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-primary-600" 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>
|
||
</div>
|
||
<span class="text-neutral-700">วาล์ว</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-primary-600" 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>
|
||
</div>
|
||
<span class="text-neutral-700">ปั๊มน้ำ</span>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-primary-600" 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>
|
||
</div>
|
||
<span class="text-neutral-700">ฉนวนท่อ</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats -->
|
||
<section class="py-16 bg-gradient-to-br from-neutral-50 to-primary-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8" data-animate-stagger>
|
||
<div class="text-center p-8 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||
<h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
|
||
<span data-counter="15">0</span>+
|
||
</h3>
|
||
<p class="text-neutral-600 font-medium">ปีประสบการณ์</p>
|
||
</div>
|
||
<div class="text-center p-8 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||
<h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
|
||
<span data-counter="400">0</span>+
|
||
</h3>
|
||
<p class="text-neutral-600 font-medium">ลูกค้าทั่วประเทศ</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Choose Us -->
|
||
<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="text-center mb-12">
|
||
<span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">จุดเด่นของเรา</span>
|
||
<h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">ทำไมช่าง/ผู้รับเหมาเลือกเรา</h2>
|
||
<p class="text-neutral-600 max-w-2xl mx-auto text-lg">ครบทั้งสินค้า บริการ และความเร็ว — เพื่อให้งานของคุณเดินหน้าไม่สะดุด</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ส่งฟรี กทม./ปริมณฑล</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">ส่งถึงไซต์งานฟรี ไม่ต้องวิ่งรับเอง ลดเวลา ลดต้นทุนขนส่ง</p>
|
||
</div>
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">Lead time 1–3 วัน</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">สั่งวันนี้ ได้ของไว — ไม่ต้องรอ 1-2 สัปดาห์เหมือนเจ้าอื่น</p>
|
||
</div>
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ราคาโรงงาน</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">ตรงจากผู้ผลิต ไม่ผ่านตัวกลาง คุณภาพเดียวกันในราคาที่ต่ำกว่า</p>
|
||
</div>
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ทีมช่างแนะนำ</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">ส่งสเปกมา ช่วยเทียบยี่ห้อ ขนาด PN ฟรี — ไม่ต้องเดาว่าท่อตัวไหนใช่</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||
<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>
|