dealplustech-astroreal/.context/todo.md

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