dealplustech-astroreal/.context/todo.md

Plan: Fix Hero Section Structure for All Product Pages

Context

Analyzed all 23 product pages against reference armflex.astro.

Reference Structure (armflex.astro)

<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:

// 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