Tailwind CSS Navigation (horizontal) Components

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative py-6 bg-transparent z-50">
    <div class="container px-4 mx-auto">
      <div class="flex items-center">
        <a class="inline-block text-lg font-bold" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden ml-auto">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex w-12 h-12 items-center justify-center bg-gray-100 hover:bg-gray-200 rounded-md transition duration-200">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 6H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M3 18H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex ml-14 lg:w-auto lg:space-x-12">
          <li class="group relative">
            <a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Featured</a>
            <div class="hidden group-hover:block absolute top-full left-0 min-w-max max-w-xs p-4 z-50">
              <div class="-mb-2 ml-8 w-4 h-4 rounded-sm bg-white border-l border-t border-gray-200 transform rotate-45"></div>
              <div class="w-full max-w-xs bg-white border border-gray-100 rounded-3xl pt-4 pb-4 px-4">
                <div class="pb-3 mb-3 border-b border-gray-100"><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a><a class="block py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></div>
                <div class="pb-3 mb-3 border-b border-gray-100">
                  <a class="flex mb-2 items-center py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">
                    <img src="saturn-assets/images/headers/icon-download.svg" alt="">
                    <span class="ml-3">Download</span>
                  </a>
                  <a class="flex mb-2 items-center py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">
                    <img src="saturn-assets/images/headers/icon-slack.svg" alt="">
                    <span class="ml-3">Community</span>
                  </a>
                  <a class="flex mb-2 items-center py-3 px-4 text-sm text-gray-900 hover:bg-orange-50 rounded-lg" href="#">
                    <img src="saturn-assets/images/headers/icon-help.svg" alt="">
                    <span class="ml-3">Help</span>
                  </a>
                </div>
                <div class="flex items-center pb-3 mb-3 border-b border-gray-100"><a class="inline-block px-4 py-3 mr-6 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a><a class="inline-block py-3 px-4 text-sm font-semibold text-orange-900 hover:text-white border border-gray-200 hover:border-orange-600 hover:bg-orange-900 rounded-md transition duration-200" href="#">Create an account</a></div>
                <div class="flex items-center">
                  <div class="flex w-10 h-10 items-center justify-center bg-orange-50 rounded-full">
                    <img src="saturn-assets/images/headers/icon-email-me.svg" alt="">
                  </div>
                  <div class="ml-3">
                    <span class="block text-xs text-gray-500">Drop us a line</span>
                    <a class="text-sm font-semibold text-black hover:text-orange-900" href="#">hello@shuffle.dev</a>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li><a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Solutions</a></li>
          <li><a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Products</a></li>
          <li><a class="inline-block text-sm text-gray-900 hover:text-orange-900 font-medium" href="#">Articles</a></li>
        </ul>
        <div class="hidden lg:block ml-auto">
          <div class="flex items-center">
            <a class="inline-block mr-9 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a>
            <a class="relative group inline-block py-3 px-4 text-sm font-semibold text-orange-900 hover:text-white border border-gray-200 rounded-md overflow-hidden transition duration-300" href="#">
              <div class="absolute top-0 right-full w-full h-full bg-orange-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
              <span class="relative">Create an account</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16">
        <a class="mr-auto text-2xl font-medium leading-none" href="#">
          <img class="h-10" src="saturn-assets/logos/logo-saturn-dark.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul class="mb-2">
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">About Us</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Featured</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Solutions</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Products</a></li>
          <li><a class="block py-4 px-5 text-gray-900 hover:bg-orange-50 rounded-lg" href="#">Articles</a></li>
        </ul>
        <div class="py-8 px-6 mb-6 border-t border-b border-gray-200">
          <a class="flex items-center text-sm font-semibold text-orange-900 hover:text-orange-600" href="#">
            <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.3337 6.05833C17.2811 5.9059 17.1854 5.77202 17.0582 5.67292C16.931 5.57381 16.7777 5.51374 16.617 5.5L11.8754 4.80833L9.75038 0.499999C9.68215 0.359106 9.5756 0.240284 9.44296 0.157143C9.31031 0.074003 9.15693 0.0299072 9.00039 0.0299072C8.84384 0.0299072 8.69046 0.074003 8.55781 0.157143C8.42517 0.240284 8.31862 0.359106 8.25039 0.499999L6.12539 4.8L1.38372 5.5C1.22949 5.52192 1.08449 5.58663 0.96518 5.6868C0.845868 5.78696 0.757021 5.91856 0.708721 6.06666C0.664509 6.21139 0.660541 6.36543 0.697245 6.51224C0.733948 6.65905 0.809936 6.7931 0.917055 6.9L4.35872 10.2333L3.52539 14.9667C3.49564 15.1229 3.51121 15.2844 3.57028 15.432C3.62935 15.5797 3.72943 15.7074 3.85872 15.8C3.98474 15.8901 4.13337 15.9433 4.28793 15.9536C4.44249 15.9639 4.59686 15.9309 4.73372 15.8583L9.00039 13.6333L13.2504 15.8667C13.3673 15.9326 13.4994 15.9671 13.6337 15.9667C13.8102 15.9673 13.9824 15.9118 14.1254 15.8083C14.2547 15.7157 14.3548 15.588 14.4138 15.4404C14.4729 15.2927 14.4885 15.1312 14.4587 14.975L13.6254 10.2417L17.067 6.90833C17.1874 6.8064 17.2763 6.67242 17.3235 6.52195C17.3707 6.37149 17.3742 6.21073 17.3337 6.05833ZM12.2087 9.39166C12.111 9.48619 12.0379 9.6032 11.9957 9.73247C11.9536 9.86175 11.9438 9.99937 11.9671 10.1333L12.5671 13.625L9.43372 11.9583C9.31315 11.8941 9.17865 11.8605 9.04205 11.8605C8.90546 11.8605 8.77095 11.8941 8.65039 11.9583L5.51705 13.625L6.11705 10.1333C6.14033 9.99937 6.13048 9.86175 6.08836 9.73247C6.04623 9.6032 5.97312 9.48619 5.87539 9.39166L3.37539 6.89166L6.88372 6.38333C7.01872 6.36455 7.14705 6.31295 7.25747 6.23304C7.36789 6.15313 7.45702 6.04736 7.51705 5.925L9.00039 2.75L10.5671 5.93333C10.6271 6.0557 10.7162 6.16147 10.8266 6.24137C10.9371 6.32128 11.0654 6.37289 11.2004 6.39166L14.7087 6.9L12.2087 9.39166Z" fill="currentColor"></path>
            </svg>
            <span class="ml-3">Upgrade to Premium</span>
          </a>
        </div>
        <div class="flex px-6 mb-16 items-center"><a class="inline-block mr-9 text-sm font-semibold text-orange-900 hover:text-gray-900" href="#">Sign In</a><a class="inline-block py-3 px-4 text-sm font-semibold text-orange-900 hover:text-white border border-gray-300 hover:border-orange-600 hover:bg-orange-900 rounded-md transition duration-200" href="#">Create an account</a></div>
        <div>
          <div class="flex w-20 h-20 mb-6 items-center justify-center bg-orange-50 rounded-full">
            <svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25.3333 16.6667C24.9797 16.6667 24.6406 16.8072 24.3905 17.0572C24.1405 17.3073 24 17.6464 24 18V23.3334C24 23.687 23.8595 24.0261 23.6095 24.2762C23.3594 24.5262 23.0203 24.6667 22.6667 24.6667H4C3.64638 24.6667 3.30724 24.5262 3.05719 24.2762C2.80714 24.0261 2.66667 23.687 2.66667 23.3334V10.5467L10.5067 18.4C11.2567 19.1491 12.2733 19.5698 13.3333 19.5698C14.3933 19.5698 15.41 19.1491 16.16 18.4L18.3467 16.2134C18.5977 15.9623 18.7388 15.6218 18.7388 15.2667C18.7388 14.9116 18.5977 14.5711 18.3467 14.32C18.0956 14.069 17.7551 13.9279 17.4 13.9279C17.0449 13.9279 16.7044 14.069 16.4533 14.32L14.2667 16.5067C14.0174 16.751 13.6823 16.8878 13.3333 16.8878C12.9843 16.8878 12.6492 16.751 12.4 16.5067L4.54667 8.66669H13.3333C13.687 8.66669 14.0261 8.52622 14.2761 8.27617C14.5262 8.02612 14.6667 7.68698 14.6667 7.33336C14.6667 6.97974 14.5262 6.6406 14.2761 6.39055C14.0261 6.1405 13.687 6.00002 13.3333 6.00002H4C2.93913 6.00002 1.92172 6.42145 1.17157 7.1716C0.421427 7.92174 0 8.93916 0 10V23.3334C0 24.3942 0.421427 25.4116 1.17157 26.1618C1.92172 26.9119 2.93913 27.3334 4 27.3334H22.6667C23.7275 27.3334 24.7449 26.9119 25.4951 26.1618C26.2452 25.4116 26.6667 24.3942 26.6667 23.3334V18C26.6667 17.6464 26.5262 17.3073 26.2761 17.0572C26.0261 16.8072 25.687 16.6667 25.3333 16.6667ZM27.6133 5.05336L23.6133 1.05336C23.4865 0.93197 23.337 0.836817 23.1733 0.773358C22.8487 0.64 22.4846 0.64 22.16 0.773358C21.9963 0.836817 21.8468 0.93197 21.72 1.05336L17.72 5.05336C17.4689 5.30443 17.3279 5.64496 17.3279 6.00002C17.3279 6.35509 17.4689 6.69562 17.72 6.94669C17.9711 7.19776 18.3116 7.33881 18.6667 7.33881C19.0217 7.33881 19.3623 7.19776 19.6133 6.94669L21.3333 5.21336V12.6667C21.3333 13.0203 21.4738 13.3595 21.7239 13.6095C21.9739 13.8595 22.313 14 22.6667 14C23.0203 14 23.3594 13.8595 23.6095 13.6095C23.8595 13.3595 24 13.0203 24 12.6667V5.21336L25.72 6.94669C25.844 7.07166 25.9914 7.17086 26.1539 7.23855C26.3164 7.30624 26.4907 7.34109 26.6667 7.34109C26.8427 7.34109 27.017 7.30624 27.1794 7.23855C27.3419 7.17086 27.4894 7.07166 27.6133 6.94669C27.7383 6.82274 27.8375 6.67527 27.9052 6.51279C27.9729 6.35032 28.0077 6.17604 28.0077 6.00002C28.0077 5.82401 27.9729 5.64973 27.9052 5.48726C27.8375 5.32478 27.7383 5.17731 27.6133 5.05336Z" fill="black"></path>
            </svg>
          </div>
          <span class="block mb-3 text-sm text-gray-500">Drop us a line</span>
          <a class="font-semibold text-black" href="#">hello@shuffle.dev</a>
        </div>
      </div>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-8 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto relative">
      <div class="flex justify-between items-center">
        <a href="#">
            <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
        </a>
        <div class="lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block hover:text-white text-neutral-300 focus:outline-none transition-colors duration-200">
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Mobile menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>
        <ul class="hidden lg:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 items-center w-auto space-x-8">
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Solutions</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Resources</a></li>
          <li><a class="text-sm hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Company</a></li>
        </ul>
        <div class="hidden lg:block">
          <div class="group flex p-1 border border-white border-opacity-20  border border-neutral-700 hover:border-neutral-600 transition-all duration-200 transition-all rounded-md">
              <input class="inline-block px-4 py-3 text-sm text-neutral-300 placeholder-neutral-400 font-semibold bg-neutral-800 border border-neutral-700 group-hover:border-neutral-600 focus:border-neutral-600 transition-all duration-200 transition-all rounded-l focus:outline-none focus:border-white transition-colors duration-200" placeholder="Search">
              <button class="block py-3 px-2 rounded-r bg-neutral-800 border border-l-0 border-neutral-700 border border-neutral-700 group-hover:border-neutral-600 transition-all duration-200 transition-all">
                <svg class="text-neutral-300 hover:text-white w-4 h-4 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gradient-to-br from-neutral-950 via-neutral-900 to-neutral-950 opacity-75 filter blur-3xl"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-neutral-900 border-r border-neutral-800 overflow-y-auto">
        <div class="flex items-center mb-12">
          <a href="#" class="mr-auto">
              <img src="darkpro-assets/darkpro-logo.png" alt="" class="h-8">
          </a>
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="h-6 w-6 cursor-pointer hover:text-white text-neutral-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
          </button>
        </div>
        <div>
            <ul>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Product</a></li>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Solutions</a></li>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Resources</a></li>
                <li class="mb-1"><a class="block p-4 text-sm font-semibold hover:bg-neutral-800 hover:text-white rounded-lg text-neutral-300 transition-all duration-200" href="#">Company</a></li>
            </ul>
        </div>
        <div class="mt-auto">
            <div class="pt-6">
                <a class="block px-6 py-3 text-sm text-center font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-lg transition-all duration-200" href="#">Get Started</a>
            </div>
            <p class="mt-6 mb-4 text-sm text-center text-neutral-500">
                <span>© 2025 All rights reserved.</span>
            </p>
        </div>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-7 xl:px-40 py-5 bg-white">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14">
          <a href="#">
            <img class="h-8" src="flaro-assets/logos/flaro-logo-black.svg" alt="">
          </a>
        </div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-16">
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Features</a></li>
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Solutions</a></li>
            <li class="mr-9 font-medium hover:text-gray-700"><a href="#">Resources</a></li>
            <li class="font-medium hover:text-gray-700"><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block">
          <div class="inline-block">
            <button class="py-3 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>
          </div>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-indigo-600" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img class="h-8" src="flaro-assets/logos/flaro-logo-black.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Features</a></li>
            <li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Solutions</a></li>
            <li class="mb-12"><a class="font-medium hover:text-gray-700" href="#">Resources</a></li>
            <li><a class="font-medium hover:text-gray-700" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8">
          <div class="flex flex-wrap">
            <div class="w-full">
              <div class="block">
                <button class="py-3 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Try 14 Days Free Trial</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-white">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-10">
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Features</a></li>
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Solutions</a></li>
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Resources</a></li>
            <li class="font-heading text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block">
          <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-gray-900 font-medium bg-gradient-cyan overflow-hidden rounded-10">
            <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
            <div class="py-2 px-5 bg-white rounded-lg">
              <p class="relative z-10" >Start Free Trial</p>
            </div>
          </button>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 py-8 bg-white h-full">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-8 w-full">
          <ul>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Solutions</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Resources</a></li>
            <li><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full">
          <div class="flex flex-wrap">
            <div class="w-full mb-3">
              <button class="p-0.5 font-heading block w-full text-lg text-gray-900 font-medium rounded-10">
                <div class="py-2 px-5 rounded-10">
                  <p >Login</p>
                </div>
              </button>
            </div>
            <div class="w-full">
              <button class="group relative p-0.5 font-heading block w-full text-lg text-gray-900 font-medium bg-gradient-cyan overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-white rounded-lg">
                  <p class="relative z-10" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <div class="flex items-center gap-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="hidden lg:flex gap-4"><a class="py-3 px-5 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Login</a><a class="py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a></div>
      <div class="lg:hidden">
        <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
          <svg class="navbar-burger text-orange-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative z-10 px-9 py-8 h-full overflow-y-auto bg-white flex flex-col justify-between">
        <div class="flex items-center justify-between">
          <a href="#">
            <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
          </a>
          <a x-on:click.prevent="mobileNavOpen = !mobileNavOpen" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <ul class="flex flex-col gap-12 py-12">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="group-hover:text-opacity-70 transition duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </li>
        </ul>
        <div class="flex flex-col items-center gap-6"><a class="w-full text-center py-3 px-5 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Login</a><a class="w-full text-center py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a></div>
      </nav>
    </div>
  </div>
</section>

<section class="bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto pr-2">
            <a href="#">
              <img src="basko-assets/logos/basko-logo-dark.png" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-8">
              <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Features</a></li>
              <li class="mr-14 font-medium hover:text-gray-900 tracking-tight"><a href="#">Pricing</a></li>
              <li class="mr-8 font-medium hover:text-gray-900 tracking-tight border-r pr-8"><a href="#">Automation</a></li>
              <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Customer Login</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen">
              <svg class="text-indigo-600" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="basko-assets/logos/basko-logo-dark.png" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-12 font-medium hover:text-gray-900 tracking-tight"><a href="#">Features</a></li>
            <li class="mb-12 font-medium hover:text-gray-900 tracking-tight"><a href="#">Pricing</a></li>
            <li class="mb-12 font-medium hover:text-gray-900 tracking-tight"><a href="#">Automation</a></li>
            <li class="font-medium hover:text-gray-900 tracking-tight"><a href="#">Customer Login</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-5 py-3 text-white font-semibold text-center tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </nav>
  </div>
</section>

<section class="py-6 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between px-6 py-3.5 bg-gray-100 border border-gray-100 rounded-full">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a href="#">
              <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center justify-center">
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Features</a></li>
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Solutions</a></li>
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
              <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <div class="flex flex-wrap -m-2">
              <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-gray-100 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 rounded-full" href="#">Log In</a></div>
              <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
            </div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block">
              <svg class="text-blue-500" width="45" height="45" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
      <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
      <nav class="relative z-10 px-9 pt-8 bg-white h-full overflow-y-auto">
        <div class="flex flex-wrap justify-between h-full">
          <div class="w-full">
            <div class="flex items-center justify-between -m-2">
              <div class="w-auto p-2">
                <a class="inline-block" href="#">
                  <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
                </a>
              </div>
              <div class="w-auto p-2">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div class="flex flex-col justify-center py-8 w-full">
            <ul>
              <li class="mb-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Features</a></li>
              <li class="mb-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Solutions</a></li>
              <li class="mb-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
              <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="flex flex-col justify-end w-full pb-8">
            <div class="flex flex-wrap -m-2">
              <div class="w-full p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-200 border rounded-full" href="#">Log In</a></div>
              <div class="w-full p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between pt-5 pb-2.5 -m-2">
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto hidden lg:block">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2">
              <a class="inline-block" href="#">
                <img src="nightsable-assets/logos/logo.svg" alt="">
              </a>
            </div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
</section>

