Part 1: Source code - Astro project structure and components
This commit is contained in:
Kunthawat Greethong
98
src/pages/all-products.astro
Normal file
98
src/pages/all-products.astro
Normal file
@@ -0,0 +1,98 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
|
||||
const products = [
|
||||
{ name: "ท่อ PPR ไทยพีพีอาร์", 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: "ท่อ UPVC" },
|
||||
{ name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-cropped/syler-pipe-cold-water.jpg", category: "ท่อ UPVC" },
|
||||
{ name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อ UPVC" },
|
||||
{ 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: "เครื่องเชื่อม" },
|
||||
{ name: "วาล์ว Valve", href: "/วาล์ว-valve", image: "/images/products-cropped/valve_000C.jpg", category: "วาล์ว" },
|
||||
{ name: "DURGO วาล์วเติมอากาศ", href: "/durgo-avvs", image: "/images/products-cropped/durgo_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: "ปั๊มและระบบน้ำ" },
|
||||
{ name: "อุปกรณ์ปรับอากาศ", href: "/อุปกรณ์ปรับอากาศ", image: "/images/products-raw/ball-jet/main-ball-jet.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
||||
{ name: "กริลแอร์", href: "/grilles", image: "/images/products-cropped/grilles_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
|
||||
{ name: "อุปกรณ์ดับเพลิง", href: "/อุปกรณ์ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
|
||||
{ name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "ฉนวนและรั้ว" },
|
||||
{ name: "ฉนวนหุ้มท่อ", href: "/ฉนวนหุ้มท่อ", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนและรั้ว" },
|
||||
{ name: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนและรั้ว" },
|
||||
{ name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/products-raw/tevada/TEVADA_001-987x1024.png", category: "ฉนวนและรั้ว" },
|
||||
{ name: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน", image: "/images/products-cropped/vineman_000C.jpg", category: "ฉนวนและรั้ว" },
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ name: "ท่อพีพีอาร์", count: 2 },
|
||||
{ name: "ท่อ UPVC", count: 2 },
|
||||
{ name: "เครื่องเชื่อม", count: 4 },
|
||||
{ name: "วาล์ว", count: 2 },
|
||||
{ name: "ปั๊มและระบบน้ำ", count: 2 },
|
||||
{ name: "อุปกรณ์ปรับอากาศ", count: 2 },
|
||||
{ name: "ฉนวนและรั้ว", count: 6 },
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout title="สินค้าทั้งหมด - ดีล พลัส เทค" description="สินค้าระบบน้ำคุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ">
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-4xl lg:text-5xl font-bold mb-4">สินค้าทั้งหมด</h1>
|
||||
<p class="text-lg text-primary-100">สินค้าระบบน้ำคุณภาพสูง {products.length} รายการ</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Categories -->
|
||||
<section class="py-8 bg-white border-b border-neutral-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="#all" class="px-4 py-2 bg-primary-600 text-white rounded-full text-sm font-medium">ทั้งหมด ({products.length})</a>
|
||||
{categories.map(cat => (
|
||||
<a href={`#${cat.name}`} class="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} ({cat.count})
|
||||
</a>
|
||||
))}
|
||||
</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">
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 stagger-container">
|
||||
{products.map(product => (
|
||||
<a href={product.href} class="group bg-white rounded-xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all">
|
||||
<div class="aspect-square img-hover bg-neutral-100">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
class="w-full h-full object-cover"
|
||||
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">
|
||||
<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>
|
||||
Reference in New Issue
Block a user