Testimonial Wall

1export default function TestimonialWall() {
2  const testimonials = [
3    { name: "Sarah Chen", role: "Frontend Lead, Vercel", initials: "SC", color: "bg-orange-500", quote: "forged.wtf completely changed how I prototype. Instead of building components from scratch, I find a solid AI-generated base and customize from there. Saves hours every sprint." },
4    { name: "Marcus Rodriguez", role: "Design Engineer, Linear", initials: "MR", color: "bg-violet-500", quote: "The prompt transparency is what sets this apart. I can see exactly how a component was generated and iterate on the prompt myself." },
5    { name: "Aisha Patel", role: "Solo Founder", initials: "AP", color: "bg-sky-500", quote: "As a solo dev, this is my secret weapon. I shipped my entire landing page using components from forged.wtf. The quality is genuinely production-ready." },
6    { name: "James Kim", role: "Senior Dev, Stripe", initials: "JK", color: "bg-emerald-500", quote: "I use it to compare outputs across different AI models. Really interesting to see how Claude vs GPT-4 approaches the same UI challenge." },
7    { name: "Elena Vasquez", role: "UI Designer", initials: "EV", color: "bg-rose-500", quote: "Finally, an AI component gallery that doesn't look like it was designed by AI. The site itself is beautifully crafted. I keep coming back for inspiration." },
8    { name: "Tom Nakamura", role: "CTO, Startup", initials: "TN", color: "bg-amber-500", quote: "The Pro plan pays for itself. Full prompt access plus unlimited submissions — my team uses it as our component ideation tool." },
9  ];
10 
11  return (
12    <section className="flex min-h-screen items-center justify-center bg-[#09090b] px-6 py-20">
13      <div className="mx-auto max-w-5xl">
14        <div className="mb-12 text-center">
15          <h2 className="text-3xl font-bold tracking-tight text-white">Loved by developers</h2>
16          <p className="mt-3 text-zinc-400">See what the community is saying</p>
17        </div>
18        <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
19          {testimonials.map((t) => (
20            <div
21              key={t.name}
22              className="mb-4 break-inside-avoid rounded-xl border border-zinc-800 bg-[#111113] p-5 transition hover:border-zinc-700"
23            >
24              <div className="mb-3 flex items-center gap-3">
25                <div className={`flex h-9 w-9 items-center justify-center rounded-full ${t.color} text-xs font-bold text-white`}>
26                  {t.initials}
27                </div>
28                <div>
29                  <p className="text-sm font-medium text-white">{t.name}</p>
30                  <p className="text-xs text-zinc-500">{t.role}</p>
31                </div>
32              </div>
33              <p className="text-sm leading-relaxed text-zinc-400">&ldquo;{t.quote}&rdquo;</p>
34            </div>
35          ))}
36        </div>
37      </div>
38    </section>
39  );
40}