<section class="py-8" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav>
      <div class="flex justify-between items-center">
        <a class="text-lg font-medium" href="#">
          <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 hover:bg-gray-50 rounded">
            <svg class="block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex lg:ml-auto lg:mr-12 lg:items-center lg:w-auto lg:space-x-12">
          <li><a class="font-medium text-sm" href="#">About</a></li>
          <li><a class="font-medium text-sm" href="#">Company</a></li>
          <li><a class="font-medium text-sm" href="#">Services</a></li>
          <li><a class="font-medium text-sm" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:block"><a class="inline-block py-3 px-8 text-sm text-white font-medium leading-normal bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Contact Us</a></div>
      </div>
    </nav>
  </div>
  <div :class="{ 'block': mobileNavOpen, 'hidden': !mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-2xl font-medium leading-none" href="#">
          <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">About</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">Company</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-medium text-gray-900 hover:bg-gray-50 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6"><a class="block py-3 text-center text-sm text-white leading-normal bg-red-400 hover:bg-red-300 font-medium rounded transition duration-200" href="#">Contact Us</a></div>
        <p class="mt-6 mb-4 text-sm text-center text-gray-500">
          <span>© 2021 All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative">
    <div class="p-6 flex items-center bg-gray-800">
      <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="#">
        <img class="h-10" src="artemis-assets/logos/artemis-logo.svg" alt="" width="auto">
      </a>
      <ul class="hidden xl:flex">
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.9066 3.12886C14.9005 3.12235 14.8987 3.1137 14.8923 3.10734C14.8859 3.10098 14.8771 3.09905 14.8706 3.0929C13.3119 1.53919 11.2008 0.666748 8.99996 0.666748C6.79914 0.666748 4.68807 1.53919 3.12935 3.0929C3.12279 3.09905 3.11404 3.10093 3.10763 3.10734C3.10122 3.11375 3.09944 3.12234 3.09334 3.12886C1.93189 4.29587 1.14217 5.7808 0.823851 7.39621C0.505534 9.01163 0.672885 10.6851 1.30478 12.2055C1.93668 13.7259 3.00481 15.0251 4.37435 15.939C5.7439 16.8529 7.35348 17.3406 8.99996 17.3406C10.6464 17.3406 12.256 16.8529 13.6256 15.939C14.9951 15.0251 16.0632 13.7259 16.6951 12.2055C17.327 10.6851 17.4944 9.01163 17.1761 7.39621C16.8578 5.7808 16.068 4.29587 14.9066 3.12886ZM8.99992 15.6667C8.00181 15.6664 7.01656 15.4415 6.11714 15.0088C5.21773 14.576 4.42719 13.9465 3.80409 13.1667H7.15015C7.38188 13.4287 7.66662 13.6385 7.98551 13.7821C8.3044 13.9258 8.65017 14.0001 8.99992 14.0001C9.34968 14.0001 9.69544 13.9258 10.0143 13.7821C10.3332 13.6385 10.618 13.4287 10.8497 13.1667H14.1958C13.5727 13.9465 12.7821 14.576 11.8827 15.0088C10.9833 15.4416 9.99804 15.6664 8.99992 15.6667ZM8.16659 11.5001C8.16659 11.3353 8.21546 11.1741 8.30703 11.0371C8.3986 10.9001 8.52875 10.7933 8.68102 10.7302C8.83329 10.6671 9.00085 10.6506 9.1625 10.6828C9.32415 10.7149 9.47263 10.7943 9.58918 10.9108C9.70572 11.0274 9.78509 11.1759 9.81724 11.3375C9.8494 11.4992 9.83289 11.6667 9.76982 11.819C9.70675 11.9713 9.59994 12.1014 9.4629 12.193C9.32586 12.2845 9.16474 12.3334 8.99992 12.3334C8.77898 12.3332 8.56714 12.2453 8.41091 12.0891C8.25468 11.9329 8.16681 11.721 8.16659 11.5001ZM15.1751 11.5018L15.1665 11.5001H11.4999C11.4983 10.9848 11.3373 10.4826 11.0389 10.0624C10.7405 9.64231 10.3193 9.32485 9.83325 9.15364V6.50008C9.83325 6.27907 9.74546 6.06711 9.58918 5.91083C9.4329 5.75455 9.22093 5.66675 8.99992 5.66675C8.77891 5.66675 8.56695 5.75455 8.41067 5.91083C8.25439 6.06711 8.16659 6.27907 8.16659 6.50008V9.15364C7.68054 9.32485 7.25939 9.64231 6.96098 10.0624C6.66256 10.4826 6.50151 10.9848 6.49992 11.5001H2.83334L2.82474 11.5018C2.60799 10.967 2.46221 10.4061 2.39114 9.83341H3.16659C3.3876 9.83341 3.59956 9.74562 3.75584 9.58934C3.91212 9.43306 3.99992 9.2211 3.99992 9.00008C3.99992 8.77907 3.91212 8.56711 3.75584 8.41083C3.59956 8.25455 3.3876 8.16675 3.16659 8.16675H2.39114C2.54005 6.98222 3.00621 5.85993 3.74037 4.91851L4.28597 5.46411C4.36335 5.54149 4.4552 5.60286 4.5563 5.64474C4.65739 5.68661 4.76574 5.70816 4.87517 5.70816C4.98459 5.70816 5.09294 5.68661 5.19404 5.64474C5.29513 5.60286 5.38699 5.54148 5.46436 5.46411C5.54173 5.38674 5.60311 5.29488 5.64498 5.19379C5.68686 5.09269 5.70841 4.98434 5.70841 4.87492C5.70841 4.76549 5.68686 4.65714 5.64498 4.55605C5.60311 4.45495 5.54173 4.3631 5.46435 4.28572L4.91881 3.74017C5.86016 3.00626 6.98227 2.54022 8.16659 2.3913V3.16675C8.16659 3.38776 8.25439 3.59972 8.41067 3.756C8.56695 3.91228 8.77891 4.00008 8.99992 4.00008C9.22093 4.00008 9.4329 3.91228 9.58918 3.756C9.74546 3.59972 9.83325 3.38776 9.83325 3.16675V2.3913C11.0176 2.54022 12.1397 3.00626 13.081 3.74017L12.5355 4.28572C12.3792 4.44199 12.2914 4.65393 12.2914 4.87492C12.2914 5.09591 12.3792 5.30785 12.5355 5.46411C12.6917 5.62037 12.9037 5.70816 13.1247 5.70816C13.3457 5.70816 13.5576 5.62038 13.7139 5.46411L14.2595 4.91851C14.9936 5.85993 15.4598 6.98222 15.6087 8.16675H14.8333C14.6122 8.16675 14.4003 8.25455 14.244 8.41083C14.0877 8.56711 13.9999 8.77907 13.9999 9.00008C13.9999 9.2211 14.0877 9.43306 14.244 9.58934C14.4003 9.74562 14.6122 9.83341 14.8333 9.83341H15.6087C15.5376 10.4061 15.3919 10.967 15.1751 11.5018Z" fill="currentColor"></path>
            </svg>
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.00017 0.666748C4.41684 0.666748 0.66684 4.41675 0.66684 9.00008C0.66684 13.5834 4.41684 17.3334 9.00017 17.3334C13.5835 17.3334 17.3335 13.5834 17.3335 9.00008C17.3335 4.41675 13.5835 0.666748 9.00017 0.666748ZM2.58351 10.6667C2.41684 10.0834 2.33351 9.58342 2.33351 9.00008C2.33351 8.41675 2.41684 7.91675 2.58351 7.33342H4.16684C4.00017 8.41675 4.00017 9.58342 4.16684 10.6667H2.58351ZM3.25017 12.3334H4.41684C4.58351 13.0834 4.83351 13.8334 5.25017 14.5001C4.41684 13.9167 3.75017 13.1667 3.25017 12.3334ZM4.41684 5.66675H3.25017C3.75017 4.83342 4.41684 4.08342 5.25017 3.50008C4.83351 4.16675 4.58351 4.91675 4.41684 5.66675ZM8.16684 15.4167C7.16684 14.6667 6.41684 13.5834 6.16684 12.3334H8.16684V15.4167ZM8.16684 10.6667H5.75017C5.66684 10.0834 5.66684 9.58342 5.66684 9.00008C5.66684 8.41675 5.66684 7.91675 5.75017 7.33342H8.16684V10.6667ZM8.16684 5.66675H6.16684C6.41684 4.41675 7.16684 3.33342 8.16684 2.58341V5.66675ZM14.7502 5.66675H13.5835C13.4168 4.91675 13.1668 4.16675 12.7502 3.50008C13.5835 4.08342 14.2502 4.83342 14.7502 5.66675ZM9.83351 2.58341C10.8335 3.33342 11.5835 4.41675 11.8335 5.66675H9.83351V2.58341ZM9.83351 15.4167V12.3334H11.8335C11.5835 13.5834 10.8335 14.6667 9.83351 15.4167ZM12.2502 10.6667H9.83351V7.33342H12.2502C12.3335 8.41675 12.3335 9.58342 12.2502 10.6667ZM12.8335 14.5001C13.1668 13.8334 13.4168 13.0834 13.6668 12.3334H14.8335C14.2502 13.1667 13.5835 13.9167 12.8335 14.5001ZM13.9168 10.6667C14.0835 9.58342 14.0835 8.41675 13.9168 7.33342H15.5002C15.8335 8.41675 15.8335 9.58342 15.5002 10.6667H13.9168Z" fill="currentColor"></path>
            </svg>
            <span>Discover</span>
          </a>
        </li>
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.3414 9.23341C11.8688 8.66695 12.166 7.92406 12.1747 7.15008C12.1747 6.31465 11.8428 5.51343 11.2521 4.9227C10.6613 4.33196 9.86012 4.00008 9.02468 4.00008C8.18925 4.00008 7.38804 4.33196 6.7973 4.9227C6.20656 5.51343 5.87468 6.31465 5.87468 7.15008C5.88338 7.92406 6.18054 8.66695 6.70802 9.23341C5.97356 9.59914 5.34154 10.1417 4.86878 10.8123C4.39603 11.4829 4.09737 12.2604 3.99968 13.0751C3.97537 13.2961 4.03985 13.5177 4.17894 13.6912C4.31803 13.8647 4.52034 13.9758 4.74135 14.0001C4.96237 14.0244 5.18398 13.9599 5.35746 13.8208C5.53093 13.6817 5.64204 13.4794 5.66635 13.2584C5.7658 12.451 6.15706 11.7079 6.76642 11.169C7.37579 10.63 8.1612 10.3326 8.97469 10.3326C9.78817 10.3326 10.5736 10.63 11.1829 11.169C11.7923 11.7079 12.1836 12.451 12.283 13.2584C12.3062 13.4721 12.411 13.6686 12.5756 13.8068C12.7402 13.945 12.9519 14.0142 13.1664 14.0001H13.258C13.4765 13.9749 13.6761 13.8645 13.8135 13.6928C13.9508 13.5211 14.0148 13.3021 13.9914 13.0834C13.9009 12.2731 13.6117 11.4976 13.1494 10.826C12.6871 10.1543 12.066 9.60725 11.3414 9.23341ZM8.99969 8.63342C8.70631 8.63342 8.41952 8.54642 8.17559 8.38343C7.93166 8.22044 7.74153 7.98877 7.62926 7.71773C7.51699 7.44669 7.48762 7.14844 7.54485 6.8607C7.60209 6.57296 7.74336 6.30865 7.95081 6.10121C8.15826 5.89376 8.42256 5.75249 8.7103 5.69525C8.99804 5.63802 9.29629 5.66739 9.56733 5.77966C9.83838 5.89193 10.07 6.08205 10.233 6.32599C10.396 6.56992 10.483 6.85671 10.483 7.15008C10.483 7.54349 10.3267 7.92078 10.0486 8.19896C9.77038 8.47714 9.39309 8.63342 8.99969 8.63342ZM14.833 0.666748H3.16635C2.50331 0.666748 1.86743 0.93014 1.39858 1.39898C0.929743 1.86782 0.666351 2.50371 0.666351 3.16675V14.8334C0.666351 15.4965 0.929743 16.1323 1.39858 16.6012C1.86743 17.07 2.50331 17.3334 3.16635 17.3334H14.833C15.4961 17.3334 16.1319 17.07 16.6008 16.6012C17.0696 16.1323 17.333 15.4965 17.333 14.8334V3.16675C17.333 2.50371 17.0696 1.86782 16.6008 1.39898C16.1319 0.93014 15.4961 0.666748 14.833 0.666748ZM15.6664 14.8334C15.6664 15.0544 15.5786 15.2664 15.4223 15.4227C15.266 15.579 15.054 15.6667 14.833 15.6667H3.16635C2.94534 15.6667 2.73338 15.579 2.5771 15.4227C2.42082 15.2664 2.33302 15.0544 2.33302 14.8334V3.16675C2.33302 2.94573 2.42082 2.73377 2.5771 2.57749C2.73338 2.42121 2.94534 2.33341 3.16635 2.33341H14.833C15.054 2.33341 15.266 2.42121 15.4223 2.57749C15.5786 2.73377 15.6664 2.94573 15.6664 3.16675V14.8334Z" fill="currentColor"></path>
            </svg>
            <span>Users</span>
          </a>
        </li>
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.6416 0.716687C16.0443 0.613798 15.4394 0.560837 14.8333 0.558353C12.7653 0.556658 10.7404 1.14966 8.99997 2.26669C7.25509 1.16433 5.23051 0.585879 3.16664 0.60002C2.56051 0.602503 1.95564 0.655464 1.3583 0.758353C1.16264 0.792085 0.985453 0.894569 0.858646 1.04735C0.73184 1.20013 0.663749 1.39316 0.666635 1.59169V11.5917C0.664851 11.7141 0.690074 11.8355 0.74051 11.9471C0.790947 12.0586 0.865357 12.1577 0.958447 12.2373C1.05154 12.3169 1.16102 12.3749 1.2791 12.4074C1.39718 12.4398 1.52096 12.4459 1.64164 12.425C2.83582 12.2183 4.0593 12.2526 5.24002 12.5259C6.42074 12.7993 7.53482 13.3061 8.51664 14.0167L8.61664 14.075H8.7083C8.80072 14.1135 8.89985 14.1334 8.99997 14.1334C9.10009 14.1334 9.19922 14.1135 9.29164 14.075H9.3833L9.4833 14.0167C10.4583 13.2903 11.5691 12.767 12.7501 12.4778C13.931 12.1887 15.158 12.1395 16.3583 12.3334C16.479 12.3542 16.6028 12.3482 16.7208 12.3157C16.8389 12.2833 16.9484 12.2252 17.0415 12.1456C17.1346 12.0661 17.209 11.967 17.2594 11.8554C17.3099 11.7438 17.3351 11.6225 17.3333 11.5V1.50002C17.3246 1.31015 17.2513 1.12895 17.1255 0.986468C16.9997 0.843991 16.829 0.7488 16.6416 0.716687ZM8.16664 11.7917C6.62487 10.9806 4.90873 10.5573 3.16664 10.5584C2.89164 10.5584 2.61664 10.5584 2.3333 10.5584V2.22502C2.61085 2.20902 2.88909 2.20902 3.16664 2.22502C4.94446 2.22306 6.68348 2.74476 8.16664 3.72502V11.7917ZM15.6666 10.5917C15.3833 10.5917 15.1083 10.5917 14.8333 10.5917C13.0912 10.5906 11.3751 11.0139 9.8333 11.825V3.72502C11.3165 2.74476 13.0555 2.22306 14.8333 2.22502C15.1108 2.20902 15.3891 2.20902 15.6666 2.22502V10.5917ZM16.6416 14.05C16.0443 13.9471 15.4394 13.8942 14.8333 13.8917C12.7653 13.89 10.7404 14.483 8.99997 15.6C7.25956 14.483 5.23466 13.89 3.16664 13.8917C2.56051 13.8942 1.95564 13.9471 1.3583 14.05C1.24982 14.0672 1.14582 14.1057 1.05227 14.1633C0.958721 14.2208 0.87747 14.2963 0.813191 14.3854C0.748912 14.4744 0.702873 14.5753 0.677722 14.6822C0.652571 14.7891 0.648803 14.9 0.666635 15.0084C0.708984 15.2248 0.835377 15.4156 1.01813 15.539C1.20088 15.6623 1.42508 15.7083 1.64164 15.6667C2.83582 15.4599 4.0593 15.4942 5.24002 15.7676C6.42074 16.0409 7.53482 16.5478 8.51664 17.2584C8.65777 17.3588 8.82672 17.4128 8.99997 17.4128C9.17322 17.4128 9.34217 17.3588 9.4833 17.2584C10.4651 16.5478 11.5792 16.0409 12.7599 15.7676C13.9406 15.4942 15.1641 15.4599 16.3583 15.6667C16.5749 15.7083 16.7991 15.6623 16.9818 15.539C17.1646 15.4156 17.291 15.2248 17.3333 15.0084C17.3511 14.9 17.3474 14.7891 17.3222 14.6822C17.2971 14.5753 17.251 14.4744 17.1867 14.3854C17.1225 14.2963 17.0412 14.2208 16.9477 14.1633C16.8541 14.1057 16.7501 14.0672 16.6416 14.05Z" fill="currentColor"></path>
            </svg>
            <span>Documents</span>
          </a>
        </li>
        <li>
          <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="#">
            <svg class="text-gray-500 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.33335 9.83342H1.50002C1.27901 9.83342 1.06704 9.92121 0.910765 10.0775C0.754484 10.2338 0.666687 10.4457 0.666687 10.6667V16.5001C0.666687 16.7211 0.754484 16.9331 0.910765 17.0893C1.06704 17.2456 1.27901 17.3334 1.50002 17.3334H7.33335C7.55437 17.3334 7.76633 17.2456 7.92261 17.0893C8.07889 16.9331 8.16669 16.7211 8.16669 16.5001V10.6667C8.16669 10.4457 8.07889 10.2338 7.92261 10.0775C7.76633 9.92121 7.55437 9.83342 7.33335 9.83342ZM6.50002 15.6667H2.33335V11.5001H6.50002V15.6667ZM16.5 0.666748H10.6667C10.4457 0.666748 10.2337 0.754545 10.0774 0.910826C9.92115 1.06711 9.83335 1.27907 9.83335 1.50008V7.33342C9.83335 7.55443 9.92115 7.76639 10.0774 7.92267C10.2337 8.07895 10.4457 8.16675 10.6667 8.16675H16.5C16.721 8.16675 16.933 8.07895 17.0893 7.92267C17.2456 7.76639 17.3334 7.55443 17.3334 7.33342V1.50008C17.3334 1.27907 17.2456 1.06711 17.0893 0.910826C16.933 0.754545 16.721 0.666748 16.5 0.666748ZM15.6667 6.50008H11.5V2.33341H15.6667V6.50008ZM16.5 9.83342H10.6667C10.4457 9.83342 10.2337 9.92121 10.0774 10.0775C9.92115 10.2338 9.83335 10.4457 9.83335 10.6667V16.5001C9.83335 16.7211 9.92115 16.9331 10.0774 17.0893C10.2337 17.2456 10.4457 17.3334 10.6667 17.3334H16.5C16.721 17.3334 16.933 17.2456 17.0893 17.0893C17.2456 16.9331 17.3334 16.7211 17.3334 16.5001V10.6667C17.3334 10.4457 17.2456 10.2338 17.0893 10.0775C16.933 9.92121 16.721 9.83342 16.5 9.83342ZM15.6667 15.6667H11.5V11.5001H15.6667V15.6667ZM7.33335 0.666748H1.50002C1.27901 0.666748 1.06704 0.754545 0.910765 0.910826C0.754484 1.06711 0.666687 1.27907 0.666687 1.50008V7.33342C0.666687 7.55443 0.754484 7.76639 0.910765 7.92267C1.06704 8.07895 1.27901 8.16675 1.50002 8.16675H7.33335C7.55437 8.16675 7.76633 8.07895 7.92261 7.92267C8.07889 7.76639 8.16669 7.55443 8.16669 7.33342V1.50008C8.16669 1.27907 8.07889 1.06711 7.92261 0.910826C7.76633 0.754545 7.55437 0.666748 7.33335 0.666748ZM6.50002 6.50008H2.33335V2.33341H6.50002V6.50008Z" fill="currentColor"></path>
            </svg>
            <span>Applications</span>
          </a>
        </li>
      </ul>
      <ul class="hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 mr-6 ml-auto">
        <li>
          <a class="text-gray-600 hover:text-gray-500" href="#">
            <svg class="h-5 w-5" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V14C0 14.7956 0.316071 15.5587 0.87868 16.1213C1.44129 16.6839 2.20435 17 3 17H5.59L8.29 19.71C8.38344 19.8027 8.49426 19.876 8.61609 19.9258C8.73793 19.9755 8.86839 20.0008 9 20C9.23834 20 9.46886 19.9149 9.65 19.76L12.87 17H15C15.7956 17 16.5587 16.6839 17.1213 16.1213C17.6839 15.5587 18 14.7956 18 14V3C18 2.20435 17.6839 1.44129 17.1213 0.87868C16.5587 0.316071 15.7956 0 15 0ZM16 14C16 14.2652 15.8946 14.5196 15.7071 14.7071C15.5196 14.8946 15.2652 15 15 15H12.5C12.2617 15 12.0311 15.0851 11.85 15.24L9.05 17.64L6.71 15.29C6.61656 15.1973 6.50574 15.124 6.38391 15.0742C6.26207 15.0245 6.13161 14.9992 6 15H3C2.73478 15 2.48043 14.8946 2.29289 14.7071C2.10536 14.5196 2 14.2652 2 14V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H15C15.2652 2 15.5196 2.10536 15.7071 2.29289C15.8946 2.48043 16 2.73478 16 3V14Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li>
          <a class="text-gray-600 hover:text-gray-500" href="#">
            <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
      </ul>
      <div class="hidden xl:block">
        <button class="flex items-center">
          <div class="mr-3">
            <p class="text-sm text-white">Thomas Brown</p>
            <p class="text-sm text-gray-400">Developer</p>
          </div>
          <div class="mr-2">
            <img class="w-10 h-10 rounded-full object-cover object-right" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
          </div>
          <span>
            <svg class="text-gray-400" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.08335 0.666657C8.75002 0.333323 8.25002 0.333323 7.91669 0.666657L5.00002 3.58332L2.08335 0.666657C1.75002 0.333323 1.25002 0.333323 0.916687 0.666657C0.583354 0.99999 0.583354 1.49999 0.916687 1.83332L4.41669 5.33332C4.58335 5.49999 4.75002 5.58332 5.00002 5.58332C5.25002 5.58332 5.41669 5.49999 5.58335 5.33332L9.08335 1.83332C9.41669 1.49999 9.41669 0.99999 9.08335 0.666657Z" fill="currentColor"></path>
            </svg>
          </span>
        </button>
      </div>
      <div class="ml-auto flex xl:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center rounded focus:outline-none">
          <svg class="text-white bg-indigo-500 hover:bg-indigo-600 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="hidden xl:block py-5 px-6 bg-white border-b">
      <div class="flex items-center">
        <ul class="flex items-center">
          <li>
            <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="#">
              <svg class="text-gray-100 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.40849 11.7417C8.37266 11.7813 8.33926 11.8231 8.30849 11.8667C8.27696 11.9132 8.25173 11.9636 8.23349 12.0167C8.20947 12.064 8.19262 12.1145 8.18349 12.1667C8.1794 12.2222 8.1794 12.2779 8.18349 12.3334C8.18068 12.4427 8.20351 12.5512 8.25016 12.6501C8.28759 12.7535 8.3473 12.8474 8.42507 12.9252C8.50283 13.0029 8.59675 13.0627 8.70016 13.1001C8.79991 13.1442 8.90777 13.1669 9.01683 13.1669C9.12589 13.1669 9.23374 13.1442 9.33349 13.1001C9.43691 13.0627 9.53082 13.0029 9.60859 12.9252C9.68636 12.8474 9.74607 12.7535 9.78349 12.6501C9.8205 12.5488 9.83748 12.4412 9.83349 12.3334C9.83413 12.2237 9.81311 12.115 9.77164 12.0135C9.73017 11.912 9.66906 11.8196 9.59183 11.7417C9.51436 11.6636 9.42219 11.6016 9.32064 11.5593C9.21909 11.517 9.11017 11.4952 9.00016 11.4952C8.89015 11.4952 8.78123 11.517 8.67968 11.5593C8.57813 11.6016 8.48596 11.6636 8.40849 11.7417ZM9.00016 0.666748C7.35198 0.666748 5.74082 1.15549 4.37041 2.07117C3 2.98685 1.9319 4.28834 1.30117 5.81105C0.670435 7.33377 0.505407 9.00933 0.826951 10.6258C1.14849 12.2423 1.94217 13.7272 3.1076 14.8926C4.27304 16.0581 5.7579 16.8517 7.37441 17.1733C8.99092 17.4948 10.6665 17.3298 12.1892 16.6991C13.7119 16.0683 15.0134 15.0002 15.9291 13.6298C16.8448 12.2594 17.3335 10.6483 17.3335 9.00008C17.3335 7.90573 17.1179 6.8221 16.6992 5.81105C16.2804 4.80001 15.6665 3.88135 14.8927 3.10752C14.1189 2.3337 13.2002 1.71987 12.1892 1.30109C11.1781 0.882296 10.0945 0.666748 9.00016 0.666748ZM9.00016 15.6667C7.68162 15.6667 6.39269 15.2758 5.29636 14.5432C4.20003 13.8107 3.34555 12.7695 2.84096 11.5513C2.33638 10.3331 2.20436 8.99269 2.46159 7.69948C2.71883 6.40627 3.35377 5.21839 4.28612 4.28604C5.21847 3.35369 6.40635 2.71875 7.69956 2.46151C8.99277 2.20428 10.3332 2.3363 11.5514 2.84088C12.7696 3.34547 13.8107 4.19995 14.5433 5.29628C15.2758 6.39261 15.6668 7.68154 15.6668 9.00008C15.6668 10.7682 14.9644 12.4639 13.7142 13.7141C12.464 14.9644 10.7683 15.6667 9.00016 15.6667ZM9.00016 4.83342C8.56105 4.83313 8.12961 4.94852 7.74925 5.16795C7.3689 5.38739 7.05305 5.70313 6.83349 6.08342C6.7732 6.17826 6.73271 6.28433 6.71447 6.39523C6.69623 6.50613 6.70061 6.61957 6.72735 6.72874C6.75409 6.8379 6.80263 6.94053 6.87006 7.03044C6.93749 7.12036 7.02242 7.19571 7.11972 7.25195C7.21702 7.3082 7.3247 7.34418 7.43627 7.35773C7.54784 7.37128 7.661 7.36213 7.76894 7.33081C7.87688 7.2995 7.97737 7.24667 8.06437 7.17551C8.15136 7.10436 8.22307 7.01634 8.27516 6.91675C8.34858 6.78958 8.4543 6.68407 8.58162 6.6109C8.70893 6.53773 8.85332 6.4995 9.00016 6.50008C9.22117 6.50008 9.43314 6.58788 9.58942 6.74416C9.7457 6.90044 9.83349 7.1124 9.83349 7.33342C9.83349 7.55443 9.7457 7.76639 9.58942 7.92267C9.43314 8.07895 9.22117 8.16675 9.00016 8.16675C8.77915 8.16675 8.56719 8.25455 8.41091 8.41083C8.25463 8.56711 8.16683 8.77907 8.16683 9.00008V9.83342C8.16683 10.0544 8.25463 10.2664 8.41091 10.4227C8.56719 10.579 8.77915 10.6667 9.00016 10.6667C9.22117 10.6667 9.43314 10.579 9.58942 10.4227C9.7457 10.2664 9.83349 10.0544 9.83349 9.83342V9.68341C10.3846 9.48343 10.848 9.0961 11.1425 8.58914C11.437 8.08217 11.5439 7.48782 11.4447 6.90999C11.3454 6.33216 11.0462 5.8076 10.5993 5.42801C10.1525 5.04843 9.58645 4.83796 9.00016 4.83342Z" fill="#E1E4E8"></path>
              </svg>
              <span>Support Center</span>
            </a>
          </li>
          <li>
            <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="#">
              <svg class="text-gray-100 w-5 h-5 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.8802 0.666748H3.21354C2.55072 0.667472 1.91526 0.931096 1.44657 1.39978C0.977887 1.86846 0.714263 2.50393 0.713539 3.16675V14.8334C0.714263 15.4962 0.977887 16.1317 1.44657 16.6004C1.91526 17.0691 2.55072 17.3327 3.21354 17.3334H14.8802C15.543 17.3327 16.1785 17.0691 16.6472 16.6004C17.1159 16.1317 17.3795 15.4962 17.3802 14.8334V3.16675C17.3795 2.50393 17.1159 1.86846 16.6472 1.39978C16.1785 0.931096 15.543 0.667472 14.8802 0.666748ZM3.21354 2.33341H14.8802C15.1012 2.33364 15.313 2.4215 15.4692 2.57774C15.6255 2.73397 15.7133 2.9458 15.7135 3.16675V9.83342H13.6595C13.3851 9.83319 13.1149 9.90084 12.8729 10.0303C12.631 10.1598 12.4248 10.3471 12.2728 10.5756L11.1009 12.3334H6.99284L5.82096 10.5756C5.66894 10.3471 5.46277 10.1598 5.22083 10.0303C4.97888 9.90084 4.70867 9.83319 4.43425 9.83342H2.38021V3.16675C2.38043 2.9458 2.46829 2.73397 2.62453 2.57774C2.78076 2.4215 2.99259 2.33364 3.21354 2.33341ZM14.8802 15.6667H3.21354C2.99259 15.6665 2.78076 15.5787 2.62453 15.4224C2.46829 15.2662 2.38043 15.0544 2.38021 14.8334V11.5001H4.43425L5.60612 13.2579C5.75815 13.4864 5.96431 13.6737 6.20626 13.8032C6.44821 13.9327 6.71842 14.0003 6.99284 14.0001H11.1009C11.3753 14.0003 11.6455 13.9327 11.8875 13.8032C12.1294 13.6737 12.3356 13.4864 12.4876 13.2579L13.6595 11.5001H15.7135V14.8334C15.7133 15.0544 15.6255 15.2662 15.4692 15.4224C15.313 15.5787 15.1012 15.6665 14.8802 15.6667Z" fill="#E1E4E8"></path>
              </svg>
              <span>Inbox</span>
            </a>
          </li>
          <li>
            <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="#">
              <svg class="text-gray-100 w-5 h-5 mr-2" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.9832 6.64169C18.9047 6.545 18.8056 6.46712 18.6932 6.41376C18.5807 6.36041 18.4577 6.33293 18.3332 6.33335H16.6665V5.50002C16.6665 4.83698 16.4031 4.20109 15.9343 3.73225C15.4654 3.26341 14.8295 3.00002 14.1665 3.00002H8.93318L8.66651 2.16669C8.49363 1.67771 8.17296 1.2546 7.74893 0.955986C7.32489 0.657367 6.81847 0.498019 6.29984 0.500019H3.33318C2.67013 0.500019 2.03425 0.763411 1.56541 1.23225C1.09657 1.70109 0.833176 2.33698 0.833176 3.00002V13C0.833176 13.6631 1.09657 14.2989 1.56541 14.7678C2.03425 15.2366 2.67013 15.5 3.33318 15.5H15.3332C15.9009 15.4984 16.4511 15.3036 16.8933 14.9476C17.3356 14.5917 17.6435 14.0959 17.7665 13.5417L19.1665 7.35002C19.1919 7.22578 19.1885 7.0974 19.1567 6.97466C19.125 6.85191 19.0656 6.73803 18.9832 6.64169ZM4.47484 13.1834C4.43251 13.3713 4.32633 13.5388 4.1744 13.6574C4.02246 13.7759 3.83414 13.8381 3.64151 13.8334H3.33318C3.11216 13.8334 2.9002 13.7456 2.74392 13.5893C2.58764 13.433 2.49984 13.221 2.49984 13V3.00002C2.49984 2.779 2.58764 2.56704 2.74392 2.41076C2.9002 2.25448 3.11216 2.16669 3.33318 2.16669H6.29984C6.48156 2.1572 6.6614 2.20746 6.81187 2.30978C6.96235 2.4121 7.07519 2.56087 7.13318 2.73335L7.58318 4.10002C7.63665 4.25897 7.73684 4.39809 7.87065 4.49919C8.00446 4.60029 8.16566 4.65867 8.33318 4.66669H14.1665C14.3875 4.66669 14.5995 4.75448 14.7558 4.91076C14.912 5.06704 14.9998 5.27901 14.9998 5.50002V6.33335H6.66651C6.47387 6.32864 6.28556 6.39084 6.13362 6.50935C5.98168 6.62786 5.87551 6.79537 5.83318 6.98335L4.47484 13.1834ZM16.1415 13.1834C16.0992 13.3713 15.993 13.5388 15.8411 13.6574C15.6891 13.7759 15.5008 13.8381 15.3082 13.8334H6.00818C6.05121 13.7405 6.08203 13.6425 6.09984 13.5417L7.33318 8.00002H17.3332L16.1415 13.1834Z" fill="#E1E4E8"></path>
              </svg>
              <span>File Manager</span>
            </a>
          </li>
          <li>
            <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="#">
              <svg class="text-gray-100 w-5 h-5 mr-2" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.09179 8.575C2.01254 8.49913 1.91908 8.43966 1.81679 8.4C1.6139 8.31665 1.38634 8.31665 1.18346 8.4C1.08116 8.43966 0.987709 8.49913 0.908456 8.575C0.832589 8.65425 0.773118 8.74771 0.733456 8.85C0.66964 9.00176 0.652204 9.16902 0.683349 9.33068C0.714494 9.49234 0.792825 9.64115 0.908456 9.75833C0.989457 9.83194 1.08247 9.89113 1.18346 9.93333C1.28321 9.97742 1.39106 10.0002 1.50012 10.0002C1.60918 10.0002 1.71704 9.97742 1.81679 9.93333C1.91778 9.89113 2.01079 9.83194 2.09179 9.75833C2.20742 9.64115 2.28575 9.49234 2.3169 9.33068C2.34804 9.16902 2.33061 9.00176 2.26679 8.85C2.22713 8.74771 2.16766 8.65425 2.09179 8.575ZM4.83346 1.66667H16.5001C16.7211 1.66667 16.9331 1.57887 17.0894 1.42259C17.2457 1.26631 17.3335 1.05435 17.3335 0.833333C17.3335 0.61232 17.2457 0.400358 17.0894 0.244078C16.9331 0.0877975 16.7211 0 16.5001 0H4.83346C4.61244 0 4.40048 0.0877975 4.2442 0.244078C4.08792 0.400358 4.00012 0.61232 4.00012 0.833333C4.00012 1.05435 4.08792 1.26631 4.2442 1.42259C4.40048 1.57887 4.61244 1.66667 4.83346 1.66667ZM2.09179 4.40833C1.9746 4.2927 1.82579 4.21437 1.66413 4.18323C1.50248 4.15208 1.33521 4.16952 1.18346 4.23333C1.08247 4.27554 0.989457 4.33472 0.908456 4.40833C0.832589 4.48759 0.773118 4.58104 0.733456 4.68333C0.689368 4.78308 0.666595 4.89094 0.666595 5C0.666595 5.10906 0.689368 5.21692 0.733456 5.31667C0.775657 5.41765 0.834847 5.51067 0.908456 5.59167C0.989457 5.66528 1.08247 5.72447 1.18346 5.76667C1.28321 5.81075 1.39106 5.83353 1.50012 5.83353C1.60918 5.83353 1.71704 5.81075 1.81679 5.76667C1.91778 5.72447 2.01079 5.66528 2.09179 5.59167C2.1654 5.51067 2.22459 5.41765 2.26679 5.31667C2.31088 5.21692 2.33365 5.10906 2.33365 5C2.33365 4.89094 2.31088 4.78308 2.26679 4.68333C2.22713 4.58104 2.16766 4.48759 2.09179 4.40833ZM16.5001 4.16667H4.83346C4.61244 4.16667 4.40048 4.25446 4.2442 4.41074C4.08792 4.56703 4.00012 4.77899 4.00012 5C4.00012 5.22101 4.08792 5.43298 4.2442 5.58926C4.40048 5.74554 4.61244 5.83333 4.83346 5.83333H16.5001C16.7211 5.83333 16.9331 5.74554 17.0894 5.58926C17.2457 5.43298 17.3335 5.22101 17.3335 5C17.3335 4.77899 17.2457 4.56703 17.0894 4.41074C16.9331 4.25446 16.7211 4.16667 16.5001 4.16667ZM2.09179 0.241667C2.01254 0.165799 1.91908 0.106329 1.81679 0.0666666C1.66503 0.00285041 1.49777 -0.0145849 1.33611 0.0165602C1.17445 0.0477053 1.02564 0.126035 0.908456 0.241667C0.834847 0.322667 0.775657 0.415679 0.733456 0.516667C0.689368 0.616417 0.666595 0.724274 0.666595 0.833333C0.666595 0.942392 0.689368 1.05025 0.733456 1.15C0.775657 1.25099 0.834847 1.344 0.908456 1.425C0.989457 1.49861 1.08247 1.5578 1.18346 1.6C1.33521 1.66382 1.50248 1.68125 1.66413 1.65011C1.82579 1.61896 1.9746 1.54063 2.09179 1.425C2.1654 1.344 2.22459 1.25099 2.26679 1.15C2.31088 1.05025 2.33365 0.942392 2.33365 0.833333C2.33365 0.724274 2.31088 0.616417 2.26679 0.516667C2.22459 0.415679 2.1654 0.322667 2.09179 0.241667ZM16.5001 8.33333H4.83346C4.61244 8.33333 4.40048 8.42113 4.2442 8.57741C4.08792 8.73369 4.00012 8.94565 4.00012 9.16667C4.00012 9.38768 4.08792 9.59964 4.2442 9.75592C4.40048 9.9122 4.61244 10 4.83346 10H16.5001C16.7211 10 16.9331 9.9122 17.0894 9.75592C17.2457 9.59964 17.3335 9.38768 17.3335 9.16667C17.3335 8.94565 17.2457 8.73369 17.0894 8.57741C16.9331 8.42113 16.7211 8.33333 16.5001 8.33333Z" fill="#E1E4E8"></path>
              </svg>
              <span>Data List</span>
            </a>
          </li>
        </ul>
        <ul class="ml-auto">
          <li class="inline-block mr-10">
            <a href="#">
              <svg class="text-gray-200 w-5 h-5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.7666 6.95842L15.1916 6.43342L15.9333 4.95008C16.0085 4.79482 16.0336 4.62005 16.0053 4.44989C15.9769 4.27973 15.8964 4.12257 15.775 4.00008L14 2.22508C13.8768 2.10182 13.7182 2.02026 13.5463 1.99186C13.3743 1.96345 13.1979 1.98965 13.0416 2.06675L11.5583 2.80842L11.0333 1.23342C10.9778 1.06924 10.8726 0.926439 10.7322 0.824874C10.5918 0.72331 10.4232 0.668038 10.25 0.666751H7.74996C7.57526 0.6663 7.40483 0.720767 7.26277 0.822452C7.12071 0.924138 7.0142 1.0679 6.9583 1.23342L6.4333 2.80842L4.94996 2.06675C4.7947 1.99157 4.61993 1.96642 4.44977 1.99478C4.27961 2.02314 4.12245 2.10361 3.99996 2.22508L2.22496 4.00008C2.1017 4.12322 2.02013 4.2819 1.99173 4.4538C1.96333 4.6257 1.98953 4.80218 2.06663 4.95842L2.8083 6.44175L1.2333 6.96675C1.06912 7.0222 0.926317 7.12744 0.824752 7.26784C0.723187 7.40824 0.667916 7.57681 0.666629 7.75008V10.2501C0.666178 10.4248 0.720645 10.5952 0.82233 10.7373C0.924016 10.8793 1.06778 10.9858 1.2333 11.0418L2.8083 11.5668L2.06663 13.0501C1.99145 13.2053 1.9663 13.3801 1.99466 13.5503C2.02302 13.7204 2.10349 13.8776 2.22496 14.0001L3.99996 15.7751C4.1231 15.8983 4.28177 15.9799 4.45368 16.0083C4.62558 16.0367 4.80205 16.0105 4.9583 15.9334L6.44163 15.1918L6.96663 16.7668C7.02253 16.9323 7.12904 17.076 7.2711 17.1777C7.41317 17.2794 7.58359 17.3339 7.7583 17.3334H10.2583C10.433 17.3339 10.6034 17.2794 10.7455 17.1777C10.8875 17.076 10.9941 16.9323 11.05 16.7668L11.575 15.1918L13.0583 15.9334C13.2126 16.0067 13.3856 16.0308 13.5541 16.0025C13.7225 15.9742 13.8781 15.8948 14 15.7751L15.775 14.0001C15.8982 13.8769 15.9798 13.7183 16.0082 13.5464C16.0366 13.3745 16.0104 13.198 15.9333 13.0418L15.1916 11.5584L16.7666 11.0334C16.9308 10.978 17.0736 10.8727 17.1752 10.7323C17.2767 10.5919 17.332 10.4234 17.3333 10.2501V7.75008C17.3337 7.57538 17.2793 7.40495 17.1776 7.26289C17.0759 7.12083 16.9321 7.01432 16.7666 6.95842ZM15.6666 9.65008L14.6666 9.98342C14.4367 10.058 14.2257 10.1817 14.0483 10.346C13.871 10.5103 13.7315 10.7112 13.6395 10.9347C13.5475 11.1583 13.5053 11.3992 13.5158 11.6407C13.5262 11.8823 13.5891 12.1186 13.7 12.3334L14.175 13.2834L13.2583 14.2001L12.3333 13.7001C12.1196 13.5936 11.8855 13.5343 11.6469 13.5262C11.4083 13.518 11.1707 13.5613 10.9502 13.6529C10.7298 13.7446 10.5316 13.8825 10.3691 14.0574C10.2066 14.2324 10.0835 14.4402 10.0083 14.6668L9.67496 15.6668H8.34996L8.01663 14.6668C7.94204 14.4368 7.81832 14.2258 7.65404 14.0485C7.48977 13.8711 7.28888 13.7316 7.06531 13.6396C6.84174 13.5477 6.60084 13.5054 6.35932 13.5159C6.11779 13.5263 5.88143 13.5892 5.66663 13.7001L4.71663 14.1751L3.79996 13.2584L4.29996 12.3334C4.41087 12.1186 4.47373 11.8823 4.48417 11.6407C4.49461 11.3992 4.45238 11.1583 4.36041 10.9347C4.26845 10.7112 4.12894 10.5103 3.95158 10.346C3.77422 10.1817 3.56325 10.058 3.3333 9.98342L2.3333 9.65008V8.35008L3.3333 8.01675C3.56325 7.94216 3.77422 7.81844 3.95158 7.65417C4.12894 7.48989 4.26845 7.28901 4.36041 7.06543C4.45238 6.84186 4.49461 6.60096 4.48417 6.35944C4.47373 6.11792 4.41087 5.88156 4.29996 5.66675L3.82496 4.74175L4.74163 3.82508L5.66663 4.30008C5.88143 4.411 6.11779 4.47385 6.35932 4.48429C6.60084 4.49473 6.84174 4.4525 7.06531 4.36053C7.28888 4.26857 7.48977 4.12907 7.65404 3.95171C7.81832 3.77434 7.94204 3.56337 8.01663 3.33342L8.34996 2.33342H9.64996L9.9833 3.33342C10.0579 3.56337 10.1816 3.77434 10.3459 3.95171C10.5102 4.12907 10.711 4.26857 10.9346 4.36053C11.1582 4.4525 11.3991 4.49473 11.6406 4.48429C11.8821 4.47385 12.1185 4.411 12.3333 4.30008L13.2833 3.82508L14.2 4.74175L13.7 5.66675C13.5935 5.88046 13.5342 6.11454 13.526 6.35316C13.5179 6.59178 13.5611 6.82936 13.6528 7.04982C13.7445 7.27028 13.8824 7.46847 14.0573 7.63098C14.2322 7.79349 14.44 7.91653 14.6666 7.99175L15.6666 8.32508V9.65008ZM8.99996 5.66675C8.34069 5.66675 7.69623 5.86225 7.14806 6.22852C6.5999 6.59479 6.17266 7.11539 5.92036 7.72447C5.66807 8.33356 5.60206 9.00378 5.73068 9.65038C5.8593 10.297 6.17676 10.8909 6.64294 11.3571C7.10911 11.8233 7.70306 12.1408 8.34966 12.2694C8.99626 12.398 9.66649 12.332 10.2756 12.0797C10.8847 11.8274 11.4053 11.4001 11.7715 10.852C12.1378 10.3038 12.3333 9.65936 12.3333 9.00008C12.3333 8.11603 11.9821 7.26818 11.357 6.64306C10.7319 6.01794 9.88402 5.66675 8.99996 5.66675ZM8.99996 10.6668C8.67033 10.6668 8.34809 10.569 8.07401 10.3859C7.79993 10.2027 7.58631 9.94243 7.46016 9.63789C7.33402 9.33335 7.30101 8.99824 7.36532 8.67493C7.42963 8.35163 7.58836 8.05466 7.82145 7.82157C8.05454 7.58849 8.35151 7.42975 8.67481 7.36544C8.99811 7.30113 9.33322 7.33414 9.63777 7.46028C9.94231 7.58643 10.2026 7.80005 10.3857 8.07413C10.5689 8.34822 10.6666 8.67045 10.6666 9.00008C10.6666 9.44211 10.491 9.86603 10.1785 10.1786C9.86591 10.4912 9.44199 10.6668 8.99996 10.6668Z" fill="currentColor"></path>
              </svg>
            </a>
          </li>
          <li class="inline-block">
            <a href="#">
              <svg class="text-gray-200 w-5 h-5" width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.333618 9.00008C0.333618 9.2211 0.421416 9.43306 0.577696 9.58934C0.733976 9.74562 0.945938 9.83342 1.16695 9.83342H7.49195L5.57528 11.7417C5.49718 11.8192 5.43518 11.9114 5.39287 12.0129C5.35057 12.1145 5.32879 12.2234 5.32879 12.3334C5.32879 12.4434 5.35057 12.5523 5.39287 12.6539C5.43518 12.7554 5.49718 12.8476 5.57528 12.9251C5.65275 13.0032 5.74492 13.0652 5.84647 13.1075C5.94802 13.1498 6.05694 13.1716 6.16695 13.1716C6.27696 13.1716 6.38588 13.1498 6.48743 13.1075C6.58898 13.0652 6.68115 13.0032 6.75862 12.9251L10.0919 9.59175C10.1678 9.5125 10.2273 9.41904 10.2669 9.31675C10.3503 9.11386 10.3503 8.8863 10.2669 8.68342C10.2273 8.58112 10.1678 8.48767 10.0919 8.40841L6.75862 5.07508C6.68092 4.99738 6.58868 4.93575 6.48716 4.8937C6.38564 4.85165 6.27683 4.83001 6.16695 4.83001C6.05707 4.83001 5.94826 4.85165 5.84674 4.8937C5.74522 4.93575 5.65298 4.99738 5.57528 5.07508C5.49759 5.15278 5.43595 5.24502 5.3939 5.34654C5.35185 5.44806 5.33021 5.55687 5.33021 5.66675C5.33021 5.77663 5.35185 5.88544 5.3939 5.98696C5.43595 6.08847 5.49759 6.18072 5.57528 6.25842L7.49195 8.16675H1.16695C0.945938 8.16675 0.733976 8.25455 0.577696 8.41083C0.421416 8.56711 0.333618 8.77907 0.333618 9.00008ZM11.1669 0.666748H2.83362C2.17058 0.666748 1.53469 0.93014 1.06585 1.39898C0.59701 1.86782 0.333618 2.50371 0.333618 3.16675V5.66675C0.333618 5.88776 0.421416 6.09972 0.577696 6.256C0.733976 6.41228 0.945938 6.50008 1.16695 6.50008C1.38797 6.50008 1.59993 6.41228 1.75621 6.256C1.91249 6.09972 2.00028 5.88776 2.00028 5.66675V3.16675C2.00028 2.94573 2.08808 2.73377 2.24436 2.57749C2.40064 2.42121 2.6126 2.33341 2.83362 2.33341H11.1669C11.388 2.33341 11.5999 2.42121 11.7562 2.57749C11.9125 2.73377 12.0003 2.94573 12.0003 3.16675V14.8334C12.0003 15.0544 11.9125 15.2664 11.7562 15.4227C11.5999 15.579 11.388 15.6667 11.1669 15.6667H2.83362C2.6126 15.6667 2.40064 15.579 2.24436 15.4227C2.08808 15.2664 2.00028 15.0544 2.00028 14.8334V12.3334C2.00028 12.1124 1.91249 11.9004 1.75621 11.7442C1.59993 11.5879 1.38797 11.5001 1.16695 11.5001C0.945938 11.5001 0.733976 11.5879 0.577696 11.7442C0.421416 11.9004 0.333618 12.1124 0.333618 12.3334V14.8334C0.333618 15.4965 0.59701 16.1323 1.06585 16.6012C1.53469 17.07 2.17058 17.3334 2.83362 17.3334H11.1669C11.83 17.3334 12.4659 17.07 12.9347 16.6012C13.4036 16.1323 13.6669 15.4965 13.6669 14.8334V3.16675C13.6669 2.50371 13.4036 1.86782 12.9347 1.39898C12.4659 0.93014 11.83 0.666748 11.1669 0.666748Z" fill="#C2C9D2"></path>
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-10"></div>
    <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-800 overflow-y-auto">
      <div class="flex w-full items-center px-6 pb-6 mb-6 lg:border-b border-gray-700">
        <a class="text-xl text-white font-semibold" href="#">
          <img class="h-8" src="artemis-assets/logos/artemis-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div class="px-4 pb-6">
        <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium">Main</h3>
        <ul class="mb-8 text-sm font-medium">
          <li>
            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 bg-indigo-500 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-indigo-100 w-5 h-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.9066 3.12873C14.9005 3.12223 14.8987 3.11358 14.8923 3.10722C14.8859 3.10086 14.8771 3.09893 14.8706 3.09278C13.3119 1.53907 11.2008 0.666626 8.99996 0.666626C6.79914 0.666626 4.68807 1.53907 3.12935 3.09278C3.12279 3.09893 3.11404 3.10081 3.10763 3.10722C3.10122 3.11363 3.09944 3.12222 3.09334 3.12873C1.93189 4.29575 1.14217 5.78067 0.823851 7.39609C0.505534 9.01151 0.672885 10.685 1.30478 12.2054C1.93668 13.7258 3.00481 15.025 4.37435 15.9389C5.7439 16.8528 7.35348 17.3405 8.99996 17.3405C10.6464 17.3405 12.256 16.8528 13.6256 15.9389C14.9951 15.025 16.0632 13.7258 16.6951 12.2054C17.327 10.685 17.4944 9.01151 17.1761 7.39609C16.8578 5.78067 16.068 4.29575 14.9066 3.12873ZM8.99992 15.6666C8.00181 15.6663 7.01656 15.4414 6.11714 15.0087C5.21773 14.5759 4.42719 13.9464 3.80409 13.1666H7.15015C7.38188 13.4286 7.66662 13.6383 7.98551 13.782C8.3044 13.9257 8.65017 14 8.99992 14C9.34968 14 9.69544 13.9257 10.0143 13.782C10.3332 13.6383 10.618 13.4286 10.8497 13.1666H14.1958C13.5727 13.9464 12.7821 14.5759 11.8827 15.0087C10.9833 15.4414 9.99804 15.6663 8.99992 15.6666ZM8.16659 11.5C8.16659 11.3351 8.21546 11.174 8.30703 11.037C8.3986 10.8999 8.52875 10.7931 8.68102 10.7301C8.83329 10.667 9.00085 10.6505 9.1625 10.6826C9.32415 10.7148 9.47263 10.7942 9.58918 10.9107C9.70572 11.0272 9.78509 11.1757 9.81724 11.3374C9.8494 11.499 9.83289 11.6666 9.76982 11.8189C9.70675 11.9711 9.59994 12.1013 9.4629 12.1929C9.32586 12.2844 9.16474 12.3333 8.99992 12.3333C8.77898 12.3331 8.56714 12.2452 8.41091 12.089C8.25468 11.9327 8.16681 11.7209 8.16659 11.5ZM15.1751 11.5017L15.1665 11.5H11.4999C11.4983 10.9846 11.3373 10.4824 11.0389 10.0623C10.7405 9.64218 10.3193 9.32472 9.83325 9.15352V6.49996C9.83325 6.27894 9.74546 6.06698 9.58918 5.9107C9.4329 5.75442 9.22093 5.66663 8.99992 5.66663C8.77891 5.66663 8.56695 5.75442 8.41067 5.9107C8.25439 6.06698 8.16659 6.27894 8.16659 6.49996V9.15352C7.68054 9.32472 7.25939 9.64218 6.96098 10.0623C6.66256 10.4824 6.50151 10.9846 6.49992 11.5H2.83334L2.82474 11.5017C2.60799 10.9669 2.46221 10.406 2.39114 9.83329H3.16659C3.3876 9.83329 3.59956 9.74549 3.75584 9.58921C3.91212 9.43293 3.99992 9.22097 3.99992 8.99996C3.99992 8.77894 3.91212 8.56698 3.75584 8.4107C3.59956 8.25442 3.3876 8.16663 3.16659 8.16663H2.39114C2.54005 6.9821 3.00621 5.85981 3.74037 4.91838L4.28597 5.46399C4.36335 5.54137 4.4552 5.60274 4.5563 5.64462C4.65739 5.68649 4.76574 5.70804 4.87517 5.70804C4.98459 5.70804 5.09294 5.68649 5.19404 5.64461C5.29513 5.60274 5.38699 5.54136 5.46436 5.46399C5.54173 5.38661 5.60311 5.29476 5.64498 5.19366C5.68686 5.09257 5.70841 4.98422 5.70841 4.87479C5.70841 4.76537 5.68686 4.65702 5.64498 4.55592C5.60311 4.45483 5.54173 4.36297 5.46435 4.2856L4.91881 3.74005C5.86016 3.00613 6.98227 2.5401 8.16659 2.39118V3.16663C8.16659 3.38764 8.25439 3.5996 8.41067 3.75588C8.56695 3.91216 8.77891 3.99996 8.99992 3.99996C9.22093 3.99996 9.4329 3.91216 9.58918 3.75588C9.74546 3.5996 9.83325 3.38764 9.83325 3.16663V2.39118C11.0176 2.5401 12.1397 3.00613 13.081 3.74005L12.5355 4.2856C12.3792 4.44186 12.2914 4.6538 12.2914 4.87479C12.2914 5.09578 12.3792 5.30772 12.5355 5.46399C12.6917 5.62025 12.9037 5.70804 13.1247 5.70804C13.3457 5.70804 13.5576 5.62026 13.7139 5.46399L14.2595 4.91838C14.9936 5.85981 15.4598 6.9821 15.6087 8.16663H14.8333C14.6122 8.16663 14.4003 8.25442 14.244 8.4107C14.0877 8.56698 13.9999 8.77894 13.9999 8.99996C13.9999 9.22097 14.0877 9.43293 14.244 9.58921C14.4003 9.74549 14.6122 9.83329 14.8333 9.83329H15.6087C15.5376 10.406 15.3919 10.9669 15.1751 11.5017Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Dashboard</span>
              <span class="inline-block ml-auto">
                <svg class="text-gray-400 w-3 h-3" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
                </svg>
              </span>
            </a>
          </li>
          <li>
            <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.0002 0.666626C4.41687 0.666626 0.66687 4.41663 0.66687 8.99996C0.66687 13.5833 4.41687 17.3333 9.0002 17.3333C13.5835 17.3333 17.3335 13.5833 17.3335 8.99996C17.3335 4.41663 13.5835 0.666626 9.0002 0.666626ZM2.58354 10.6666C2.41687 10.0833 2.33354 9.58329 2.33354 8.99996C2.33354 8.41663 2.41687 7.91663 2.58354 7.33329H4.16687C4.0002 8.41663 4.0002 9.58329 4.16687 10.6666H2.58354ZM3.2502 12.3333H4.41687C4.58354 13.0833 4.83354 13.8333 5.2502 14.5C4.41687 13.9166 3.7502 13.1666 3.2502 12.3333ZM4.41687 5.66663H3.2502C3.7502 4.83329 4.41687 4.08329 5.2502 3.49996C4.83354 4.16663 4.58354 4.91663 4.41687 5.66663ZM8.16687 15.4166C7.16687 14.6666 6.41687 13.5833 6.16687 12.3333H8.16687V15.4166ZM8.16687 10.6666H5.7502C5.66687 10.0833 5.66687 9.58329 5.66687 8.99996C5.66687 8.41663 5.66687 7.91663 5.7502 7.33329H8.16687V10.6666ZM8.16687 5.66663H6.16687C6.41687 4.41663 7.16687 3.33329 8.16687 2.58329V5.66663ZM14.7502 5.66663H13.5835C13.4169 4.91663 13.1669 4.16663 12.7502 3.49996C13.5835 4.08329 14.2502 4.83329 14.7502 5.66663ZM9.83354 2.58329C10.8335 3.33329 11.5835 4.41663 11.8335 5.66663H9.83354V2.58329ZM9.83354 15.4166V12.3333H11.8335C11.5835 13.5833 10.8335 14.6666 9.83354 15.4166ZM12.2502 10.6666H9.83354V7.33329H12.2502C12.3335 8.41663 12.3335 9.58329 12.2502 10.6666ZM12.8335 14.5C13.1669 13.8333 13.4169 13.0833 13.6669 12.3333H14.8335C14.2502 13.1666 13.5835 13.9166 12.8335 14.5ZM13.9169 10.6666C14.0835 9.58329 14.0835 8.41663 13.9169 7.33329H15.5002C15.8335 8.41663 15.8335 9.58329 15.5002 10.6666H13.9169Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Discover</span>
              <span class="flex justify-center items-center ml-auto bg-indigo-500 w-6 h-6 text-xs rounded-full">4</span>
            </a>
          </li>
          <li>
            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.3414 9.23329C11.8689 8.66683 12.166 7.92394 12.1747 7.14996C12.1747 6.31453 11.8428 5.51331 11.2521 4.92257C10.6614 4.33183 9.86015 3.99996 9.02472 3.99996C8.18928 3.99996 7.38807 4.33183 6.79733 4.92257C6.20659 5.51331 5.87472 6.31453 5.87472 7.14996C5.88341 7.92394 6.18057 8.66683 6.70805 9.23329C5.97359 9.59902 5.34157 10.1416 4.86881 10.8122C4.39606 11.4827 4.0974 12.2603 3.99972 13.075C3.9754 13.296 4.03989 13.5176 4.17897 13.6911C4.31806 13.8645 4.52037 13.9756 4.74138 14C4.9624 14.0243 5.18401 13.9598 5.35749 13.8207C5.53096 13.6816 5.64207 13.4793 5.66638 13.2583C5.76583 12.4509 6.15709 11.7078 6.76645 11.1688C7.37582 10.6299 8.16123 10.3324 8.97472 10.3324C9.7882 10.3324 10.5736 10.6299 11.183 11.1688C11.7923 11.7078 12.1836 12.4509 12.283 13.2583C12.3062 13.472 12.4111 13.6684 12.5757 13.8066C12.7403 13.9448 12.9519 14.0141 13.1664 14H13.258C13.4765 13.9748 13.6762 13.8644 13.8135 13.6927C13.9509 13.521 14.0148 13.3019 13.9914 13.0833C13.9009 12.2729 13.6117 11.4975 13.1494 10.8258C12.6871 10.1542 12.066 9.60713 11.3414 9.23329ZM8.99972 8.63329C8.70634 8.63329 8.41955 8.5463 8.17562 8.38331C7.93169 8.22031 7.74156 7.98865 7.62929 7.71761C7.51702 7.44656 7.48765 7.14831 7.54488 6.86058C7.60212 6.57284 7.74339 6.30853 7.95084 6.10108C8.15829 5.89364 8.42259 5.75236 8.71033 5.69513C8.99807 5.63789 9.29632 5.66727 9.56736 5.77954C9.83841 5.89181 10.0701 6.08193 10.2331 6.32586C10.3961 6.5698 10.483 6.85658 10.483 7.14996C10.483 7.54336 10.3268 7.92066 10.0486 8.19883C9.77041 8.47701 9.39312 8.63329 8.99972 8.63329ZM14.833 0.666626H3.16638C2.50334 0.666626 1.86746 0.930018 1.39862 1.39886C0.929774 1.8677 0.666382 2.50358 0.666382 3.16663V14.8333C0.666382 15.4963 0.929774 16.1322 1.39862 16.6011C1.86746 17.0699 2.50334 17.3333 3.16638 17.3333H14.833C15.4961 17.3333 16.132 17.0699 16.6008 16.6011C17.0697 16.1322 17.333 15.4963 17.333 14.8333V3.16663C17.333 2.50358 17.0697 1.8677 16.6008 1.39886C16.132 0.930018 15.4961 0.666626 14.833 0.666626ZM15.6664 14.8333C15.6664 15.0543 15.5786 15.2663 15.4223 15.4225C15.266 15.5788 15.0541 15.6666 14.833 15.6666H3.16638C2.94537 15.6666 2.73341 15.5788 2.57713 15.4225C2.42085 15.2663 2.33305 15.0543 2.33305 14.8333V3.16663C2.33305 2.94561 2.42085 2.73365 2.57713 2.57737C2.73341 2.42109 2.94537 2.33329 3.16638 2.33329H14.833C15.0541 2.33329 15.266 2.42109 15.4223 2.57737C15.5786 2.73365 15.6664 2.94561 15.6664 3.16663V14.8333Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Users</span>
              <span class="inline-block ml-auto">
                <svg class="text-gray-400 w-3 h-3" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
                </svg>
              </span>
            </a>
          </li>
          <li>
            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.6416 1.71669C17.0442 1.6138 16.4394 1.56084 15.8332 1.55835C13.7652 1.55666 11.7403 2.14966 9.99991 3.26669C8.25503 2.16433 6.23045 1.58588 4.16657 1.60002C3.56045 1.6025 2.95558 1.65546 2.35824 1.75835C2.16258 1.79209 1.98539 1.89457 1.85859 2.04735C1.73178 2.20013 1.66369 2.39316 1.66657 2.59169V12.5917C1.66479 12.7141 1.69001 12.8355 1.74045 12.9471C1.79089 13.0586 1.8653 13.1577 1.95839 13.2373C2.05147 13.3169 2.16096 13.3749 2.27904 13.4074C2.39712 13.4398 2.5209 13.4459 2.64157 13.425C3.83576 13.2183 5.05924 13.2526 6.23996 13.5259C7.42068 13.7993 8.53476 14.3061 9.51657 15.0167L9.61657 15.075H9.70824C9.80066 15.1135 9.89979 15.1334 9.99991 15.1334C10.1 15.1334 10.1992 15.1135 10.2916 15.075H10.3832L10.4832 15.0167C11.4582 14.2903 12.5691 13.767 13.75 13.4778C14.931 13.1887 16.158 13.1395 17.3582 13.3334C17.4789 13.3542 17.6027 13.3482 17.7208 13.3157C17.8389 13.2833 17.9483 13.2252 18.0414 13.1456C18.1345 13.0661 18.2089 12.967 18.2594 12.8554C18.3098 12.7438 18.335 12.6225 18.3332 12.5V2.50002C18.3246 2.31015 18.2512 2.12895 18.1254 1.98647C17.9996 1.84399 17.8289 1.7488 17.6416 1.71669ZM9.16657 12.7917C7.62481 11.9806 5.90867 11.5573 4.16657 11.5584C3.89157 11.5584 3.61657 11.5584 3.33324 11.5584V3.22502C3.61079 3.20902 3.88903 3.20902 4.16657 3.22502C5.9444 3.22306 7.68342 3.74476 9.16657 4.72502V12.7917ZM16.6666 11.5917C16.3832 11.5917 16.1082 11.5917 15.8332 11.5917C14.0911 11.5906 12.375 12.0139 10.8332 12.825V4.72502C12.3164 3.74476 14.0554 3.22306 15.8332 3.22502C16.1108 3.20902 16.389 3.20902 16.6666 3.22502V11.5917ZM17.6416 15.05C17.0442 14.9471 16.4394 14.8942 15.8332 14.8917C13.7652 14.89 11.7403 15.483 9.99991 16.6C8.2595 15.483 6.2346 14.89 4.16657 14.8917C3.56045 14.8942 2.95558 14.9471 2.35824 15.05C2.24976 15.0672 2.14576 15.1057 2.05221 15.1633C1.95866 15.2208 1.87741 15.2963 1.81313 15.3854C1.74885 15.4744 1.70281 15.5753 1.67766 15.6822C1.65251 15.7891 1.64874 15.9 1.66657 16.0084C1.70892 16.2248 1.83532 16.4156 2.01807 16.539C2.20082 16.6623 2.42502 16.7083 2.64157 16.6667C3.83576 16.4599 5.05924 16.4942 6.23996 16.7676C7.42068 17.0409 8.53476 17.5478 9.51657 18.2584C9.65771 18.3588 9.82665 18.4128 9.99991 18.4128C10.1732 18.4128 10.3421 18.3588 10.4832 18.2584C11.4651 17.5478 12.5791 17.0409 13.7599 16.7676C14.9406 16.4942 16.1641 16.4599 17.3582 16.6667C17.5748 16.7083 17.799 16.6623 17.9817 16.539C18.1645 16.4156 18.2909 16.2248 18.3332 16.0084C18.3511 15.9 18.3473 15.7891 18.3222 15.6822C18.297 15.5753 18.251 15.4744 18.1867 15.3854C18.1224 15.2963 18.0412 15.2208 17.9476 15.1633C17.8541 15.1057 17.7501 15.0672 17.6416 15.05Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Documents</span>
              <span class="inline-block ml-auto">
                <svg class="text-gray-400 w-3 h-3" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
                </svg>
              </span>
            </a>
          </li>
          <li>
            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.33329 9.83329H1.49996C1.27895 9.83329 1.06698 9.92109 0.910704 10.0774C0.754423 10.2337 0.666626 10.4456 0.666626 10.6666V16.5C0.666626 16.721 0.754423 16.9329 0.910704 17.0892C1.06698 17.2455 1.27895 17.3333 1.49996 17.3333H7.33329C7.55431 17.3333 7.76627 17.2455 7.92255 17.0892C8.07883 16.9329 8.16663 16.721 8.16663 16.5V10.6666C8.16663 10.4456 8.07883 10.2337 7.92255 10.0774C7.76627 9.92109 7.55431 9.83329 7.33329 9.83329ZM6.49996 15.6666H2.33329V11.5H6.49996V15.6666ZM16.5 0.666626H10.6666C10.4456 0.666626 10.2337 0.754423 10.0774 0.910704C9.92109 1.06698 9.83329 1.27895 9.83329 1.49996V7.33329C9.83329 7.55431 9.92109 7.76627 10.0774 7.92255C10.2337 8.07883 10.4456 8.16663 10.6666 8.16663H16.5C16.721 8.16663 16.9329 8.07883 17.0892 7.92255C17.2455 7.76627 17.3333 7.55431 17.3333 7.33329V1.49996C17.3333 1.27895 17.2455 1.06698 17.0892 0.910704C16.9329 0.754423 16.721 0.666626 16.5 0.666626ZM15.6666 6.49996H11.5V2.33329H15.6666V6.49996ZM16.5 9.83329H10.6666C10.4456 9.83329 10.2337 9.92109 10.0774 10.0774C9.92109 10.2337 9.83329 10.4456 9.83329 10.6666V16.5C9.83329 16.721 9.92109 16.9329 10.0774 17.0892C10.2337 17.2455 10.4456 17.3333 10.6666 17.3333H16.5C16.721 17.3333 16.9329 17.2455 17.0892 17.0892C17.2455 16.9329 17.3333 16.721 17.3333 16.5V10.6666C17.3333 10.4456 17.2455 10.2337 17.0892 10.0774C16.9329 9.92109 16.721 9.83329 16.5 9.83329ZM15.6666 15.6666H11.5V11.5H15.6666V15.6666ZM7.33329 0.666626H1.49996C1.27895 0.666626 1.06698 0.754423 0.910704 0.910704C0.754423 1.06698 0.666626 1.27895 0.666626 1.49996V7.33329C0.666626 7.55431 0.754423 7.76627 0.910704 7.92255C1.06698 8.07883 1.27895 8.16663 1.49996 8.16663H7.33329C7.55431 8.16663 7.76627 8.07883 7.92255 7.92255C8.07883 7.76627 8.16663 7.55431 8.16663 7.33329V1.49996C8.16663 1.27895 8.07883 1.06698 7.92255 0.910704C7.76627 0.754423 7.55431 0.666626 7.33329 0.666626ZM6.49996 6.49996H2.33329V2.33329H6.49996V6.49996Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Applications</span>
              <span class="inline-block ml-auto">
                <svg class="text-gray-400 w-3 h-3" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9.08329 0.666626C8.74996 0.333293 8.24996 0.333293 7.91663 0.666626L4.99996 3.58329L2.08329 0.666626C1.74996 0.333293 1.24996 0.333293 0.916626 0.666626C0.583293 0.999959 0.583293 1.49996 0.916626 1.83329L4.41663 5.33329C4.58329 5.49996 4.74996 5.58329 4.99996 5.58329C5.24996 5.58329 5.41663 5.49996 5.58329 5.33329L9.08329 1.83329C9.41663 1.49996 9.41663 0.999959 9.08329 0.666626Z" fill="currentColor"></path>
                </svg>
              </span>
            </a>
          </li>
        </ul>
        <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium">Secondary</h3>
        <ul class="text-sm font-medium">
          <li>
            <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.40854 11.7416C8.3727 11.7812 8.33931 11.823 8.30854 11.8666C8.277 11.9131 8.25178 11.9635 8.23354 12.0166C8.20951 12.0639 8.19266 12.1144 8.18354 12.1666C8.17945 12.2221 8.17945 12.2778 8.18354 12.3333C8.18072 12.4426 8.20356 12.5511 8.25021 12.65C8.28763 12.7534 8.34734 12.8473 8.42511 12.9251C8.50288 13.0028 8.59679 13.0625 8.70021 13.1C8.79996 13.144 8.90781 13.1668 9.01687 13.1668C9.12593 13.1668 9.23379 13.144 9.33354 13.1C9.43695 13.0625 9.53087 13.0028 9.60864 12.9251C9.6864 12.8473 9.74611 12.7534 9.78354 12.65C9.82054 12.5486 9.83753 12.4411 9.83354 12.3333C9.83417 12.2236 9.81315 12.1149 9.77168 12.0134C9.73021 11.9118 9.66911 11.8195 9.59187 11.7416C9.5144 11.6635 9.42224 11.6015 9.32069 11.5592C9.21914 11.5169 9.11022 11.4951 9.00021 11.4951C8.8902 11.4951 8.78128 11.5169 8.67973 11.5592C8.57818 11.6015 8.48601 11.6635 8.40854 11.7416ZM9.00021 0.666626C7.35203 0.666626 5.74086 1.15537 4.37045 2.07105C3.00005 2.98672 1.93194 4.28821 1.30121 5.81093C0.670481 7.33365 0.505453 9.0092 0.826997 10.6257C1.14854 12.2422 1.94221 13.7271 3.10765 14.8925C4.27309 16.058 5.75795 16.8516 7.37445 17.1732C8.99096 17.4947 10.6665 17.3297 12.1892 16.699C13.712 16.0682 15.0134 15.0001 15.9291 13.6297C16.8448 12.2593 17.3335 10.6481 17.3335 8.99996C17.3335 7.90561 17.118 6.82198 16.6992 5.81093C16.2804 4.79988 15.6666 3.88122 14.8928 3.1074C14.1189 2.33358 13.2003 1.71975 12.1892 1.30096C11.1782 0.882174 10.0946 0.666626 9.00021 0.666626ZM9.00021 15.6666C7.68166 15.6666 6.39273 15.2756 5.2964 14.5431C4.20008 13.8105 3.34559 12.7694 2.84101 11.5512C2.33643 10.333 2.2044 8.99256 2.46164 7.69936C2.71887 6.40615 3.35381 5.21826 4.28616 4.28591C5.21851 3.35356 6.4064 2.71863 7.6996 2.46139C8.99281 2.20416 10.3333 2.33618 11.5514 2.84076C12.7696 3.34535 13.8108 4.19983 14.5433 5.29616C15.2759 6.39249 15.6669 7.68142 15.6669 8.99996C15.6669 10.7681 14.9645 12.4638 13.7143 13.714C12.464 14.9642 10.7683 15.6666 9.00021 15.6666ZM9.00021 4.83329C8.56109 4.83301 8.12965 4.94839 7.7493 5.16783C7.36894 5.38726 7.0531 5.70301 6.83354 6.08329C6.77324 6.17814 6.73276 6.28421 6.71452 6.39511C6.69628 6.50601 6.70066 6.61945 6.7274 6.72861C6.75414 6.83778 6.80268 6.94041 6.87011 7.03032C6.93754 7.12024 7.02246 7.19558 7.11977 7.25183C7.21707 7.30808 7.32475 7.34406 7.43632 7.35761C7.54789 7.37116 7.66105 7.362 7.76899 7.33069C7.87693 7.29938 7.97742 7.24655 8.06441 7.17539C8.15141 7.10423 8.22311 7.01621 8.27521 6.91663C8.34863 6.78946 8.45435 6.68394 8.58166 6.61077C8.70898 6.53761 8.85336 6.49938 9.00021 6.49996C9.22122 6.49996 9.43318 6.58776 9.58946 6.74404C9.74574 6.90032 9.83354 7.11228 9.83354 7.33329C9.83354 7.55431 9.74574 7.76627 9.58946 7.92255C9.43318 8.07883 9.22122 8.16663 9.00021 8.16663C8.77919 8.16663 8.56723 8.25442 8.41095 8.4107C8.25467 8.56698 8.16687 8.77895 8.16687 8.99996V9.83329C8.16687 10.0543 8.25467 10.2663 8.41095 10.4225C8.56723 10.5788 8.77919 10.6666 9.00021 10.6666C9.22122 10.6666 9.43318 10.5788 9.58946 10.4225C9.74574 10.2663 9.83354 10.0543 9.83354 9.83329V9.68329C10.3847 9.48331 10.848 9.09598 11.1425 8.58902C11.437 8.08205 11.544 7.4877 11.4447 6.90987C11.3454 6.33203 11.0462 5.80747 10.5994 5.42789C10.1525 5.0483 9.58649 4.83784 9.00021 4.83329Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Support Center</span>
            </a>
          </li>
          <li>
            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M15.8802 1.66663H4.2135C3.55068 1.66735 2.91522 1.93097 2.44653 2.39966C1.97785 2.86834 1.71422 3.50381 1.7135 4.16663V15.8333C1.71422 16.4961 1.97785 17.1316 2.44653 17.6003C2.91522 18.0689 3.55068 18.3326 4.2135 18.3333H15.8802C16.543 18.3326 17.1785 18.0689 17.6471 17.6003C18.1158 17.1316 18.3794 16.4961 18.3802 15.8333V4.16663C18.3794 3.50381 18.1158 2.86834 17.6471 2.39966C17.1785 1.93097 16.543 1.66735 15.8802 1.66663ZM4.2135 3.33329H15.8802C16.1011 3.33351 16.3129 3.42138 16.4692 3.57761C16.6254 3.73385 16.7133 3.94568 16.7135 4.16663V10.8333H14.6595C14.385 10.8331 14.1148 10.9007 13.8729 11.0302C13.6309 11.1597 13.4248 11.347 13.2728 11.5755L12.1009 13.3333H7.9928L6.82093 11.5755C6.6689 11.347 6.46273 11.1597 6.22079 11.0302C5.97884 10.9007 5.70863 10.8331 5.43421 10.8333H3.38017V4.16663C3.38039 3.94568 3.46826 3.73385 3.62449 3.57761C3.78072 3.42138 3.99255 3.33351 4.2135 3.33329ZM15.8802 16.6666H4.2135C3.99255 16.6664 3.78072 16.5785 3.62449 16.4223C3.46826 16.2661 3.38039 16.0542 3.38017 15.8333V12.5H5.43421L6.60608 14.2578C6.75811 14.4862 6.96428 14.6736 7.20622 14.803C7.44817 14.9325 7.71838 15.0002 7.9928 15H12.1009C12.3753 15.0002 12.6455 14.9325 12.8875 14.803C13.1294 14.6736 13.3356 14.4862 13.4876 14.2578L14.6595 12.5H16.7135V15.8333C16.7133 16.0542 16.6254 16.2661 16.4692 16.4223C16.3129 16.5785 16.1011 16.6664 15.8802 16.6666Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Inbox</span>
            </a>
          </li>
          <li>
            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.9831 6.64169C18.9047 6.545 18.8056 6.46712 18.6931 6.41376C18.5806 6.36041 18.4576 6.33293 18.3331 6.33335H16.6665V5.50002C16.6665 4.83698 16.4031 4.20109 15.9342 3.73225C15.4654 3.26341 14.8295 3.00002 14.1665 3.00002H8.93313L8.66646 2.16669C8.49359 1.67771 8.17292 1.2546 7.74888 0.955986C7.32484 0.657367 6.81843 0.498019 6.2998 0.500019H3.33313C2.67009 0.500019 2.0342 0.763411 1.56536 1.23225C1.09652 1.70109 0.83313 2.33698 0.83313 3.00002V13C0.83313 13.6631 1.09652 14.2989 1.56536 14.7678C2.0342 15.2366 2.67009 15.5 3.33313 15.5H15.3331C15.9008 15.4984 16.451 15.3036 16.8933 14.9476C17.3355 14.5917 17.6435 14.0959 17.7665 13.5417L19.1665 7.35002C19.1918 7.22578 19.1885 7.0974 19.1567 6.97466C19.1249 6.85191 19.0656 6.73803 18.9831 6.64169ZM4.4748 13.1834C4.43246 13.3713 4.32629 13.5388 4.17435 13.6574C4.02241 13.7759 3.8341 13.8381 3.64146 13.8334H3.33313C3.11212 13.8334 2.90015 13.7456 2.74387 13.5893C2.58759 13.433 2.4998 13.221 2.4998 13V3.00002C2.4998 2.779 2.58759 2.56704 2.74387 2.41076C2.90015 2.25448 3.11212 2.16669 3.33313 2.16669H6.2998C6.48152 2.1572 6.66135 2.20746 6.81183 2.30978C6.9623 2.4121 7.07515 2.56087 7.13313 2.73335L7.58313 4.10002C7.6366 4.25897 7.7368 4.39809 7.8706 4.49919C8.00441 4.60029 8.16561 4.65867 8.33313 4.66669H14.1665C14.3875 4.66669 14.5994 4.75448 14.7557 4.91076C14.912 5.06704 14.9998 5.27901 14.9998 5.50002V6.33335H6.66646C6.47383 6.32864 6.28551 6.39084 6.13358 6.50935C5.98164 6.62786 5.87546 6.79537 5.83313 6.98335L4.4748 13.1834ZM16.1415 13.1834C16.0991 13.3713 15.993 13.5388 15.841 13.6574C15.6891 13.7759 15.5008 13.8381 15.3081 13.8334H6.00813C6.05117 13.7405 6.08198 13.6425 6.0998 13.5417L7.33313 8.00002H17.3331L16.1415 13.1834Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>File Manager</span>
            </a>
          </li>
          <li>
            <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="#">
              <span class="inline-block mr-3">
                <svg class="text-gray-600 w-5 h-5" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.09182 8.575C2.01257 8.49913 1.91911 8.43966 1.81682 8.4C1.61394 8.31665 1.38637 8.31665 1.18349 8.4C1.08119 8.43966 0.98774 8.49913 0.908486 8.575C0.832619 8.65425 0.773148 8.74771 0.733486 8.85C0.66967 9.00176 0.652235 9.16902 0.68338 9.33068C0.714525 9.49234 0.792855 9.64115 0.908486 9.75833C0.989487 9.83194 1.0825 9.89113 1.18349 9.93333C1.28324 9.97742 1.39109 10.0002 1.50015 10.0002C1.60921 10.0002 1.71707 9.97742 1.81682 9.93333C1.91781 9.89113 2.01082 9.83194 2.09182 9.75833C2.20745 9.64115 2.28578 9.49234 2.31693 9.33068C2.34807 9.16902 2.33064 9.00176 2.26682 8.85C2.22716 8.74771 2.16769 8.65425 2.09182 8.575ZM4.83349 1.66667H16.5002C16.7212 1.66667 16.9331 1.57887 17.0894 1.42259C17.2457 1.26631 17.3335 1.05435 17.3335 0.833333C17.3335 0.61232 17.2457 0.400358 17.0894 0.244078C16.9331 0.0877975 16.7212 0 16.5002 0H4.83349C4.61247 0 4.40051 0.0877975 4.24423 0.244078C4.08795 0.400358 4.00015 0.61232 4.00015 0.833333C4.00015 1.05435 4.08795 1.26631 4.24423 1.42259C4.40051 1.57887 4.61247 1.66667 4.83349 1.66667ZM2.09182 4.40833C1.97463 4.2927 1.82582 4.21437 1.66416 4.18323C1.50251 4.15208 1.33525 4.16952 1.18349 4.23333C1.0825 4.27554 0.989487 4.33472 0.908486 4.40833C0.832619 4.48759 0.773148 4.58104 0.733486 4.68333C0.689399 4.78308 0.666626 4.89094 0.666626 5C0.666626 5.10906 0.689399 5.21692 0.733486 5.31667C0.775688 5.41765 0.834877 5.51067 0.908486 5.59167C0.989487 5.66528 1.0825 5.72447 1.18349 5.76667C1.28324 5.81075 1.39109 5.83353 1.50015 5.83353C1.60921 5.83353 1.71707 5.81075 1.81682 5.76667C1.91781 5.72447 2.01082 5.66528 2.09182 5.59167C2.16543 5.51067 2.22462 5.41765 2.26682 5.31667C2.31091 5.21692 2.33368 5.10906 2.33368 5C2.33368 4.89094 2.31091 4.78308 2.26682 4.68333C2.22716 4.58104 2.16769 4.48759 2.09182 4.40833ZM16.5002 4.16667H4.83349C4.61247 4.16667 4.40051 4.25446 4.24423 4.41074C4.08795 4.56703 4.00015 4.77899 4.00015 5C4.00015 5.22101 4.08795 5.43298 4.24423 5.58926C4.40051 5.74554 4.61247 5.83333 4.83349 5.83333H16.5002C16.7212 5.83333 16.9331 5.74554 17.0894 5.58926C17.2457 5.43298 17.3335 5.22101 17.3335 5C17.3335 4.77899 17.2457 4.56703 17.0894 4.41074C16.9331 4.25446 16.7212 4.16667 16.5002 4.16667ZM2.09182 0.241667C2.01257 0.165799 1.91911 0.106329 1.81682 0.0666666C1.66506 0.00285041 1.4978 -0.0145849 1.33614 0.0165602C1.17448 0.0477053 1.02567 0.126035 0.908486 0.241667C0.834877 0.322667 0.775688 0.415679 0.733486 0.516667C0.689399 0.616417 0.666626 0.724274 0.666626 0.833333C0.666626 0.942392 0.689399 1.05025 0.733486 1.15C0.775688 1.25099 0.834877 1.344 0.908486 1.425C0.989487 1.49861 1.0825 1.5578 1.18349 1.6C1.33525 1.66382 1.50251 1.68125 1.66416 1.65011C1.82582 1.61896 1.97463 1.54063 2.09182 1.425C2.16543 1.344 2.22462 1.25099 2.26682 1.15C2.31091 1.05025 2.33368 0.942392 2.33368 0.833333C2.33368 0.724274 2.31091 0.616417 2.26682 0.516667C2.22462 0.415679 2.16543 0.322667 2.09182 0.241667ZM16.5002 8.33333H4.83349C4.61247 8.33333 4.40051 8.42113 4.24423 8.57741C4.08795 8.73369 4.00015 8.94565 4.00015 9.16667C4.00015 9.38768 4.08795 9.59964 4.24423 9.75592C4.40051 9.9122 4.61247 10 4.83349 10H16.5002C16.7212 10 16.9331 9.9122 17.0894 9.75592C17.2457 9.59964 17.3335 9.38768 17.3335 9.16667C17.3335 8.94565 17.2457 8.73369 17.0894 8.57741C16.9331 8.42113 16.7212 8.33333 16.5002 8.33333Z" fill="currentColor"></path>
                </svg>
              </span>
              <span>Data List</span>
            </a>
          </li>
        </ul>
        <div class="pt-8">
          <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="#">
            <span class="inline-block mr-4">
              <svg class="text-gray-600 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.7666 7.9583L16.1916 7.4333L16.9333 5.94996C17.0085 5.7947 17.0336 5.61993 17.0053 5.44977C16.9769 5.27961 16.8964 5.12245 16.775 4.99996L15 3.22496C14.8768 3.1017 14.7182 3.02013 14.5463 2.99173C14.3743 2.96333 14.1979 2.98953 14.0416 3.06663L12.5583 3.8083L12.0333 2.2333C11.9778 2.06912 11.8726 1.92632 11.7322 1.82475C11.5918 1.72319 11.4232 1.66792 11.25 1.66663H8.74996C8.57526 1.66618 8.40483 1.72064 8.26277 1.82233C8.12071 1.92402 8.0142 2.06778 7.9583 2.2333L7.4333 3.8083L5.94996 3.06663C5.7947 2.99145 5.61993 2.9663 5.44977 2.99466C5.27961 3.02302 5.12245 3.10349 4.99996 3.22496L3.22496 4.99996C3.1017 5.1231 3.02013 5.28177 2.99173 5.45368C2.96333 5.62558 2.98953 5.80205 3.06663 5.9583L3.8083 7.44163L2.2333 7.96663C2.06912 8.02208 1.92632 8.12732 1.82475 8.26772C1.72319 8.40812 1.66792 8.57668 1.66663 8.74996V11.25C1.66618 11.4247 1.72064 11.5951 1.82233 11.7372C1.92402 11.8792 2.06778 11.9857 2.2333 12.0416L3.8083 12.5666L3.06663 14.05C2.99145 14.2052 2.9663 14.38 2.99466 14.5502C3.02302 14.7203 3.10349 14.8775 3.22496 15L4.99996 16.775C5.1231 16.8982 5.28177 16.9798 5.45368 17.0082C5.62558 17.0366 5.80205 17.0104 5.9583 16.9333L7.44163 16.1916L7.96663 17.7666C8.02253 17.9321 8.12904 18.0759 8.2711 18.1776C8.41317 18.2793 8.58359 18.3337 8.7583 18.3333H11.2583C11.433 18.3337 11.6034 18.2793 11.7455 18.1776C11.8875 18.0759 11.9941 17.9321 12.05 17.7666L12.575 16.1916L14.0583 16.9333C14.2126 17.0066 14.3856 17.0307 14.5541 17.0024C14.7225 16.9741 14.8781 16.8947 15 16.775L16.775 15C16.8982 14.8768 16.9798 14.7182 17.0082 14.5463C17.0366 14.3743 17.0104 14.1979 16.9333 14.0416L16.1916 12.5583L17.7666 12.0333C17.9308 11.9778 18.0736 11.8726 18.1752 11.7322C18.2767 11.5918 18.332 11.4232 18.3333 11.25V8.74996C18.3337 8.57526 18.2793 8.40483 18.1776 8.26277C18.0759 8.12071 17.9321 8.0142 17.7666 7.9583ZM16.6666 10.65L15.6666 10.9833C15.4367 11.0579 15.2257 11.1816 15.0483 11.3459C14.871 11.5102 14.7315 11.711 14.6395 11.9346C14.5475 12.1582 14.5053 12.3991 14.5158 12.6406C14.5262 12.8821 14.5891 13.1185 14.7 13.3333L15.175 14.2833L14.2583 15.2L13.3333 14.7C13.1196 14.5935 12.8855 14.5342 12.6469 14.526C12.4083 14.5179 12.1707 14.5611 11.9502 14.6528C11.7298 14.7445 11.5316 14.8824 11.3691 15.0573C11.2066 15.2322 11.0835 15.44 11.0083 15.6666L10.675 16.6666H9.34996L9.01663 15.6666C8.94204 15.4367 8.81832 15.2257 8.65404 15.0483C8.48977 14.871 8.28888 14.7315 8.06531 14.6395C7.84174 14.5475 7.60084 14.5053 7.35932 14.5158C7.11779 14.5262 6.88143 14.5891 6.66663 14.7L5.71663 15.175L4.79996 14.2583L5.29996 13.3333C5.41087 13.1185 5.47373 12.8821 5.48417 12.6406C5.49461 12.3991 5.45238 12.1582 5.36041 11.9346C5.26845 11.711 5.12894 11.5102 4.95158 11.3459C4.77422 11.1816 4.56325 11.0579 4.3333 10.9833L3.3333 10.65V9.34996L4.3333 9.01663C4.56325 8.94204 4.77422 8.81832 4.95158 8.65404C5.12894 8.48977 5.26845 8.28888 5.36041 8.06531C5.45238 7.84174 5.49461 7.60084 5.48417 7.35932C5.47373 7.11779 5.41087 6.88143 5.29996 6.66663L4.82496 5.74163L5.74163 4.82496L6.66663 5.29996C6.88143 5.41087 7.11779 5.47373 7.35932 5.48417C7.60084 5.49461 7.84174 5.45238 8.06531 5.36041C8.28888 5.26845 8.48977 5.12894 8.65404 4.95158C8.81832 4.77422 8.94204 4.56325 9.01663 4.3333L9.34996 3.3333H10.65L10.9833 4.3333C11.0579 4.56325 11.1816 4.77422 11.3459 4.95158C11.5102 5.12894 11.711 5.26845 11.9346 5.36041C12.1582 5.45238 12.3991 5.49461 12.6406 5.48417C12.8821 5.47373 13.1185 5.41087 13.3333 5.29996L14.2833 4.82496L15.2 5.74163L14.7 6.66663C14.5935 6.88033 14.5342 7.11442 14.526 7.35304C14.5179 7.59165 14.5611 7.82924 14.6528 8.0497C14.7445 8.27016 14.8824 8.46835 15.0573 8.63086C15.2322 8.79337 15.44 8.9164 15.6666 8.99163L16.6666 9.32496V10.65ZM9.99996 6.66663C9.34069 6.66663 8.69623 6.86213 8.14806 7.2284C7.5999 7.59467 7.17266 8.11526 6.92036 8.72435C6.66807 9.33344 6.60206 10.0037 6.73068 10.6503C6.8593 11.2969 7.17676 11.8908 7.64294 12.357C8.10911 12.8232 8.70306 13.1406 9.34966 13.2692C9.99626 13.3979 10.6665 13.3319 11.2756 13.0796C11.8847 12.8273 12.4053 12.4 12.7715 11.8519C13.1378 11.3037 13.3333 10.6592 13.3333 9.99996C13.3333 9.11591 12.9821 8.26806 12.357 7.64294C11.7319 7.01782 10.884 6.66663 9.99996 6.66663ZM9.99996 11.6666C9.67033 11.6666 9.34809 11.5689 9.07401 11.3857C8.79993 11.2026 8.58631 10.9423 8.46016 10.6378C8.33402 10.3332 8.30101 9.99811 8.36532 9.67481C8.42963 9.35151 8.58836 9.05454 8.82145 8.82145C9.05454 8.58836 9.35151 8.42963 9.67481 8.36532C9.99811 8.30101 10.3332 8.33402 10.6378 8.46016C10.9423 8.58631 11.2026 8.79993 11.3857 9.07401C11.5689 9.34809 11.6666 9.67033 11.6666 9.99996C11.6666 10.442 11.491 10.8659 11.1785 11.1785C10.8659 11.491 10.442 11.6666 9.99996 11.6666Z" fill="currentColor"></path>
              </svg>
            </span>
            <span>Settings</span>
          </a>
          <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="#">
            <span class="inline-block mr-4">
              <svg class="text-gray-600 w-5 h-5" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.333618 8.99996C0.333618 9.22097 0.421416 9.43293 0.577696 9.58922C0.733976 9.7455 0.945938 9.83329 1.16695 9.83329H7.49195L5.57528 11.7416C5.49718 11.8191 5.43518 11.9113 5.39287 12.0128C5.35057 12.1144 5.32879 12.2233 5.32879 12.3333C5.32879 12.4433 5.35057 12.5522 5.39287 12.6538C5.43518 12.7553 5.49718 12.8475 5.57528 12.925C5.65275 13.0031 5.74492 13.0651 5.84647 13.1074C5.94802 13.1497 6.05694 13.1715 6.16695 13.1715C6.27696 13.1715 6.38588 13.1497 6.48743 13.1074C6.58898 13.0651 6.68115 13.0031 6.75862 12.925L10.0919 9.59163C10.1678 9.51237 10.2273 9.41892 10.2669 9.31663C10.3503 9.11374 10.3503 8.88618 10.2669 8.68329C10.2273 8.581 10.1678 8.48755 10.0919 8.40829L6.75862 5.07496C6.68092 4.99726 6.58868 4.93563 6.48716 4.89358C6.38564 4.85153 6.27683 4.82988 6.16695 4.82988C6.05707 4.82988 5.94826 4.85153 5.84674 4.89358C5.74522 4.93563 5.65298 4.99726 5.57528 5.07496C5.49759 5.15266 5.43595 5.2449 5.3939 5.34642C5.35185 5.44794 5.33021 5.55674 5.33021 5.66663C5.33021 5.77651 5.35185 5.88532 5.3939 5.98683C5.43595 6.08835 5.49759 6.18059 5.57528 6.25829L7.49195 8.16663H1.16695C0.945938 8.16663 0.733976 8.25442 0.577696 8.4107C0.421416 8.56698 0.333618 8.77895 0.333618 8.99996ZM11.1669 0.666626H2.83362C2.17058 0.666626 1.53469 0.930018 1.06585 1.39886C0.59701 1.8677 0.333618 2.50358 0.333618 3.16663V5.66663C0.333618 5.88764 0.421416 6.0996 0.577696 6.25588C0.733976 6.41216 0.945938 6.49996 1.16695 6.49996C1.38797 6.49996 1.59993 6.41216 1.75621 6.25588C1.91249 6.0996 2.00028 5.88764 2.00028 5.66663V3.16663C2.00028 2.94561 2.08808 2.73365 2.24436 2.57737C2.40064 2.42109 2.6126 2.33329 2.83362 2.33329H11.1669C11.388 2.33329 11.5999 2.42109 11.7562 2.57737C11.9125 2.73365 12.0003 2.94561 12.0003 3.16663V14.8333C12.0003 15.0543 11.9125 15.2663 11.7562 15.4225C11.5999 15.5788 11.388 15.6666 11.1669 15.6666H2.83362C2.6126 15.6666 2.40064 15.5788 2.24436 15.4225C2.08808 15.2663 2.00028 15.0543 2.00028 14.8333V12.3333C2.00028 12.1123 1.91249 11.9003 1.75621 11.744C1.59993 11.5878 1.38797 11.5 1.16695 11.5C0.945938 11.5 0.733976 11.5878 0.577696 11.744C0.421416 11.9003 0.333618 12.1123 0.333618 12.3333V14.8333C0.333618 15.4963 0.59701 16.1322 1.06585 16.6011C1.53469 17.0699 2.17058 17.3333 2.83362 17.3333H11.1669C11.83 17.3333 12.4659 17.0699 12.9347 16.6011C13.4036 16.1322 13.6669 15.4963 13.6669 14.8333V3.16663C13.6669 2.50358 13.4036 1.8677 12.9347 1.39886C12.4659 0.930018 11.83 0.666626 11.1669 0.666626Z" fill="currentColor"></path>
              </svg>
            </span>
            <span>Log Out</span>
          </a>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex items-center p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2 xl:mr-12">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2 mr-auto">
      <ul class="flex items-center">
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <span>Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Customers</a></li>
      </ul>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2">
      <div class="flex flex-wrap items-center -mb-2">
        <a class="inline-block mb-2 mr-6 text-gray-400 hover:text-gray-300" href="#">
          <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-block mb-2 mr-8 text-gray-400 hover:text-gray-300" href="#">
          <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="group inline-flex mb-2 items-center" href="#">
          <img class="h-8 w-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men.png" alt="">
          <h4 class="text-white font-extrabold tracking-wide mr-4">John Doe</h4>
          <span class="text-gray-400 group-hover:text-gray-300">
            <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50"></div>
    <nav class="relative flex flex-col p-8 h-full w-full bg-gray-700 overflow-y-auto">
      <div class="flex items-center justify-between mb-8">
        <a class="inline-flex items-center" href="#">
          <img class="h-10" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <ul class="mb-10">
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mb-10">
          <a class="inline-flex w-full items-center justify-between text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <span>Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Customers</a></li>
      </ul>
      <a class="flex mt-auto items-center justify-between" href="#">
        <div class="flex items-center">
          <img class="h-8 w-8 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <h5 class="leading-none font-semibold text-gray-100">John Doe</h5>
        </div>
        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L5 5L9 1" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative bg-gray-900 px-6 sm:px-12 pt-4">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
      <a class="inline-block" href="#">
        <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
      </a>
    </div>
    <div class="3xl:hidden pb-4">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
        <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
      </button>
    </div>
    <div class="hidden 3xl:block">
      <div class="pb-2"><a class="inline-block mr-6 text-xs text-gray-400 hover:text-gray-300" href="#">Account</a><a class="inline-block text-xs text-gray-400 hover:text-gray-300" href="#">Saved</a></div>
      <div>
        <div class="flex relative">
          <div class="w-5/12 mr-auto">
            <div class="pt-5 pr-24 border-t border-gray-100 border-opacity-10">
              <ul class="flex items-center justify-end">
                <li class="mr-6">
                  <a class="inline-flex items-center pb-5 pr-8 text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">Collection</span>
                    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                  <div class="border-b-4 border-lime-900"></div>
                </li>
                <li class="pb-6 mr-20"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Projects</a></li>
                <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">About</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto 3xl:w-3/12 mr-4 3xl:mr-12">
            <div class="pt-5 2xl:pl-10 3xl:pl-24 border-t border-gray-100 border-opacity-10">
              <div style="height: 1px;"></div>
              <ul class="flex items-center">
                <li class="pb-6 mr-12">
                  <a class="inline-flex items-center text-sm text-white hover:text-gray-200" href="#">
                    <span class="mr-4">How to Start</span>
                    <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 2L6 6L2 2" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </li>
                <li class="pb-6"><a class="inline-block text-sm text-white hover:text-gray-200" href="#">Design</a></li>
              </ul>
            </div>
          </div>
          <div class="w-auto flex-shrink-0">
            <div class="flex -mt-4 items-center">
              <a class="inline-block w-full sm:w-auto px-7 py-4 mr-12 text-center font-medium text-white border border-white hover:border-gray-200 hover:text-gray-200 rounded" href="#">Get Started</a>
              <button class="flex items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-200">
                <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col pt-12 pb-40 h-full w-full bg-gray-200 overflow-y-auto">
      <div class="px-12">
        <div>
          <a class="inline-block mb-52" href="#">
            <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
          </a>
          <button type="button" aria-label="Close"></button>
        </div>
        <ul>
          <li class="mb-6">
            <a class="flex items-center justify-between" href="#">
              <span>Collection</span>
              <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </a>
          </li>
          <li class="mb-6"><a class="inline-block" href="#">Projects</a></li>
          <li class="mb-16"><a class="inline-block" href="#">About</a></li>
          <li class="mb-6"><a class="inline-block" href="#">How to Start</a></li>
          <li><a class="inline-block" href="#">Design</a></li>
        </ul>
      </div>
    </nav>
    <div class="absolute bottom-0 left-0 w-full">
      <a class="flex items-center pt-4 pb-5 pl-6 pr-4 bg-white" href="#">
        <div class="relative mr-4">
          <img class="w-12 h-12 rounded-full" src="wrexa-assets/images/avatar2.png" alt="">
          <div class="absolute bottom-0 left-0 -ml-2 flex items-center justify-center w-6 h-6 bg-green-800 rounded-full text-white text-xs">1</div>
        </div>
        <div class="pr-5 mr-auto">
          <h4 class="text-xs text-gray-400">Account</h4>
          <span>matloay</span>
        </div>
        <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2L6 6L2 2" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
        </svg>
      </a>
    </div>
  </div>
