Part 1: Source code - Astro project structure and components
This commit is contained in:
Kunthawat Greethong
208
src/pages/index.astro
Normal file
208
src/pages/index.astro
Normal file
@@ -0,0 +1,208 @@
|
||||
---
|
||||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="ดีล พลัส เทค - ระบบน้ำคุณภาพสูง ราคาโรงงาน" description="ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำคุณภาพสูง ราคาโรงงาน ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ และอุปกรณ์โรงงานคุณภาพ">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-700 via-primary-600 to-primary-500 text-white overflow-hidden">
|
||||
<!-- Animated Background Orbs -->
|
||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-24 -right-24 w-[500px] h-[500px] bg-accent-400/40 rounded-full blur-sm animate-orb-1"></div>
|
||||
<div class="absolute -bottom-24 -left-24 w-[450px] h-[450px] bg-primary-300/40 rounded-full blur-sm animate-orb-2"></div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary-400/20 rounded-full blur-sm animate-orb-3"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative z-10">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-4">
|
||||
<span class="inline-block px-4 py-1 bg-white/20 rounded-full text-sm font-medium">
|
||||
ระบบน้ำคุณภาพสูง ราคาโรงงาน
|
||||
</span>
|
||||
<h1 class="text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight">
|
||||
ระบบน้ำคุณภาพสูง<br/>
|
||||
<span class="text-accent-400">ราคาโรงงาน</span>
|
||||
</h1>
|
||||
<p class="text-lg text-primary-100 max-w-xl">
|
||||
ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ อุปกรณ์ปรับอากาศ และฉนวนหุ้มท่อสำหรับโรงงานและบ้านเรือน
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a
|
||||
href="/all-products"
|
||||
class="relative z-10 inline-flex items-center justify-center gap-2 bg-accent-500 hover:bg-accent-600 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all hover:shadow-lg hover:-translate-y-0.5"
|
||||
>
|
||||
ดูสินค้าทั้งหมด
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="/contact-us"
|
||||
class="relative z-10 inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white py-4 px-8 rounded-xl font-semibold text-lg border border-white/30 transition-all"
|
||||
>
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Product Cards -->
|
||||
<div class="relative h-96 lg:h-[500px]">
|
||||
<!-- Card 1 - PPR Pipe (smallest) -->
|
||||
<div class="absolute top-8 right-12 w-36 lg:w-44 rounded-2xl shadow-2xl overflow-hidden animate-float">
|
||||
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- Card 2 - Thermobreak (2nd biggest) -->
|
||||
<div class="absolute top-20 left-8 w-44 lg:w-56 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-1">
|
||||
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="เทอร์โมเบรค" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<!-- Card 3 - Grilles (biggest, center) -->
|
||||
<div class="absolute top-32 left-1/2 -translate-x-1/2 w-56 lg:w-72 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-2">
|
||||
<img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์" class="w-full h-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Featured Products -->
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-4">สินค้าแนะนำ</h2>
|
||||
<p class="text-neutral-600 max-w-2xl mx-auto">สินค้าคุณภาพสูงจากแบรนด์ชั้นนำ ที่ได้รับความไว้วางใจจากลูกค้าทั่วประเทศ</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8 stagger-container">
|
||||
<!-- Product 1 -->
|
||||
<a href="/ท่อ-ppr-thai-ppr" class="group bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all">
|
||||
<div class="aspect-square img-hover">
|
||||
<img
|
||||
src="/images/products-cropped/ppr-pipe_000C.jpg"
|
||||
alt="ท่อ PPR ไทยพีพีอาร์"
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-primary-700 group-hover:text-primary-600">ท่อ PPR ไทยพีพีอาร์</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ท่อน้ำดื่มคุณภาพสูง ทนความร้อน ทนแรงดัน</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product 2 -->
|
||||
<a href="/grilles" class="group bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all">
|
||||
<div class="aspect-square img-hover">
|
||||
<img
|
||||
src="/images/products-cropped/grilles_000C.jpg"
|
||||
alt="กริลแอร์"
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-primary-700 group-hover:text-primary-600">กริลแอร์</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">อุปกรณ์ปรับอากาศ ระบายอากาศคุณภาพสูง</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Product 3 -->
|
||||
<a href="/เทอร์โมเบรค-thermobreak" class="group bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all">
|
||||
<div class="aspect-square img-hover">
|
||||
<img
|
||||
src="/images/thermobreak/thermobreak-solarblock.png"
|
||||
alt="เทอร์โมเบรค ฉนวนหุ้มท่อ"
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-primary-700 group-hover:text-primary-600">เทอร์โมเบรค ฉนวนหุ้มท่อ</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ฉนวนกันความร้อน ประหยัดพลังงาน</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trust Badges -->
|
||||
<section class="py-16 lg:py-20 bg-neutral-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
<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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-primary-700">รับรองคุณภาพ</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">มาตรฐาน ม.อ.ก.</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
<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="font-semibold text-primary-700">จัดส่งรวดเร็ว</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ภายใน 1-3 วัน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
<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="font-semibold text-primary-700">ราคาโรงงาน</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ตรงจากผู้ผลิต</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-full mb-4">
|
||||
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364a4.5 4.5 0 006.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-primary-700">บริการด้วยใจ</h3>
|
||||
<p class="text-neutral-500 text-sm mt-1">ให้คำปรึกษาฟรี</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 lg:py-20 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-3xl lg:text-4xl font-bold mb-4">ต้องการสอบถามราคา?</h2>
|
||||
<p class="text-lg 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="inline-flex items-center justify-center gap-2 bg-white text-primary-700 py-4 px-8 rounded-xl font-semibold text-lg hover:bg-primary-50 transition-all"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
090-555-1415
|
||||
</a>
|
||||
<a
|
||||
href="https://line.me/ti/p/~JPPSELECTION"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="inline-flex items-center justify-center gap-2 bg-accent-500 hover:bg-accent-600 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||||
</svg>
|
||||
แอดไลน์
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user