Improve design

Author: w3bdesign

nuxt3/components/Category/CategoryShowAll.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="categories">
-    <section class="container mx-auto bg-white">
+    <section class="mx-auto bg-white">
       <div
         class="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3"
       >
@@ -14,7 +14,7 @@
                   query: { id: category.id },
                 }"
               >
-                <div class="p-6 cursor-pointer">
+                <div class="mt-6 cursor-pointer">
                   <div
                     class="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline"
                   >

nuxt3/components/Layout/LayoutFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto mt-24">
+  <div class="container mx-auto mt-24 max-w-[84.375rem]">
     <footer
       class="px-6 text-center bg-white border border-gray-300 rounded-lg shadow-lg"
     >

nuxt3/components/Layout/LayoutNavbar.vue

@@ -75,7 +75,7 @@
                   <li
                     class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                   >
-                    <LayoutCart class="-mr-4" />
+                    <LayoutCart />
                   </li>
                 </ul>
               </nav>

nuxt3/components/Products/ProductsSingleProduct.vue

@@ -8,14 +8,14 @@
           <img
             v-if="product.image !== undefined"
             id="product-image"
-            class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
+            class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:shadow-lg hover:scale-95"
             :alt="product.name"
             :src="product.image.sourceUrl"
           />
           <img
             v-else
             id="product-image"
-            class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:grow hover:shadow-lg hover:scale-105"
+            class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:shadow-lg hover:scale-95"
             :alt="product.name"
             :src="process.env.placeholderSmallImage"
           />

nuxt3/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <LayoutNavbar />
-    <div class="container p-4 mx-auto">
+    <div class="container mx-auto max-w-[84.375rem]">
       <slot />
     </div>
     <LayoutFooter />