Responsive Header with Logo, Nav Links & CTA

<header
  class="relative z-10 sm:px-6 md:px-10 animate-slideDown bg-zinc-950 w-full max-w-7xl border-zinc-50/10 border rounded-3xl mt-6 mr-auto ml-auto pt-4 pr-4 pb-4 pl-4">
  <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
    <div class="flex items-center gap-3">
      <a href="#"
        class="inline-flex items-center justify-center bg-center mix-blend-screen w-[150px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1040d3ec-8da2-47f6-b134-1341261ccfb9_320w.jpg)] bg-cover rounded"></a>
    </div>

    <nav class="hidden md:flex items-center gap-6 text-sm text-neutral-300">
      <a href="/work" class="hover:text-white transition-colors hover:scale-105 duration-200 font-medium">Work</a>
      <a href="/about" class="hover:text-white transition-colors hover:scale-105 duration-200 font-medium">About</a>
      <a href="/services"
        class="hover:text-white transition-colors hover:scale-105 duration-200 font-medium">Services</a>
      <a href="/contact" class="hover:text-white transition-colors hover:scale-105 duration-200 font-medium">Contact</a>
    </nav>

    <a href="#work"
      style="align-items: center; background-image: linear-gradient(144deg, rgb(175, 64, 255), rgb(91, 66, 243) 50%, rgb(0, 221, 235)); border: 0px; border-radius: 8px; box-shadow: rgba(151, 65, 252, 0.2) 0px 15px 30px -5px; box-sizing: border-box; color: rgb(255, 255, 255); display: inline-flex; font-size: 14px; justify-content: center; line-height: 1em; max-width: 100%; min-width: auto; padding: 3px; text-decoration: none; user-select: none; touch-action: manipulation; white-space: nowrap; cursor: pointer; height: 50px; margin-top: 0px; transform: scale(1); width: auto;"
      onmouseover="this.querySelector('span').style.background='none'"
      onmouseout="this.querySelector('span').style.backgroundColor='rgb(5, 6, 45)'"
      onmousedown="this.style.transform='scale(0.9)'" onmouseup="this.style.transform='scale(1)'" class="">
      <span style="background: none rgb(5, 6, 45); padding: 16px 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" class="cursor-pointer" onclick="window.location.href='/resume';window.location.href='/resume';window.location.href='/resume'" role="button">Resume</span>
    </a>
  </div>
</header>