Phase 8: Grilles redesign - 2-column → 1-column alternating backgrounds

- Replaced 2-column grid with 1-column alternating bg design
- Technical specs, size guide, materials, FAQ as stacked sections
- Installation tips and gallery integrated into prose flow
- bg-gray-50 and bg-white alternating per design spec
This commit is contained in:
OpenCode Agent
2026-04-05 21:07:12 +07:00
parent a13e9b947d
commit b93dda19de
10 changed files with 333 additions and 677 deletions

View File

@@ -20,7 +20,6 @@ const categories = [
subcategories: [ subcategories: [
{ name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' }, { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
{ name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' }, { name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' },
{ name: 'กรู๊ฟท่อ', slug: '/groove-coupling' },
{ name: 'Pipe Coupling', slug: '/pipe-coupling' }, { name: 'Pipe Coupling', slug: '/pipe-coupling' },
{ name: 'Dukelarrsen', slug: '/dukelarrsen' }, { name: 'Dukelarrsen', slug: '/dukelarrsen' },
{ name: 'เม็กกรู๊ฟ', slug: '/เม็กกรู๊ฟ-คับปลิ้ง' }, { name: 'เม็กกรู๊ฟ', slug: '/เม็กกรู๊ฟ-คับปลิ้ง' },

View File

@@ -15,7 +15,6 @@ const productImages: Record<string, string> = {
'/ท่อพีพีอาร์': '/images/products-cropped/ppr-pipe_000C.jpg', '/ท่อพีพีอาร์': '/images/products-cropped/ppr-pipe_000C.jpg',
'/เครื่องเชื่อม-hdpe': '/images/HDPE-welding-crop.jpg', '/เครื่องเชื่อม-hdpe': '/images/HDPE-welding-crop.jpg',
'/เครื่องเชื่อมท่อพีพีอา': '/images/products-misc/ppr-welding-machine-main.jpg', '/เครื่องเชื่อมท่อพีพีอา': '/images/products-misc/ppr-welding-machine-main.jpg',
'/groove-coupling': '/images/products-cropped/mech_000C.jpg',
'/pipe-coupling': '/images/pipe-coupling/BG-SMC02.png', '/pipe-coupling': '/images/pipe-coupling/BG-SMC02.png',
'/dukelarrsen': '/images/dukelarrsen/dukelarrsen-43.jpg', '/dukelarrsen': '/images/dukelarrsen/dukelarrsen-43.jpg',
'/เม็กกรู๊ฟ-คับปลิ้ง': '/images/products-misc/MECH_001.jpg', '/เม็กกรู๊ฟ-คับปลิ้ง': '/images/products-misc/MECH_001.jpg',
@@ -55,7 +54,6 @@ const productCategories = [
products: [ products: [
{ name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' }, { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe' },
{ name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' }, { name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา' },
{ name: 'กรู๊ฟท่อ', slug: '/groove-coupling' },
{ name: 'Pipe Coupling', slug: '/pipe-coupling' }, { name: 'Pipe Coupling', slug: '/pipe-coupling' },
{ name: 'Dukelarrsen', slug: '/dukelarrsen' }, { name: 'Dukelarrsen', slug: '/dukelarrsen' },
{ name: 'เม็กกรู๊ฟ', slug: '/เม็กกรู๊ฟ-คับปลิ้ง' }, { name: 'เม็กกรู๊ฟ', slug: '/เม็กกรู๊ฟ-คับปลิ้ง' },

View File

@@ -44,7 +44,7 @@ import Footer from '@/components/common/Footer.astro';
</p> </p>
<div class="flex flex-wrap gap-4 mb-8"> <div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2"> <a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท</span> <span>แชท</span>
<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> <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> </a>
@@ -1299,7 +1299,7 @@ import Footer from '@/components/common/Footer.astro';
ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ
</p> </p>
<div class="flex flex-wrap justify-center gap-4"> <div class="flex flex-wrap justify-center gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2"> <a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท</span> <span>แชท</span>
<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> <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> </a>
@@ -1308,7 +1308,7 @@ import Footer from '@/components/common/Footer.astro';
</a> </a>
</div> </div>
<p class="text-base text-white/70 mt-8"> <p class="text-base text-white/70 mt-8">
<strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com <strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> JPPSELECTION &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
</p> </p>
</div> </div>
</section> </section>

View File

@@ -40,7 +40,7 @@ import Footer from '@/components/common/Footer.astro';
</span> </span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">กริลแอร์ (Grilles air)</h1> <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">กริลแอร์ (Grilles air)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed"> <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายกริลแอร์พลาสติก (Grilles air plastic)คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล จำหน่ายกริลแอร์พลาสติก (ABS) และอลูมิเนียม คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p> </p>
<div class="flex flex-wrap gap-4 mb-8"> <div class="flex flex-wrap gap-4 mb-8">
@@ -91,7 +91,7 @@ import Footer from '@/components/common/Footer.astro';
<div class="container-custom"> <div class="container-custom">
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2> <h2 class="text-xl font-bold text-secondary-900 mb-8">รายละเอียดสินค้า</h2>
<div class="prose prose-lg max-w-none"> <div class="prose prose-lg max-w-none space-y-8">
<p class="text-lg text-secondary-700 leading-relaxed"> <p class="text-lg text-secondary-700 leading-relaxed">
หลายคนอาจเรียกอุปกรณ์นี้ว่า "ตะแกรงแอร์" หรือ "หน้ากากช่องลม" แต่ชื่อที่ถูกต้องและเป็นทางการคือ <strong>หน้ากากแอร์ (Air Grille and Diffuser)</strong> อุปกรณ์นี้ทำหน้าที่เป็นจุดเชื่อมต่อระหว่างระบบท่อส่งลมเย็นกับพื้นที่ใช้งาน หน้ากากแอร์ไม่ได้เป็นเพียงแค่ส่วนตกแต่ง แต่ยังมีบทบาทสำคัญในการกระจายลมเย็นให้ทั่วถึงและมีประสิทธิภาพ หลายคนอาจเรียกอุปกรณ์นี้ว่า "ตะแกรงแอร์" หรือ "หน้ากากช่องลม" แต่ชื่อที่ถูกต้องและเป็นทางการคือ <strong>หน้ากากแอร์ (Air Grille and Diffuser)</strong> อุปกรณ์นี้ทำหน้าที่เป็นจุดเชื่อมต่อระหว่างระบบท่อส่งลมเย็นกับพื้นที่ใช้งาน หน้ากากแอร์ไม่ได้เป็นเพียงแค่ส่วนตกแต่ง แต่ยังมีบทบาทสำคัญในการกระจายลมเย็นให้ทั่วถึงและมีประสิทธิภาพ
</p> </p>
@@ -194,156 +194,146 @@ import Footer from '@/components/common/Footer.astro';
</p> </p>
</div> </div>
</div> </div>
</div>
<!-- Product Info Grid: specs → size-guide → materials → faq --> <!-- ข้อมูลจำเพาะทางเทคนิค -->
<div class="grid lg:grid-cols-2 gap-6 mt-8"> <div class="bg-gray-50 -mx-4 px-4 py-6 rounded-lg">
<!-- Technical Specifications Table --> <h2 class="text-xl font-bold text-secondary-900 mb-4">ข้อมูลจำเพาะทางเทคนิค</h2>
<div class="bg-gray-50 rounded-lg p-6"> <div class="overflow-x-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-4">ข้อมูลจำเพาะทางเทคนิค</h2> <table class="w-full border-collapse bg-white rounded-lg shadow-sm text-sm">
<div class="overflow-x-auto"> <thead>
<table class="w-full border-collapse bg-white rounded-lg shadow-sm text-sm"> <tr class="bg-primary-600 text-white">
<thead> <th class="px-3 py-2 text-left">ประเภท</th>
<tr class="bg-primary-600 text-white"> <th class="px-3 py-2 text-center">ขนาด</th>
<th class="px-3 py-2 text-left">ประเภท</th> <th class="px-3 py-2 text-center">CFM</th>
<th class="px-3 py-2 text-center">ขนาด</th> </tr>
<th class="px-3 py-2 text-center">CFM</th> </thead>
</tr> <tbody class="divide-y text-xs">
</thead> <tr><td colspan="3" class="px-3 py-1.5 bg-gray-100 font-semibold">หน้ากากลมส่ง</td></tr>
<tbody class="divide-y text-xs"> <tr><td class="px-3 py-1.5">Square Diffuser</td><td class="px-3 py-1.5 text-center">6x6 - 24x24"</td><td class="px-3 py-1.5 text-center">200-800</td></tr>
<tr><td colspan="3" class="px-3 py-1.5 bg-gray-100 font-semibold">หน้ากากลมส่ง</td></tr> <tr><td class="px-3 py-1.5">Linear Slot</td><td class="px-3 py-1.5 text-center">12" - 48"</td><td class="px-3 py-1.5 text-center">150-600</td></tr>
<tr><td class="px-3 py-1.5">Square Diffuser</td><td class="px-3 py-1.5 text-center">6x6 - 24x24"</td><td class="px-3 py-1.5 text-center">200-800</td></tr> <tr><td class="px-3 py-1.5">Jet Diffuser</td><td class="px-3 py-1.5 text-center">8" - 12"</td><td class="px-3 py-1.5 text-center">300-1200</td></tr>
<tr><td class="px-3 py-1.5">Linear Slot</td><td class="px-3 py-1.5 text-center">12" - 48"</td><td class="px-3 py-1.5 text-center">150-600</td></tr> <tr><td colspan="3" class="px-3 py-1.5 bg-gray-100 font-semibold">หน้ากากลมกลับ</td></tr>
<tr><td class="px-3 py-1.5">Jet Diffuser</td><td class="px-3 py-1.5 text-center">8" - 12"</td><td class="px-3 py-1.5 text-center">300-1200</td></tr> <tr><td class="px-3 py-1.5">Standard</td><td class="px-3 py-1.5 text-center">10x10 - 36x36"</td><td class="px-3 py-1.5 text-center">300-1500</td></tr>
<tr><td colspan="3" class="px-3 py-1.5 bg-gray-100 font-semibold">หน้ากากลมกลับ</td></tr> </tbody>
<tr><td class="px-3 py-1.5">Standard</td><td class="px-3 py-1.5 text-center">10x10 - 36x36"</td><td class="px-3 py-1.5 text-center">300-1500</td></tr> </table>
</tbody> </div>
</table>
</div> </div>
</div>
<!-- Size Selection Guide --> <!-- วิธีเลือกขนาด -->
<div class="bg-gray-50 rounded-lg p-6"> <div class="bg-white px-4 py-6">
<h2 class="text-xl font-bold text-secondary-900 mb-4">วิธีเลือกขนาด</h2> <h2 class="text-xl font-bold text-secondary-900 mb-4">วิธีเลือกขนาด</h2>
<div class="bg-white p-4 rounded-lg mb-4"> <div class="bg-blue-50 p-4 rounded-lg mb-4">
<p class="font-mono text-secondary-900 text-sm">CFM ÷ 2 = พื้นที่ (ตร.นิ้ว)</p> <p class="font-mono text-secondary-900 text-sm">CFM ÷ 2 = พื้นที่ (ตร.นิ้ว)</p>
<p class="text-xs text-secondary-600 mt-1">ตัวอย่าง: 400 CFM ÷ 2 = 200 ตร.นิ้ว → 14x14</p> <p class="text-xs text-secondary-600 mt-1">ตัวอย่าง: 400 CFM ÷ 2 = 200 ตร.นิ้ว → 14x14</p>
</div>
<div class="grid grid-cols-3 gap-2 text-sm">
<div><strong>6x6"</strong> - ห้องน้ำ</div>
<div><strong>8x8"</strong> - ห้องนอน</div>
<div><strong>10x10"</strong> - ห้องประชุมเล็ก</div>
<div><strong>12x12"</strong> - ห้องรับแขก</div>
<div><strong>14x14"</strong> - ห้องประชุมใหญ่</div>
<div><strong>24x24"</strong> - พื้นที่ใหญ่</div>
</div>
</div> </div>
<div class="grid grid-cols-2 gap-2 text-xs">
<div><strong>6x6"</strong> - ห้องน้ำ</div>
<div><strong>8x8"</strong> - ห้องนอน</div>
<div><strong>10x10"</strong> - ห้องประชุมเล็ก</div>
<div><strong>12x12"</strong> - ห้องรับแขก</div>
<div><strong>14x14"</strong> - ห้องประชุมใหญ่</div>
<div><strong>24x24"</strong> - พื้นที่ใหญ่</div>
</div>
</div>
<!-- Material Comparison --> <!-- เปรียบเทียบวัสดุ -->
<div class="bg-gray-50 rounded-lg p-6"> <div class="bg-gray-50 -mx-4 px-4 py-6 rounded-lg">
<h2 class="text-xl font-bold text-secondary-900 mb-4">เปรียบเทียบวัสดุ</h2> <h2 class="text-xl font-bold text-secondary-900 mb-4">เปรียบเทียบวัสดุ</h2>
<div class="grid md:grid-cols-2 gap-4"> <div class="grid md:grid-cols-2 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm"> <div class="bg-white p-4 rounded-lg shadow-sm">
<h3 class="font-bold text-secondary-900 mb-2 flex items-center gap-2"> <h3 class="font-bold text-secondary-900 mb-2 flex items-center gap-2">
<span class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> <span class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z"/></svg> <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4z"/></svg>
</span> </span>
ABS Plastic ABS Plastic
</h3> </h3>
<ul class="space-y-1 text-xs text-secondary-700"> <ul class="space-y-1 text-xs text-secondary-700">
<li class="flex items-start gap-1"><span class="text-green-500">✓</span> ราคาประหยัด</li> <li class="flex items-start gap-1"><span class="text-green-500">✓</span> ราคาประหยัด</li>
<li class="flex items-start gap-1"><span class="text-green-500">✓</span> น้ำหนักเบา</li> <li class="flex items-start gap-1"><span class="text-green-500">✓</span> น้ำหนักเบา</li>
<li class="flex items-start gap-1 bg-green-50 rounded px-1 -mx-1 border border-green-200"><span class="text-green-600 font-bold">★</span> <strong class="text-green-700">ไม่เกิดหยดน้ำ</strong></li> <li class="flex items-start gap-1 bg-green-50 rounded px-1 -mx-1 border border-green-200"><span class="text-green-600 font-bold">★</span> <strong class="text-green-700">ไม่เกิดหยดน้ำ</strong></li>
</ul> </ul>
</div> </div>
<div class="bg-white p-4 rounded-lg shadow-sm"> <div class="bg-white p-4 rounded-lg shadow-sm">
<h3 class="font-bold text-secondary-900 mb-2 flex items-center gap-2"> <h3 class="font-bold text-secondary-900 mb-2 flex items-center gap-2">
<span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center"> <span class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
<svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg> <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
</span> </span>
Aluminum Aluminum
</h3> </h3>
<ul class="space-y-1 text-xs text-secondary-700"> <ul class="space-y-1 text-xs text-secondary-700">
<li class="flex items-start gap-1"><span class="text-green-500">✓</span> ทนทานต่อการกัดกร่อน</li> <li class="flex items-start gap-1"><span class="text-green-500">✓</span> ทนทานต่อการกัดกร่อน</li>
<li class="flex items-start gap-1"><span class="text-green-500">✓</span> ดีไซน์หลากหลาย</li> <li class="flex items-start gap-1"><span class="text-green-500">✓</span> ดีไซน์หลากหลาย</li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div>
<!-- FAQ Section --> <!-- คำถามที่พบบ่อย -->
<div class="bg-gray-50 rounded-lg p-6"> <div class="bg-white px-4 py-6">
<h2 class="text-xl font-bold text-secondary-900 mb-4">คำถามที่พบบ่อย</h2> <h2 class="text-xl font-bold text-secondary-900 mb-4">คำถามที่พบบ่อย</h2>
<div class="space-y-3 text-xs"> <div class="space-y-3 text-sm">
<div class="bg-white rounded-lg p-3"> <div class="bg-gray-50 rounded-lg p-3">
<h3 class="font-semibold text-secondary-900 mb-1">ABS vs Aluminum?</h3> <h3 class="font-semibold text-secondary-900 mb-1">ABS vs Aluminum?</h3>
<p class="text-secondary-700">ABS ราคาประหยัด เหมาะบ้านพัก ส่วน Aluminum ทนทาน เหมาะอาคารสำนักงาน</p> <p class="text-secondary-700">ABS ราคาประหยัด เหมาะบ้านพัก ส่วน Aluminum ทนทาน เหมาะอาคารสำนักงาน</p>
</div> </div>
<div class="bg-primary-50 rounded-lg p-3 border border-primary-200"> <div class="bg-primary-50 rounded-lg p-3 border border-primary-200">
<h3 class="font-semibold text-primary-800 mb-1">ทำไม ABS ไม่เกิดหยดน้ำ?</h3> <h3 class="font-semibold text-primary-800 mb-1">ทำไม ABS ไม่เกิดหยดน้ำ?</h3>
<p class="text-primary-700">พื้นผิวเรียบลื่น ไม่มีจุดให้น้ำควบแน่นเกาะ ต่างจาก Aluminum ที่เย็นกว่าจุดน้ำควบแน่น</p> <p class="text-primary-700">พื้นผิวเรียบลื่น ไม่มีจุดให้น้ำควบแน่นเกาะ ต่างจาก Aluminum ที่เย็นกว่าจุดน้ำควบแน่น</p>
</div> </div>
<div class="bg-white rounded-lg p-3"> <div class="bg-gray-50 rounded-lg p-3">
<h3 class="font-semibold text-secondary-900 mb-1">สั่งขนาดพิเศษได้ไหม?</h3> <h3 class="font-semibold text-secondary-900 mb-1">สั่งขนาดพิเศษได้ไหม?</h3>
<p class="text-secondary-700">ได้ รับสั่งทำตามความต้องการ ติดต่อเราเพื่อสอบถามราคา</p> <p class="text-secondary-700">ได้ รับสั่งทำตามความต้องการ ติดต่อเราเพื่อสอบถามราคา</p>
</div>
</div>
</div>
<!-- ข้อแนะนำการติดตั้ง -->
<div class="bg-gray-50 -mx-4 px-4 py-6 rounded-lg">
<h2 class="text-xl font-bold text-secondary-900 mb-4">ข้อแนะนำการติดตั้ง</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-semibold text-secondary-800 mb-4">ขั้นตอนการติดตั้ง</h3>
<ol class="space-y-3">
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">1</span><span class="text-secondary-700">วัดและทำเครื่องหมายตำแหน่งที่จะติดตั้ง</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">2</span><span class="text-secondary-700">ตัดช่องเปิดตามขนาดหน้ากาก (เผื่อความกว้าง 1-2 ซม.)</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">3</span><span class="text-secondary-700">ตรวจสอบระดับให้ตรง</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">4</span><span class="text-secondary-700">ยึดกรอบหน้ากากด้วยสกรูหรือคลิปยึด</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">5</span><span class="text-secondary-700">ติดตั้งตัวหน้ากากเข้ากับกรอบ</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">6</span><span class="text-secondary-700">ปรับบานเกล็ดให้ได้ทิศทางลมที่ต้องการ</span></li>
</ol>
</div>
<div>
<h3 class="text-lg font-semibold text-secondary-800 mb-4">ข้อควรระวัง</h3>
<ul class="space-y-3">
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">อย่าติดตั้งหน้ากากใกล้ม่านบังตา or ผ้ามากเกินไป เพราะจะขวางทางลม</span></li>
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">ควรเว้นระยะห่างจากผนังอย่างน้อย 15 ซม. เพื่อให้ลมกระจายได้ดี</span></li>
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">ตรวจสอบ static pressure ของระบบก่อนเลือกขนาด</span></li>
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">อย่าใช้หน้ากากขนาดเล็กเกินไป เพราะจะทำให้ลมแรงและ шум</span></li>
</ul>
</div>
</div>
</div>
<!-- รูปภาพสินค้าเพิ่มเติม -->
<div class="bg-white px-4 py-6">
<h2 class="text-xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<img src="/images/grilles/fresh-air-hing-type.jpg" alt="Fresh Air Hing Type" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/eye-ball.jpg" alt="Eye Ball" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/perforate.jpg" alt="Perforate" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/return-air-hing-type.jpg" alt="Return Air Hing Type" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/hi-flo-jet-diffuser.jpg" alt="Hi-Flo Jet Diffuser" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/louver-2.jpg" alt="Louver 2" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/rectangular.jpg" alt="Rectangular" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/round-ceiling.jpg" alt="Round Ceiling" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/linear-bar.jpg" alt="Linear Bar" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/louver-4.jpg" alt="Louver 4" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/return-air.jpg" alt="Return Air" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/square-ceiling.jpg" alt="Square Ceiling" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div> </div>
</div> </div>
</div>
</div>
</section> </section>
<!-- Installation Tips -->
<section id="installation" class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-6">ข้อแนะนำการติดตั้ง</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-semibold text-secondary-800 mb-4">ขั้นตอนการติดตั้ง</h3>
<ol class="space-y-3">
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">1</span><span class="text-secondary-700">วัดและทำเครื่องหมายตำแหน่งที่จะติดตั้ง</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">2</span><span class="text-secondary-700">ตัดช่องเปิดตามขนาดหน้ากาก (เผื่อความกว้าง 1-2 ซม.)</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">3</span><span class="text-secondary-700">ตรวจสอบระดับให้ตรง</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">4</span><span class="text-secondary-700">ยึดกรอบหน้ากากด้วยสกรูหรือคลิปยึด</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">5</span><span class="text-secondary-700">ติดตั้งตัวหน้ากากเข้ากับกรอบ</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">6</span><span class="text-secondary-700">ปรับบานเกล็ดให้ได้ทิศทางลมที่ต้องการ</span></li>
</ol>
</div>
<div>
<h3 class="text-lg font-semibold text-secondary-800 mb-4">ข้อควรระวัง</h3>
<ul class="space-y-3">
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">อย่าติดตั้งหน้ากากใกล้ม่านบังตา or ผ้ามากเกินไป เพราะจะขวางทางลม</span></li>
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">ควรเว้นระยะห่างจากผนังอย่างน้อย 15 ซม. เพื่อให้ลมกระจายได้ดี</span></li>
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">ตรวจสอบ static pressure ของระบบก่อนเลือกขนาด</span></li>
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">อย่าใช้หน้ากากขนาดเล็กเกินไป เพราะจะทำให้ลมแรงและ шум</span></li>
</ul>
</div>
</div>
</div>
</section>
<section class="section bg-white">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-6">รูปภาพสินค้าเพิ่มเติม</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<img src="/images/grilles/fresh-air-hing-type.jpg" alt="Fresh Air Hing Type" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/eye-ball.jpg" alt="Eye Ball" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/perforate.jpg" alt="Perforate" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/return-air-hing-type.jpg" alt="Return Air Hing Type" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/hi-flo-jet-diffuser.jpg" alt="Hi-Flo Jet Diffuser" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/louver-2.jpg" alt="Louver 2" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/rectangular.jpg" alt="Rectangular" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/round-ceiling.jpg" alt="Round Ceiling" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/linear-bar.jpg" alt="Linear Bar" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/louver-4.jpg" alt="Louver 4" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/return-air.jpg" alt="Return Air" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/grilles/square-ceiling.jpg" alt="Square Ceiling" class="w-full h-auto rounded-lg shadow-md" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
</section>
<section class="cta-gradient py-16"> <section class="cta-gradient py-16">
<div class="container-custom text-center"> <div class="container-custom text-center">
<h2 class="text-xl sm:text-2xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2> <h2 class="text-xl sm:text-2xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>

View File

@@ -1,505 +0,0 @@
---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "กรู๊ฟท่อ (Groove Coupling)",
"description": "จำหน่ายกรู๊ฟท่อ (Groove Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล",
"image": "https://dealplustech.co.th/images/products-cropped/mech_000C.jpg",
"offers": {
"@type": "Offer",
"url": "https://dealplustech.co.th/groove-coupling",
"priceCurrency": "THB",
"availability": "https://schema.org/InStock"
}
}
</script>
<BaseLayout title="กรู๊ฟท่อ (Groove Coupling)" description="จำหน่ายกรู๊ฟท่อ (Groove Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<Header slot="header" />
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="hero-gradient py-16">
<div class="container-custom">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="card-glass p-8">
<img src="/images/products-cropped/mech_000C.jpg" alt="กรู๊ฟท่อ" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" fetchpriority="high" decoding="sync" onerror="this.src='/images/logo/dealplustech-logo.png'" />
</div>
</div>
<div>
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
กรู๊ฟท่อ
</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">กรู๊ฟท่อ (Groove Coupling)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
จำหน่ายกรู๊ฟท่อ (Groove Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท</span>
<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>
<a href="tel:0905551415" class="btn-white flex items-center gap-2">
<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>
<span>090-555-1415</span>
</a>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-white mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="text-lg text-white/80">คุณภาพสูง มาตรฐานอุตสาหกรรม</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-white mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="text-lg text-white/80">ราคาโรงงาน คุ้มค่า</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-white mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="text-lg text-white/80">จัดส่งรวดเร็ว ส่งฟรี กทม. ปริมณฑล</span>
</div>
<div class="flex items-start space-x-3">
<svg class="w-6 h-6 text-white mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span class="text-lg text-white/80">รับประกันสินค้า</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product Details -->
<section class="section">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">ข้อดีของการใช้กรู๊ฟท่อ</h2>
<div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed">
<strong>กรู๊ฟท่อ</strong> ติดตั้งง่าย สะดวกรวดเร็ว ทำให้ประหยัดทั้งค่าแรงและเวลาในการติดตั้ง นอกจากนี้ยังคล่องตัวรองรับการออกแบบที่หลากหลายตามแต่สภาพหน้างาน สามารถโยกย้าย เปลี่ยนแปลงรูปแบบการติดตั้ง หรือขยายไลน์ท่อเพิ่มเติม รวมทั้งถอดทำความสะอาดและประกอบเข้าใหม่ได้โดยง่าย
</p>
<p class="text-lg text-secondary-700 leading-relaxed mt-6">
กรู๊ฟท่อสามารถรับแรงสั่นสะเทือนและแรงกดจากแผ่นดินไหวได้ดี อีกทั้งยังสามารถดูดซับเสียงได้อย่างมีประสิทธิภาพ รับแรงดันได้สูง 300 - 735 psi (การทนแรงดันจะขึ้นอยู่กับรุ่นของ Coupling ที่เลือกใช้)
</p>
<p class="text-lg text-secondary-700 leading-relaxed mt-6">
ข้อต่อกรู๊ฟมี PE เคลือบผิวด้านใน คงคุณสมบัติเด่นของท่อไซเลอร์ไว้ครบถ้วน จึงมั่นใจว่าน้ำที่ไหลผ่านจะปลอดสนิม อีกทั้งแข็งแรง ทนทาน และมีอายุการใช้งานยาวนาน
</p>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section class="section bg-gray-50">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">วิธีการติดตั้ง</h2>
<!-- Step 1: Grooved -->
<div class="mb-16">
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">1</span>
การกรู๊ฟท่อ (Grooved)
</h3>
<!-- Machine Image -->
<div class="bg-gray-50 rounded-2xl p-8 mb-8">
<div class="max-w-3xl mx-auto text-center">
<img src="/images/groove-coupling/G1.png" alt="เครื่องกรู๊ฟท่อไซเลอร์" class="w-full h-auto rounded-lg mb-6" style="max-height: 300px; object-fit: contain;" width="800" height="400" loading="lazy" decoding="async" />
<h4 class="text-xl font-bold text-secondary-900 mb-2">เครื่องกรู๊ฟท่อไซเลอร์</h4>
<p class="text-secondary-600">หมายเหตุ: การ Grooved ท่อ Syler ต้องใช้เครื่อง Grooved ของ Syler เท่านั้น</p>
</div>
</div>
<!-- Step Cards -->
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex items-center mb-4">
<span class="bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.1 - 1.3</span>
</div>
<p class="text-secondary-700 mb-4">ตั้งเครื่องกรู๊ฟ สอดท่อให้หน้าตัดท่อชนแนบกับหัวกรู๊ฟ ปรับระดับท่อที่วางพาดกับขาตั้งท่อด้วยมาตรวัดระดับน้ำ จากนั้นดึงคันโยกไฮโดริกให้หัวกดทับเนื้อท่อแล้ว จึงเปิดสวิทช์เครื่องเพื่อเริ่มทำการกรู๊ฟ</p>
<img src="/images/groove-coupling/G2.png" alt="การกรู๊ฟท่อ" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex items-center mb-4">
<span class="bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.4</span>
</div>
<p class="text-secondary-700 mb-4">เมื่อกรู๊ฟเสร็จแล้ว ให้ปิดเครื่องแล้วยกคันโยกไฮโดริกขึ้น นำสายวัดระยะร่องกรู๊ฟมาวัดร่องตามขนาดท่อที่กรู๊ฟ ทั้งนี้ระยะความลึกของร่องกรู๊ฟอนุโลมให้ขาดเกินได้ไม่เกิน 3 มิลลิเมตร</p>
<div class="grid grid-cols-2 gap-3">
<img src="/images/groove-coupling/G6.png" alt="การวัดร่องกรู๊ฟ" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G7.png" alt="ล็อคระดับปั้มไฮโดริก" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
</div>
<!-- Important Notice -->
<div class="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-6 mt-6">
<h4 class="font-bold text-amber-800 mb-2">ข้อควรระวังในการกรู๊ฟ</h4>
<p class="text-amber-700">การกรู๊ฟท่อต่อเนื่องเป็นระยะเวลานานหัวกรู๊ฟท่อจะมีความร้อนสะสม หากหัวกรู๊ฟร้อนเกินไปจะทำให้พลาสติกละลายได้ ควรพักเพื่อให้หัวกรู๊ฟเย็นลงจึงค่อยกรู๊ฟท่อต่อไป</p>
</div>
<!-- Additional Step Images -->
<div class="grid grid-cols-3 gap-4 mt-6">
<img src="/images/groove-coupling/G3.png" alt="ความร้อนสะสม" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G4.png" alt="การกรู๊ฟท่อ" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G5.png" alt="การกรู๊ฟท่อต่อ" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
<!-- Step 2: Coupling -->
<div class="mb-16">
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">2</span>
การใส่ข้อต่อคัปปิ้ง (Coupling)
</h3>
<p class="text-lg text-secondary-700 mb-8">เมื่อกรู๊ฟท่อเรียบร้อยแล้ว ให้ทำการสวมข้อต่อ Coupling ตามขั้นตอนดังนี้</p>
<!-- Coupling Steps -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.1</span>
<p class="text-secondary-700 mb-4">ทากาวเฮอร์เมสซีล 55 ที่หน้าตัดท่อเพื่อป้องกันสนิมบริเวณหน้าตัดท่อ</p>
<img src="/images/groove-coupling/G8.png" alt="ทากาวเฮอร์เมสซีล" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.2</span>
<p class="text-secondary-700 mb-4">นำ Grooved line gasket มาสวมที่ปลายท่อ เพื่อป้องกันไม่ให้น้ำที่ไหลผ่านสัมผัสหน้าตัดท่อ</p>
<img src="/images/groove-coupling/G9.png" alt="สวม Grooved line gasket" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.3</span>
<p class="text-secondary-700 mb-4">ทาน้ำยาหล่อลื่น Lubricant ให้ทั่วแหวนยาง EPDM เพื่อยืดอายุการใช้งาน</p>
<img src="/images/groove-coupling/G10.png" alt="ทาน้ำยาหล่อลื่น" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.4</span>
<p class="text-secondary-700 mb-4">นำยางที่ทา Lubricant แล้วมาสวมเข้ากับท่อก่อนจากนั้นจึงสวมเข้ากับข้อต่อ</p>
<div class="grid grid-cols-2 gap-2">
<img src="/images/groove-coupling/G11.png" alt="สวมยางเข้ากับท่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G12.png" alt="สวมเข้ากับข้อต่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm md:col-span-2">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.5</span>
<p class="text-secondary-700 mb-4">นำข้อต่อ Coupling มาประกบพร้อมขันน๊อตจนแน่น</p>
<img src="/images/groove-coupling/G13.png" alt="ขันน๊อตจนแน่น" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</div>
<!-- Torque Specifications -->
<div class="mt-16">
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">3</span>
แรงบิด (Torque) ที่ควรใช้ในการขันน๊อต
</h3>
<div class="bg-white rounded-xl p-8 shadow-sm border border-gray-200">
<p class="text-lg text-secondary-700 mb-6">
การขันน๊อตด้วยแรงบิดที่ถูกต้องเป็นสิ่งสำคัญเพื่อให้ข้อต่อกรู๊ฟประกอบติดแน่นและปลอดภัย ควรขันน๊อตให้แน่นพอประมาณ ไม่แน่นเกินไปซึ่งอาจทำให้ยางเสียหาย หรือหลวมเกินไปซึ่งอาจทำให้รั่วซึม
</p>
<div class="overflow-x-auto">
<table class="w-full rounded-lg overflow-hidden">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-4 py-3 text-center font-bold text-sm">ขนาดท่อ (นิ้ว)</th>
<th class="px-4 py-3 text-center font-bold text-sm">ขนาดน๊อต</th>
<th class="px-4 py-3 text-center font-bold text-sm">แรงบิด (Torque)</th>
<th class="px-4 py-3 text-center font-bold text-sm">หมายเหตุ</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="px-4 py-3 text-center text-secondary-700">1/2" - 2"</td>
<td class="px-4 py-3 text-center text-secondary-700">3/8" - 1/2"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">35-65 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">47-88 Nm</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50">
<td class="px-4 py-3 text-center text-secondary-700">2-1/2" - 4"</td>
<td class="px-4 py-3 text-center text-secondary-700">1/2"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">65-100 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">88-136 Nm</td>
</tr>
<tr class="border-b border-gray-100">
<td class="px-4 py-3 text-center text-secondary-700">5" - 8"</td>
<td class="px-4 py-3 text-center text-secondary-700">5/8"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">100-150 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">136-203 Nm</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50">
<td class="px-4 py-3 text-center text-secondary-700">10" - 12"</td>
<td class="px-4 py-3 text-center text-secondary-700">3/4"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">150-200 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">203-271 Nm</td>
</tr>
<tr>
<td class="px-4 py-3 text-center text-secondary-700">14" - 24"</td>
<td class="px-4 py-3 text-center text-secondary-700">7/8"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">200-300 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">271-407 Nm</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-6 mt-6">
<h4 class="font-bold text-amber-800 mb-2">ข้อควรระวังเรื่องแรงบิด</h4>
<ul class="text-amber-700 space-y-1">
<li>• ควรใช้คันทวนแรง (Torque Wrench) เพื่อให้ได้แรงบิดที่แม่นยำ</li>
<li>• ขันน๊อตสลับกันเป็นวงกลม (Cross Pattern) เพื่อให้แรงกระจายอย่างเท่าเทียม</li>
<li>• หากไม่แน่ใจควรปรึกษาผู้ผลิตหรือตัวแทนจำหน่าย</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">คำถามที่พบบ่อยเกี่ยวกับกรู๊ฟท่อ</h2>
<div class="max-w-4xl mx-auto space-y-4">
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
<h3 class="font-bold text-lg text-secondary-900 mb-3">1. กรู๊ฟท่อเหมาะกับการใช้งานประเภทใดบ้าง?</h3>
<p class="text-secondary-700 leading-relaxed">
กรู๊ฟท่อเหมาะสำหรับงานระบบดับเพลิง (Fire Protection System), ระบบปรับอากาศ HVAC, ระบบท่อส่งน้ำอุตสาหกรรม, ระบบท่อน้ำมันและก๊าซ และระบบท่อในโรงงานผลิต สามารถรองรับท่อขนาดตั้งแต่ 1/2 นิ้ว จนถึง 24 นิ้ว
</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
<h3 class="font-bold text-lg text-secondary-900 mb-3">2. จะเลือกขนาดกรู๊ฟท่ออย่างไรให้เหมาะสม?</h3>
<p class="text-secondary-700 leading-relaxed">
การเลือกขนาดกรู๊ฟท่อต้องพิจารณาจากขนาดเส้นผ่านศูนย์กลางภายนอก (OD) ของท่อเป็นหลัก โดยต้องตรวจสอบให้แน่ใจว่าร่องกรู๊ฟ (Groove) มีความลึกและความกว้างตามมาตรฐาน ควรปรึกษาผู้เชี่ยวชาญเพื่อรับการแนะนำที่เหมาะสมกับลักษณะงานของท่าน
</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
<h3 class="font-bold text-lg text-secondary-900 mb-3">3. กรู๊ฟท่อรับแรงดันได้สูงเท่าไหร่?</h3>
<p class="text-secondary-700 leading-relaxed">
กรู๊ฟท่อสามารถรับแรงดันได้ตั้งแต่ 300 psi จนถึง 735 psi ขึ้นอยู่กับรุ่นและวัสดุของข้อต่อที่เลือกใช้ สำหรับงานระบบดับเพลิงมักใช้ที่ 300 psi ส่วนงานอุตสาหกรรมหนักอาจต้องใช้รุ่นที่รับแรงดันได้สูงกว่านี้
</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
<h3 class="font-bold text-lg text-secondary-900 mb-3">4. ควรเลือกวัสดุกรู๊ฟท่อประเภทใดดี?</h3>
<p class="text-secondary-700 leading-relaxed">
วัสดุที่นิยมใช้มี 2 ประเภทหลัก ได้แก่ <strong>เหล็กชุบสincงกลาไลซ์ไลซ์ (Galvanized Steel)</strong> ซึ่งราคาประหยัด เหมาะกับงานทั่วไป และ <strong>สแตนเลส (Stainless Steel)</strong> ที่ทนสนิมได้ดีเยี่ยม เหมาะกับงานที่ต้องการความทนทานสูงและอายุการใช้งานยาวนาน
</p>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
<h3 class="font-bold text-lg text-secondary-900 mb-3">5. การติดตั้งกรู๊ฟท่อต้องใช้เครื่องมือพิเศษอะไรบ้าง?</h3>
<p class="text-secondary-700 leading-relaxed">
การติดตั้งกรู๊ฟท่อต้องใช้เครื่องกรู๊ฟท่อ (Grooving Machine) เพื่อสร้างร่องกรู๊ฟบนท่อ ซึ่งแต่ละยี่ห้ออาจต้องใช้เครื่องเฉพาะยี่ห้อ นอกจากนี้ยังต้องใช้อุปกรณ์ประกอบอื่นๆ เช่น กาวเฮอร์เมสซีล (HermeSeal 55), ยางแหวน EPDM และน้ำยาหล่อลื่น (Lubricant)
</p>
</div>
</div>
</div>
</section>
<!-- Size Selection Guide -->
<section class="section">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">คู่มือการเลือกขนาดกรู๊ฟท่อ</h2>
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-xl p-8 shadow-sm border border-gray-200">
<p class="text-lg text-secondary-700 leading-relaxed mb-6">
การเลือกขนาดกรู๊ฟท่อที่ถูกต้องเป็นสิ่งสำคัญเพื่อให้ระบบท่อทำงานได้อย่างมีประสิทธิภาพและปลอดภัย ควรพิจารณาปัจจัยหลักดังต่อไปนี้:
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-primary-100 rounded-lg p-3 mr-4">
<span class="text-primary-700 font-bold text-xl">1</span>
</div>
<div>
<h4 class="font-bold text-secondary-900 mb-2">ขนาดเส้นผ่านศูนย์กลางภายนอก (OD)</h4>
<p class="text-secondary-700">วัดขนาดเส้นผ่านศูนย์กลางภายนอกของท่อเป็นมิลลิเมตร แล้วเลือกขนาดกรู๊ฟท่อให้ตรงกับขนาดท่อมาตรฐาน</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary-100 rounded-lg p-3 mr-4">
<span class="text-primary-700 font-bold text-xl">2</span>
</div>
<div>
<h4 class="font-bold text-secondary-900 mb-2">ความหนาผนังท่อ (Wall Thickness)</h4>
<p class="text-secondary-700">ตรวจสอบความหนาผนังท่อเพื่อให้แน่ใจว่าร่องกรู๊ฟมีความลึกเหมาะสมและไม่ทำให้ท่ออ่อนแอเกินไป</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary-100 rounded-lg p-3 mr-4">
<span class="text-primary-700 font-bold text-xl">3</span>
</div>
<div>
<h4 class="font-bold text-secondary-900 mb-2">ชนิดของท่อ</h4>
<p class="text-secondary-700">กรู๊ฟท่อสามารถใช้ได้กับท่อหลายประเภท เช่น ท่อเหล็ก (Steel), ท่อสแตนเลส (Stainless Steel), ท่อ PVC และท่อ HDPE แต่ต้องใช้วิธีการกรู๊ฟที่เหมาะสมกับแต่ละชนิด</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary-100 rounded-lg p-3 mr-4">
<span class="text-primary-700 font-bold text-xl">4</span>
</div>
<div>
<h4 class="font-bold text-secondary-900 mb-2">แรงดันในระบบ (Working Pressure)</h4>
<p class="text-secondary-700">เลือกรุ่นกรู๊ฟท่อที่สามารถรับแรงดันได้สูงกว่าแรงดันในระบบจริงอย่างน้อย 25% เพื่อความปลอดภัย</p>
</div>
</div>
</div>
<div class="bg-blue-50 border-l-4 border-blue-500 rounded-r-xl p-6 mt-8">
<h4 class="font-bold text-blue-800 mb-2">หมายเหตุ</h4>
<p class="text-blue-700">สำหรับการเลือกขนาดที่แม่นยำ ควรปรึกษาวิศวกรหรือผู้เชี่ยวชาญ เพื่อรับการแนะนำที่เหมาะสมกับลักษณะงานและข้อกำหนดของโครงการ</p>
</div>
</div>
</div>
</div>
</section>
<!-- Material Comparison -->
<section class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">เปรียบเทียบวัสดุกรู๊ฟท่อ</h2>
<div class="max-w-4xl mx-auto">
<div class="overflow-x-auto">
<table class="w-full bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-6 py-4 text-left font-bold">คุณสมบัติ</th>
<th class="px-6 py-4 text-center font-bold">เหล็กชุบสincงกลาไลซ์ไลซ์</th>
<th class="px-6 py-4 text-center font-bold">สแตนเลส</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="px-6 py-4 text-secondary-900 font-medium">ราคา</td>
<td class="px-6 py-4 text-center text-secondary-700">ประหยัดกว่า</td>
<td class="px-6 py-4 text-center text-secondary-700">สูงกว่า</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50">
<td class="px-6 py-4 text-secondary-900 font-medium">ความทนทานต่อสนิม</td>
<td class="px-6 py-4 text-center text-secondary-700">ดี (ชั้นเคลือบสincงกลาไลซ์ไลซ์)</td>
<td class="px-6 py-4 text-center text-secondary-700">ยอดเยี่ยม</td>
</tr>
<tr class="border-b border-gray-100">
<td class="px-6 py-4 text-secondary-900 font-medium">ความแข็งแรง</td>
<td class="px-6 py-4 text-center text-secondary-700">สูง</td>
<td class="px-6 py-4 text-center text-secondary-700">สูงมาก</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50">
<td class="px-6 py-4 text-secondary-900 font-medium">น้ำหนัก</td>
<td class="px-6 py-4 text-center text-secondary-700">เบากว่า</td>
<td class="px-6 py-4 text-center text-secondary-700">หนักกว่า</td>
</tr>
<tr class="border-b border-gray-100">
<td class="px-6 py-4 text-secondary-900 font-medium">อายุการใช้งาน</td>
<td class="px-6 py-4 text-center text-secondary-700">10-15 ปี</td>
<td class="px-6 py-4 text-center text-secondary-700">20-30 ปี</td>
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-4 text-secondary-900 font-medium">เหมาะกับงาน</td>
<td class="px-6 py-4 text-center text-secondary-700">ระบบท่อทั่วไป, ระบบดับเพลิง</td>
<td class="px-6 py-4 text-center text-secondary-700">งานอุตสาหกรรมหนัก, งานทะเล, งานเคมี</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 bg-white rounded-xl p-6 shadow-sm border border-gray-200">
<h3 class="font-bold text-lg text-secondary-900 mb-4">สรุปการเลือกใช้</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-lg p-5">
<h4 class="font-bold text-secondary-900 mb-2">เลือกเหล็กชุบสincงกลาไลซ์ไลซ์เมื่อ:</h4>
<ul class="text-secondary-700 space-y-2">
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>งบประมาณจำกัด</li>
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>ต้องการความคุ้มค่า</li>
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>ใช้ในสภาพแวดล้อมทั่วไป</li>
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>ต้องการติดตั้งง่ายและรวดเร็ว</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-5">
<h4 class="font-bold text-secondary-900 mb-2">เลือกสแตนเลสเมื่อ:</h4>
<ul class="text-secondary-700 space-y-2">
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>ต้องการความทนทานสูงสุด</li>
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>ใช้ในสภาพแวดล้อมที่มีความชื้นสูง</li>
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>ต้องการอายุการใช้งานยาวนาน</li>
<li class="flex items-start"><span class="text-primary-600 mr-2">•</span>ใช้กับสารเคมีหรือของเหลวที่กัดกร่อน</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product Gallery -->
<section class="section">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">รุ่นของสินค้า</h2>
<div class="space-y-6 max-w-6xl mx-auto">
<img src="/images/groove-coupling/Grooved01.jpg" alt="รุ่นที่ 1" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/Grooved02.jpg" alt="รุ่นที่ 2" class="w-full h-auto rounded-lg shadow-md" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-gradient py-16">
<div class="container-custom text-center">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
<p class="text-xl text-white/80 mb-8 max-w-2xl mx-auto">
ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท</span>
<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>
<a href="tel:0905551415" class="btn-white flex items-center gap-2">
<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>
<span>090-555-1415</span>
</a>
</div>
</div>
</section>
</main>
<Footer slot="footer" />
</BaseLayout>

View File

@@ -16,7 +16,6 @@ const categories = [
// เครื่องเชื่อมท่อ // เครื่องเชื่อมท่อ
{ name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe', image: '/images/HDPE-welding-crop.jpg' }, { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe', image: '/images/HDPE-welding-crop.jpg' },
{ name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา', image: '/images/products-misc/ppr-welding-machine-main.jpg' }, { name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา', image: '/images/products-misc/ppr-welding-machine-main.jpg' },
{ name: 'กรู๊ฟท่อ', slug: '/groove-coupling', image: '/images/products-cropped/mech_000C.jpg' },
{ name: 'Pipe Coupling', slug: '/pipe-coupling', image: '/images/pipe-coupling/BG-SMC02.png' }, { name: 'Pipe Coupling', slug: '/pipe-coupling', image: '/images/pipe-coupling/BG-SMC02.png' },
{ name: 'DUKELARRSEN', slug: '/dukelarrsen', image: '/images/dukelarrsen/dukelarrsen-43.jpg' }, { name: 'DUKELARRSEN', slug: '/dukelarrsen', image: '/images/dukelarrsen/dukelarrsen-43.jpg' },
{ name: 'เม็กกรู๊ฟ คับปลิ้ง', slug: '/เม็กกรู๊ฟ-คับปลิ้ง', image: '/images/products-misc/MECH_001.jpg' }, { name: 'เม็กกรู๊ฟ คับปลิ้ง', slug: '/เม็กกรู๊ฟ-คับปลิ้ง', image: '/images/products-misc/MECH_001.jpg' },

View File

@@ -39,7 +39,7 @@ import Footer from '@/components/common/Footer.astro';
ข้อต่อท่อ ข้อต่อท่อ
</span> </span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">ข้อต่อท่อ SMC (Pipe Coupling)</h1> <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">ข้อต่อท่อ SMC (Pipe Coupling)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed"> <p class="text-lg sm:text-xl text-white/80 mb-4 leading-relaxed">
จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร และปริมณฑล
</p> </p>
@@ -92,16 +92,16 @@ import Footer from '@/components/common/Footer.astro';
<div class="container-custom"> <div class="container-custom">
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold text-secondary-900 mb-4">รายละเอียดสินค้า</h2> <h2 class="text-2xl font-bold text-secondary-900 mb-4">รายละเอียดสินค้า</h2>
</div>
</div>
</section>
<!-- Technical Revolution --> <!-- Key Feature Text -->
<section class="section bg-gray-50"> <div class="bg-primary-50 border-2 border-primary-200 rounded-xl p-6 mt-4 mb-6">
<div class="container-custom"> <p class="text-xl sm:text-2xl font-bold text-primary-700 text-center">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">การปฏิวัติวงการท่อส่งน้ำและก๊าซ</h2> ไม่เชื่อม • ไม่กรู๊ฟ • ติดตั้งง่าย • แค่ขันน็อต
</p>
</div>
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">การปฏิวัติวงการท่อส่งน้ำและก๊าซ</h2>
<div class="max-w-4xl mx-auto">
<div class="prose prose-lg max-w-none"> <div class="prose prose-lg max-w-none">
<p class="text-lg text-secondary-700 leading-relaxed"> <p class="text-lg text-secondary-700 leading-relaxed">
<strong>ข้อต่อท่อ SMC</strong> เป็นระบบข้อต่อท่อที่ได้รับการพัฒนามาเพื่อทดแทนการเชื่อมท่อด้วยไฟฟ้าแบบเดิม โดยใช้หลักการบีบอัด (Compression) เข้ากับวงแหวน O-Ring ที่อยู่ภายในตัวข้อต่อ ทำให้สามารถประกอบท่อได้อย่างรวดเร็วและมีความแข็งแรงทนทาน <strong>ข้อต่อท่อ SMC</strong> เป็นระบบข้อต่อท่อที่ได้รับการพัฒนามาเพื่อทดแทนการเชื่อมท่อด้วยไฟฟ้าแบบเดิม โดยใช้หลักการบีบอัด (Compression) เข้ากับวงแหวน O-Ring ที่อยู่ภายในตัวข้อต่อ ทำให้สามารถประกอบท่อได้อย่างรวดเร็วและมีความแข็งแรงทนทาน

View File

@@ -221,7 +221,7 @@ import Footer from '@/components/common/Footer.astro';
<div> <div>
<h3 class="text-lg font-semibold text-secondary-800 mb-4">ขั้นตอนการเชื่อม</h3> <h3 class="text-lg font-semibold text-secondary-800 mb-4">ขั้นตอนการเชื่อม</h3>
<ol class="space-y-3"> <ol class="space-y-3">
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">1</span><span class="text-secondary-700">ตัดท่อให้ตรง ฉากมุม</span></li> <li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">1</span><span class="text-secondary-700">ตัดท่อให้ตรง</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">2</span><span class="text-secondary-700">เปิดเครื่องเชื่อมรอจนอุณหภูมิถึง 260°C</span></li> <li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">2</span><span class="text-secondary-700">เปิดเครื่องเชื่อมรอจนอุณหภูมิถึง 260°C</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">3</span><span class="text-secondary-700">สวมท่อและข้อต่อเข้าแผ่นร้อนตามเวลาที่กำหนด</span></li> <li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">3</span><span class="text-secondary-700">สวมท่อและข้อต่อเข้าแผ่นร้อนตามเวลาที่กำหนด</span></li>
<li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">4</span><span class="text-secondary-700">นำออกและเชื่อมเข้าด้วยกันทันที</span></li> <li class="flex gap-3"><span class="flex-shrink-0 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center text-sm">4</span><span class="text-secondary-700">นำออกและเชื่อมเข้าด้วยกันทันที</span></li>

View File

@@ -142,6 +142,181 @@ import Footer from '@/components/common/Footer.astro';
</div> </div>
</section> </section>
<!-- Installation Section (from groove-coupling) -->
<section class="section bg-gray-50">
<div class="container-custom">
<div class="max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">วิธีการติดตั้ง</h2>
<!-- Step 1: Grooved -->
<div class="mb-16">
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">1</span>
การกรู๊ฟท่อ (Grooved)
</h3>
<!-- Machine Image -->
<div class="bg-gray-50 rounded-2xl p-8 mb-8">
<div class="max-w-3xl mx-auto text-center">
<img src="/images/groove-coupling/G1.png" alt="เครื่องกรู๊ฟท่อไซเลอร์" class="w-full h-auto rounded-lg mb-6" style="max-height: 300px; object-fit: contain;" width="800" height="400" loading="lazy" decoding="async" />
<h4 class="text-xl font-bold text-secondary-900 mb-2">เครื่องกรู๊ฟท่อไซเลอร์</h4>
<p class="text-secondary-600">หมายเหตุ: การ Grooved ท่อ Syler ต้องใช้เครื่อง Grooved ของ Syler เท่านั้น</p>
</div>
</div>
<!-- Step Cards -->
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex items-center mb-4">
<span class="bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.1 - 1.3</span>
</div>
<p class="text-secondary-700 mb-4">ตั้งเครื่องกรู๊ฟ สอดท่อให้หน้าตัดท่อชนแนบกับหัวกรู๊ฟ ปรับระดับท่อที่วางพาดกับขาตั้งท่อด้วยมาตรวัดระดับน้ำ จากนั้นดึงคันโยกไฮโดริกให้หัวกดทับเนื้อท่อแล้ว จึงเปิดสวิทช์เครื่องเพื่อเริ่มทำการกรู๊ฟ</p>
<img src="/images/groove-coupling/G2.png" alt="การกรู๊ฟท่อ" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex items-center mb-4">
<span class="bg-primary-100 text-primary-700 px-3 py-1 rounded-full text-sm font-medium">ขั้นตอนที่ 1.4</span>
</div>
<p class="text-secondary-700 mb-4">เมื่อกรู๊ฟเสร็จแล้ว ให้ปิดเครื่องแล้วยกคันโยกไฮโดริกขึ้น นำสายวัดระยะร่องกรู๊ฟมาวัดร่องตามขนาดท่อที่กรู๊ฟ ทั้งนี้ระยะความลึกของร่องกรู๊ฟอนุโลมให้ขาดเกินได้ไม่เกิน 3 มิลลิเมตร</p>
<div class="grid grid-cols-2 gap-3">
<img src="/images/groove-coupling/G6.png" alt="การวัดร่องกรู๊ฟ" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G7.png" alt="ล็อคระดับปั้มไฮโดริก" class="w-full h-32 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
</div>
<!-- Important Notice -->
<div class="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-6 mt-6">
<h4 class="font-bold text-amber-800 mb-2">ข้อควรระวังในการกรู๊ฟ</h4>
<p class="text-amber-700">การกรู๊ฟท่อต่อเนื่องเป็นระยะเวลานานหัวกรู๊ฟท่อจะมีความร้อนสะสม หากหัวกรู๊ฟร้อนเกินไปจะทำให้พลาสติกละลายได้ ควรพักเพื่อให้หัวกรู๊ฟเย็นลงจึงค่อยกรู๊ฟท่อต่อไป</p>
</div>
<!-- Additional Step Images -->
<div class="grid grid-cols-3 gap-4 mt-6">
<img src="/images/groove-coupling/G3.png" alt="ความร้อนสะสม" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G4.png" alt="การกรู๊ฟท่อ" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G5.png" alt="การกรู๊ฟท่อต่อ" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
<!-- Step 2: Coupling -->
<div class="mb-16">
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">2</span>
การใส่ข้อต่อคัปปิ้ง (Coupling)
</h3>
<p class="text-lg text-secondary-700 mb-8">เมื่อกรู๊ฟท่อเรียบร้อยแล้ว ให้ทำการสวมข้อต่อ Coupling ตามขั้นตอนดังนี้</p>
<!-- Coupling Steps -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.1</span>
<p class="text-secondary-700 mb-4">ทากาวเฮอร์เมสซีล 55 ที่หน้าตัดท่อเพื่อป้องกันสนิมบริเวณหน้าตัดท่อ</p>
<img src="/images/groove-coupling/G8.png" alt="ทากาวเฮอร์เมสซีล" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.2</span>
<p class="text-secondary-700 mb-4">นำ Grooved line gasket มาสวมที่ปลายท่อ เพื่อป้องกันไม่ให้น้ำที่ไหลผ่านสัมผัสหน้าตัดท่อ</p>
<img src="/images/groove-coupling/G9.png" alt="สวม Grooved line gasket" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.3</span>
<p class="text-secondary-700 mb-4">ทาน้ำยาหล่อลื่น Lubricant ให้ทั่วแหวนยาง EPDM เพื่อยืดอายุการใช้งาน</p>
<img src="/images/groove-coupling/G10.png" alt="ทาน้ำยาหล่อลื่น" class="w-full h-40 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.4</span>
<p class="text-secondary-700 mb-4">นำยางที่ทา Lubricant แล้วมาสวมเข้ากับท่อก่อนจากนั้นจึงสวมเข้ากับข้อต่อ</p>
<div class="grid grid-cols-2 gap-2">
<img src="/images/groove-coupling/G11.png" alt="สวมยางเข้ากับท่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
<img src="/images/groove-coupling/G12.png" alt="สวมเข้ากับข้อต่อ" class="w-full h-28 object-cover rounded-lg" width="400" height="300" loading="lazy" decoding="async" />
</div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm md:col-span-2">
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm font-medium mb-3 inline-block">ขั้นตอนที่ 2.5</span>
<p class="text-secondary-700 mb-4">นำข้อต่อ Coupling มาประกบพร้อมขันน๊อตจนแน่น</p>
<img src="/images/groove-coupling/G13.png" alt="ขันน๊อตจนแน่น" class="w-full h-48 object-cover rounded-lg" width="600" height="400" loading="lazy" decoding="async" />
</div>
</div>
</div>
<!-- Torque Specifications -->
<div class="mt-16">
<h3 class="text-xl font-bold text-secondary-900 mb-8 flex items-center">
<span class="bg-primary-600 text-white w-10 h-10 rounded-full flex items-center justify-center mr-4 text-lg">3</span>
แรงบิด (Torque) ที่ควรใช้ในการขันน๊อต
</h3>
<div class="bg-white rounded-xl p-8 shadow-sm border border-gray-200">
<p class="text-lg text-secondary-700 mb-6">
การขันน๊อตด้วยแรงบิดที่ถูกต้องเป็นสิ่งสำคัญเพื่อให้ข้อต่อกรู๊ฟประกอบติดแน่นและปลอดภัย ควรขันน๊อตให้แน่นพอประมาณ ไม่แน่นเกินไปซึ่งอาจทำให้ยางเสียหาย หรือหลวมเกินไปซึ่งอาจทำให้รั่วซึม
</p>
<div class="overflow-x-auto">
<table class="w-full rounded-lg overflow-hidden">
<thead class="bg-primary-600 text-white">
<tr>
<th class="px-4 py-3 text-center font-bold text-sm">ขนาดท่อ (นิ้ว)</th>
<th class="px-4 py-3 text-center font-bold text-sm">ขนาดน๊อต</th>
<th class="px-4 py-3 text-center font-bold text-sm">แรงบิด (Torque)</th>
<th class="px-4 py-3 text-center font-bold text-sm">หมายเหตุ</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100">
<td class="px-4 py-3 text-center text-secondary-700">1/2" - 2"</td>
<td class="px-4 py-3 text-center text-secondary-700">3/8" - 1/2"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">35-65 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">47-88 Nm</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50">
<td class="px-4 py-3 text-center text-secondary-700">2-1/2" - 4"</td>
<td class="px-4 py-3 text-center text-secondary-700">1/2"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">65-100 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">88-136 Nm</td>
</tr>
<tr class="border-b border-gray-100">
<td class="px-4 py-3 text-center text-secondary-700">5" - 8"</td>
<td class="px-4 py-3 text-center text-secondary-700">5/8"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">100-150 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">136-203 Nm</td>
</tr>
<tr class="border-b border-gray-100 bg-gray-50">
<td class="px-4 py-3 text-center text-secondary-700">10" - 12"</td>
<td class="px-4 py-3 text-center text-secondary-700">3/4"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">150-200 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">203-271 Nm</td>
</tr>
<tr>
<td class="px-4 py-3 text-center text-secondary-700">14" - 24"</td>
<td class="px-4 py-3 text-center text-secondary-700">7/8"</td>
<td class="px-4 py-3 text-center text-secondary-700 font-medium">200-300 ft-lb</td>
<td class="px-4 py-3 text-center text-secondary-700">271-407 Nm</td>
</tr>
</tbody>
</table>
</div>
<div class="bg-amber-50 border-l-4 border-amber-500 rounded-r-xl p-6 mt-6">
<h4 class="font-bold text-amber-800 mb-2">ข้อควรระวังเรื่องแรงบิด</h4>
<ul class="text-amber-700 space-y-1">
<li>• ควรใช้คันทวนแรง (Torque Wrench) เพื่อให้ได้แรงบิดที่แม่นยำ</li>
<li>• ขันน๊อตสลับกันเป็นวงกลม (Cross Pattern) เพื่อให้แรงกระจายอย่างเท่าเทียม</li>
<li>• หากไม่แน่ใจควรปรึกษาผู้ผลิตหรือตัวแทนจำหน่าย</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section --> <!-- FAQ Section -->
<section id="faq" class="section bg-white"> <section id="faq" class="section bg-white">
<div class="container-custom"> <div class="container-custom">

View File

@@ -44,7 +44,7 @@ import Footer from '@/components/common/Footer.astro';
</p> </p>
<div class="flex flex-wrap gap-4 mb-8"> <div class="flex flex-wrap gap-4 mb-8">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2"> <a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท</span> <span>แชท</span>
<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> <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> </a>
@@ -331,7 +331,7 @@ import Footer from '@/components/common/Footer.astro';
ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ
</p> </p>
<div class="flex flex-wrap justify-center gap-4"> <div class="flex flex-wrap justify-center gap-4">
<a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2"> <a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="btn-white flex items-center gap-2">
<span>แชท</span> <span>แชท</span>
<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> <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> </a>