provide backgrounds for the guild page components

src/assets/main.scss

@@ -12,7 +12,7 @@ body {
   user-select: none;
   background-size: 25rem;
   background-color: rgba(87, 50, 20, 0.45);
-    background-image: url("/img/background/panels/wood.png");
+  background-image: url("/img/background/wood/cut_wood_background.png");
   background-blend-mode: darken;
   background-repeat: repeat;
 }
@@ -26,27 +26,39 @@ body {
     background-image: url("/img/quests/backgrounds/paper.png");
     position: relative;
     filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+
     .nail {
       position: absolute;
       width: 2rem;
       height: 2rem;
       filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
+
       &.small {
         width: 1rem;
         height: 1rem;
       }
+
       img {
         width: 100%;
         height: 100%;
       }
+
       &.top-left {
         top: 1rem;
         left: 1rem;
       }
+
       &.top-right {
         top: 1rem;
         right: 1rem;
       }
     }
   }
+
+  &.note-paper {
+    background-image: url("/img/background/paper/small_tile_paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+    border-image: url("/img/borders/metal_corner.png") 30 round;
+  }
 }

src/views/HomeView.vue

@@ -1,10 +1,17 @@
 <template>
     <main>
-    <section class="title">
+        <section class="title panel note-paper">
             <h1>Guild Master</h1>
             <h3>Adventurer's guild management game</h3>
             <small>v{{ version }}</small>
         </section>
+        <section class="upgrades panel pinned-paper">
+            <div class="nail top-left">
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+            </div>
+            <div class="nail top-right">
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+            </div>
             <section class="coffer">
                 <p>Coffer: {{ guild.gold }} gold</p>
             </section>
@@ -21,6 +28,8 @@
             <section class="upgrade">
                 <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
             </section>
+        </section>
+
     </main>
 </template>
 
@@ -44,12 +53,27 @@ export default defineComponent({
         guild: {
             type: Object as PropType<Guild>,
             default: () => new Guild(1, 0) as Guild,
+            required: true,
         },
     }
 });
 </script>
 
 <style lang="scss">
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-block: 1rem;
+  gap: 1rem;
+
+  .upgrades {
+    padding: 1rem;
+      width: 45rem;
+  }
+}
+
 .title {
   display: flex;
   flex-direction: column;
@@ -57,33 +81,40 @@ export default defineComponent({
   align-items: center;
   padding: 2.5rem;
   text-align: center;
-
+  width: max-content;
   gap: 0.5rem;
+
   h1 {
     font-size: 4rem;
     line-height: 0.75;
 
     margin: 0;
   }
+
   h3 {
     margin: 0;
     line-height: 0.9;
   }
+
   small {
     font-size: 0.9rem;
     font-weight: bold;
     line-height: 0.25;
   }
 }
+
 .coffer {
   text-align: center;
+
   p {
     font-size: 1.5rem;
     font-weight: bold;
   }
 }
+
 .upgrade {
   text-align: center;
+
   .wipe-save {
     display: inline-flex;
     font-weight: bold;
@@ -91,6 +122,7 @@ export default defineComponent({
     color: #d52121;
     cursor: pointer;
   }
+
   p {
     margin: 0;
     font-size: 1.5rem;