fix css home-page

components/FooterBar.vue

 <!-- eslint-disable vue/no-parsing-error -->
 <template>
   <v-footer class="footer-bar mt-12 flex-wrap" dark padless>
+    <v-container class="footer-top">
       <v-row class="d-flex justify-space-between align-center">
         <v-col
           cols="12"
@@ -19,10 +20,104 @@
           cols="12"
           md="2"
         >
-      <v-text-field label="email address here ..."></v-text-field>
+          <v-text-field label="email address here ..." />
         </v-col>
-    <v-btn color="primary">SUBSCRIBE</v-btn>
+        <v-btn color="primary">
+          SUBSCRIBE
+        </v-btn>
       </v-row>
+    </v-container>
+    <v-container class="divider-mid">
+      <v-divider />
+    </v-container>
+    <v-container class="footer-mid">
+      <v-row class="d-flex align-center">
+        <v-col class="d-flex-column" cols="3">
+          <h4 class="title">
+            Contact Info
+          </h4>
+          <div class="footer-content d-flex-column">
+            <div>PHONE: 012345678</div>
+            <div>EMAIL: mail@riode.com</div>
+            <div>PHONE: 123 StreetLand, City, England</div>
+            <div>WORKINGDAY / HOURS</div>
+            <div>Mon-Sun / 9:00 AM - 8:00 PM</div>
+          </div>
+        </v-col>
+        <v-col class="content-mid d-flex-column" cols="3">
+          <h4 class="title">
+            My Account
+          </h4>
+          <div class="footer-content d-flex-column">
+            <div>About Us</div>
+            <div>Order History</div>
+            <div>Returns</div>
+            <div>Custom Service</div>
+            <div>Terms & Condition</div>
+          </div>
+        </v-col>
+        <v-col class="d-flex-column" cols="3">
+          <h4 class="title">
+            Contact Info
+          </h4>
+          <div class="footer-content d-flex-column">
+            <div>Sign in</div>
+            <div>View Cart</div>
+            <div>My Wishlist</div>
+            <div>Track My Order</div>
+            <div>Help</div>
+          </div>
+        </v-col>
+        <v-col class="d-flex-column" cols="3">
+          <h4 class="title">
+            Instagram
+          </h4>
+          <div class="footer-content d-flex-column">
+            <v-img src="https://d-themes.com/html/riode/images/demos/demo1/banners/banner1.jpg" />
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-container class="footer-bottom">
+      <v-divider class="bottom-hr" />
+      <v-row class="bottom-line d-flex-row justify-space-between">
+        <div>
+          <v-img src="https://d-themes.com/html/riode/images/payment.png" />
+        </div>
+        <div>
+          <span>Riode eCommerce © 2022. All Rights Reserved</span>
+        </div>
+        <div>
+          <v-btn
+            color="black"
+            fab
+            x-small
+            dark
+            outlined
+          >
+            <v-icon>mdi-facebook</v-icon>
+          </v-btn>
+          <v-btn
+            color="black"
+            fab
+            x-small
+            dark
+            outlined
+          >
+            <v-icon>mdi-twitter</v-icon>
+          </v-btn>
+          <v-btn
+            color="black"
+            fab
+            x-small
+            dark
+            outlined
+          >
+            <v-icon>mdi-instagram</v-icon>
+          </v-btn>
+        </div>
+      </v-row>
+    </v-container>
   </v-footer>
 </template>
 
