navbars1

<div class="justify-center w-full mx-auto bg-base-50">
  <!-- Banner Section -->
  <div
    class="flex items-center justify-center py-2 lg:h-12 text-white bg-gradient-to-b from-accent-500 px-8 to-accent-600"
  >
    <div class="flex flex-col lg:flex-row lg:items-center justify-center gap-4">
      <div class="text-xs font-medium">
        <span class="text-sm leading-normal font-medium text-white">
          We have launched a new version of Oxbow UI
        </span>
      </div>
      <div class="hidden w-px h-6 lg:block bg-white/20"></div>
      <div>
        <a
          class="text-sm leading-normal hover:text-accent-200 font-medium flex items-center gap-2 text-white"
          href="#_"
        >
          Talk to sales
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-4"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M9 6l6 6l-6 6"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <!-- Navigation Section with Alpine.js State Management -->
  <div
    x-data="{ open: false }"
    class="flex flex-col w-full mx-auto md:px-12 md:items-center md:justify-between md:flex-row px-8 py-2 lg:px-24 max-w-screen-xl relative"
  >
    <div class="flex flex-row items-center justify-between text-black">
      <!-- Logo Section -->
      <a
        class="text-md leading-normal hover:text-accent-500 font-medium flex items-center gap-2 text-base-900"
        href="#_"
      >
        <img
          class="h-7 2xl:h-12"
          src="/images/oxbow/blueLineLogo.png"
          alt="#_"
        />
        Oxbow UI
      </a>
      <button
        class="flex items-center justify-center transition-all duration-200 focus:ring-2 transition-shadow focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 size-9 p-2 text-sm rounded-md md:hidden"
        @click="open = !open"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler icons-tabler-outline icon-tabler-layout-grid size-3"
          x-data="{ open: false }"
        >
          <!-- Paths for burger icon -->
          <path
            x-show="!open"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          ></path>
          <!-- Paths for close icon (toggle icon) -->
          <path
            x-show="open"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </button>
    </div>
    <!-- Navigation Menu -->
    <nav
      :class="{ 'flex': open, 'hidden': !open }"
      class="flex-col items-center flex-grow hidden gap-3 p-4 px-5 md:px-0 md:pb-0 md:flex md:justify-start md:flex-row lg:p-0"
    >
      <button
        class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-white bg-accent-600 hover:bg-accent-700 focus:ring-accent-500/50 h-9 px-4 py-2 text-sm font-medium rounded-md md:ml-auto"
      >
        Button
      </button>
    </nav>
  </div>
</div>