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>
|
<title>{title} | ดีล พลัส เทค</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="flex flex-col min-h-screen">
|
<body class="flex flex-col min-h-screen">
|
||||||
|
<!-- Header -->
|
||||||
|
<slot name="header" />
|
||||||
|
<!-- Main Content -->
|
||||||
<slot />
|
<slot />
|
||||||
|
<!-- Footer -->
|
||||||
|
<slot name="footer" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@@ -1,22 +1,28 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
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 FloatingContact from '../components/FloatingContact.astro';
|
||||||
import { productCategories } from '../data/site-config';
|
import { productCategories } from '../data/site-config';
|
||||||
|
|
||||||
// Featured products - key products for homepage
|
// Featured products
|
||||||
const featuredProducts = productCategories.filter(p =>
|
const featuredProducts = productCategories.filter(p =>
|
||||||
['ppr-elephant', 'hdpe', 'poloplast', 'syler', 'xylent'].includes(p.id)
|
['ppr-elephant', 'hdpe', 'poloplast', 'syler', 'xylent'].includes(p.id)
|
||||||
).slice(0, 6);
|
).slice(0, 6);
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="หน้าแรก" description="บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบท่อและ HVAC">
|
<BaseLayout title="หน้าแรก" description="บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบท่อและ HVAC">
|
||||||
|
<Fragment slot="header">
|
||||||
|
<Header />
|
||||||
|
</Fragment>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<section class="relative h-[70vh] min-h-[500px] bg-secondary-900">
|
<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" />
|
<div class="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
|
||||||
<img
|
<img
|
||||||
src="/images/2021/03/ppr-pipe_000C.jpg"
|
src="/images/2021/03/hdpe_pipe_main.jpg"
|
||||||
alt="ท่อพีพีอาร์คุณภาพสูง"
|
alt="ท่อคุณภาพสูง"
|
||||||
class="absolute inset-0 w-full h-full object-cover opacity-50"
|
class="absolute inset-0 w-full h-full object-cover opacity-50"
|
||||||
loading="eager"
|
loading="eager"
|
||||||
/>
|
/>
|
||||||
@@ -29,158 +35,53 @@ const featuredProducts = productCategories.filter(p =>
|
|||||||
วัสดุท่อ อุปกรณ์ HVAC
|
วัสดุท่อ อุปกรณ์ HVAC
|
||||||
<span class="text-primary-400 block">และฉนวนหุ้มท่อ</span>
|
<span class="text-primary-400 block">และฉนวนหุ้มท่อ</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-lg md:text-xl text-secondary-200 mb-8">
|
<p class="text-lg md:text-xl text-white mb-8">
|
||||||
จำหน่ายและติดตั้งท่อ PPR, ท่อ HDPE, กริลแอร์, เทอร์โมเบรค และอุปกรณ์ระบบท่อครบวงจร พร้อมบริการให้คำปรึกษาจากทีมมืออาชีพ
|
จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อเหล็ก และอุปกรณ์ระบบท่อคุณภาพสูง
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex flex-wrap gap-4">
|
||||||
<a href="/products/" class="btn-primary">
|
<a href="/products/" class="btn-primary">ดูสินค้าทั้งหมด</a>
|
||||||
ดูสินค้าทั้งหมด
|
<a href="/contact-us/" class="btn-outline">ติดต่อเรา</a>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Featured Products -->
|
<!-- Featured Products -->
|
||||||
<section class="py-16 bg-secondary-50">
|
<section class="py-16 bg-white">
|
||||||
<div class="container mx-auto px-4">
|
<div class="container mx-auto px-4">
|
||||||
<div class="text-center mb-12">
|
<div class="text-center mb-12">
|
||||||
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
|
<h2 class="section-title">สินค้าแนะนำ</h2>
|
||||||
สินค้า<span class="text-primary-600">เด่น</span>
|
<p class="section-subtitle">คุณภาพมาตรฐานสากล ราคาแข่งขันได้</p>
|
||||||
</h2>
|
|
||||||
<p class="text-secondary-600 text-lg">ผลิตภัณฑ์คุณภาพสูงที่ได้รับความนิยม</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
{featuredProducts.map((product) => (
|
{featuredProducts.map((product) => (
|
||||||
<a href={product.href} class="card group">
|
<div class="card">
|
||||||
<div class="relative aspect-video bg-secondary-100 overflow-hidden">
|
<a href={`/products/${product.slug}/`} class="block">
|
||||||
<img
|
<div class="aspect-video bg-secondary-100 flex items-center justify-center p-8">
|
||||||
src={product.image}
|
<img
|
||||||
alt={product.name}
|
src="/images/2021/03/hdpe001.jpg"
|
||||||
class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
|
alt={product.name}
|
||||||
loading="lazy"
|
class="max-h-full max-w-full object-contain"
|
||||||
/>
|
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>
|
</div>
|
||||||
</div>
|
<div class="p-6">
|
||||||
</a>
|
<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>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<Fragment slot="footer">
|
||||||
|
<Footer />
|
||||||
|
</Fragment>
|
||||||
|
|
||||||
<FloatingContact />
|
<FloatingContact />
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|||||||
Reference in New Issue
Block a user