diff --git a/.context/reports/index.json b/.context/reports/index.json index 484e565..e909c8a 100644 --- a/.context/reports/index.json +++ b/.context/reports/index.json @@ -1,15 +1,15 @@ { "version": 1, - "updatedAt": "2026-05-24T13:16:51.251Z", + "updatedAt": "2026-05-24T13:57:19.926Z", "entries": [ { "id": "2026-05-24T13-16-51-249Z-hero-section-fix-plan", "category": "plan", "title": "Hero Section Fix Plan", - "summary": "# 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
-
+### Layout Analysis Results - -
-``` +| 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 - -
-``` - -But reference has: -```html -
-
-
-``` +| 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 | `
` | `
` (empty class) | +| Image container | `bg-white/10 p-2` | Missing classes | +| Content div | `
` | `
` (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 | `
` with mesh + particles + wave | -| Content wrapper | `
` | -| Grid | `
` | -| Image container | `
` + `
` | -| Content 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 `
` -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. \ No newline at end of file +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 \ No newline at end of file diff --git a/src/pages/durgo-avvs.astro b/src/pages/durgo-avvs.astro index 675f965..fffdfb8 100644 --- a/src/pages/durgo-avvs.astro +++ b/src/pages/durgo-avvs.astro @@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
-
+
DURGO AVVs
-
+
วาล์วเติมอากาศ

ระบบวาล์วเติมอากาศ DURGO AVVs

diff --git a/src/pages/grilles.astro b/src/pages/grilles.astro index a479a2a..56bb0f0 100644 --- a/src/pages/grilles.astro +++ b/src/pages/grilles.astro @@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
+
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
-
+
กริลแอร์พลาสติก
-
+
กริลแอร์

กริลแอร์ (Grilles air)

diff --git a/src/pages/pipe-coupling.astro b/src/pages/pipe-coupling.astro index 5019ea0..588f96d 100644 --- a/src/pages/pipe-coupling.astro +++ b/src/pages/pipe-coupling.astro @@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
+
diff --git a/src/pages/water-pump.astro b/src/pages/water-pump.astro index cbde3f8..c7840dd 100644 --- a/src/pages/water-pump.astro +++ b/src/pages/water-pump.astro @@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
-
+
ปั๊มน้ำ (Water Pump)
-
+
ปั๊มน้ำ

ปั๊มน้ำ (Water Pump)

diff --git a/src/pages/ท่อ-hdpe.astro b/src/pages/ท่อ-hdpe.astro index 562f243..2c36039 100644 --- a/src/pages/ท่อ-hdpe.astro +++ b/src/pages/ท่อ-hdpe.astro @@ -40,8 +40,12 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
-
+
+
+ ท่อ HDPE (High Density Polyethylene) +
+
+
ท่อ HDPE

ท่อ HDPE (High Density Polyethylene)

@@ -83,12 +87,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
-
- ท่อ HDPE (High Density Polyethylene) -
-
-
+
-
-
+
+
+ ท่อ PPR ตราช้าง (SCG) +
+
+
ท่อ PPR

ท่อ PPR ตราช้าง (SCG)

@@ -83,12 +87,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
-
- ท่อ PPR ตราช้าง (SCG) -
-
-
+
-
-
+
+
+ ไทยพีพีอาร์ (Thai PPR) +
+
+
ท่อ PPR

ไทยพีพีอาร์ (Thai PPR)

@@ -83,12 +87,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
-
- ไทยพีพีอาร์ (Thai PPR) -
-
-
+
-
+
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
-
+
ท่อ Syler
-
+
ท่อ Syler

ท่อ Syler | ท่อเหล็กบุพีอี

diff --git a/src/pages/ท่อ-upvc.astro b/src/pages/ท่อ-upvc.astro index 522c6ac..bd97e25 100644 --- a/src/pages/ท่อ-upvc.astro +++ b/src/pages/ท่อ-upvc.astro @@ -40,8 +40,12 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
-
+
+
+ ท่อ UPVC +
+
+
ท่อ UPVC

ท่อ UPVC (Unplasticized Polyvinyl Chloride)

@@ -83,12 +87,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';

-
-
- ท่อ UPVC -
-
-
+
-
+
diff --git a/src/pages/วาล์ว-valve.astro b/src/pages/วาล์ว-valve.astro index 3fcfe65..f5957a4 100644 --- a/src/pages/วาล์ว-valve.astro +++ b/src/pages/วาล์ว-valve.astro @@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
diff --git a/src/pages/เครื่องเชื่อม-hdpe.astro b/src/pages/เครื่องเชื่อม-hdpe.astro index 7285de1..9fb2bc0 100644 --- a/src/pages/เครื่องเชื่อม-hdpe.astro +++ b/src/pages/เครื่องเชื่อม-hdpe.astro @@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
@@ -56,13 +56,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
-
+
เครื่องเชื่อมท่อ HDPE
-
+
เครื่องเชื่อมท่อ

เครื่องเชื่อมท่อ HDPE

diff --git a/src/pages/เครื่องเชื่อม-ppr.astro b/src/pages/เครื่องเชื่อม-ppr.astro index 024d5a6..d2ba39d 100644 --- a/src/pages/เครื่องเชื่อม-ppr.astro +++ b/src/pages/เครื่องเชื่อม-ppr.astro @@ -9,7 +9,7 @@ import Footer from '@/components/common/Footer.astro';

-
+