New locationDetailPage displays concert in a location, new datasets, images, URL path changed

software/src/pages/homePage/index.vue

@@ -16,63 +16,75 @@ const concertStore = useConcertStore()
 
   <v-container>
     <v-row>
-      <v-col>
-        <section-divider :title="$t('shows.highlights')" />
-      </v-col>
-    </v-row>
+      <v-spacer />
 
-    <v-row>
-      <v-col v-for="i in 6" cols="2">
-        <card-with-top-image
-          :image="'tours/' + concertStore.tours[i - 1].image"
-          :title="concertStore.tours[i - 1].band.name"
-          smaller-title
-        >
-          Tickets ab {{ lowestTicketPrice(concertStore.tours[i - 1]) }} €
-        </card-with-top-image>
-      </v-col>
-    </v-row>
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('topEvents')" />
+          </v-col>
+        </v-row>
 
-    <v-row>
-      <v-col>
-        <outlined-button
-          append-icon="mdi-chevron-right"
-          @click="router.push('/shows/concerts')"
-          block
-        >
-          {{ $t('menu.allConcerts') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
+        <v-row>
+          <v-col v-for="i in 4" cols="3">
+            <card-with-top-image
+              :image="'tours/' + concertStore.tours[i - 1].image"
+              :title="concertStore.tours[i - 1].band.name"
+              smaller-title
+              @click="router.push('/bands/' + concertStore.tours[i - 1].band.name.replaceAll(' ', '-').toLowerCase())"
+            >
+              ab {{ lowestTicketPrice(concertStore.tours[i - 1]) }} €
+            </card-with-top-image>
+          </v-col>
+        </v-row>
 
-    <v-row>
-      <v-col>
-        <section-divider :title="$t('shows.topLocations')" />
-      </v-col>
-    </v-row>
+        <v-row>
+          <v-col>
+            <outlined-button
+              append-icon="mdi-chevron-right"
+              @click="router.push('/events')"
+              block
+            >
+              {{ $t('allEvents') }}
+            </outlined-button>
+          </v-col>
+        </v-row>
 
-    <v-row>
-      <v-col v-for="i in 6" cols="2">
-        <card-with-top-image
-          :image="'locations/' + concertStore.locations[i + 2].image"
-          :title="concertStore.locations[i + 2].name"
-          smaller-title
-        >
-          {{ concertStore.locations[i + 2].city.name }}, {{ concertStore.locations[i + 2].city.country }}
-        </card-with-top-image>
-      </v-col>
-    </v-row>
+        <v-row>
+          <v-col>
+            <section-divider :title="$t('topLocations')" />
+          </v-col>
+        </v-row>
 
-    <v-row>
-      <v-col>
-        <outlined-button
-          append-icon="mdi-chevron-right"
-          @click="router.push('/shows/locations')"
-          block
-        >
-          {{ $t('menu.allLocations') }}
-        </outlined-button>
+        <v-row>
+          <v-col v-for="i in 8" cols="3">
+            <card-with-top-image
+              :image="'locations/' + concertStore.locations[i + 2].image"
+              :title="concertStore.locations[i + 2].name"
+              smaller-title
+            >
+              {{ concertStore.locations[i + 2].city.name }}, {{ concertStore.locations[i + 2].city.country }}
+            </card-with-top-image>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <outlined-button
+              append-icon="mdi-chevron-right"
+              @click="router.push('/locations')"
+              block
+            >
+              {{ $t('allLocations') }}
+            </outlined-button>
+          </v-col>
+        </v-row>
       </v-col>
+
+      <v-spacer />
     </v-row>
+    
+
+    
   </v-container>
 </template>