# 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 from-primary-700 to-primary-600 text-white  relative overflow-hidden">

<!-- CORRECT -->
<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">
```

### Issue 2: Gradient Style Differs
**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
**Problem:** Pages ท่อ-hdpe, ท่อ-upvc, ท่อ-ppr-scg have:
```html
</div>  <!-- closes animated background -->
<div class="max-w-7xl...">  <!-- orphan div outside section -->
```

But reference has:
```html
</div>  <!-- closes animated background -->
<div class="max-w-7xl...">  <!-- inside section -->
</section>
```

---

## Phase 1: Create Reference Hero Template

Extract the correct hero structure from `armflex.astro`:

| Element | Correct Value |
|---------|---------------|
| 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

**Pages to fix (23 product pages):**
1. ท่อ-ppr-scg.astro, ท่อ-ppr-thai-ppr.astro, ท่อ-hdpe.astro
2. ท่อ-upvc.astro, ท่อ-syler.astro, ท่อ-xy-lent.astro
3. วาล์ว-valve.astro, durgo-avvs.astro, grilles.astro
4. pipe-coupling.astro, water-pump.astro, water-treatment.astro
5. realflex.astro, รั้วเทวดา.astro, ระบบรั้วไวน์แมน.astro
6. เครื่องเชื่อม-hdpe.astro, เครื่องเชื่อม-ppr.astro
7. เทอร์โมเบรค-thermobreak.astro, เม็กกรู๊ฟ-คับปลิ้ง.astro
8. ตู้ดับเพลิง.astro, aeroflex.astro, maxflex.astro

**For each page:**
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`
5. Add sticky wrapper around image

---

## Critical Files

| File | Action |
|------|--------|
| src/pages/armflex.astro | Reference (read-only) |
| src/pages/ท่อ-ppr-thai-ppr.astro | Fix section class order |
| src/pages/ท่อ-hdpe.astro | Fix orphan div |
| All 23 product pages | Apply standard hero |

---

## Verification

1. Build succeeds: `npm run build`
2. Check for duplicate `relative` or orphaned `<div>`
3. Verify buttons have correct classes
4. Visual check on dev server

---

## Implementation Notes

Will fix each page individually to preserve unique content while applying standard hero structure.