fix

src/assets/text/text.css

@@ -16,6 +16,12 @@
     font-weight: 600;
     src: url('./Poppins-SemiBold.ttf') format('truetype');
   }
+  @font-face {
+    font-family: 'Poppins-Regular';
+    font-style: normal;
+    font-weight: 600;
+    src: url('./Poppins-Regular.ttf') format('truetype');
+  }
 
   @font-face {
     font-family: 'MEurostile';

src/components/home/CounterFire.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="counterfire-container">
+    <div class="header"></div>
+    <div class="container-conter">
+      <div class="content">
+        <div>
+          <div class="counterfire-img"><img src="../../assets/img/planet/logo.png" alt="" /></div>
+          <div class="humanity-text">
+            <div>
+              As humanity delves into the mysteries of the cosmos, it marks a
+              new era where Pluto serves as a vital jumpgate. This colossal leap
+              allows humanity to venture into uncharted star systems, opening
+              doors to unexplored realms of discovery and daring.
+            </div>
+
+            <div>
+              In the expanse of the universe, humanity encounters novel races
+              and untapped energy sources. Amid the quest for the precious
+              universal resource known as Crystals, brace yourself to etch your
+              legend across this cosmos teeming with adventure and challenge.
+            </div>
+          </div>
+
+          <div class="download-btn">
+            <a href="https://apps.apple.com/app/counter%20fire/id6444462915" target="_blank" class="download-item">
+              <img src="../../assets/img/planet/AppStore_icon.png" alt=""
+            /></a>
+            <a class="https://play.google.com/store/apps/details?id=com.cege.games.release" target="_blank" href="http://"
+              ><img src="../../assets/img/planet/GooglePlay_icon.png" alt=""
+            /></a>
+          </div>
+        </div>
+      </div>
+      <div class="bg">
+        <img src="../../assets/img/planet/CFunivers_bg.png" alt="" />
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-content">
+        <div class="footer-left">
+          <div class="footer-logo">
+            <a href="/"
+              ><img src="../../assets/img/planet/footer-logo.png" alt=""
+            /></a>
+          </div>
+          <div class="copyright">Copyright © 2023</div>
+        </div>
+        <div class="footer-right">
+          <a href="https://discord.com/invite/fNSn2NHUvf" class="discord-icon"
+            ><img src="../../assets/img/planet/com_Discord_icon.png" alt=""
+          /></a>
+          <a class="twitter-icon" href="https://twitter.com/_CounterFire"
+            ><img src="../../assets/img/planet/com_Twitter_icon.png" alt=""
+          /></a>
+          <a class="youtube-icon" href="https://www.youtube.com/c/CryptoElitesBattlegrounds"
+            ><img src="../../assets/img/planet/com_Youtube_icon.png" alt=""
+          /></a>
+        </div>
+        <!-- <div class="logo"></div> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.counterfire-container {
+  height: 100%;
+  width: 100%;
+}
+.header {
+  height: 84px;
+}
+.container-conter {
+  position: relative;
+  height: calc(100% - 168px);
+  width: 100%;
+  .content {
+    width: 1764px;
+    margin: 0 auto;
+    display: flex;
+    padding-top: 58px;
+    justify-content: flex-end;
+    .counterfire-img{
+        // width: 992px;
+        // height: 152px;
+        
+    }
+  }
+
+  .humanity-text {
+    text-align: left;
+    width: 992px;
+    font-size: 24px;
+    font-family: "Poppins-Regular";
+    font-weight: 400;
+    color: #110d1c;
+  }
+  .bg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0px;
+    right: 0;
+    z-index: -1;
+    bottom: 0;
+    color: transparent;
+    img {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: 0px;
+      right: 0;
+      //   object-fit: cover;
+      bottom: 0;
+      z-index: 0;
+      color: transparent;
+    }
+  }
+}
+.footer {
+  height: 84px;
+  background-color: #0e0e0e;
+
+  .footer-content {
+    width: 1764px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .copyright {
+    font-size: 20px;
+    font-family: "Poppins";
+    font-weight: 400;
+    color: #686a8f;
+  }
+  .footer-logo {
+    width: 194px;
+    height: 62px;
+    img {
+      width: 194px;
+      height: 62px;
+    }
+  }
+  .footer-right {
+    display: flex;
+    .discord-icon {
+      width: 64px;
+      height: 48px;
+      img {
+        width: 64px;
+        height: 48px;
+      }
+    }
+    .twitter-icon {
+      width: 60px;
+      height: 48px;
+      margin-right: 34px;
+      margin-left: 42px;
+      img {
+        width: 60px;
+        height: 48px;
+      }
+    }
+    .youtube-icon {
+      width: 60px;
+      height: 42px;
+      img {
+        width: 60px;
+        height: 42px;
+      }
+    }
+  }
+}
+.download-btn {
+  display: flex;
+  margin-top: 38px;
+  justify-content: space-between;
+  width: 100%;
+  .download-item{
+    width: 413px;
+    height: 112px;
+  }
+}
+</style>