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/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>