Redesign Band highlight section on HomePage, fix Footer spacing bug

software/src/pages/homePage/bandsSection.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useBandStore } from '@/stores/band.store';
+import { useRouter } from 'vue-router';
+
+const bandStore = useBandStore()
+const router = useRouter()
+
+bandStore.getBands()
+</script>
+
+<template>
+  <v-slide-group
+    show-arrows
+    center-active
+  >
+    <v-slide-group-item
+      v-for="band of bandStore.bands"
+      v-slot="{ isSelected, toggle }"
+    >
+      <v-hover
+        v-slot="{ isHovering, props }"
+      >
+        <v-card
+          :class="{ 'on-hover': isHovering }"
+          :elevation="isHovering ? 12 : 2"
+          v-bind="props"
+          class="mx-2"
+          @click="router.push('bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
+        >
+          <v-img
+            class="d-flex align-center text-center"
+            :src="'http://localhost:3000/static/' + band.imageMembers"
+            height="250px"
+            width="350"
+            cover
+          >
+            <v-card-title class="text-white text-h5">
+              <p class="mt-4">
+                {{ band.name }}
+              </p>
+
+              <p class="ma-0 text-body-1 font-weight-bold">
+                {{ band.genres[0].name }}
+              </p>
+            </v-card-title>
+          </v-img>
+        </v-card>
+      </v-hover>
+    </v-slide-group-item>
+  </v-slide-group>
+</template>
+
+<style scoped>
+  .v-card {
+    transition: opacity .4s ease-in-out;
+  }
+
+  .v-card:not(.on-hover) {
+    opacity: 0.6;
+  }
+
+  .show-btns {
+    color: rgba(255, 255, 255, 1) !important;
+  }
+</style>

software/src/pages/homePage/highlightCarousel.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { useBandStore } from '@/stores/band.store';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-
-const router = useRouter()
-const bandStore = useBandStore()
-
-bandStore.getBands()
-</script>
-
-<template>
-  <v-carousel
-    v-if="bandStore.bands.length > 0"
-    hide-delimiters
-    hide-delimiter-background
-    height="700"
-    show-arrows
-  >
-    <template #prev="{ props }">
-      <v-btn
-        variant="text"
-        @click="props.onClick"
-        icon="mdi-chevron-left"
-      />
-    </template>
-
-    <template #next="{ props }">
-      <v-btn
-        variant="text"
-        @click="props.onClick"
-        icon="mdi-chevron-right"
-      />
-    </template>
-
-    <v-carousel-item
-      
-      v-for="band in bandStore.bands"
-      :src="'http://localhost:3000/static/' + band.imageMembers" 
-      cover
-    >
-      <v-card
-        class="position-absolute bottom-0"
-        :title="band.name"
-        width="100%"
-        :rounded="false"
-        background-opacity="50%"
-      >
-        <v-card-text>
-          <div>
-            {{ band.descriptionDe }}
-          </div>
-
-          <outlined-button
-            append-icon="mdi-arrow-right"
-            class="mt-2"
-            color="primary"
-            @click="router.push('bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
-          >
-            {{ $t('ticket.tickets', 2) }}
-          </outlined-button>
-        </v-card-text>
-      </v-card>
-    </v-carousel-item>
-  </v-carousel>
-</template>
-
-<style scoped>
-.v-card {
-  background: rgba(255, 255, 255, .7);
-  color: black;
-}
-
-.v-card-text {
-  font-weight: bold;
-}
-</style>

software/src/pages/homePage/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import highlightCarousel from './highlightCarousel.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
 import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
 import { useConcertStore } from '@/stores/concert.store';
 import { useLocationStore } from '@/stores/location.store';
+import bandSection from './bandsSection.vue';
 
 const router = useRouter()
 const concertStore = useConcertStore()
@@ -16,9 +16,12 @@ locationStore.getTopLocations()
 </script>
 
 <template>
-  <highlight-carousel />
+  <div class="pt-4">
+    <band-section />
+  </div>
 
   <v-container>
+
     <v-row>
       <v-spacer />
 
@@ -91,8 +94,5 @@ locationStore.getTopLocations()
 
       <v-spacer />
     </v-row>
-    
-
-    
   </v-container>
-</template>
+</template>