Update insulation brand pages (Armaflex, Aeroflex, Maxflex)

- Added 3 new brand pages: armflex.astro, aeroflex.astro, maxflex.astro
- Updated hero images with product photos from 3t-insulation.com
- Enhanced content with product specifications and benefits
- Added standard certifications (FM Approved, UL 94, GREENGUARD)
- Added product gallery sections
- Shortened menu names to brand only (Armaflex, Aeroflex, Maxflex)
- Removed old ฉนวนหุ้มท่อ.astro page
- Updated Header and BaseLayout navigation
- Downloaded product images for all 3 brands

.context/reports/index.json

@@ -0,0 +1,27 @@
+{
+  "version": 1,
+  "updatedAt": "2026-05-21T09:49:46.267Z",
+  "entries": [
+    {
+      "id": "2026-05-21T09-49-46-266Z-modern-animated-redesign-deal-plus-tech",
+      "category": "plan",
+      "title": "Modern Animated Redesign - Deal Plus Tech",
+      "summary": "# 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 effect…",
+      "searchText": "plan Modern Animated Redesign - Deal Plus Tech # 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 effect… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false",
+      "createdAt": "2026-05-21T09:49:46.266Z",
+      "updatedAt": "2026-05-21T09:49:46.266Z",
+      "sourcePath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "sourceLabel": "todo.md",
+      "viewerPath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "viewerLabel": "Modern Animated Redesign - Deal Plus Tech",
+      "tags": [
+        "plan",
+        "markdown"
+      ],
+      "metadata": {
+        "action": "approved",
+        "modified": false
+      }
+    }
+  ]
+}

.context/session-state.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "session-state-v2",
+  "project": "dealplustech-emdash",
+  "cwd": "/Users/kunthawatgreethong/Gitea/dealplustech-emdash",
+  "ts": "2026-05-22T02:06:48.391Z",
+  "continue": "## Goal\nRedesign the Deal Plus Tech website (dealplustech-emdash) with modern animation effects. The site is an Astro-based Thai-language static site for a water systems company.\n\n## Constraints & Preferences\n- Must sync to Gitea before making changes (completed)\n- Modern animation effects required ",
+  "task": "continue work",
+  "files": [
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/styles/global.css",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/layouts/BaseLayout.astro",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/index.astro",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe_000C.jpg",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles_000C.jpg",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/thermobreak/thermobreak-solarblock.png",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/logo.png",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/line-qr.svg",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/ppr-pipe.svg",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/public/images/products-cropped/grilles.svg"
+  ],
+  "files_read": [
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/layouts/BaseLayout.astro",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/index.astro",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/styles/global.css",
+    "CLAUDE.md",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/astro.config.mjs",
+    "/Users/kunthawatgreethong/gitea/dealplustech-emdash/src/pages/all-products.astro",
+    "/Users/kunthawatgreethong/.agents/skills/huashu-design/SKILL.md"
+  ]
+}

.context/todo.md

@@ -0,0 +1,163 @@
+# 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