Responsive Header Navigation Bar with Logo

<header class="relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(2) &gt; header:nth-of-type(1)">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
          <div class="flex items-center justify-between py-5">
            <a href="#" class="flex items-center gap-2">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cfd11ad9-7276-443d-aaea-710749f28066_1600w.png" alt="Water Logo" class="w-[100px] h-8 object-cover rounded">
            </a>
            <nav class="hidden md:flex items-center gap-8 text-sm text-white/80">
              <a class="hover:text-white transition font-geist" href="#">
                Features
              </a>
              <a class="hover:text-white transition font-geist" href="#">
                Solutions
              </a>
              <a class="hover:text-white transition font-geist" href="#">
                Integrations
              </a>
              <a class="hover:text-white transition font-geist" href="#">
                Pricing
              </a>
            </nav>
            <div class="flex items-center gap-3">
              <a class="hidden sm:inline-flex text-sm text-white/80 hover:text-white transition font-geist" href="#">
                Sign in
              </a>
              <a href="#" class="inline-flex items-center gap-2 rounded-full border-gradient before:rounded-full bg-white/5 px-4 py-2.5 text-sm font-medium hover:bg-white/10 transition font-geist">
                <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" class="h-4 w-4">
                  <path d="m10 17 5-5-5-5" class=""></path>
                  <path d="M15 12H3" class=""></path>
                  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" class=""></path>
                </svg>
                Create account
              </a>
            </div>
          </div>
        </div>
      </header>