diff --git a/src/assets/items/david.jpg b/src/assets/items/david.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8c1ac13073b50a49950aedf26a40b234fe7187a0
Binary files /dev/null and b/src/assets/items/david.jpg differ
diff --git a/src/assets/items/galaxy.jpg b/src/assets/items/galaxy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4b27cc7551cd7dc918098bd6b323b6734604da85
Binary files /dev/null and b/src/assets/items/galaxy.jpg differ
diff --git a/src/assets/items/goofy.jpg b/src/assets/items/goofy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..270d8c456cbdde85cb3f721adeb43f7118e2fd95
Binary files /dev/null and b/src/assets/items/goofy.jpg differ
diff --git a/src/assets/items/panda.webp b/src/assets/items/panda.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d4e6d6e132d7a139b8f3babdee6ad6adef80b06d
Binary files /dev/null and b/src/assets/items/panda.webp differ
diff --git a/src/assets/items/sus.jpg b/src/assets/items/sus.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ae3f79f0045917f508d5e708b647f7a414dac561
Binary files /dev/null and b/src/assets/items/sus.jpg differ
diff --git a/src/assets/items/v-buck.png b/src/assets/items/v-buck.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb2c4ae630ea455e059a6e420df50eb9927f3f30
Binary files /dev/null and b/src/assets/items/v-buck.png differ
diff --git a/src/components/Buttons/ShopButton.vue b/src/components/Buttons/ShopButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e28fcdb6e68eb87602d970bd0d612a46270668d
--- /dev/null
+++ b/src/components/Buttons/ShopButton.vue
@@ -0,0 +1,15 @@
+<template>
+ <button type="button" class="btn btn-primary" id="buttonStyle"><img src="@/assets/items/v-buck.png" style="width: 2rem"> +{{ buttonText }}</button>
+</template>
+
+<script>
+export default {
+ props: ['buttonText']
+}
+</script>
+
+<style scoped>
+ #buttonStyle {
+ border-radius: 3rem;
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/FeedbackView.vue b/src/views/FeedbackView.vue
index 37264535422ff7742a1e6e410d4e6338c0752598..6eef349d66eda4e3145a12372e9061ccf2cecedb 100644
--- a/src/views/FeedbackView.vue
+++ b/src/views/FeedbackView.vue
@@ -77,7 +77,6 @@ textarea {
transition: background-color 0.2s ease 0s;
}
-
textarea:focus {
background: none repeat scroll 0 0 #FFFFFF;
outline-width: 0;
diff --git a/src/views/ShopView.vue b/src/views/ShopView.vue
index 9095328987e0c5479f039dd59d667f0533d4cb71..55ef335f11efa0b03a899182231f1208d0f17888 100644
--- a/src/views/ShopView.vue
+++ b/src/views/ShopView.vue
@@ -1,3 +1,108 @@
<template>
- Hallo
-</template>
\ No newline at end of file
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <h1>League</h1>
+ <div class="category row justify-content-between mb-5 m-2">
+ <!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+
+
+ <!--</div>-->
+ </div>
+ </div>
+ <div class="col-md-12">
+ <h1>Fantacy</h1>
+ <div class="category row justify-content-between mb-5 m-2">
+ <!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+
+
+ <!--</div>-->
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import ShopButton from '@/components/Buttons/ShopButton.vue';
+</script>
+
+<style scoped>
+.card {
+ box-shadow: none;
+ margin: 10px;
+ border-radius: 8px;
+ padding-left: 5px;
+ padding-right: 5px;
+ /* Rounded corners */
+}
+
+.card:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-body{
+ height: 100px;
+ padding: 5px;
+}
+
+.col-md-12 {
+ border-bottom: 2px solid #000000;
+}
+</style>
\ No newline at end of file