</section>

<section class="py-8 px-4 lg:px-10 bg-gray-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative flex justify-between items-center">
    <a class="text-2xl text-white font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
    </a>
    <button class="p-2" x-on:click="mobileNavOpen = !mobileNavOpen">
      <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
    </button>
  </nav>
  <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50 hidden">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-10 text-2xl text-gray-800 font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Product</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Story</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Features</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-4 py-4 px-12 text-gray-800 text-center font-bold border border-gray-50 hover:border-gray-100 rounded-full" href="#">Sign in</a><a class="block py-4 px-12 text-white text-center font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Sign up</a></div>
        <p class="mt-6 mb-4 text-lg text-center">
          <span>2021 © Zospace. All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>

<section class="overflow-hidden">
  <div>
    <div class="px-8 py-6 xl:py-0 bg-white border-b border-coolGray-100">
      <div class="flex items-center justify-between -m-2">
        <div class="flex flex-wrap items-center w-auto p-2">
          <a class="block max-w-max xl:mr-14" href="#">
            <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
          </a>
          <ul class="hidden xl:flex flex-wrap">
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Dashboard</p>
              </a>
            </li>
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.50003 8.86L11.5 14.06C11.6521 14.1478 11.8245 14.194 12 14.194C12.1756 14.194 12.348 14.1478 12.5 14.06L21.5 8.86C21.6512 8.77275 21.7768 8.64746 21.8646 8.49659C21.9523 8.34572 21.999 8.17452 22 8C22.0007 7.82379 21.9549 7.65053 21.8671 7.49775C21.7792 7.34497 21.6526 7.21811 21.5 7.13L12.5 1.94C12.348 1.85224 12.1756 1.80603 12 1.80603C11.8245 1.80603 11.6521 1.85224 11.5 1.94L2.50003 7.13C2.34743 7.21811 2.22081 7.34497 2.13301 7.49775C2.04521 7.65053 1.99933 7.82379 2.00003 8C2.00108 8.17452 2.04779 8.34572 2.13551 8.49659C2.22322 8.64746 2.34889 8.77275 2.50003 8.86ZM12 4L19 8L12 12L5.00003 8L12 4ZM20.5 11.17L12 16L3.50003 11.13C3.3859 11.0639 3.25981 11.021 3.12903 11.0038C2.99825 10.9866 2.86537 10.9955 2.73803 11.0299C2.61069 11.0643 2.49141 11.1235 2.38706 11.2042C2.28271 11.2849 2.19536 11.3854 2.13003 11.5C1.99966 11.7296 1.96539 12.0015 2.03471 12.2563C2.10403 12.5111 2.2713 12.7281 2.50003 12.86L11.5 18.06C11.6521 18.1478 11.8245 18.194 12 18.194C12.1756 18.194 12.348 18.1478 12.5 18.06L21.5 12.86C21.7288 12.7281 21.896 12.5111 21.9654 12.2563C22.0347 12.0015 22.0004 11.7296 21.87 11.5C21.8047 11.3854 21.7173 11.2849 21.613 11.2042C21.5087 11.1235 21.3894 11.0643 21.262 11.0299C21.1347 10.9955 21.0018 10.9866 20.871 11.0038C20.7402 11.021 20.6142 11.0639 20.5 11.13V11.17ZM20.5 15.17L12 20L3.50003 15.13C3.3859 15.0639 3.25981 15.021 3.12903 15.0038C2.99825 14.9866 2.86537 14.9955 2.73803 15.0299C2.61069 15.0643 2.49141 15.1235 2.38706 15.2042C2.28271 15.2849 2.19536 15.3854 2.13003 15.5C1.99966 15.7296 1.96539 16.0015 2.03471 16.2563C2.10403 16.5111 2.2713 16.7281 2.50003 16.86L11.5 22.06C11.6521 22.1478 11.8245 22.194 12 22.194C12.1756 22.194 12.348 22.1478 12.5 22.06L21.5 16.86C21.7288 16.7281 21.896 16.5111 21.9654 16.2563C22.0347 16.0015 22.0004 15.7296 21.87 15.5C21.8047 15.3854 21.7173 15.2849 21.613 15.2042C21.5087 15.1235 21.3894 15.0643 21.262 15.0299C21.1347 14.9955 21.0018 14.9866 20.871 15.0038C20.7402 15.021 20.6142 15.0639 20.5 15.13V15.17Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Projects</p>
              </a>
            </li>
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.21 14.75C10.303 14.8437 10.4136 14.9181 10.5354 14.9689C10.6573 15.0197 10.788 15.0458 10.92 15.0458C11.052 15.0458 11.1827 15.0197 11.3046 14.9689C11.4264 14.9181 11.537 14.8437 11.63 14.75L15.71 10.67C15.8983 10.4817 16.0041 10.2263 16.0041 9.96C16.0041 9.6937 15.8983 9.4383 15.71 9.25C15.5217 9.0617 15.2663 8.95591 15 8.95591C14.7337 8.95591 14.4783 9.0617 14.29 9.25L10.92 12.63L9.71 11.41C9.5217 11.2217 9.2663 11.1159 9 11.1159C8.7337 11.1159 8.4783 11.2217 8.29 11.41C8.1017 11.5983 7.99591 11.8537 7.99591 12.12C7.99591 12.3863 8.1017 12.6417 8.29 12.83L10.21 14.75ZM21 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2ZM20 20H4V4H20V20Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Tasks</p>
              </a>
            </li>
            <li class="mr-8">
              <a class="flex flex-wrap items-center py-8 text-base font-medium text-coolGray-500 hover:text-green-500 border-b-2 border-transparent hover:border-green-500" href="#">
                <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 5.49999H12.72L12.4 4.49999C12.1926 3.91322 11.8077 3.4055 11.2989 3.04715C10.7901 2.68881 10.1824 2.49759 9.56 2.49999H5C4.20435 2.49999 3.44129 2.81606 2.87868 3.37867C2.31607 3.94128 2 4.70434 2 5.49999V18.5C2 19.2956 2.31607 20.0587 2.87868 20.6213C3.44129 21.1839 4.20435 21.5 5 21.5H19C19.7956 21.5 20.5587 21.1839 21.1213 20.6213C21.6839 20.0587 22 19.2956 22 18.5V8.49999C22 7.70434 21.6839 6.94128 21.1213 6.37867C20.5587 5.81606 19.7956 5.49999 19 5.49999ZM20 18.5C20 18.7652 19.8946 19.0196 19.7071 19.2071C19.5196 19.3946 19.2652 19.5 19 19.5H5C4.73478 19.5 4.48043 19.3946 4.29289 19.2071C4.10536 19.0196 4 18.7652 4 18.5V5.49999C4 5.23478 4.10536 4.98042 4.29289 4.79289C4.48043 4.60535 4.73478 4.49999 5 4.49999H9.56C9.76964 4.49945 9.97416 4.56481 10.1446 4.68683C10.3151 4.80886 10.4429 4.98137 10.51 5.17999L11.05 6.81999C11.1171 7.01861 11.2449 7.19113 11.4154 7.31315C11.5858 7.43517 11.7904 7.50053 12 7.49999H19C19.2652 7.49999 19.5196 7.60535 19.7071 7.79289C19.8946 7.98042 20 8.23478 20 8.49999V18.5Z" fill="currentColor"></path>
                </svg>
                <p class="text-coolGray-800">Products</p>
              </a>
            </li>
          </ul>
        </div>
        <div class="w-auto p-2">
          <div class="hidden xl:flex flex-wrap items-center -m-3">
            <div class="w-auto p-3">
              <a class="block max-w-max text-coolGray-500 hover:text-coolGray-600" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7L12 11.88L4 7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V9.28L11.48 13.85C11.632 13.9378 11.8045 13.984 11.98 13.984C12.1555 13.984 12.328 13.9378 12.48 13.85L20 9.28V17Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-3">
              <a class="block max-w-max text-coolGray-500 hover:text-coolGray-600" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="currentColor"></path>
                </svg>
              </a>
            </div>
            <div class="w-auto p-3">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-auto p-2">
                  <div class="flex flex-wrap -m-2">
                    <div class="w-auto p-2">
                      <img src="flex-ui-assets/images/dashboard/navigations/avatar.png" alt="">
                    </div>
                    <div class="w-auto p-2">
                      <h2 class="text-sm font-semibold text-coolGray-800">John Doe</h2>
                      <p class="text-sm font-medium text-coolGray-500">johndoe@flex.co</p>
                    </div>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <a class="block max-w-max text-coolGray-500 hover:text-coolGray-600" href="#">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M17 9.17C16.8126 8.98375 16.5592 8.87921 16.295 8.87921C16.0308 8.87921 15.7774 8.98375 15.59 9.17L12 12.71L8.46001 9.17C8.27265 8.98375 8.0192 8.87921 7.75501 8.87921C7.49082 8.87921 7.23737 8.98375 7.05001 9.17C6.95628 9.26297 6.88189 9.37357 6.83112 9.49543C6.78035 9.61729 6.75421 9.74799 6.75421 9.88C6.75421 10.012 6.78035 10.1427 6.83112 10.2646C6.88189 10.3864 6.95628 10.497 7.05001 10.59L11.29 14.83C11.383 14.9237 11.4936 14.9981 11.6154 15.0489C11.7373 15.0997 11.868 15.1258 12 15.1258C12.132 15.1258 12.2627 15.0997 12.3846 15.0489C12.5064 14.9981 12.617 14.9237 12.71 14.83L17 10.59C17.0937 10.497 17.1681 10.3864 17.2189 10.2646C17.2697 10.1427 17.2958 10.012 17.2958 9.88C17.2958 9.74799 17.2697 9.61729 17.2189 9.49543C17.1681 9.37357 17.0937 9.26297 17 9.17Z" fill="currentColor"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <button class="navbar-burger self-center ml-auto block xl:hidden">
            <svg width="35" height="35" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect class="text-coolGray-100" width="32" height="32" rx="6" fill="currentColor"></rect>
              <path class="text-coolGray-400" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="navbar-menu z-50 fixed top-0 hidden flex xl:hidden flex-col justify-between bg-white border-r border-coolGray-100 max-w-xs w-9/12 h-full overflow-y-auto">
      <div class="navbar-backdrop fixed xl:hidden inset-0 bg-coolGray-900 opacity-60"></div>
      <div class="relative bg-white flex-1">
        <div class="fixed -left-4 p-8 pl-12 max-w-xs w-9/12 z-50 bg-white">
          <a class="block max-w-max" href="#">
            <img src="flex-ui-assets/logos/dashboard/flex-ui-black-green.svg" alt="">
          </a>
        </div>
        <div class="mt-28">
          <p class="px-8 mb-2 text-xs font-medium text-coolGray-500 uppercase">Main menu</p>
          <ul class="px-4 mb-8">
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6ZM7 12C6.73478 12 6.48043 12.1054 6.29289 12.2929C6.10536 12.4804 6 12.7348 6 13V17C6 17.2652 6.10536 17.5196 6.29289 17.7071C6.48043 17.8946 6.73478 18 7 18C7.26522 18 7.51957 17.8946 7.70711 17.7071C7.89464 17.5196 8 17.2652 8 17V13C8 12.7348 7.89464 12.4804 7.70711 12.2929C7.51957 12.1054 7.26522 12 7 12ZM17 10C16.7348 10 16.4804 10.1054 16.2929 10.2929C16.1054 10.4804 16 10.7348 16 11V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V11C18 10.7348 17.8946 10.4804 17.7071 10.2929C17.5196 10.1054 17.2652 10 17 10ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Dashboard</p>
                </div>
                <svg width="12" height="8" viewbox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11 1.17C10.8126 0.983753 10.5592 0.879211 10.295 0.879211C10.0308 0.879211 9.77737 0.983753 9.59001 1.17L6.00001 4.71L2.46001 1.17C2.27265 0.983753 2.0192 0.879211 1.75501 0.879211C1.49082 0.879211 1.23737 0.983753 1.05001 1.17C0.956281 1.26297 0.881887 1.37357 0.831118 1.49543C0.780349 1.61729 0.754211 1.74799 0.754211 1.88C0.754211 2.01202 0.780349 2.14272 0.831118 2.26458C0.881887 2.38644 0.956281 2.49704 1.05001 2.59L5.29001 6.83C5.38297 6.92373 5.49357 6.99813 5.61543 7.04889C5.73729 7.09966 5.868 7.1258 6.00001 7.1258C6.13202 7.1258 6.26273 7.09966 6.38459 7.04889C6.50645 6.99813 6.61705 6.92373 6.71001 6.83L11 2.59C11.0937 2.49704 11.1681 2.38644 11.2189 2.26458C11.2697 2.14272 11.2958 2.01202 11.2958 1.88C11.2958 1.74799 11.2697 1.61729 11.2189 1.49543C11.1681 1.37357 11.0937 1.26297 11 1.17Z" fill="#8896AB"></path>
                </svg>
              </a>
            </li>
            <li>
              <a class="p-3 pl-11 flex items-center justify-between" href="#">
                <div class="flex items-center">
                  <p class="text-coolGray-800 font-medium text-base">Overview</p>
                </div>
              </a>
            </li>
            <li>
              <a class="p-3 pl-11 flex items-center justify-between" href="#">
                <div class="flex items-center">
                  <p class="text-coolGray-300 font-medium text-base">Notifications</p>
                </div>
              </a>
            </li>
            <li>
              <a class="p-3 pl-11 flex items-center justify-between" href="#">
                <div class="flex items-center">
                  <p class="text-coolGray-300 font-medium text-base">Budget</p>
                </div>
              </a>
            </li>
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.50003 8.86L11.5 14.06C11.6521 14.1478 11.8245 14.194 12 14.194C12.1756 14.194 12.348 14.1478 12.5 14.06L21.5 8.86C21.6512 8.77275 21.7768 8.64746 21.8646 8.49659C21.9523 8.34572 21.999 8.17452 22 8C22.0007 7.82379 21.9549 7.65053 21.8671 7.49775C21.7792 7.34497 21.6526 7.21811 21.5 7.13L12.5 1.94C12.348 1.85224 12.1756 1.80603 12 1.80603C11.8245 1.80603 11.6521 1.85224 11.5 1.94L2.50003 7.13C2.34743 7.21811 2.22081 7.34497 2.13301 7.49775C2.04521 7.65053 1.99933 7.82379 2.00003 8C2.00108 8.17452 2.04779 8.34572 2.13551 8.49659C2.22322 8.64746 2.34889 8.77275 2.50003 8.86ZM12 4L19 8L12 12L5.00003 8L12 4ZM20.5 11.17L12 16L3.50003 11.13C3.3859 11.0639 3.25981 11.021 3.12903 11.0038C2.99825 10.9866 2.86537 10.9955 2.73803 11.0299C2.61069 11.0643 2.49141 11.1235 2.38706 11.2042C2.28271 11.2849 2.19536 11.3854 2.13003 11.5C1.99966 11.7296 1.96539 12.0015 2.03471 12.2563C2.10403 12.5111 2.2713 12.7281 2.50003 12.86L11.5 18.06C11.6521 18.1478 11.8245 18.194 12 18.194C12.1756 18.194 12.348 18.1478 12.5 18.06L21.5 12.86C21.7288 12.7281 21.896 12.5111 21.9654 12.2563C22.0347 12.0015 22.0004 11.7296 21.87 11.5C21.8047 11.3854 21.7173 11.2849 21.613 11.2042C21.5087 11.1235 21.3894 11.0643 21.262 11.0299C21.1347 10.9955 21.0018 10.9866 20.871 11.0038C20.7402 11.021 20.6142 11.0639 20.5 11.13V11.17ZM20.5 15.17L12 20L3.50003 15.13C3.3859 15.0639 3.25981 15.021 3.12903 15.0038C2.99825 14.9866 2.86537 14.9955 2.73803 15.0299C2.61069 15.0643 2.49141 15.1235 2.38706 15.2042C2.28271 15.2849 2.19536 15.3854 2.13003 15.5C1.99966 15.7296 1.96539 16.0015 2.03471 16.2563C2.10403 16.5111 2.2713 16.7281 2.50003 16.86L11.5 22.06C11.6521 22.1478 11.8245 22.194 12 22.194C12.1756 22.194 12.348 22.1478 12.5 22.06L21.5 16.86C21.7288 16.7281 21.896 16.5111 21.9654 16.2563C22.0347 16.0015 22.0004 15.7296 21.87 15.5C21.8047 15.3854 21.7173 15.2849 21.613 15.2042C21.5087 15.1235 21.3894 15.0643 21.262 15.0299C21.1347 14.9955 21.0018 14.9866 20.871 15.0038C20.7402 15.021 20.6142 15.0639 20.5 15.13V15.17Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Projects</p>
                </div>
              </a>
            </li>
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.21 14.75C10.303 14.8437 10.4136 14.9181 10.5354 14.9689C10.6573 15.0197 10.788 15.0458 10.92 15.0458C11.052 15.0458 11.1827 15.0197 11.3046 14.9689C11.4264 14.9181 11.537 14.8437 11.63 14.75L15.71 10.67C15.8983 10.4817 16.0041 10.2263 16.0041 9.96C16.0041 9.6937 15.8983 9.4383 15.71 9.25C15.5217 9.0617 15.2663 8.95591 15 8.95591C14.7337 8.95591 14.4783 9.0617 14.29 9.25L10.92 12.63L9.71 11.41C9.5217 11.2217 9.2663 11.1159 9 11.1159C8.7337 11.1159 8.4783 11.2217 8.29 11.41C8.1017 11.5983 7.99591 11.8537 7.99591 12.12C7.99591 12.3863 8.1017 12.6417 8.29 12.83L10.21 14.75ZM21 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H21C21.2652 22 21.5196 21.8946 21.7071 21.7071C21.8946 21.5196 22 21.2652 22 21V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2ZM20 20H4V4H20V20Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Tasks</p>
                </div>
              </a>
            </li>
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19 5.49999H12.72L12.4 4.49999C12.1926 3.91322 11.8077 3.4055 11.2989 3.04715C10.7901 2.68881 10.1824 2.49759 9.56 2.49999H5C4.20435 2.49999 3.44129 2.81606 2.87868 3.37867C2.31607 3.94128 2 4.70434 2 5.49999V18.5C2 19.2956 2.31607 20.0587 2.87868 20.6213C3.44129 21.1839 4.20435 21.5 5 21.5H19C19.7956 21.5 20.5587 21.1839 21.1213 20.6213C21.6839 20.0587 22 19.2956 22 18.5V8.49999C22 7.70434 21.6839 6.94128 21.1213 6.37867C20.5587 5.81606 19.7956 5.49999 19 5.49999ZM20 18.5C20 18.7652 19.8946 19.0196 19.7071 19.2071C19.5196 19.3946 19.2652 19.5 19 19.5H5C4.73478 19.5 4.48043 19.3946 4.29289 19.2071C4.10536 19.0196 4 18.7652 4 18.5V5.49999C4 5.23478 4.10536 4.98042 4.29289 4.79289C4.48043 4.60535 4.73478 4.49999 5 4.49999H9.56C9.76964 4.49945 9.97416 4.56481 10.1446 4.68683C10.3151 4.80886 10.4429 4.98137 10.51 5.17999L11.05 6.81999C11.1171 7.01861 11.2449 7.19113 11.4154 7.31315C11.5858 7.43517 11.7904 7.50053 12 7.49999H19C19.2652 7.49999 19.5196 7.60535 19.7071 7.79289C19.8946 7.98042 20 8.23478 20 8.49999V18.5Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Products</p>
                </div>
              </a>
            </li>
          </ul>
          <p class="px-8 mb-2 text-xs font-medium text-coolGray-500 uppercase">Workspace</p>
          <ul class="px-4 pb-8">
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.3 12.22C12.8336 11.7581 13.2616 11.1869 13.5549 10.545C13.8482 9.90316 14 9.20571 14 8.5C14 7.17392 13.4732 5.90215 12.5355 4.96447C11.5979 4.02678 10.3261 3.5 9 3.5C7.67392 3.5 6.40215 4.02678 5.46447 4.96447C4.52678 5.90215 4 7.17392 4 8.5C3.99999 9.20571 4.1518 9.90316 4.44513 10.545C4.73845 11.1869 5.16642 11.7581 5.7 12.22C4.30014 12.8539 3.11247 13.8775 2.27898 15.1685C1.4455 16.4596 1.00147 17.9633 1 19.5C1 19.7652 1.10536 20.0196 1.29289 20.2071C1.48043 20.3946 1.73478 20.5 2 20.5C2.26522 20.5 2.51957 20.3946 2.70711 20.2071C2.89464 20.0196 3 19.7652 3 19.5C3 17.9087 3.63214 16.3826 4.75736 15.2574C5.88258 14.1321 7.4087 13.5 9 13.5C10.5913 13.5 12.1174 14.1321 13.2426 15.2574C14.3679 16.3826 15 17.9087 15 19.5C15 19.7652 15.1054 20.0196 15.2929 20.2071C15.4804 20.3946 15.7348 20.5 16 20.5C16.2652 20.5 16.5196 20.3946 16.7071 20.2071C16.8946 20.0196 17 19.7652 17 19.5C16.9985 17.9633 16.5545 16.4596 15.721 15.1685C14.8875 13.8775 13.6999 12.8539 12.3 12.22ZM9 11.5C8.40666 11.5 7.82664 11.3241 7.33329 10.9944C6.83994 10.6648 6.45542 10.1962 6.22836 9.64805C6.0013 9.09987 5.94189 8.49667 6.05764 7.91473C6.1734 7.33279 6.45912 6.79824 6.87868 6.37868C7.29824 5.95912 7.83279 5.6734 8.41473 5.55764C8.99667 5.44189 9.59987 5.5013 10.1481 5.72836C10.6962 5.95542 11.1648 6.33994 11.4944 6.83329C11.8241 7.32664 12 7.90666 12 8.5C12 9.29565 11.6839 10.0587 11.1213 10.6213C10.5587 11.1839 9.79565 11.5 9 11.5ZM18.74 11.82C19.38 11.0993 19.798 10.2091 19.9438 9.25634C20.0896 8.30362 19.9569 7.32907 19.5618 6.45C19.1666 5.57093 18.5258 4.8248 17.7165 4.30142C16.9071 3.77805 15.9638 3.49974 15 3.5C14.7348 3.5 14.4804 3.60536 14.2929 3.79289C14.1054 3.98043 14 4.23478 14 4.5C14 4.76522 14.1054 5.01957 14.2929 5.20711C14.4804 5.39464 14.7348 5.5 15 5.5C15.7956 5.5 16.5587 5.81607 17.1213 6.37868C17.6839 6.94129 18 7.70435 18 8.5C17.9986 9.02524 17.8593 9.5409 17.5961 9.99542C17.3328 10.4499 16.9549 10.8274 16.5 11.09C16.3517 11.1755 16.2279 11.2977 16.1404 11.4447C16.0528 11.5918 16.0045 11.7589 16 11.93C15.9958 12.0998 16.0349 12.2678 16.1137 12.4183C16.1924 12.5687 16.3081 12.6967 16.45 12.79L16.84 13.05L16.97 13.12C18.1754 13.6917 19.1923 14.596 19.901 15.7263C20.6096 16.8566 20.9805 18.1659 20.97 19.5C20.97 19.7652 21.0754 20.0196 21.2629 20.2071C21.4504 20.3946 21.7048 20.5 21.97 20.5C22.2352 20.5 22.4896 20.3946 22.6771 20.2071C22.8646 20.0196 22.97 19.7652 22.97 19.5C22.9782 17.9654 22.5938 16.4543 21.8535 15.1101C21.1131 13.7659 20.0413 12.6333 18.74 11.82Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Community</p>
                </div>
              </a>
            </li>
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 19C12.1978 19 12.3911 18.9414 12.5556 18.8315C12.72 18.7216 12.8482 18.5654 12.9239 18.3827C12.9996 18.2 13.0194 17.9989 12.9808 17.8049C12.9422 17.6109 12.847 17.4327 12.7071 17.2929C12.5673 17.153 12.3891 17.0578 12.1951 17.0192C12.0011 16.9806 11.8 17.0004 11.6173 17.0761C11.4346 17.1518 11.2784 17.28 11.1685 17.4444C11.0586 17.6089 11 17.8022 11 18C11 18.2652 11.1054 18.5196 11.2929 18.7071C11.4804 18.8946 11.7348 19 12 19ZM17 19C17.1978 19 17.3911 18.9414 17.5556 18.8315C17.72 18.7216 17.8482 18.5654 17.9239 18.3827C17.9996 18.2 18.0194 17.9989 17.9808 17.8049C17.9422 17.6109 17.847 17.4327 17.7071 17.2929C17.5673 17.153 17.3891 17.0578 17.1951 17.0192C17.0011 16.9806 16.8 17.0004 16.6173 17.0761C16.4346 17.1518 16.2784 17.28 16.1685 17.4444C16.0586 17.6089 16 17.8022 16 18C16 18.2652 16.1054 18.5196 16.2929 18.7071C16.4804 18.8946 16.7348 19 17 19ZM17 15C17.1978 15 17.3911 14.9414 17.5556 14.8315C17.72 14.7216 17.8482 14.5654 17.9239 14.3827C17.9996 14.2 18.0194 13.9989 17.9808 13.8049C17.9422 13.6109 17.847 13.4327 17.7071 13.2929C17.5673 13.153 17.3891 13.0578 17.1951 13.0192C17.0011 12.9806 16.8 13.0004 16.6173 13.0761C16.4346 13.1518 16.2784 13.28 16.1685 13.4444C16.0586 13.6089 16 13.8022 16 14C16 14.2652 16.1054 14.5196 16.2929 14.7071C16.4804 14.8946 16.7348 15 17 15ZM12 15C12.1978 15 12.3911 14.9414 12.5556 14.8315C12.72 14.7216 12.8482 14.5654 12.9239 14.3827C12.9996 14.2 13.0194 13.9989 12.9808 13.8049C12.9422 13.6109 12.847 13.4327 12.7071 13.2929C12.5673 13.153 12.3891 13.0578 12.1951 13.0192C12.0011 12.9806 11.8 13.0004 11.6173 13.0761C11.4346 13.1518 11.2784 13.28 11.1685 13.4444C11.0586 13.6089 11 13.8022 11 14C11 14.2652 11.1054 14.5196 11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15ZM19 3H18V2C18 1.73478 17.8946 1.48043 17.7071 1.29289C17.5196 1.10536 17.2652 1 17 1C16.7348 1 16.4804 1.10536 16.2929 1.29289C16.1054 1.48043 16 1.73478 16 2V3H8V2C8 1.73478 7.89464 1.48043 7.70711 1.29289C7.51957 1.10536 7.26522 1 7 1C6.73478 1 6.48043 1.10536 6.29289 1.29289C6.10536 1.48043 6 1.73478 6 2V3H5C4.20435 3 3.44129 3.31607 2.87868 3.87868C2.31607 4.44129 2 5.20435 2 6V20C2 20.7956 2.31607 21.5587 2.87868 22.1213C3.44129 22.6839 4.20435 23 5 23H19C19.7956 23 20.5587 22.6839 21.1213 22.1213C21.6839 21.5587 22 20.7956 22 20V6C22 5.20435 21.6839 4.44129 21.1213 3.87868C20.5587 3.31607 19.7956 3 19 3ZM20 20C20 20.2652 19.8946 20.5196 19.7071 20.7071C19.5196 20.8946 19.2652 21 19 21H5C4.73478 21 4.48043 20.8946 4.29289 20.7071C4.10536 20.5196 4 20.2652 4 20V11H20V20ZM20 9H4V6C4 5.73478 4.10536 5.48043 4.29289 5.29289C4.48043 5.10536 4.73478 5 5 5H6V6C6 6.26522 6.10536 6.51957 6.29289 6.70711C6.48043 6.89464 6.73478 7 7 7C7.26522 7 7.51957 6.89464 7.70711 6.70711C7.89464 6.51957 8 6.26522 8 6V5H16V6C16 6.26522 16.1054 6.51957 16.2929 6.70711C16.4804 6.89464 16.7348 7 17 7C17.2652 7 17.5196 6.89464 17.7071 6.70711C17.8946 6.51957 18 6.26522 18 6V5H19C19.2652 5 19.5196 5.10536 19.7071 5.29289C19.8946 5.48043 20 5.73478 20 6V9ZM7 15C7.19778 15 7.39112 14.9414 7.55557 14.8315C7.72002 14.7216 7.84819 14.5654 7.92388 14.3827C7.99957 14.2 8.01937 13.9989 7.98079 13.8049C7.9422 13.6109 7.84696 13.4327 7.70711 13.2929C7.56725 13.153 7.38907 13.0578 7.19509 13.0192C7.00111 12.9806 6.80004 13.0004 6.61732 13.0761C6.43459 13.1518 6.27841 13.28 6.16853 13.4444C6.05865 13.6089 6 13.8022 6 14C6 14.2652 6.10536 14.5196 6.29289 14.7071C6.48043 14.8946 6.73478 15 7 15ZM7 19C7.19778 19 7.39112 18.9414 7.55557 18.8315C7.72002 18.7216 7.84819 18.5654 7.92388 18.3827C7.99957 18.2 8.01937 17.9989 7.98079 17.8049C7.9422 17.6109 7.84696 17.4327 7.70711 17.2929C7.56725 17.153 7.38907 17.0578 7.19509 17.0192C7.00111 16.9806 6.80004 17.0004 6.61732 17.0761C6.43459 17.1518 6.27841 17.28 6.16853 17.4444C6.05865 17.6089 6 17.8022 6 18C6 18.2652 6.10536 18.5196 6.29289 18.7071C6.48043 18.8946 6.73478 19 7 19Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Calendar</p>
                </div>
              </a>
            </li>
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 8.94C19.9896 8.84813 19.9695 8.75763 19.94 8.67V8.58C19.8919 8.47718 19.8278 8.38267 19.75 8.3V8.3L13.75 2.3C13.6673 2.22222 13.5728 2.15808 13.47 2.11H13.38C13.2784 2.05174 13.1662 2.01434 13.05 2H7C6.20435 2 5.44129 2.31607 4.87868 2.87868C4.31607 3.44129 4 4.20435 4 5V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V9C20 9 20 9 20 8.94ZM14 5.41L16.59 8H15C14.7348 8 14.4804 7.89464 14.2929 7.70711C14.1054 7.51957 14 7.26522 14 7V5.41ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H12V7C12 7.79565 12.3161 8.55871 12.8787 9.12132C13.4413 9.68393 14.2044 10 15 10H18V19Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Pages</p>
                </div>
                <svg width="12" height="8" viewbox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11 1.17C10.8126 0.983753 10.5592 0.879211 10.295 0.879211C10.0308 0.879211 9.77737 0.983753 9.59001 1.17L6.00001 4.71L2.46001 1.17C2.27265 0.983753 2.0192 0.879211 1.75501 0.879211C1.49082 0.879211 1.23737 0.983753 1.05001 1.17C0.956281 1.26297 0.881887 1.37357 0.831118 1.49543C0.780349 1.61729 0.754211 1.74799 0.754211 1.88C0.754211 2.01202 0.780349 2.14272 0.831118 2.26458C0.881887 2.38644 0.956281 2.49704 1.05001 2.59L5.29001 6.83C5.38297 6.92373 5.49357 6.99813 5.61543 7.04889C5.73729 7.09966 5.868 7.1258 6.00001 7.1258C6.13202 7.1258 6.26273 7.09966 6.38459 7.04889C6.50645 6.99813 6.61705 6.92373 6.71001 6.83L11 2.59C11.0937 2.49704 11.1681 2.38644 11.2189 2.26458C11.2697 2.14272 11.2958 2.01202 11.2958 1.88C11.2958 1.74799 11.2697 1.61729 11.2189 1.49543C11.1681 1.37357 11.0937 1.26297 11 1.17Z" fill="#8896AB"></path>
                </svg>
              </a>
            </li>
            <li>
              <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                <div class="flex items-center">
                  <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 13H2C1.73478 13 1.48043 13.1054 1.29289 13.2929C1.10536 13.4804 1 13.7348 1 14V22C1 22.2652 1.10536 22.5196 1.29289 22.7071C1.48043 22.8946 1.73478 23 2 23H6C6.26522 23 6.51957 22.8946 6.70711 22.7071C6.89464 22.5196 7 22.2652 7 22V14C7 13.7348 6.89464 13.4804 6.70711 13.2929C6.51957 13.1054 6.26522 13 6 13ZM5 21H3V15H5V21ZM22 9H18C17.7348 9 17.4804 9.10536 17.2929 9.29289C17.1054 9.48043 17 9.73478 17 10V22C17 22.2652 17.1054 22.5196 17.2929 22.7071C17.4804 22.8946 17.7348 23 18 23H22C22.2652 23 22.5196 22.8946 22.7071 22.7071C22.8946 22.5196 23 22.2652 23 22V10C23 9.73478 22.8946 9.48043 22.7071 9.29289C22.5196 9.10536 22.2652 9 22 9ZM21 21H19V11H21V21ZM14 1H10C9.73478 1 9.48043 1.10536 9.29289 1.29289C9.10536 1.48043 9 1.73478 9 2V22C9 22.2652 9.10536 22.5196 9.29289 22.7071C9.48043 22.8946 9.73478 23 10 23H14C14.2652 23 14.5196 22.8946 14.7071 22.7071C14.8946 22.5196 15 22.2652 15 22V2C15 1.73478 14.8946 1.48043 14.7071 1.29289C14.5196 1.10536 14.2652 1 14 1ZM13 21H11V3H13V21Z" fill="currentColor"></path>
                  </svg>
                  <p class="text-coolGray-800 font-medium text-base">Analytics</p>
                </div>
              </a>
            </li>
          </ul>
          <div>
            <p class="px-8 mb-2 text-xs font-medium text-coolGray-500 uppercase">Settings</p>
            <ul class="px-4 pb-28">
              <li>
                <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                  <div class="flex items-center">
                    <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M14.81 12.28C15.443 11.6002 15.7996 10.7088 15.81 9.78C15.81 8.77748 15.4118 7.81602 14.7029 7.10714C13.994 6.39825 13.0325 6 12.03 6C11.0275 6 10.066 6.39825 9.35714 7.10714C8.64825 7.81602 8.25 8.77748 8.25 9.78C8.26044 10.7088 8.61702 11.6002 9.25 12.28C8.36865 12.7189 7.61022 13.3699 7.04292 14.1746C6.47561 14.9793 6.11723 15.9124 6 16.89C5.97083 17.1552 6.0482 17.4212 6.21511 17.6293C6.38202 17.8375 6.62478 17.9708 6.89 18C7.15522 18.0292 7.42116 17.9518 7.62932 17.7849C7.83749 17.618 7.97083 17.3752 8 17.11C8.11933 16.1411 8.58885 15.2494 9.32009 14.6027C10.0513 13.956 10.9938 13.599 11.97 13.599C12.9462 13.599 13.8887 13.956 14.6199 14.6027C15.3512 15.2494 15.8207 16.1411 15.94 17.11C15.9678 17.3664 16.0936 17.6022 16.2911 17.768C16.4887 17.9339 16.7426 18.017 17 18H17.11C17.3721 17.9698 17.6117 17.8373 17.7766 17.6313C17.9414 17.4252 18.0181 17.1624 17.99 16.9C17.8815 15.9276 17.5344 14.997 16.9796 14.191C16.4248 13.3851 15.6796 12.7286 14.81 12.28ZM12 11.56C11.6479 11.56 11.3038 11.4556 11.0111 11.26C10.7184 11.0644 10.4902 10.7864 10.3555 10.4612C10.2208 10.1359 10.1855 9.77803 10.2542 9.43274C10.3229 9.08745 10.4924 8.77029 10.7414 8.52135C10.9903 8.27241 11.3075 8.10288 11.6527 8.0342C11.998 7.96552 12.3559 8.00077 12.6812 8.13549C13.0064 8.27022 13.2844 8.49837 13.48 8.79109C13.6756 9.0838 13.78 9.42795 13.78 9.78C13.78 10.2521 13.5925 10.7048 13.2586 11.0387C12.9248 11.3725 12.4721 11.56 12 11.56ZM19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19Z" fill="currentColor"></path>
                    </svg>
                    <p class="text-coolGray-800 font-medium text-base">Accounts</p>
                  </div>
                </a>
              </li>
              <li>
                <a class="p-3 py-4 flex items-center justify-between text-coolGray-500 hover:text-green-500 hover:bg-coolGray-50 rounded-md" href="#">
                  <div class="flex items-center">
                    <svg class="mr-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M21.32 9.55L19.43 8.92L20.32 7.14C20.4102 6.95369 20.4404 6.74397 20.4064 6.53978C20.3723 6.33558 20.2758 6.14699 20.13 6L18 3.87C17.8522 3.72209 17.6618 3.62421 17.4555 3.59013C17.2493 3.55605 17.0375 3.58748 16.85 3.68L15.07 4.57L14.44 2.68C14.3735 2.483 14.2472 2.31163 14.0787 2.18975C13.9102 2.06787 13.7079 2.00155 13.5 2H10.5C10.2904 1.99946 10.0858 2.06482 9.91537 2.18685C9.7449 2.30887 9.61709 2.48138 9.55 2.68L8.92 4.57L7.14 3.68C6.95369 3.58978 6.74397 3.55961 6.53978 3.59364C6.33558 3.62767 6.14699 3.72423 6 3.87L3.87 6C3.72209 6.14777 3.62421 6.33818 3.59013 6.54446C3.55605 6.75074 3.58748 6.96251 3.68 7.15L4.57 8.93L2.68 9.56C2.483 9.62654 2.31163 9.75283 2.18975 9.92131C2.06787 10.0898 2.00155 10.2921 2 10.5V13.5C1.99946 13.7096 2.06482 13.9142 2.18685 14.0846C2.30887 14.2551 2.48138 14.3829 2.68 14.45L4.57 15.08L3.68 16.86C3.58978 17.0463 3.55961 17.256 3.59364 17.4602C3.62767 17.6644 3.72423 17.853 3.87 18L6 20.13C6.14777 20.2779 6.33818 20.3758 6.54446 20.4099C6.75074 20.444 6.96251 20.4125 7.15 20.32L8.93 19.43L9.56 21.32C9.62709 21.5186 9.7549 21.6911 9.92537 21.8132C10.0958 21.9352 10.3004 22.0005 10.51 22H13.51C13.7196 22.0005 13.9242 21.9352 14.0946 21.8132C14.2651 21.6911 14.3929 21.5186 14.46 21.32L15.09 19.43L16.87 20.32C17.0551 20.4079 17.2628 20.4369 17.4649 20.4029C17.667 20.3689 17.8538 20.2737 18 20.13L20.13 18C20.2779 17.8522 20.3758 17.6618 20.4099 17.4555C20.444 17.2493 20.4125 17.0375 20.32 16.85L19.43 15.07L21.32 14.44C21.517 14.3735 21.6884 14.2472 21.8103 14.0787C21.9321 13.9102 21.9985 13.7079 22 13.5V10.5C22.0005 10.2904 21.9352 10.0858 21.8132 9.91537C21.6911 9.7449 21.5186 9.61709 21.32 9.55ZM20 12.78L18.8 13.18C18.5241 13.2695 18.2709 13.418 18.0581 13.6151C17.8452 13.8122 17.6778 14.0533 17.5675 14.3216C17.4571 14.5899 17.4064 14.879 17.419 15.1688C17.4315 15.4586 17.5069 15.7422 17.64 16L18.21 17.14L17.11 18.24L16 17.64C15.7436 17.5122 15.4627 17.4411 15.1763 17.4313C14.89 17.4215 14.6049 17.4734 14.3403 17.5834C14.0758 17.6934 13.8379 17.8589 13.6429 18.0688C13.4479 18.2787 13.3003 18.5281 13.21 18.8L12.81 20H11.22L10.82 18.8C10.7305 18.5241 10.582 18.2709 10.3849 18.0581C10.1878 17.8452 9.94671 17.6778 9.67842 17.5675C9.41014 17.4571 9.12105 17.4064 8.83123 17.419C8.5414 17.4315 8.25777 17.5069 8 17.64L6.86 18.21L5.76 17.11L6.36 16C6.4931 15.7422 6.56852 15.4586 6.58105 15.1688C6.59358 14.879 6.5429 14.5899 6.43254 14.3216C6.32218 14.0533 6.15478 13.8122 5.94195 13.6151C5.72912 13.418 5.47595 13.2695 5.2 13.18L4 12.78V11.22L5.2 10.82C5.47595 10.7305 5.72912 10.582 5.94195 10.3849C6.15478 10.1878 6.32218 9.94671 6.43254 9.67842C6.5429 9.41014 6.59358 9.12105 6.58105 8.83123C6.56852 8.5414 6.4931 8.25777 6.36 8L5.79 6.89L6.89 5.79L8 6.36C8.25777 6.4931 8.5414 6.56852 8.83123 6.58105C9.12105 6.59358 9.41014 6.5429 9.67842 6.43254C9.94671 6.32218 10.1878 6.15478 10.3849 5.94195C10.582 5.72912 10.7305 5.47595 10.82 5.2L11.22 4H12.78L13.18 5.2C13.2695 5.47595 13.418 5.72912 13.6151 5.94195C13.8122 6.15478 14.0533 6.32218 14.3216 6.43254C14.5899 6.5429 14.879 6.59358 15.1688 6.58105C15.4586 6.56852 15.7422 6.4931 16 6.36L17.14 5.79L18.24 6.89L17.64 8C17.5122 8.25645 17.4411 8.53735 17.4313 8.82369C17.4215 9.11003 17.4734 9.39513 17.5834 9.65969C17.6934 9.92424 17.8589 10.1621 18.0688 10.3571C18.2787 10.5521 18.5281 10.6997 18.8 10.79L20 11.19V12.78ZM12 8C11.2089 8 10.4355 8.2346 9.77772 8.67413C9.11993 9.11365 8.60724 9.73836 8.30448 10.4693C8.00173 11.2002 7.92252 12.0044 8.07686 12.7804C8.2312 13.5563 8.61217 14.269 9.17158 14.8284C9.73099 15.3878 10.4437 15.7688 11.2196 15.9231C11.9956 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8864 14.8801 15.3259 14.2223C15.7654 13.5645 16 12.7911 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17158C14.0783 8.42143 13.0609 8 12 8ZM12 14C11.6044 14 11.2178 13.8827 10.8889 13.6629C10.56 13.4432 10.3036 13.1308 10.1522 12.7654C10.0009 12.3999 9.96126 11.9978 10.0384 11.6098C10.1156 11.2219 10.3061 10.8655 10.5858 10.5858C10.8655 10.3061 11.2219 10.1156 11.6098 10.0384C11.9978 9.96126 12.3999 10.0009 12.7654 10.1522C13.1308 10.3036 13.4432 10.56 13.6629 10.8889C13.8827 11.2178 14 11.6044 14 12C14 12.5304 13.7893 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 12 14Z" fill="currentColor"></path>
                    </svg>
                    <p class="text-coolGray-800 font-medium text-base">Settings</p>
                  </div>
                </a>
              </li>
            </ul>
            <div class="fixed bottom-0 -left-4 max-w-xs w-full flex flex-wrap items-center p-6 pl-10 justify-between bg-white">
              <div class="w-auto">
                <div class="flex flex-wrap -mx-2">
                  <div class="w-auto p-2">
                    <img src="flex-ui-assets/images/dashboard/navigations/avatar.png" alt="">
                  </div>
                  <div class="w-auto p-2">
                    <h2 class="text-sm font-semibold text-coolGray-800">John Doe</h2>
                    <p class="text-sm font-medium text-coolGray-500">johndoe@flex.co</p>
                  </div>
                </div>
              </div>
              <div class="w-auto">
                <a class="text-coolGray-500 hover:text-coolGray-600" href="#">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.29 8.71L18.59 11L9.00001 11C8.7348 11 8.48044 11.1054 8.29291 11.2929C8.10537 11.4804 8.00001 11.7348 8.00001 12C8.00001 12.2652 8.10537 12.5196 8.29291 12.7071C8.48044 12.8946 8.7348 13 9.00001 13L18.59 13L16.29 15.29C16.1963 15.383 16.1219 15.4936 16.0711 15.6154C16.0204 15.7373 15.9942 15.868 15.9942 16C15.9942 16.132 16.0204 16.2627 16.0711 16.3846C16.1219 16.5064 16.1963 16.617 16.29 16.71C16.383 16.8037 16.4936 16.8781 16.6154 16.9289C16.7373 16.9797 16.868 17.0058 17 17.0058C17.132 17.0058 17.2627 16.9797 17.3846 16.9289C17.5064 16.8781 17.617 16.8037 17.71 16.71L21.71 12.71C21.8011 12.6149 21.8724 12.5028 21.92 12.38C22.02 12.1365 22.02 11.8635 21.92 11.62C21.8724 11.4972 21.8011 11.3851 21.71 11.29L17.71 7.29C17.6168 7.19676 17.5061 7.1228 17.3843 7.07234C17.2624 7.02188 17.1319 6.99591 17 6.99591C16.8682 6.99591 16.7376 7.02188 16.6158 7.07234C16.4939 7.1228 16.3833 7.19676 16.29 7.29C16.1968 7.38324 16.1228 7.49393 16.0724 7.61575C16.0219 7.73757 15.9959 7.86814 15.9959 8C15.9959 8.13186 16.0219 8.26243 16.0724 8.38425C16.1228 8.50607 16.1968 8.61676 16.29 8.71ZM10 21C10 20.7348 9.89465 20.4804 9.70712 20.2929C9.51958 20.1054 9.26523 20 9.00001 20L5.00001 20C4.73479 20 4.48044 19.8946 4.2929 19.7071C4.10537 19.5196 4.00001 19.2652 4.00001 19L4.00001 5C4.00001 4.73478 4.10537 4.48043 4.2929 4.29289C4.48044 4.10536 4.73479 4 5.00001 4L9.00001 4C9.26523 4 9.51958 3.89464 9.70712 3.70711C9.89466 3.51957 10 3.26522 10 3C10 2.73478 9.89466 2.48043 9.70712 2.29289C9.51958 2.10536 9.26523 2 9.00001 2L5.00001 2C4.20436 2 3.4413 2.31607 2.87869 2.87868C2.31608 3.44129 2.00001 4.20435 2.00001 5L2.00001 19C2.00001 19.7956 2.31608 20.5587 2.87869 21.1213C3.4413 21.6839 4.20436 22 5.00001 22L9.00001 22C9.26523 22 9.51958 21.8946 9.70712 21.7071C9.89465 21.5196 10 21.2652 10 21Z" fill="currentColor"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <div class="py-1 text-center text-sm bg-white border-b border-gray-100">
    <p class="font-medium text-darkBlueGray-300 leading-10">
      <span>Hello, you are new here.</span>
      <span class="text-darkBlueGray-900">Get 20% off card!</span>
    </p>
  </div>
  <div class="px-6 lg:px-12 py-6">
    <nav class="flex justify-between">
      <div class="flex w-full items-center">
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        </a>
        <ul class="hidden xl:flex px-4 ml-20 2xl:ml-40 mr-auto">
          <li class="mr-16"><a class="font-medium hover:text-darkBlueGray-400" href="#">Stories</a></li>
          <li class="relative mr-16">
            <a class="flex items-center font-medium hover:text-darkBlueGray-400" href="#">
              <span class="mr-4">Products</span>
              <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
              </svg>
            </a>
            <div class="product-menu hidden absolute top-0 left-0 mt-24 -ml-64 pl-24 pr-16 pt-16 pb-24 bg-white rounded-lg z-50">
              <div class="absolute top-0 left-0 ml-72 w-7 h-7 bg-white transform rotate-45 -translate-y-1/2"></div>
              <div class="flex flex-wrap min-w-max -mx-4 lg:-mx-10">
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 lg:px-10">
                  <div>
                    <h3 class="mb-4 text-xl font-heading font-medium">Smartphone</h3>
                    <ul class="w-full">
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">View all</a></li>
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Premium&nbsp;Phones</a></li>
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Basic</a></li>
                      <li><a class="text-gray-400 hover:text-gray-500" href="#">Sale</a></li>
                    </ul>
                  </div>
                  <div class="w-40 mt-5 mb-7 border-b border-gray-100"></div>
                  <div class="w-full">
                    <h3 class="mb-4 text-xl font-heading font-medium">Tablet</h3>
                    <ul class="w-full">
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">View all</a></li>
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Premium&nbsp;Tablets</a></li>
                      <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">For&nbsp;Designers</a></li>
                      <li><a class="text-gray-400 hover:text-gray-500" href="#">Sale</a></li>
                    </ul>
                  </div>
                  <div class="w-40 mt-5 border-b border-gray-100"></div>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 lg:px-10">
                  <h3 class="mb-4 text-xl font-heading font-medium">Brand</h3>
                  <ul>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Apple iPhone</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Blackberry</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Google</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Huawei</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Nokia</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Oppo</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Samsung</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Sony</a></li>
                    <li><a class="text-gray-400 hover:text-gray-500" href="#">Xiaomi</a></li>
                  </ul>
                  <div class="w-40 mt-5 mb-7 border-b border-gray-100"></div>
                  <h3 class="mb-4 text-xl font-heading font-medium">System</h3>
                  <ul>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">iOS</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Android</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">View all</a></li>
                  </ul>
                  <div class="w-40 mt-5 border-b border-gray-100"></div>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 lg:px-10">
                  <h3 class="mb-4 text-xl font-heading font-medium">Accesories</h3>
                  <ul>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">View all</a></li>
                    <li><a class="text-gray-400 hover:text-gray-500" href="#">Watches</a></li>
                  </ul>
                  <div class="w-40 mt-5 mb-7 border-b border-gray-100"></div>
                  <h3 class="mb-4 text-xl font-heading font-medium">Computers</h3>
                  <ul>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Apple iMac</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Memory</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">PC</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Graphic Cards</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Monitors</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Hard Disk Drivers</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Cables</a></li>
                    <li class="mb-4"><a class="text-gray-400 hover:text-gray-500" href="#">Keyboards</a></li>
                    <li><a class="text-gray-400 hover:text-gray-500" href="#">Printers</a></li>
                  </ul>
                  <div class="w-40 mt-5 border-b border-gray-100"></div>
                </div>
                <div class="w-full md:w-1/2 lg:w-1/4 px-4 lg:px-10">
                  <div class="relative flex items-end h-96 w-full rounded-lg bg-cover bg-no-repeat" style="background-image: url('uinel-assets/images/ecommerce-navigations/placehodler-right-banner.png');">
                    <div class="mx-2 mb-5 px-2 py-4 bg-white rounded-lg">
                      <h4 class="text-xl font-heading font-medium leading-tight">Connected home</h4>
                    </div>
                  </div>
                  <div class="w-40 my-8 border-b border-gray-100"></div>
                  <a class="block py-5 px-2 font-heading font-medium tracking-tighter text-xl text-white text-center bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 hover:bg-blue-600 rounded-xl" href="#">New brands</a>
                </div>
              </div>
            </div>
          </li>
          <li><a class="font-medium hover:text-darkBlueGray-400" href="#">Outlet</a></li>
        </ul>
        <div class="relative hidden xl:block">
          <img class="absolute top-1/2 transform -translate-y-2/4 pl-6 mt-px" src="uinel-assets/elements/navigations/search-gray-icon.svg" alt="">
          <input class="rounded-4xl py-3 pl-12 pr-5 text-gray-300 font-heading font-medium text-base bg-blue-50 border-2 border-blueGray-100 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 outline-none" style="width: 180px;">
        </div>
        <div class="hidden md:block flex-shrink-0 w-px h-12 bg-gray-100 ml-12 mr-12"></div>
        <div class="hidden xl:flex items-center">
          <a class="inline-block mr-10 text-gray-400 hover:text-gray-500" href="#">
            <svg width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.4998 20.2059L2.70115 10.925C1.92859 10.1441 1.41864 9.13717 1.24355 8.04689C1.06847 6.95661 1.23713 5.83827 1.72563 4.8503V4.8503C2.09464 4.10439 2.63366 3.45781 3.29828 2.96383C3.9629 2.46985 4.73408 2.14261 5.5483 2.00908C6.36252 1.87555 7.19647 1.93955 7.98144 2.1958C8.7664 2.45205 9.47991 2.89322 10.0632 3.48296L11.4998 4.93554L12.9364 3.48296C13.5197 2.89322 14.2332 2.45205 15.0182 2.1958C15.8031 1.93955 16.6371 1.87555 17.4513 2.00908C18.2655 2.14261 19.0367 2.46985 19.7013 2.96383C20.3659 3.45781 20.905 4.10439 21.274 4.8503V4.8503C21.7625 5.83827 21.9311 6.95661 21.756 8.04689C21.581 9.13717 21.071 10.1441 20.2984 10.925L11.4998 20.2059Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="relative inline-block text-gray-400 hover:text-gray-500" href="#">
            <div class="absolute bottom-0 right-0 flex items-center justify-center -mb-4 -mr-4 w-6 h-6 text-sm text-white bg-blue-500 rounded-full">3</div>
            <svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72414H2.50427C1.99709 8.72414 1.58594 9.12657 1.58594 9.62299V21.308C1.58594 21.8045 1.99709 22.2069 2.50427 22.2069H18.1159C18.6231 22.2069 19.0342 21.8045 19.0342 21.308V9.62299C19.0342 9.12657 18.6231 8.72414 18.1159 8.72414Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34483V4.9569C6.34473 3.85259 6.76252 2.79352 7.5062 2.01265C8.24988 1.23179 9.25852 0.793106 10.3102 0.793106C11.362 0.793106 12.3706 1.23179 13.1143 2.01265C13.858 2.79352 14.2758 3.85259 14.2758 4.9569V6.34483" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <div class="flex-shrink-0 w-px h-12 bg-gray-100 ml-9 mr-10"></div>
          <a class="flex items-center text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">
            <span class="font-medium">Sona</span>
            <img class="ml-5" src="uinel-assets/elements/navigations/avatar-online.png" alt="">
            <svg class="ml-4" width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center xl:hidden">
        <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="currentColor"></rect><rect y="14" width="25" height="2" fill="currentColor"></rect></svg>
      </button>
    </nav>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col py-20 px-12 md:pl-18 md:pr-16 h-full w-full bg-darkBlueGray-700 overflow-y-auto">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="absolute top-5 p-6 right-5">
        <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="13.495" y1="0.494975" x2="1.49498" y2="12.495" stroke="#326BFF" stroke-width="1.4"></line><line x1="12.505" y1="12.495" x2="0.505026" y2="0.494976" stroke="#326BFF" stroke-width="1.4"></line></svg>
      </button>
      <span class="mb-6 text-xs text-darkBlueGray-300 font-medium uppercase tracking-wider">Discover Uistore</span>
      <ul class="mb-20">
        <li class="mb-2 md:mb-0"><a class="text-2xl md:text-9xl text-white hover:text-darkBlueGray-100 font-medium font-heading" href="#">Products</a></li>
        <li class="mb-2 md:mb-0"><a class="text-2xl md:text-9xl text-white hover:text-darkBlueGray-100 font-medium font-heading" href="#">New in</a></li>
        <li class="mb-2 md:mb-0"><a class="text-2xl md:text-9xl text-white hover:text-darkBlueGray-100 font-medium font-heading" href="#">Sale</a></li>
        <li class="mb-2 md:mb-0"><a class="text-2xl md:text-9xl text-white hover:text-darkBlueGray-100 font-medium font-heading" href="#">Stories</a></li>
        <li><a class="text-2xl md:text-9xl text-white hover:text-darkBlueGray-100 font-medium font-heading" href="#">Contact</a></li>
      </ul>
      <ul class="mb-12 flex-1">
        <li class="mb-5"><a class="text-xl text-blue-500 hover:text-blue-400 font-heading" href="#">Facebook</a></li>
        <li class="mb-5"><a class="text-xl text-blue-500 hover:text-blue-400 font-heading" href="#">Instagram</a></li>
        <li><a class="text-xl text-blue-500 hover:text-blue-400 font-heading" href="#">Twitter</a></li>
      </ul>
      <a class="block w-full py-4 px-10 text-lg text-white font-heading font-medium tracking-tighter text-center bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 hover:bg-blue-600 rounded-xl" href="#">Sign in</a>
    </nav>
  </div>
