card-4

• Vista previa

  Adidas

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac aliquam ligula.

  

  $1,500.00Agregar al carrito

• Componente

  import Image from 'next/image';
  import Link from 'next/link';
  
  const Card4 = () => {
    return (
      <div className="bg-background-secondary max-w-sm mx-auto rounded-lg shadow-xl">
        <div className="py-4 px-6 flex flex-col gap-2">
          <Link href="/" className="text-2xl font-bold">
            Adidas
          </Link>
          <p className="text-muted-foreground">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac aliquam ligula.
          </p>
        </div>
        <div className="relative w-full h-72">
          <Image
            src="https://res.cloudinary.com/jotredev/image/upload/v1697570946/ElementumUI/products/to-negras-moderno-fondo-grunge-negro_nzdtea.webp"
            alt="Image"
            fill
            loading="lazy"
            blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697570946/ElementumUI/products/to-negras-moderno-fondo-grunge-negro_nzdtea.webp"
            className="object-cover"
          />
        </div>
        <div className="py-4 px-6 flex items-center justify-between rounded-bl-lg rounded-br-lg">
          <span className="font-bold text-lg">$1,500.00</span>
          <button type="button" className="hover:underline transition-colors font-semibold outline-none">
            Agregar al carrito
          </button>
        </div>
      </div>
    );
  };
  
  export default Card4;