<div>
  <nav aria-label="Breadcrumb" class="hidden sm:flex">
    <ol role="list" class="flex items-center space-x-4">
      <li>
        <div class="flex">
          <a href="#"
            class="text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 transition duration-200">PROJECTS</a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
            class="size-5 shrink-0 text-gray-400 dark:text-gray-500">
            <path
              d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd" fill-rule="evenodd"></path>
          </svg>
          <a href="#" aria-current="page"
            class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 transition duration-200">
            Alle Projekte
          </a>
        </div>
      </li>
    </ol>
  </nav>
</div>
<div class="mt-2">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between sm:gap-4">
    <div class="min-w-0 flex-1">
      <h2 class="text-2xl/7 font-semibold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white">Alle Projekte</h2>
    </div>
    <div class="flex xl:hidden">
      <button
        class="inline-flex items-center rounded-2xl bg-zinc-900 px-4 py-2 text-base font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
        Neues Projekt
      </button>
    </div>
    <div class="hidden xl:flex gap-2 items-center">
      <button
        class="inline-flex items-center rounded-2xl bg-zinc-900 px-4 py-2 text-base font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
        Neues Projekt
      </button>

      <button
        class="inline-flex items-center rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
        Einstellungen
      </button>
    </div>
  </div>
</div>

<div class="mb-8">
  <div>
    <nav aria-label="Breadcrumb" class="hidden sm:flex">
      <ol role="list" class="flex items-center space-x-4">
        <li>
          <div class="flex">
            <a href="/projects/dashboard" class="text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 transition duration-200">PROJECTS</a>
          </div>
        </li>
        <li>
          <div class="flex items-center">
            <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 shrink-0 text-gray-400 dark:text-gray-500">
              <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd"></path>
            </svg>
            <a href="/projects/all-exercises" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 transition duration-200">Aufgaben</a>
          </div>
        </li>
      </ol>
    </nav>
  </div>

  <div class="mt-2">
    <div class="min-w-0 flex-1">
      <h2 class="text-2xl/7 font-semibold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white">Alle Aufgaben</h2>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Projektübergreifende Übersicht aller Aufgaben.</p>
    </div>
  </div>
</div>