Redesign home page

software/src/pages/homePage/highlightCarousel.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import OutlinedButton from '@/components/outlinedButton.vue';
+import { useShowStore } from '@/data/stores/showStore';
+
+const tourStore = useShowStore()
+</script>
+
+<template>
+  <v-carousel
+    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="tour in tourStore.tours"
+      :src="'http://localhost:3000/static/bands/' + tour.band.images[0]" 
+      cover
+    >
+      <v-card
+        class="position-absolute bottom-0"
+        :title="tour.band.name"
+        width="100%"
+        :rounded="false"
+        background-opacity="50%"
+      >
+        <v-card-text>
+          <div>
+            {{ tour.band.descriptionDe }}
+          </div>
+
+          <outlined-button append-icon="mdi-arrow-right" class="mt-2">
+            {{ $t('shows.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,6 +1,90 @@
 <script setup lang="ts">
+import { useShowStore } from '@/data/stores/showStore';
+import highlightCarousel from './highlightCarousel.vue';
+import sectionDivider from '@/components/sectionDivider.vue';
+import cardWithTopImage from '@/components/cardWithTopImage.vue';
+import { RatingModel } from '@/data/models/ratingModel';
+
+const showStore = useShowStore()
+
+function calcRating(ratings: Array<RatingModel>) {
+  let sum = 0
+
+  for (let rating of ratings) {
+    sum += rating.rating
+  }
+
+  return sum / ratings.length
+}
 </script>
 
 <template>
-  Home
-</template>
+  <highlight-carousel />
+
+  <v-container>
+    <v-row>
+      <v-col>
+        <section-divider title="Top Tours" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col v-for="i in 4" cols="3">
+        <card-with-top-image
+          :image="'bands/' + showStore.tours[i].band.images[0]"
+          :title="showStore.tours[i].name"
+        >
+          {{ showStore.bands[i].name }} 
+        </card-with-top-image>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <section-divider title="Top Bands" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col v-for="i in 4" cols="3">
+        <card-with-top-image
+          :image="'bands/' + showStore.bands[i - 1].logo"
+          :title="showStore.bands[i - 1].name"
+        >
+          {{ showStore.bands[i - 1].genre.name }}
+
+          <div class="d-flex justify-center pt-3">
+            <v-rating
+              density="compact"
+              readonly
+              size="large"
+              half-increments
+              active-color="orange"
+              :model-value="calcRating(showStore.bands[i - 1].ratings)"
+            />
+          </div>
+        </card-with-top-image>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <section-divider title="Top Locations" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col v-for="location in showStore.locations" cols="3">
+        <card-with-top-image
+          :image="'locations/' + location.image"
+          :title="location.name"
+        >
+          {{ location.address }}
+          {{ location.city.name }}, {{ location.city.country }}
+        </card-with-top-image>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+