diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 45b2e6e..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": ["next/core-web-vitals"] -} - diff --git a/.planning/PROJECT.md b/.planning/PROJECT.md new file mode 100644 index 0000000..434f1b5 --- /dev/null +++ b/.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* diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md new file mode 100644 index 0000000..fd11b79 --- /dev/null +++ b/.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* diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md new file mode 100644 index 0000000..a6107eb --- /dev/null +++ b/.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 | - | diff --git a/.planning/STATE.md b/.planning/STATE.md new file mode 100644 index 0000000..545e357 --- /dev/null +++ b/.planning/STATE.md @@ -0,0 +1,60 @@ +# Project State + +## Project Reference + +See: .planning/PROJECT.md (updated 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. +**Current focus:** Phase 1 — Design Foundation + +## Current Position + +Phase: 1 of 5 (Design Foundation) +Plan: 0 of ? in current phase +Status: Ready to plan +Last activity: 2026-03-22 — Roadmap created, 5 phases derived from 34 v1 requirements + +Progress: [░░░░░░░░░░] 0% + +## Performance Metrics + +**Velocity:** +- Total plans completed: 0 +- Average duration: — +- Total execution time: 0 hours + +**By Phase:** + +| Phase | Plans | Total | Avg/Plan | +|-------|-------|-------|----------| +| - | - | - | - | + +**Recent Trend:** +- Last 5 plans: — +- Trend: — + +*Updated after each plan completion* + +## Accumulated Context + +### Decisions + +Decisions are logged in PROJECT.md Key Decisions table. +Recent decisions affecting current work: + +- None yet — decisions will be logged as phases execute. + +### Pending Todos + +None yet. + +### Blockers/Concerns + +- [Pre-Phase 3]: Screenshot content is not yet defined — exact screenshots, device frame approach, and dimensions require a product decision before Phase 3 can begin (noted in research SUMMARY.md). +- [Pre-Phase 1]: Dark vs. light theme default is pending — research recommends dark; final call affects glassmorphism and glow feasibility. + +## Session Continuity + +Last session: 2026-03-22 +Stopped at: Roadmap written, STATE.md initialized, REQUIREMENTS.md traceability updated. Ready to run /gsd:plan-phase 1. +Resume file: None diff --git a/.planning/codebase/ARCHITECTURE.md b/.planning/codebase/ARCHITECTURE.md new file mode 100644 index 0000000..caafe65 --- /dev/null +++ b/.planning/codebase/ARCHITECTURE.md @@ -0,0 +1,183 @@ +# Architecture + +**Analysis Date:** 2026-03-22 + +## Pattern Overview + +**Overall:** Static site generation with Next.js App Router using an island architecture pattern. The application renders a marketing website with multi-locale support and a client-side ASCII panel UI component for interactive demonstration. + +**Key Characteristics:** +- Server-side rendering with static pre-generation (`output: 'export'`) +- Multi-locale content with runtime locale detection +- Component-driven UI with separated page and component layers +- Domain-driven organization for business logic (downloaders, content) +- SEO-optimized with JSON-LD schema generation +- Client-side interactive components isolated to specific pages + +## Layers + +**App Router Layer (Pages & Layouts):** +- Purpose: Define page structure and routing using Next.js App Router conventions +- Location: `src/app/` and `src/app/[locale]/` +- Contains: Page components (`page.tsx`), layout wrappers (`layout.tsx`), metadata generation, static parameter generation +- Depends on: Components, i18n, domain, SEO utilities +- Used by: Next.js build system for route generation + +**Component Layer:** +- Purpose: Reusable UI components focused on rendering and basic interactivity +- Location: `src/components/` +- Contains: Button components (`TextButton.tsx`), frames (`TextFrame.tsx`), navigation (`TextTabsNav.tsx`), specialized components (`BitRemoteWordmark.tsx`, `FaqAccordion.tsx`) +- Depends on: i18n for messaging, Tailwind CSS for styling +- Used by: Page components and the ASCII panel module + +**ASCII Panel Module:** +- Purpose: Interactive client-side component demonstrating BitRemote UI in ASCII art style +- Location: `src/ascii-panel/` +- Contains: Main panel coordinator (`index.tsx`), UI components (`components/`), page views (`pages/`), frame management and state handling +- Depends on: React hooks for state management (useEffect, useState), component library patterns +- Used by: Home page (`src/app/[locale]/page.tsx`) + +**Domain Layer:** +- Purpose: Core business logic and data models for downloaders and landing content +- Location: `src/domain/` +- Contains: Downloader enum and list (`downloaders.ts`), downloader landing page content mappings (`downloader-landings.ts`) +- Depends on: i18n for localization +- Used by: Pages, components, and SEO layer + +**Internationalization (i18n) Layer:** +- Purpose: Manage multi-locale content, routing, and language configuration +- Location: `src/i18n/` +- Contains: Locale definitions (`locales.ts`), message loader (`messages.ts`), URL builders (`urls.ts`), external links (`links.ts`) +- Depends on: Message JSON files in `src/messages/` +- Used by: All pages and components requiring locale context + +**SEO Layer:** +- Purpose: Generate structured data (JSON-LD) and metadata for search engines +- Location: `src/seo/` +- Contains: Schema builders (`schema.ts`), metadata generators (`metadata.ts`), downloader-specific metadata (`downloader-metadata.ts`), route configuration (`routes.ts`) +- Depends on: Domain models, i18n, messages +- Used by: Page components during metadata generation and rendering + +**Content Layer (Messages):** +- Purpose: Store translatable content strings and structured content +- Location: `src/messages/` +- Contains: JSON files for each locale (`en.json`, `ja.json`, `zh-hans.json`, `zh-hant.json`) containing all UI text, section content, and metadata + +## Data Flow + +**Static Page Generation (Build Time):** + +1. Next.js calls `generateStaticParams()` in layout files to discover all locale variants and dynamic routes +2. For each locale and route, the page component is rendered +3. `generateMetadata()` is called to build title, description, and schema tags +4. Messages are loaded from `src/messages/` for the current locale +5. Schema objects are built (SoftwareApplication, FAQ, Breadcrumb) +6. Page renders with localized messages and embedded schema in `