daa3d56027
Changes: - Removed order-2 lg:order-1 from 9 pages (image now on LEFT) - Added bg-white/10 p-2 to image containers in 8 pages - Added lg:py-24 padding to sections in 8 pages Pages fixed: durgo-avvs, grilles, water-pump, pipe-coupling, ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-syler, ท่อ-upvc, ระบบน้ำ, วาล์ว-valve, เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr
141 lines
5.1 KiB
Markdown
141 lines
5.1 KiB
Markdown
# 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 |