dealplustech-astroreal/.context/todo.md

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

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

</div>  <!-- closes animated background -->
<div class="max-w-7xl...">  <!-- orphan div outside section -->

But reference has:

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