Single Featured Quote

export default function TestimonialFeaturedQuote() {
  return (
    <section className="relative overflow-hidden bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 mx-auto h-64 max-w-3xl bg-gradient-to-b from-indigo-500/15 to-transparent blur-3xl dark:from-indigo-500/20"
        aria-hidden="true"
      />

      <figure className="mx-auto max-w-3xl text-center">
        <svg
          viewBox="0 0 24 24"
          className="mx-auto h-14 w-14 fill-indigo-200 dark:fill-indigo-500/30"
          aria-hidden="true"
        >
          <path d="M9.5 5C6.46 5 4 7.46 4 10.5V19h8v-8H7.5c0-1.66 0.9-3 2-3V5zm10 0C16.46 5 14 7.46 14 10.5V19h8v-8h-4.5c0-1.66 0.9-3 2-3V5z" />
        </svg>

        <div
          className="mt-6 flex items-center justify-center gap-1"
          aria-label="Rated 5 out of 5 stars"
        >
          {[0, 1, 2, 3, 4].map((i) => (
            <svg
              key={i}
              viewBox="0 0 24 24"
              className="h-6 w-6 fill-amber-400"
              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-8 text-balance text-2xl font-medium leading-relaxed text-zinc-900 sm:text-3xl sm:leading-relaxed dark:text-white">
          "Switching over was the least dramatic decision we made all year, and
          somehow the most valuable. Our reporting that used to take three days
          now takes twenty minutes, and the whole team trusts the numbers."
        </blockquote>

        <figcaption className="mt-10 flex flex-col items-center gap-3">
          <span
            className="grid h-16 w-16 place-items-center rounded-full bg-gradient-to-br from-indigo-500 to-fuchsia-500 text-lg font-semibold text-white shadow-md"
            aria-hidden="true"
          >
            EV
          </span>
          <span>
            <span className="block text-base font-semibold text-zinc-900 dark:text-white">
              Elena Vasquez
            </span>
            <span className="block text-sm text-zinc-500 dark:text-zinc-400">
              VP of Finance, Meridian Group
            </span>
          </span>
        </figcaption>
      </figure>
    </section>
  );
}