export function FileResourceCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md rounded-xl border border-[#1111111A] bg-white p-5 transition-all hover:border-[#111111]/30 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)]">
        <div className="flex items-start gap-4">
          {/* File icon */}
          <div className="relative shrink-0">
            <div className="grid h-14 w-12 place-items-end rounded-md bg-white border border-[#1111111A] overflow-hidden shadow-[inset_0_1px_0_rgba(0,0,0,0.04)]">
              <span
                aria-hidden
                className="absolute top-0 right-0 h-3.5 w-3.5 bg-[#F2F1EC] border-l border-b border-[#1111111A]"
                style={{ clipPath: "polygon(100% 0, 0 0, 100% 100%)" }}
              />
              <div className="w-full bg-[#C0392B] text-white text-center py-0.5 font-mono text-[9px] font-bold tracking-[0.12em]">
                PDF
              </div>
            </div>
          </div>

          <div className="flex-1 min-w-0">
            <h3 className="text-[14px] font-medium tracking-tight truncate">
              brand-guidelines-v4.pdf
            </h3>
            <p className="mt-0.5 text-[12px] text-[#6B6B66] font-mono">
              4.2 MB · 32 pages · edited 2 d ago
            </p>

            {/* Shared with */}
            <div className="mt-3 flex items-center gap-2">
              <div className="flex items-center">
                {["#2A3D2F", "#5E60CE", "#D97706"].map((c, i) => (
                  <span
                    key={i}
                    className="grid h-5 w-5 -ml-1 first:ml-0 place-items-center rounded-full text-white text-[8px] font-mono ring-2 ring-white"
                    style={{ background: c }}
                  >
                    {String.fromCharCode(65 + i)}
                  </span>
                ))}
              </div>
              <span className="text-[11px] text-[#6B6B66]">Shared with 3</span>
              <span aria-hidden className="text-[#6B6B66]">·</span>
              <span className="inline-flex items-center gap-1 text-[11px] text-emerald-700 font-mono">
                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
                synced
              </span>
            </div>
          </div>

          <button
            type="button"
            aria-label="More"
            className="text-[#6B6B66] hover:text-[#111111] opacity-60 group-hover:opacity-100 transition-opacity"
          >
            ⋯
          </button>
        </div>

        {/* Quick actions slide in */}
        <div className="mt-4 grid grid-cols-3 gap-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-20 overflow-hidden transition-all duration-500 ease-out">
          <button
            type="button"
            className="rounded-md border border-[#1111111A] py-1.5 text-[11.5px] hover:bg-[#F7F6F2] transition-colors"
          >
            Preview
          </button>
          <button
            type="button"
            className="rounded-md border border-[#1111111A] py-1.5 text-[11.5px] hover:bg-[#F7F6F2] transition-colors"
          >
            Download
          </button>
          <button
            type="button"
            className="rounded-md bg-[#111111] text-white py-1.5 text-[11.5px] hover:bg-[#1F1F1D] transition-colors"
          >
            Share link
          </button>
        </div>
      </article>
    </div>
  );
}
File Resource Card

brand-guidelines-v4.pdf
