Testimonial 2

"use client";

import * as React from "react";

type Quote = {
  body: string;
  initials: string;
  name: string;
  role: string;
};

const QUOTES: readonly Quote[] = [
  {
    body: "The compound APIs are identical to shadcn, so onboarding was zero. We composed a whole settings page out of these in an afternoon.",
    initials: "MR",
    name: "Maya Renner",
    role: "Staff engineer · Plinth Labs",
  },
  {
    body: "Light and dark are true inverses, which almost no kit gets right. I stopped patching contrast bugs.",
    initials: "JT",
    name: "Jules Tanaka",
    role: "Design systems · Hexpoint",
  },
  {
    body: "RTL just worked. We flipped the locale and didn't have to touch a single component.",
    initials: "AO",
    name: "Adaeze Okafor",
    role: "Founding engineer · Brella",
  },
  {
    body: "It's source in our repo, not another dependency to keep up with. That's what sold the team.",
    initials: "SK",
    name: "Soren Kim",
    role: "Frontend lead · Verbit",
  },
  {
    body: "We replaced three half-finished internal components in a morning and deleted a lot of code.",
    initials: "RP",
    name: "Reema Patel",
    role: "CTO · Lattice & Co.",
  },
  {
    body: "The blocks gave us a real landing page on day one. We swapped the copy and colors and shipped.",
    initials: "DL",
    name: "Diego Larrea",
    role: "Engineer · Mercado",
  },
];

export default function Testimonial02() {
  return (
    <section className="bg-background py-20 sm:py-28">
      <div className="container w-full">
        <div className="flex max-w-2xl flex-col gap-5">
          <span className="inline-flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em] text-foreground">
            <span className="size-1 rounded-full bg-foreground" />
            What teams say
          </span>
          <h2 className="font-serif text-4xl font-medium leading-[1.04] tracking-tight sm:text-5xl">
            What people are{" "}
            <span className="italic text-foreground">actually</span> saying.
          </h2>
          <p className="text-base text-muted-foreground sm:text-lg">
            Notes from engineers and designers building with the catalog in
            production.
          </p>
        </div>

        <div className="mt-12 columns-1 gap-4 sm:columns-2 lg:columns-3 [&>*]:mb-4">
          {QUOTES.map((q) => (
            <figure
              key={q.name}
              className="break-inside-avoid rounded-md border border-border bg-card p-5"
            >
              <blockquote>
                <p className="text-sm leading-relaxed text-foreground">
                  {q.body}
                </p>
              </blockquote>
              <figcaption className="mt-5 flex items-center gap-3">
                <div className="inline-flex size-9 items-center justify-center rounded-full border border-border bg-muted font-mono text-xs font-medium text-foreground">
                  {q.initials}
                </div>
                <div className="flex flex-col">
                  <span className="text-sm font-semibold tracking-[-0.01em]">
                    {q.name}
                  </span>
                  <span className="font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground">
                    {q.role}
                  </span>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}