[v1.0.5] Dependency upgrades and project planning docs

.planning/PROJECT.md

@@ -0,0 +1,103 @@
+# BitRemote Website Redesign
+
+## What This Is
+
+A visual redesign of the BitRemote marketing website (bitremote.app) to align its design language with the BitRemote native app. The current site uses a retro ASCII/monospace aesthetic that misrepresents the product — a polished, modern native Apple app. The redesigned site should feel like a natural extension of the app itself while leveraging marketing-grade visual effects to convert visitors.
+
+## Core Value
+
+The website must look and feel like it belongs to the same product as the BitRemote app — clean, professional, and visually impressive enough to make tech-savvy visitors want to download it.
+
+## Requirements
+
+### Validated
+
+- ✓ Multi-locale support (en, ja, zh-hans, zh-hant) — existing
+- ✓ Static site generation via Next.js with Cloudflare Pages deployment — existing
+- ✓ SEO optimization with JSON-LD schema, sitemap, robots.txt — existing
+- ✓ Downloader-specific landing pages (qBittorrent, Synology DS, etc.) — existing
+- ✓ App Store download link integration — existing
+- ✓ FAQ section — existing
+- ✓ Legal pages (privacy, terms, support) — existing
+- ✓ Social links (Twitter, Discord, Telegram, GitHub) — existing
+- ✓ LLM context route (/llms-full.txt) — existing
+
+### Active
+
+- [ ] Replace ASCII/monospace design language with modern sans-serif typography
+- [ ] Implement monochromatic color palette (black/white/gray) with blue as the sole accent color
+- [ ] Design can be dark or light themed (app supports both) — dark preferred for premium feel
+- [ ] Add polished visual effects suitable for a marketing site (scroll animations, parallax, glowing elements, smooth transitions)
+- [ ] Showcase app screenshots as hero visuals — let the app's UI sell itself
+- [ ] Use card-based layouts and rounded shapes that echo the app's native UI patterns
+- [ ] Maintain all existing content and functionality during redesign
+- [ ] Ensure responsive design across mobile, tablet, and desktop
+- [ ] Remove ASCII art separators, text-frame components, and terminal-style UI elements
+
+### Out of Scope
+
+- Backend/API functionality — this is a static marketing site
+- User authentication or accounts
+- Analytics integration — can be added separately later
+- Blog or changelog — different initiative
+- New content pages beyond what exists — focus is visual, not content
+- App icon or branding changes — the app's identity stays as-is
+
+## Context
+
+**Product:** BitRemote is a native Apple app (iOS, iPadOS, macOS) for remotely managing download tasks on NAS and home servers. It supports aria2, Synology Download Station, QNAP Download Station, and Transmission.
+
+**Target audience:** Tech-savvy users who run NAS/home servers. They appreciate good design and native app quality — the kind of people who notice when software is well-crafted.
+
+**App design language (from App Store screenshots):**
+- Monochromatic base (black/white/gray) with blue as the only accent color
+- Clean sans-serif typography (SF Pro / system font)
+- Card-based layouts with rounded corners and subtle backgrounds
+- Data-rich but visually calm — professional and pretty
+- The Activity Monitor page is an exception with colorful stat cards (green, purple, pink, cyan) to make monitoring engaging
+- Supports both dark and light interfaces
+
+**Current website problems:**
+- Monospace/ASCII aesthetic makes the product look like a CLI tool
+- Text-frame components and ░ separators feel retro when the app is modern
+- No app screenshots showcased — the app's best selling point is hidden
+- Visual disconnect undermines trust ("is this really the same product?")
+
+**Tech stack:** Next.js 15, React 19, TypeScript, Tailwind CSS 3.4, static export to Cloudflare Pages
+
+## Constraints
+
+- **Tech stack**: Keep Next.js + Tailwind CSS + static export — no framework migration
+- **Content preservation**: All existing localized content must carry over
+- **Deployment**: Must remain compatible with Cloudflare Pages static hosting
+- **Performance**: Static site must remain fast — visual effects should not degrade load times significantly
+- **Accessibility**: Maintain existing aria labels, screen reader support, reduced motion support
+
+## Key Decisions
+
+| Decision | Rationale | Outcome |
+|----------|-----------|---------|
+| Blue as sole accent color | Matches app's design system — monochromatic + blue | — Pending |
+| Dark or light theme TBD | App supports both; dark feels premium for marketing | — Pending |
+| Marketing-grade visual effects allowed | This is a conversion page, not docs — impressiveness matters | — Pending |
+| Keep Next.js static export | No reason to change what works for deployment | ✓ Good |
+
+## Evolution
+
+This document evolves at phase transitions and milestone boundaries.
+
+**After each phase transition** (via `/gsd:transition`):
+1. Requirements invalidated? → Move to Out of Scope with reason
+2. Requirements validated? → Move to Validated with phase reference
+3. New requirements emerged? → Add to Active
+4. Decisions to log? → Add to Key Decisions
+5. "What This Is" still accurate? → Update if drifted
+
+**After each milestone** (via `/gsd:complete-milestone`):
+1. Full review of all sections
+2. Core Value check — still the right priority?
+3. Audit Out of Scope — reasons still valid?
+4. Update Context with current state
+
+---
+*Last updated: 2026-03-22 after initialization*

