Enhance Home page with new sections and image presets

Added new event images and introduced HomeEntrieWithImagePreset component for consistent image-text layouts. Updated Home.vue to include new sections for club values and events (Nikolausturnier, Wettkämpfe, Kinoabende) with tab navigation. Refactored carousel and improved HomeEntrie for better mobile/desktop title handling. Renamed CarouseWithTitle.vue to CarouselItemWithTitle.vue for clarity.

GUI/src/Layout.vue

@@ -20,9 +20,8 @@ function toggleDrawer() {
 
 onMounted(() => {
   theme.change(
-    localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light')
+    localStorage.getItem('theme') ||
+      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
   );
   showDrawer.value = localStorage.getItem('drawer')?.startsWith('Y') || false;
 });
@@ -48,7 +47,7 @@ onMounted(() => {
         ><span class="pointer">Judoteam - Stadtlohn</span></v-app-bar-title
       >
 
-      <v-tooltip>
+      <v-tooltip v-if="!$vuetify.display.mobile">
         <template #activator="{ props }">
           <v-btn icon v-bind="props">
             <v-icon>mdi-account</v-icon>

GUI/src/components/HomeEntrie.vue

@@ -19,9 +19,7 @@ const props = defineProps({
 });
 
 const normalizedExtraWidth = computed(() => {
-  const width = Number.isFinite(props.extraWidthPercent)
-    ? props.extraWidthPercent
-    : 30;
+  const width = Number.isFinite(props.extraWidthPercent) ? props.extraWidthPercent : 30;
 
   return Math.min(100, Math.max(0, width));
 });
@@ -40,19 +38,25 @@ const textWidthStyle = computed(() => ({
 </script>
 
 <template>
-  <div :class="{ 'mt-5': !noMarginTop }">
+  <div :class="{ 'mt-6': !noMarginTop }">
     <template v-if="props.extraBesideText">
       <h3 v-if="!props.titleInSplitRight" class="text-h4 font-weight-bold">
         {{ props.title }}
       </h3>
       <div class="entry-content entry-content--split">
+        <h3
+          v-if="props.titleInSplitRight"
+          class="text-h4 font-weight-bold entry-content__title--mobile"
+        >
+          {{ props.title }}
+        </h3>
         <div class="entry-content__extra" :style="extraWidthStyle">
           <slot name="extra" />
         </div>
         <div class="entry-content__text" :style="textWidthStyle">
           <h3
             v-if="props.titleInSplitRight"
-            class="text-h4 font-weight-bold"
+            class="text-h4 font-weight-bold entry-content__title--desktop"
           >
             {{ props.title }}
           </h3>
@@ -96,6 +100,14 @@ const textWidthStyle = computed(() => ({
   flex: 1 1 auto;
 }
 
+/* Desktop/Mobile title visibility helpers */
+.entry-content__title--mobile {
+  display: none;
+}
+.entry-content__title--desktop {
+  display: block;
+}
+
 @media (max-width: 600px) {
   .entry-content--split {
     flex-direction: column;
@@ -108,5 +120,13 @@ const textWidthStyle = computed(() => ({
     max-width: 100% !important;
     width: 100%;
   }
+
+  .entry-content__title--mobile {
+    display: block;
+  }
+
+  .entry-content__title--desktop {
+    display: none;
+  }
 }
 </style>

GUI/src/components/HomeEntrieWithImagePreset.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import HomeEntrie from '@/components/HomeEntrie.vue';
+const props = defineProps({
+  title: String,
+  image: String,
+});
+</script>
+
+<template>
+  <home-entrie
+    :title="props.title"
+    extra-beside-text
+    :extra-width-percent="50"
+    title-in-split-right
+  >
+    <template #text>
+      <slot name="text"></slot>
+    </template>
+    <template #extra>
+      <v-img class="rounded-lg" :src="props.image" height="400" cover> </v-img>
+    </template>
+  </home-entrie>
+</template>
+
+<style scoped>
+.paddingIn {
+  padding-left: 75px;
+  padding-right: 75px;
+}
+</style>

GUI/src/routes/Home.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import CarouseWithTitle from '@/components/CarouseWithTitle.vue';
+import CarouselItemWithTitle from '@/components/CarouselItemWithTitle.vue';
 import HomeEntrie from '@/components/HomeEntrie.vue';
+import HomeEntrieWithImagePreset from '@/components/HomeEntrieWithImagePreset.vue';
+import { ref } from 'vue';
+
+const tab = ref("1");
 </script>
 
 <template>
@@ -11,7 +15,7 @@ import HomeEntrie from '@/components/HomeEntrie.vue';
       <v-container
         id="main"
         :style="{
-          maxWidth: $vuetify.display.smAndDown ? '100vw' : '60vw',
+          maxWidth: $vuetify.display.smAndDown ? '100vw' : '70vw',
         }"
         fluid
       >
@@ -45,14 +49,93 @@ import HomeEntrie from '@/components/HomeEntrie.vue';
               hide-delimiter-background
               class="rounded-lg"
               cycle
-              interval="6000"
+              interval="8000"
             >
-              <carouse-with-title text="Werfen" image="/static/images/whatsJudo/throw.jpg"/>
-              <carouse-with-title text="fixieren am Boden" image="/static/images/whatsJudo/hold.jpg"/>
-              <carouse-with-title text="Trainieren aller Muskelgruppen" image="/static/images/whatsJudo/stabil.jpg"/>
+              <carousel-item-with-title text="Werfen" image="/static/images/whatsJudo/throw.jpg" />
+              <carousel-item-with-title
+                text="fixieren am Boden"
+                image="/static/images/whatsJudo/hold.jpg"
+              />
+              <carousel-item-with-title
+                text="Trainieren sämtlicher Muskelgruppen"
+                image="/static/images/whatsJudo/stabil.jpg"
+              />
             </v-carousel>
           </template>
         </home-entrie>
+        <home-entrie
+          title="Unsere Werte beim Judo"
+          extra-beside-text
+          :extra-width-percent="50"
+          title-in-split-right
+        >
+          <template #text>
+            Zu dem Spielen beim Judo die Werte wie <b>Respekt</b>, <b>Disziplin</b> und
+            <b>Selbstbehauptung</b> eine große Rolle und so werden auch diese Werte bei uns
+            gefördert.
+          </template>
+          <template #extra>
+            <v-timeline align="start" side="end">
+              <v-timeline-item dot-color="blue">
+                <h6 class="text-h6">Respekt</h6>
+              </v-timeline-item>
+              <v-timeline-item dot-color="green">
+                <h6 class="text-h6">Selbstbehauptung</h6>
+              </v-timeline-item>
+              <v-timeline-item dot-color="orange">
+                <h6 class="text-h6">Disziplin</h6>
+              </v-timeline-item>
+            </v-timeline>
+          </template>
+        </home-entrie>
+
+        <home-entrie title="Und sonst so?"></home-entrie>
+        <v-tabs color="#b62b2b" v-model="tab" :show-arrows="$vuetify.display.mobile">
+          <v-tab value="1">Nikolausturnier</v-tab>
+          <v-tab value="2">Wettkämpfe</v-tab>
+          <v-tab value="3">Kinoabende</v-tab>
+        </v-tabs>
+
+        <v-divider></v-divider>
+
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item value="1">
+            <home-entrie-with-image-preset
+              title="Nikolausturnier"
+              image="/static/images/nikolausturnier/total.png"
+            >
+              <template #text>
+                Ein Highlight im Jahreskalender ist unser alljährliches Nikolausturnier, bei dem
+                Judoka aller Altersgruppen zusammenkommen, um ihre Fähigkeiten zu messen und
+                gemeinsam Spaß zu haben.
+              </template>
+            </home-entrie-with-image-preset>
+          </v-tabs-window-item>
+          <v-tabs-window-item value="2">
+            <home-entrie-with-image-preset
+              title="Wettkämpfe"
+              image="/static/images/wettkampf/total.jpg"
+            >
+              <template #text>
+                Für diejenigen, die sich gerne messen wollen, bieten wir die Teilnahme an
+                Wettkämpfen auf verschiedenen Ebenen an – von lokalen Turnieren bis hin zu
+                nationalen Meisterschaften.
+              </template>
+            </home-entrie-with-image-preset>
+          </v-tabs-window-item>
+          <v-tabs-window-item value="3">
+            <home-entrie-with-image-preset
+              title="Kinoabende"
+              image="/static/images/kinoabend/total.jpg"
+            >
+              <template #text>
+                Bei unseren Kinoabenden schauen wir in lockerer Runde ausgewählte Filme — nicht nur
+                judo‑bezogene, sondern auch beliebte Klassiker und aktuelle Hits. Gemeinsam
+                entspannen, Snacks teilen und über Filme und Sport plaudern.
+              </template>
+            </home-entrie-with-image-preset>
+          </v-tabs-window-item>
+        </v-tabs-window>
       </v-container>
     </main>
   </v-container>