c99c43fd61
- Import Header and Footer components - Add to BaseLayout slots - Update hero image to use existing hdpe_pipe_main.jpg - Fix featured products grid Now pages will have header and footer!
88 lines
3.7 KiB
Plaintext
88 lines
3.7 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
import FloatingContact from '../components/FloatingContact.astro';
|
|
import { productCategories } from '../data/site-config';
|
|
|
|
// Featured products
|
|
const featuredProducts = productCategories.filter(p =>
|
|
['ppr-elephant', 'hdpe', 'poloplast', 'syler', 'xylent'].includes(p.id)
|
|
).slice(0, 6);
|
|
---
|
|
|
|
<BaseLayout title="หน้าแรก" description="บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบท่อและ HVAC">
|
|
<Fragment slot="header">
|
|
<Header />
|
|
</Fragment>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative h-[70vh] min-h-[500px] bg-secondary-900">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
|
|
<img
|
|
src="/images/2021/03/hdpe_pipe_main.jpg"
|
|
alt="ท่อคุณภาพสูง"
|
|
class="absolute inset-0 w-full h-full object-cover opacity-50"
|
|
loading="eager"
|
|
/>
|
|
<div class="relative z-20 container mx-auto px-4 h-full flex items-center">
|
|
<div class="max-w-2xl">
|
|
<span class="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
|
|
ผู้เชี่ยวชาญด้านระบบท่อและ HVAC
|
|
</span>
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
|
วัสดุท่อ อุปกรณ์ HVAC
|
|
<span class="text-primary-400 block">และฉนวนหุ้มท่อ</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-white mb-8">
|
|
จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อเหล็ก และอุปกรณ์ระบบท่อคุณภาพสูง
|
|
</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<a href="/products/" class="btn-primary">ดูสินค้าทั้งหมด</a>
|
|
<a href="/contact-us/" class="btn-outline">ติดต่อเรา</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Products -->
|
|
<section class="py-16 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-12">
|
|
<h2 class="section-title">สินค้าแนะนำ</h2>
|
|
<p class="section-subtitle">คุณภาพมาตรฐานสากล ราคาแข่งขันได้</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{featuredProducts.map((product) => (
|
|
<div class="card">
|
|
<a href={`/products/${product.slug}/`} class="block">
|
|
<div class="aspect-video bg-secondary-100 flex items-center justify-center p-8">
|
|
<img
|
|
src="/images/2021/03/hdpe001.jpg"
|
|
alt={product.name}
|
|
class="max-h-full max-w-full object-contain"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-bold text-secondary-900 mb-2">{product.name}</h3>
|
|
<p class="text-secondary-600 text-sm mb-4 line-clamp-2">{product.description}</p>
|
|
<span class="btn-outline text-sm">ดูรายละเอียด</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<Fragment slot="footer">
|
|
<Footer />
|
|
</Fragment>
|
|
|
|
<FloatingContact />
|
|
</BaseLayout>
|