Left Logo Navbar With CTA

export default function NavbarLeftLogoCta() {
  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="flex items-center justify-between gap-6 border-b border-zinc-200 pb-4 dark:border-zinc-800"
        >
          <a
            href="#"
            className="flex items-center gap-2 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-indigo-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="M4 12a8 8 0 0 1 8-8" />
                <path d="M20 12a8 8 0 0 1-8 8" />
                <circle cx="12" cy="12" r="2.5" />
              </svg>
            </span>
            Northwind
          </a>

          <ul className="hidden items-center gap-8 text-sm font-medium text-zinc-600 lg:flex dark:text-zinc-300">
            <li>
              <a href="#" className="transition hover:text-zinc-950 dark:hover:text-white">
                Platform
              </a>
            </li>
            <li>
              <a href="#" className="transition hover:text-zinc-950 dark:hover:text-white">
                Customers
              </a>
            </li>
            <li>
              <a href="#" className="transition hover:text-zinc-950 dark:hover:text-white">
                Resources
              </a>
            </li>
            <li>
              <a href="#" className="transition hover:text-zinc-950 dark:hover:text-white">
                Company
              </a>
            </li>
          </ul>

          <div className="flex items-center gap-3">
            <a
              href="#"
              className="hidden text-sm font-medium text-zinc-600 transition hover:text-zinc-950 md:inline dark:text-zinc-300 dark:hover:text-white"
            >
              Log in
            </a>
            <a
              href="#"
              className="group inline-flex items-center gap-2 rounded-full bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-500"
            >
              Book a demo
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
                className="h-4 w-4 transition group-hover:translate-x-0.5"
              >
                <path d="M5 12h14" />
                <path d="M13 6l6 6-6 6" />
              </svg>
            </a>
          </div>
        </nav>
      </header>
    </section>
  );
}