TestimonialCard

'use client'
export default function TestimonialCard({
  quote = 'Empire UI saved us weeks of development time. The component quality is outstanding and the MCP integration is a game changer.',
  name = 'Sarah Chen',
  role = 'CTO at Nexus Labs',
  emoji = '👩‍💼',
  rating = 5,
  company = '🏢 Nexus Labs',
}) {
  return (
    <div style={{
      background:'#fff', borderRadius:'20px', padding:'28px 24px',
      boxShadow:'0 4px 30px rgba(0,0,0,0.08)', maxWidth:'360px', position:'relative',
    }}>
      <div style={{ fontSize:'48px', color:'#e2e8f0', position:'absolute', top:'16px', left:'20px', lineHeight:1 }}>"</div>
      <div style={{ position:'relative', zIndex:1 }}>
        <div style={{ display:'flex', gap:'2px', marginBottom:'16px' }}>
          {Array.from({length:rating}).map((_,i) => <span key={i} style={{ color:'#f59e0b', fontSize:'18px' }}>★</span>)}
        </div>
        <p style={{ fontSize:'15px', lineHeight:1.7, color:'#374151', margin:'0 0 20px', fontStyle:'italic' }}>"{quote}"</p>
        <div style={{ display:'flex', alignItems:'center', gap:'12px', paddingTop:'16px', borderTop:'1px solid #f1f5f9' }}>
          <div style={{
            width:'44px', height:'44px', borderRadius:'50%',
            background:'linear-gradient(135deg,#6d28d9,#2563eb)',
            display:'flex', alignItems:'center', justifyContent:'center', fontSize:'20px',
          }}>{emoji}</div>
          <div>
            <div style={{ fontWeight:700, fontSize:'14px', color:'#1e293b' }}>{name}</div>
            <div style={{ fontSize:'12px', color:'#94a3b8' }}>{role}</div>
          </div>
          <div style={{ marginLeft:'auto', fontSize:'20px' }}>{company.split(' ')[0]}</div>
        </div>
      </div>
    </div>
  )
}

Component info

About

Customer testimonial card with avatar, stars and company logo