<template>
  <header class="body-font">
    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
      <a class="flex title-font font-medium items-center mb-4 md:mb-0">
        <img src="/favicon.ico" alt />
        <span class="ml-3 text-xl">Lauf für Kaya! - Selfservice</span>
      </a>
      <!-- <nav
        class="md:ml-auto flex flex-wrap items-center text-base justify-center"
      >
        <a class="mr-5 hover">First Link</a>
        <a class="mr-5 hover">Second Link</a>
        <a class="mr-5 hover">Third Link</a>
        <a class="mr-5 hover">Fourth Link</a>
      </nav>-->
      <!-- <button
        class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0"
      >
        Button
        <svg
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          class="w-4 h-4 ml-1"
          viewBox="0 0 24 24"
        >
          <path d="M5 12h14M12 5l7 7-7 7"></path>
        </svg>
      </button>-->
    </div>
  </header>
  <LoginForm />
  <Footer />
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import LoginForm from "./components/LoginForm.vue";
import Footer from "./components/Footer.vue";
</script>