6992754699
Changes: - Section class: relative now first, 3-stop gradient (from-primary-800 via-primary-700 to-primary-900) - Added py-16 lg:py-24 padding - Added relative z-10 to content wrapper - All 22 product pages standardized Reference: armflex.astro hero section structure
97 lines
3.5 KiB
Markdown
97 lines
3.5 KiB
Markdown
# 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
|
|
```html
|
|
<!-- 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:
|
|
```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>
|
|
```
|
|
|
|
---
|
|
|
|
## 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. |