# 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
