[v1.1.1] Improve navigation, accessibility, and non-JS behavior across the site

.gitignore

@@ -12,3 +12,7 @@ yarn-error.log*
 
 .env
 .env.*
+
+screenshots-source/
+
+.claude/launch.json

.impeccable.md

@@ -0,0 +1,49 @@
+## Design Context
+
+### Users
+BitRemote is for technical users who run NAS devices, home servers, seedboxes, and remote download setups. They evaluate software quality quickly and care about reliability, capability, and whether a product feels thoughtfully made. The website's job is to prove, quickly, that BitRemote is a polished native Apple app for remotely managing download clients from iPhone, iPad, and Mac.
+
+These users need to understand what the product is, which downloaders it supports, why it is trustworthy, what using it feels like, and whether the app is polished enough to justify downloading. The homepage is not just promotional copy. It is the first proof that the product is real, serious, and well crafted.
+
+### Brand Personality
+The brand should feel precise, modern, and trustworthy. It should also read as calm, technical, and refined. The interface should evoke confidence, calm, competence, precision, and trust.
+
+The site should feel like the web expression of a serious native Apple app. It should communicate that the team cares about detail, hierarchy, clarity, and software quality. The tone should feel product-first and disciplined, not playful, ironic, flashy, nostalgic, or theatrical.
+
+Reference direction:
+- Linear for sharp, disciplined, controlled presentation
+- Things for calm, elegant, humane native-software character
+- Bear for refined typography and restraint
+- Apple product pages for polished product clarity and visual credibility
+- High-quality Mac and iOS utility apps for sober, focused, software-first presentation
+
+Anti-references:
+- terminal-style landing pages
+- retro hacker aesthetics
+- ASCII or bracket-heavy UI language
+- glitch or pixelation effects
+- generic AI SaaS glass-card marketing
+- loud gradient-heavy startup pages
+- luxury-brand editorial minimalism that weakens product communication
+- dark neon dashboard aesthetics used as marketing wallpaper
+
+### Aesthetic Direction
+The visual direction is premium utility: highly polished software presentation without luxury signaling or ornamental styling. Both light and dark themes should feel deliberate and professional. Dark mode should feel like a refined native app environment, not cyberpunk or gaming. Light mode should feel crisp and calm, not empty or generic.
+
+Use a mostly monochromatic base with a disciplined blue accent derived from the app language. Neutrals should do most of the visual work. Blue should communicate focus, structure, and interactivity rather than decoration. Avoid purple bias, neon palettes, and rainbow gradients.
+
+Typography should be clean, firm, contemporary, and product-oriented. It should feel more like excellent software than branding theater. Headings should be confident and controlled. Body copy should be calm and readable. Avoid any styling that suggests retro computing or developer cosplay.
+
+Layout should prioritize product understanding and trust. Keep a clear hero, strong capability and trust sections, prominent supported-downloaders coverage, and a product demonstration that teaches users what BitRemote actually feels like. Sections should feel composed through hierarchy and spacing rather than gimmicks. Existing structure is not sacred and can be changed if it weakens clarity.
+
+Product demonstration should provide interactive proof instead of decorative proof. If a simulator or interactive preview is used, it must be modern, clean, product-faithful, and clearly useful. The old ASCII simulator can be treated as a capability reference, not a style reference.
+
+### Design Principles
+1. Product truth over surface styling. Design should make the real product easier to understand and trust.
+2. Modern professionalism over novelty. Move away from retro charm, irony, gimmicks, and developer-cosplay cues.
+3. Calm confidence over loud marketing. The site should feel impressive because it is precise, clear, and well made.
+4. Native-app alignment over web trends. The website should feel like part of the BitRemote Apple app ecosystem.
+5. Trust-critical content stays first class. Supported downloaders and other proof-building sections are core product content, not optional decoration.
+6. Interactive proof beats decorative proof. Demonstrations should teach and persuade, not just fill space.
+7. Restraint is not emptiness. Calm design still needs hierarchy, structure, and meaningful composition.
+8. Accessibility is baseline quality. Default to WCAG 2.1 AA, preserve reduced-motion support, and maintain color-safe contrast in both themes.

