Refactor ProductCard component to enhance clickability and visual indicators

- Updated the template structure to make the entire card clickable by wrapping the CTA button in a div instead of a NuxtLink.
- Improved the visual indication of the CTA button with clearer comments and hover effects for better user experience.

app/components/Product/ProductCard.vue

@@ -48,7 +48,7 @@ const formattedPrice = computed(() => {
 </script>
 
 <template>
-  <div :class="cn(
+  <NuxtLink :to="productId ? `/products/${productId}` : '#'" :class="cn(
     'group relative flex flex-col overflow-hidden rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-glass transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl hover:border-white/30',
     props.class,
   )
@@ -95,14 +95,14 @@ const formattedPrice = computed(() => {
           </span>
         </div>
 
-        <!-- CTA Button -->
+        <!-- CTA Button (visual indicator, entire card is clickable) -->
-        <NuxtLink :to="productId ? `/products/${productId}` : '#'"
+        <div
-          class="group/btn relative overflow-hidden rounded-xl bg-gradient-button bg-size-300 bg-left px-6 py-3 font-bold text-white shadow-lg transition-all duration-300 hover:bg-right hover:shadow-2xl active:scale-95">
+          class="group/btn relative overflow-hidden rounded-xl bg-gradient-button bg-size-300 bg-left px-6 py-3 font-bold text-white shadow-lg transition-all duration-300 group-hover:bg-right group-hover:shadow-2xl active:scale-95">
           <span class="relative z-10">Details</span>
           <div
             class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover/btn:opacity-100" />
-        </NuxtLink>
+        </div>
       </div>
     </div>
-  </div>
+  </NuxtLink>
 </template>