Skip to main content

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