kunthawat/dealplustech-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hero section structure across all product pages

Browse Source 
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
This commit is contained in:
Kunthawat Greethong
2026-05-24 20:18:18 +07:00
parent f12f84cf52
commit 6992754699
26 changed files with 136 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.context/reports/index.json
View File

@@ -1,7 +1,28 @@
{
"version": 1,
"updatedAt": "2026-05-21T09:49:46.267Z",
"updatedAt": "2026-05-24T13:16:51.251Z",
"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 <!-- WRONG --> <section class=\"bg-gradient-to-br fr…",
"searchText": "plan Hero Section Fix Plan # 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 fr… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false",
"createdAt": "2026-05-24T13:16:51.249Z",
"updatedAt": "2026-05-24T13:16:51.249Z",
"sourcePath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
"sourceLabel": "todo.md",
"viewerPath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
"viewerLabel": "Hero Section Fix Plan",
"tags": [
"plan",
"markdown"
],
"metadata": {
"action": "approved",
"modified": false
}
},
{
"id": "2026-05-21T09-49-46-266Z-modern-animated-redesign-deal-plus-tech",
"category": "plan",

BIN
.context/reports/reports.db-shm
View File

Binary file not shown.

BIN
.context/reports/reports.db-wal
View File

Binary file not shown.

210
.context/todo.md
View File

@@ -1,163 +1,97 @@
# Plan: Modern Animated Redesign — Deal Plus Tech Website
# Plan: Fix Hero Section Structure for All Product Pages
## Context
The current website at `/Users/kunthawatgreethong/gitea/dealplustech-emdash` is an Astro-based Thai-language static site for "ดีล พลัส เทค" (Deal Plus Tech). It has basic animations (float, orb-drift, fade-in) but lacks modern scroll-triggered effects and sophisticated micro-interactions.
After analyzing all product pages, found **3 major structural issues**:
**Current State:**
- Color scheme: Green primary (#2d6a4f), Orange accent (#e35c1c)
- Animations: Basic float, fade-in, stagger, image hover zoom
- Layout: Standard header with dropdown, hero with floating cards, product grid, footer
- Working directory: `/Users/kunthawatgreethong/gitea/dealplustech-emdash`
### 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">
**Goal:** Redesign with modern animated effects including:
- Scroll-triggered reveal animations
- Text split/reveal effects
- Magnetic hover buttons
- Parallax sections
- Smooth page transitions
- Bento grid layouts
- Glassmorphism cards
- Animated gradient mesh backgrounds
<!-- 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: Animation Library & CSS Infrastructure
## Phase 1: Create Reference Hero Template
**Why:** Set up the foundation for all modern animations before touching components.
Extract the correct hero structure from `armflex.astro`:
**Test first** → `src/styles/global.css`
- Add scroll-triggered animation classes (fade-up, fade-left, fade-right, scale-in)
- Add Intersection Observer script for scroll animations
- Add text split animation utilities
- Add magnetic button effect CSS
- Add glassmorphism utility classes
- Add gradient mesh animation keyframes
- Add parallax utility classes
- Add page transition styles
**Modify** → `src/layouts/BaseLayout.astro`
- Add animation initialization script in head
- Add page transition wrapper
**Modify** → `src/components/common/Header.astro`
- Add scroll-triggered header style changes (shrink on scroll)
- Add mobile menu animation
- Add hover effects for nav items
| 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: Homepage Redesign
## Phase 2: Fix All Product Pages
**Why:** The homepage is the first impression - needs the most dramatic animation showcase.
**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
**Modify** → `src/pages/index.astro`
- **Hero Section:**
- Replace static gradient with animated gradient mesh
- Add text split reveal animation (heading characters animate in sequence)
- Add floating 3D product cards with parallax on mouse move
- Add magnetic CTA buttons
- **Featured Products:**
- Add scroll-triggered reveal with stagger
- Add 3D tilt effect on card hover
- Add image reveal animation on scroll
- **Trust Badges:**
- Add counter animation (numbers count up)
- Add scroll-triggered icon animations
- **CTA Section:**
- Add parallax background effect
- Add gradient animation
---
## Phase 3: Product Pages & Components
**Why:** Extend animations consistently across all pages.
**Modify** → `src/layouts/BaseLayout.astro`
- Enhance footer with scroll-triggered animations
**Modify** → `src/components/common/Header.astro`
- Add smooth scroll navigation highlighting
- Add mega menu with staggered item reveals
**Modify** → Product pages (`src/pages/*.astro`)
- Add breadcrumb with reveal animation
- Add product gallery with lightbox and zoom
- Add related products carousel
---
## Phase 4: Modern Design Enhancements
**Why:** Add sophisticated design patterns beyond animations.
**Modify** → `src/styles/global.css`
- Add bento grid layout utilities
- Add glassmorphism component classes
- Add custom cursor styles
- Add loading skeleton animations
**Modify** → `src/pages/all-products.astro`
- Implement bento grid product layout
- Add filter animations
- Add lazy load with skeleton
---
## Phase 5: Performance & Polish
**Why:** Ensure animations don't impact performance negatively.
**Test** → Run `npm run build` to verify no errors
**Test** → Run `npm run dev` and verify animations work smoothly
**Polish** → Add reduced-motion media query for accessibility
**Polish** → Optimize animation performance (transform/opacity only)
**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 | Changes |
|------|--------|---------|
| `src/styles/global.css` | Modify | Add animation library, utilities, glassmorphism |
| `src/layouts/BaseLayout.astro` | Modify | Add animation scripts, page wrapper |
| `src/layouts/Layout.astro` | Modify | Add meta tags, fonts |
| `src/components/common/Header.astro` | Modify | Scroll effects, animations, mobile menu |
| `src/components/common/Footer.astro` | Modify | Scroll animations, hover effects |
| `src/pages/index.astro` | Modify | Complete hero/product/cta redesign with animations |
## Animation Effects to Implement
### CSS Animations (global.css)
| Class | Effect |
|-------|--------|
| `.animate-fade-up` | Fade in + translate up on scroll |
| `.animate-fade-left` | Fade in + translate left on scroll |
| `.animate-fade-right` | Fade in + translate right on scroll |
| `.animate-scale-in` | Scale from 0.9 to 1 on scroll |
| `.animate-text-reveal` | Text reveals word by word/char by char |
| `.animate-gradient-shift` | Animated gradient background |
| `.glassmorphism` | Frosted glass effect |
| `.magnetic-btn` | Button follows cursor on hover |
| `.parallax` | Parallax scroll effect |
| `.tilt-card` | 3D tilt on hover |
### Intersection Observer Script
- Trigger animations when elements enter viewport
- Add `data-animate` attribute to elements
- Configure threshold and delay options
| 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. Run `npm run dev` at http://localhost:3100
2. Scroll through homepage - verify animations trigger at correct positions
3. Hover on product cards - verify 3D tilt effect
4. Hover on CTA buttons - verify magnetic effect
5. Resize to mobile - verify responsive animations
6. Check `prefers-reduced-motion` - verify fallback animations
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.