card-1

• Vista previa

  Research & planning in UX

  The principals of UX design

  

  Jorge Trejo

  10 courses

  4.5 stars

  $29.99

  Check out

• Código

  import Image from 'next/image';
  
  const Card1 = () => {
    return (
      <div className="bg-background-secondary rounded-3xl p-2 shadow-xl">
        <div className="flex flex-row items-center gap-4 mb-6 p-4">
          <div className="bg-amber-500/10 flex items-center justify-center rounded-full w-12 h-12">
            <i className="fi fi-rr-customize-edit text-xl text-amber-500"></i>
          </div>
          <div>
            <h3 className="font-medium">Research & planning in UX</h3>
            <p className="text-sm text-muted-foreground">The principals of UX design</p>
          </div>
        </div>
        <div className="flex flex-row items-center justify-between gap-8 mb-2 px-4">
          <div className="flex flex-col md:flex-row items-center gap-2">
            <div className="w-6 h-6 relative">
              <Image
                src="https://res.cloudinary.com/jotredev/image/upload/v1697568346/ElementumUI/hombres/onrie-ampliamente-esperando-sorpresa_rcgn7i.webp"
                alt="Hombre"
                fill
                loading="lazy"
                blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697568346/ElementumUI/hombres/onrie-ampliamente-esperando-sorpresa_rcgn7i.webp"
                className="rounded-full object-cover"
              />
            </div>
            <h5>Jorge Trejo</h5>
          </div>
          <div className="flex flex-col md:flex-row items-center gap-2">
            <i className="fi fi-rr-bookmark"></i>
            <h5>10 courses</h5>
          </div>
          <div className="flex flex-col md:flex-row items-center gap-2">
            <i className="fi fi-rr-star"></i>
            <h5>4.5 stars</h5>
          </div>
        </div>
        <div className="flex items-center justify-between bg-background p-4 rounded-2xl">
          <h2 className="text-xl font-bold">$29.99</h2>
          <button
            type="button"
            className="flex items-center gap-2 p-2 rounded-lg hover:bg-background-secondary transition-colors"
          >
            Check out <i className="fi fi-rr-angle-small-right"></i>
          </button>
        </div>
      </div>
    );
  };
  
  export default Card1;