SocialProof

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

const avatars = ['👨‍💻','👩‍💻','🧑‍💼','👨‍🎨','👩‍🎨','🧑‍💻','👨‍💼','👩‍💼']
const companies = ['Stripe', 'Vercel', 'Linear', 'Notion', 'Figma', 'Github']
const badges = [
  { icon: '🔒', label: 'SOC2 Ready' },
  { icon: '⚡', label: '99.9% Uptime' },
  { icon: '🌍', label: 'GDPR Compliant' },
  { icon: '🏆', label: 'Award Winning' },
]

export default function SocialProof() {
  const [count, setCount] = useState(4218)

  useEffect(() => {
    const interval = setInterval(() => setCount(c => c + Math.floor(Math.random() * 3)), 3000)
    return () => clearInterval(interval)
  }, [])

  return (
    <div style={{ background: '#0A0A0A', padding: '60px 40px' }}>
      {/* Avatar stack + count */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, marginBottom: 48 }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {avatars.slice(0, 6).map((av, i) => (
            <div key={i} style={{
              width: 40, height: 40, borderRadius: '50%',
              background: `hsl(${i * 45}, 60%, 30%)`,
              border: '2px solid #0A0A0A', marginLeft: i > 0 ? -10 : 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20,
              zIndex: avatars.length - i,
            }}>{av}</div>
          ))}
          <div style={{ marginLeft: 12, color: '#F5F5F0', fontSize: 15 }}>
            <span style={{ fontWeight: 800, color: '#C9A84C' }}>{count.toLocaleString()}</span> developers joined
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {[1,2,3,4,5].map(s => <span key={s} style={{ color: '#C9A84C', fontSize: 18 }}>★</span>)}
        </div>
        <div style={{ color: '#555', fontSize: 13 }}>"The best UI library for AI-first development"</div>
      </div>

      {/* Trusted by */}
      <div style={{ textAlign: 'center', marginBottom: 32 }}>
        <div style={{ color: '#444', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 16 }}>Trusted by teams at</div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 32, flexWrap: 'wrap' }}>
          {companies.map(c => (
            <span key={c} style={{ color: '#333', fontSize: 16, fontWeight: 700, letterSpacing: '-0.5px' }}>{c}</span>
          ))}
        </div>
      </div>

      {/* Trust badges */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
        {badges.map(b => (
          <div key={b.label} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)',
            padding: '8px 16px', borderRadius: 24, color: '#aaa', fontSize: 13,
          }}>
            <span>{b.icon}</span> {b.label}
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

About

Social proof banner with animated avatar stack, live count, and trust badges