export function ProductEcommerceCard() {
  return (
    <div className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group relative w-full max-w-xs bg-white rounded-xl border border-[#1111111A] overflow-hidden shadow-[0_1px_0_rgba(17,17,17,0.04)] hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.25)] transition-all duration-500">
        {/* Image */}
        <div className="relative aspect-[5/6] overflow-hidden bg-gradient-to-br from-[#E9EFE7] via-[#F2F1EC] to-[#E2E6DC]">
          <div
            className="absolute inset-0 transition-transform duration-700 ease-out group-hover:scale-110"
            style={{
              backgroundImage:
                "radial-gradient(circle at 50% 55%, rgba(42,61,47,0.25), transparent 60%), radial-gradient(circle at 30% 30%, rgba(192,57,43,0.18), transparent 50%)",
            }}
            aria-hidden
          />
          {/* fake product */}
          <div className="absolute inset-0 grid place-items-center transition-transform duration-700 ease-out group-hover:scale-110">
            <div className="h-32 w-24 rounded-md bg-[#2A3D2F] shadow-[0_30px_60px_-20px_rgba(0,0,0,0.4)]" />
          </div>
          <span className="absolute top-3 left-3 inline-flex items-center gap-1.5 rounded-full bg-white/90 backdrop-blur px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.18em]">
            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
            In stock
          </span>
          <button
            type="button"
            aria-label="Save"
            className="absolute top-3 right-3 grid h-8 w-8 place-items-center rounded-full bg-white/90 backdrop-blur text-[14px] transition-colors hover:bg-white"
          >
            ♡
          </button>

          {/* Slide-in add to cart */}
          <div className="absolute inset-x-3 bottom-3 translate-y-[120%] opacity-0 transition-all duration-500 ease-out group-hover:translate-y-0 group-hover:opacity-100">
            <button
              type="button"
              className="w-full rounded-full bg-[#111111] text-white py-2.5 text-[12.5px] font-medium hover:bg-[#1F1F1D]"
            >
              Add to cart — $48
            </button>
          </div>
        </div>

        {/* Body */}
        <div className="p-4">
          <p className="font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66]">
            Stoneware · matte
          </p>
          <h3 className="mt-1 text-[15px] font-medium tracking-tight">
            Yumi Carafe — 1.1L
          </h3>
          <div className="mt-2 flex items-baseline justify-between">
            <div className="flex items-baseline gap-2">
              <span className="text-[15px] font-medium">$48</span>
              <span className="text-[12px] text-[#6B6B66] line-through">$64</span>
            </div>
            <div className="flex items-center gap-1 text-[11px] text-[#6B6B66]">
              <span className="text-amber-500">★</span> 4.9 · 312
            </div>
          </div>
        </div>
      </article>
    </div>
  );
}
Product / E-commerce Card

Yumi Carafe — 1.1L
