Update product card slug prop

frontend/components/global/ProductsGrid.vue

@@ -15,13 +15,12 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <section
-        class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] container"
-    >
-        <div v-if="withHeader" class="w-full flex justify-between items-center">
-            <span
-                class="text-black typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4"
-            >
+    <section class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] container">
+        <div
+            v-if="withHeader"
+            class="w-full flex justify-between items-center"
+        >
+            <span class="text-black typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4">
                 {{ title }}
             </span>
             <NuxtLink to="/products">
@@ -34,13 +33,12 @@ withDefaults(defineProps<Props>(), {
                 </Button>
             </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"
-        >
+        <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
                 v-for="product in products"
                 :key="product.id"
                 :id="product.id"
+                :slug="product.slug"
                 :title="product.name"
                 :picture="product.variants[0].images[0].image"
                 :colors="product.colors"