text: import { Fragment } from "react";
  import { Disclosure, Menu, Transition } from "@headlessui/react";
  import { BellIcon, MenuIcon, XIcon } from "@heroicons/react/outline";
  import { Link } from "@chakra-ui/layout";
  
  const navigation = [
    {
      name: "Github",
      href: "https://github.com/orgs/Certificates-Ninja",
      current: false,
    },
    { name: "Team", href: "#team", current: true },
    { name: "How to use", href: "#howtouse", current: false },
  ];
  
  function classNames(...classes) {
    return classes.filter(Boolean).join(" ");
  }
  
  export default function Navbar() {
    return (
      <Disclosure as="nav">
        {({ open }) => (
          <>
            <div className="max-w-7xl py-3 mx-auto px-2 sm:px-6 lg:px-8">
              <div className="relative flex items-center justify-between h-20">
                <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
                  {/* Mobile menu button*/}
                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                    <span className="sr-only">Open main menu</span>
                    {open ? (
                      <XIcon className="block h-6 w-6" aria-hidden="true" />
                    ) : (
                      <MenuIcon className="block h-6 w-6" aria-hidden="true" />
                    )}
                  </Disclosure.Button>
                </div>
                <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                  <div className="flex-shrink-0 flex items-center">
                    <img
                      className="block lg:hidden h-8 w-auto"
                      src="/assets/CN-Logo.svg"
                      alt="Workflow"
                    />
                    <img
                      className="hidden lg:block h-14 w-auto"
                      src="assets/CN-Logo.svg"
                      alt="Workflow"
                    />
                  </div>
                  <div className="hidden sm:block sm:ml-20">
                    <div className="flex space-x-10">
                      {navigation.map((item) => (
                        <a
                          key={item.name}
                          href={item.href}
                          className={classNames(
                            item.current
                              ? "text-black hover:bg-gray-700 hover:text-white "
                              : "text-black hover:bg-gray-700 hover:text-white ",
                            "px-3 py-2 rounded-md text-lg font-medium"
                          )}
                          aria-current={item.current ? "page" : undefined}
                        >
                          {item.name}
                        </a>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
                  {/* Profile dropdown */}
                  <div className="flex flex-col items-center md:flex-row">
                    <a href="/import" class="relative mt-5">
                      <span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
                      <span
                        style={{ fontFamily: "Poppins" }}
                        class="relative inline-flex w-full h-full px-8 py-3 text-base font-bold bg-white border-2 border-black rounded hover:bg-yellow-400 xl:text-xl fold-bold"
                      >
                        Get started
                        <div className="mt-2">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            class="flex-shrink-0 w-4 h-4 ml-3"
                          >
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M14 5l7 7m0 0l-7 7m7-7H3"
                            />
                          </svg>
                        </div>
                      </span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
  
            <Disclosure.Panel className="sm:hidden">
              <div className="px-2 pt-2 pb-3 space-y-1">
                {navigation.map((item) => (
                  <Disclosure.Button
                    key={item.name}
                    as="a"
                    href={item.href}
                    className={classNames(
                      item.current
                        ? "text-black hover:bg-gray-700 hover:text-white"
                        : "text-black hover:bg-gray-700 hover:text-white",
                      "block px-3 py-2 rounded-md text-base font-medium"
                    )}
                    aria-current={item.current ? "page" : undefined}
                  >
                    {item.name}
                  </Disclosure.Button>
                ))}
              </div>
            </Disclosure.Panel>
          </>
        )}
      </Disclosure>
    );
  }
  