7a491b1548
Features: - 30+ Custom Skills (cognitive, development, UI/UX, autonomous agents) - RalphLoop autonomous agent integration - Multi-AI consultation (Qwen) - Agent management system with sync capabilities - Custom hooks for session management - MCP servers integration - Plugin marketplace setup - Comprehensive installation script Components: - Skills: always-use-superpowers, ralph, brainstorming, ui-ux-pro-max, etc. - Agents: 100+ agents across engineering, marketing, product, etc. - Hooks: session-start-superpowers, qwen-consult, ralph-auto-trigger - Commands: /brainstorm, /write-plan, /execute-plan - MCP Servers: zai-mcp-server, web-search-prime, web-reader, zread - Binaries: ralphloop wrapper Installation: ./supercharge.sh
637 lines
16 KiB
HTML
637 lines
16 KiB
HTML
<!--
|
|
Superpowers Plugin CTA Section - Conversion Optimized v2.0
|
|
Created: 2026-01-18
|
|
Design System: UI/UX Pro Max
|
|
|
|
PLACEMENT: Insert at the end of the Superpowers Plugin article
|
|
FEATURES:
|
|
- Glassmorphism design with premium aesthetics
|
|
- Cognitive-optimized structure (F-Pattern reading)
|
|
- Conversion-focused hierarchy
|
|
- Social proof and trust indicators
|
|
- WCAG AA accessibility compliant
|
|
- Mobile-first responsive design
|
|
- GPU-accelerated animations (60fps)
|
|
|
|
CUSTOMIZATION REQUIRED:
|
|
- Replace [GITHUB_REPO_URL] with actual repository URL
|
|
- Replace [INSTALLATION_DOCS_URL] with installation guide URL
|
|
- Update stats (2.5k+ stars, 10k+ installs) with real numbers
|
|
- Add real testimonial if available
|
|
-->
|
|
|
|
<section class="super-cta-section" aria-labelledby="super-cta-heading">
|
|
<div class="super-glass-card">
|
|
|
|
<!-- Urgency/Status Badge -->
|
|
<div class="super-badge">
|
|
<span class="super-badge-icon">✨</span>
|
|
<span class="super-badge-text">v1.0 Released</span>
|
|
</div>
|
|
|
|
<!-- Main Heading -->
|
|
<h2 id="super-cta-heading" class="super-heading">
|
|
Transform Claude Code into a <span class="super-gradient">Senior Developer</span>
|
|
</h2>
|
|
|
|
<!-- Supporting Subheading -->
|
|
<p class="super-subheading">
|
|
Give your AI agent real software development skills with TDD workflows,
|
|
intelligent debugging, and project planning capabilities.
|
|
</p>
|
|
|
|
<!-- Feature Benefits Grid -->
|
|
<div class="super-features">
|
|
<div class="super-feature">
|
|
<svg class="super-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div class="super-feature-content">
|
|
<strong class="super-feature-title">Test-Driven Development</strong>
|
|
<span class="super-feature-benefit">Ship bug-free code with confidence</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="super-feature">
|
|
<svg class="super-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
<div class="super-feature-content">
|
|
<strong class="super-feature-title">Intelligent Debugging</strong>
|
|
<span class="super-feature-benefit">10x faster root cause analysis</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="super-feature">
|
|
<svg class="super-feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
|
|
</svg>
|
|
<div class="super-feature-content">
|
|
<strong class="super-feature-title">Smart Project Planning</strong>
|
|
<span class="super-feature-benefit">Break down complex tasks automatically</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Primary CTA Button -->
|
|
<a href="[GITHUB_REPO_URL]" class="super-cta-primary" role="button">
|
|
<span class="super-cta-text">Install Superpowers Plugin</span>
|
|
<svg class="super-cta-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M13 7l5 5m0 0l-5 5m5-5H6"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Secondary CTA (Documentation) -->
|
|
<a href="[INSTALLATION_DOCS_URL]" class="super-cta-secondary">
|
|
<svg class="super-doc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
<span>View Installation Guide</span>
|
|
</a>
|
|
|
|
<!-- Social Proof Stats -->
|
|
<div class="super-stats">
|
|
<div class="super-stat">
|
|
<svg class="super-stat-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
</svg>
|
|
<div class="super-stat-content">
|
|
<span class="super-stat-value">2.5k+</span>
|
|
<span class="super-stat-label">GitHub Stars</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="super-stat">
|
|
<svg class="super-stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
|
|
</svg>
|
|
<div class="super-stat-content">
|
|
<span class="super-stat-value">10k+</span>
|
|
<span class="super-stat-label">Installations</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="super-stat">
|
|
<svg class="super-stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
|
</svg>
|
|
<div class="super-stat-content">
|
|
<span class="super-stat-value">500+</span>
|
|
<span class="super-stat-label">Active Developers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trust Indicators -->
|
|
<div class="super-trust">
|
|
<svg class="super-trust-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
|
</svg>
|
|
<span>MIT License • Open Source • Community Built</span>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* ===== SUPERPOWERS CTA SECTION - OPTIMIZED STYLES ===== */
|
|
|
|
/* CSS Variables for Easy Customization */
|
|
:root {
|
|
--super-primary: #6366f1;
|
|
--super-primary-dark: #4f46e5;
|
|
--super-secondary: #8b5cf6;
|
|
--super-accent: #10b981;
|
|
--super-accent-dark: #059669;
|
|
--super-text-primary: #1f2937;
|
|
--super-text-secondary: #6b7280;
|
|
--super-bg-glass: rgba(255, 255, 255, 0.85);
|
|
--super-bg-glass-dark: rgba(30, 41, 59, 0.85);
|
|
--super-bg-feature: rgba(99, 102, 241, 0.05);
|
|
--super-border: rgba(255, 255, 255, 0.3);
|
|
--super-radius-xl: 24px;
|
|
--super-radius-lg: 16px;
|
|
--super-radius-md: 12px;
|
|
--super-radius-sm: 8px;
|
|
--super-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
--super-shadow-card-hover: 0 12px 48px rgba(99, 102, 241, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
--super-shadow-cta: 0 8px 20px rgba(99, 102, 241, 0.3);
|
|
--super-shadow-cta-hover: 0 12px 28px rgba(99, 102, 241, 0.4);
|
|
}
|
|
|
|
/* Section Container */
|
|
.super-cta-section {
|
|
padding: 4rem 1rem;
|
|
margin: 4rem 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Background Gradient */
|
|
.super-cta-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Glass Card Container */
|
|
.super-glass-card {
|
|
background: var(--super-bg-glass);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-radius: var(--super-radius-xl);
|
|
border: 1px solid var(--super-border);
|
|
box-shadow: var(--super-shadow-card);
|
|
padding: 3rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.super-glass-card:hover {
|
|
box-shadow: var(--super-shadow-card-hover);
|
|
}
|
|
|
|
/* Dark Mode Support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.super-glass-card {
|
|
background: var(--super-bg-glass-dark);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.super-heading,
|
|
.super-feature-title {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.super-subheading,
|
|
.super-stat-label,
|
|
.super-trust span {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.super-feature {
|
|
background: rgba(99, 102, 241, 0.08);
|
|
border-color: rgba(99, 102, 241, 0.15);
|
|
}
|
|
|
|
.super-feature:hover {
|
|
background: rgba(99, 102, 241, 0.12);
|
|
}
|
|
}
|
|
|
|
/* Urgency Badge */
|
|
.super-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: linear-gradient(135deg, var(--super-accent) 0%, var(--super-accent-dark) 100%);
|
|
border-radius: 100px;
|
|
color: #ffffff;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
|
animation: super-badge-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes super-badge-pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
|
|
}
|
|
}
|
|
|
|
.super-badge-icon {
|
|
font-size: 1rem;
|
|
animation: super-badge-sparkle 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes super-badge-sparkle {
|
|
0%, 100% {
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
50% {
|
|
transform: scale(1.2) rotate(10deg);
|
|
}
|
|
}
|
|
|
|
/* Main Heading */
|
|
.super-heading {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin: 0 0 1rem 0;
|
|
color: var(--super-text-primary);
|
|
}
|
|
|
|
.super-gradient {
|
|
background: linear-gradient(135deg, var(--super-primary) 0%, var(--super-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Subheading */
|
|
.super-subheading {
|
|
font-size: 1.125rem;
|
|
color: var(--super-text-secondary);
|
|
line-height: 1.6;
|
|
margin: 0 0 2.5rem 0;
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Features Grid */
|
|
.super-features {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.super-feature {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1.25rem;
|
|
background: var(--super-bg-feature);
|
|
border-radius: var(--super-radius-md);
|
|
border: 1px solid rgba(99, 102, 241, 0.1);
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.super-feature:hover {
|
|
background: rgba(99, 102, 241, 0.08);
|
|
border-color: rgba(99, 102, 241, 0.2);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
|
|
}
|
|
|
|
.super-feature-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--super-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.super-feature-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.super-feature-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--super-text-primary);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.super-feature-benefit {
|
|
font-size: 0.875rem;
|
|
color: var(--super-text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Primary CTA Button */
|
|
.super-cta-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem 2.5rem;
|
|
background: linear-gradient(135deg, var(--super-primary) 0%, var(--super-secondary) 100%);
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
border-radius: var(--super-radius-md);
|
|
box-shadow: var(--super-shadow-cta);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.super-cta-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--super-shadow-cta-hover);
|
|
}
|
|
|
|
.super-cta-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.super-cta-arrow {
|
|
width: 20px;
|
|
height: 20px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.super-cta-primary:hover .super-cta-arrow {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* Secondary CTA (Documentation) */
|
|
.super-cta-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.25rem;
|
|
color: var(--super-text-secondary);
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
border-radius: var(--super-radius-sm);
|
|
transition: all 0.2s ease;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.super-cta-secondary:hover {
|
|
background: rgba(99, 102, 241, 0.08);
|
|
color: var(--super-primary);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.super-doc-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* Social Proof Stats */
|
|
.super-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 3rem;
|
|
margin-bottom: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.super-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.super-stat-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--super-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.super-stat-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.super-stat-value {
|
|
font-size: 1.25rem;
|
|
font-weight: 800;
|
|
color: var(--super-text-primary);
|
|
line-height: 1;
|
|
}
|
|
|
|
.super-stat-label {
|
|
font-size: 0.75rem;
|
|
color: var(--super-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Trust Indicators */
|
|
.super-trust {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid rgba(99, 102, 241, 0.1);
|
|
font-size: 0.875rem;
|
|
color: var(--super-text-secondary);
|
|
}
|
|
|
|
.super-trust-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--super-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Responsive Design - Tablet */
|
|
@media (max-width: 968px) {
|
|
.super-glass-card {
|
|
padding: 2.5rem 2rem;
|
|
}
|
|
|
|
.super-heading {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.super-subheading {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.super-features {
|
|
grid-template-columns: 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.super-stats {
|
|
gap: 2rem;
|
|
}
|
|
|
|
.super-stat {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.super-stat-content {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
/* Responsive Design - Mobile */
|
|
@media (max-width: 768px) {
|
|
.super-cta-section {
|
|
padding: 3rem 1rem;
|
|
}
|
|
|
|
.super-glass-card {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.super-heading {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.super-subheading {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.super-cta-primary {
|
|
width: 100%;
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
.super-stats {
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Responsive Design - Small Mobile */
|
|
@media (max-width: 480px) {
|
|
.super-heading {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.super-feature {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.super-cta-primary {
|
|
font-size: 1rem;
|
|
padding: 0.875rem 1.25rem;
|
|
}
|
|
|
|
.super-stat-value {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
|
|
/* Focus States for Accessibility */
|
|
.super-cta-primary:focus-visible,
|
|
.super-cta-secondary:focus-visible {
|
|
outline: 3px solid var(--super-primary);
|
|
outline-offset: 4px;
|
|
border-radius: var(--super-radius-sm);
|
|
}
|
|
|
|
/* Reduced Motion Support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.super-badge,
|
|
.super-badge-icon,
|
|
.super-feature,
|
|
.super-cta-primary,
|
|
.super-cta-secondary {
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
|
|
.super-feature:hover,
|
|
.super-cta-primary:hover,
|
|
.super-cta-secondary:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.super-cta-section {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Entry Animations (Optional - Enable with JavaScript) */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.super-glass-card {
|
|
animation: super-fade-in-up 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes super-fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Optional: Add Intersection Observer for scroll animations -->
|
|
<script>
|
|
// Only enable animations if user prefers motion
|
|
if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.animation = 'super-fade-in-up 0.6s ease-out';
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.2
|
|
});
|
|
|
|
// Observe the glass card
|
|
const glassCard = document.querySelector('.super-glass-card');
|
|
if (glassCard) {
|
|
glassCard.style.opacity = '0';
|
|
observer.observe(glassCard);
|
|
}
|
|
}
|
|
</script>
|