Hover Preview Card

const { setCursorChildren, containerRef } = useCustomCursor();
const handleClearCursor = () => {
  setCursorChildren(null);
};

<div onMouseLeave={handleClearCursor} className="relative " ref={containerRef}>
  <CustomCursor />
  <div
    key={client.id}
    className="flex bg-background px-4 py-6  flex-wrap gap-4 items-center justify-between"
    onMouseEnter={() =>
      setCursorChildren(
        <div className="aspect-[12/16] h-48">
          <Image
            alt={client.name}
            src={client.imageUrl}
            width={200}
            height={530}
            className=" size-full"
          />
        </div>,
      )
    }
  >
    <div className="md:flex-1">
      <p className="uppercase text-muted-foreground text-xl">{client.name}</p>
    </div>

    <div className="md:flex-1">
      <p className="text-3xl font-medium">{client.service}</p>
    </div>

    <div className="bg-secondary text-secondary-foreground rounded-full p-4">
      <ArrowUpRightIcon className="size-5" />
    </div>
  </div>
</div>;