</section>

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between bg-gray-100 border-b">
    <div class="px-12 py-8 flex w-full items-center">
      <a class="lg:mr-8 2xl:mr-20 text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <div class="hidden xl:flex max-w-xs py-3 pl-8 pr-2 bg-white rounded-lg">
        <svg class="w-8 h-10 mr-2" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <input class="w-full border-0 focus:ring-transparent focus:outline-none py-2" type="text" placeholder="">
        <select class="pl-6 pr-6 border-0 border-l border-gray-100 focus:border-gray-100 focus:ring-transparent focus:outline-none cursor-pointer" name="" id="">
          <option>All&nbsp;items</option>
          <option>Collection</option>
          <option>Option</option>
        </select>
      </div>
      <ul class="hidden xl:flex px-4 mx-auto font-semibold font-heading">
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Category</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Collection</a></li>
        <li class="mr-12"><a class="hover:text-gray-600" href="#">Story</a></li>
        <li><a class="hover:text-gray-600" href="#">Brand</a></li>
      </ul>
      <div class="hidden xl:flex items-center">
        <a class="mr-10 hover:text-gray-600" href="#">
          <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="flex items-center hover:text-gray-600" href="#">
          <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
        </a>
      </div>
    </div>
    <a class="hidden xl:flex items-center px-12 border-l font-semibold font-heading hover:text-gray-600" href="#">
      <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span>Sign&nbsp;In</span>
    </a>
    <a class="xl:hidden flex mr-6 items-center text-gray-600" href="#">
      <svg class="mr-2" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <span class="inline-block w-6 h-6 text-center bg-white rounded-full font-semibold font-heading">3</span>
    </a>
    <button x-on:click="mobileNavOpen = !mobileNavOpen" class="self-center mr-12 xl:hidden">
      <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="#8594A5"></path>
      </svg>
    </button>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 h-full w-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-2 w-2 text-gray-500 cursor-pointer" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="flex mb-8 justify-between">
        <a class="inline-flex items-center font-semibold font-heading" href="#">
          <svg class="mr-3" width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign&nbsp;In</span>
        </a>
        <div class="flex items-center">
          <a class="mr-10" href="#">
            <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="flex items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="inline-block w-6 h-6 text-center bg-gray-100 rounded-full font-semibold font-heading">3</span>
          </a>
        </div>
      </div>
      <input class="block mb-10 py-5 px-8 bg-gray-100 rounded-md border-transparent focus:ring-blue-300 focus:border-blue-300 focus:outline-none" type="search" placeholder="Search">
      <ul class="text-3xl font-bold font-heading">
        <li class="mb-8"><a href="#">Category</a></li>
        <li class="mb-8"><a href="#">Collection</a></li>
        <li class="mb-8"><a href="#">Story</a></li>
        <li><a href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>

