componentes
/
cards
/
card-8
card-8

Vista previa
Derrick Pare
Código

import Image from 'next/image';
import Link from 'next/link';

const Card8 = () => {
  return (
    <div>
      <div className="relative w-64 h-72 rounded-3xl">
        <Image
          src="https://res.cloudinary.com/jotredev/image/upload/v1702015892/ElementumUI/chefs/retrato-hombre-sonriendo-cocina_bujjqm.webp"
          alt="Image"
          fill
          className="object-cover rounded-3xl z-10 border-4 border-border"
        />
      </div>
      <div className="border-l-2 border-r-2 border-b-2 border-border px-4 pt-12 pb-6 rounded-bl-3xl rounded-br-3xl -translate-y-8">
        <h5 className="text-center mb-4">Derrick Pare</h5>
        <ul className="flex justify-center gap-x-6">
          <li>
            <Link
              href="https://instagram.com/jotredev"
              target="_blank"
              className="text-muted-foreground transition-colors hover:text-foreground"
            >
              <i className="fi fi-brands-instagram"></i>
            </Link>
          </li>
          <li>
            <Link
              href="https://twitter.com/jotredev"
              target="_blank"
              className="text-muted-foreground transition-colors hover:text-foreground"
            >
              <i className="fi fi-brands-twitter-alt"></i>
            </Link>
          </li>
          <li>
            <Link
              href="https://twitch.tv/jotredev"
              target="_blank"
              className="text-muted-foreground transition-colors hover:text-foreground"
            >
              <i className="fi fi-brands-twitch"></i>
            </Link>
          </li>
          <li>
            <Link
              href="https://jotre.dev"
              target="_blank"
              className="text-muted-foreground transition-colors hover:text-foreground"
            >
              <i className="fi fi-rr-globe"></i>
            </Link>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Card8;
card-8

Vista previa

Derrick Pare

Código