.planning/MILESTONES.md

@@ -0,0 +1,26 @@
+# Project Milestones: BitRemote Website
+
+## v1.0 Website Redesign (Shipped: 2026-03-27)
+
+**Delivered:** BitRemote’s marketing site was rebuilt into a calm, app-aligned product website with modern product proof, restored downloader trust content, and localized responsive polish across the primary experience.
+
+**Phases completed:** 1-6 (17 plans total)
+
+**Key accomplishments:**
+- Established a semantic token system and removed the legacy ASCII/terminal UI layer.
+- Added reduced-motion-safe motion primitives, smooth scrolling, and optimized screenshot infrastructure.
+- Rebuilt the homepage, legal pages, and shared primitives around modern product surfaces and hierarchy.
+- Corrected redesign drift with a full Phase 6 UI refresh centered on downloader trust, product proof, and calmer native-app alignment.
+- Shipped a localized experience across English, Japanese, Simplified Chinese, and Traditional Chinese.
+
+**Stats:**
+- 128 files modified
+- 3,157 lines of TypeScript in `src/`
+- 6 phases, 17 plans, 21 documented tasks
+- 5 days from start to ship
+
+**Git range:** `feat(01-01)` → `wip`
+
+**What's next:** Define the next milestone from the shipped v1.0 state with a fresh requirements pass.
+
+---

.planning/PROJECT.md

@@ -1,103 +1,45 @@
-# BitRemote Website Redesign
+# BitRemote Website
 
-## What This Is
+## Current State
 
-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.
+BitRemote’s website is now a shipped, static, multi-locale product site aligned with the native BitRemote app. v1.0 replaced the earlier retro ASCII/terminal presentation with a calm, modern interface built around semantic tokens, app-faithful product proof, prominent downloader trust content, and responsive behavior across the homepage, downloader pages, and legal pages.
 
 ## 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.
+The site should make BitRemote feel like a serious, polished Apple-platform product at first glance, while still preserving the clarity, trust, localization, and static-site reliability the project already had.
 
-## Requirements
+## Shipped in v1.0
 
-### Validated
+- Calm, app-aligned visual language across the primary experience
+- Localized homepage and supporting pages in English, Japanese, Simplified Chinese, and Traditional Chinese
+- Product-proof feature section and restored Supported Downloaders trust content
+- Modernized sticky navigation, hero, footer, legal routing, and downloader landing pages
+- Static export compatibility, SEO metadata, JSON-LD, sitemap, and robots behavior preserved
 
-- ✓ 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
+## Next Milestone Goals
 
-### Active
+Next milestone not yet defined.
 
-- [ ] 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
+Start with `$gsd-new-milestone` to:
+- define fresh requirements from the shipped site
+- decide whether the next focus is conversion, performance, content expansion, or downloader-page depth
+- create a new roadmap from the archived v1.0 baseline
 
 ## 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
+| Use a semantic token system with restrained blue accenting | Keeps the site aligned with the BitRemote app instead of generic marketing styling | ✓ Shipped |
+| Keep screenshots as supporting proof, not structural wallpaper | Product clarity matters more than decorative screenshot presence | ✓ Shipped |
+| Restore Supported Downloaders as top-level trust content | Downloader support is core product proof for the target audience | ✓ Shipped |
+| Preserve static export and multi-locale guarantees throughout redesign | Existing delivery model and localization were already valuable | ✓ Shipped |
 
-This document evolves at phase transitions and milestone boundaries.
+<details>
+<summary>Archived v1.0 project brief</summary>
 
-**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
+This project began as a full visual redesign of the BitRemote marketing website to replace a retro ASCII/monospace aesthetic with a calm, modern, native-app-aligned experience.
 
-**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
+</details>
 
 ---
-*Last updated: 2026-03-22 after initialization*
+*Last updated: 2026-03-27 after v1.0 milestone completion*