From 6f4d380ccecd83bdd11b595e969660b1a7ddf397 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 4 Jun 2025 19:12:11 +0330
Subject: [PATCH] changed product card structure

---
 .../components/global/product/ProductCard.vue | 108 +++++++++---------
 1 file changed, 53 insertions(+), 55 deletions(-)

diff --git a/frontend/components/global/product/ProductCard.vue b/frontend/components/global/product/ProductCard.vue
index e9a5e50..ac19fb1 100644
--- a/frontend/components/global/product/ProductCard.vue
+++ b/frontend/components/global/product/ProductCard.vue
@@ -54,68 +54,66 @@ const parallaxStyle = computed(() => {
 </script>
 
 <template>
-    <li class="w-full">
-        <NuxtLink :to="'/product/' + slug">
-            <div
-                class="@container group"
-                ref="containerEl"
-            >
-                <div class="perspective-midrange">
-                    <div
-                        :style="parallaxStyle"
-                        class="group relative size-full aspect-square rounded-2xl bg-white brightness-[95%] overflow-hidden p-6"
-                    >
-                        <NuxtImg
-                            :id="`product-image-${id}`"
-                            :src="picture"
-                            class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
-                            alt="product-background"
-                        />
+    <NuxtLink :to="{ name: 'product-id', params: { id: slug } }">
+        <div
+            class="@container group"
+            ref="containerEl"
+        >
+            <div class="perspective-midrange">
+                <div
+                    :style="parallaxStyle"
+                    class="group relative size-full aspect-square rounded-2xl bg-white brightness-[95%] overflow-hidden p-6"
+                >
+                    <NuxtImg
+                        :id="`product-image-${id}`"
+                        :src="picture"
+                        class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
+                        alt="product-background"
+                    />
 
-                        <!-- <div
+                    <!-- <div
                         v-if="darkLayer"
                         class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
                     /> -->
 
-                        <div
-                            class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
-                        >
-                            <Rate
-                                v-if="rate"
-                                :rate="rate"
-                            />
-                            <Tag v-if="tag">
-                                {{ tag }}
-                            </Tag>
-                        </div>
-                        <div
-                            class="absolute opacity-0 group-hover:opacity-100 bg-gradient-to-t transition-all group-hover:from-black/30 to-transparent inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
-                        >
-                            <div
-                                class="items-center flex gap-2 @[280px]:mt-1 transition-all translate-y-1 group-hover:translate-y-0"
-                            >
-                                <ColorCircle
-                                    v-for="color in limitedColors"
-                                    :key="color"
-                                    :style="{ backgroundColor: color }"
-                                    class="!size-5 @[280px]:!size-6"
-                                />
-                            </div>
-                        </div>
+                    <div
+                        class="flex justify-between items-center absolute px-4 @[280px]:px-6 pt-4 @[280px]:pt-6 top-0 w-full inset-x-0"
+                    >
+                        <Rate
+                            v-if="rate"
+                            :rate="rate"
+                        />
+                        <Tag v-if="tag">
+                            {{ tag }}
+                        </Tag>
                     </div>
-                </div>
-
-                <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4">
-                    <span class="typo-sub-h-sm font-normal w-full truncate">
-                        {{ title }}
-                    </span>
-                    <div class="flex items-center justify-between w-full mt-1">
-                        <span class="typo-p-xs !font-bold whitespace-nowrap">
-                            {{ price }}
-                        </span>
+                    <div
+                        class="absolute opacity-0 group-hover:opacity-100 bg-gradient-to-t transition-all group-hover:from-black/30 to-transparent inset-x-0 bottom-0 pb-4 @[280px]:pb-6 px-4 @[280px]:px-6 flex flex-row-reverse justify-between items-end z-10"
+                    >
+                        <div
+                            class="items-center flex gap-2 @[280px]:mt-1 transition-all translate-y-1 group-hover:translate-y-0"
+                        >
+                            <ColorCircle
+                                v-for="color in limitedColors"
+                                :key="color"
+                                :style="{ backgroundColor: color }"
+                                class="!size-5 @[280px]:!size-6"
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
-        </NuxtLink>
-    </li>
+
+            <div class="flex flex-col gap-1 px-2 items-start w-full text-black mt-4">
+                <span class="typo-sub-h-sm font-normal w-full truncate">
+                    {{ title }}
+                </span>
+                <div class="flex items-center justify-between w-full mt-1">
+                    <span class="typo-p-xs !font-bold whitespace-nowrap">
+                        {{ price }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </NuxtLink>
 </template>