export function FeatureFlipCard() {
  return (
    <div
      className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]"
      style={{ perspective: 1200 }}
    >
      <div className="group relative w-full max-w-sm" style={{ height: 280 }}>
        <div
          className="absolute inset-0 transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]"
        >
          {/* Front */}
          <article
            className="absolute inset-0 rounded-2xl border border-[#1111111A] bg-white p-7 [backface-visibility:hidden]"
          >
            <span
              className="grid h-10 w-10 place-items-center rounded-lg bg-[#2A3D2F]/10 text-[#2A3D2F] text-[18px]"
              aria-hidden
            >
              ✦
            </span>
            <h3
              className="mt-4 text-[24px] leading-[1.1]"
              style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
            >
              Server Actions, <em className="text-[#6B6B66]">simplified.</em>
            </h3>
            <p className="mt-3 text-[13.5px] text-[#3B3B36] leading-relaxed">
              Drop-in typed actions with built-in validation, caching, and
              optimistic UI — no boilerplate.
            </p>
            <div className="absolute bottom-5 left-7 right-7 flex items-center justify-between text-[11.5px] font-mono text-[#6B6B66]">
              <span>◆ Hover to learn more</span>
              <span aria-hidden>↺</span>
            </div>
          </article>

          {/* Back */}
          <article
            className="absolute inset-0 rounded-2xl bg-[#111111] text-white p-7 [backface-visibility:hidden] [transform:rotateY(180deg)]"
          >
            <p className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-white/50">
              ◆ Under the hood
            </p>
            <ul className="mt-3 space-y-2 text-[13px] text-white/85">
              <li className="flex items-start gap-2">
                <span className="text-emerald-300 mt-0.5">✓</span>
                Zod-validated payloads, typed end-to-end
              </li>
              <li className="flex items-start gap-2">
                <span className="text-emerald-300 mt-0.5">✓</span>
                Built-in revalidation + cache tags
              </li>
              <li className="flex items-start gap-2">
                <span className="text-emerald-300 mt-0.5">✓</span>
                Optimistic UI hooks for the client
              </li>
            </ul>
            <a
              href="#"
              className="absolute bottom-5 left-7 right-7 inline-flex items-center justify-between text-[12px] font-medium border-t border-white/15 pt-3"
            >
              Read the docs
              <span aria-hidden className="transition-transform group-hover:translate-x-1">→</span>
            </a>
          </article>
        </div>
      </div>
    </div>
  );
}
Feature Flip Card

Server Actions, simplified.
