{isMobileMenuOpen && (
            <nav className="fixed inset-0 z-40 bg-black text-gray-300 mt-10 px-3">
              <div className="flex flex-col gap-1 p-5">
                <button onClick={handleFeaturesClick} className="hover:text-gray-200 border border-transparent hover:border-gray-500/30 px-2 py-2 rounded-xl ease-in-out hover:bg-neutral-800/80 duration-300 transition-all flex flex-row items-center justify-between w-full">
                  Features
                  <FaChevronDown className={`text-gray-300 duration-300 transition-all ${isFeaturesOpen ? 'rotate-180' : ''}`} style={{ transform: "rotate(0deg)" }} />
                </button>
                {isFeaturesOpen && (
                  <div>
                    <Link href="#">Feature 1</Link>
                    <Link href="#">Feature 2</Link>
                    <Link href="#">Feature 3</Link>
                  </div>
                )}
                <button onClick={handleResourcesClick} className="hover:text-gray-200 border border-transparent hover:border-gray-500/30 px-2 py-2 rounded-xl ease-in-out hover:bg-neutral-800/80 duration-300 transition-all flex flex-row items-center justify-between w-full">
                  Resources
                  <FaChevronDown className={`text-gray-300 duration-300 transition-all ${isResourcesOpen ? 'rotate-180' : ''}`} style={{ transform: "rotate(0deg)" }} />
                </button>
                {isResourcesOpen && (
                  <div className="flex flex-col">
                    <Link href="#" className="ml-4 hover:text-gray-200 border border-transparent hover:border-gray-500/30 px-2 py-2 rounded-xl ease-in-out hover:bg-neutral-800/80 duration-300 transition-all">Resource 1</Link>
                    <Link href="#" className="ml-4 hover:text-gray-200 border border-transparent hover:border-gray-500/30 px-2 py-2 rounded-xl ease-in-out hover:bg-neutral-800/80 duration-300 transition-all">Resource 2</Link>
                    <Link href="#" className="ml-4 hover:text-gray-200 border border-transparent hover:border-gray-500/30 px-2 py-2 rounded-xl ease-in-out hover:bg-neutral-800/80 duration-300 transition-all">Resource 3</Link>
                  </div>
                )}
                <Link href="/about" className="hover:text-gray-200 border border-transparent hover:border-gray-500/30 px-2 py-2 rounded-xl ease-in-out hover:bg-neutral-800/80 duration-300 transition-all">
                  About us
                </Link>
                <Link href="" className="hover:text-gray-200 border border-transparent hover:border-gray-500/30 px-2 py-2 rounded-xl ease-in-out hover:bg-neutral-800/80 duration-300 transition-all">
                  Support
                </Link>
              </div>
              <hr className="border-gray-200/10 pb-5 mx-5" />
              <div className="flex-row items-center gap-2 flex w-full px-5">
                <button className="w-full bg-gray-800/50 hover:bg-gray-800/70 text-accent px-3 py-2 rounded-lg border border-gray-400/20 duration-300 transition-color ease-in-out shadow-inner shadow-gray-400/20">
                  Get Started
                </button>
              </div>
            </nav>
          )}