export function CommitCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-lg rounded-lg border border-[#1111111A] bg-white p-5 hover:border-[#111111]/30 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-all duration-300">
        <div className="flex items-start gap-3">
          {/* Avatar */}
          <div
            className="h-10 w-10 shrink-0 rounded-full grid place-items-center text-white font-mono text-[12px]"
            style={{ background: "linear-gradient(135deg, #2A3D2F, #5E7F66)" }}
          >
            EM
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex flex-wrap items-baseline gap-x-2">
              <span className="text-[14px] font-medium">elena-marchetti</span>
              <span className="text-[12.5px] text-[#6B6B66]">pushed to</span>
              <span className="inline-flex items-center gap-1 rounded-md bg-[#F2F1EC] border border-[#1111111A] px-1.5 py-0.5 text-[11px] font-mono">
                <span className="text-[#6B6B66]">⎇</span> feat/auth-flow
              </span>
            </div>
            <p className="mt-2 text-[14px] leading-snug">
              <span className="font-medium">Fix:</span> handle expired magic-link tokens in callback route
            </p>
            <p className="mt-1 text-[12.5px] text-[#6B6B66] truncate">
              The PKCE exchange now falls back to <code className="font-mono">verifyOtp</code> with token_hash for older email templates.
            </p>

            <div className="mt-3 flex items-center gap-3 text-[11.5px] text-[#6B6B66] font-mono">
              <span>3 min ago</span>
              <span aria-hidden>·</span>
              <span className="text-emerald-700">+42</span>
              <span className="text-rose-700">−17</span>
              <span aria-hidden>·</span>
              <a
                href="#"
                className="text-[#111111] hover:underline underline-offset-2 decoration-[#111111]/30 inline-flex items-center gap-1"
              >
                <span className="opacity-60">#</span>
                <span className="tracking-tight">d8f49b5</span>
                <span className="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
              </a>
            </div>
          </div>

          <div className="ml-auto flex flex-col items-end gap-1.5">
            <span className="inline-flex items-center gap-1.5 text-[11px] font-mono text-emerald-700">
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
              CI passed
            </span>
            <span className="text-[10.5px] text-[#6B6B66] font-mono">3/3 checks</span>
          </div>
        </div>
      </article>
    </div>
  );
}
Git Commit Card
