add footer

src/components/main/Card.vue

@@ -7,7 +7,7 @@
       <div class="info-div">
         <img class="name-img" src="@/assets/main/p3/racoon.png">
         <span class="index-label">#01</span>
-        <span class="price-label">100 USD</span>
+        <span class="price-label">100 USDT</span>
       </div>
     </div>
   </div>

src/components/main/MainFooter.vue

@@ -1,5 +1,36 @@
 <template>
-  <footer id="footer" ></footer>
+  <footer class="footer" >
+    <div class="leftPart">
+      <img src="@/assets/main/p1/icon_logo_t.png">
+    </div>
+    <div class="centerPart link-list">
+      <a href="">Home</a>
+      <a href="">Instruction</a>
+      <a href="">About</a>
+      <a href="">Marketplace</a>
+      <a href="">Contact us</a>
+      <a href="">Blog</a>
+      <a href="">Policy</a>
+      <a href="">Whitepaper</a>
+    </div>
+    <div class="rightPart">
+      <span class="community-title">JOIN OUR COMMUNITY</span>
+      <div class="community-list">
+        <a href="">
+          <img src="@/assets/main/footer/fb.png">
+        </a>
+        <a href="">
+          <img src="@/assets/main/footer/twitter.png">
+        </a>
+        <a href="">
+          <img src="@/assets/main/footer/discord.png">
+        </a>
+        <a href="">
+          <img src="@/assets/main/footer/telegram.png">
+        </a>
+      </div>
+    </div>
+  </footer>
 </template>
 
 <script lang="ts">
@@ -16,5 +47,53 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-
+  .footer {
+    display: flex;
+    height: 300px;
+  }
+  .leftPart{
+    width: 25vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .leftPart img{
+    width: 185px;
+  }
+  .centerPart{
+    width: 50vw;
+    display: grid;
+    grid-template-columns: 33% 33% 33%;
+    grid-template-rows: 80px 80px 80px;
+    padding-top: 50px;
+  }
+  .link-list a{
+    text-transform: uppercase;
+    color: white;
+    text-decoration: none;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  .rightPart{
+    width: 25vw;
+    display: flex;
+    flex-direction: column;
+    padding: 50px 20px;
+    align-items: center;
+  }
+  .community-title {
+    color: white;
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+  .community-list {
+    display: flex;
+  }
+  .community-list a {
+    width: 50px;
+    padding: 0 10px;
+  }
+  .community-list a img{
+    width: 50px;
+  }
 </style>