From 82b5e61f941779657c1449a5f4a5aea41a429458 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Sun, 2 Nov 2025 09:34:38 +0100
Subject: [PATCH] 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 | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/Product/ProductCard.vue b/app/components/Product/ProductCard.vue
index bd64b51..bb52f91 100644
--- a/app/components/Product/ProductCard.vue
+++ b/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 -->
-        <NuxtLink :to="productId ? `/products/${productId}` : '#'"
-          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">
+        <!-- CTA Button (visual indicator, entire card is clickable) -->
+        <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 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>