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)
204 lines
12 KiB
Plaintext
204 lines
12 KiB
Plaintext
---
|
|
import BaseLayout from '@/layouts/BaseLayout.astro';
|
|
|
|
// Categories match the main menu in BaseLayout.astro (header dropdown order)
|
|
const products = [
|
|
// ท่อพีพีอาร์ (6 items - matches main menu)
|
|
{ name: "ไทยพีพีอาร์", href: "/ท่อ-ppr-thai-ppr", image: "/images/products-cropped/ppr-pipe_000C.jpg", category: "ท่อพีพีอาร์" },
|
|
{ name: "ท่อ PPR ตราช้าง", href: "/ท่อ-ppr-scg", image: "/images/products-cropped/ppr-scg.jpg", category: "ท่อพีพีอาร์" },
|
|
{ name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-cropped/hdpe001.png", category: "ท่อพีพีอาร์" },
|
|
{ name: "ท่อ UPVC", href: "/ท่อ-upvc", image: "/images/products-cropped/upvc-pipe_000C.jpg", category: "ท่อพีพีอาร์" },
|
|
{ name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-cropped/syler-pipe-cold-water.jpg", category: "ท่อพีพีอาร์" },
|
|
{ name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อพีพีอาร์" },
|
|
|
|
// เครื่องเชื่อมท่อ (4 items)
|
|
{ name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/HDPE-welding-crop.jpg", category: "เครื่องเชื่อมท่อ" },
|
|
{ name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr-welding-machine-main.jpg", category: "เครื่องเชื่อมท่อ" },
|
|
{ name: "Pipe Coupling", href: "/pipe-coupling", image: "/images/pipe-coupling/BG-SMC02.png", category: "เครื่องเชื่อมท่อ" },
|
|
{ name: "เม็กกรู๊ฟ คับปลิ้ง", href: "/เม็กกรู๊ฟ-คับปลิ้ง", image: "/images/products-misc/MECH_001.jpg", category: "เครื่องเชื่อมท่อ" },
|
|
|
|
// ระบบน้ำ (3 items)
|
|
{ name: "วาล์ว Valve", href: "/วาล์ว-valve", image: "/images/products-cropped/valve_000C.jpg", category: "ระบบน้ำ" },
|
|
{ name: "ปั๊มน้ำ Water Pump", href: "/water-pump", image: "/images/products-cropped/water-pump_000C.jpg", category: "ระบบน้ำ" },
|
|
{ name: "ระบบกรองน้ำ", href: "/water-treatment", image: "/images/products-cropped/water-treatment_000C.jpg", category: "ระบบน้ำ" },
|
|
|
|
// อุปกรณ์ปรับอากาศ (3 items)
|
|
{ name: "กริลแอร์", href: "/grilles", image: "/images/products-cropped/grilles_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
|
{ name: "DURGO วาล์วเติมอากาศ", href: "/durgo-avvs", image: "/images/products-cropped/durgo_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
|
{ name: "หัวจ่าย Ball Jet", href: "/หัวจ่าย-ball-jet", image: "/images/ball-jet/ball-jet-main-hd.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
|
|
|
// อุปกรณ์ดับเพลิง (2 items)
|
|
{ name: "ตู้ดับเพลิง", href: "/ตู้ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
|
|
{ name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
|
|
|
|
// ฉนวนหุ้มท่อ (4 items)
|
|
{ name: "Armaflex", href: "/armflex", image: "/images/armflex/armaflex-sheet-roll.jpg", category: "ฉนวนหุ้มท่อ" },
|
|
{ name: "Aeroflex", href: "/aeroflex", image: "/images/aeroflex/aerocel-d-al-real.jpg", category: "ฉนวนหุ้มท่อ" },
|
|
{ name: "Maxflex", href: "/maxflex", image: "/images/maxflex/maxflex-fsk-foil.jpg", category: "ฉนวนหุ้มท่อ" },
|
|
{ name: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนหุ้มท่อ" },
|
|
|
|
// ระบบรั้ว (2 items)
|
|
{ name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg", category: "ระบบรั้ว" },
|
|
{ name: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน", image: "/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg", category: "ระบบรั้ว" },
|
|
];
|
|
|
|
// Categories match main menu in BaseLayout.astro
|
|
const categories = [
|
|
{ name: "ท่อพีพีอาร์", id: "ppr" },
|
|
{ name: "เครื่องเชื่อมท่อ", id: "welding" },
|
|
{ name: "ระบบน้ำ", id: "water" },
|
|
{ name: "อุปกรณ์ปรับอากาศ", id: "ac" },
|
|
{ name: "อุปกรณ์ดับเพลิง", id: "fire" },
|
|
{ name: "ฉนวนหุ้มท่อ", id: "insulation" },
|
|
{ name: "ระบบรั้ว", id: "fence" },
|
|
];
|
|
|
|
// Compute counts dynamically
|
|
const categoryCounts = {};
|
|
products.forEach(p => {
|
|
categoryCounts[p.category] = (categoryCounts[p.category] || 0) + 1;
|
|
});
|
|
|
|
// Map category name to filter id
|
|
const categoryIdMap = Object.fromEntries(categories.map(c => [c.name, c.id]));
|
|
---
|
|
|
|
<BaseLayout title="สินค้าทั้งหมด - ดีล พลัส เทค" description="สินค้าระบบน้ำคุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ">
|
|
<!-- 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>
|
|
<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>
|
|
<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">สินค้าระบบน้ำคุณภาพสูง {products.length} รายการ</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Filter Buttons -->
|
|
<section class="py-8 bg-white border-b border-neutral-200 sticky top-16 z-30">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="flex flex-wrap gap-3" id="filter-buttons">
|
|
<button data-filter="all" class="filter-btn active px-4 py-2 bg-primary-600 text-white rounded-full text-sm font-medium transition-colors">
|
|
ทั้งหมด ({products.length})
|
|
</button>
|
|
{categories.map(cat => (
|
|
<button data-filter={cat.id} class="filter-btn px-4 py-2 bg-neutral-100 text-neutral-700 hover:bg-primary-100 hover:text-primary-700 rounded-full text-sm font-medium transition-colors">
|
|
{cat.name} ({categoryCounts[cat.name] || 0})
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products Grid -->
|
|
<section class="py-16 lg:py-24 bg-neutral-50">
|
|
<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 xl:grid-cols-4 gap-6" id="products-grid">
|
|
{products.map(product => (
|
|
<a
|
|
href={product.href}
|
|
class="product-card group bg-white rounded-xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all"
|
|
data-category={categoryIdMap[product.category]}
|
|
>
|
|
<div class="aspect-square img-hover bg-neutral-100 overflow-hidden">
|
|
<img
|
|
src={product.image}
|
|
alt={product.name}
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div class="p-4">
|
|
<span class="text-xs text-primary-600 font-medium">{product.category}</span>
|
|
<h3 class="font-semibold text-neutral-800 group-hover:text-primary-600 mt-1">{product.name}</h3>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</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>
|
|
|
|
<script>
|
|
function applyFilter(filter, updateUrl = false) {
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
const productCards = document.querySelectorAll('.product-card');
|
|
|
|
// Update active state on buttons
|
|
filterBtns.forEach(b => {
|
|
b.classList.remove('bg-primary-600', 'text-white', 'active');
|
|
b.classList.add('bg-neutral-100', 'text-neutral-700');
|
|
if (b.getAttribute('data-filter') === filter) {
|
|
b.classList.add('bg-primary-600', 'text-white', 'active');
|
|
b.classList.remove('bg-neutral-100', 'text-neutral-700');
|
|
}
|
|
});
|
|
|
|
// Filter products
|
|
productCards.forEach((card, index) => {
|
|
if (filter === 'all' || card.getAttribute('data-category') === filter) {
|
|
card.style.display = 'block';
|
|
card.style.animationDelay = `${index * 50}ms`;
|
|
card.classList.add('animate-fade-in');
|
|
} else {
|
|
card.style.display = 'none';
|
|
card.classList.remove('animate-fade-in');
|
|
}
|
|
});
|
|
|
|
if (updateUrl) {
|
|
const url = new URL(window.location.href);
|
|
if (filter === 'all') {
|
|
url.searchParams.delete('filter');
|
|
} else {
|
|
url.searchParams.set('filter', filter);
|
|
}
|
|
window.history.replaceState({}, '', url);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Read ?filter=<id> from URL on page load
|
|
const params = new URLSearchParams(window.location.search);
|
|
const initialFilter = params.get('filter') || 'all';
|
|
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
|
filterBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const filter = btn.getAttribute('data-filter');
|
|
applyFilter(filter, true);
|
|
});
|
|
});
|
|
|
|
// Apply initial filter from URL (no URL update on load)
|
|
applyFilter(initialFilter, false);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.4s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(15px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
</BaseLayout> |