66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
class="border-linen flex flex-col items-center gap-6 md:gap-8 rounded-lg border bg-white p-6 md:p-8 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row"
|
|
>
|
|
<!-- Card Image -->
|
|
<div class="relative">
|
|
<div
|
|
class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105"
|
|
:style="{
|
|
'background-image': `url(/cards/${cardNumber + 1}.png)`,
|
|
'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
|
|
transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
|
|
}"
|
|
></div>
|
|
<div
|
|
v-if="orientation === 'reversed'"
|
|
class="absolute top-2 right-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full"
|
|
>
|
|
Inversée
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Content -->
|
|
<div class="flex flex-col gap-3 text-center md:text-left">
|
|
<p class="text-spiritual-earth text-xs sm:text-sm tracking-widest uppercase font-semibold">
|
|
Carte {{ cardNumber }}
|
|
</p>
|
|
<h3 class="text-midnight-blue text-xl sm:text-2xl font-bold leading-tight">
|
|
{{ name }}
|
|
</h3>
|
|
<div class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed" v-html="description">
|
|
|
|
</div>
|
|
</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: slideUp 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|