# Superpowers Plugin CTA - Visual Mockup Guide ## Visual Representation This document provides ASCII and descriptive visualizations of the CTA section to help you visualize the final design before implementation. --- ## Desktop View (>968px) ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ │ │ ✨ v1.0 Released │ ← Urgency Badge │ │ │ Transform Claude Code into a Senior Developer │ ← Main Heading │ (gradient text: indigo → purple) │ │ │ │ Give your AI agent real software development skills with TDD workflows, │ ← Subheading │ intelligent debugging, and project planning capabilities. │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ ✓ │ │ ⚡ │ │ 📋 │ │ ← Features Grid │ │ │ │ │ │ │ │ │ │ Test-Driven │ │ Intelligent │ │ Smart Project │ │ │ │ Development │ │ Debugging │ │ Planning │ │ │ │ │ │ │ │ │ │ │ │ Ship bug-free │ │ 10x faster root │ │ Break down complex │ │ │ │ code with │ │ cause analysis │ │ tasks automatically │ │ │ │ confidence │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────┐ │ │ │ Install Superpowers Plugin [→] │ ← Primary CTA │ └─────────────────────────────────────────────┘ │ (Gradient button) │ │ │ [📄] View Installation Guide │ ← Secondary CTA │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ ⭐ │ │ 📦 │ │ 👥 │ │ ← Social Proof │ │ │ │ │ │ │ │ │ │ 2.5k+ │ │ 10k+ │ │ 500+ │ │ │ │ Stars │ │ Installs │ │ Users │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ 🛡️ MIT License • Open Source • Community Built │ ← Trust │ │ └─────────────────────────────────────────────────────────────────────────────┘ ↑ Glass Card Container (frosted glass with blur effect) ``` --- ## Tablet View (768px - 968px) ``` ┌─────────────────────────────────────────────┐ │ │ │ ✨ v1.0 Released │ │ │ │ Transform Claude Code into a │ │ Senior Developer │ │ │ │ Give your AI agent real software... │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ ✓ Test-Driven Development │ │ ← Features │ │ Ship bug-free code... │ │ (Stacked) │ └─────────────────────────────────────┘ │ │ ┌─────────────────────────────────────┐ │ │ │ ⚡ Intelligent Debugging │ │ │ │ 10x faster root... │ │ │ └─────────────────────────────────────┘ │ │ ┌─────────────────────────────────────┐ │ │ │ 📋 Smart Project Planning │ │ │ │ Break down complex... │ │ │ └─────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────┐ │ │ │ Install Superpowers Plugin [→]│ │ ← Primary CTA │ └───────────────────────────────┘ │ (Full width) │ │ │ [📄] View Installation Guide │ │ │ │ ⭐ 2.5k+ 📦 10k+ 👥 500+ │ ← Stats │ Stars Installs Users │ (Horizontal) │ │ │ 🛡️ MIT License • Open Source • Community │ │ │ └─────────────────────────────────────────────┘ ``` --- ## Mobile View (<768px) ``` ┌─────────────────────────┐ │ │ │ ✨ v1.0 Released │ │ │ │ Transform Claude Code │ │ into a Senior │ │ Developer │ │ │ │ Give your AI agent │ │ real software... │ │ │ │ ┌───────────────────┐ │ │ │ ✓ TDD │ │ ← Features │ │ Ship bug-free │ │ (Compact) │ └───────────────────┘ │ │ ┌───────────────────┐ │ │ │ ⚡ Debugging │ │ │ │ 10x faster │ │ │ └───────────────────┘ │ │ ┌───────────────────┐ │ │ │ 📋 Planning │ │ │ │ Break down... │ │ │ └───────────────────┘ │ │ │ │ ┌───────────────────┐ │ │ │ Install Superpowers│ │ ← Primary CTA │ │ Plugin [→] │ │ (Full width) │ └───────────────────┘ │ │ │ │ [📄] View Guide │ │ │ │ ⭐ 2.5k+ Stars │ ← Stats │ 📦 10k+ Installs │ (Stacked) │ 👥 500+ Users │ │ │ │ 🛡️ MIT License │ │ Open Source │ │ Community Built │ │ │ └─────────────────────────┘ ``` --- ## Color Scheme Visualization ### Primary Colors ``` Indigo: ████████████████████ #6366f1 (Main brand) Purple: ████████████████████ #8b5cf6 (Gradient accent) Emerald: ████████████████████ #10b981 (Success/accent) ``` ### Gradient Effect ``` Indigo → Purple Gradient: ████████████████████████████████████████████████████ Light Medium Dark #6366f1 #7972e3 #8b5cf6 ``` ### Glass Effect ``` Background: rgba(255, 255, 255, 0.85) Backdrop Filter: blur(20px) Visual representation: ┌──────────────────────────────────┐ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Semi-transparent white │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ ← Content with blur │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← Frosted glass effect └──────────────────────────────────┘ ``` --- ## Typography Scale ``` H2 (Main Heading): 2.5rem (40px) - Extra Bold (800) Transform Claude Code into a Senior Developer P (Subheading): 1.125rem (18px) - Regular (400) Give your AI agent real software development skills... Feature Title: 1rem (16px) - Semi-Bold (600) Test-Driven Development Feature Benefit: 0.875rem (14px) - Regular (400) Ship bug-free code with confidence Primary CTA: 1.125rem (18px) - Bold (700) Install Superpowers Plugin Secondary CTA: 0.95rem (15.2px) - Medium (500) View Installation Guide Stats Value: 1.25rem (20px) - Extra Bold (800) 2.5k+ Stats Label: 0.75rem (12px) - Medium (500) GitHub Stars ``` --- ## Spacing System ``` Section Padding: 4rem (64px) top/bottom Card Padding: 3rem (48px) internal Content Gap: 1.5rem (24px) between elements Feature Gap: 1.5rem (24px) between features Stat Gap: 3rem (48px) between stats Mobile Padding: 2rem (32px) card (mobile) Small Mobile: 1.5rem (24px) card (<480px) Visual representation: ┌────────────────────────────────────┐ │ │ ← 4rem (64px) padding │ │ │ Badge │ │ │ ← 2rem gap │ Heading │ │ │ ← 1rem gap │ Subheading │ │ │ ← 2.5rem gap │ Features │ │ ┌───┐ ┌───┐ ┌───┐ │ ← 1.5rem gap │ │ 1 │ │ 2 │ │ 3 │ │ │ └───┘ └───┘ └───┘ │ │ │ ← 2.5rem gap │ [Primary CTA] │ │ │ ← 1rem gap │ [Secondary CTA] │ │ │ ← 2.5rem gap │ Stats │ │ │ ← 2rem gap │ Trust │ │ │ ← 4rem (64px) padding └────────────────────────────────────┘ ``` --- ## Animation Timings ``` Badge Pulse: 2s infinite Scale: 1.0 → 1.02 → 1.0 Shadow: 0.3 → 0.4 → 0.3 Badge Sparkle: 1.5s infinite Rotate: 0° → 10° → 0° Scale: 1.0 → 1.2 → 1.0 Feature Hover: 300ms TranslateY: 0 → -4px Background: 0.05 → 0.08 opacity CTA Hover: 300ms TranslateY: 0 → -2px Shadow: 0.3 → 0.4 opacity Arrow: 0 → 4px translateX Entry Animation: 600ms (one-time) Fade in: 0 → 1 opacity Slide up: 20px → 0px ``` --- ## Component Measurements ### Badge ``` Width: Auto (based on text) Height: 36px Padding: 0.5rem 1rem (8px 16px) Border Radius: 100px (pill shape) Font Size: 0.875rem (14px) Font Weight: 600 (Semi-Bold) ``` ### Feature Cards ``` Width: 1fr (equal columns) Padding: 1.25rem (20px) Border Radius: 12px Gap: 1.5rem (24px) Icon Size: 32px Title Size: 1rem (16px) Benefit Size: 0.875rem (14px) ``` ### Primary CTA Button ``` Width: Auto (fit content) Height: 48px (desktop) Padding: 1rem 2.5rem (16px 40px) Border Radius: 12px Font Size: 1.125rem (18px) Font Weight: 700 (Bold) Icon Size: 20px ``` ### Stats ``` Icon Size: 24px Value Size: 1.25rem (20px) Label Size: 0.75rem (12px) Gap: 3rem (48px) between stats ``` --- ## Responsive Breakpoints ``` Extra Large (1440px+): Card Padding: 3.5rem Heading: 2.5rem Features: 3 columns Desktop (968px - 1439px): Card Padding: 3rem Heading: 2.5rem Features: 3 columns Tablet (768px - 967px): Card Padding: 2.5rem Heading: 2.25rem Features: 1 column (stacked) Mobile (480px - 767px): Card Padding: 2rem Heading: 2rem Features: 1 column (stacked) Stats: Stacked vertically Small Mobile (<480px): Card Padding: 1.5rem Heading: 1.75rem Features: 1 column (compact) Stats: Stacked vertically ``` --- ## Dark Mode Visualization ``` ┌─────────────────────────────────────────────┐ │ │ ← Dark glass card │ Transform Claude Code into a │ (rgba(30, 41, 59, 0.85)) │ Senior Developer │ │ │ │ Give your AI agent real software... │ ← Lighter text │ │ (#94a3b8) │ ┌─────────────────────────────────────┐ │ │ │ ✓ Test-Driven Development │ │ ← Features with │ │ Ship bug-free code... │ │ darker background │ └─────────────────────────────────────┘ │ (rgba(99, 102, 241, 0.08)) │ │ │ [Install Superpowers Plugin] │ ← Same gradient CTA │ │ │ ⭐ 2.5k+ 📦 10k+ 👥 500+ │ │ │ └─────────────────────────────────────────────┘ ``` --- ## Focus States (Accessibility) ``` Primary CTA Focus: ┌─────────────────────────────────┐ │ │ ← 3px outline │ ┌─────────────────────────────┐ │ (#6366f1) │ │ Install Superpowers Plugin │ │ 4px offset │ └─────────────────────────────┘ │ └─────────────────────────────────┘ Secondary CTA Focus: [View Installation Guide] ^^^^^^^^^^^^^^^^^^^^^^^^ 3px outline, 4px offset ``` --- ## Hover States Visualization ### Feature Card Hover ``` Normal: ┌─────────────────────────┐ │ ✓ Test-Driven │ │ Ship bug-free... │ └─────────────────────────┘ Hover: ┌─────────────────────────┐ ← Moves up 4px │ ✓ Test-Driven │ ← Darker background │ Ship bug-free... │ ← Border brightens └─────────────────────────┘ ``` ### CTA Button Hover ``` Normal: ┌─────────────────────────┐ │ Install Plugin [→] │ └─────────────────────────┘ Hover: ┌─────────────────────────┐ ← Moves up 2px │ Install Plugin [→] │ ← Shadow intensifies └─────────────────────────┘ ← Arrow moves right ``` --- ## Loading Animation (Entry) ``` Frame 0 (0ms): [Content invisible, 20px down] Frame 1 (150ms): [Opacity: 0.25, Position: -15px] Frame 2 (300ms): [Opacity: 0.5, Position: -10px] Frame 3 (450ms): [Opacity: 0.75, Position: -5px] Frame 4 (600ms): [Opacity: 1.0, Position: 0px] [Animation complete] ``` --- ## Reduced Motion (Accessibility) ``` Normal (Motion ON): Badge: ✓ Pulse animation (2s) Features: ✓ Hover translate (300ms) CTA: ✓ Hover translate (300ms) Entry: ✓ Fade-in animation (600ms) Reduced Motion (Motion OFF): Badge: ✗ No animation Features: ✗ No hover effect CTA: ✗ No hover effect Entry: ✗ No entry animation ``` --- ## Visual Hierarchy Map ``` Level 1 (Highest Priority): ████████████████████ Transform Claude Code into a Senior Developer (Size: 2.5rem, Weight: 800, Color: Gradient) Level 2: █████████████ Install Superpowers Plugin (Size: 1.125rem, Weight: 700, Color: White on Gradient) Level 3: ████████ [Feature Cards] (Size: 1rem, Weight: 600, Color: Primary) Level 4: ██████ Give your AI agent... (Size: 1.125rem, Weight: 400, Color: Secondary) Level 5: ████ 2.5k+ Stars, 10k+ Installs (Size: 1.25rem, Weight: 800, Color: Primary) Level 6 (Lowest Priority): ██ View Installation Guide (Size: 0.95rem, Weight: 500, Color: Secondary) ``` --- ## Conclusion This visual guide provides a comprehensive visualization of the CTA section design. Use this reference to: 1. **Preview the layout** before implementation 2. **Understand spacing** and proportions 3. **Plan responsive behavior** across devices 4. **Verify accessibility** features 5. **Communicate design** to stakeholders For actual implementation, use the `superpowers-cta-optimized.html` file. --- **Document Version**: 1.0 **Date**: 2026-01-18 **Design System**: UI/UX Pro Max