Redesign home page

software/backend/data/bands.json

@@ -6,7 +6,7 @@
       "foundingYear": 1983,
       "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
       "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
-      "images": [ "red-hot-chili-peppers.jpg" ],
+      "images": [ "red-hot-chili-peppers-1.jpg" ],
       "logo": "red-hot-chili-peppers-logo.png",
       "genreId": 0,
       "members": [
@@ -45,8 +45,8 @@
       "foundingYear": 1985,
       "descriptionEn": "Radiohead are an English rock band formed in Abingdon, Oxfordshire, in 1985. They comprise Thom Yorke (vocals, guitar, piano, keyboards); brothers Jonny Greenwood (guitar, keyboards, other instruments) and Colin Greenwood (bass); Ed O'Brien (guitar, backing vocals); and Philip Selway (drums, percussion). They have worked with the producer Nigel Godrich and the cover artist Stanley Donwood since 1994. Radiohead's experimental approach is credited with advancing the sound of alternative rock.",
       "descriptionDe": "Radiohead ist eine britische Rockband, die 1985 in Oxford, England gegründet wurde. Die Band besteht aus Thom Yorke (Gesang, Rhythmusgitarre, Piano), Jonny Greenwood (Lead-Gitarre, Keyboard, Ondes Martenot), Colin Greenwood (E-Bass, Keyboard), Ed O’Brien (Gitarre, Backgroundvocals) und Phil Selway (Schlagzeug, Backgroundvocals). Radioheads experimenteller Ansatz gilt als Wegbereiter für den Sound des Alternative Rocks.",
-      "images": [ "radiohead.jpg" ],
-      "logo": "radiohead-logo.png",
+      "images": [ "radiohead-1.jpg" ],
+      "logo": "radiohead-logo.jpg",
       "genreId": 1,
       "members": [
         {
@@ -80,6 +80,163 @@
           "accountId": 0,
           "rating": 5,
           "bandId": 1
+        },
+        {
+          "accountId": 1,
+          "rating": 4,
+          "bandId": 1
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "name": "Arctic Monkeys",
+      "foundingYear": 2002,
+      "descriptionEn": "Arctic Monkeys are an English rock band formed in Sheffield in 2002. The group consists of lead singer Alex Turner, drummer Matt Helders, guitarist Jamie Cook and bassist Nick O'Malley. Former bassist Andy Nicholson left the band in 2006 shortly after their debut album, Whatever People Say I Am, That's What I'm Not, was released.",
+      "descriptionDe": "Die Arctic Monkeys sind eine vierköpfige britische Alternative-Rock-Band mit Einflüssen aus Post-Punk und Garage Rock. Sie wurde 2002 im englischen Sheffield gegründet und veröffentlichte 2006 ihr Debütalbum, das Platz eins der britischen Charts erreichte. 2007, 2009, 2011, 2013 und 2018 erschienen jeweils weitere Alben der Musikgruppe, die alle ebenfalls die Spitzenposition in Großbritannien erreichten. Aktuelles Album der Band ist das am 21. Oktober 2022 erschienene The Car.",
+      "images": [ "arctic-monkeys-1.jpg", "arctic-monkeys-2.jpg" ],
+      "logo": "arctic-monkeys-logo.png",
+      "genreId": 2,
+      "members": [
+        {
+          "name": "Glyn Jones",
+          "bandId": 2,
+          "image": "glyn-jones.jpg"
+        },
+        {
+          "name": "Alex Turner",
+          "bandId": 2,
+          "image": "alex-turner.jpg"
+        },
+        {
+          "name": "Jamie Cook",
+          "bandId": 2,
+          "image": "jamie-cook.jpg"
+        },
+        {
+          "name": "Matt Helders",
+          "bandId": 2,
+          "image": "matt-helders.jpg"
+        },
+        {
+          "name": "Andy Nicholson",
+          "bandId": 2,
+          "image": "andy-nicholson.jpg"
+        }
+      ],
+      "ratings": [
+        {
+          "accountId": 0,
+          "rating": 5,
+          "bandId": 2
+        },
+        {
+          "accountId": 1,
+          "rating": 3,
+          "bandId": 2
+        },
+        {
+          "accountId": 2,
+          "rating": 4,
+          "bandId": 2
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "name": "Coldplay",
+      "foundingYear": 1997,
+      "descriptionEn": "Coldplay are a British rock band formed in London in 1997. They consist of vocalist and pianist Chris Martin, guitarist Jonny Buckland, bassist Guy Berryman, drummer and percussionist Will Champion, and manager Phil Harvey. They are best known for their live performances, and for impacting popular culture through their artistry, advocacy and achievements.",
+      "descriptionDe": "Coldplay ist eine britische Pop-Rock-Band, bestehend aus Chris Martin, Jonny Buckland, Will Champion und Guy Berryman. Sie ist eine der weltweit erfolgreichsten Bands der 2000er-Jahre und hat knapp 80 Millionen Tonträger weltweit verkauft, davon 50 Millionen Alben.",
+      "images": [ "coldplay-1.jpg" ],
+      "logo": "coldplay-logo.jpg",
+      "genreId": 2,
+      "members": [
+        {
+          "name": "Chris Martin",
+          "bandId": 3,
+          "image": "chris-martin.jpg"
+        },
+        {
+          "name": "Jonny Buckland",
+          "bandId": 3,
+          "image": "jonny-buckland.jpg"
+        },
+        {
+          "name": "Guy Berryman",
+          "bandId": 3,
+          "image": "guy-berryman.jpg"
+        },
+        {
+          "name": "Will Champion",
+          "bandId": 3,
+          "image": "will-champion.jpg"
+        },
+        {
+          "name": "Phil Harvey",
+          "bandId": 2,
+          "image": "phil-harvey.jpg"
+        }
+      ],
+      "ratings": [
+        {
+          "accountId": 0,
+          "rating": 5,
+          "bandId": 3
+        },
+        {
+          "accountId": 1,
+          "rating": 4,
+          "bandId": 3
+        }
+      ]
+    },
+    {
+      "id": 4,
+      "name": "Foo Fighters",
+      "foundingYear": 1994,
+      "descriptionEn": "Foo Fighters is an American rock band formed in Seattle in 1994. Founded as a one-man project by former Nirvana drummer Dave Grohl, the lineup now consists of Grohl (lead vocals, guitar), Nate Mendel (bass), Chris Shiflett and Pat Smear (guitars), Rami Jaffee (keyboards), and Josh Freese (drums). Drummers William Goldsmith and Taylor Hawkins, along with guitarist Franz Stahl, are former members of the band.",
+      "descriptionDe": "Foo Fighters ist eine US-amerikanische Rockband. Prominentestes Mitglied und Band-Gründer ist der ehemalige Nirvana-Schlagzeuger Dave Grohl. ",
+      "images": [ "foo-fighters-1.jpg" ],
+      "logo": "foo-fighters-logo.png",
+      "genreId": 2,
+      "members": [
+        {
+          "name": "Dave Grohl",
+          "bandId": 4,
+          "image": "dave-grohl.jpg"
+        },
+        {
+          "name": "Pat Smear",
+          "bandId": 4,
+          "image": "pat-smear.jpg"
+        },
+        {
+          "name": "Nate Mendel",
+          "bandId": 4,
+          "image": "nate-mendel.jpg"
+        },
+        {
+          "name": "Chris Shiflett",
+          "bandId": 4,
+          "image": "chris-shiflett.jpg"
+        },
+        {
+          "name": "Rami Jaffee",
+          "bandId": 4,
+          "image": "rami-jaffee.jpg"
+        },
+        {
+          "name": "Josh Freese",
+          "bandId": 4,
+          "image": "josh-freese.jpg"
+        }
+      ],
+      "ratings": [
+        {
+          "accountId": 0,
+          "rating": 5,
+          "bandId": 4
         }
       ]
     }

software/backend/data/genres.json

@@ -7,6 +7,10 @@
     {
       "id": 1,
       "name": "Art rock"
+    },
+    {
+      "id": 2,
+      "name": "Alternatve Rock"
     }
   ]
 }

software/backend/data/locations.json

@@ -6,6 +6,27 @@
       "address": "Ferdinand-Wilhlem-Fricke-Weg 8",
       "cityId": 0,
       "image": "swiss-life-hall.jpg"
+    },
+    {
+      "id": 1,
+      "name": "Capitol",
+      "address": "Schwarzer Bär 2",
+      "cityId": 0,
+      "image": "capitol.jpg"
+    },
+    {
+      "id": 2,
+      "name": "ZAG Arena",
+      "address": "EXPO-Plaza 7",
+      "cityId": 0,
+      "image": "zag-arena.jpg"
+    },
+    {
+      "id": 3,
+      "name": "Kulturzentrum Faust",
+      "address": "Zur Bettfedernfabrik 3",
+      "cityId": 0,
+      "image": "faust-hannover.jpg"
     }
   ]
 }

