export function BlogPostCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md cursor-pointer">
        {/* Image */}
        <div className="relative aspect-[3/2] w-full overflow-hidden rounded-lg bg-[#1A1A18]">
          <div
            className="absolute inset-0 transition-transform duration-[900ms] ease-out group-hover:scale-110"
            style={{
              background:
                "linear-gradient(120deg, #2A3D2F 0%, #5E7F66 40%, #D9C8A3 100%)",
            }}
            aria-hidden
          />
          <div
            className="absolute inset-0 mix-blend-overlay opacity-50"
            style={{
              backgroundImage:
                "radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px)",
              backgroundSize: "8px 8px",
            }}
            aria-hidden
          />
          {/* tag */}
          <span className="absolute top-3 left-3 inline-flex items-center gap-1.5 rounded-full bg-[#FAFAF8] text-[#111111] px-2.5 py-1 text-[10.5px] font-mono uppercase tracking-[0.18em]">
            <span className="h-1.5 w-1.5 rounded-full bg-[#C0392B]" />
            Engineering
          </span>
          {/* read time */}
          <span className="absolute bottom-3 right-3 inline-flex rounded-full bg-black/40 text-white backdrop-blur px-2 py-1 text-[10px] font-mono uppercase tracking-[0.14em]">
            ◷ 7 min read
          </span>
        </div>

        {/* Body */}
        <div className="mt-5">
          <div className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.18em] text-[#6B6B66]">
            <span>May 28, 2025</span>
            <span aria-hidden>·</span>
            <span>Issue 04</span>
          </div>
          <h3
            className="mt-2 text-[24px] leading-[1.1] tracking-tight transition-colors group-hover:text-[#2A3D2F]"
            style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
          >
            We rewrote our component library — and made it{" "}
            <em className="text-[#6B6B66] group-hover:text-[#2A3D2F]/70 transition-colors">
              quieter.
            </em>
          </h3>
          <p className="mt-3 text-[13.5px] text-[#3B3B36] leading-relaxed line-clamp-2">
            A year of shipping interfaces taught us that AI-looking gradients
            and 18 shades of purple aren’t the same as taste.
          </p>

          <div className="mt-4 flex items-center gap-3">
            <div
              className="h-7 w-7 rounded-full ring-2 ring-white grid place-items-center text-white text-[10px] font-mono"
              style={{ background: "linear-gradient(135deg, #1A1A18, #6B6B66)" }}
              aria-hidden
            >
              SR
            </div>
            <div className="text-[12.5px]">
              <span className="font-medium">Sasha Romero</span>
              <span className="text-[#6B6B66]"> · Founder</span>
            </div>
            <span
              className="ml-auto text-[13px] transition-transform group-hover:translate-x-1"
              aria-hidden
            >
              →
            </span>
          </div>
        </div>
      </article>
    </div>
  );
}
Blog Post Card

We rewrote our component library — and made it quieter.
