Centred Logo Navbar

export default function NavbarCentredLogo() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <header className="mx-auto max-w-6xl">
        <nav
          aria-label="Primary"
          className="grid grid-cols-3 items-center rounded-2xl border border-zinc-200 bg-white/80 px-5 py-3 shadow-sm dark:border-zinc-800 dark:bg-zinc-900/70"
        >
          <ul className="hidden items-center gap-7 text-sm font-medium text-zinc-600 md:flex dark:text-zinc-300">
            <li>
              <a href="#" className="transition hover:text-zinc-950 dark:hover:text-white">
                Products
              </a>
            </li>
            <li>
              <a href="#" className="transition hover:text-zinc-950 dark:hover:text-white">
                Solutions
              </a>
            </li>
            <li>
              <a href="#" className="transition hover:text-zinc-950 dark:hover:text-white">
                Pricing
              </a>
            </li>
          </ul>

          <a
            href="#"
            className="col-start-2 flex items-center justify-center gap-2 justify-self-center text-lg font-semibold tracking-tight text-zinc-900 dark:text-white"
          >
            <span className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-600 text-white">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
                className="h-5 w-5"
              >
                <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" />
                <path d="M12 12l8-4.5M12 12v9M12 12L4 7.5" />
              </svg>
            </span>
            Meridian
          </a>

          <div className="col-start-3 flex items-center justify-end gap-3">
            <a
              href="#"
              className="hidden text-sm font-medium text-zinc-600 transition hover:text-zinc-950 sm:inline dark:text-zinc-300 dark:hover:text-white"
            >
              Sign in
            </a>
            <a
              href="#"
              className="rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-zinc-700 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200"
            >
              Get started
            </a>
          </div>
        </nav>
      </header>
    </section>
  );
}