<div x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="flex h-12 py-3 px-6 items-center justify-between bg-green-500">
      <div class="w-auto">
        <a class="inline-flex mr-6 items-center hover:text-indigo-500" href="mailto:contact@shopalux.com">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.76002 0.973331L3.74002 2.97333C-0.306649 4.32666 -0.306649 6.53333 3.74002 7.88L5.52668 8.47333L6.12002 10.26C7.46668 14.3067 9.68002 14.3067 11.0267 10.26L13.0333 4.24666C13.9267 1.54666 12.46 0.0733314 9.76002 0.973331ZM9.97335 4.56L7.44002 7.10666C7.34002 7.20667 7.21335 7.25333 7.08668 7.25333C6.96002 7.25333 6.83335 7.20667 6.73335 7.10666C6.54002 6.91333 6.54002 6.59333 6.73335 6.4L9.26668 3.85333C9.46002 3.66 9.78002 3.66 9.97335 3.85333C10.1667 4.04666 10.1667 4.36666 9.97335 4.56Z" fill="currentColor"></path>
          </svg>
          <span class="hidden lg:block ml-2 text-sm font-bold">contact@shopalux.com</span>
        </a>
        <a class="inline-flex items-center hover:text-indigo-500" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.36665 9.96668L6.13331 11.2C5.87331 11.46 5.45998 11.46 5.19331 11.2067C5.11998 11.1333 5.04665 11.0667 4.97331 10.9933C4.28665 10.3 3.66665 9.57334 3.11331 8.81334C2.56665 8.05334 2.12665 7.29334 1.80665 6.54001C1.49331 5.78001 1.33331 5.05334 1.33331 4.36001C1.33331 3.90668 1.41331 3.47334 1.57331 3.07334C1.73331 2.66668 1.98665 2.29334 2.33998 1.96001C2.76665 1.54001 3.23331 1.33334 3.72665 1.33334C3.91331 1.33334 4.09998 1.37334 4.26665 1.45334C4.43998 1.53334 4.59331 1.65334 4.71331 1.82668L6.25998 4.00668C6.37998 4.17334 6.46665 4.32668 6.52665 4.47334C6.58665 4.61334 6.61998 4.75334 6.61998 4.88001C6.61998 5.04001 6.57331 5.20001 6.47998 5.35334C6.39331 5.50668 6.26665 5.66668 6.10665 5.82668L5.59998 6.35334C5.52665 6.42668 5.49331 6.51334 5.49331 6.62001C5.49331 6.67334 5.49998 6.72001 5.51331 6.77334C5.53331 6.82668 5.55331 6.86668 5.56665 6.90668C5.68665 7.12668 5.89331 7.41334 6.18665 7.76001C6.48665 8.10668 6.80665 8.46001 7.15331 8.81334C7.21998 8.88001 7.29331 8.94668 7.35998 9.01334C7.62665 9.27334 7.63331 9.70001 7.36665 9.96668Z" fill="currentColor"></path>
            <path d="M14.6467 12.22C14.6467 12.4067 14.6134 12.6 14.5467 12.7867C14.5267 12.84 14.5067 12.8933 14.48 12.9467C14.3667 13.1867 14.22 13.4133 14.0267 13.6267C13.7 13.9867 13.34 14.2467 12.9334 14.4133C12.9267 14.4133 12.92 14.42 12.9134 14.42C12.52 14.58 12.0934 14.6667 11.6334 14.6667C10.9534 14.6667 10.2267 14.5067 9.46002 14.18C8.69336 13.8533 7.92669 13.4133 7.16669 12.86C6.90669 12.6667 6.64669 12.4733 6.40002 12.2667L8.58002 10.0867C8.76669 10.2267 8.93336 10.3333 9.07336 10.4067C9.10669 10.42 9.14669 10.44 9.19336 10.46C9.24669 10.48 9.30002 10.4867 9.36002 10.4867C9.47336 10.4867 9.56002 10.4467 9.63336 10.3733L10.14 9.87332C10.3067 9.70665 10.4667 9.57999 10.62 9.49999C10.7734 9.40665 10.9267 9.35999 11.0934 9.35999C11.22 9.35999 11.3534 9.38665 11.5 9.44665C11.6467 9.50665 11.8 9.59332 11.9667 9.70665L14.1734 11.2733C14.3467 11.3933 14.4667 11.5333 14.54 11.7C14.6067 11.8667 14.6467 12.0333 14.6467 12.22Z" fill="currentColor"></path>
          </svg>
          <span class="hidden lg:block ml-2 text-sm font-bold">+1-202-555-0147</span>
        </a>
      </div>
      <div class="w-auto">
        <div class="flex items-center">
          <div class="hidden lg:inline-flex mr-4 flex-wrap items-center">
            <button class="relative group inline-flex items-center text-left text-sm font-bold text-gray-900 hover:text-indigo-500">
              <span class="mr-2">English</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">German</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">English</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Polish</a></div>
              </div>
            </button>
          </div>
          <div class="hidden lg:inline-flex mr-4 flex-wrap items-center">
            <button class="relative group inline-flex items-center text-left text-sm font-bold text-gray-900 hover:text-indigo-500">
              <span class="mr-2">USD</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">PLN</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">GBP</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">USD</a></div>
              </div>
            </button>
          </div>
          <a class="inline-flex mr-4 flex-wrap items-center text-gray-900 hover:text-indigo-500" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.99999 8.00001C9.84094 8.00001 11.3333 6.50763 11.3333 4.66668C11.3333 2.82573 9.84094 1.33334 7.99999 1.33334C6.15904 1.33334 4.66666 2.82573 4.66666 4.66668C4.66666 6.50763 6.15904 8.00001 7.99999 8.00001Z" fill="currentColor"></path>
              <path d="M8 9.66666C4.66 9.66666 1.94 11.9067 1.94 14.6667C1.94 14.8533 2.08667 15 2.27334 15H13.7267C13.9133 15 14.06 14.8533 14.06 14.6667C14.06 11.9067 11.34 9.66666 8 9.66666Z" fill="currentColor"></path>
            </svg>
            <span class="hidden lg:block ml-2 text-sm font-bold">Profile</span>
          </a>
          <a class="inline-flex mr-4 flex-wrap items-center text-gray-900 hover:text-indigo-500" href="#">
            <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.96001 0.0666809C8.75334 0.0666809 7.67334 0.653348 7.00001 1.55335C6.32668 0.653348 5.24668 0.0666809 4.04001 0.0666809C1.99334 0.0666809 0.333344 1.73335 0.333344 3.79335C0.333344 4.58668 0.46001 5.32001 0.68001 6.00001C1.73334 9.33335 4.98001 11.3267 6.58668 11.8733C6.81334 11.9533 7.18668 11.9533 7.41334 11.8733C9.02001 11.3267 12.2667 9.33335 13.32 6.00001C13.54 5.32001 13.6667 4.58668 13.6667 3.79335C13.6667 1.73335 12.0067 0.0666809 9.96001 0.0666809Z" fill="currentColor"></path>
            </svg>
            <span class="hidden lg:block ml-2 text-sm font-bold">Wishlist</span>
          </a>
          <a class="inline-flex flex-wrap items-center text-gray-900 hover:text-indigo-500" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.8267 3.72H12.56L10.3067 1.46667C10.1267 1.28667 9.83334 1.28667 9.64668 1.46667C9.46668 1.64667 9.46668 1.94 9.64668 2.12667L11.24 3.72H4.76001L6.35334 2.12667C6.53334 1.94667 6.53334 1.65333 6.35334 1.46667C6.17334 1.28667 5.88001 1.28667 5.69334 1.46667L3.44668 3.72H3.18001C2.58001 3.72 1.33334 3.72 1.33334 5.42667C1.33334 6.07333 1.46668 6.5 1.74668 6.78C1.90668 6.94666 2.10001 7.03333 2.30668 7.08C2.50001 7.12666 2.70668 7.13333 2.90668 7.13333H13.0933C13.3 7.13333 13.4933 7.12 13.68 7.08C14.24 6.94666 14.6667 6.54667 14.6667 5.42667C14.6667 3.72 13.42 3.72 12.8267 3.72Z" fill="currentColor"></path>
              <path d="M12.7 8H3.24667C2.83334 8 2.52 8.36667 2.58667 8.77333L3.14667 12.2C3.33333 13.3467 3.83333 14.6667 6.05333 14.6667H9.79333C12.04 14.6667 12.44 13.54 12.68 12.28L13.3533 8.79333C13.4333 8.38 13.12 8 12.7 8ZM7.07333 12.3C7.07333 12.56 6.86667 12.7667 6.61334 12.7667C6.35334 12.7667 6.14667 12.56 6.14667 12.3V10.1C6.14667 9.84667 6.35334 9.63333 6.61334 9.63333C6.86667 9.63333 7.07333 9.84667 7.07333 10.1V12.3ZM9.92667 12.3C9.92667 12.56 9.72 12.7667 9.46 12.7667C9.20667 12.7667 8.99334 12.56 8.99334 12.3V10.1C8.99334 9.84667 9.20667 9.63333 9.46 9.63333C9.72 9.63333 9.92667 9.84667 9.92667 10.1V12.3Z" fill="currentColor"></path>
            </svg>
            <span class="hidden lg:block ml-2 text-sm font-bold">Basket</span>
          </a>
        </div>
      </div>
    </div>
    <div class="flex h-20 py-3 px-6 items-center justify-between bg-white">
      <div class="hidden lg:inline-flex items-center">
        <a class="inline-block text-2xl font-bold mr-10" href="#">
          <img src="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="flex items-center">
          <li class="mr-6">
            <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
              <span class="mr-2">Home</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
              </div>
            </button>
          </li>
          <li class="mr-6">
            <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
              </div>
            </button>
          </li>
          <li class="mr-6">
            <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
                <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
              </div>
            </button>
          </li>
          <li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Blog</a></li>
          <li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Shop</a></li>
          <li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="hidden md:inline-block w-auto">
        <div class="flex h-10 px-4 py-2 items-center border-2 border-gray-900 rounded-md">
          <input class="text-sm font-bold placeholder-gray-900 outline-none bg-transparent" type="search" placeholder="Search now...">
          <button class="inline-block" type="submit">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z" stroke="#292929" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M18.9299 20.6898C19.4599 22.2898 20.6699 22.4498 21.5999 21.0498C22.4499 19.7698 21.8899 18.7198 20.3499 18.7198C19.2099 18.7098 18.5699 19.5998 18.9299 20.6898Z" stroke="#292929" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-black hover:text-indigo-500">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="shopal-assets/logos/shopal-logo.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Category</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Pages</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6">
            <button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
              <span class="mr-2">Products</span>
              <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
              </svg>
              <div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
            </button>
          </li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
          <li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
          <li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
          <button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</div>

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-purple-200 py-6 px-10 relative">
    <a class="xl:hidden text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <ul class="hidden xl:flex">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <a class="text-lg font-bold" href="#">
        <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
      </a>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="relative hidden z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="fixed top-0 left-0 bottom-0 flex flex-col w-full md:w-5/6 max-w-sm py-8 px-8 bg-purple-200 border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-2xl font-bold leading-none" href="#">
          <img class="h-6" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-500 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div class="my-auto">
        <ul class="py-10">
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-purple-300 rounded" href="#">Product</a></li>
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-purple-300 rounded" href="#">Features</a></li>
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-purple-300 rounded" href="#">Pricing</a></li>
          <li class="mb-1"><a class="block p-4 text-lg font-extrabold hover:bg-purple-300 rounded" href="#">Resources</a></li>
        </ul>
      </div>
      <div><a class="block mb-6 text-center leading-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><a class="block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Sign Up</a></div>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 flex justify-between items-center bg-gray-900">
    <a class="text-white text-3xl font-bold leading-none" href="#">
      <img class="h-12" src="atis-assets/logo/atis/atis-mono-white.svg" alt="" width="auto">
    </a>
    <div class="lg:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-white p-3">
        <svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
      <li><a class="text-sm text-gray-300 hover:text-white" href="#">Start</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-white font-bold" href="#">About Us</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-gray-300 hover:text-white" href="#">Services</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-gray-300 hover:text-white" href="#">Platform</a></li>
      <li class="text-gray-800">
        <svg class="w-4 h-4 current-fill" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
        </svg>
      </li>
      <li><a class="text-sm text-gray-300 hover:text-white" href="#">Testimonials</a></li>
    </ul>
    <a class="hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 text-sm text-white font-bold border-2 border-gray-800 hover:border-gray-700 rounded-l-xl rounded-t-xl transition duration-200" href="#">Sign In</a><a class="hidden lg:inline-block py-2 px-6 bg-green-500 hover:bg-green-600 text-sm text-white font-bold rounded-l-xl rounded-t-xl transition duration-200" href="#">Sign up</a>
  </nav>
  <div :class="{ 'hidden': !mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="relative flex flex-col py-6 px-6 h-full w-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold leading-none" href="#">
          <img class="h-10" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Start</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">About Us</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Services</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Platform</a></li>
          <li class="mb-1"><a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-green-50 hover:text-green-600 rounded" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6"><a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none bg-gray-50 hover:bg-gray-100 rounded-l-xl rounded-t-xl" href="#">Sign in</a><a class="block px-4 py-3 mb-2 leading-loose text-xs text-center text-white font-semibold bg-green-600 hover:bg-green-700 rounded-l-xl rounded-t-xl" href="#">Sign Up</a></div>
        <p class="my-4 text-xs text-center text-gray-400">
          <span>© 2020 All rights reserved.</span>
        </p>
        <div class="text-center">
          <a class="inline-block px-1" href="#">
            <img src="atis-assets/social/facebook.svg" alt="">
          </a>
          <a class="inline-block px-1" href="#">
            <img src="atis-assets/social/twitter.svg" alt="">
          </a>
          <a class="inline-block px-1" href="#">
            <img src="atis-assets/social/instagram.svg" alt="">
          </a>
        </div>
      </div>
    </nav>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-10"   data-config-="data-config-">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between relative"><a class="inline-block" href="#"  ><img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="116"></a>
        
        <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#000"></path>
          </svg>
        </button>
        
        <div class="hidden lg:block ml-14">
          <ul class="inline-flex">
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" aria-current="page" href="#" >Home</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Products</a></li>
            <li class="mr-8"><a class="inline-block font-bold hover:text-gray-900" href="#" >Resources</a></li>
            <li><a class="inline-block font-bold hover:text-gray-900" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="hidden lg:block ml-auto"><a class="inline-block mr-8 font-bold" href="#" >Log In</a><a class="inline-block px-8 py-3 text-white font-bold bg-black hover:bg-gray-900" href="#" >Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-3/4 max-w-xs z-50"   data-config-="data-config-">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black bg-opacity-75"></div>
    <nav class="relative flex flex-col h-full p-8 bg-white">
      <div class="flex items-center justify-between mb-12">
        <a class="items-center" href="#"  ><img src="pstls-assets/logos/pstls-logo-md.svg" alt="" width="102"></a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block focus:outline-none" type="button" aria-label="Close"><img src="pstls-assets/images/navigations/x2.svg" alt=""></button>
      </div>
      <div>
        <ul>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Home</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Products</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Resources</a></li>
          <li class="py-3"><a class="inline-block font-bold hover:text-gray-900" href="#" >Pricing</a></li>
        </ul>
      </div>
      <div class="mt-auto">
        <div><a class="block py-3 text-center font-bold" href="#" >Log In</a><a class="block px-8 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#" >Sign Up</a></div>
      </div>
    </nav>
  </div>
</section>