<template>
  <div class="bg-cover bg-fixed m-0 h-screen text-white"
    v-bind:style='{ backgroundImage: "url(" + background_base64 + ")", }'>
    <section class="px-4 py-24 mx-auto">
      <div class="w-full mx-auto text-center">
        <img src="/favicon-lfk.png" class="h-32 mx-auto" />
        <h1
          class="mb-6 text-4xl font-extrabold leading-none tracking-normal md:text-6xl md:tracking-tight font-[Athiti]">
          Lauf Für Kaya!<br>2025</h1>
        <h2 class="mb-6 text-xl font-bold leading-none tracking-normal md:text-3xl md:tracking-tight font-[Athiti]">
          Selfservice Portal</h2>
        <p class="px-0 mb-6 text-md lg:px-24 font-medium">{{ $t('main_page_text') }}</p>
        <a class="w-full block mx-auto md:w-3/4 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 xl:text-lg xl:py-4"
          href="/register/">{{ $t('register_now') }}</a>
        <a href="/profile/"
          class="md:mt-4 mt-2 w-full block mx-auto md:w-3/4 px-6 py-3 text-base font-semibold rounded-md bg-gray-800 shadow-sm hover:bg-gray-700 focus:outline-none focus:bg-gray-700 xl:text-lg xl:py-4 border border-gray-400">{{
            $t('view_my_data') }}</a>
      </div>
    </section>
  </div>
  <Footer />
</template>

<script setup>
import background_base64 from "../assets/background.jpg?inline";
import Footer from "@/components/Footer.vue";
</script>