Landing Page Redesign Design

Goal

Redesign the Volr docs landing page (docs.volr.io) to be more action-oriented, featuring a prominent npx volr command, Claude Code skills showcase, and a terminal animation demo.

Current State

• Basic hero with "Volr SDK Documentation" title and generic subtitle
• Two CTA buttons (Get Started, Live Demo)
• 6 documentation category cards
• Dot pattern background, clean but unremarkable

Design: Hero Redesign + Separated Sections

Section 1: Hero

Layout: Centered, full-width

• Headline: "Stablecoin Payments. One Command." (bold, large, 2 lines)
• Subtitle: "Add stablecoin payments to your app in minutes, not weeks."
• npx command box:
  • Dark background (#111827)
  • Monospace font displaying $ npx volr
  • Copy icon on right side
  • Click to copy to clipboard with "Copied!" feedback
• CTA buttons: Docs, GitHub, Discord (secondary style)
• Background: Existing dot pattern, slightly more subtle

Section 2: Skills Cards

Layout: 3-column grid (1-col mobile)

• Section title: "Built-in Claude Code Skills"
• Section subtitle: "AI-powered skills to accelerate your integration"
• Cards: Each card has:
  • Lucide icon
  • Skill name
  • Description
  • Copy URL button (copies skill URL for Claude Code usage)
• Skills to display: Based on actual Volr Claude Code skills (Quick Setup, Payment Config, Testing Suite as examples - replace with real skills)

Section 3: Terminal Demo Animation

Layout: Centered, max-width container with terminal window

Terminal window styling:

• Dark background (#0d1117)
• Fake macOS window buttons (red/yellow/green dots) top-left
• Monospace font, subtle shadow
• Border-radius for rounded corners

Animation flow (Framer Motion, loops):

1. Cursor blink (0.5s)
2. Type npx volr character by character (0.8s)
3. Enter + brief pause (0.3s)
4. Sequential steps appear (0.6s each):
   • spinner -> checkmark "Installing Volr SDK..."
   • spinner -> checkmark "Configuring USDC payments..."
   • spinner -> checkmark "Setting up webhooks..."
   • spinner -> checkmark "Generating API keys..."
5. Completion message fade-in (0.5s)
6. Hold for 3s, then reset and loop

Colors: Green checkmarks (#4ade80), white text, subtle gray for dimmed text

Section 4: Documentation Cards (existing)

Keep current 6-card grid layout at the bottom, unchanged.

Technical Details

• Framework: Docusaurus (React)
• Animation: Framer Motion (already installed)
• Icons: lucide-react (already installed)
• Styling: CSS Modules + Tailwind (existing pattern)
• i18n: Must support en/ko translations (existing pattern)
• Responsive: Mobile-first, existing breakpoints (640/768/1024px)
• Dark mode: Full support using existing CSS custom properties

Files to Modify

• src/pages/index.tsx - Main homepage component
• src/pages/index.module.css - Homepage styles

Files to Create

• src/components/TerminalDemo/TerminalDemo.tsx - Terminal animation component
• src/components/TerminalDemo/TerminalDemo.module.css - Terminal styles
• src/components/SkillsSection/SkillsSection.tsx - Skills card section
• src/components/SkillsSection/SkillsSection.module.css - Skills styles
• src/components/NpxCommand/NpxCommand.tsx - Copyable npx command box
• src/components/NpxCommand/NpxCommand.module.css - Command box styles

Anti-Patterns to Avoid (from STYLE_GUIDE.md)

• No fonts other than Host Grotesk / system monospace
• No non-4px-multiple spacing
• No heavy shadows or dramatic animations
• No purple/indigo gradients
• No low contrast text