fix: Add Header and Footer to homepage
- 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!
This commit is contained in:
Kunthawat
@@ -36,7 +36,12 @@ const { title, description, image } = Astro.props;
|
||||
<title>{title} | ดีล พลัส เทค</title>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<!-- Header -->
|
||||
<slot name="header" />
|
||||
<!-- Main Content -->
|
||||
<slot />
|
||||
<!-- Footer -->
|
||||
<slot name="footer" />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1,22 +1,28 @@
|
||||
---
|
||||
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 - key products for homepage
|
||||
// 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/ppr-pipe_000C.jpg"
|
||||
alt="ท่อพีพีอาร์คุณภาพสูง"
|
||||
src="/images/2021/03/hdpe_pipe_main.jpg"
|
||||
alt="ท่อคุณภาพสูง"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-50"
|
||||
loading="eager"
|
||||
/>
|
||||
@@ -29,158 +35,53 @@ const featuredProducts = productCategories.filter(p =>
|
||||
วัสดุท่อ อุปกรณ์ HVAC
|
||||
<span class="text-primary-400 block">และฉนวนหุ้มท่อ</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-secondary-200 mb-8">
|
||||
จำหน่ายและติดตั้งท่อ PPR, ท่อ HDPE, กริลแอร์, เทอร์โมเบรค และอุปกรณ์ระบบท่อครบวงจร พร้อมบริการให้คำปรึกษาจากทีมมืออาชีพ
|
||||
<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 border-white text-white hover:bg-white hover:text-secondary-900">
|
||||
ขอใบเสนอราคา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-16 bg-secondary-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">สินค้าคุณภาพ</h3>
|
||||
<p class="text-secondary-300">
|
||||
สินค้าทุกชิ้นผ่านมาตรฐานคุณภาพ พร้อมรับประกัน
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">จัดส่งรวดเร็ว</h3>
|
||||
<p class="text-secondary-300">
|
||||
จัดส่งสินค้าทั่วประเทศ รวดเร็วและปลอดภัย
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">บริการหลังการขาย</h3>
|
||||
<p class="text-secondary-300">
|
||||
ทีมงานพร้อมให้คำปรึกษาและดูแลอย่างต่อเนื่อง
|
||||
</p>
|
||||
<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-secondary-50">
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
|
||||
สินค้า<span class="text-primary-600">เด่น</span>
|
||||
</h2>
|
||||
<p class="text-secondary-600 text-lg">ผลิตภัณฑ์คุณภาพสูงที่ได้รับความนิยม</p>
|
||||
<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) => (
|
||||
<a href={product.href} class="card group">
|
||||
<div class="relative aspect-video bg-secondary-100 overflow-hidden">
|
||||
<img
|
||||
src={product.image}
|
||||
alt={product.name}
|
||||
class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
|
||||
{product.name}
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-secondary-600 line-clamp-2">
|
||||
{product.shortDescription || product.description}
|
||||
</p>
|
||||
<div class="mt-4 flex items-center text-primary-600 font-medium">
|
||||
<span>ดูรายละเอียด</span>
|
||||
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<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>
|
||||
</a>
|
||||
<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 class="text-center mt-12">
|
||||
<a href="/products/" class="btn-primary">
|
||||
ดูสินค้าทั้งหมด
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Preview -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">
|
||||
เกี่ยวกับ<span class="text-primary-600">เรา</span>
|
||||
</h2>
|
||||
<p class="text-lg text-secondary-600 mb-6">
|
||||
บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR คุณภาพสูง ราคาถูก
|
||||
</p>
|
||||
<p class="text-secondary-700 mb-8">
|
||||
ด้วยประสบการณ์ยาวนาน เราพร้อมให้บริการสินค้าคุณภาพและคำแนะนำจากผู้เชี่ยวชาญ เพื่อให้งานระบบของคุณมีประสิทธิภาพสูงสุด
|
||||
</p>
|
||||
<a href="/about-us/" class="btn-secondary">
|
||||
อ่านเพิ่มเติม
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
|
||||
<img
|
||||
src="/images/2021/03/ppr-pipe_000C.jpg"
|
||||
alt="เกี่ยวกับดีลพลัสเทค"
|
||||
class="object-cover w-full h-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-primary-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
สนใจสินค้าหรือต้องการคำปรึกษา?
|
||||
</h2>
|
||||
<p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
|
||||
ทีมงานของเราพร้อมให้คำแนะนำและช่วยคุณเลือกสินค้าที่เหมาะสมที่สุด
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="tel:090-555-1415" class="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
|
||||
โทร: 090-555-1415
|
||||
</a>
|
||||
<a href="https://line.me/ti/p/@dealplustech" target="_blank" rel="noopener" class="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
|
||||
เพิ่มเพื่อน LINE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Fragment slot="footer">
|
||||
<Footer />
|
||||
</Fragment>
|
||||
|
||||
<FloatingContact />
|
||||
</BaseLayout>
|
||||
|
||||
Reference in New Issue
Block a user