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.
3.0 KiB
3.0 KiB
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
npm run buildsucceeds- Visual check on dev server for all 23 product pages
- Confirm image is on LEFT, content is on RIGHT in all pages