Masonry Testimonial Wall

const wall = [
  {
    quote:
      "I have used a lot of these tools and most of them fight you. This one just gets out of the way and lets the team work.",
    name: "Marcus Bell",
    role: "Engineering Manager",
    initials: "MB",
    tint: "from-indigo-500 to-blue-500",
    rating: 5,
  },
  {
    quote: "Clean, fast, and genuinely a pleasure to use every day.",
    name: "Sofia Lindqvist",
    role: "Designer, Everly",
    initials: "SL",
    tint: "from-rose-500 to-pink-500",
    rating: 5,
  },
  {
    quote:
      "We migrated three separate spreadsheets into one workspace over a weekend. Come Monday, nobody asked where anything had gone, which is the highest praise I can offer any migration.",
    name: "Tariq Hassan",
    role: "Head of Ops, Kestrel",
    initials: "TH",
    tint: "from-emerald-500 to-green-500",
    rating: 5,
  },
  {
    quote: "The onboarding checklist alone saved us a week.",
    name: "Grace Okonkwo",
    role: "Programme Lead",
    initials: "GO",
    tint: "from-amber-500 to-orange-500",
    rating: 4,
  },
  {
    quote:
      "Honestly did not expect to feel this strongly about a bit of software, yet here I am recommending it to everyone who will listen.",
    name: "Julian Ross",
    role: "Founder, Palisade",
    initials: "JR",
    tint: "from-violet-500 to-purple-500",
    rating: 5,
  },
  {
    quote: "Rock solid uptime and support that answers like a human.",
    name: "Naomi Chen",
    role: "CTO, Brightfold",
    initials: "NC",
    tint: "from-teal-500 to-cyan-500",
    rating: 5,
  },
];

export default function TestimonialMasonryWall() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-bold tracking-tight text-balance text-zinc-900 sm:text-4xl dark:text-white">
          A wall of happy customers
        </h2>
        <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
          Real words from real teams, in their own varied lengths.
        </p>
      </div>

      <div className="mx-auto mt-12 max-w-6xl gap-6 [column-fill:_balance] sm:columns-2 lg:columns-3">
        {wall.map((item) => (
          <figure
            key={item.name}
            className="mb-6 break-inside-avoid rounded-2xl border border-zinc-200 bg-zinc-50 p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
          >
            <div
              className="flex items-center gap-0.5"
              aria-label={`Rated ${item.rating} out of 5 stars`}
            >
              {[0, 1, 2, 3, 4].map((i) => (
                <svg
                  key={i}
                  viewBox="0 0 24 24"
                  className={
                    i < item.rating
                      ? "h-4 w-4 fill-amber-400"
                      : "h-4 w-4 fill-zinc-300 dark:fill-zinc-700"
                  }
                  aria-hidden="true"
                >
                  <path d="M11.48 3.5a.56.56 0 011.04 0l2.12 5.11a.56.56 0 00.48.35l5.52.44c.5.04.7.66.32.99l-4.2 3.6a.56.56 0 00-.19.56l1.29 5.38a.56.56 0 01-.84.61l-4.73-2.88a.56.56 0 00-.58 0l-4.73 2.88a.56.56 0 01-.84-.61l1.29-5.38a.56.56 0 00-.19-.56l-4.2-3.6a.56.56 0 01.32-.99l5.52-.44a.56.56 0 00.48-.35L11.48 3.5z" />
                </svg>
              ))}
            </div>

            <blockquote className="mt-4 text-pretty text-zinc-700 dark:text-zinc-300">
              {item.quote}
            </blockquote>

            <figcaption className="mt-5 flex items-center gap-3">
              <span
                className={`grid h-9 w-9 shrink-0 place-items-center rounded-full bg-gradient-to-br ${item.tint} text-xs font-semibold text-white`}
                aria-hidden="true"
              >
                {item.initials}
              </span>
              <span className="min-w-0">
                <span className="block truncate text-sm font-semibold text-zinc-900 dark:text-white">
                  {item.name}
                </span>
                <span className="block truncate text-xs text-zinc-500 dark:text-zinc-400">
                  {item.role}
                </span>
              </span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}