Fixed Navbar with Multi-Level Dropdown Menus

<nav
  class="fixed border-white/[0.06] supports-[backdrop-filter]:bg-[#0B0C0E]/60 z-50 bg-[#0B0C0E]/80 w-full border-b top-0 backdrop-blur-xl">
  <div class="flex h-14 max-w-7xl mr-auto ml-auto pr-6 pl-6 items-center justify-between">
    <div class="flex items-center gap-2">
      <div class="relative flex items-center justify-center w-6 h-6">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="w-5 h-5 text-orange-400/90">
          <path
            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
            class=""></path>
        </svg>
      </div>
      <span class="text-sm font-medium tracking-tight text-white/90">
        Fluxer
      </span>
    </div>

    <!-- Desktop Menu -->
    <div class="hidden md:flex items-center gap-6">
      <!-- Products Dropdown -->
      <div class="relative group">
        <button class="flex gap-1.5 text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="products-dropdown">
          Products
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50 transition-transform duration-200"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div id="products-dropdown"
          class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[340px] transition-all duration-200 ease-out z-50"
          data-dropdown-content="">
          <div
            class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
            <div class="grid gap-0.5">
              <a href="/fluxerai"
                class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path
                      d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
                      class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Fluxer AI</span>
                  <span class="text-[12px] text-white/50 leading-snug">Design at the speed of thought</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect>
                    <path d="M3 9h18" class=""></path>
                    <path d="M9 21V9" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Visual Editor</span>
                  <span class="text-[12px] text-white/50 leading-snug">Total design freedom</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Team Work</span>
                  <span class="text-[12px] text-white/50 leading-snug">Comment, review, and approve</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" class=""></path>
                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">CMS</span>
                  <span class="text-[12px] text-white/50 leading-snug">Flexible content modeling</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" class=""></path>
                    <path d="M12 12v9" class=""></path>
                    <path d="m16 16-4-4-4 4" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Global Hosting</span>
                  <span class="text-[12px] text-white/50 leading-snug">Edge network deployment</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <circle cx="11" cy="11" r="8" class=""></circle>
                    <path d="m21 21-4.3-4.3" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">SEO &amp; Social</span>
                  <span class="text-[12px] text-white/50 leading-snug">Fine-tune your visibility</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Templates Dropdown -->
      <div class="relative group">
        <button class="flex text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="templates-dropdown">
          Resources
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 opacity-50 w-[12px] h-[12px]">
            <path d="m6 9 6 6 6-6" class=""></path>
          </svg>
        </button>
        <div id="templates-dropdown"
          class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[320px] transition-all duration-200 ease-out z-50"
          data-dropdown-content="">
          <div
            class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
            <div class="grid gap-0.5">
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
                      class=""></path>
                    <path
                      d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
                      class=""></path>
                    <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" class=""></path>
                    <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Startup</span>
                  <span class="text-[12px] text-white/50 leading-snug">Launch your business</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <rect width="20" height="14" x="2" y="7" rx="2" ry="2" class=""></rect>
                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Agency</span>
                  <span class="text-[12px] text-white/50 leading-snug">For creative teams</span>
                </div>
              </a>
              <a href="/marketplace"
                class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path>
                    <circle cx="12" cy="7" r="4" class=""></circle>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Marketplace</span>
                  <span class="text-[12px] text-white/50 leading-snug">Templates and Components</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Resources Dropdown -->
      <div class="relative group">
        <button class="flex gap-1.5 text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="resources-dropdown">
          Solutions
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50 transition-transform duration-200"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div id="resources-dropdown"
          class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[320px] transition-all duration-200 ease-out z-50"
          data-dropdown-content="">
          <div
            class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
            <div class="grid gap-0.5">
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Blog</span>
                  <span class="text-[12px] text-white/50 leading-snug">Latest updates &amp; stories</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <circle cx="12" cy="12" r="10" class=""></circle>
                    <circle cx="12" cy="12" r="4" class=""></circle>
                    <line x1="4.93" x2="9.17" y1="4.93" y2="9.17" class=""></line>
                    <line x1="14.83" x2="19.07" y1="14.83" y2="19.07" class=""></line>
                    <line x1="14.83" x2="19.07" y1="9.17" y2="4.93" class=""></line>
                    <line x1="14.83" x2="9.17" y1="14.83" y2="19.07" class=""></line>
                    <line x1="4.93" x2="9.17" y1="19.07" y2="14.83" class=""></line>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Help Center</span>
                  <span class="text-[12px] text-white/50 leading-snug">Everything you need to know</span>
                </div>
              </a>
              <a href="/tutorials"
                class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <circle cx="12" cy="12" r="10" class=""></circle>
                    <polygon points="10 8 16 12 10 16 10 8" class=""></polygon>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Tutorials</span>
                  <span class="text-[12px] text-white/50 leading-snug">Learn how to build</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Community Dropdown -->
      <div class="relative group">
        <button class="flex text-[13px] hover:text-white transition-colors focus:outline-none text-white/60 pt-4 pb-4 gap-x-1.5 gap-y-1.5 items-center" data-dropdown-trigger="community-dropdown">
          Community
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50 transition-transform duration-200"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div id="community-dropdown"
          class="invisible opacity-0 translate-y-2 absolute top-full left-1/2 -translate-x-1/2 pt-2 w-[320px] transition-all duration-200 ease-out z-50"
          data-dropdown-content="">
          <div
            class="bg-[#0E0F11] border border-white/[0.08] rounded-xl shadow-[0_20px_40px_-12px_rgba(0,0,0,0.8)] p-2 backdrop-blur-3xl overflow-hidden ring-1 ring-white/[0.05]">
            <div class="grid gap-0.5">
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Discord</span>
                  <span class="text-[12px] text-white/50 leading-snug">Chat with the community</span>
                </div>
              </a>
              <a href="#" class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <path
                      d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
                      class=""></path>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Twitter</span>
                  <span class="text-[12px] text-white/50 leading-snug">Follow for updates</span>
                </div>
              </a>
              <a href="/events"
                class="flex items-start gap-3 p-2.5 rounded-lg hover:bg-white/[0.04] transition-colors group">
                <div
                  class="w-9 h-9 rounded-lg bg-white/[0.06] border border-white/[0.04] flex items-center justify-center text-white shrink-0 group-hover:bg-white/[0.1] transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                    <rect width="18" height="18" x="3" y="4" rx="2" ry="2" class=""></rect>
                    <line x1="16" x2="16" y1="2" y2="6" class=""></line>
                    <line x1="8" x2="8" y1="2" y2="6" class=""></line>
                    <line x1="3" x2="21" y1="10" y2="10" class=""></line>
                  </svg>
                </div>
                <div class="flex flex-col gap-0.5">
                  <span class="text-[13px] font-medium text-white group-hover:text-white">Events</span>
                  <span class="text-[12px] text-white/50 leading-snug">Meetups and workshops</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <a href="/pricing" class="text-[13px] hover:text-white transition-colors text-white/60">
        Pricing
      </a>
    </div>

    <!-- Right Actions -->
    <div class="flex gap-4 gap-x-4 gap-y-4 items-center">
      <a href="/login" class="hidden sm:block text-[13px] hover:text-white transition-colors text-white/60">
        Log in
      </a>
      <!-- Mobile Menu Button -->
      <button class="md:hidden text-white/60 hover:text-white transition-colors focus:outline-none" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><line x1="4" x2="20" y1="12" y2="12" class=""></line><line x1="4" x2="20" y1="6" y2="6" class=""></line><line x1="4" x2="20" y1="18" y2="18" class=""></line></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu Dropdown -->
  <div id="mobile-menu" class="hidden md:hidden border-t border-white/[0.06] bg-[#0B0C0E] max-h-[80vh] overflow-y-auto">
    <div class="px-6 py-4 space-y-4">
      <!-- Products Mobile -->
      <div class="space-y-3">
        <button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-products').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Products
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div id="mobile-products" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
          <a href="/fluxerai" class="block text-sm text-white/60 hover:text-white transition-colors">Fluxer AI</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Visual Editor</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Team Work</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">CMS</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Global Hosting</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">SEO &amp; Social</a>
        </div>
      </div>

      <!-- Resources Mobile -->
      <div class="space-y-3">
        <button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-resources').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Resources
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div id="mobile-resources" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Startup</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Agency</a>
          <a href="/marketplace" class="block text-sm text-white/60 hover:text-white transition-colors">Marketplace</a>
        </div>
      </div>

      <!-- Solutions Mobile -->
      <div class="space-y-3">
        <button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-solutions').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Solutions
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div id="mobile-solutions" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Blog</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Help Center</a>
          <a href="/tutorials" class="block text-sm text-white/60 hover:text-white transition-colors">Tutorials</a>
        </div>
      </div>

      <!-- Community Mobile -->
      <div class="space-y-3">
        <button class="flex items-center justify-between w-full text-sm font-medium text-white/80" onclick="document.getElementById('mobile-community').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Community
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 text-white/40"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <div id="mobile-community" class="hidden pl-4 space-y-3 border-l border-white/10 ml-2">
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Discord</a>
          <a href="#" class="block text-sm text-white/60 hover:text-white transition-colors">Twitter</a>
          <a href="/events" class="block text-sm text-white/60 hover:text-white transition-colors">Events</a>
        </div>
      </div>

      <a href="/#pricing"
        class="block text-sm font-medium text-white/80 py-2 hover:text-white transition-colors">Pricing</a>

      <div class="pt-4 border-t border-white/10">
        <a href="#"
          class="block w-full py-2.5 text-center text-sm font-medium text-white bg-white/10 rounded-lg hover:bg-white/20 transition-colors">Log
          in</a>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('click', function(e) {
          const trigger = e.target.closest('[data-dropdown-trigger]');
          const activeDropdown = document.querySelector('[data-dropdown-content]:not(.invisible)');
          
          if (trigger) {
            const targetId = trigger.dataset.dropdownTrigger;
            const targetContent = document.getElementById(targetId);
            
            if (activeDropdown && activeDropdown !== targetContent) {
              activeDropdown.classList.add('invisible', 'opacity-0', 'translate-y-2');
              activeDropdown.classList.remove('visible', 'opacity-100', 'translate-y-0');
              const activeTriggerIcon = document.querySelector(`[data-dropdown-trigger="${activeDropdown.id.replace('-content','').replace('-dropdown','-dropdown')}"] svg`);
              if(activeTriggerIcon) activeTriggerIcon.style.transform = 'rotate(0deg)';
            }
            
            const isClosed = targetContent.classList.contains('invisible');
            if (isClosed) {
              targetContent.classList.remove('invisible', 'opacity-0', 'translate-y-2');
              targetContent.classList.add('visible', 'opacity-100', 'translate-y-0');
              trigger.querySelector('svg').style.transform = 'rotate(180deg)';
            } else {
              targetContent.classList.add('invisible', 'opacity-0', 'translate-y-2');
              targetContent.classList.remove('visible', 'opacity-100', 'translate-y-0');
              trigger.querySelector('svg').style.transform = 'rotate(0deg)';
            }
          } else if (activeDropdown && !e.target.closest('[data-dropdown-content]')) {
            activeDropdown.classList.add('invisible', 'opacity-0', 'translate-y-2');
            activeDropdown.classList.remove('visible', 'opacity-100', 'translate-y-0');
            const activeTrigger = document.querySelector(`button[data-dropdown-trigger="${activeDropdown.id}"]`);
            if(activeTrigger) activeTrigger.querySelector('svg').style.transform = 'rotate(0deg)';
          }
        });
  </script>
</nav>