card-5

• Vista previa

  

  Enfoque

  Yared Jacquez Trillo

  Diseñadora UX / UI y desarrolladora frontend con el framework en React JS

  • ElementumUI

  • Chihuahua, México

  • disenadorui@gmail.com

• Código

  import Image from 'next/image';
  
  const Card5 = () => {
    return (
      <div className="bg-background-secondary flex flex-col max-w-sm mx-auto shadow-xl rounded-3xl">
        <div className="relative w-full h-80 rounded-tl-3xl rounded-tr-3xl">
          <Image
            src="https://res.cloudinary.com/jotredev/image/upload/v1697575977/ElementumUI/mujeres/cuchando-musica-sosteniendo-telefono_gjwalk.webp"
            alt="Image"
            fill
            className="object-cover rounded-tl-3xl rounded-tr-3xl"
          />
        </div>
        <div className="bg-background mx-4 rounded-xl flex items-center gap-2 -mt-8 z-10 shadow-xl py-2 px-6">
          <h5 className="text-lg font-semibold">Enfoque</h5>
        </div>
        <div className="px-6 py-4 flex flex-col gap-2">
          <h4 className="text-xl font-semibold">Yared Jacquez Trillo</h4>
          <p className="text-muted-foreground">
            Diseñadora UX / UI y desarrolladora frontend con el framework en React JS
          </p>
          <ul className="mt-4 space-y-3">
            <li className="flex items-center">
              <i className="fi fi-sr-briefcase mr-2"></i>
              <h1 className="px-2 text-muted-foreground">ElementumUI</h1>
            </li>
            <li className="flex items-center">
              <i className="fi fi-sr-marker mr-2"></i>
              <h1 className="px-2 text-muted-foreground">Chihuahua, México</h1>
            </li>
            <li className="flex items-center">
              <i className="fi fi-sr-envelope mr-2"></i>
              <h1 className="px-2 text-muted-foreground">disenadorui@gmail.com</h1>
            </li>
          </ul>
        </div>
      </div>
    );
  };
  
  export default Card5;