fix: Add max-w-4xl mx-auto to sections for consistent width

This commit is contained in:
OpenCode Agent
2026-04-02 19:04:15 +07:00
parent 8ae6f412d9
commit 5159445a51
19 changed files with 185 additions and 363 deletions

View File

@@ -84,9 +84,10 @@ import Footer from '@/components/common/Footer.astro';
<!-- 4 Reasons Section -->
<section id="reasons" class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">4 เหตุผลที่ควรใช้ระบบกรู๊ฟ</h2>
<div class="space-y-12">
<div class="max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-12 text-center">4 เหตุผลที่ควรใช้ระบบกรู๊ฟ</h2>
<div class="space-y-12">
<!-- Reason 1 -->
<div class="bg-white rounded-2xl p-8 shadow-sm">
<h3 class="text-2xl font-bold text-red-600 mb-6">1. ไม่เกิดการอุดตันจาก Slag (เศษผงเหล็ก)</h3>
@@ -131,18 +132,21 @@ import Footer from '@/components/common/Footer.astro';
<!-- Fire Incident Section -->
<section id="fire-incident" class="section bg-white">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">เหตุการณ์จริง..เพลิงไหม้จากการเชื่อมท่อ</h2>
<img src="/images/dukelarrsen/dukelarrsen-08.jpg" alt="เพลิงไหม้จากการเชื่อมท่อ" class="w-full h-auto rounded-xl max-w-3xl mx-auto" width="800" height="600" loading="lazy" decoding="async" />
<div class="max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">เหตุการณ์จริง..เพลิงไหม้จากการเชื่อมท่อ</h2>
<img src="/images/dukelarrsen/dukelarrsen-08.jpg" alt="เพลิงไหม้จากการเชื่อมท่อ" class="w-full h-auto rounded-xl max-w-3xl mx-auto" width="800" height="600" loading="lazy" decoding="async" />
</div>
</div>
</section>
<!-- Benefits Section -->
<section id="benefits" class="section bg-gray-50">
<div class="container-custom">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">GROOVED COUPLINGS AND FITTINGS</h2>
<img src="/images/dukelarrsen/dukelarrsen-09.jpg" alt="Grooved Couplings and Fittings" class="w-full h-auto rounded-xl mb-8" width="800" height="600" loading="lazy" decoding="async" />
<div class="grid md:grid-cols-2 gap-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-xl font-bold text-secondary-900 mb-8 text-center">GROOVED COUPLINGS AND FITTINGS</h2>
<img src="/images/dukelarrsen/dukelarrsen-09.jpg" alt="Grooved Couplings and Fittings" class="w-full h-auto rounded-xl mb-8" width="800" height="600" loading="lazy" decoding="async" />
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
<h3 class="text-xl font-bold text-secondary-900 mb-4">1. ลดค่าติดตั้ง</h3>
<ul class="space-y-2 text-secondary-700">
@@ -185,6 +189,7 @@ import Footer from '@/components/common/Footer.astro';
<h3 class="text-xl font-bold text-secondary-900 mb-4">5. ข้อต่อที่สะดวก</h3>
<p class="text-secondary-700">Coupling สามารถถอดประกอบได้ง่าย ช่วยให้การถอดส่วนท่อสำหรับทำความสะอาดหรือซ่อมแซม ช่วยให้การหมุนท่อเป็นระยะเพื่อกระจายการสึกหรอภายในจากของเหลวหรือสื่อที่มีฤทธิ์กัดเซาะ</p>
</div>
</div>
</div>
</section>