add card verso

app/components/molecule/card.vue

@@ -1,6 +1,7 @@
 <template>
-  <article
+  <article class="relative">
-    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">
+    <main
+      class="absolute top-0 backdrop-blur-sm z-40 -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" />
@@ -13,6 +14,15 @@
           {{ props.track.artist.name }}
         </p>
       </div>
+    </main>
+
+    <footer
+      class="absolute top-0 ml-32 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">
+      <!-- Back -->
+      <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
+        <img src="/favicon.svg" />
+      </div>
+    </footer>
   </article>
 
 </template>

app/pages/studio.vue

@@ -3,11 +3,11 @@
     <div class="bg-page-dark-bg text-white">
       <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
         <div class="mt-8 flex flex-wrap justify-center">
-          <molecule-box :compilation="compilation" :position="currentPosition" :size="size" />
+          <molecule-box :compilation="compilation" />
           <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
-            <button @click="currentPosition = boxPositions.side">side</button>
+            <!-- <button @click="currentPosition = boxPositions.side">side</button>
             <button @click="currentPosition = boxPositions.front">front</button>
-            <button @click="currentPosition = boxPositions.back">back</button>
+            <button @click="currentPosition = boxPositions.back">back</button> -->
             <div class="w-full block">
               <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color1">
               <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color2">
@@ -20,7 +20,7 @@
                 <input v-model.number="size" type="range" step="1" min="1" max="14">
               </label>
             </div>
-            <div>
+            <!-- <div>
               <label class="block">
                 X: {{ currentPosition.x }}
                 <input v-model.number="currentPosition.x" type="range" step="1" min="-180" max="180">
@@ -33,7 +33,7 @@
                 Z: {{ currentPosition.z }}
                 <input v-model.number="currentPosition.z" type="range" step="1" min="-180" max="180">
               </label>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -44,7 +44,6 @@
 
 <script setup lang="ts">
 import type { BoxPosition, Compilation, Track } from '~~/types/types'
-import { boxPositions } from '~/store/position'
 
 const compilation = ref<Compilation>({
   id: 'ES00A',
@@ -71,9 +70,5 @@ const track = ref<Track>({
   coverId: 'a3236746052',
 })
 
-const size = ref(6)
-
-const currentPosition: Ref<BoxPosition> = ref(boxPositions.side)
-
 //from-slate-800 to-zinc-900 
 </script>