` (empty class) |
| Image container | `bg-white/10 p-2` | Missing classes |
| Content div | `
` | `
` (empty class) |
| Badge span | Multiline | Inline |
---
## Phase 1: Fix Layout (Content LEFT, Image RIGHT)
**Pages with wrong order (4 pages):**
- ท่อ-hdpe.astro
- ท่อ-ppr-scg.astro
- ท่อ-ppr-thai-ppr.astro
- ท่อ-upvc.astro
**Fix:** Swap image and content div positions in the grid, OR remove order classes and reorder HTML.
---
## Phase 2: Fix Image Container Structure
**Pages missing `bg-white/10 p-2` on image container (14 pages):**
- water-pump, water-treatment, pipe-coupling, durgo-avvs, grilles, realflex
- เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr, เทอร์โมเบรค-thermobreak
- ตู้ดับเพลิง, เม็ดกรู๊ฟ-คับปลิ้ง, ระบบน้ำ, รั้วเทวดา, ระบบรั้วไวน์แมน
- วาล์ว-valve, aeroflex, maxflex
**Fix:** Add `bg-white/10 p-2` to image container div.
---
## Phase 3: Fix Section Padding
**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
---
## Critical Files
| File | Action |
|------|--------|
| src/pages/armflex.astro | Reference (read-only) |
| src/pages/ท่อ-hdpe.astro | Fix layout + image structure |
| src/pages/ท่อ-ppr-scg.astro | Fix layout + image structure |
| 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
1. `npm run build` succeeds
2. Visual check on dev server for all 23 product pages
3. Confirm image is on LEFT, content is on RIGHT in all pages