TestimonialsGrid

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

export default function TestimonialsGrid() {
  const testimonials = [
    { name: 'Sarah Chen', role: 'CTO, Veritas AI', text: 'Transformed our deployment pipeline. We cut release time from 3 days to 45 minutes.', rating: 5, avatar: 'SC' },
    { name: 'Marcus Roy', role: 'Founder, Novade', text: 'The component library alone saved us 6 weeks of development time. Absolutely worth it.', rating: 5, avatar: 'MR' },
    { name: 'Aisha Patel', role: 'Lead Dev, Skyhook', text: 'Best DX I have experienced in 10 years. The API is intuitive and the docs are excellent.', rating: 5, avatar: 'AP' },
    { name: 'James Wu', role: 'VP Engineering', text: 'Performance gains were immediate. Our core web vitals improved across the board.', rating: 4, avatar: 'JW' },
    { name: 'Elena Torres', role: 'Product Manager', text: 'Finally a tool that bridges the gap between design and engineering teams seamlessly.', rating: 5, avatar: 'ET' },
    { name: 'Dev Kapoor', role: 'Staff Engineer', text: 'The TypeScript support is phenomenal. Zero runtime errors since we switched.', rating: 5, avatar: 'DK' },
  ];

  const colors = ['#C9A84C', '#6366f1', '#4ade80', '#f472b6', '#22d3ee', '#fb923c'];
  const [hovered, setHovered] = useState(null);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '640px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px' }}>
        {testimonials.map((t, i) => (
          <div key={i}
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
            style={{
              background: hovered === i ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.03)',
              border: `1px solid ${hovered === i ? colors[i] + '40' : 'rgba(255,255,255,0.07)'}`,
              borderRadius: '16px', padding: '18px',
              transition: 'all 0.2s ease',
              transform: hovered === i ? 'translateY(-2px)' : 'translateY(0)',
            }}
          >
            <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
              {Array.from({ length: 5 }, (_, j) => (
                <span key={j} style={{ color: j < t.rating ? '#C9A84C' : 'rgba(255,255,255,0.15)', fontSize: '12px' }}>★</span>
              ))}
            </div>
            <p style={{ color: 'rgba(245,245,240,0.75)', fontSize: '13px', lineHeight: 1.6, margin: '0 0 14px 0' }}>"{t.text}"</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <div style={{ width: '30px', height: '30px', borderRadius: '50%', background: colors[i], display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', fontWeight: 700, color: '#0A0A0A', flexShrink: 0 }}>{t.avatar}</div>
              <div>
                <p style={{ margin: 0, color: '#F5F5F0', fontSize: '12px', fontWeight: 700 }}>{t.name}</p>
                <p style={{ margin: 0, color: 'rgba(245,245,240,0.4)', fontSize: '10px' }}>{t.role}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Component info

About

Masonry-style testimonial cards grid