Nav Bar - RulzCo

<header class="z-10 xl:top-4 relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1) &gt; header:nth-of-type(1)">
  <div class="mr-6 ml-6">
    <div class="flex items-center justify-between"
      data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1) &gt; header:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1)">
      <a href="#" class="inline-flex items-center gap-2">
        <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white text-neutral-900 font-medium font-geist" style="">R</span>
        <span class="text-sm font-medium text-white/90 font-geist" style="">Rulz</span>
      </a>
      <nav class="hidden md:flex items-center gap-2">
        <div class="flex items-center gap-1 rounded-full bg-white/5 px-1 py-1 ring-1 ring-white/10 backdrop-blur">
          <a href="#" class="px-3 py-2 text-sm font-medium text-white/90 hover:text-white font-geist" style="">
            Home
          </a>
          <a href="#how-it-works" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-geist"
            style="">
            How It Works
          </a>
          <a href="/#services"
            class="hover:text-white text-sm font-medium text-white/80 font-geist pt-2 pr-3 pb-2 pl-3">Services</a>
          <a href="#pricing" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-geist" style="">
            Pricing
          </a>
          <a href="#case-studies" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-geist"
            style="">
            Case Studies
          </a>
          <a href="#contact" class="px-3 py-2 text-sm font-medium text-white/80 hover:text-white font-geist" style="">
            Contact
          </a>
          <a href="#final-cta"
            class="ml-1 inline-flex items-center gap-2 rounded-full bg-white px-3.5 py-2 text-sm font-medium text-neutral-900 hover:bg-white/90 font-geist"
            style="">
            Get Free Demo
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4">
              <path d="M7 7h10v10" class=""></path>
              <path d="M7 17 17 7" class=""></path>
            </svg>
          </a>
        </div>
      </nav>
      <button class="md:hidden inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15 backdrop-blur" id="mobile-menu-button" aria-expanded="false" aria-label="Toggle menu">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-5 w-5 text-white/90"><path d="M4 5h16" class=""></path><path d="M4 12h16" class=""></path><path d="M4 19h16" class=""></path></svg>
            </button>
    </div>
  </div>
</header>