Creating whole Band details page

software/src/pages/homePage/index.vue

@@ -5,8 +5,9 @@ import sectionDivider from '@/components/sectionDivider.vue';
 import cardWithTopImage from '@/components/cardWithTopImage.vue';
 import { calcRating, lowestTicketPrice } from '@/scripts/concertScripts';
 import OutlinedButton from '@/components/outlinedButton.vue';
-import router from '@/plugins/router';
+import { useRouter } from 'vue-router';
 
+const router = useRouter()
 const concertStore = useConcertStore()
 </script>
 
@@ -44,48 +45,6 @@ const concertStore = useConcertStore()
       </v-col>
     </v-row>
 
-
-    <v-row>
-      <v-col>
-        <section-divider :title="$t('shows.topBands')" />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col v-for="i in 4" cols="3">
-        <card-with-top-image
-          :image="'bands/' + concertStore.bands[i - 1].logo"
-          :title="concertStore.bands[i - 1].name"
-        >
-          {{ concertStore.bands[i - 1].genres.name }}
-
-          <div class="d-flex justify-center pt-3">
-            <v-rating
-              density="compact"
-              readonly
-              size="large"
-              half-increments
-              active-color="orange"
-              :model-value="calcRating(concertStore.bands[i - 1].ratings)"
-            />
-          </div>
-        </card-with-top-image>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col>
-        <outlined-button
-          append-icon="mdi-chevron-right"
-          @click="router.push('/shows/bands')"
-          block
-        >
-          {{ $t('menu.allBands') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-
-
     <v-row>
       <v-col>
         <section-divider :title="$t('shows.topLocations')" />