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

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)