export function TestimonialPortraitCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group relative w-full max-w-md rounded-2xl border border-[#1111111A] bg-white overflow-hidden transition-all duration-500 hover:-translate-y-1 hover:shadow-[0_30px_60px_-30px_rgba(17,17,17,0.25)]">
        {/* Photo / gradient */}
        <div className="relative aspect-[4/3] overflow-hidden">
          <div
            className="absolute inset-0 transition-transform duration-700 ease-out group-hover:scale-105"
            style={{
              background:
                "linear-gradient(120deg, #1A1A18 0%, #5E7F66 40%, #D9C8A3 100%)",
            }}
            aria-hidden
          />
          {/* faux portrait silhouette */}
          <div
            aria-hidden
            className="absolute inset-x-0 bottom-0 grid place-items-end pb-6"
          >
            <div className="h-32 w-32 rounded-full bg-[#1A1A18]/40" />
          </div>
          {/* big quote glyph */}
          <span
            aria-hidden
            className="absolute top-4 left-5 text-white/85 leading-none"
            style={{
              fontFamily: "var(--font-instrument-serif), Georgia, serif",
              fontSize: 110,
              letterSpacing: "-0.05em",
            }}
          >
            ”
          </span>
        </div>

        {/* Quote */}
        <div className="p-6">
          <p
            className="text-[18px] leading-[1.35]"
            style={{
              fontFamily: "var(--font-instrument-serif), Georgia, serif",
              letterSpacing: "-0.01em",
            }}
          >
            Velynkit gave us back the time we used to waste arguing about
            shadows.
            <em className="text-[#6B6B66]"> It just looks right.</em>
          </p>

          <div className="mt-5 flex items-center justify-between border-t border-[#1111111A] pt-4">
            <div>
              <div className="text-[13px] font-medium">Maya Kovač</div>
              <div className="font-mono text-[10.5px] uppercase tracking-[0.16em] text-[#6B6B66]">
                Design Eng. · Sundial Labs
              </div>
            </div>
            <div className="flex items-center gap-0.5 text-amber-500 text-[12px]">
              ★★★★★
            </div>
          </div>
        </div>

        {/* Bottom accent rule */}
        <span
          aria-hidden
          className="absolute bottom-0 left-0 h-0.5 w-0 bg-[#2A3D2F] transition-all duration-700 group-hover:w-full"
        />
      </article>
    </div>
  );
}
Testimonial Portrait Card
