Gradient Navigation Bar with CTA Button

<nav class="flex md:px-12 md:py-8 z-50 pt-6 pr-6 pb-6 pl-6 relative items-center justify-between">
  <!-- Logo -->
  <div class="flex items-center gap-2">
    <div
      class="flex text-white bg-gradient-to-br from-sky-500 to-blue-600 w-8 h-8 rounded-full shadow-[0_0_15px_rgba(14,165,233,0.4)] items-center justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
        style="width: 20px; height: 20px; color: rgb(255, 255, 255);" class="w-[20px] h-[20px]" aria-hidden="true"
        role="img" data-icon="solar:box-bold-duotone" data-width="20" data-solar="database-bold-duotone"
        data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
        <path fill="#ffffff" d="M12 10c4.418 0 8-1.79 8-4s-3.582-4-8-4s-8 1.79-8 4s3.582 4 8 4" class=""></path>
        <path fill="#ffffff" d="M4 12v6c0 2.21 3.582 4 8 4s8-1.79 8-4v-6c0 2.21-3.582 4-8 4s-8-1.79-8-4" opacity=".5"
          class="">
        </path>
        <path fill="#ffffff" d="M4 6v6c0 2.21 3.582 4 8 4s8-1.79 8-4V6c0 2.21-3.582 4-8 4S4 8.21 4 6" opacity=".7"
          class="">
        </path>
      </svg>
    </div>
  </div>

  <!-- Desktop Menu -->
  <div
    class="hidden shadow-black/20 md:flex bg-gradient-to-br from-white/10 to-white/0 rounded-full pt-1 pr-1 pb-1 pl-1 shadow-lg backdrop-blur-md gap-x-1 gap-y-1 items-center"
    style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
    <a href="/home"
      class="transition-all text-sm font-medium text-white bg-white/10 rounded-full pt-1.5 pr-4 pb-1.5 pl-4 shadow-sm"
      style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); --border-radius-before: 9999px;">Home</a>
    <a href="/newsroom"
      class="hover:text-white transition-colors text-sm font-medium text-zinc-400 pt-1.5 pr-4 pb-1.5 pl-4"
      style="">Newsroom</a>
    <a href="/about"
      class="hover:text-white transition-colors text-sm font-medium text-zinc-400 pt-1.5 pr-4 pb-1.5 pl-4"
      style="">About</a>
    <a href="/faq" class="hover:text-white transition-colors text-sm font-medium text-zinc-400 pt-1.5 pr-4 pb-1.5 pl-4"
      style="">FAQ</a>
  </div>

  <!-- CTA -->
  <button class="hidden sm:flex hover:from-blue-500 hover:to-blue-600 hover:shadow-[0_0_30px_rgba(59,130,246,0.5)] transition-all flex cursor-pointer text-sm font-medium text-white bg-gradient-to-b from-blue-600 to-blue-700 rounded-full pt-2.5 pr-5 pb-2.5 pl-5 shadow-[0px_0px_0px_1px_rgba(37,99,235,1),inset_0_1px_0_rgba(255,255,255,0.2)] backdrop-blur-sm gap-x-2 gap-y-x-2 items-center" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 9999px" onclick="window.location.href='/home';window.location.href='/contact';window.location.href='/contact';window.location.href='/contact'" role="button">
    <span class="text-sm font-medium text-white tracking-tight" style="">Contact Us</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 text-blue-100"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>

  <!-- Mobile Menu Icon -->
  <button class="md:hidden text-zinc-400 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu w-6 h-6"><path d="M4 5h16" class=""></path><path d="M4 12h16" class=""></path><path d="M4 19h16" class=""></path></svg>
            </button>
</nav>