src/components/MainMenuBoxes.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const menuItems = [
+  {
+    title: 'Create game',
+    description: 'Create a new game and invite your friends to play with you.',
+    icon: 'add_circle_outline',
+    routeName: 'create-Game',
+    color: 'green-9'
+  },
+  {
+    title: 'Spiel beitreten',
+    description: 'Join a game by typing in the game identifier.',
+    icon: 'login',
+    routeName: 'join-Game',
+    color: 'blue-9'
+  },
+  {
+    title: 'Settings',
+    description: 'This area is currently under construction.',
+    icon: 'settings',
+    routeName: 'settings',
+    color: 'grey-8'
+  }
+];
+
+const navigateTo = (routeName: string) => {
+  router.push({ name: routeName });
+};
+</script>
+
+<template>
+  <div class="row q-col-gutter-md justify-center" style="width: 100%; max-width: 1000px;">
+
+    <div
+      v-for="(item, index) in menuItems"
+      :key="index"
+      class="col-12 col-sm-6 col-md-4"
+    >
+      <q-card
+        class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
+        v-ripple
+        @click="navigateTo(item.routeName)"
+      >
+        <q-card-section class="row items-center no-wrap">
+          <q-avatar
+            :icon="item.icon"
+            :color="item.color"
+            text-color="white"
+            size="lg"
+            class="q-mr-md shadow-2"
+          />
+          <div>
+            <div class="text-h6">{{ item.title }}</div>
+            <div class="text-caption text-grey-5">
+              {{ item.description }}
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.menu-card {
+  transition: transform 0.2s, background-color 0.2s;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Hover-Effekt für die Karten */
+.menu-card:hover {
+  transform: translateY(-5px);
+  background-color: #2c3e50 !important;
+  border-color: var(--q-primary);
+}
+</style>