.planning/REQUIREMENTS.md

@@ -0,0 +1,144 @@
+# Requirements: BitRemote Website Redesign
+
+**Defined:** 2026-03-22
+**Core Value:** The website must look and feel like it belongs to the same product as the BitRemote app — clean, professional, and visually impressive enough to make tech-savvy visitors want to download it.
+
+## v1 Requirements
+
+Requirements for the redesign. Each maps to roadmap phases.
+
+### Design Foundation
+
+- [ ] **DSGN-01**: Site uses a CSS variable design token system for colors, spacing, typography, and border radius
+- [ ] **DSGN-02**: Site supports both dark and light themes, switching automatically via `prefers-color-scheme`
+- [ ] **DSGN-03**: Color palette is monochromatic (near-black/white/gray) with blue as the sole accent color, matching the app
+- [ ] **DSGN-04**: Dark theme uses near-black backgrounds (not pure `#000`) to avoid halation
+- [ ] **DSGN-05**: Typography uses a modern sans-serif font throughout, replacing all monospace usage
+- [ ] **DSGN-06**: All ASCII art separators (░ patterns) and terminal-style UI elements are removed
+
+### Hero Section
+
+- [ ] **HERO-01**: Hero section has a compelling headline, subheadline, and prominent App Store download button
+- [ ] **HERO-02**: Hero features a subtle ambient glow effect (blue-tinted gradient orb) that adapts to theme
+- [ ] **HERO-03**: Platform badge strip shows iOS, iPadOS, and macOS support
+
+### App Showcase
+
+- [ ] **SHOW-01**: Dedicated showcase section below the hero displays app screenshots in device mockups
+- [ ] **SHOW-02**: Screenshots are shown in realistic device frames (iPhone and/or Mac)
+- [ ] **SHOW-03**: Dark theme shows dark-mode app screenshots, light theme shows light-mode screenshots
+- [ ] **SHOW-04**: Screenshots animate into view on scroll
+
+### Features Section
+
+- [ ] **FEAT-01**: Features/benefits are presented in a bento grid layout with varied card sizes
+- [ ] **FEAT-02**: Cards use glassmorphism styling (blur + translucency on dark, subtle shadow + border on light)
+- [ ] **FEAT-03**: Feature content communicates what the app does and why it matters
+
+### Navigation & CTAs
+
+- [ ] **NAV-01**: Sticky navigation bar with section anchor links
+- [ ] **NAV-02**: App Store download button appears at top, mid-page, and bottom (inline CTA repetition)
+- [ ] **NAV-03**: Navigation adapts to mobile (hamburger or simplified)
+
+### Visual Effects
+
+- [ ] **VFX-01**: Sections use staggered fade-in entrance animations triggered on scroll
+- [ ] **VFX-02**: Smooth scrolling implemented via lenis for premium feel
+- [ ] **VFX-03**: Section dividers use thin elegant SVG lines replacing ASCII separators
+- [ ] **VFX-04**: All animations respect `prefers-reduced-motion` — baked in from day one, not retrofitted
+- [ ] **VFX-05**: Animations only use `transform` and `opacity` (GPU-composited, no layout thrashing)
+
+### Content Preservation
+
+- [ ] **CONT-01**: All existing localized content (en, ja, zh-hans, zh-hant) carries over to the new design
+- [ ] **CONT-02**: FAQ section is restyled to match new design system (keep accordion behavior)
+- [ ] **CONT-03**: Legal pages (privacy, terms, support) are restyled
+- [ ] **CONT-04**: Social links (Twitter, Discord, Telegram, GitHub) remain accessible
+- [ ] **CONT-05**: SEO metadata, JSON-LD schemas, sitemap, and robots.txt continue working
+
+### Technical
+
+- [ ] **TECH-01**: Site remains a Next.js static export compatible with Cloudflare Pages
+- [ ] **TECH-02**: No hydration mismatches — theme detection uses CSS media queries, not JS localStorage on initial render
+- [ ] **TECH-03**: App screenshots are pre-optimized to WebP before being added to the project
+- [ ] **TECH-04**: Animation components use `"use client"` directive; static content stays server-renderable
+- [ ] **TECH-05**: Build produces correct output for all locale paths
+
+## v2 Requirements
+
+Deferred to future release. Tracked but not in current roadmap.
+
+### Advanced Visual
+
+- **ADV-01**: Scroll-linked screenshot reveal (screenshots animate in sync with scroll position, not just on-enter)
+- **ADV-02**: Social proof section with curated App Store reviews or press quotes
+- **ADV-03**: Manual theme toggle switch (beyond automatic `prefers-color-scheme`)
+
+### Downloader Pages
+
+- **DLP-01**: Downloader-specific landing pages receive full visual redesign matching new design system
+- **DLP-02**: Each downloader page features tailored screenshots for that client
+
+## Out of Scope
+
+| Feature | Reason |
+|---------|--------|
+| Video background / autoplaying hero video | Heavy assets kill performance; distracting for tech audience |
+| Email newsletter / lead capture form | Wrong funnel for a paid native app; adds GDPR complexity |
+| Testimonial carousel / slider | Low engagement; tech users skip them |
+| Chat widget | Wrong support channel; Discord/Telegram/GitHub are better for this audience |
+| Cookie consent banner | Static site with no tracking — nothing to consent to |
+| Animated particle / canvas backgrounds | Performance penalty; often looks generic |
+| Pricing comparison table | Single paid app, no tiers to compare |
+| Blog or changelog | Different initiative, not part of visual redesign |
+| Analytics integration | Can be added separately, not a design concern |
+| Tailwind v3 → v4 migration | No framework migration — keep what works |
+
+## Traceability
+
+| Requirement | Phase | Status |
+|-------------|-------|--------|
+| DSGN-01 | Phase 1 | Pending |
+| DSGN-02 | Phase 1 | Pending |
+| DSGN-03 | Phase 1 | Pending |
+| DSGN-04 | Phase 1 | Pending |
+| DSGN-05 | Phase 1 | Pending |
+| DSGN-06 | Phase 1 | Pending |
+| VFX-01 | Phase 2 | Pending |
+| VFX-02 | Phase 2 | Pending |
+| VFX-04 | Phase 2 | Pending |
+| VFX-05 | Phase 2 | Pending |
+| TECH-01 | Phase 2 | Pending |
+| TECH-02 | Phase 2 | Pending |
+| TECH-04 | Phase 2 | Pending |
+| SHOW-01 | Phase 3 | Pending |
+| SHOW-02 | Phase 3 | Pending |
+| SHOW-03 | Phase 3 | Pending |
+| SHOW-04 | Phase 3 | Pending |
+| TECH-03 | Phase 3 | Pending |
+| HERO-01 | Phase 4 | Pending |
+| HERO-02 | Phase 4 | Pending |
+| HERO-03 | Phase 4 | Pending |
+| FEAT-01 | Phase 4 | Pending |
+| FEAT-02 | Phase 4 | Pending |
+| FEAT-03 | Phase 4 | Pending |
+| NAV-01 | Phase 4 | Pending |
+| NAV-02 | Phase 4 | Pending |
+| NAV-03 | Phase 4 | Pending |
+| CONT-01 | Phase 4 | Pending |
+| CONT-02 | Phase 4 | Pending |
+| CONT-03 | Phase 4 | Pending |
+| CONT-04 | Phase 4 | Pending |
+| CONT-05 | Phase 4 | Pending |
+| TECH-05 | Phase 4 | Pending |
+| VFX-03 | Phase 5 | Pending |
+
+**Coverage:**
+- v1 requirements: 34 total
+- Mapped to phases: 34
+- Unmapped: 0
+
+---
+*Requirements defined: 2026-03-22*
+*Last updated: 2026-03-22 after roadmap creation*

