Testimonial — one big quote

const testimonial = {
  quote: "We stopped chasing invoices the week we switched.",
  highlight: "Clients pay from the reminder email now",
  rest: ", and month-end takes an hour instead of two days.",
  name: "Elena Hart",
  role: "Director, Hart & Mason Interiors",
  company: "hart&mason",
};

export function TestimonialBigQuote() {
  return (
    <section aria-label="Customer story" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-24">
      <figure className="mx-auto grid max-w-4xl justify-items-center gap-7 text-center">
        <svg viewBox="0 0 40 40" className="size-11 text-primary" fill="currentColor" aria-hidden>
          <path d="M6 30V20.5C6 13.6 9.6 9.4 16.4 8l1.2 3.4c-3.6 1.1-5.4 3.4-5.6 6.6H17V30H6Zm17 0V20.5c0-6.9 3.6-11.1 10.4-12.5l1.2 3.4c-3.6 1.1-5.4 3.4-5.6 6.6H34V30H23Z" />
        </svg>
        <blockquote className="text-balance text-2xl font-medium leading-snug tracking-tight text-fg sm:text-3xl lg:text-[34px]">
          <p>
            “{testimonial.quote}{" "}
            <mark className="bg-gradient-to-b from-transparent from-60% to-primary/20 to-60% text-inherit">{testimonial.highlight}</mark>
            {testimonial.rest}”
          </p>
        </blockquote>
        <figcaption className="flex flex-wrap items-center justify-center gap-x-5 gap-y-3">
          <div className="flex items-center gap-3 text-left">
            <span className="grid size-12 place-items-center rounded-full bg-primary-soft text-base font-medium text-primary-soft-fg" aria-hidden>EH</span>
            <div>
              <p className="text-sm font-semibold text-fg">{testimonial.name}</p>
              <p className="text-[13px] text-fg-muted">{testimonial.role}</p>
            </div>
          </div>
          <span className="h-7 w-px bg-border-strong" aria-hidden />
          <span className="text-lg font-bold tracking-tighter text-fg">{testimonial.company}</span>
        </figcaption>
      </figure>
    </section>
  );
}