FeatureBento

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

const features = [
  { title: 'AI-Generated', desc: '17,500+ components generated by state-of-the-art language models', icon: '🤖', size: 'large', accent: '#C9A84C' },
  { title: 'MCP Native', desc: 'Works directly in Claude Code and Cursor', icon: '⚡', size: 'small', accent: '#6366f1' },
  { title: 'Dark Mode', desc: 'Every component ships dark-first', icon: '🌙', size: 'small', accent: '#6366f1' },
  { title: 'TypeScript', desc: 'Full type safety with proper interfaces and generics', icon: '📘', size: 'medium', accent: '#22c55e' },
  { title: 'Tailwind CSS', desc: 'Utility-first styling, no extra dependencies', icon: '🎨', size: 'medium', accent: '#06b6d4' },
  { title: 'Copy & Paste', desc: 'No install needed. Just copy the code.', icon: '📋', size: 'small', accent: '#C9A84C' },
]

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

  return (
    <div style={{ background: '#0A0A0A', padding: '60px 40px' }}>
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <h2 style={{ fontSize: 40, fontWeight: 900, color: '#F5F5F0', letterSpacing: '-1.5px', marginBottom: 12 }}>Everything you need</h2>
        <p style={{ color: '#666', fontSize: 16 }}>Built for modern React development from day one.</p>
      </div>

      <div style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'auto auto', gap: 16 }}>
        {features.map((f, i) => (
          <div key={i}
            onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
            style={{
              background: hovered === i ? `${f.accent}12` : '#111',
              border: `1px solid ${hovered === i ? f.accent + '40' : 'rgba(255,255,255,0.06)'}`,
              borderRadius: 16, padding: '28px 24px',
              gridColumn: f.size === 'large' ? 'span 2' : 'span 1',
              transition: 'all 0.2s', cursor: 'default',
            }}>
            <div style={{ fontSize: f.size === 'large' ? 40 : 28, marginBottom: 12 }}>{f.icon}</div>
            <div style={{ color: hovered === i ? f.accent : '#F5F5F0', fontSize: f.size === 'large' ? 22 : 17, fontWeight: 700, marginBottom: 8, transition: 'color 0.2s' }}>{f.title}</div>
            <div style={{ color: '#666', fontSize: 14, lineHeight: 1.6 }}>{f.desc}</div>
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

About

Bento-grid feature showcase with large and small cards, icons, and hover effects