Location page displays city groups with all available concert locations

software/src/pages/shows/genresPage/index.vue

@@ -1,6 +1,18 @@
 <script setup lang="ts">
+import sectionDivider from '@/components/sectionDivider.vue';
+import { useShowStore } from '@/data/stores/showStore';
+
+const showStore = useShowStore()
 </script>
 
 <template>
-  Genres
+  <v-container>
+    <div v-for="genre in showStore.genres">
+      <v-row>
+        <v-col>
+          <section-divider :title="genre.name" />
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
 </template>

software/src/pages/shows/locationsPage/index.vue

@@ -1,6 +1,33 @@
 <script setup lang="ts">
+import sectionDivider from '@/components/sectionDivider.vue';
+import { useShowStore } from '@/data/stores/showStore';
+import cardWithTopImage from '@/components/cardWithTopImage.vue';
+
+const showStore = useShowStore()
 </script>
 
 <template>
-  Locations
+  <v-container>
+    <div v-for="city in showStore.cities">
+      <v-row>
+        <v-col>
+          <section-divider 
+            :title="city.name"
+            :image="'cities/' + city.image"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col v-for="location in city.locations" cols="3">
+          <card-with-top-image
+            :image="'locations/' + location.image"
+            :title="location.name"
+          >
+            {{ location.address }}
+          </card-with-top-image>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
 </template>