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

Fix hero section structure - remove order classes, add missing classes

Browse Source 
Changes:
- Removed order-2 lg:order-1 from 9 pages (image now on LEFT)
- Added bg-white/10 p-2 to image containers in 8 pages
- Added lg:py-24 padding to sections in 8 pages

Pages fixed: durgo-avvs, grilles, water-pump, pipe-coupling,
ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-syler, ท่อ-upvc,
ระบบน้ำ, วาล์ว-valve, เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr
This commit is contained in:
Kunthawat Greethong
2026-05-24 21:09:15 +07:00
parent f12f84cf52
commit daa3d56027
15 changed files with 186 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/durgo-avvs.astro
View File

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="ระบบวาล์วเติมอากาศ DURGO AVVs" description="จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVs คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<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-start">
<div class="order-2 lg:order-1">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/durgo_000C.jpg" alt="DURGO AVVs" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<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 mb-4">ระบบวาล์วเติมอากาศ DURGO AVVs</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">

8
src/pages/grilles.astro
View File

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="กริลแอร์พลาสติก (Grilles air plastic)" description="จำหน่ายกริลแอร์พลาสติก (ABS) และอลูมิเนียม คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<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-start">
<div class="order-2 lg:order-1">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์พลาสติก" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<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 mb-4">กริลแอร์ (Grilles air)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">

2
src/pages/pipe-coupling.astro
View File

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="ข้อต่อท่อ SMC (Pipe Coupling)" description="จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>

6
src/pages/water-pump.astro
View File

@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<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-start">
<div class="order-2 lg:order-1">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/water-pump_000C.jpg" alt="ปั๊มน้ำ (Water Pump)" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<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 mb-4">ปั๊มน้ำ (Water Pump)</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">

6
src/pages/ท่อ-hdpe.astro
View File

@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="order-2 lg:order-1">
<div class="">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ HDPE</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ HDPE (High Density Polyethylene)</h1>
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</a>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/hdpe001.png" alt="ท่อ HDPE (High Density Polyethylene)" class="w-full" loading="eager" />
</div>
</div>

6
src/pages/ท่อ-ppr-scg.astro
View File

@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="order-2 lg:order-1">
<div class="">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ PPR ตราช้าง (SCG)</h1>
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</a>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/ppr-scg.jpg" alt="ท่อ PPR ตราช้าง (SCG)" class="w-full" loading="eager" />
</div>
</div>

6
src/pages/ท่อ-ppr-thai-ppr.astro
View File

@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="order-2 lg:order-1">
<div class="">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ไทยพีพีอาร์ (Thai PPR)</h1>
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</a>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ไทยพีพีอาร์ (Thai PPR)" class="w-full" loading="eager" />
</div>
</div>

8
src/pages/ท่อ-syler.astro
View File

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="ท่อ Syler | ท่อเหล็กบุพีอี" description="จำหน่ายท่อ Syler ท่อเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<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-start">
<div class="order-2 lg:order-1">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/syler-pipe-cold-water.jpg" alt="ท่อ Syler" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ Syler</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ Syler | ท่อเหล็กบุพีอี</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">

6
src/pages/ท่อ-upvc.astro
View File

@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="order-2 lg:order-1">
<div class="">
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ UPVC</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ UPVC (Unplasticized Polyvinyl Chloride)</h1>
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</a>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="ท่อ UPVC" class="w-full" loading="eager" />
</div>
</div>

2
src/pages/ระบบน้ำ.astro
View File

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="ระบบน้ำ - วาล์ว ปั๊มน้ำ ระบบกรองน้ำ" description="ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
<main class="bg-white min-h-screen">
<!-- Category Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>

2
src/pages/วาล์ว-valve.astro
View File

@@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" description="จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>

6
src/pages/เครื่องเชื่อม-hdpe.astro
View File

@@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="เครื่องเชื่อมท่อ HDPE (HDPE Pipe Welding Machine)" description="จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน เครื่องเชื่อมแบบ Butt Fusion และ Electrofusion">
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
@@ -56,13 +56,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div>
<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-start">
<div class="order-2 lg:order-1">
<div class="">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden bg-white/10">
<img src="/images/HDPE-welding-crop.jpg" alt="เครื่องเชื่อมท่อ HDPE" class="w-full" width="600" height="400" loading="eager" />
</div>
</div>
<div class="order-1 lg:order-2">
<div class="">
<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 mb-4">เครื่องเชื่อมท่อ HDPE</h1>
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">

2
src/pages/เครื่องเชื่อม-ppr.astro
View File

@@ -9,7 +9,7 @@ import Footer from '@/components/common/Footer.astro';
<main class="bg-white min-h-screen">
<!-- Product Hero Section -->
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 overflow-hidden">
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
<!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>