FeatureComparison

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

const FEATURES = [
  { label: 'Component count', empire: '120+', shadcn: '48', headless: '23+', magic: '50+' },
  { label: 'AI-generated', empire: true, shadcn: false, headless: false, magic: false },
  { label: 'MCP integration', empire: true, shadcn: false, headless: false, magic: false },
  { label: 'TypeScript', empire: true, shadcn: true, headless: true, magic: true },
  { label: 'Dark mode first', empire: true, shadcn: true, headless: false, magic: true },
  { label: 'Copy & paste', empire: true, shadcn: true, headless: false, magic: true },
  { label: 'Custom animations', empire: true, shadcn: false, headless: false, magic: true },
  { label: 'API access', empire: true, shadcn: false, headless: false, magic: false },
  { label: 'Price', empire: 'Free – $19/mo', shadcn: 'Free', headless: 'Free', magic: '$149/yr' },
]

const COLS = [
  { key: 'empire', label: 'Empire UI', highlight: true },
  { key: 'shadcn', label: 'shadcn/ui', highlight: false },
  { key: 'headless', label: 'Headless UI', highlight: false },
  { key: 'magic', label: 'Magic UI', highlight: false },
]

export default function FeatureComparison() {
  const [hovered, setHovered] = useState<number | null>(null)

  return (
    <div style={{ background: '#080808', padding: 24, overflowX: 'auto' }}>
      <div style={{ color: '#F5F5F0', fontSize: 20, fontWeight: 800, marginBottom: 4 }}>How we compare</div>
      <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 13, marginBottom: 24 }}>Empire UI vs the alternatives</div>

      <div style={{ minWidth: 540 }}>
        {/* Header */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr repeat(4, 120px)', borderBottom: '1px solid rgba(255,255,255,0.08)', paddingBottom: 16, marginBottom: 0 }}>
          <div />
          {COLS.map(col => (
            <div key={col.key} style={{ textAlign: 'center', padding: '0 8px' }}>
              <div style={{ color: col.highlight ? '#C9A84C' : '#F5F5F0', fontSize: 13, fontWeight: 700 }}>{col.label}</div>
              {col.highlight && <div style={{ background: '#C9A84C', color: '#0A0A0A', fontSize: 10, fontWeight: 800, padding: '1px 8px', borderRadius: 20, marginTop: 4, display: 'inline-block' }}>Best</div>}
            </div>
          ))}
        </div>

        {/* Rows */}
        {FEATURES.map((feat, i) => (
          <div key={feat.label} onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
            style={{ display: 'grid', gridTemplateColumns: '1fr repeat(4, 120px)', padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.04)', background: hovered === i ? 'rgba(255,255,255,0.02)' : 'transparent', transition: 'background 0.15s' }}>
            <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: 13, alignSelf: 'center', paddingRight: 16 }}>{feat.label}</div>
            {COLS.map(col => {
              const val = feat[col.key as keyof typeof feat]
              return (
                <div key={col.key} style={{ textAlign: 'center', padding: '0 8px', background: col.highlight ? 'rgba(201,168,76,0.04)' : 'transparent' }}>
                  {typeof val === 'boolean' ? (
                    <span style={{ color: val ? '#22c55e' : '#ef4444', fontSize: 18 }}>{val ? '✓' : '✕'}</span>
                  ) : (
                    <span style={{ color: col.highlight ? '#C9A84C' : 'rgba(255,255,255,0.5)', fontSize: 12, fontWeight: col.highlight ? 600 : 400 }}>{val as string}</span>
                  )}
                </div>
              )
            })}
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

About

Competitor comparison table with feature checkmarks, plan highlighting, and animated reveal