@@ -39,6 +134,44 @@ export default {
 <style>
 .footer-bar {
   min-height: 350px;
-  padding: 4rem;
+  padding-top: 0px;
+}
+.container {
+    max-width: 1185px;
+}
+.divider-mid {
+  margin-top: 0px;
+}
+.footer-mid {
+  margin-top: 0px;
+}
+.footer-content {
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  color: #999;
+  font-size: 15px;
+}
+.title {
+  margin-bottom:10px;
+}
+.footer-bottom {
+  margin-bottom: 20px;
+}
+.bottom-hr {
+  margin-bottom: 40px;
+}
+.bottom-line {
+  padding:15px;
+}
+.content-mid {
+    align-items: center !important;
+  }
+@media only screen and (max-width: 500px) {
+  .content-mid {
+    display:flex;
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
 }
 </style>

components/user/NavBar.vue

@@ -20,16 +20,19 @@
           <span>
             Pages
           </span>
+          <v-icon>mdi-chevron-down</v-icon>
         </div>
         <div class="navbar-item">
           <span>
             Blogs
           </span>
+          <v-icon>mdi-chevron-down</v-icon>
         </div>
         <div class="navbar-item">
           <span>
             About
           </span>
+          <v-icon>mdi-chevron-down</v-icon>
         </div>
       </div>
       <div class="d-flex align-center none-tag">
@@ -121,9 +124,10 @@ export default {
   .navbar-left {
     width: 50%;
     display: flex;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     padding-left: 0;
     padding-right: 0;
+    gap:15px;
   }
   .dropdown {
     position: relative;

layouts/user.vue

@@ -2,6 +2,21 @@
   <v-app>
     <UserHeader ref="child" />
     <Nuxt />
+    <div class="badge-slide">
+      <v-btn elevation="2" color="black" tile class="badge">
+        <a href="#our-categories"><v-icon> mdi-home</v-icon></a>
+      </v-btn>
+      <v-btn elevation="2" color="black" tile class="badge-1">
+        <a href="#"><v-icon> mdi-information</v-icon></a>
+      </v-btn>
+      <v-btn elevation="2" color="black" tile class="badge-2">
+        <a href="#"><v-icon> mdi-star</v-icon></a>
+      </v-btn>
+      <v-btn elevation="2" color="primary" tile class="badge-3">
+        <a href="#"><v-icon> mdi-cart</v-icon></a>
+      </v-btn>
+      <a href="#" class="scroll-to-top-btn"><v-icon> mdi-arrow-up-bold</v-icon></a>
+    </div>
     <FooterBar />
   </v-app>
 </template>
@@ -16,6 +31,9 @@ export default {
     FooterBar
   },
   components: { FooterBar },
+  mounted () {
+    this.scrollToTop()
+  },
   created () {
     this.changeColor()
   },
@@ -23,6 +41,26 @@ export default {
     changeColor () {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
       return true
+    },
+    scrollToTop () {
+      window.addEventListener('scroll', function () {
+        const scrollPos = window.scrollY
+        const scrollToTopBtn = document.querySelector('.scroll-to-top-btn')
+
+        if (scrollPos > 500) {
+          scrollToTopBtn.classList.add('active')
+        } else {
+          scrollToTopBtn.classList.remove('active')
+        }
+      })
+
+      document.querySelector('.scroll-to-top-btn').addEventListener('click', function (e) {
+        e.preventDefault()
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        })
+      })
     }
   }
 }
@@ -32,4 +70,64 @@ export default {
   body{
     font-family: monospace;
   }
+  .scroll-to-top-btn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
+  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
+  background-color: #ffffff;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 24px;
+  line-height: 50px;
+  z-index: 99;
+}
+
+.scroll-to-top-btn:hover {
+  background-color: #1b92cd;
+}
+
+.scroll-to-top-btn i {
+  transform: translateY(-2px);
+}
+
+.scroll-to-top-btn.active {
+  display: block;
+}
+.badge {
+  position: fixed;
+  right: 0;
+  top: 220px;
+  width:40px !important;
+  min-width: 40px !important;
+}
+.badge-1 {
+  position: fixed;
+  right: 0;
+  top: 260px;
+  width:40px !important;
+  min-width: 40px !important;
+}
+.badge-2 {
+  position: fixed;
+  right: 0;
+  top: 300px;
+  width:40px !important;
+  min-width: 40px !important;
+}
+.badge-3 {
+  position: fixed;
+  right: 0;
+  top: 340px;
+  width:40px !important;
+  min-width: 40px !important;
+}
+@media only screen and (max-width: 768px) {
+  .badge-slide {
+    display:none;
+  }
+}
 </style>

pages/home-page/categories/index.vue

@@ -39,20 +39,6 @@
                   height="250px"
                   cover
                 />
-              <!-- <v-card-actions v-if="hover" class="d-flex align-center justify-center" style="position: absolute">
-                <v-btn
-                  v-for="(icon, index) in icons"
-                  :key="index"
-                  :class="{ 'show-btns': hover }"
-                  icon
-                >
-                  <v-icon
-                    :class="{ 'show-btns': hover }"
-                  >
-                    {{ icon }}
-                  </v-icon>
-                </v-btn>
-              </v-card-actions> -->
               </div>
               <v-card-title class="d-flex justify-center">
                 {{ item.name }}
@@ -60,7 +46,7 @@
               <v-card-subtitle class="d-flex justify-center">
                 {{ item.price }}
               </v-card-subtitle>
-              <v-card-actions class="d-flex justify-center">
+              <v-card-actions class="d-flex justify-center card-actions">
                 <v-btn
                   :class="{ 'show-btns': hover }"
                   icon

pages/home-page/index.vue

@@ -5,7 +5,7 @@
     <!-- categories -->
     <v-container>
       <div class="d-flex justify-center align-center mt-12">
-        <h2 class="sub-title mb-5">
+        <h2 id="our-categories" class="sub-title mb-5">
           Our Categories
         </h2>
       </div>
@@ -81,10 +81,11 @@
               <v-card-subtitle class="d-flex justify-center">
                 {{ item.price }}
               </v-card-subtitle>
-              <v-card-actions class="d-flex justify-center">
+              <v-card-actions class="d-flex justify-center card-actions ">
                 <v-btn
                   :class="{ 'show-btns': hover }"
                   icon
+                  style="margin-left:8px"
                 >
                   <v-icon
                     :class="{ 'show-btns': hover }"
@@ -160,7 +161,7 @@
               <v-card-subtitle class="d-flex justify-center">
                 {{ item.price }}
               </v-card-subtitle>
-              <v-card-actions class="d-flex justify-center">
+              <v-card-actions class="d-flex justify-center card-actions ">
                 <v-btn
                   :class="{ 'show-btns': hover }"
                   icon
@@ -423,4 +424,18 @@ export default {
 .card-4 {
   overflow: hidden;
 }
+.card-actions {
+  display: none !important;
+}
+.v-card:hover .card-actions {
+  display: flex !important;
+  flex-direction: column;
+  gap:5px;
+  top:0;
+  right:0;
+  position: absolute;
+}
+.card-actions > .v-btn {
+  background-color:#ffffff;
+}
 </style>