Follow this link and download the required files. - https://github.com/railav61/data/tree/main/forkui-data/mask-card-data

"use client";
import { cn } from "@/lib/utils";
import { motion } from "framer-motion";
type cardProps = {
  backTitle?: string;
  backdesc?: string;
  backBg?: string;
  overlayBg?: string;
  overlayTitle?: string;
  overlaydesc?: string;
  className?: string;
  rotate?: boolean;
};

export default function MaskCard({
  backBg,
  backdesc,
  backTitle,
  overlayBg,
  overlayTitle,
  overlaydesc,
  className,
  rotate = false,
}: cardProps) {
  return (
    <motion.div
      className={cn(
        `mask-card h-72 w-72 mt-1 ${rotate ? "rotate-180" : ""}`,
        className,
      )}
      style={{
        position: "relative",

        maskImage: 'url("/folder-svg.svg")',
        maskRepeat: "no-repeat",
        maskPosition: "center",
        maskSize: "contain",

        WebkitMaskImage: 'url("/folder-svg.svg")',
        WebkitMaskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        WebkitMaskSize: "contain",
      }}
    >
      <motion.div
        className={`relative ${rotate ? "rotate-180" : ""} w-full h-full overflow-hidden`}
        whileHover="hover"
        initial="rest"
      >
        {/* Inner Content */}
        <div
          className="absolute inset-0 bg-[#f5f5f5] p-[20px] z-[1] text-white "
          style={{
            backgroundImage: `url(${backBg ? backBg : "/boys-2.jpg"})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        >
          <h2 className="text-right font-extrabold text-2xl z-10">
            {backTitle || "No mercy."}
          </h2>
          <p className="w-full font-bold text-xl">
            {backdesc ||
              "I’m not here to be liked. I’m here to get it done. - Butcher"}
          </p>
        </div>

        <motion.div
          className="absolute inset-0 z-[2] bg-transparent bg-no-repeat"
          variants={{
            rest: { y: 0 },
            hover: { y: "100%" },
          }}
          transition={{
            duration: 0.6,
            ease: [0.4, 0, 0.2, 1],
          }}
          style={{
            backgroundImage: `url(${overlayBg ? overlayBg : "/bg-ad.svg"})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        >
          <h2 className="absolute bottom-20 font-extrabold left-2 text-5xl text-white">
            {overlayTitle || "The Boys"}
          </h2>
          <p className="absolute text-white font-bold text-2xl bottom-5 left-2">
            {overlaydesc || "Oi, Some words by Billy Butcher"}
          </p>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}