header-1

• Vista previa

  LOGO

• Código

  import Link from 'next/link';
  
  const Header1 = () => {
    return (
      <div className="w-full bg-background-secondary rounded-lg p-4 flex flex-col xl:flex-row gap-4 items-center justify-center md:justify-between">
        <h1 className="uppercase font-semibold cursor-pointer text-xl">LOGO</h1>
        <nav className="flex items-center">
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Inicio
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Nostros
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Servicios
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Blog
          </Link>
          <Link href="#" className="xl:py-1 px-2 md:px-4 rounded-lg hover:bg-background transition-colors">
            Contacto
          </Link>
        </nav>
      </div>
    );
  };
  
  export default Header1;