animations + cards

app/components/molecule/card.vue

@@ -0,0 +1,25 @@
+<template>
+  <article
+    class="backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+    <!-- Cover -->
+    <figure class="flex-1 overflow-hidden rounded-t-xl">
+      <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
+    </figure>
+
+    <!-- Body -->
+    <div class="p-3 text-center bg-white rounded-b-xl">
+      <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
+      <p class="text-sm text-neutral-500 truncate">
+        {{ props.track.artist.name }}
+      </p>
+    </div>
+  </article>
+
+</template>
+
+<script setup lang="ts">
+import type { Track } from '~~/types/types'
+
+const props = defineProps<{ track: Track }>()
+const coverUrl = `https://f4.bcbits.com/img/${props.track.artist.coverId}_4.jpg`
+</script>