header-4

• Vista previa

  LOGO

• Código

  import Link from 'next/link';
  
  const Header4 = () => {
    return (
      <div className="w-full bg-background-secondary rounded-lg p-4 grid md:grid-cols-12 gap-4 items-center justify-center">
        <h1 className="md:col-span-2 flex justify-center md:justify-start font-bold cursor-pointer text-3xl">LOGO</h1>
        <nav className="md:col-span-8 flex items-center gap-1 justify-center">
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors duration-300">
            Inicio
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors duration-300">
            Nostros
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors duration-300">
            Servicios
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors duration-300">
            Blog
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors duration-300">
            Contacto
          </Link>
        </nav>
        <div className="md:col-span-2 flex items-center justify-center md:justify-end gap-4">
          <Link href="https://instagram.com/jotredev" target="_blank">
            <i className="fi fi-brands-instagram"></i>
          </Link>
          <Link href="https://github.com/jotredev" target="_blank">
            <i className="fi fi-brands-github"></i>
          </Link>
          <Link href="https://www.linkedin.com/in/jorge-luis-trejo-payan-3464b6214/" target="_blank">
            <i className="fi fi-brands-linkedin"></i>
          </Link>
        </div>
      </div>
    );
  };
  
  export default Header4;