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

Refactor ProductCard component for improved readability and styling consistency

Browse Source 
- Simplified template structure by removing unnecessary line breaks and indentation.
- Enhanced badge and discount badge styles for better visual appeal.
- Updated class names for consistency and improved hover effects on buttons.
- Maintained functionality while improving code clarity and maintainability.
This commit is contained in:
Bastian Masanek
2025-11-01 18:26:16 +01:00
parent 5115a4db82
commit 9150af3ac2
1 changed files with 17 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,49 +48,35 @@ const formattedPrice = computed(() => {
</script>
<template>
<div
: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,
)
"
>
<div :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,
)
">
<!-- Badge (optional) -->
<div
v-if="badge"
class="absolute left-4 top-4 z-10 rounded-full bg-experimenta-primary px-3 py-1 text-xs font-bold uppercase tracking-wider text-white shadow-lg"
>
<div v-if="badge"
class="absolute left-4 top-4 z-10 rounded-xl bg-experimenta-primary px-3 py-1 text-xs font-bold uppercase tracking-wider text-white shadow-lg">
{{ badge }}
</div>
<!-- Discount Badge (optional) -->
<div
v-if="discountPercentage"
class="absolute right-4 top-4 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-red text-white shadow-lg"
>
<span class="text-xs font-bold">-{{ discountPercentage }}%</span>
<div v-if="discountPercentage"
class="absolute right-4 top-4 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-red text-white shadow-lg -rotate-12">
<span class="text-sm font-bold">-{{ discountPercentage }}%</span>
</div>
<!-- Product Image -->
<div class="relative aspect-[16/9] w-full overflow-hidden bg-purple-dark">
<img
:src="image"
:alt="title"
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
/>
<img :src="image" :alt="title"
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" />
<!-- Gradient overlay for better text readability -->
<div
class="absolute inset-0 bg-gradient-to-t from-purple-darkest/80 via-transparent to-transparent"
/>
<div class="absolute inset-0 bg-gradient-to-t from-purple-darkest/80 via-transparent to-transparent" />
</div>
<!-- Card Content -->
<div class="flex flex-1 flex-col space-y-3 p-5">
<!-- Title -->
<h3
class="text-xl font-bold leading-tight text-white transition-colors group-hover:text-experimenta-accent"
>
<h3 class="text-xl font-bold leading-tight text-white transition-colors group-hover:text-experimenta-accent">
{{ title }}
</h3>
@@ -110,14 +96,11 @@ const formattedPrice = computed(() => {
</div>
<!-- CTA Button -->
<NuxtLink
:to="productId ? `/produkte/${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"
>
<NuxtLink :to="productId ? `/produkte/${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">
<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"
/>
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>