.planning/ROADMAP.md

@@ -0,0 +1,91 @@
+# Roadmap: BitRemote Website Redesign
+
+## Overview
+
+The redesign replaces the current ASCII/monospace aesthetic with a modern design system that matches the BitRemote native app. Work proceeds in strict dependency order: design tokens first, motion and UI primitives second, screenshot assets third, section components and page assembly fourth, and visual polish differentiators last. The result is a marketing site that looks and feels like it belongs to the same product as the app.
+
+## Phases
+
+**Phase Numbering:**
+- Integer phases (1, 2, 3): Planned milestone work
+- Decimal phases (2.1, 2.2): Urgent insertions (marked with INSERTED)
+
+Decimal phases appear between their surrounding integers in numeric order.
+
+- [ ] **Phase 1: Design Foundation** - Establish the design token system, typography, color palette, and dark theme that all other components depend on
+- [ ] **Phase 2: Motion and UI Primitives** - Build reusable animation and UI components with GPU-safe constraints baked in from day one
+- [ ] **Phase 3: Screenshot Assets** - Prepare, optimize, and validate app screenshot assets before any section that displays them is built
+- [ ] **Phase 4: Section Assembly** - Build all section components and assemble the full page using tokens, primitives, and optimized assets
+- [ ] **Phase 5: Visual Polish** - Add differentiating effects (SVG dividers, glassmorphism, ambient glow, platform badges) and audit responsive behavior
+
+## Phase Details
+
+### Phase 1: Design Foundation
+**Goal**: The design system is established — tokens, palette, typography, and dark theme are in place and ready for all downstream components to consume
+**Depends on**: Nothing (first phase)
+**Requirements**: DSGN-01, DSGN-02, DSGN-03, DSGN-04, DSGN-05, DSGN-06
+**Success Criteria** (what must be TRUE):
+  1. The site renders in dark and light themes automatically based on the visitor's OS preference, with no flash of wrong content on load
+  2. All text across the site uses a modern sans-serif font — no monospace type remains anywhere on the page
+  3. The color palette uses only near-black, white, gray, and blue across all themed surfaces — no other hues appear
+  4. Dark backgrounds use near-black (not pure #000), visually distinguishable from pure black on any display
+  5. No ASCII art separators (░ patterns), terminal borders, or monospace decorative elements exist anywhere in the codebase or rendered page
+**Plans**: TBD
+
+### Phase 2: Motion and UI Primitives
+**Goal**: All reusable animation and UI building blocks exist and enforce correct constraints — transform/opacity-only animations, reduced-motion support, and hydration safety are baked in before any section is built
+**Depends on**: Phase 1
+**Requirements**: VFX-01, VFX-02, VFX-04, VFX-05, TECH-01, TECH-02, TECH-04
+**Success Criteria** (what must be TRUE):
+  1. Scroll entrance animations play correctly on all section components and use only opacity and transform — no layout properties are animated
+  2. Smooth scroll (lenis) is active and page navigation feels physically weighted rather than abrupt
+  3. All animations are completely absent (not just skipped) for visitors with prefers-reduced-motion enabled
+  4. The site produces no React hydration mismatch warnings — theme and animation state are handled without reading browser APIs during server render
+  5. The site remains a Next.js static export deployable to Cloudflare Pages with no SSR-only dependencies introduced
+**Plans**: TBD
+
+### Phase 3: Screenshot Assets
+**Goal**: App screenshots are captured, optimized to WebP, sized for retina displays, and validated against the AppMockup component before any section that displays them is built
+**Depends on**: Phase 2
+**Requirements**: SHOW-01, SHOW-02, SHOW-03, SHOW-04, TECH-03
+**Success Criteria** (what must be TRUE):
+  1. A dedicated showcase section exists on the page and displays app screenshots inside realistic device frames (iPhone and/or Mac)
+  2. All screenshot images are WebP format and under the performance budget — page LCP is not caused by an unoptimized image asset
+  3. Visiting the site in dark OS theme shows dark-mode app screenshots; light OS theme shows light-mode screenshots — no JavaScript state drives this on initial load
+  4. Screenshots animate into view as the visitor scrolls to the showcase section
+**Plans**: TBD
+
+### Phase 4: Section Assembly
+**Goal**: All sections are built and the home page is fully assembled — visitors experience a complete, content-correct redesigned marketing page with all existing localized content preserved
+**Depends on**: Phase 3
+**Requirements**: HERO-01, HERO-02, HERO-03, FEAT-01, FEAT-02, FEAT-03, NAV-01, NAV-02, NAV-03, CONT-01, CONT-02, CONT-03, CONT-04, CONT-05, TECH-05
+**Success Criteria** (what must be TRUE):
+  1. The hero section displays a compelling headline, subheadline, prominent App Store download button, and platform badge strip (iOS, iPadOS, macOS) above the fold
+  2. The features section uses a bento grid layout with glassmorphism-styled cards that communicate what the app does and why it matters
+  3. A sticky navigation bar is present with section anchor links and an App Store download button; a second CTA appears mid-page or bottom — visitors never scroll past a CTA
+  4. Navigation collapses to a mobile-appropriate layout on small screens without breaking usability
+  5. Visiting /ja/, /zh-hans/, and /zh-hant/ routes produces complete, correctly localized pages — no locale routes are missing from the static build output
+**Plans**: TBD
+
+### Phase 5: Visual Polish
+**Goal**: Differentiating visual effects are added and responsive behavior is audited — the site looks premium and works correctly across all screen sizes
+**Depends on**: Phase 4
+**Requirements**: VFX-03
+**Success Criteria** (what must be TRUE):
+  1. Section boundaries are separated by thin, elegant SVG lines — no ASCII separator patterns remain as dividers
+  2. The hero section has an ambient blue-tinted glow effect that adapts correctly between dark and light themes without visual artifacts
+  3. The site renders correctly and looks intentional on mobile (375px), tablet (768px), and desktop (1280px+) screen widths
+**Plans**: TBD
+
+## Progress
+
+**Execution Order:**
+Phases execute in numeric order: 1 → 2 → 3 → 4 → 5
+
+| Phase | Plans Complete | Status | Completed |
+|-------|----------------|--------|-----------|
+| 1. Design Foundation | 0/? | Not started | - |
+| 2. Motion and UI Primitives | 0/? | Not started | - |
+| 3. Screenshot Assets | 0/? | Not started | - |
+| 4. Section Assembly | 0/? | Not started | - |
+| 5. Visual Polish | 0/? | Not started | - |