CTASection

'use client'
import { useState } from 'react'

export default function CTASection() {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)

  return (
    <div style={{ background: 'linear-gradient(135deg, #080808 0%, #0d0817 50%, #070d08 100%)', padding: '64px 40px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      {/* Glow blobs */}
      <div style={{ position: 'absolute', top: -80, left: '20%', width: 300, height: 300, borderRadius: '50%', background: 'rgba(201,168,76,0.06)', filter: 'blur(60px)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: -80, right: '20%', width: 300, height: 300, borderRadius: '50%', background: 'rgba(99,102,241,0.06)', filter: 'blur(60px)', pointerEvents: 'none' }} />

      <div style={{ position: 'relative', maxWidth: 580, margin: '0 auto' }}>
        {/* Eyebrow */}
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(201,168,76,0.08)', border: '1px solid rgba(201,168,76,0.2)', borderRadius: 20, padding: '5px 14px', marginBottom: 24 }}>
          <span style={{ color: '#22c55e', fontSize: 10 }}>●</span>
          <span style={{ color: '#C9A84C', fontSize: 12, fontWeight: 600 }}>120+ components live · 847 MCP requests today</span>
        </div>

        <h2 style={{ color: '#F5F5F0', fontSize: 40, fontWeight: 900, lineHeight: 1.15, marginBottom: 16, letterSpacing: '-0.02em' }}>
          Build faster with<br /><span style={{ background: 'linear-gradient(135deg, #C9A84C, #f0c060)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>AI-powered UI</span>
        </h2>

        <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 17, lineHeight: 1.6, marginBottom: 40 }}>
          The largest collection of production-ready React components, accessible via Claude Code MCP. Stop searching. Start building.
        </p>

        {submitted ? (
          <div style={{ background: 'rgba(34,197,94,0.1)', border: '1px solid rgba(34,197,94,0.25)', borderRadius: 12, padding: '16px 24px', color: '#22c55e', fontSize: 15, fontWeight: 600 }}>
            ✓ You're on the list! We'll notify you when Pro launches.
          </div>
        ) : (
          <div style={{ display: 'flex', gap: 10, maxWidth: 420, margin: '0 auto 40px' }}>
            <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Enter your email"
              onKeyDown={e => e.key === 'Enter' && email && setSubmitted(true)}
              style={{ flex: 1, background: 'rgba(255,255,255,0.06)', border: '1.5px solid rgba(255,255,255,0.12)', borderRadius: 10, color: '#F5F5F0', fontSize: 14, padding: '13px 16px', outline: 'none' }} />
            <button onClick={() => email && setSubmitted(true)} style={{ background: '#C9A84C', color: '#0A0A0A', border: 'none', borderRadius: 10, padding: '13px 22px', fontWeight: 800, cursor: 'pointer', fontSize: 14, whiteSpace: 'nowrap' }}>
              Get early access
            </button>
          </div>
        )}

        {/* Social proof */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex' }}>
            {['SC', 'MW', 'PP', 'AK', 'TG'].map((init, i) => (
              <div key={init} style={{ width: 32, height: 32, borderRadius: '50%', background: ['#C9A84C','#6366f1','#22c55e','#ef4444','#f59e0b'][i], border: '2px solid #080808', marginLeft: i > 0 ? -10 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0A0A0A', fontSize: 10, fontWeight: 800, position: 'relative', zIndex: 5 - i }}>
                {init}
              </div>
            ))}
          </div>
          <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 13 }}>
            Joined by <strong style={{ color: '#F5F5F0' }}>847</strong> developers this week
          </div>
          <div style={{ display: 'flex', gap: 2 }}>
            {'★★★★★'.split('').map((s, i) => <span key={i} style={{ color: '#C9A84C', fontSize: 14 }}>★</span>)}
          </div>
        </div>
      </div>
    </div>
  )
}

Component info

About

Full-width CTA section with gradient background, animated counter, email capture, and social proof