4e227f6295
Phase 1: Fixed layout (4 pages) - Image LEFT, Content RIGHT - ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-upvc Phase 2: Added bg-white/10 p-2 to image containers Phase 3: Added lg:py-24 padding to sections All pages now match armflex.astro reference structure.
93 lines
3.0 KiB
Markdown
93 lines
3.0 KiB
Markdown
# Plan: Fix Hero Section Structure for All Product Pages
|
|
|
|
## Context
|
|
|
|
Analyzed all 23 product pages against reference `armflex.astro`. Found **4 pages with wrong layout** (Content LEFT, Image RIGHT) and **14 pages with structural issues**.
|
|
|
|
### Layout Analysis Results
|
|
|
|
| Status | Pages |
|
|
|--------|-------|
|
|
| **WRONG LAYOUT** (4 pages) | ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-upvc |
|
|
| **OK Layout** (19 pages) | All others |
|
|
|
|
### Structural Differences from Reference
|
|
|
|
| Element | Reference (armflex) | Problem Pages |
|
|
|---------|---------------------|---------------|
|
|
| Section padding | `py-16 lg:py-24` | Missing `lg:py-24` |
|
|
| Floating particles | 3 particles | 5 particles |
|
|
| Wave SVGs | 1 SVG | 2 SVGs |
|
|
| Image wrapper | `<div class="lg:sticky lg:top-24">` | `<div class="">` (empty class) |
|
|
| Image container | `bg-white/10 p-2` | Missing classes |
|
|
| Content div | `<div>` | `<div class="">` (empty class) |
|
|
| Badge span | Multiline | Inline |
|
|
|
|
---
|
|
|
|
## Phase 1: Fix Layout (Content LEFT, Image RIGHT)
|
|
|
|
**Pages with wrong order (4 pages):**
|
|
- ท่อ-hdpe.astro
|
|
- ท่อ-ppr-scg.astro
|
|
- ท่อ-ppr-thai-ppr.astro
|
|
- ท่อ-upvc.astro
|
|
|
|
**Fix:** Swap image and content div positions in the grid, OR remove order classes and reorder HTML.
|
|
|
|
---
|
|
|
|
## Phase 2: Fix Image Container Structure
|
|
|
|
**Pages missing `bg-white/10 p-2` on image container (14 pages):**
|
|
- water-pump, water-treatment, pipe-coupling, durgo-avvs, grilles, realflex
|
|
- เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr, เทอร์โมเบรค-thermobreak
|
|
- ตู้ดับเพลิง, เม็ดกรู๊ฟ-คับปลิ้ง, ระบบน้ำ, รั้วเทวดา, ระบบรั้วไวน์แมน
|
|
- วาล์ว-valve, aeroflex, maxflex
|
|
|
|
**Fix:** Add `bg-white/10 p-2` to image container div.
|
|
|
|
---
|
|
|
|
## Phase 3: Fix Section Padding
|
|
|
|
**Pages missing `lg:py-24` (all product pages except armflex, aeroflex, maxflex):**
|
|
|
|
**Fix:** Add `lg:py-24` to section class for all 20 pages.
|
|
|
|
---
|
|
|
|
## Phase 4: Clean Up Empty Classes
|
|
|
|
**Pages with empty `class=""` on grid children (most pages):**
|
|
|
|
**Fix:** Remove empty `class=""` attributes.
|
|
|
|
---
|
|
|
|
## Phase 5: Simplify Animated Background
|
|
|
|
**Pages with 5 particles and 2 wave SVGs should be simplified to match reference:**
|
|
- Reduce particles to 3
|
|
- Remove second wave SVG
|
|
|
|
---
|
|
|
|
## Critical Files
|
|
|
|
| File | Action |
|
|
|------|--------|
|
|
| src/pages/armflex.astro | Reference (read-only) |
|
|
| src/pages/ท่อ-hdpe.astro | Fix layout + image structure |
|
|
| src/pages/ท่อ-ppr-scg.astro | Fix layout + image structure |
|
|
| src/pages/ท่อ-ppr-thai-ppr.astro | Fix layout + image structure |
|
|
| src/pages/ท่อ-upvc.astro | Fix layout + image structure |
|
|
| 14 other pages | Fix image structure, padding, empty classes |
|
|
|
|
---
|
|
|
|
## Verification
|
|
|
|
1. `npm run build` succeeds
|
|
2. Visual check on dev server for all 23 product pages
|
|
3. Confirm image is on LEFT, content is on RIGHT in all pages |