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

Fix hero section structure across all product pages

Browse Source 
Phase 1: Fixed layout (4 pages) - Image LEFT, Content RIGHT
- ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-upvc

Phase 2: Added bg-white/10 p-2 to image containers
Phase 3: Added lg:py-24 padding to sections

All pages now match armflex.astro reference structure.
This commit is contained in:
Kunthawat Greethong
2026-05-24 20:58:36 +07:00
parent 971834e539
commit 4e227f6295
18 changed files with 125 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.context/reports/index.json
View File

@@ -1,15 +1,15 @@
{ {
"version": 1, "version": 1,
"updatedAt": "2026-05-24T13:16:51.251Z", "updatedAt": "2026-05-24T13:57:19.926Z",
"entries": [ "entries": [
{ {
"id": "2026-05-24T13-16-51-249Z-hero-section-fix-plan", "id": "2026-05-24T13-16-51-249Z-hero-section-fix-plan",
"category": "plan", "category": "plan",
"title": "Hero Section Fix Plan", "title": "Hero Section Fix Plan",
"summary": "# Plan: Fix Hero Section Structure for All Product Pages ## Context After analyzing all product pages, found **3 major structural issues**: ### Issue 1: Section Class Order Wrong **Problem:** Many pages have `bg-gradient...` BEFORE `relative` in section class ```html <!-- WRONG --> <section class=\"bg-gradient-to-br fr…", "summary": "# Plan: Fix Hero Section Structure for All Product Pages ## Context Analyzed all 23 product pages against reference `armflex.astro`. Found **4 pages with wrong layout** (Content LEFT, Image RIGHT) and **14 pages with structural issues**. ### Layout Analysis Results | Status | Pages | |--------|-------| | **WRONG LAYOU…",
"searchText": "plan Hero Section Fix Plan # Plan: Fix Hero Section Structure for All Product Pages ## Context After analyzing all product pages, found **3 major structural issues**: ### Issue 1: Section Class Order Wrong **Problem:** Many pages have `bg-gradient...` BEFORE `relative` in section class ```html <!-- WRONG --> <section class=\"bg-gradient-to-br fr… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false", "searchText": "plan Hero Section Fix Plan # Plan: Fix Hero Section Structure for All Product Pages ## Context Analyzed all 23 product pages against reference `armflex.astro`. Found **4 pages with wrong layout** (Content LEFT, Image RIGHT) and **14 pages with structural issues**. ### Layout Analysis Results | Status | Pages | |--------|-------| | **WRONG LAYOU… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false",
"createdAt": "2026-05-24T13:16:51.249Z", "createdAt": "2026-05-24T13:16:51.249Z",
"updatedAt": "2026-05-24T13:16:51.249Z", "updatedAt": "2026-05-24T13:57:19.925Z",
"sourcePath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md", "sourcePath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
"sourceLabel": "todo.md", "sourceLabel": "todo.md",
"viewerPath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md", "viewerPath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",

BIN
.context/reports/reports.db-shm
View File

Binary file not shown.

BIN
.context/reports/reports.db-wal
View File

Binary file not shown.

18
.context/session-state.json
View File

@@ -2,12 +2,10 @@
"$schema": "session-state-v2", "$schema": "session-state-v2",
"project": "dealplustech-emdash", "project": "dealplustech-emdash",
"cwd": "/Users/kunthawatgreethong/Gitea/dealplustech-emdash", "cwd": "/Users/kunthawatgreethong/Gitea/dealplustech-emdash",
"ts": "2026-05-24T08:31:59.084Z", "ts": "2026-05-24T13:32:37.953Z",
"continue": "\n\n## Goal\nRedesign the Deal Plus Tech website with modern animation effects and manage product brand pages.\n\n## Constraints & Preferences\n- Use green-only color scheme (no orange accent in hero background)\n- Remove small dot grid background from hero\n- Reduce hero section height for better proportio", "continue": "\n\n## Goal\nRedesign the Deal Plus Tech website with modern animation effects, fix image display issues across all product pages, and refine the all-products page functionality.\n\n## Constraints & Preferences\n- Use green-only color scheme (no orange accent in hero background)\n- Remove small dot grid ba",
"task": "push to gitea to update the change.", "task": "http://localhost:3100/%E0%B8%AD%E0%B8%B8%E0%B8%9B%E0%B8%81%E0%B8%A3%E0%B8%93%E0%B9%8C%E0%B8%94%E0%B8%B1%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%A5%E0%B8%B4%E0%B8%87 1. Change the url to /ตู้ดับเพลิง 2. อุปกร",
"files": [ "files": [
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/aeroflex.astro",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/maxflex.astro",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/all-products.astro", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/all-products.astro",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/favicon.svg", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/favicon.svg",
@@ -15,16 +13,16 @@
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/logo.png", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/logo.png",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles.svg", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles.svg",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles_000C.jpg", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles_000C.jpg",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe.svg" "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe.svg",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe_000C.jpg",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/thermobreak/thermobreak-solarblock.png"
], ],
"files_read": [ "files_read": [
"/Users/kunthawatgreethong/.agents/skills/huashu-design/SKILL.md", "/Users/kunthawatgreethong/.agents/skills/huashu-design/SKILL.md",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/astro.config.mjs", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/astro.config.mjs",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/ฉนวนหุ้มท่อ.astro", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/ฉนวนหุ้มท่อ.astro",
"CLAUDE.md", "CLAUDE.md",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/รั้วเทวดา.astro", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/layouts/BaseLayout.astro",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/ระบบรั้วไวน์แมน.astro", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/armflex.astro"
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/all-products.astro",
"/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/components/common/Header.astro"
] ]
} }

128
.context/todo.md
View File

@@ -2,73 +2,74 @@
## Context ## Context
After analyzing all product pages, found **3 major structural issues**: Analyzed all 23 product pages against reference `armflex.astro`. Found **4 pages with wrong layout** (Content LEFT, Image RIGHT) and **14 pages with structural issues**.
### Issue 1: Section Class Order Wrong ### Layout Analysis Results
**Problem:** Many pages have `bg-gradient...` BEFORE `relative` in section class
```html
<!-- WRONG -->
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white relative overflow-hidden">
<!-- CORRECT --> | Status | Pages |
<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"> |--------|-------|
``` | **WRONG LAYOUT** (4 pages) | ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-upvc |
| **OK Layout** (19 pages) | All others |
### Issue 2: Gradient Style Differs ### Structural Differences from Reference
**Problem:** Some pages use 2-stop gradient, others use 3-stop with `via-`
- Reference uses: `from-primary-800 via-primary-700 to-primary-900`
- Some use: `from-primary-700 to-primary-600` (2-stop)
### Issue 3: Orphan Div Without Closing | Element | Reference (armflex) | Problem Pages |
**Problem:** Pages ท่อ-hdpe, ท่อ-upvc, ท่อ-ppr-scg have: |---------|---------------------|---------------|
```html | Section padding | `py-16 lg:py-24` | Missing `lg:py-24` |
</div> <!-- closes animated background --> | Floating particles | 3 particles | 5 particles |
<div class="max-w-7xl..."> <!-- orphan div outside section --> | Wave SVGs | 1 SVG | 2 SVGs |
``` | Image wrapper | `<div class="lg:sticky lg:top-24">` | `<div class="">` (empty class) |
| Image container | `bg-white/10 p-2` | Missing classes |
But reference has: | Content div | `<div>` | `<div class="">` (empty class) |
```html | Badge span | Multiline | Inline |
</div> <!-- closes animated background -->
<div class="max-w-7xl..."> <!-- inside section -->
</section>
```
--- ---
## Phase 1: Create Reference Hero Template ## Phase 1: Fix Layout (Content LEFT, Image RIGHT)
Extract the correct hero structure from `armflex.astro`: **Pages with wrong order (4 pages):**
- ท่อ-hdpe.astro
- ท่อ-ppr-scg.astro
- ท่อ-ppr-thai-ppr.astro
- ท่อ-upvc.astro
| Element | Correct Value | **Fix:** Swap image and content div positions in the grid, OR remove order classes and reorder HTML.
|---------|---------------|
| 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 bg div | `<div class="absolute inset-0 overflow-hidden pointer-events-none">` with mesh + particles + wave |
| Content wrapper | `<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">` |
| Grid | `<div class="grid lg:grid-cols-2 gap-12 items-start">` |
| Image container | `<div class="lg:sticky lg:top-24">` + `<div class="rounded-2xl overflow-hidden bg-white/10 p-2">` |
| Content div | `<div>` (no extra classes) |
| Buttons | Orange LINE, White phone, White price (auto) |
--- ---
## Phase 2: Fix All Product Pages ## Phase 2: Fix Image Container Structure
**Pages to fix (23 product pages):** **Pages missing `bg-white/10 p-2` on image container (14 pages):**
1. ท่อ-ppr-scg.astro, ท่อ-ppr-thai-ppr.astro, ท่อ-hdpe.astro - water-pump, water-treatment, pipe-coupling, durgo-avvs, grilles, realflex
2. ท่อ-upvc.astro, ท่อ-syler.astro, ท่อ-xy-lent.astro - เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr, เทอร์โมเบรค-thermobreak
3. วาล์ว-valve.astro, durgo-avvs.astro, grilles.astro - ตู้ดับเพลิง, เม็ดกรู๊ฟ-คับปลิ้ง, ระบบน้ำ, รั้วเทวดา, ระบบรั้วไวน์แมน
4. pipe-coupling.astro, water-pump.astro, water-treatment.astro - วาล์ว-valve, aeroflex, maxflex
5. realflex.astro, รั้วเทวดา.astro, ระบบรั้วไวน์แมน.astro
6. เครื่องเชื่อม-hdpe.astro, เครื่องเชื่อม-ppr.astro
7. เทอร์โมเบรค-thermobreak.astro, เม็กกรู๊ฟ-คับปลิ้ง.astro
8. ตู้ดับเพลิง.astro, aeroflex.astro, maxflex.astro
**For each page:** **Fix:** Add `bg-white/10 p-2` to image container div.
1. Fix section class order → put `relative` first
2. Change gradient to 3-stop → `from-primary-800 via-primary-700 to-primary-900` ---
3. Add `py-16 lg:py-24` padding
4. Ensure content wrapper has `relative z-10` ## Phase 3: Fix Section Padding
5. Add sticky wrapper around image
**Pages missing `lg:py-24` (all product pages except armflex, aeroflex, maxflex):**
**Fix:** Add `lg:py-24` to section class for all 20 pages.
---
## Phase 4: Clean Up Empty Classes
**Pages with empty `class=""` on grid children (most pages):**
**Fix:** Remove empty `class=""` attributes.
---
## Phase 5: Simplify Animated Background
**Pages with 5 particles and 2 wave SVGs should be simplified to match reference:**
- Reduce particles to 3
- Remove second wave SVG
--- ---
@@ -77,21 +78,16 @@ Extract the correct hero structure from `armflex.astro`:
| File | Action | | File | Action |
|------|--------| |------|--------|
| src/pages/armflex.astro | Reference (read-only) | | src/pages/armflex.astro | Reference (read-only) |
| src/pages/ท่อ-ppr-thai-ppr.astro | Fix section class order | | src/pages/ท่อ-hdpe.astro | Fix layout + image structure |
| src/pages/ท่อ-hdpe.astro | Fix orphan div | | src/pages/ท่อ-ppr-scg.astro | Fix layout + image structure |
| All 23 product pages | Apply standard hero | | src/pages/ท่อ-ppr-thai-ppr.astro | Fix layout + image structure |
| src/pages/ท่อ-upvc.astro | Fix layout + image structure |
| 14 other pages | Fix image structure, padding, empty classes |
--- ---
## Verification ## Verification
1. Build succeeds: `npm run build` 1. `npm run build` succeeds
2. Check for duplicate `relative` or orphaned `<div>` 2. Visual check on dev server for all 23 product pages
3. Verify buttons have correct classes 3. Confirm image is on LEFT, content is on RIGHT in all pages
4. Visual check on dev server
---
## Implementation Notes
Will fix each page individually to preserve unique content while applying standard hero structure.

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 คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล"> <BaseLayout title="ระบบวาล์วเติมอากาศ DURGO AVVs" description="จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVs คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <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="grid lg:grid-cols-2 gap-12 items-start">
<div class=""> <div>
<div class="lg:sticky lg:top-24"> <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" /> <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> </div>
<div class=""> <div>
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">วาล์วเติมอากาศ</span> <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> <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"> <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) และอลูมิเนียม คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล"> <BaseLayout title="กริลแอร์พลาสติก (Grilles air plastic)" description="จำหน่ายกริลแอร์พลาสติก (ABS) และอลูมิเนียม คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <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="grid lg:grid-cols-2 gap-12 items-start">
<div class=""> <div>
<div class="lg:sticky lg:top-24"> <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" /> <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> </div>
<div class=""> <div>
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">กริลแอร์</span> <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> <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"> <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) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล"> <BaseLayout title="ข้อต่อท่อ SMC (Pipe Coupling)" description="จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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>

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

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="ปั๊มน้ำ (Water Pump)" description="จำหน่ายปั๊มน้ำ (Water Pump) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล"> <BaseLayout title="ปั๊มน้ำ (Water Pump)" description="จำหน่ายปั๊มน้ำ (Water Pump) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <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="grid lg:grid-cols-2 gap-12 items-start">
<div class=""> <div>
<div class="lg:sticky lg:top-24"> <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" /> <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> </div>
<div class=""> <div>
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ปั๊มน้ำ</span> <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> <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"> <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="ท่อ Syler | ท่อเหล็กบุพีอี" description="จำหน่ายท่อ Syler ท่อเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล"> <BaseLayout title="ท่อ Syler | ท่อเหล็กบุพีอี" description="จำหน่ายท่อ Syler ท่อเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <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="grid lg:grid-cols-2 gap-12 items-start">
<div class=""> <div>
<div class="lg:sticky lg:top-24"> <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" /> <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> </div>
<div class=""> <div>
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ Syler</span> <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> <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"> <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">

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

@@ -40,8 +40,12 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</svg> </svg>
</div> </div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <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="grid lg:grid-cols-2 gap-12 items-start"><div class="lg:sticky lg:top-24">
<div class="order-2 lg:order-1"> <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>
<div>
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ UPVC</span> <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> <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"> <p class="text-lg text-primary-100 mb-8 leading-relaxed">
@@ -83,12 +87,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
</div> </div>
</div> </div>
<div class="order-1 lg:order-2"> <div class="order-1 lg:order-2">
<div class="lg:sticky lg:top-24"> <div class="lg:sticky</div>
<div class="rounded-2xl overflow-hidden">
<img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="ท่อ UPVC" class="w-full" loading="eager" />
</div>
</div>
</div>
</div> </div>
</section> </section>

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

@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
<BaseLayout title="ระบบน้ำ - วาล์ว ปั๊มน้ำ ระบบกรองน้ำ" description="ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล"> <BaseLayout title="ระบบน้ำ - วาล์ว ปั๊มน้ำ ระบบกรองน้ำ" description="ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Category Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล"> <BaseLayout title="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" description="จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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"> <BaseLayout title="เครื่องเชื่อมท่อ HDPE (HDPE Pipe Welding Machine)" description="จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน เครื่องเชื่อมแบบ Butt Fusion และ Electrofusion">
<main class="bg-white min-h-screen"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <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="grid lg:grid-cols-2 gap-12 items-start">
<div class=""> <div>
<div class="lg:sticky lg:top-24"> <div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden bg-white/10"> <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" /> <img src="/images/HDPE-welding-crop.jpg" alt="เครื่องเชื่อมท่อ HDPE" class="w-full" width="600" height="400" loading="eager" />
</div> </div>
</div> </div>
<div class=""> <div>
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">เครื่องเชื่อมท่อ</span> <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> <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"> <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"> <main class="bg-white min-h-screen">
<!-- Product Hero Section --> <!-- 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 --> <!-- Animated Background -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <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> <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>