134 lines
4.3 KiB
Vue
134 lines
4.3 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col items-center gap-6 md:gap-8 rounded-2xl bg-gradient-to-br from-purple-900/40 to-purple-800/30 border border-purple-700/30 p-6 md:p-8 shadow-2xl transition-all duration-500 hover:shadow-3xl md:flex-row backdrop-blur-sm hover:border-purple-600/50 group"
|
|
>
|
|
<!-- Card Image Container -->
|
|
<div class="relative">
|
|
<!-- Card Image with Glow Effect -->
|
|
<div
|
|
class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-xl bg-cover bg-center bg-no-repeat transition-all duration-500 group-hover:scale-105 relative overflow-hidden"
|
|
:style="{
|
|
'background-image': `url(${imageUrl || '/cards/' + (cardNumber + 1) + '.png'})`,
|
|
transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
|
|
}"
|
|
>
|
|
<!-- Gradient Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-900/10 to-purple-900/20 rounded-xl"></div>
|
|
|
|
<!-- Glow Effect -->
|
|
<div
|
|
class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
|
:style="{
|
|
'box-shadow': orientation === 'reversed'
|
|
? '0 0 30px 10px rgba(239, 68, 68, 0.4)'
|
|
: '0 0 30px 10px rgba(168, 85, 247, 0.4)'
|
|
}"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Orientation Badge -->
|
|
<div
|
|
v-if="orientation === 'reversed'"
|
|
class="absolute top-3 right-3 bg-gradient-to-r from-red-600 to-red-700 text-red-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-red-500/30 shadow-lg"
|
|
>
|
|
Inversée
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
|
|
>
|
|
Droite
|
|
</div>
|
|
|
|
<!-- Card Number Badge -->
|
|
<div class="absolute -bottom-2 -left-2 bg-gradient-to-r from-purple-700 to-indigo-700 text-purple-100 text-sm font-bold w-10 h-10 rounded-full flex items-center justify-center border-2 border-purple-900/50 shadow-lg">
|
|
{{ cardNumber }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Content -->
|
|
<div class="flex flex-col gap-4 text-center md:text-left flex-1">
|
|
<!-- Card Number -->
|
|
<p class="text-purple-300/70 text-xs sm:text-sm tracking-widest uppercase font-semibold">
|
|
Carte #{{ cardNumber }}
|
|
</p>
|
|
|
|
<!-- Card Name -->
|
|
<h3 class="text-2xl sm:text-3xl font-black bg-gradient-to-r from-purple-200 to-purple-100 bg-clip-text text-transparent leading-tight">
|
|
{{ name }}
|
|
</h3>
|
|
|
|
<!-- Description -->
|
|
<div class="text-purple-300/90 text-base sm:text-lg leading-relaxed font-medium" v-html="description"></div>
|
|
|
|
<!-- Decorative Divider -->
|
|
<div class="w-16 h-0.5 bg-gradient-to-r from-purple-600 to-transparent rounded-full mt-2 mx-auto md:mx-0"></div>
|
|
</div>
|
|
|
|
<!-- Hover Effect Background -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-500 pointer-events-none"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
cardNumber: number;
|
|
name: string;
|
|
imageUrl: string;
|
|
orientation?: string;
|
|
description: string;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
div {
|
|
animation: cardAppear 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes cardAppear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Custom shadow for hover effect */
|
|
.shadow-3xl {
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
|
0 0 30px rgba(168, 85, 247, 0.3);
|
|
}
|
|
|
|
/* Smooth transitions for all interactive elements */
|
|
* {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
/* Custom scrollbar for description */
|
|
.text-base::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.text-base::-webkit-scrollbar-track {
|
|
background: rgba(168, 85, 247, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.text-base::-webkit-scrollbar-thumb {
|
|
background: rgba(168, 85, 247, 0.4);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.text-base::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(168, 85, 247, 0.6);
|
|
}
|
|
</style>
|