first 3D model

app/pages/design.vue

@@ -1,11 +1,17 @@
 <template>
-  <div class="mt-8 flex flex-wrap justify-center">
-    <div className="bg-page-dark-bg text-white">
-      <div className="bg-gradient-to-r from-primary to-primary-dark border-t-2 border-b-2 border-primary">
-        <div className="mt-8 flex flex-wrap justify-center">
-          <gameBox />
+  <div class="flex flex-wrap justify-center">
+    <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"
+          v-for="compilation in store.getAllCompilations.slice().reverse()">
+          <compilationBox :compilation="compilation" template="full" />
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { useDataStore } from '@/store/dataStore'
+const store = useDataStore()
+</script>