kunthawat/dealplustech-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Compare commits

base: kunthawat:b93dda19de3f697b6763d4e0f3f083b89d5d1067
Branches Tags
kunthawat:main
..
compare: kunthawat:main
Branches Tags
kunthawat:main

5 Commits
b93dda19de ... main

Author SHA1 Message Date
OpenCode Agent
cfa8b4ba1a Grilles: rewrite FAQ to sound more natural in Thai 
- เลือก ABS หรือ Aluminum ดี? (natural question form)
- ทำไม ABS ถึงไม่มีหยดน้ำขัง? (clearer explanation)
- สั่งทำขนาดพิเศษได้ไหม? (conversational tone)
 2026-04-05 21:43:20 +07:00
OpenCode Agent
636b350878 Grilles: increase font sizes to match prose content 
- Table text: text-sm → text-lg
- Size guide formula and list: text-sm → text-lg
- Material comparison lists: text-xs → text-lg
- FAQ items: text-sm → text-lg
- Installation steps: text-sm → text-lg
 2026-04-05 21:26:50 +07:00
OpenCode Agent
48f60033ee Move mb-8 from paragraph to prose div for consistent spacing 2026-04-05 21:22:32 +07:00
OpenCode Agent
377da259e1 Fix Grilles: add padding before next section, fix Thai warnings 
- Added mb-8 to ฟรี ไม่มีค่าใช้จ่าย paragraph
- Fixed ข้อควรระวัง: or→หรือ, static pressure→ความดันสถิต, шум→เสียงดัง
 2026-04-05 21:17:03 +07:00
OpenCode Agent
0313ae80c4 Fix Grilles sections width - wrap in max-w-4xl container 2026-04-05 21:12:43 +07:00
1 changed files with 44 additions and 44 deletions
Expand all files Collapse all files

88
src/pages/grilles/index.astro
View File

