bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor ProductCard component to enhance clickability and visual indicators

Browse Source 
- 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.
This commit is contained in:
Bastian Masanek
2025-11-02 09:34:38 +01:00
parent d6bed8fb50
commit 82b5e61f94
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/Product/ProductCard.vue
View File

@@ -48,7 +48,7 @@ const formattedPrice = computed(() => {
</script> </script>
<template> <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', '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, props.class,
) )
@@ -95,14 +95,14 @@ const formattedPrice = computed(() => {
</span> </span>
</div> </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> <span class="relative z-10">Details</span>
<div <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" /> 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> </div>
</div> </NuxtLink>
</template> </template>