Add under-anything knowledge dashboard

Understand-Anything-main/docs/superpowers/specs/2026-03-15-homepage-design.md

@@ -0,0 +1,83 @@
+# Understand Anything — Project Homepage Design
+
+**Date**: 2026-03-15
+**Goal**: Attract new users to the Understand Anything Claude Code plugin
+**Approach**: "The Reveal" — cinematic scroll-driven single-page site
+
+## Tech Stack
+
+- **Astro** (static site generator, zero JS framework overhead)
+- **Self-hosted fonts** (no Google Fonts CDN dependency — works in China)
+- **CSS** with variables matching dashboard theme
+- **Vanilla JS** for `IntersectionObserver` scroll animations
+- **GitHub Actions** for CI/CD to `gh-pages` branch
+
+## Source & Deployment
+
+- Source: `homepage/` directory on `main` branch
+- Build output: deployed to `gh-pages` branch via GitHub Actions
+- URL: `understand-anything.com`
+
+## Page Structure (scroll order)
+
+### 1. Nav Bar
+Minimal floating nav. Logo/wordmark left, GitHub star button + "Get Started" CTA right. Transparent, becomes solid on scroll.
+
+### 2. Hero (full viewport)
+- Headline: **"Understand Any Codebase"**
+- Subheadline: "Turn 200,000 lines of code into an interactive knowledge graph you can explore, search, and learn from — powered by multi-agent AI analysis."
+- CTA: "Get Started" (gold button, scrolls to install section)
+- Secondary: "View on GitHub" (text link)
+- Background: `hero.jpg` with dark gradient overlay
+
+### 3. Dashboard Showcase
+- Label: "See your codebase come alive"
+- `overview.png` in a stylized browser frame with gold glow shadow
+- Fade-in on scroll
+
+### 4. Feature Cards (3 columns)
+Staggered fade-in animation:
+1. **Interactive Knowledge Graph** — "Visualize files, functions, and dependencies as an explorable graph with smart layout."
+2. **Plain-English Summaries** — "Every node explained in language anyone can understand — from junior devs to product managers."
+3. **Guided Tours** — "AI-generated walkthroughs that teach you the codebase step by step."
+
+### 5. Install CTA
+- Headline: "Get started in 30 seconds"
+- Code block:
+  ```
+  /plugin marketplace add Lum1104/Understand-Anything
+  /plugin install understand-anything
+  /understand
+  ```
+- "Works with Claude Code" note
+
+### 6. Footer
+- "Understand Anything" wordmark
+- GitHub link, license
+- "Built as a Claude Code plugin"
+
+## Visual Design System
+
+### Colors (matching dashboard)
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--bg` | `#0a0a0a` | Page background |
+| `--surface` | `#141414` | Card backgrounds |
+| `--border` | `#1a1a1a` | Borders, dividers |
+| `--accent` | `#d4a574` | Gold/amber primary accent |
+| `--text` | `#e8e2d8` | Primary text (warm white) |
+| `--text-muted` | `#8a8578` | Secondary text |
+
+### Typography (self-hosted, with fallbacks)
+- **Headings**: DM Serif Display → Georgia, "Times New Roman", serif
+- **Body**: Inter → -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
+- **Code**: JetBrains Mono → "SF Mono", "Cascadia Code", "Fira Code", monospace
+- Hero headline: ~4rem serif with subtle text-shadow glow
+
+### Effects
+- Gold glow on dashboard screenshot frame (`box-shadow` with gold at low opacity)
+- Subtle noise texture overlay (SVG, matching dashboard)
+- Scroll-triggered fade+slide-up animations (CSS `@keyframes` + `IntersectionObserver`)
+- CTA button: gold background with hover glow pulse
+- Cards: glass-morphism with `backdrop-filter: blur`
+- Responsive: 768px (tablet), 480px (mobile)