From 75b61d991bd483aaf00871c12c9268fc6e21435b Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Mon, 2 Dec 2024 11:24:04 +0100
Subject: [PATCH] feat(Home): improve ui

---
 src/views/Home.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1b18e7b..f250c45 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="bg-cover bg-fixed m-0 h-screen" v-bind:style='{ backgroundImage: "url(" + background_base64 + ")", }'>
+  <div class="bg-cover bg-fixed m-0 h-screen text-white"
+    v-bind:style='{ backgroundImage: "url(" + background_base64 + ")", }'>
     <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 font-[Athiti] font-bold">
+          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>
-        <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>
+        <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="/selfservice/register/">{{ $t('register_now') }}</a>
+        <a href="/selfservice/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>