♻️ Restructure: Move Astro to repository root
BREAKING CHANGE: Astro project is now at repository root - Removed dealplustech-astro subdirectory - Moved all Astro files to root - Updated PostCSS config to .cjs - Removed old Next.js files ✅ 11 pages built successfully ✅ Cookie consent banner included ✅ Privacy/Terms links in footer ✅ Ready for Easypanel deployment (no root dir needed) Migration path: - Old structure: /dealplustech-astro/ - New structure: / (root)
This commit is contained in:
Kunthawat Greethong
270
src/pages/services/index.astro
Normal file
270
src/pages/services/index.astro
Normal file
@@ -0,0 +1,270 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import FloatingContact from '../../components/FloatingContact.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="บริการของเรา" description="บริการครบวงจร จำหน่ายวัสดุท่อ ให้คำปรึกษา ออกแบบระบบ และติดตั้ง">
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-[50vh] min-h-[400px] 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/hdpe-pipe_000C.jpg"
|
||||
alt="บริการของเรา"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-40"
|
||||
loading="eager"
|
||||
/>
|
||||
<div class="relative z-20 container mx-auto px-4 h-full flex items-center">
|
||||
<div class="max-w-2xl">
|
||||
<span class="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
|
||||
บริการครบวงจร
|
||||
</span>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
|
||||
บริการ<span class="text-primary-400">ของเรา</span>
|
||||
</h1>
|
||||
<p class="text-xl text-secondary-200">
|
||||
ตั้งแต่การให้คำปรึกษา ออกแบบ จัดส่ง จนถึงติดตั้ง เราพร้อมดูแลโครงการของคุณครบวงจร
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Grid -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Service 1 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
จำหน่ายวัสดุท่อ
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร สินค้าคุณภาพ ราคาแข่งขันได้
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 2 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
ให้คำปรึกษา
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
ทีมงานมืออาชีพพร้อมให้คำปรึกษาเกี่ยวกับการเลือกวัสดุท่อที่เหมาะสมกับโครงการของคุณ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 3 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
ออกแบบระบบ
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
บริการออกแบบระบบท่อน้ำ ระบบดับเพลิง และระบบปรับอากาศ โดยวิศวกรผู้เชี่ยวชาญ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 4 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
ติดตั้งระบบ
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
ทีมช่างผู้เชี่ยวชาญติดตั้งระบบท่อครบวงจร พร้อมรับประกันงาน
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 5 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
จัดส่งสินค้า
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
บริการจัดส่งสินค้าทั่วประเทศ รวดเร็ว ปลอดภัย มีประกันความเสียหาย
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service 6 -->
|
||||
<div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors">
|
||||
<svg class="w-8 h-8" 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-secondary-900 mb-3 group-hover:text-white transition-colors">
|
||||
บริการหลังการขาย
|
||||
</h3>
|
||||
<p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
|
||||
ทีมงานพร้อมให้การดูแลและบริการซ่อมบำรุงหลังการขายตลอดอายุการใช้งาน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section class="py-20 bg-secondary-900">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
ขั้นตอน<span class="text-primary-400">การทำงาน</span>
|
||||
</h2>
|
||||
<p class="text-secondary-300 text-lg max-w-2xl mx-auto">
|
||||
เราให้ความสำคัญกับทุกขั้นตอน เพื่อให้ลูกค้าได้รับบริการที่ดีที่สุด
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Step 1 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">01</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">ปรึกษา</h3>
|
||||
<p class="text-secondary-400">ติดต่อเราเพื่อปรึกษาเกี่ยวกับความต้องการของโครงการ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">02</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">ออกแบบ</h3>
|
||||
<p class="text-secondary-400">ทีมวิศวกรออกแบบระบบให้เหมาะสมกับการใช้งาน</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">03</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">เสนอราคา</h3>
|
||||
<p class="text-secondary-400">เสนอราคาสินค้าและบริการอย่างโปร่งใส</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="relative">
|
||||
<div class="text-center">
|
||||
<span class="text-6xl font-bold text-primary-600/30">04</span>
|
||||
<h3 class="text-xl font-bold text-white mt-4 mb-2">ติดตั้ง</h3>
|
||||
<p class="text-secondary-400">ทีมช่างติดตั้งโดยมืออาชีพตรงตามกำหนด</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-20 bg-secondary-50">
|
||||
<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>
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">ประสบการณ์กว่า 10 ปี</h3>
|
||||
<p class="text-secondary-600">เชี่ยวชาญด้านระบบท่อและอุปกรณ์ครบวงจร</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">สินค้าคุณภาพ</h3>
|
||||
<p class="text-secondary-600">สินค้าผ่านมาตรฐาน มอก. / FM / UL พร้อมรับประกัน</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">ทีมงานมืออาชีพ</h3>
|
||||
<p class="text-secondary-600">วิศวกรและช่างผู้เชี่ยวชาญพร้อมให้คำปรึกษา</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-secondary-900 mb-1">บริการรวดเร็ว</h3>
|
||||
<p class="text-secondary-600">จัดส่งสินค้าทั่วประเทศ ตรงตามกำหนด</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative aspect-video bg-secondary-200 rounded-2xl overflow-hidden">
|
||||
<img
|
||||
src="/images/2021/03/hdpe-welding_000C-1.jpg"
|
||||
alt="ทีมงานมืออาชีพ"
|
||||
class="object-cover w-full h-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-20 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-primary-100 text-lg mb-8 max-w-">
|
||||
ต2xl mx-autoิดต่อเราวันนี้เพื่อรับคำปรึกษาและใบเสนอราคาฟรี
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/contact-us/" class="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
|
||||
ติดต่อเรา
|
||||
</a>
|
||||
<a href="tel:090-555-1415" class="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
|
||||
โทร: 090-555-1415
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<FloatingContact />
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user