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

Standardize hero grid to items-start for all product pages

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-05-24 20:07:20 +07:00
parent 7eec86d7c5
commit f9161ab984
17 changed files with 208 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/ท่อ-xy-lent.astro
View File

@@ -40,7 +40,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<nav class="text-sm mb-4 text-primary-100">
<a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ท่อ XYLENT</span>
</nav>
<div class="grid lg:grid-cols-2 gap-8 items-center">
<div class="grid lg:grid-cols-2 gap-8 items-start">
<div class="img-hover rounded-2xl overflow-hidden bg-white/10">
<img src="/images/products-cropped/XYLENT_001.png" alt="ท่อ XYLENT" class="w-full" loading="eager" />
</div>
@@ -66,7 +66,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-neutral-50 rounded-xl p-6 text-center">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-start justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12l5 5L20 7" />
</svg>
@@ -75,7 +75,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<p class="text-sm text-neutral-600">ระดับเสียงเพียง 22 เดซิเบล เทียบเท่ากับเสียงกระซิบ ทำให้ห้องน้ำและพื้นที่ใกล้เคียงเงียบสงบ</p>
</div>
<div class="bg-neutral-50 rounded-xl p-6 text-center">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-start justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
@@ -84,7 +84,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<p class="text-sm text-neutral-600">ต่อและถอดได้ง่าย ติดตั้งง่าย รวดเร็ว ไม่ต้องใช้กาวหรือเครื่องมือพิเศษ</p>
</div>
<div class="bg-neutral-50 rounded-xl p-6 text-center">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
<div class="w-16 h-16 bg-primary-100 rounded-full flex items-start justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
@@ -99,32 +99,32 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<!-- Benefits -->
<section class="py-16 bg-neutral-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div>
<h2 class="text-3xl font-bold text-primary-700 mb-6">ข้อดีของท่อระบายน้ำ ไซเลนท์</h2>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-start justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>เงียบสนิท:</strong> ลดเสียงรบกวนจากการไหลของน้ำได้อย่างมีประสิทธิภาพ เหมาะสำหรับอาคารที่ต้องการความเงียบสงบ</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-start justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>ติดตั้งง่าย รวดเร็ว:</strong> ระบบ Push Fit ประหยัดเวลาในการติดตั้งและซ่อมแซม</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-start justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>ป้องกันการรั่วซึม:</strong> ระบบล็อกแน่นหนึบ ป้องกันการรั่วซึมได้ดีเยี่ยม</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-start justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>ทนเคมี:</strong> ทนทานต่อสารเคมีในครัวเรือนและงานอุตสาหกรรม</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-start justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>รับแรงกดดันได้สูง:</strong> โครงสร้าง 3 ชั้นให้ความแข็งแรงในการรับแรงกดดันจากภายนอกสูง</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="w-6 h-6 bg-primary-600 text-white rounded-full flex items-start justify-center flex-shrink-0 mt-0.5">✓</span>
<span class="text-neutral-700"><strong>อายุการใช้งานยาวนาน:</strong> ไม่เสื่อมสภาพง่าย มีอายุการใช้งานยาวนานตลอดอาคาร</span>
</li>
</ul>
@@ -144,48 +144,48 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<h2 class="text-3xl font-bold text-primary-700 mb-8 text-center">การใช้งานท่อ XYLENT</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
<div class="flex items-start gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-start justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
</div>
<span class="text-neutral-700 font-medium">ระบบระบายน้ำในอาคารสูง</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
<div class="flex items-start gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-start justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</div>
<span class="text-neutral-700 font-medium">ระบบน้ำทิ้งในบ้านพัก</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
<div class="flex items-start gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-start justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-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>
</div>
<span class="text-neutral-700 font-medium">โรงแรมและรีสอร์ท</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
<div class="flex items-start gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-start justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</div>
<span class="text-neutral-700 font-medium">โรงพยาบาล</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
<div class="flex items-start gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-start justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<span class="text-neutral-700 font-medium">อาคารสำนักงาน</span>
</div>
<div class="flex items-center gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
<div class="flex items-start gap-4 bg-neutral-50 rounded-xl p-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-start justify-center flex-shrink-0">
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>