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

Fix hero section structure - remove order classes, add missing classes

Browse Source 
Changes:
- Removed order-2 lg:order-1 from 9 pages (image now on LEFT)
- Added bg-white/10 p-2 to image containers in 8 pages
- Added lg:py-24 padding to sections in 8 pages

Pages fixed: durgo-avvs, grilles, water-pump, pipe-coupling,
ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-syler, ท่อ-upvc,
ระบบน้ำ, วาล์ว-valve, เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr
This commit is contained in:
Kunthawat Greethong
2026-05-24 21:09:15 +07:00
parent f12f84cf52
commit daa3d56027
15 changed files with 186 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
.context/reports/index.json
View File

@@ -1,7 +1,49 @@
{
"version": 1,
"updatedAt": "2026-05-21T09:49:46.267Z",
"updatedAt": "2026-05-24T14:08:35.336Z",
"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 Analyzed all 23 product pages against reference `armflex.astro`. ### Reference Structure (armflex.astro) ```html <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\"> <di…",
"searchText": "plan Hero Section Fix Plan # Plan: Fix Hero Section Structure for All Product Pages ## Context Analyzed all 23 product pages against reference `armflex.astro`. ### Reference Structure (armflex.astro) ```html <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\"> <di… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false",
"createdAt": "2026-05-24T13:16:51.249Z",
"updatedAt": "2026-05-24T14:08:35.335Z",
"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-24T14-04-15-688Z-hero-section-fix-plan-v2",
"category": "plan",
"title": "Hero Section Fix Plan v2",
"summary": "# Plan: Fix Hero Section Structure for All Product Pages ## Context Compared `armflex.astro` (reference) vs `water-pump.astro` (problem page). Found clear differences: ### Key Differences Identified | Element | armflex (Reference) ✓ | water-pump (Problem) ✗ | |---------|------------------------|-----------------------…",
"searchText": "plan Hero Section Fix Plan v2 # Plan: Fix Hero Section Structure for All Product Pages ## Context Compared `armflex.astro` (reference) vs `water-pump.astro` (problem page). Found clear differences: ### Key Differences Identified | Element | armflex (Reference) ✓ | water-pump (Problem) ✗ | |---------|------------------------|-----------------------… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown declined false",
"createdAt": "2026-05-24T14:04:15.688Z",
"updatedAt": "2026-05-24T14:04:15.688Z",
"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 v2",
"tags": [
"plan",
"markdown"
],
"metadata": {
"action": "declined",
"modified": false
}
},
{
"id": "2026-05-21T09-49-46-266Z-modern-animated-redesign-deal-plus-tech",
"category": "plan",

240
.context/todo.md
View File

@@ -1,163 +1,141 @@
# 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.
Analyzed all 23 product pages against reference `armflex.astro`.
**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`
### Reference Structure (armflex.astro)
**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
---
## Phase 1: Animation Library & CSS Infrastructure
**Why:** Set up the foundation for all modern animations before touching components.
**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
---
## Phase 2: Homepage Redesign
**Why:** The homepage is the first impression - needs the most dramatic animation showcase.
**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
```html
<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">
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<!-- 3 floating particles -->
<!-- 1 wave SVG -->
</div>
- **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
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid lg:grid-cols-2 gap-12 items-start">
<div class="lg:sticky lg:top-24">
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
<img ... />
</div>
</div>
<div>
<!-- Content: badge, h1, p, buttons -->
</div>
</div>
</div>
</section>
```
---
## Phase 3: Product Pages & Components
## Issues Found
**Why:** Extend animations consistently across all pages.
### Issue 1: ORDER CLASSES (9 pages)
**Problem:** Order classes swap image/content positions differently on mobile vs desktop.
**Modify** → `src/layouts/BaseLayout.astro`
- Enhance footer with scroll-triggered animations
| Page | Current Order | Result |
|------|--------------|--------|
| durgo-avvs | order-2 lg:order-1 | Image on right (desktop) |
| grilles | order-2 lg:order-1 | Image on right (desktop) |
| water-pump | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-hdpe | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-ppr-scg | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-ppr-thai-ppr | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-syler | order-2 lg:order-1 | Image on right (desktop) |
| ท่อ-upvc | order-2 lg:order-1 | Image on right (desktop) |
| เครื่องเชื่อม-hdpe | order-2 lg:order-1 | Image on right (desktop) |
**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
**Fix:** Remove order classes entirely. Image will be on LEFT on ALL screen sizes.
---
## Phase 4: Modern Design Enhancements
### Issue 2: MISSING IMAGE CONTAINER CLASSES (7 pages)
**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
| Page | Fix Needed |
|------|-----------|
| durgo-avvs | Add `bg-white/10 p-2` to image container |
| grilles | Add `bg-white/10 p-2` to image container |
| water-pump | Add `bg-white/10 p-2` to image container |
| ท่อ-hdpe | Add `bg-white/10 p-2` to image container |
| ท่อ-ppr-scg | Add `bg-white/10 p-2` to image container |
| ท่อ-ppr-thai-ppr | Add `bg-white/10 p-2` to image container |
| ท่อ-upvc | Add `bg-white/10 p-2` to image container |
| ท่อ-syler | Add `bg-white/10 p-2` to image container |
---
## Phase 5: Performance & Polish
### Issue 3: MISSING SECTION PADDING (7 pages)
**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)
| Page | Fix Needed |
|------|-----------|
| durgo-avvs | Add `lg:py-24` to section class |
| grilles | Add `lg:py-24` to section class |
| pipe-coupling | Add `lg:py-24` to section class |
| ท่อ-syler | Add `lg:py-24` to section class |
| ระบบน้ำ | Add `lg:py-24` to section class |
| วาล์ว-valve | Add `lg:py-24` to section class |
| เครื่องเชื่อม-hdpe | Add `lg:py-24` to section class |
| เครื่องเชื่อม-ppr | Add `lg:py-24` to section class |
---
## Critical Files
## Pages Status Summary
| 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 |
| Page | Order Class | Image Container | Section Padding |
|------|-------------|-----------------|-----------------|
| aeroflex | ✅ OK | ✅ OK | ✅ OK |
| armflex | ✅ OK | ✅ OK | ✅ OK |
| maxflex | ✅ OK | ✅ OK | ✅ OK |
| pipe-coupling | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
| realflex | ✅ OK | ✅ OK | ✅ OK |
| water-treatment | ✅ OK | ✅ OK | ✅ OK |
| ตู้ดับเพลิง | ✅ OK | ✅ OK | ✅ OK |
| ระบบน้ำ | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
| ระบบรั้วไวน์แมน | ✅ OK | ✅ OK | ✅ OK |
| รั้วเทวดา | ✅ OK | ✅ OK | ✅ OK |
| เทอร์โมเบรค-thermobreak | ✅ OK | ✅ OK | ✅ OK |
| เม็ดกรู๊ฟ-คับปลิ้ง | ✅ OK | ✅ OK | ✅ OK |
| ท่อ-xy-lent | ✅ OK | ✅ OK | ✅ OK |
| durgo-avvs | ❌ WRONG | ❌ Missing | ❌ Missing |
| grilles | ❌ WRONG | ❌ Missing | ❌ Missing |
| water-pump | ❌ WRONG | ❌ Missing | ❌ Missing |
| ท่อ-hdpe | ❌ WRONG | ❌ Missing | ✅ OK |
| ท่อ-ppr-scg | ❌ WRONG | ❌ Missing | ✅ OK |
| ท่อ-ppr-thai-ppr | ❌ WRONG | ❌ Missing | ✅ OK |
| ท่อ-syler | ❌ WRONG | ❌ Missing | ❌ Missing |
| ท่อ-upvc | ❌ WRONG | ❌ Missing | ✅ OK |
| เครื่องเชื่อม-hdpe | ❌ WRONG | ✅ OK | ❌ Missing |
| วาล์ว-valve | ✅ OK | ✅ OK | ❌ Missing |
| เครื่องเชื่อม-ppr | ✅ OK | ✅ OK | ❌ Missing |
## 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 |
## Implementation
### Intersection Observer Script
- Trigger animations when elements enter viewport
- Add `data-animate` attribute to elements
- Configure threshold and delay options
### Fix Order (to avoid conflicts):
1. **First:** Remove order classes from all affected pages
2. **Second:** Add missing image container classes
3. **Third:** Add missing section padding
### Fix Code for each page:
```javascript
// Remove order classes
.replace(/order-[12] lg:order-[12]/g, '')
// Add image container classes
.replace('class="rounded-2xl overflow-hidden"', 'class="rounded-2xl overflow-hidden bg-white/10 p-2"')
// Add section padding
.replace('py-16 overflow-hidden">', 'py-16 lg:py-24 overflow-hidden">')
```
---
## 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. `npm run build` succeeds
2. Visual check on dev server (mobile AND desktop)
3. Image should be on LEFT side in ALL pages