software/backend/data/tours.json

@@ -27,7 +27,7 @@
           "date": "2024-11-30",
           "price": 104,
           "inStock": 120,
-          "locationId": 0,
+          "locationId": 2,
           "tourId": 1
         },
         {
@@ -39,6 +39,54 @@
           "tourId": 1
         }
       ]
+    },
+    {
+      "id": 2,
+      "name": "European Tour",
+      "bandId": 2,
+      "offered": true,
+      "shows": [
+        {
+          "id": 3,
+          "date": "2024-10-15",
+          "price": 80,
+          "inStock": 99,
+          "locationId": 3,
+          "tourId": 2
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "name": "Moon Music Tour",
+      "bandId": 3,
+      "offered": true,
+      "shows": [
+        {
+          "id": 4,
+          "date": "2024-10-15",
+          "price": 80,
+          "inStock": 99,
+          "locationId": 1,
+          "tourId": 3
+        }
+      ]
+    },
+    {
+      "id": 4,
+      "name": "But Here We Are Tour",
+      "bandId": 4,
+      "offered": true,
+      "shows": [
+        {
+          "id": 5,
+          "date": "2024-10-15",
+          "price": 80,
+          "inStock": 99,
+          "locationId": 2,
+          "tourId": 4
+        }
+      ]
     }
   ]
 }

