# Plan: Fix Hero Section Structure for All Product Pages

## Context

Analyzed all 23 product pages against reference `armflex.astro`.

### Reference Structure (armflex.astro)

```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">
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <!-- 3 floating particles -->
    <!-- 1 wave SVG -->
  </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="lg:sticky lg:top-24">
        <div class="rounded-2xl overflow-hidden bg-white/10 p-2">
          <img ... />
        </div>
      </div>
      <div>
        <!-- Content: badge, h1, p, buttons -->
      </div>
    </div>
  </div>
</section>
```

---

## Issues Found

### Issue 1: ORDER CLASSES (9 pages)
**Problem:** Order classes swap image/content positions differently on mobile vs desktop.

| Page | Current Order | Result |
|------|--------------|--------|
| durgo-avvs | order-2 lg:order-1 | Image on right (desktop) |
| grilles | order-2 lg:order-1 | Image on right (desktop) |
| water-pump | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-hdpe | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-ppr-scg | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-ppr-thai-ppr | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-syler | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-upvc | order-2 lg:order-1 | Image on right (desktop) |
| เครื่องเชื่อม-hdpe | order-2 lg:order-1 | Image on right (desktop) |

**Fix:** Remove order classes entirely. Image will be on LEFT on ALL screen sizes.

---

### Issue 2: MISSING IMAGE CONTAINER CLASSES (7 pages)

| Page | Fix Needed |
|------|-----------|
| durgo-avvs | Add `bg-white/10 p-2` to image container |
| grilles | Add `bg-white/10 p-2` to image container |
| water-pump | Add `bg-white/10 p-2` to image container |
| ท่อ-hdpe | Add `bg-white/10 p-2` to image container |
| ท่อ-ppr-scg | Add `bg-white/10 p-2` to image container |
| ท่อ-ppr-thai-ppr | Add `bg-white/10 p-2` to image container |
| ท่อ-upvc | Add `bg-white/10 p-2` to image container |
| ท่อ-syler | Add `bg-white/10 p-2` to image container |

---

### Issue 3: MISSING SECTION PADDING (7 pages)

| Page | Fix Needed |
|------|-----------|
| durgo-avvs | Add `lg:py-24` to section class |
| grilles | Add `lg:py-24` to section class |
| pipe-coupling | Add `lg:py-24` to section class |
| ท่อ-syler | Add `lg:py-24` to section class |
| ระบบน้ำ | Add `lg:py-24` to section class |
| วาล์ว-valve | Add `lg:py-24` to section class |
| เครื่องเชื่อม-hdpe | Add `lg:py-24` to section class |
| เครื่องเชื่อม-ppr | Add `lg:py-24` to section class |

---

## Pages Status Summary

| Page | Order Class | Image Container | Section Padding |
|------|-------------|-----------------|-----------------|
| aeroflex | ✅ OK | ✅ OK | ✅ OK |
| armflex | ✅ OK | ✅ OK | ✅ OK |
| maxflex | ✅ OK | ✅ OK | ✅ OK |
| pipe-coupling | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
| realflex | ✅ OK | ✅ OK | ✅ OK |
| water-treatment | ✅ OK | ✅ OK | ✅ OK |
| ตู้ดับเพลิง | ✅ OK | ✅ OK | ✅ OK |
| ระบบน้ำ | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
| ระบบรั้วไวน์แมน | ✅ OK | ✅ OK | ✅ OK |
| รั้วเทวดา | ✅ OK | ✅ OK | ✅ OK |
| เทอร์โมเบรค-thermobreak | ✅ OK | ✅ OK | ✅ OK |
| เม็ดกรู๊ฟ-คับปลิ้ง | ✅ OK | ✅ OK | ✅ OK |
| ท่อ-xy-lent | ✅ OK | ✅ OK | ✅ OK |
| durgo-avvs | ❌ WRONG | ❌ Missing | ❌ Missing |
| grilles | ❌ WRONG | ❌ Missing | ❌ Missing |
| water-pump | ❌ WRONG | ❌ Missing | ❌ Missing |
| ท่อ-hdpe | ❌ WRONG | ❌ Missing | ✅ OK |
| ท่อ-ppr-scg | ❌ WRONG | ❌ Missing | ✅ OK |
| ท่อ-ppr-thai-ppr | ❌ WRONG | ❌ Missing | ✅ OK |
| ท่อ-syler | ❌ WRONG | ❌ Missing | ❌ Missing |
| ท่อ-upvc | ❌ WRONG | ❌ Missing | ✅ OK |
| เครื่องเชื่อม-hdpe | ❌ WRONG | ✅ OK | ❌ Missing |
| วาล์ว-valve | ✅ OK | ✅ OK | ❌ Missing |
| เครื่องเชื่อม-ppr | ✅ OK | ✅ OK | ❌ Missing |

---

## Implementation

### Fix Order (to avoid conflicts):
1. **First:** Remove order classes from all affected pages
2. **Second:** Add missing image container classes
3. **Third:** Add missing section padding

### Fix Code for each page:

```javascript
// Remove order classes
.replace(/order-[12] lg:order-[12]/g, '')

// Add image container classes
.replace('class="rounded-2xl overflow-hidden"', 'class="rounded-2xl overflow-hidden bg-white/10 p-2"')

// Add section padding
.replace('py-16 overflow-hidden">', 'py-16 lg:py-24 overflow-hidden">')
```

---

## Verification

1. `npm run build` succeeds
2. Visual check on dev server (mobile AND desktop)
3. Image should be on LEFT side in ALL pages