Auto-sync from website-creator
This commit is contained in:
Kunthawat
@@ -4,14 +4,35 @@ import Header from '@/components/common/Header.astro';
|
||||
import Footer from '@/components/common/Footer.astro';
|
||||
|
||||
const categories = [
|
||||
{ name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr', image: '/images/products/ppr-pipe/foot-ppr1.jpg' },
|
||||
{ name: 'ท่อ HDPE', slug: '/ท่อhdpe', image: '/images/products/hdpe-pipe/hdpe001.jpg' },
|
||||
{ name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc', image: '/images/products/pvc-pipe/pvc-pipe_000C.jpg' },
|
||||
{ name: 'ท่อ UPVC', slug: '/ท่อ-upvc', image: '/images/products/upvc-pipe/upvc-pipe_000C.jpg' },
|
||||
{ name: 'วาล์ว', slug: '/วาล์ว-valve', image: '/images/products/valve/valve_000C.jpg' },
|
||||
{ name: 'ปั๊มน้ำ', slug: '/water-pump', image: '/images/products/water-pump/water-pump_000C.jpg' },
|
||||
{ name: 'ระบบรั้ว', slug: '/ระบบรั้ว', image: '/images/products/fence/vineman_000C.jpg' },
|
||||
{ name: 'เครื่องเชื่อมท่อ', slug: '/เครื่องเชื่อมท่อ-pipe-coupling-machine', image: '/images/products/pipe-coupling/pipe-coupling-machine_000.jpg' },
|
||||
{ name: 'ท่อ PPR', slug: '/ท่อ-ppr-thai-ppr', image: '/images/products-cropped/foot-ppr1.jpg' },
|
||||
{ name: 'ท่อ HDPE', slug: '/ท่อhdpe', image: '/images/products-cropped/hdpe001.jpg' },
|
||||
{ name: 'ท่อ UPVC', slug: '/ท่อ-upvc', image: '/images/products-cropped/upvc-pipe_000C.jpg' },
|
||||
{ name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc', image: '/images/products-cropped/pvc-pipe_000C.jpg' },
|
||||
{ name: 'ท่อไซเลอร์', slug: '/ท่อไซเลอร์', image: '/images/products-cropped/SYLER01.jpg' },
|
||||
{ name: 'ท่อระบายน้ำ 3 ชั้น', slug: '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท', image: '/images/products-cropped/XYLENT_001.png' },
|
||||
{ name: 'เครื่องเชื่อมท่อ', slug: '/เครื่องเชื่อมท่อ-pipe-coupling-machine', image: '/images/products-cropped/pipe-coupling-machine_000.jpg' },
|
||||
{ name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe', image: '/images/products-cropped/HDPE-Welding2.jpg' },
|
||||
{ name: 'กรู๊ฟท่อ', slug: '/groove-coupling', image: '/images/products-cropped/mech_000C.jpg' },
|
||||
{ name: 'Pipe Coupling', slug: '/pipe-coupling', image: '/images/products-cropped/MECH_001.jpg' },
|
||||
{ name: 'แฮงเกอร์ แคล้ม โบลท์', slug: '/แฮงเกอร์-แคล้ม-โบลท์-แหว', image: '/images/products-cropped/Hanger-Clamp-Bolt_000.jpg' },
|
||||
{ name: 'วาล์ว', slug: '/วาล์ว-valve', image: '/images/products-cropped/valve_000C.jpg' },
|
||||
{ name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs', image: '/images/products-cropped/durgo_000C.jpg' },
|
||||
{ name: 'ปั๊มน้ำ', slug: '/water-pump', image: '/images/products-cropped/water-pump_000C.jpg' },
|
||||
{ name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet', image: '/images/products-cropped/Eye-Ball.jpg' },
|
||||
{ name: 'กริลแอร์', slug: '/grilles', image: '/images/products-cropped/grilles_000C.jpg' },
|
||||
{ name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง', image: '/images/products-cropped/extinguishers_000C.jpg' },
|
||||
{ name: 'Realflex', slug: '/realflex', image: '/images/products-cropped/realflex_000C.jpg' },
|
||||
{ name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation', image: '/images/products-cropped/Thermobreak_-LS_0.png' },
|
||||
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak', image: '/images/products-cropped/Thermobreak_-LS_0.png' },
|
||||
{ name: 'ระบบกรองน้ำ', slug: '/water-treatment', image: '/images/products-cropped/water-treatment_000C.jpg' },
|
||||
{ name: 'ระบบรั้ว', slug: '/ระบบรั้ว', image: '/images/products-cropped/vineman_000C.jpg' },
|
||||
{ name: 'รั้วเทวดา', slug: '/รั้วเทวดา', image: '/images/products-cropped/Banner-TDV2.jpg' },
|
||||
];
|
||||
|
||||
const featuredProducts = [
|
||||
{ name: 'ท่อ PPR ตราช้าง', slug: '/ท่อ-ppr-thai-ppr', image: '/images/products-cropped/ppr-pipe_000C.jpg', description: 'ท่อ PPR คุณภาพสูง มาตรฐาน สำหรับงานประปาและอุตสาหกรรม' },
|
||||
{ name: 'กริลแอร์พลาสติก', slug: '/grilles', image: '/images/products-cropped/grilles_000C.jpg', description: 'กริลแอร์พลาสติก ระบายอากาศดี ทนทาน เหมาะสำหรับงานระบบปรับอากาศ' },
|
||||
{ name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak', image: '/images/products-cropped/Thermobreak_-LS_0.png', description: 'ฉนวนหุ้มท่อกันความร้อน ประหยัดพลังงาน' },
|
||||
];
|
||||
---
|
||||
|
||||
@@ -21,62 +42,99 @@ const categories = [
|
||||
<!-- Hero Section with PPR Product Images -->
|
||||
<section class="relative bg-gradient-to-br from-green-50 via-white to-accent-50 section overflow-hidden">
|
||||
<div class="container-custom">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="grid md:grid-cols-2 gap-8 md: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">
|
||||
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-secondary-900 mb-4 md:mb-6 leading-tight">
|
||||
ผู้เชี่ยวชาญระบบน้ำ<br/>
|
||||
<span class="text-green-600">คุณภาพสูง ราคาโรงงาน</span>
|
||||
</h1>
|
||||
<p class="text-xl text-secondary-600 mb-8 leading-relaxed">
|
||||
<p class="text-base sm:text-lg md:text-xl text-secondary-600 mb-6 md:mb-8 leading-relaxed">
|
||||
บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="/pipe" class="bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-lg">ดูสินค้าทั้งหมด</a>
|
||||
<a href="/contact-us" class="bg-white text-green-600 px-8 py-4 rounded-xl border-2 border-green-500 font-medium transition-all hover:shadow-lg active:scale-95 text-lg">ติดต่อเรา</a>
|
||||
<div class="flex flex-wrap gap-3 md:gap-4">
|
||||
<a href="/pipe" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 md:px-8 md:py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">ดูสินค้าทั้งหมด</a>
|
||||
<a href="/contact-us" class="bg-white text-green-600 px-5 py-3 md:px-8 md:py-4 rounded-xl border-2 border-green-500 font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">ติดต่อเรา</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-8 mt-12">
|
||||
<div class="flex items-center sm:space-x-8 space-x-4 sm:mt-12 mt-8">
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-green-600">10+</div>
|
||||
<div class="text-secondary-600 text-base">ปีประสบการณ์</div>
|
||||
<div class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">10+</div>
|
||||
<div class="text-secondary-600 text-xs sm:text-base">ปีประสบการณ์</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-green-600">1000+</div>
|
||||
<div class="text-secondary-600 text-base">โปรเจคต์</div>
|
||||
<div class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">1000+</div>
|
||||
<div class="text-secondary-600 text-xs sm:text-base">โปรเจคต์</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold text-green-600">500+</div>
|
||||
<div class="text-secondary-600 text-base">สินค้า</div>
|
||||
<div class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">500+</div>
|
||||
<div class="text-secondary-600 text-xs sm:text-base">สินค้า</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative animate-slide-up">
|
||||
<div class="relative animate-slide-up mt-6 md:mt-0">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-accent-500/20 rounded-3xl blur-3xl"></div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<img src="/images/products/ppr-pipe/foot-ppr1.jpg" alt="PPR Pipe" class="w-full h-auto rounded-2xl shadow-xl" />
|
||||
<img src="/images/products/ppr-pipe/TPPR55.jpg" alt="PPR Fittings" class="w-full h-auto rounded-2xl shadow-xl" />
|
||||
<img src="/images/products/ppr-pipe/ppr0001.jpg" alt="PPR System" class="w-full h-auto rounded-2xl shadow-xl" />
|
||||
<img src="/images/products/ppr-pipe/ppr-pipe_000C.jpg" alt="PPR Installation" class="w-full h-auto rounded-2xl shadow-xl" />
|
||||
<div class="grid grid-cols-3 gap-2 md:gap-4">
|
||||
<div class="col-span-2 row-span-2">
|
||||
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="PPR Pipe" class="w-full h-full object-cover rounded-2xl shadow-xl" />
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<img src="/images/products-cropped/grilles_000C.jpg" alt="Grilles" class="w-full h-full object-cover rounded-2xl shadow-xl" />
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<img src="/images/products-cropped/Thermobreak_-LS_0.png" alt="Thermobreak" class="w-full h-full object-cover rounded-2xl shadow-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Products -->
|
||||
<section class="section bg-gradient-to-br from-green-50 via-white to-accent-50">
|
||||
<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">
|
||||
{featuredProducts.map(product => (
|
||||
<a href={product.slug} class="card group overflow-hidden">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src={product.image} alt={product.name} class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500" onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6">
|
||||
<h3 class="text-2xl font-bold text-white mb-2">{product.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-secondary-600">{product.description}</p>
|
||||
<span class="inline-flex items-center mt-4 text-green-600 font-medium group-hover:text-green-700">
|
||||
ดูรายละเอียด
|
||||
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Product Categories -->
|
||||
<section class="section bg-white">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="section-title">หมวดหมู่สินค้ายอดนิยม</h2>
|
||||
<h2 class="section-title">หมวดหมู่สินค้าทั้งหมด</h2>
|
||||
<p class="section-subtitle mx-auto">เราจำหน่ายสินค้าระบบน้ำคุณภาพสูง ครบวงจร</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
|
||||
{categories.map(cat => (
|
||||
<a href={cat.slug} class="product-card group">
|
||||
<div class="product-card-image">
|
||||
<img src={cat.image} alt={cat.name} onerror="this.src='/images/logo/dealplustech-logo.png'" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-xl font-bold text-secondary-900 group-hover:text-green-600 transition-colors">{cat.name}</h3>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">{cat.name}</h3>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user