<template>
  <div class="bg-cover bg-fixed m-0 h-screen" style="background-image: url('./background.jpg');">
    <section class="container px-4 py-24 mx-auto">
      <div class="w-full mx-auto text-center">
        <img src="/favicon.png" class="h-32 mx-auto" />
        <h1
          class="mb-6 text-4xl font-extrabold leading-none tracking-normal text-white md:text-6xl md:tracking-tight"
        >Lauf Für Kaya!</h1>
        <p class="px-0 mb-6 text-lg text-gray-100 md:text-xl lg:px-24">Selfservice Portal</p>
        <p class="px-0 mb-6 text-md text-gray-100 lg:px-24">{{ $t('main_page_text') }}</p>
        <div class="mt-6 sm:flex place-content-center">
          <a
            class="w-full sm:w-auto inline-flex px-6 py-3 border border-transparent text-base font-semibold rounded-md text-gray-900 bg-white shadow-sm hover:text-gray-600 focus:outline-none focus:text-gray-600 transition ease-in-out duration-150 xl:text-lg xl:py-4"
            href="/selfservice/register/"
          >{{ $t('register_now') }}</a>
          <a
            href="/selfservice/profile/"
            class="mt-4 sm:ml-4 sm:mt-0 w-full sm:w-auto inline-flex px-6 py-3 border border-transparent text-base font-semibold rounded-md text-white bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150 xl:text-lg xl:py-4"
          >{{ $t('view_my_data') }}</a>
        </div>
      </div>
    </section>
  </div>
  <Footer />
</template>

<script setup>
import Footer from "@/components/Footer.vue";
console.log(config);
</script>