# 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 LAYOUT** (4 pages) | ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-upvc |
| **OK Layout** (19 pages) | All others |

### Structural Differences from Reference

| Element | Reference (armflex) | Problem Pages |
|---------|---------------------|---------------|
| Section padding | `py-16 lg:py-24` | Missing `lg:py-24` |
| Floating particles | 3 particles | 5 particles |
| 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 |
| Content div | `<div>` | `<div class="">` (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