changed product grid structure

frontend/components/global/ProductsGrid.vue

@@ -34,18 +34,22 @@ withDefaults(defineProps<Props>(), {
             </NuxtLink>
         </div>
         <ul class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-8 gap-5 sm:gap-8">
-            <ProductCard
+            <li
+                class="w-full"
                 v-for="product in products"
                 :key="product.id"
-                :id="product.id"
+            >
-                :slug="product.slug"
+                <ProductCard
-                :title="product.name"
+                    :id="product.id"
-                :picture="product.variants[0].images[0].image"
+                    :slug="product.slug"
-                :colors="product.colors"
+                    :title="product.name"
-                :price="product.variants[0].price"
+                    :picture="product.variants[0].images[0].image"
-                :rate="product.rating"
+                    :colors="product.colors"
-                :dark-layer="true"
+                    :price="product.variants[0].price"
-            />
+                    :rate="product.rating"
+                    :dark-layer="true"
+                />
+            </li>
         </ul>
     </section>
 </template>