Single Quote Testimonial

// One large testimonial: round portrait, name and role on the left, a big
// quote with an orange quote mark on the right.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  quote?: string;
  name?: string;
  role?: string;
  photo?: string;
};

export default function SingleQuoteTestimonial({
  quote = "We replaced four separate tools in a week. Onboarding is faster, payroll runs itself and our managers finally have one place to look.",
  name = "Claire Rebaud",
  role = "COO, Northwind (Series C)",
  photo = "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=300&h=300&q=80&auto=format&fit=crop&crop=faces",
}: Props) {
  return (
    <section className="bg-white px-5 py-24 font-['Inter',ui-sans-serif,system-ui,sans-serif] text-black antialiased md:px-10 md:py-36">
      <figure className="mx-auto grid max-w-7xl items-center gap-8 lg:grid-cols-12">
        <figcaption className="flex flex-col items-center gap-1 lg:col-span-4 lg:items-start lg:pl-16 xl:pl-32">
          <div className="h-24 w-24 shrink-0 rounded-full bg-[#DF8600] xl:h-36 xl:w-36">
            <img src={photo} alt={name} className="h-full w-full rounded-full object-cover" />
          </div>
          <p className="mt-4 text-3xl">{name}</p>
          <p className="text-neutral-500">{role}</p>
        </figcaption>
        <blockquote className="flex flex-col gap-5 lg:col-span-7">
          <svg viewBox="0 0 48 36" aria-hidden className="h-9 w-12 fill-[#DF8600]">
            <path d="M0 36V22C0 9 7 1 19 0l2 5c-7 2-10 7-10 12h9v19zm27 0V22C27 9 34 1 46 0l2 5c-7 2-10 7-10 12h9v19z" />
          </svg>
          <p className="text-[clamp(1.5rem,2.6vw,2.25rem)] leading-snug">{quote}</p>
        </blockquote>
      </figure>
    </section>
  );
}