Fix hero section structure across all product pages
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.
This commit is contained in:
Kunthawat Greethong
128
.context/todo.md
128
.context/todo.md
@@ -2,73 +2,74 @@
|
||||
|
||||
## Context
|
||||
|
||||
After analyzing all product pages, found **3 major structural issues**:
|
||||
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**.
|
||||
|
||||
### Issue 1: Section Class Order Wrong
|
||||
**Problem:** Many pages have `bg-gradient...` BEFORE `relative` in section class
|
||||
```html
|
||||
<!-- WRONG -->
|
||||
<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white relative overflow-hidden">
|
||||
### Layout Analysis Results
|
||||
|
||||
<!-- 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">
|
||||
```
|
||||
| Status | Pages |
|
||||
|--------|-------|
|
||||
| **WRONG LAYOUT** (4 pages) | ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-upvc |
|
||||
| **OK Layout** (19 pages) | All others |
|
||||
|
||||
### 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)
|
||||
### Structural Differences from Reference
|
||||
|
||||
### Issue 3: Orphan Div Without Closing
|
||||
**Problem:** Pages ท่อ-hdpe, ท่อ-upvc, ท่อ-ppr-scg have:
|
||||
```html
|
||||
</div> <!-- closes animated background -->
|
||||
<div class="max-w-7xl..."> <!-- orphan div outside section -->
|
||||
```
|
||||
|
||||
But reference has:
|
||||
```html
|
||||
</div> <!-- closes animated background -->
|
||||
<div class="max-w-7xl..."> <!-- inside section -->
|
||||
</section>
|
||||
```
|
||||
| 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: Create Reference Hero Template
|
||||
## Phase 1: Fix Layout (Content LEFT, Image RIGHT)
|
||||
|
||||
Extract the correct hero structure from `armflex.astro`:
|
||||
**Pages with wrong order (4 pages):**
|
||||
- ท่อ-hdpe.astro
|
||||
- ท่อ-ppr-scg.astro
|
||||
- ท่อ-ppr-thai-ppr.astro
|
||||
- ท่อ-upvc.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) |
|
||||
**Fix:** Swap image and content div positions in the grid, OR remove order classes and reorder HTML.
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Fix All Product Pages
|
||||
## Phase 2: Fix Image Container Structure
|
||||
|
||||
**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
|
||||
**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
|
||||
|
||||
**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
|
||||
**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
|
||||
|
||||
---
|
||||
|
||||
@@ -77,21 +78,16 @@ Extract the correct hero structure from `armflex.astro`:
|
||||
| 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 |
|
||||
| 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. 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.
|
||||
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
|
||||
Reference in New Issue
Block a user