From 4e227f62952fa4366958fa42b3d9657dfa182354 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Sun, 24 May 2026 20:58:36 +0700 Subject: [PATCH] Fix hero section structure across all product pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .context/reports/index.json | 8 +- .context/reports/reports.db-shm | Bin 32768 -> 32768 bytes .context/reports/reports.db-wal | Bin 61832 -> 78312 bytes .context/session-state.json | 18 ++--- .context/todo.md | 128 ++++++++++++++++---------------- src/pages/durgo-avvs.astro | 8 +- src/pages/grilles.astro | 8 +- src/pages/pipe-coupling.astro | 2 +- src/pages/water-pump.astro | 8 +- src/pages/ท่อ-hdpe.astro | 15 ++-- src/pages/ท่อ-ppr-scg.astro | 15 ++-- src/pages/ท่อ-ppr-thai-ppr.astro | 15 ++-- src/pages/ท่อ-syler.astro | 8 +- src/pages/ท่อ-upvc.astro | 15 ++-- src/pages/ระบบน้ำ.astro | 2 +- src/pages/วาล์ว-valve.astro | 2 +- src/pages/เครื่องเชื่อม-hdpe.astro | 6 +- src/pages/เครื่องเชื่อม-ppr.astro | 2 +- 18 files changed, 125 insertions(+), 135 deletions(-) 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
Xweec!{hRE3MLXuGyKyT|E4&_ImWwPEyqa zjRFIZx&M&>RG5i@dt#&W#w%J*6CVg{{^!KPyz$ZxCRSz!P6pnM7k@IbvNCWn@PS$E N4BQO-8!xgN0st#sJ177E diff --git a/.context/reports/reports.db-wal b/.context/reports/reports.db-wal index bdc74c55a2eab6961d3300b1cab9401b8187ca6c..d5a0118ad2636da1b43621fabd6ef7ed603edfe3 100644 GIT binary patch delta 658 zcmeBp%>3dp%Z84RlQlL9a47tm^@PjwrQBwRjeFS`nJ53-KCeD6F{iRBHANvYCr81^ zSfQXOKczIeM4=!tJ+)XNF+DLeued~^C^ap$C^auRRUsj7{C%>zouvuu29V^GKS6(mVd&*~TjySlBADCn|PYC6hu(V43 za_-^O%>@^4^7F$rMKMb=+j36cUoSCPV4(m!wU=jUW*XBOow$Vtot E06u)?g8%>k delta 9 QcmaFyn5E+}^M;O(02?6%X8-^I diff --git a/.context/session-state.json b/.context/session-state.json index 65eede2..4fdf403 100644 --- a/.context/session-state.json +++ b/.context/session-state.json @@ -2,12 +2,10 @@ "$schema": "session-state-v2", "project": "dealplustech-emdash", "cwd": "/Users/kunthawatgreethong/Gitea/dealplustech-emdash", - "ts": "2026-05-24T08:31:59.084Z", - "continue": "\n\n## Goal\nRedesign the Deal Plus Tech website with modern animation effects and manage product brand pages.\n\n## Constraints & Preferences\n- Use green-only color scheme (no orange accent in hero background)\n- Remove small dot grid background from hero\n- Reduce hero section height for better proportio", - "task": "push to gitea to update the change.", + "ts": "2026-05-24T13:32:37.953Z", + "continue": "\n\n## Goal\nRedesign the Deal Plus Tech website with modern animation effects, fix image display issues across all product pages, and refine the all-products page functionality.\n\n## Constraints & Preferences\n- Use green-only color scheme (no orange accent in hero background)\n- Remove small dot grid ba", + "task": "http://localhost:3100/%E0%B8%AD%E0%B8%B8%E0%B8%9B%E0%B8%81%E0%B8%A3%E0%B8%93%E0%B9%8C%E0%B8%94%E0%B8%B1%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%A5%E0%B8%B4%E0%B8%87 1. Change the url to /ตู้ดับเพลิง 2. อุปกร", "files": [ - "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/aeroflex.astro", - "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/maxflex.astro", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/all-products.astro", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/favicon.svg", @@ -15,16 +13,16 @@ "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/logo.png", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles.svg", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles_000C.jpg", - "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe.svg" + "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe.svg", + "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe_000C.jpg", + "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/thermobreak/thermobreak-solarblock.png" ], "files_read": [ "/Users/kunthawatgreethong/.agents/skills/huashu-design/SKILL.md", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/astro.config.mjs", "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/ฉนวนหุ้มท่อ.astro", "CLAUDE.md", - "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/รั้วเทวดา.astro", - "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/ระบบรั้วไวน์แมน.astro", - "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/all-products.astro", - "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/components/common/Header.astro" + "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/layouts/BaseLayout.astro", + "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/armflex.astro" ] } \ No newline at end of file diff --git a/.context/todo.md b/.context/todo.md index 1fafe0b..18d6079 100644 --- a/.context/todo.md +++ b/.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 - -
+### 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';

-
+