Added setup for badges

src/components/UserProfile/UserProfileLayout.vue

@@ -40,12 +40,72 @@ let streak = 0;
     </div>
     <div class="row">
       <div class="col">
-        History
+        <!-- Here is the badges of the user -->
+        <div class="container-fluid">
+          <h1 class="mt-5 text-start badges-text">Badges</h1>
+          <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
+
+            <div class="col-5">
+              <div class="card badges-block card-1"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-2"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-3"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-4"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-5"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-6"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-7"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-8"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-9"></div>
+            </div>
+            <div class="col-5">
+              <div class="card badges-block card-10"></div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="row">
       <div class="col">
-        Your Badges
+        <!-- Here is the history of saving target -->
+        <div class="container-fluid mb-5">
+          <h1 class="mt-5 text-start history-text">History</h1>
+          <div class="row scrolling-wrapper-history">
+            <div class="col-4">
+            <div class="card history-block" style="background-color: black"></div>
+            </div>
+            <div class="col-4">
+              <div class="card history-block" style="background-color: black"></div>
+            </div>
+            <div class="col-4">
+              <div class="card history-block" style="background-color: black"></div>
+            </div>
+            <div class="col-4">
+              <div class="card history-block" style="background-color: black"></div>
+            </div>
+            <div class="col-4">
+              <div class="card history-block" style="background-color: black"></div>
+            </div>
+            <div class="col-4">
+              <div class="card history-block" style="background-color: black"></div>
+            </div>
+          </div>
+
+        </div>
       </div>
     </div>
   </div>
@@ -53,5 +113,102 @@ let streak = 0;
 </template>
 
 <style scoped>
+.scrolling-wrapper-badges{
+  overflow-x: auto;
+}
+
+.scrolling-wrapper-history{
+  overflow-y: auto;
+}
+
+
+
+.badges-text{
+  font-weight: 500;
+  font-size: 2.0em;
+}
+
+.history-text{
+  font-weight: 500;
+  font-size: 2.0em;
+}
+
+.badges-block{
+  height: 200px;
+  background-color: #fff;
+  border: none;
+  background-position: center;
+  background-size: cover;
+  transition: all 0.2s ease-in-out !important;
+  border-radius: 24px;
+  &:hover{
+    transform: translateY(-5px);
+    box-shadow: none;
+    opacity: 0.9;
+  }
+}
+
+.history-block{
+  height: 200px;
+  background-size: cover;
+  transition: all 0.2s ease-in-out !important;
+  &:hover{
+    transform: translateY(-5px);
+    box-shadow: none;
+    opacity: 0.9;
+  }
+}
+
+.card-1{
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+}
+
+.card-2{
+  background-color: #0093E9;
+  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
+}
+
+.card-3{
+  background-color: #00DBDE;
+  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
+}
+
+.card-4{
+  background-color: #FBAB7E;
+  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
+}
+
+.card-5{
+  background-color: #85FFBD;
+  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
+}
+
+.card-6{
+  background-color: #FA8BFF;
+  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
+}
+
+.card-7{
+  background-color: #FA8BFF;
+  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
+}
+
+.card-8{
+  background-color: #FBDA61;
+  background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
+}
+
+.card-9{
+  background-color: #4158D0;
+  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+}
+
+.card-10{
+  background-color: #FF3CAC;
+  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
+
+}
+
 
 </style>
\ No newline at end of file