Biya Header

<header
  class="z-20 sticky supports-[backdrop-filter]:bg-white/70 bg-white/80 border-gray-100 border-b relative top-0 backdrop-blur-sm"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; header:nth-of-type(1)">
  <div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; header:nth-of-type(1) &gt; div:nth-of-type(1)">
    <div class="flex sm:py-6 pt-4 pb-4 items-center justify-between">
      <!-- Brand -->
      <div class="flex items-center gap-3">
        <a href="#" class="inline-flex items-center justify-center w-[150px] h-[40px] rounded"
          aria-label="Finance logo"><svg width="152" height="31" viewBox="0 0 152 31" fill="none"
            xmlns="http://www.w3.org/2000/svg" class="">
            <g clip-path="url(#clip0_4063_9933)" class="">
              <path
                d="M66.9373 7.22854C66.9373 10.1312 65.7662 11.9563 63.1324 12.6412V12.7398C66.2543 13.2615 68.1085 15.0544 68.1085 18.2833C68.1085 22.3602 65.5069 24.4131 60.0428 24.4131H50.8398V1.58813H59.7835C63.8816 1.58813 66.9373 3.57647 66.9373 7.23024V7.22854ZM59.4242 11.8272C62.4155 11.8272 63.6511 10.3929 63.6511 7.81654C63.6511 5.24021 61.9918 4.19676 59.4564 4.26303H54.1549V11.8289H59.4225L59.4242 11.8272ZM59.7818 21.74C63.1646 21.7722 64.79 20.6642 64.79 17.8602C64.79 15.0561 63.0663 13.9804 59.7818 13.9804H54.1549V21.7416H59.7818V21.74Z"
                fill="black" class=""></path>
              <path
                d="M70.5798 8.10921H73.7339V24.4135H70.5798V8.10921ZM70.5781 6.77176H73.7322V3.60742H70.5781V6.77006V6.77176Z"
                fill="black" class=""></path>
              <path
                d="M79.3907 30.9351L81.894 24.5113L75.1621 8.1084H78.4789L83.3888 20.5975H83.5193L88.4953 8.1084H91.4223L84.9514 24.6404L82.5126 30.9334H79.3907V30.9351Z"
                fill="black" class=""></path>
              <path
                d="M102.612 21.5449H102.385C101.117 23.9581 98.839 24.7398 96.9544 24.7398C94.2545 24.7398 91.4902 23.501 91.4902 19.7503C91.4902 16.2291 94.4172 14.7608 98.2865 14.7608H102.612V13.8482C102.612 11.5982 101.603 10.1638 98.839 10.1299C96.7256 10.1299 95.229 11.0102 94.9697 12.9339H92.0105C92.4987 9.24956 95.6849 7.78125 98.8729 7.78125C101.768 7.78125 105.506 8.5307 105.506 14.4005V24.4119H102.612V21.5415V21.5449ZM97.9289 22.4252C99.3593 22.4252 102.612 21.5772 102.612 17.5343V16.7848H98.2865C95.4578 16.7848 94.3511 17.8283 94.3511 19.6212C94.3511 21.6435 95.9442 22.4252 97.9289 22.4252Z"
                fill="black" class=""></path>
              <path
                d="M111.75 11.1423H112.009C112.887 9.02312 114.578 7.78424 117.343 7.78424C121.766 7.78424 124.042 11.2409 124.042 16.2304C124.042 21.2199 121.798 24.7411 117.343 24.7411C114.578 24.7411 112.919 23.5023 112.009 21.4154H111.75V24.4148H108.596V0.935547H111.75V11.1423ZM116.367 22.1971C119.195 22.1971 120.822 19.9793 120.822 16.2304C120.822 12.4815 119.229 10.3283 116.367 10.3283C113.504 10.3283 111.78 12.5137 111.78 16.2304C111.78 19.947 113.472 22.1648 116.367 22.1971Z"
                fill="black" class=""></path>
              <path
                d="M125.473 16.2284C125.473 11.2389 128.042 7.78223 133.115 7.78223C138.187 7.78223 140.692 11.1743 140.692 16.2284C140.692 21.2825 138.189 24.7391 133.115 24.7391C128.04 24.7391 125.473 21.2825 125.473 16.2284ZM133.115 22.1968C136.106 22.1968 137.667 19.979 137.667 16.2301C137.667 12.4811 136.074 10.328 133.115 10.328C130.155 10.328 128.496 12.578 128.496 16.2301C128.496 19.8822 130.122 22.1968 133.115 22.1968Z"
                fill="black" class=""></path>
              <path
                d="M144.367 19.4899V10.5883H141.701V8.1105H144.367V3.93671H147.521V8.1105H151.391V10.5883H147.521V19.947C147.521 21.2522 148.042 21.8708 149.309 21.8708H151.391V24.4148H148.496C145.276 24.4148 144.366 22.9805 144.366 19.4916L144.367 19.4899Z"
                fill="black" class=""></path>
              <path
                d="M44.5243 21.7142H23.7304L23.5677 21.2638L22.7305 18.9594H40.6024L40.1957 17.8429L39.1957 15.0881L38.1958 12.3333L37.4687 10.3297H34.7044L33.7045 7.57324H39.3923L40.3923 10.3297L41.1194 12.3333L42.1193 15.0881L43.1193 17.8429L43.5243 18.9594L44.5243 21.7142Z"
                fill="#17235D" class=""></path>
              <path
                d="M25.3269 24.4688L25.0287 25.2896L24.7033 26.1852L23.283 30.0973L23.0796 30.6564H20.5628L20.3611 30.099L18.9391 26.1852L18.3171 24.4688L16.3172 18.9592L15.9122 17.8427H18.8341L19.2391 18.9592L21.239 24.4688L21.822 26.073L21.7814 26.1852H21.8627L21.822 26.073L22.4034 24.4688H25.3269Z"
                fill="#17235D" class=""></path>
              <path
                d="M33.5062 15.0888H14.9123L14.4513 13.8177L13.9123 12.3341H26.6608H26.8083H29.5844L28.8573 10.3304L28.1963 8.51034L27.8574 7.57396L26.4608 3.72645H4.87887L6.27541 7.57396L7.27705 10.3304L8.00413 12.3341L9.00408 15.0888L10.004 17.8436L10.4091 18.9601L11.409 21.7149L11.4972 21.9562L11.5836 21.7149L12.5836 18.9601L12.9903 17.8436H15.9122L15.5071 18.9601L14.5072 21.7149L13.5072 24.4697L12.9581 25.9822L12.8835 26.1861H10.1091L10.0345 25.9822L9.48541 24.4697L8.48546 21.7149L7.48552 18.9601L7.08045 17.8436L6.0805 15.0888L5.08055 12.3341L4.35347 10.3304L3.35352 7.57396L1.95698 3.72645L0.957031 0.97168H28.3828L29.3827 3.72645L29.6573 4.4844L30.7793 7.57396L31.1199 8.51204L31.7792 10.3304L32.5063 12.3341H32.508L33.5062 15.0888Z"
                fill="#17235D" class=""></path>
              <path d="M12.1855 7.5752H24.9578L25.934 10.33H13.1855L12.1855 7.5752Z" fill="#17235D" class=""></path>
            </g>
            <defs class="">

            </defs>
          </svg></a>
        <span class="sr-only font-geist" style="">Finance</span>
      </div>
      <!-- Nav -->
      <nav
        class="hidden md:flex lg:gap-2 lg:px-4 lg:bg-[#0D67AA]/20 lg:pt-3 lg:pb-3 text-sm text-gray-600 rounded-full pt-2 pr-4 pb-2 pl-4 gap-x-1 gap-y-1 items-center"
        aria-label="Primary">
        <a href="#" aria-current="page"
          class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-gray-900/10 transition-colors hover:bg-gray-100 xl:font-bold xl:text-base text-gray-900 bg-gray-100 rounded-full pt-2 pr-3 pb-2 pl-3 font-geist"
          style="">Individuals</a>
        <a href="#"
          class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-gray-900/10 transition-colors hover:text-gray-900 hover:bg-gray-100 text-gray-600 rounded-full pt-2 pr-3 pb-2 pl-3 font-geist"
          style="">Businesses</a>
        <a href="#"
          class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-gray-900/10 transition-colors hover:text-gray-900 hover:bg-gray-100 text-gray-600 rounded-full pt-2 pr-3 pb-2 pl-3 font-geist"
          style="">Merchants</a>

      </nav>
      <div class="flex items-center gap-3">
        <a href="#"
          class="hidden sm:inline-flex items-center rounded-full px-3 sm:px-4 py-2 text-sm font-medium shadow-lg focus:outline-none focus:ring-2 focus:ring-gray-900/10 transition-colors bg-gray-900 text-white shadow-gray-900/20 hover:bg-black font-geist"
          style="">Get Started</a>
        <!-- Mobile toggle -->
        <button id="mobileToggle" aria-controls="mobileMenu" aria-expanded="false" class="md:hidden inline-flex items-center rounded-full border px-2.5 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-900/10 border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" id="iconMenu" class="lucide lucide-menu h-5 w-5"><path d="M4 5h16" class=""></path><path d="M4 12h16" class=""></path><path d="M4 19h16" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" id="iconClose" class="lucide lucide-x h-5 w-5 hidden"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
              <span class="sr-only font-geist" style="">Toggle navigation</span>
            </button>
      </div>
    </div>
  </div>
  <!-- Mobile Menu -->
  <div id="mobileMenu" class="md:hidden hidden backdrop-blur-sm border-t shadow-sm bg-white/90 border-gray-100">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="py-2 space-y-1 divide-y divide-gray-100">
        <a href="#" aria-current="page" class="block px-2 py-3 text-sm rounded-lg text-gray-900 bg-gray-100 font-geist"
          style="">Overview</a>
        <a href="#"
          class="block px-2 py-3 text-sm rounded-lg transition-colors text-gray-700 hover:text-gray-900 hover:bg-gray-50 font-geist"
          style="">Product</a>
        <a href="#"
          class="block px-2 py-3 text-sm rounded-lg transition-colors text-gray-700 hover:text-gray-900 hover:bg-gray-50 font-geist"
          style="">Pricing</a>
        <a href="#"
          class="block px-2 py-3 text-sm rounded-lg transition-colors text-gray-700 hover:text-gray-900 hover:bg-gray-50 font-geist"
          style="">Docs</a>
        <div class="pt-3">
          <a href="#"
            class="inline-flex w-full items-center justify-center rounded-full px-4 py-2 text-sm font-medium shadow-lg focus:outline-none focus:ring-2 focus:ring-gray-900/10 transition-colors bg-gray-900 text-white shadow-gray-900/20 hover:bg-black font-geist"
            style="">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</header>