software/backend/routes/band.routes.ts

@@ -8,7 +8,9 @@ export const band = Router()
 
 // Get all bands
 band.get("/", (req: Request, res: Response) => {
-  Band.findAll()
+  Band.findAll({
+    include: [ Genre, Rating ]
+  })
     .then(bands => {
       res.status(200).json(bands)
     })

software/package-lock.json

@@ -2650,6 +2650,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -3782,6 +3791,60 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.79.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.3.tgz",
+      "integrity": "sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz",
+      "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",

software/src/App.vue

@@ -6,17 +6,17 @@ import navigationAppendItems from './components/navigation/navigationAppendItems
 import navigationPrependItems from './components/navigation/navigationPrependItems.vue';
 import { usePreferencesStore } from './data/stores/preferencesStore';
 import { useFeedbackStore } from './data/stores/feedbackStore';
-import { useTourStore } from './data/stores/tourStore';
+import { useShowStore } from './data/stores/showStore';
 
 const preferencesStore = usePreferencesStore()
-const tourStore = useTourStore()
+const showStore = useShowStore()
 const feedbackStore = useFeedbackStore()
 
 const theme = useTheme()
 
 theme.global.name.value = preferencesStore.theme
 
-tourStore.fetchAllTours()
+showStore.fetchAllTours()
 
 // Global watcher
 watch(() => preferencesStore.language, () => {
@@ -30,6 +30,7 @@ watch(() => preferencesStore.language, () => {
       height="80"
       color="primary" 
       class="px-5"
+      elevation="0"
     >
       <template #prepend>
         <navigation-prepend-items />
@@ -63,9 +64,17 @@ watch(() => preferencesStore.language, () => {
       </v-snackbar>
 
       <!-- Here changes the router the content -->
-      <v-container max-width="1200">
-        <router-view></router-view>
+      <v-container max-width="1200" class="pt-0 pb-5">
+        <v-sheet>
+          <router-view></router-view>
+        </v-sheet>
       </v-container>
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+.v-sheet {
+  background-color: #333333;
+}
+</style>

software/src/components/cardWithTopImage.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps({
+  image: String,
+  title: String
+})
+</script>
+
+<template>
+  <v-card>
+    <v-img
+      :src="'http://localhost:3000/static/' + image"
+      aspect-ratio="1"
+      style="background-color: aliceblue;"
+      cover
+    />
+
+    <v-card-title v-if="title">
+      {{ title }}
+    </v-card-title>
+
+    <div class="px-4 pb-4" v-if="$slots.default">
+      <slot></slot>
+    </div>
+
+    <v-card-actions v-if="$slots.actions" class="card-actions position-absolute bottom-0 right-0">
+      <v-spacer />
+      <slot name="actions"></slot>
+    </v-card-actions>
+  </v-card>
+</template>

software/src/components/navigationItems.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { useBasketStore } from '@/data/stores/basketStore';
-import { useAccountStore } from '@/data/stores/accountStore';
-
-const accountStore = useAccountStore()
-const basketStore = useBasketStore()
-const navRail = defineModel("navRail", { type: Boolean })
-</script>
-
-<template>
-  <v-list>
-    <!-- Shopping Section -->
-
-    <v-list-subheader>
-      <div v-if="!navRail">{{ $t('menu.shopping.shopping') }}</div>
-      <div v-else></div>
-    </v-list-subheader>
-    
-    <v-list-item :title="$t('menu.shopping.ticket', 2)" prepend-icon="mdi-ticket" to="/" link />
-    <v-list-item :title="$t('menu.shopping.basket')" to="/basket" link >
-      <template v-slot:prepend>
-        <v-badge color="primary" :content="basketStore.itemsInBasket.length">
-          <v-icon icon="mdi-cart" />
-        </v-badge>
-      </template>
-    </v-list-item>
-
-    <v-divider />
-
-
-    <!-- Account Section -->
-
-    <v-list-subheader>
-      <div v-if="!navRail">{{ $t('menu.account.accountManagement') }}</div>
-      <div v-else></div>
-    </v-list-subheader>
-
-    <v-expand-transition>
-      <div v-if="accountStore.userAccount.id == null">
-        <v-list-item v-if="accountStore.userAccount.id == null" :title="$t('menu.account.login')" prepend-icon="mdi-login" to="/login" link />
-      </div>
-    </v-expand-transition>
-
-    <v-expand-transition>
-      <div v-if="accountStore.userAccount.id != null">
-        <v-list-item :title="$t('menu.account.account')" prepend-icon="mdi-account" to="/account" link />
-        <v-list-item :title="$t('menu.account.order', 2)" prepend-icon="mdi-cart-check" to="/orders" link />
-        <v-list-item :title="$t('menu.account.logout')" prepend-icon="mdi-logout" @click="accountStore.logout" link />
-      </div>
-    </v-expand-transition>
-
-    <v-divider />
-
-
-    <!-- System and help section -->
-    
-    <v-list-subheader>
-      <div v-if="!navRail">{{ $t('menu.systemAndHelp.systemAndHelp') }}</div>
-      <div v-else></div>
-    </v-list-subheader>
-    <v-list-item :title="$t('menu.systemAndHelp.helpInstructions')" prepend-icon="mdi-chat-question" to="/help" link />
-    <v-list-item :title="$t('menu.systemAndHelp.scoreBoard')" prepend-icon="mdi-podium-gold" to="/scoreBoard" link />
-    <v-list-item :title="$t('menu.systemAndHelp.preferences')" prepend-icon="mdi-cog" to="/preferences" link />
-
-
-    <div v-if="accountStore.userAccount.accountRole.privilegeAdminPanel">
-      <v-divider />
-
-      <v-list-subheader>
-        <div v-if="!navRail">{{ $t('menu.admin.admin') }}</div>
-        <div v-else></div>
-      </v-list-subheader>
-
-      <v-list-item :title="$t('menu.admin.dashboard')" prepend-icon="mdi-view-dashboard" to="/admin/dashboard" link />
-    </div>
-    
-  </v-list>
-</template>

software/src/components/sectionDivider.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps({
+  title: String
+})
+</script>
+
+<template>
+  <v-row class="pt-3">
+    <v-col class="d-flex justify-center align-center">
+      <v-sheet height="12" width="100%" color="primary" :rounded="true" />
+    </v-col>
+    
+    <v-col class="v-col-auto">
+      <span class="text-h6">{{ title }}</span>
+    </v-col>
+
+    <v-col class="d-flex justify-center align-center">
+      <v-sheet height="12" width="100%" color="primary" :rounded="true" />
+    </v-col>
+  </v-row>
+</template>

software/src/data/models/bandModel.ts

@@ -3,13 +3,13 @@ import { MemberModel } from "./memberModel"
 import { RatingModel } from "./ratingModel"
 
 export class BandModel {
-  id: Number
+  id: number
   name: string
-  foundingYear: Number
-  descriptionEn: String
-  descriptionDe: String
-  images: Array<String>
-  logo: String
+  foundingYear: number
+  descriptionEn: string
+  descriptionDe: string
+  images: Array<string>
+  logo: string
   genre: GenreModel
   ratings: Array<RatingModel>
   members: Array<MemberModel>

software/src/data/models/locationModel.ts

@@ -1,9 +1,9 @@
 import { CityModel } from "./cityModel"
 
 export class LocationModel {
-  id: Number
-  name: String
-  address: String
+  id: number
+  name: string
+  address: string
   city: CityModel
-  image: String
+  image: string
 }

software/src/data/models/ratingModel.ts

@@ -2,7 +2,7 @@ import { AccountModel } from "./accountModel"
 import { BandModel } from "./bandModel"
 
 export class RatingModel {
-  id: Number
-  rating: Number
+  id: number
+  rating: number
   band: BandModel
 }

software/src/data/stores/showStore.ts

@@ -0,0 +1,36 @@
+import { useLocalStorage } from "@vueuse/core";
+import { defineStore } from "pinia";
+import { TourModel } from "../models/tourModel";
+import { getAllTours } from "../api/tourApi";
+import { GenreModel } from "../models/genreModel";
+import { getAllBands } from "../api/bandApi";
+import { BandModel } from "../models/bandModel";
+import { LocationModel } from "../models/locationModel";
+import { getAllLocations } from "../api/locationApi";
+
+export const useShowStore = defineStore("showStore", {
+  state: () => ({
+    tours: useLocalStorage<Array<TourModel>>("hackmycart/showStore/tours", []),
+    bands: useLocalStorage<Array<BandModel>>("hackmycart/showStore/bands", []),
+    locations: useLocalStorage<Array<LocationModel>>("hackmycart/showStore/locations", [])
+  }),
+  
+  actions: {
+    async fetchAllTours() {
+      await getAllTours()
+        .then(result => {
+          this.tours = result.data
+        })
+
+      await getAllBands()
+        .then(result => {
+          this.bands = result.data
+        })
+
+      await getAllLocations() 
+        .then(result => {
+          this.locations = result.data
+        })
+    }
+  }
+})

software/src/data/stores/tourStore.ts

@@ -1,21 +0,0 @@
-import { useLocalStorage } from "@vueuse/core";
-import { defineStore } from "pinia";
-import { TourModel } from "../models/tourModel";
-import { getAllTours } from "../api/tourApi";
-import { GenreModel } from "../models/genreModel";
-
-export const useTourStore = defineStore("tourStore", {
-  state: () => ({
-    tours: useLocalStorage<Array<TourModel>>("hackmycart/tourStore/tours", []),
-    genres: useLocalStorage<Array<GenreModel>>("hackmycart/tourStore/genres", [])
-  }),
-  
-  actions: {
-    async fetchAllTours() {
-      await getAllTours()
-        .then(result => {
-          this.tours = result.data
-        })
-    }
-  }
-})

software/src/locales/de.json

@@ -3,27 +3,19 @@
     "shopping": {
       "allEvents": "Alle Events",
       "allLocations": "Alle Orte",
-      "allGenres": "Alle Genres",
-      "basket": "Warenkorb"
-    },
-    "account": {
-      "accountManagement": "Kontoverwaltung",
-      "account": "Account",
-      "login": "Login",
-      "order": "Bestellung | Bestellungen",
-      "logout": "Ausloggen"
-    },
-    "systemAndHelp": {
-      "systemAndHelp": "System & Hilfe",
-      "helpInstructions": "Hilfestellung",
-      "preferences": "Einstellungen",
-      "scoreBoard": "Score Board"
-    },
-    "admin": {
-      "admin": "Administration",
-      "dashboard": "Dashboard"
+      "allGenres": "Alle Genres"
     }
   },
+  "shows": {
+    "tickets": "Ticket | Tickets"
+  },
+
+
+
+
+
+
+  
   "tours": {
     "concert": "Konzert | Konzerte"
   },

software/src/locales/en.json

@@ -3,27 +3,19 @@
     "shopping": {
       "allEvents": "All Events",
       "allLocations": "All Locations",
-      "allGenres": "All Genres",
-      "basket": "Basket"
-    },
-    "account": {
-      "account": "Account Management",
-      "login": "Login",
-      "order": "Order | Orders",
-      "logout": "Logout",
-      "accountManagement": "Account Management"
-    },
-    "systemAndHelp": {
-      "systemAndHelp": "System & Help",
-      "helpInstructions": "Help Instructions",
-      "preferences": "Preferences",
-      "scoreBoard": "Score Board"
-    },
-    "admin": {
-      "admin": "Administration",
-      "dashboard": "Dashboard"
+      "allGenres": "All Genres"
     }
   },
+  "shows": {
+    "tickets": "Ticket | Tickets"
+  },
+
+
+
+
+
+
+
   "tours": {
     "concert": "Concert | Concerts"
   },

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
+  <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>
+
+