Location page displays city groups with all available concert locations

software/src/components/cardWithTopImage.vue

@@ -6,7 +6,10 @@ defineProps({
 </script>
 
 <template>
-  <v-card>
+  <v-card
+    variant="outlined"
+    link
+  >
     <v-img
       :src="'http://localhost:3000/static/' + image"
       aspect-ratio="1"

software/src/components/sectionDivider.vue

@@ -1,11 +1,44 @@
 <script setup lang="ts">
 defineProps({
-  title: String
+  title: String,
+  image: String
 })
+
+function backgroundStyle(image: string) {
+  return {
+    "background-image": 'http://localhost:3000/static/cities/hannover.jpg',
+    height: `100px`
+  }
+}
 </script>
 
 <template>
-  <v-row class="pt-3">
+  <div v-if="image" class="pt-1">
+    <v-img
+      :src="'http://localhost:3000/static/' + image"
+      height="120"
+      gradient="to top right, rgba(0,0,0,.5), rgba(0,0,0,.7)"
+      cover
+      class="rounded-t-xl"
+    >
+      <v-container
+        height="100%"
+        class="d-flex justify-center align-center"
+      >
+        <v-row>
+          <v-spacer />
+
+          <v-col class="v-col-auto">
+            <span class="text-h3" style="color: white;">{{ title }}</span>
+          </v-col>
+
+          <v-spacer />
+        </v-row>
+      </v-container>
+    </v-img>
+  </div>
+
+  <v-row v-else class="pt-3">
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" :rounded="true" />
     </v-col>