TeamGrid

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

const TEAM = [
  { name:'Alice Martin', role:'Lead Designer', emoji:'👩‍🎨', bg:'#f0f4ff', links:['🐦','💼','🐙'] },
  { name:'Bob Chen', role:'Senior Dev', emoji:'👨‍💻', bg:'#f0fdf4', links:['🐦','💼','🐙'] },
  { name:'Carol White', role:'Product Manager', emoji:'👩‍💼', bg:'#fff5f0', links:['🐦','💼'] },
  { name:'David Lee', role:'AI Engineer', emoji:'🧑‍🔬', bg:'#fdf4ff', links:['🐦','🐙'] },
]

export default function TeamGrid({ members = TEAM }) {
  const [hovered, setHovered] = useState(null)
  return (
    <div style={{ display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:'14px', maxWidth:'480px' }}>
      {members.map(m => (
        <div key={m.name}
          onMouseEnter={()=>setHovered(m.name)}
          onMouseLeave={()=>setHovered(null)}
          style={{
            background:m.bg, borderRadius:'16px', padding:'20px',
            textAlign:'center', transition:'all 0.25s', cursor:'pointer',
            transform:hovered===m.name?'translateY(-4px)':'none',
            boxShadow:hovered===m.name?'0 12px 30px rgba(0,0,0,0.1)':'0 2px 8px rgba(0,0,0,0.04)',
          }}
        >
          <div style={{ fontSize:'44px', marginBottom:'10px' }}>{m.emoji}</div>
          <div style={{ fontWeight:700, fontSize:'14px', color:'#1e293b', marginBottom:'3px' }}>{m.name}</div>
          <div style={{ fontSize:'12px', color:'#94a3b8', marginBottom:'12px' }}>{m.role}</div>
          <div style={{ display:'flex', justifyContent:'center', gap:'8px', opacity:hovered===m.name?1:0, transition:'opacity 0.2s' }}>
            {m.links.map((l, i) => (
              <button key={i} style={{ background:'rgba(0,0,0,0.06)', border:'none', borderRadius:'8px', padding:'4px 8px', cursor:'pointer', fontSize:'14px' }}>{l}</button>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

About

Team member grid with hover cards showing social links and bio