const Card = ({ img }: any) => {
  return (
    <div className="relative w-full h-full cursor-pointer overflow-hidden group">
      <img src={img.src} alt="car" className="w-full h-full object-fill z-0" />

      <div
        className={`
          absolute bottom-0 left-0 w-full
          h-0 group-hover:h-full 
          z-10 transition-all duration-500 ease-in-out
          hover-gradient
        `}
      >
        <div
          className={`
            p-4 text-white opacity-0 
            group-hover:opacity-100 
            transition-opacity duration-300 
          `}
        >
          <h3 className="text-lg font-semibold">Car Title</h3>
          <p className="text-sm">Some description about the car.</p>
        </div>
      </div>
    </div>
  );
};

export default Card;
