Masonry Wall of Love Testimonial Grid

1'use client';
2
3import React from 'react';
4import { Star, CheckCircle2 } from 'lucide-react';
5
6const STATIC_REVIEWS = [
7  { name: 'Sarah Jenkins', handle: '@sarah_j', role: 'VP of Engineering @ CloudScale', text: 'Aurenza UI has accelerated our product deployment cycles by 4x. The attention to detail and theme parity is unmatched.', rating: 5 },
8  { name: 'David Kim', handle: '@dkim_architect', role: 'Senior Architect @ TechCorp', text: 'Cleanest Tailwind v4 code I have ever copy-pasted. Perfectly responsive out of the box with zero runtime bloat.', rating: 5 },
9  { name: 'Elena Rostova', handle: '@elena_design', role: 'Head of Product @ Nexus AI', text: 'The spatial effects and dark mode implementations look like a million bucks. Highly recommended for production apps.', rating: 5 },
10  { name: 'Marcus Thorne', handle: '@mthorne_x', role: 'Design Lead @ Studio X', text: 'Incredible editorial typography and layout choices. Fits right into our modern enterprise design system seamlessly.', rating: 5 },
11  { name: 'Chloe Bennett', handle: '@chloe_lumin', role: 'Founder @ LuminAI', text: 'The glassmorphic components are stunning. Our conversion rate boosted 35% after adopting Aurenza UI.', rating: 5 },
12  { name: 'Liam Sterling', handle: '@liam_quantum', role: 'Staff Engineer @ Quantum', text: 'Flawless execution of Tailwind CSS. Component code matches exact live preview with zero setup friction.', rating: 5 }
13];
14
15export default function StaticGridTestimonials() {
16  return (
17    <div className="w-full max-w-6xl mx-auto py-8 px-4 select-none">
18      {/* Section Header */}
19      <div className="flex flex-col items-center text-center mb-10">
20        <span className="rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-3.5 py-1 text-[11px] font-bold text-slate-700 dark:text-slate-300 uppercase tracking-widest">
21          WALL OF LOVE
22        </span>
23        <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-slate-100 mt-3 tracking-tight">
24          Read what the community is saying
25        </h2>
26        <p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400 mt-2 max-w-lg font-medium">
27          Join thousands of developers and product teams who ship faster with high-fidelity components.
28        </p>
29      </div>
30
31      {/* Grid */}
32      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
33        {STATIC_REVIEWS.map((item, idx) => (
34          <div
35            key={idx}
36            className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-xl flex flex-col justify-between transition-all hover:border-blue-500/50"
37          >
38            <div>
39              <div className="flex items-center justify-between mb-4">
40                <div className="flex items-center gap-3">
41                  <div className="h-10 w-10 rounded-full bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center font-bold text-white text-sm shadow-md">
42                    {item.name.charAt(0)}
43                  </div>
44                  <div>
45                    <h4 className="text-sm font-extrabold text-slate-900 dark:text-slate-100 flex items-center gap-1">
46                      {item.name}
47                      <CheckCircle2 className="h-3.5 w-3.5 text-blue-500" />
48                    </h4>
49                    <p className="text-xs text-slate-400 font-mono">{item.handle}</p>
50                  </div>
51                </div>
52              </div>
53              <div className="flex items-center gap-0.5 text-amber-400 mb-3">
54                {Array.from({ length: item.rating }).map((_, i) => (
55                  <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
56                ))}
57              </div>
58              <p className="text-xs text-slate-700 dark:text-slate-300 leading-relaxed font-medium">
59                &quot;{item.text}&quot;
60              </p>
61            </div>
62            <div className="mt-5 pt-3 border-t border-slate-100 dark:border-slate-800">
63              <p className="text-[11px] text-slate-500 dark:text-slate-400 font-medium">{item.role}</p>
64            </div>
65          </div>
66        ))}
67      </div>
68    </div>
69  );
70}