@@ -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 space-y-8"> <div class="prose prose-lg max-w-none space-y-8 mb-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>
@@ -193,27 +193,26 @@ import Footer from '@/components/common/Footer.astro';
<strong>ฟรี ไม่มีค่าใช้จ่าย</strong> แม้ว่าจะสั่งมากสั่งน้อย เราเป็นผู้ผลิตสามารถเสนอราคาที่เหมาะสมโดนใจแน่นอนครับ <strong>ฟรี ไม่มีค่าใช้จ่าย</strong> แม้ว่าจะสั่งมากสั่งน้อย เราเป็นผู้ผลิตสามารถเสนอราคาที่เหมาะสมโดนใจแน่นอนครับ
</p> </p>
</div> </div>
</div>
<!-- ข้อมูลจำเพาะทางเทคนิค --> <!-- ข้อมูลจำเพาะทางเทคนิค -->
<div class="bg-gray-50 -mx-4 px-4 py-6 rounded-lg"> <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="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full border-collapse bg-white rounded-lg shadow-sm text-sm"> <table class="w-full border-collapse bg-white rounded-lg shadow-sm text-lg">
<thead> <thead>
<tr class="bg-primary-600 text-white"> <tr class="bg-primary-600 text-white">
<th class="px-3 py-2 text-left">ประเภท</th> <th class="px-4 py-3 text-left">ประเภท</th>
<th class="px-3 py-2 text-center">ขนาด</th> <th class="px-4 py-3 text-center">ขนาด</th>
<th class="px-3 py-2 text-center">CFM</th> <th class="px-4 py-3 text-center">CFM</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y text-xs"> <tbody class="divide-y text-lg">
<tr><td colspan="3" class="px-3 py-1.5 bg-gray-100 font-semibold">หน้ากากลมส่ง</td></tr> <tr><td colspan="3" class="px-4 py-2 bg-gray-100 font-semibold">หน้ากากลมส่ง</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-4 py-3">Square Diffuser</td><td class="px-4 py-3 text-center">6x6 - 24x24"</td><td class="px-4 py-3 text-center">200-800</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-4 py-3">Linear Slot</td><td class="px-4 py-3 text-center">12" - 48"</td><td class="px-4 py-3 text-center">150-600</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-4 py-3">Jet Diffuser</td><td class="px-4 py-3 text-center">8" - 12"</td><td class="px-4 py-3 text-center">300-1200</td></tr>
<tr><td colspan="3" class="px-3 py-1.5 bg-gray-100 font-semibold">หน้ากากลมกลับ</td></tr> <tr><td colspan="3" class="px-4 py-2 bg-gray-100 font-semibold">หน้ากากลมกลับ</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 class="px-4 py-3">Standard</td><td class="px-4 py-3 text-center">10x10 - 36x36"</td><td class="px-4 py-3 text-center">300-1500</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -223,10 +222,10 @@ import Footer from '@/components/common/Footer.astro';
<div class="bg-white px-4 py-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-blue-50 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-lg">CFM ÷ 2 = พื้นที่ (ตร.นิ้ว)</p>
<p class="text-xs text-secondary-600 mt-1">ตัวอย่าง: 400 CFM ÷ 2 = 200 ตร.นิ้ว → 14x14</p> <p class="text-secondary-600 mt-1">ตัวอย่าง: 400 CFM ÷ 2 = 200 ตร.นิ้ว → 14x14</p>
</div> </div>
<div class="grid grid-cols-3 gap-2 text-sm"> <div class="grid grid-cols-3 gap-2 text-lg">
<div><strong>6x6"</strong> - ห้องน้ำ</div> <div><strong>6x6"</strong> - ห้องน้ำ</div>
<div><strong>8x8"</strong> - ห้องนอน</div> <div><strong>8x8"</strong> - ห้องนอน</div>
<div><strong>10x10"</strong> - ห้องประชุมเล็ก</div> <div><strong>10x10"</strong> - ห้องประชุมเล็ก</div>
@@ -247,10 +246,10 @@ import Footer from '@/components/common/Footer.astro';
</span> </span>
ABS Plastic ABS Plastic
</h3> </h3>
<ul class="space-y-1 text-xs text-secondary-700"> <ul class="space-y-2 text-lg text-secondary-700">
<li class="flex items-start gap-1"><span class="text-green-500">✓</span> ราคาประหยัด</li> <li class="flex items-start gap-2"><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-2"><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-2 bg-green-50 rounded px-2 py-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">
@@ -260,9 +259,9 @@ import Footer from '@/components/common/Footer.astro';
</span> </span>
Aluminum Aluminum
</h3> </h3>
<ul class="space-y-1 text-xs text-secondary-700"> <ul class="space-y-2 text-lg text-secondary-700">
<li class="flex items-start gap-1"><span class="text-green-500">✓</span> ทนทานต่อการกัดกร่อน</li> <li class="flex items-start gap-2"><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-2"><span class="text-green-500">✓</span> ดีไซน์หลากหลาย</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -271,18 +270,18 @@ import Footer from '@/components/common/Footer.astro';
<!-- คำถามที่พบบ่อย --> <!-- คำถามที่พบบ่อย -->
<div class="bg-white px-4 py-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-sm"> <div class="space-y-3 text-lg">
<div class="bg-gray-50 rounded-lg p-3"> <div class="bg-gray-50 rounded-lg p-4">
<h3 class="font-semibold text-secondary-900 mb-1">ABS vs Aluminum?</h3> <h3 class="font-semibold text-secondary-900 mb-2">เลือก ABS หรือ 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-4 border border-primary-200">
<h3 class="font-semibold text-primary-800 mb-1">ทำไม ABS ไม่เกิดหยดน้ำ?</h3> <h3 class="font-semibold text-primary-800 mb-2">ทำไม ABS ถึงไม่มีหยดน้ำขัง?</h3>
<p class="text-primary-700">พื้นผิวเรียบลื่น ไม่มีจุดให้น้ำควบแน่นเกาะ ต่างจาก Aluminum ที่เย็นกว่าจุดน้ำควบแน่น</p> <p class="text-primary-700">พื้นผิวพลาสติกเรียบลื่น ไม่มีรอยตะเข็บให้น้ำควบแน่นเกาะ ต่างจากโลหะที่อุณหภูมิเย็นกว่าจะทำให้เกิดหยดน้ำขังที่ผิว</p>
</div> </div>
<div class="bg-gray-50 rounded-lg p-3"> <div class="bg-gray-50 rounded-lg p-4">
<h3 class="font-semibold text-secondary-900 mb-1">สั่งขนาดพิเศษได้ไหม?</h3> <h3 class="font-semibold text-secondary-900 mb-2">สั่งทำขนาดพิเศษได้ไหม?</h3>
<p class="text-secondary-700">ได้ รับสั่งทำตามความต้องการ ติดต่อเราเพื่อสอบถามราคา</p> <p class="text-secondary-700">ได้ครับ รับสั่งทำขนาดพิเศษตามต้องการ สอบถามราคาและระยะเวลาการผลิตได้เลย</p>
</div> </div>
</div> </div>
</div> </div>
@@ -293,22 +292,22 @@ import Footer from '@/components/common/Footer.astro';
<div class="grid md:grid-cols-2 gap-8"> <div class="grid md:grid-cols-2 gap-8">
<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 text-lg">
<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-7 h-7 bg-primary-600 text-white rounded-full flex items-center justify-center">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-7 h-7 bg-primary-600 text-white rounded-full flex items-center justify-center">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-7 h-7 bg-primary-600 text-white rounded-full flex items-center justify-center">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-7 h-7 bg-primary-600 text-white rounded-full flex items-center justify-center">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-7 h-7 bg-primary-600 text-white rounded-full flex items-center justify-center">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> <li class="flex gap-3"><span class="flex-shrink-0 w-7 h-7 bg-primary-600 text-white rounded-full flex items-center justify-center">6</span><span class="text-secondary-700">ปรับบานเกล็ดให้ได้ทิศทางลมที่ต้องการ</span></li>
</ol> </ol>
</div> </div>
<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>
<ul class="space-y-3"> <ul class="space-y-3 text-lg">
<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">อย่าติดตั้งหน้ากากใกล้ม่านบังตาหรือผ้ามากเกินไป เพราะจะขวางทางลม</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">ควรเว้นระยะห่างจากผนังอย่างน้อย 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>
<li class="flex items-start gap-3"><span class="text-amber-500 text-xl">⚠️</span><span class="text-secondary-700">อย่าใช้หน้ากากขนาดเล็กเกินไป เพราะจะทำให้ลมแรงและ шум</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> </ul>
</div> </div>
</div> </div>
@@ -332,6 +331,7 @@ import Footer from '@/components/common/Footer.astro';
<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" /> <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>
</section> </section>
<section class="cta-gradient py-16"> <section class="cta-gradient py-16">