# Plan: Modern Animated Redesign — Deal Plus Tech Website

## 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.

**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`

**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
  
- **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)

---

## 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

---

## 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