<template>
  <footer class="footer" >
    <div class="community-bar">
      <div class="title">JOIN OUR COMMUNITY</div>
      <div class="icon-list">
        <a href="https://discord.gg/8dWX6jpcME">
          <img src="@/assets/202202/discord-logo-color@2x.png" alt="discord"/>
        </a>
        <a href="https://t.me/CEBG_official">
          <img src="@/assets/202202/telegram-logo@2x.png" alt="telegram"/>
        </a>
        <a href="https://twitter.com/CebgGame">
          <img src="@/assets/202202/logowhite@2x.png" alt="twitter"/>
        </a>
      </div>
    </div>
    <div class="link-list">
      <div class="sub-list">
        <div class="title">Product</div>
        <a href="/">Home</a>
        <a href="/gameplay">Gameplay</a>
        <a href="/tokennomic">Tokennomic</a>
        <a href="/nft">NFT</a>
        <a href="javascript:void(0);" @click="comingSoon">Marketplace</a>
      </div>
      <div class="sub-list">
        <div class="title">Resources</div>
        <a href="">Whitepaper</a>
      </div>
      <div class="sub-list">
        <div class="title">About</div>
        <a href="javascript:void(0);" @click="comingSoon">About</a>
        <a href="javascript:void(0);" @click="comingSoon">Roadmap</a>
      </div>
      <div class="sub-list">
        <div class="title">Policies</div>
        <a href="javascript:void(0);" @click="comingSoon">Team of use</a>
        <a href="javascript:void(0);" @click="comingSoon">Privacy Policy</a>
      </div>
      <div class="sub-list">
        <div class="title">Contact us</div>
        <a href="mailto:support@cebg.games">support@cebg.games</a>
      </div>
    </div>
    <div class="copy-right">
      Copyright &copy; CEBG. All rights reserved.
    </div>
  </footer>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Message } from 'element-ui'

@Component({
  name: 'DesktopFooter',
  components: {

  }
})
export default class extends Vue {
  comingSoon() {
    Message({
      message: 'coming soon',
      type: 'info',
      duration: 5 * 1000
    })
  }
}
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  height: 410px;
  flex-direction: column;
  align-items: center;
  .community-bar{
    width: 100%;
    height: 100px;
    background-image: linear-gradient(to right, #FFDF2C , #FF8613);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title{
      color: #404040;
      font-size: 26px;
      margin-left: 395px;
    }
    .icon-list{
      margin-right: 366px;
      display: flex;
      gap: 64px;
    }
  }
  .link-list{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 55%;
    margin-top: 34px;
    .sub-list{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      color: #B4B4B4;
      gap: 20px;
      a{
        color: #B4B4B4;
        text-decoration: none;
      }
      .title{
        color: #F4F4F4;
        font-size: 15px;
        font-weight: bold;
      }
    }
  }
  .copy-right{
    color: #B4B4B4;
  }
}
</style>
