Components refactor (big)

frontend/components/item/Box.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+defineProps<{
+    title: string,
+    bootsFirst?: number
+}>()
+</script>
+
+<template>
+<div class="item-box">
+    <div style="display:flex; flex-direction: column; justify-content: center; align-items: center;">
+        <h2 class="item-box-title">{{ title }}</h2>
+        <h5 v-if="bootsFirst != undefined && bootsFirst != null" 
+            style="margin: auto;">({{ (bootsFirst * 100).toFixed(2) }}%)</h5>
+    </div>
+    <slot/>
+</div>
+</template>
+
+<style scoped>
+.item-box {
+    border: 1px solid var(--color-on-surface);
+    border-radius: 8px;
+
+    margin: 10px;
+
+    width: fit-content;
+    height: 600px;
+}
+.item-box-title {
+    font-variant: small-caps; 
+    text-align: center;
+    margin: 10px;
+}
+@media only screen and (max-width: 1000px) {
+    .item-box {
+        width: 95%;
+        height: fit-content;
+    }
+}
+</style>