Initial commit - Deal Plus Tech Astro Website
✅ 53 pages (34 products + corporate) ✅ All logo images ✅ Nginx Dockerfile (production-ready) ✅ PDPA compliant (cookie consent) ✅ Modern design with Kanit font ✅ Line + Phone buttons on products Built: 2026-03-13
This commit is contained in:
Kunthawat Greethong
153
src/pages/index.astro
Normal file
153
src/pages/index.astro
Normal file
@@ -0,0 +1,153 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
import Header from '@/components/common/Header.astro';
|
||||
import Footer from '@/components/common/Footer.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="หน้าแรก">
|
||||
<Header slot="header" />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative gradient-bg section overflow-hidden">
|
||||
<div class="container-custom">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="animate-fade-in">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-secondary-900 mb-6 leading-tight">
|
||||
ผู้เชี่ยวชาญระบบน้ำ<br/>
|
||||
<span class="gradient-text">คุณภาพสูง ราคาโรงงาน</span>
|
||||
</h1>
|
||||
<p class="text-xl text-secondary-600 mb-8 leading-relaxed">
|
||||
บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="/product" class="btn-primary text-lg px-8 py-4">ดูสินค้าทั้งหมด</a>
|
||||
<a href="/contact-us" class="btn-secondary text-lg px-8 py-4">ติดต่อเรา</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-8 mt-12">
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary-600">10+</div>
|
||||
<div class="text-secondary-600 text-base">ปีประสบการณ์</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary-600">1000+</div>
|
||||
<div class="text-secondary-600 text-base">โปรเจคต์</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-primary-600">500+</div>
|
||||
<div class="text-secondary-600 text-base">สินค้า</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative animate-slide-up">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-primary-500/20 to-accent-500/20 rounded-3xl blur-3xl"></div>
|
||||
<img src="/images/logo/logox2.png" alt="Deal Plus Tech Products" class="relative w-full h-auto rounded-3xl shadow-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Categories -->
|
||||
<section class="section bg-white">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="section-title">หมวดหมู่สินค้ายอดนิยม</h2>
|
||||
<p class="section-subtitle mx-auto">เราจำหน่ายสินค้าระบบน้ำคุณภาพสูง ครบวงจร</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
<a href="/ท่อ-ppr-thai-ppr" class="product-card group">
|
||||
<div class="product-card-image">
|
||||
<img src="/images/products/ppr-pipe/ppr0001.jpg" alt="ท่อ PPR" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ PPR</h3>
|
||||
<p class="text-secondary-600 text-base mt-2">ท่อพีพีอาร์ ตราช้าง</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/ท่อhdpe" class="product-card group">
|
||||
<div class="product-card-image">
|
||||
<img src="/images/products/hdpe-pipe/hdpe001.jpg" alt="ท่อ HDPE" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ HDPE</h3>
|
||||
<p class="text-secondary-600 text-base mt-2">ท่อโพลีเอทิลีน</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/ท่อและข้อต่อpvc" class="product-card group">
|
||||
<div class="product-card-image">
|
||||
<img src="/images/products/pvc-pipe/pvc001.jpg" alt="ท่อ PVC" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ PVC</h3>
|
||||
<p class="text-secondary-600 text-base mt-2">ท่อและข้อต่อพีวีซี</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/วาล์ว-valve" class="product-card group">
|
||||
<div class="product-card-image">
|
||||
<img src="/images/products/valve/valve001.jpg" alt="วาล์ว" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">วาล์ว</h3>
|
||||
<p class="text-secondary-600 text-base mt-2">วาล์วน้ำทุกประเภท</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="section gradient-bg">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="section-title">ทำไมต้องเลือกเรา</h2>
|
||||
<p class="section-subtitle mx-auto">ความมุ่งมั่นของเราต่อคุณภาพและบริการ</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="card p-8 text-center animate-on-scroll">
|
||||
<div class="w-16 h-16 bg-primary-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-secondary-900 mb-4">คุณภาพสูง</h3>
|
||||
<p class="text-secondary-600 text-base">สินค้าคุณภาพมาตรฐาน มั่นใจได้ในความทนทาน</p>
|
||||
</div>
|
||||
<div class="card p-8 text-center animate-on-scroll">
|
||||
<div class="w-16 h-16 bg-primary-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-secondary-900 mb-4">ราคาโรงงาน</h3>
|
||||
<p class="text-secondary-600 text-base">ราคาแข่งขันได้ คุ้มค่าต่อการลงทุน</p>
|
||||
</div>
|
||||
<div class="card p-8 text-center animate-on-scroll">
|
||||
<div class="w-16 h-16 bg-primary-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-secondary-900 mb-4">จัดส่งรวดเร็ว</h3>
|
||||
<p class="text-secondary-600 text-base">จัดส่งทันใจ ส่งฟรี กทม. และปริมณฑล</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer slot="footer" />
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
// Intersection Observer for scroll animations
|
||||
const observer = new IntersectionObserver(
|
||||
entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
|
||||
</script>
|
||||
Reference in New Issue
Block a user