Merge branch 'main' into feature/activity-history

.gitlab-ci.yml

+image: node:alpine # Much smaller than other variants, faster and more resource effective
+
 stages:
-  - install
-  - build
+  - install_dependencies
+  - lint
+  - build_project
 
 cache:
+  key: "${CI_COMMIT_REF_SLUG}" # Branch-specific cache keys to have separate caches across branches.
   paths:
     - node_modules/
-  key: "$CI_BUILD_REF_NAME" # Separate cache for each branch
 
 install_dependencies:
-  stage: install
-  image: node:latest
+  stage: install_dependencies
   script:
     - npm install
 
+lint:
+  stage: lint
+  script:
+    - npm run lint
+  allow_failure: true  
+
 build_project:
-  stage: build
-  image: node:latest
+  stage: build_project
   script:
-    - npm run build
+    - npm run build
\ No newline at end of file
+

src/components/BaseComponents/Menu.vue

@@ -59,11 +59,11 @@ function toHome() {
 }
 
 function toSavingGoals() {
-    router.push('/news')
+    router.push('/roadmap')
 }
 
 function toLeaderboard() {
-    router.push('/news')
+    router.push('/leaderboard')
 }
 
 function toNews() {
@@ -71,7 +71,7 @@ function toNews() {
 }
 
 function toStore() {
-    router.push('/news')
+    router.push('/shop')
 }
 
 function toSetting() {
@@ -79,7 +79,7 @@ function toSetting() {
 }
 
 function toFeedback() {
-    router.push('/news')
+    router.push('/feedback')
 }
 
 

src/components/Buttons/ShopButton.vue

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

src/components/LeaderboardComponents/Leaderboard.vue

@@ -131,7 +131,7 @@
     top: -0.5rem;
     background-color: #0A58CA;
     position: absolute;
-    left: -1rem;
+    /**left: -1rem;*/
     box-shadow: 0px 15px 11px -6px #7a7a7d;
   }
   

src/components/NewsComponents/NewsComponent.vue

 <script lang="ts">
+interface news {
+  urlToImage: string;
+  title: string;
+  description: string;
+  url: string;
+}
 export default {
   data() {
     return {
-      articles: []
+      articles: [] as news[]
     };
   },
   mounted() {

src/components/SavingGoalComponents/SavingGoal.vue

+<script lang="ts">
+import SavingGoalList from "@/components/SavingGoalComponents/SavingGoalList.vue";
+import SavingGoalRoadmap from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
+import SavingGoalCreate from "@/components/SavingGoalComponents/SavingGoalCreate.vue";
+export default {
+  components: {SavingGoalCreate, SavingGoalRoadmap, SavingGoalList},
+  data() {
+    return {
+      bluePanelMaxHeight: 'auto' as string,
+      createClicked: false as boolean,
+    };
+  },
+  mounted() {
+    this.calculateBluePanelMaxHeight();
+  },
+  methods: {
+    calculateBluePanelMaxHeight() {
+      // Query the timeline element
+      const timelineElement = document.querySelector('.timeline');
+      if (timelineElement instanceof HTMLElement) {
+        // Calculate the max-height based on the height of the timeline
+        const timelineHeight = timelineElement.offsetHeight;
+        this.bluePanelMaxHeight = `${timelineHeight*1.25}px`;
+      } else {
+        this.bluePanelMaxHeight = '700px';
+      }
+    },
+    createGoal() {
+      this.createClicked = true;
+    },
+    goToSavingGoal() {
+      this.createClicked = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
+        <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
+        <div>
+          <button class="btn btn-light" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
+        </div>
+        <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
+      </div>
+      <div class="spacer"/>
+      <saving-goal-create v-if="createClicked"></saving-goal-create>
+      <saving-goal-roadmap v-else></saving-goal-roadmap>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  margin: 0;
+  width: 100%;
+  box-sizing: unset;
+}
+
+.blue-background {
+  background-color: #0A58CA;
+  width: 27%;
+}
+
+.spacer {
+  width: 10%;
+  background-color: transparent;
+}
+</style>
\ No newline at end of file

src/components/SavingGoalComponents/SavingGoalCreate.vue

+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="col-lg-8">
+    <h1>Create a new saving goal!</h1>
+    <br>
+    <p>Create a name for this saving goal: </p>
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="basic-addon1">Name:</span>
+      <input type="text" class="form-control" placeholder="Name of Saving Goal" aria-label="Username" aria-describedby="basic-addon1">
+    </div>
+
+    <p>Add a description to this saving goal: </p>
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="basic-addon2">Description:</span>
+      <textarea class="form-control" aria-label="With textarea"></textarea>
+    </div>
+
+    <!--Change this to date picker?-->
+    <p>How long should this saving goal last: </p>
+    <div class="input-group mb-3">
+      <input type="text" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
+      <span class="input-group-text">Days</span>
+    </div>
+
+    <p>How much do you want to save during this saving goal: </p>
+    <div class="input-group">
+      <input type="text" class="form-control" aria-label="" placeholder="NOK (as number)">
+      <span class="input-group-text">NOK</span>
+    </div>
+
+    <br>
+    <button class="btn btn-primary btn-lg">Create goal!</button>
+  </div>
+</template>
+
+<style scoped>
+.col-lg-8 {
+  width: 63%;
+  margin-top: 50px;
+}
+</style>
\ No newline at end of file

src/components/SavingGoalComponents/SavingGoalList.vue

+<script setup lang="ts">
+import {ref} from "vue";
+
+const savingGoalList = ref([
+  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr on a spain trip' },
+  { title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
+  { title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
+  { title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' }
+])
+
+const emits = defineEmits(['goToSavingGoal']);
+
+const goToSavingGoal = () => {
+  emits('goToSavingGoal');
+};
+</script>
+
+<template>
+  <div v-for="(savingGoal, index) in savingGoalList" :key="index" class="card bg-primary">
+    <div class="card-header">
+      Saving goal {{ index + 1 }}
+    </div>
+    <div class="card-body">
+      <h5 class="card-title">{{ savingGoal.title }}</h5>
+      <p class="card-text">{{ savingGoal.description }}</p>
+      <a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card-header, .card-text, .card-title {
+  color: white;
+}
+
+* {
+  font-weight: 600;
+}
+
+.card {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file

src/components/SavingGoalComponents/SavingGoalRoadmap.vue

 <script lang="ts">
 interface Step {
-  image: string;
   title: string;
   showPanel: boolean;
   description: string;
@@ -9,69 +8,91 @@ interface Step {
 export default {
   data() {
     return {
+      image: 'https://th.bing.com/th/id/OIG3.NMbdxmKYKVnxYGLOa0Z0?w=1024&h=1024&rs=1&pid=ImgDetMain' as string,
+      altImage: 'https://th.bing.com/th/id/OIG4.gVWUC.rwCb8faTNx31yU?w=1024&h=1024&rs=1&pid=ImgDetMain' as string,
+      title: 'Spain trip' as string,
       //This will be changed to info gathered from backend
       steps: [
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
+        { title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
+        { title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
+        { title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
+        { title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
+        { title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
       ]
+      ,
+      bluePanelMaxHeight: 'auto' as string
     };
   },
   methods: {
     togglePanel(step: Step) {
-      step.showPanel = !step.showPanel;
-    }
-  }
+      if (step.showPanel) {
+        // If the clicked panel is already open, close it
+        step.showPanel = false;
+      } else {
+        //Close all panels before opening new one
+        //Ensure only one panel open at a time
+        this.steps.forEach((s) => (s.showPanel = false));
+        //Open clicked on panel
+        step.showPanel = true;
+      }
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="container">
-    <div class="row">
-      <div class="col-lg-12">
-        <ul class="timeline">
-          <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
-            <div class="timeline-image" @click="togglePanel(step)">
-              <img class="circular-image" :src="step.showPanel ? step.altImage : step.image" alt="">
+  <div class="col-lg-8">
+    <div class="SavingGoalTitle text-center">{{title}}</div>
+    <ul class="timeline">
+      <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
+        <div class="timeline-image z-1" @click="togglePanel(step)">
+          <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
+        </div>
+        <div class="timeline-panel z-3" v-show="step.showPanel">
+          <div class="timeline-heading">
+            <h4>{{ step.title }}</h4>
+            <h4 class="subheading">{{step.description}}</h4>
+          </div>
+          <div class="timeline-body">
+            <br>
+            <p class="">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <br>
+            <div class="progress">
+              <div class="progress-bar" role="progressbar" :style="{ width: step.percentFinished + '%' }" :aria-valuenow="step.percentFinished" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+            <br>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
+              <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 1</label>
             </div>
-            <div class="timeline-panel" v-show="step.showPanel">
-              <div class="timeline-heading">
-                <h4>{{ step.title }}</h4>
-                <h4 class="subheading">{{step.description}}</h4>
-              </div>
-              <div class="timeline-body">
-                <br>
-                <p class="">
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                </p>
-                <br>
-                <div class="progress">
-                  <div class="progress-bar bg-success" role="progressbar" :style="{ width: step.percentFinished + '%' }" :aria-valuenow="step.percentFinished" aria-valuemin="0" aria-valuemax="100"></div>
-                </div>
-                <br>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
-                  <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 1</label>
-                </div>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
-                  <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 2</label>
-                </div>
-              </div>
+            <div class="form-check form-check-inline">
+              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
+              <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 2</label>
             </div>
-            <div class="line" v-if="index < steps.length - 1"></div>
-          </li>
-        </ul>
-      </div>
-    </div>
+          </div>
+        </div>
+        <div class="line" v-if="index < steps.length - 1"></div>
+      </li>
+    </ul>
   </div>
 </template>
 
 <style scoped>
-.container {
-  margin-bottom:20px;
+.col-lg-8 {
+  width: 63%;
+  margin-bottom: 20px;
+}
+
+.SavingGoalTitle {
+  font-weight: 600;
+  font-size: 45px;
+  margin-bottom:40px;
+  padding-bottom: 10px;
+  color: white;
+  border-radius: 0 0 1em 1em;
+  background-color: #0A58CA;
 }
 
 .timeline {
@@ -84,14 +105,14 @@ export default {
 .timeline>li:nth-child(even) {
   position: relative;
   margin-bottom: 50px;
-  height: 180px;
+  height: 100px;
   right:-100px;
 }
 
 .timeline>li:nth-child(odd) {
   position: relative;
   margin-bottom: 50px;
-  height: 180px;
+  height: 100px;
   left:-100px;
 }
 
@@ -112,7 +133,7 @@ export default {
   width: 41%;
   padding: 0 20px 20px 30px;
   text-align: right;
-  background-color: #32CD32;
+  background-color: #0A58CA;
   border-radius: 1em;
 }
 
@@ -134,13 +155,13 @@ export default {
   z-index: 100;
   position: absolute;
   left: 50%;
-  border: 7px solid #006400;
+  border: 7px solid #001664;
   border-radius: 100%;
-  background-color: #00FF7F;
-  box-shadow: 0 0 5px #00FF00;
-  width: 200px;
-  height: 200px;
-  margin-left: -100px;
+  background-color: #00ffff;
+  box-shadow: 0 0 5px #00e1ff;
+  width: 100px;
+  height: 100px;
+  margin-left: -50px;
   cursor:pointer;
 }
 
@@ -199,36 +220,42 @@ export default {
 .timeline>li:nth-child(odd) .line:before {
   content: "";
   position: absolute;
-  top: 60px;
+  top: 30px;
   bottom: 0;
-  left: 730px;
-  width: 45px;
-  height:340px;
+  left: 700px;
+  width: 30px;
+  height:320px;
   background-color: grey;
   -ms-transform: rotate(-44deg); /* IE 9 */
   -webkit-transform: rotate(-44deg); /* Safari */
   transform: rotate(-44deg);
   border: dotted white 3px;
   /**box-shadow: 0 0 5px #00FF00;**/
+  display:none;
 }
 /*Style for odd div.line*/
 .timeline>li:nth-child(even) .line:before  {
   content: "";
   position: absolute;
-  top: 60px;
+  top: 30px;
   bottom: 0;
-  left: 520px;
-  width: 45px;
-  height:340px;
+  left: 480px;
+  width: 30px;
+  height:320px;
   background-color: grey;
   -ms-transform: rotate(44deg); /* IE 9 */
   -webkit-transform: rotate(44deg); /* Safari */
   transform: rotate(44deg);
   border: dotted white 3px;
   /*box-shadow: 0 0 5px #00FF00;*/
+  display:none;
 }
 /* Medium Devices, .visible-md-* */
 @media (min-width: 992px) and (max-width: 1199px) {
+  .col-lg-8 {
+    width: 100%;
+  }
+
   .timeline > li:nth-child(even) {
     margin-bottom: 0;
     min-height: 0;

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;

src/views/LeaderboardView.vue

 <template>
+    <div id="dropdownContainer">
+        <Button class="btn btn-primary text-white leaderBoardButton">Global</Button>
+        <Button class="btn btn-primary text-white leaderBoardButton">Friends</Button>
+    </div>
     <main>
         <div id="leaderboard">
-            <h1>Ranking</h1>
+            <h1><img src="@/assets/items/v-buck.png" style="width: 2rem"> Total points</h1>
+            <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+        </div>
+        <div id="leaderboard">
+            <h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Current streak</h1>
+            <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+        </div>
+        <div id="leaderboard">
+            <h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Highest streak</h1>
             <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
         </div>
     </main>
+    <div id = "communityContainer">
+        <h1>Total points earned as a community</h1>
+        <h2>1000000 <img src="@/assets/items/v-buck.png" style="width: 2rem"></h2>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -31,18 +47,49 @@ const navigateToUserProfile = (userId: number) => {
 
 <style scoped>
 main {
+    margin-top: 2rem;
+    margin-bottom: 4rem;
     width: 100%;
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
     align-items: center;
+    flex-wrap: wrap;
+    flex-direction: row;
 }
 
 #leaderboard {
-    width: 60%;
+    width: 400px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-bottom: 3rem;
 }
+
+h1 {
+    font-weight: 500;
+    margin-bottom: 1rem;
+}
+
+#dropdownContainer {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2rem;
+    margin-top: 3rem;
+}
+
+#communityContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 5rem;
+}
+
+.leaderBoardButton {
+  padding: 1rem 4rem;
+  font-weight: 700;
+  border-radius: 2rem;
+  margin: 1rem;
+}
 </style>
\ No newline at end of file

src/views/SavingGoalView/RoadmapView.vue

 <script setup lang="ts">
-import SavingGoalRoadmap2 from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
+import SavingGoal from "@/components/SavingGoalComponents/SavingGoal.vue";
 </script>
 
 <template>
-<saving-goal-roadmap2></saving-goal-roadmap2>
+<saving-goal></saving-goal>
 </template>
\ No newline at end of file

src/views/ShopView.vue

 <template>
-    Hallo
-</template>
+    <div class="container">
+        <div class="row">
\ No newline at end of file
+            <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