From 4dfabb2e1ecbd5f3b725f999359010fbdba36308 Mon Sep 17 00:00:00 2001
From: Jonas <77726472+kobolol@users.noreply.github.com>
Date: Fri, 13 Feb 2026 08:25:34 +0100
Subject: [PATCH] Claude/style homepage om t wo (#1)

* Style homepage with centered title and polished buttons

- Split title into two lines with uppercase styling and yellow highlight
- Use Roboto font with light/bold weight contrast for visual hierarchy
- Center buttons in a vertical flex layout with consistent spacing
- Add elevation shadow and hover scale animation to buttons
- Improve letter-spacing and font sizing for readability

https://claude.ai/code/session_01N9z7ADBGmszE5ZoAbVEp4f

* changed ' to "

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: jhim <jhim@d-velop.de>
---
 GUI/src/Home.vue | 107 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 81 insertions(+), 26 deletions(-)

diff --git a/GUI/src/Home.vue b/GUI/src/Home.vue
index 3ec7485..91d5eb9 100644
--- a/GUI/src/Home.vue
+++ b/GUI/src/Home.vue
@@ -3,51 +3,106 @@ let buttons = [
     {
         name: "Lokaler Multiplayer",
         icon: "mdi-account-switch",
-        color: "red"
+        color: "red",
     },
     {
         name: "Lokal gegen Bot",
         icon: "mdi-robot-angry-outline",
-        color: "green"
+        color: "green",
     },
     {
         name: "Online Multiplayer",
         icon: "mdi-web",
-        color: "blue"
-    }
+        color: "blue",
+    },
 ]
 </script>
 
 <template>
-    <v-container class="fill-height d-flex justify-center align-center flex-column" fluid>
-        <div class="compact-stack">
-            <h1 class="mb-0 text-center">Wähle deinen <br><span class="text-yellow">Spielmodus</span></h1>
-            <v-row justify="center" align="center" >
-                <v-col cols="12" class="text-center">
-                    <div v-for="button of buttons" :key="button.name" class="py-1">
-                        <v-btn :color="button.color" size="x-large" min-width="325" class="justify-start" rounded="xl">
-                            <template v-slot:prepend>
-                                <div class="d-flex justify-start" style="width: 30px;">
-                                    <v-icon :icon="button.icon"></v-icon>
-                                </div>
-                            </template>
+    <v-container class="fill-height d-flex justify-center align-center" fluid>
+        <div class="homepage-content">
+            <div class="title-section text-center">
+                <h1 class="main-title">Wähle deinen</h1>
+                <h1 class="main-title highlight-title">Spielmodus</h1>
+            </div>
 
-                            <span class="flex-grow-1 text-center">
-                                {{ button.name }}
-                            </span>
-                        </v-btn>
-                    </div>
-                </v-col>
-            </v-row>
+            <div class="button-section">
+                <v-btn
+                    v-for="button of buttons"
+                    :key="button.name"
+                    :color="button.color"
+                    size="x-large"
+                    min-width="340"
+                    rounded="xl"
+                    class="mode-btn justify-start"
+                    elevation="8"
+                >
+                    <template v-slot:prepend>
+                        <div class="d-flex justify-start" style="width: 32px">
+                            <v-icon :icon="button.icon" size="24"></v-icon>
+                        </div>
+                    </template>
+
+                    <span class="flex-grow-1 text-center btn-label">
+                        {{ button.name }}
+                    </span>
+                </v-btn>
+            </div>
         </div>
     </v-container>
 </template>
 
 <style scoped>
-.compact-stack {
+.homepage-content {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 10vh;
+    gap: 8vh;
 }
-</style>
\ No newline at end of file
+
+.title-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.main-title {
+    font-family: "Roboto", sans-serif;
+    font-size: 3rem;
+    font-weight: 300;
+    letter-spacing: 2px;
+    line-height: 1.2;
+    text-transform: uppercase;
+}
+
+.highlight-title {
+    font-weight: 700;
+    font-size: 3.5rem;
+    color: #fdd835;
+    letter-spacing: 4px;
+}
+
+.button-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+}
+
+.mode-btn {
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    letter-spacing: 1px;
+    text-transform: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.mode-btn:hover {
+    transform: scale(1.05);
+}
+
+.btn-label {
+    font-size: 1.05rem;
+}
+</style>