Componente de Card para Categorías de Meeti

CategoryCard.tsx

export default function CategoryCard() {
  return (
    <li>
      <a
        className="block relative w-full size-70 overflow-hidden group cursor-pointer"
      >
        <img
          className="object-cover transition-transform duration-300 ease-in-out group-hover:scale-120"
        />
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/70 transition-all duration-200 ease-in-out">
          <div className="flex items-center justify-center h-full gap-6 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <Heading level={2} className="text-center text-white"></Heading>
          </div>
        </div>
        <span className="sr-only"></span>
      </a>
    </li>
  )
}