landing pages

              <header class="w-full mx-auto bg-zinc-50">
  <div
    x-data="{ open: false }"
    class="relative flex flex-col w-full px-8 py-2 mx-auto md:px-12 md:items-center md:justify-between md:flex-row lg:px-24 max-w-screen-xl"
  >
    <!-- Brand / Trigger -->
    <div class="flex flex-row items-center justify-between text-black">
      <a
        class="text-base flex items-center font-medium hover:text-blue-500 gap-2 text-zinc-900"
        href="#_"
      >
        <img
          class="h-7 2xl:h-12"
          src="/images/oxbow/blueLineLogo.png"
          alt="Oxbow UI"
        />
        Oxbow UI
      </a>
      <!-- Mobile menu button -->
      <button
        class="flex items-center justify-center text-center shadow-subtle font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-black bg-white hover:bg-zinc-100 focus:outline-zinc-900 size-9 p-2 text-sm rounded-md md:hidden"
        @click="open = !open"
        :aria-expanded="open"
        aria-controls="main-nav"
        aria-label="Toggle navigation"
      >
        <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-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>
    <!-- Primary navigation -->
    <nav
      id="main-nav"
      :class="{ 'flex': open, 'hidden': !open }"
      class="flex-col items-center flex-grow hidden p-4 px-5 gap-3 md:px-0 md:pb-0 md:flex md:justify-center md:flex-row lg:p-0"
    >
      <a
        class="text-base font-medium hover:text-blue-500 text-zinc-500 md:ml-auto"
        href="#_"
      >
        Features
      </a>
      <a
        class="text-base font-medium hover:text-blue-500 text-zinc-500"
        href="#_"
      >
        About
      </a>
      <button
        class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
      >
        Button
      </button>
    </nav>
  </div>
</header>