<template>

  <div>
    <div class="p-5 mb-4 rounded-3 border metadexdao-protocol">
      <div class="container">
        <div class="row">
          <div class="col-md-6 d-flex align-items-center">
            <img src="../assets/METADEXDAO_protocol.jpg" class="img-fluid" alt="Responsive image">
          </div>
          <div class="col-md-6 d-flex align-items-center">
            <div class="">
              <h1 class="fw-bold" style="color: var(--blue-custom)">{{ $t(i18nConst.homeTitle) }}</h1>
              <p class="metadexdao-protocol-text">{{ $t(i18nConst.homeMessage1) }}</p>
              <p class="metadexdao-protocol-text">{{ $t(i18nConst.homeMessage2) }}</p>
              <p class="metadexdao-protocol-text">{{ $t(i18nConst.homeMessage3) }}</p>
              <p class="metadexdao-protocol-text">{{ $t(i18nConst.homeMessage4) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <home-graphs></home-graphs>
    <div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="p-5 mb-3 text-white rounded-3" style="background-color: var(--blue-custom);">
          <h2>{{ $t(i18nConst.homeTitle1) }}</h2>
          <p>{{ $t(i18nConst.homeMessage5) }}</p>
        </div>
      </div>
      <div class="col-md-6 mb-4 pb-4">
        <div class="p-5 text-white rounded-3" style="background-color: var(--black-custom);">
          <h2>{{ $t(i18nConst.homeTitle2) }}</h2>
          <p>{{ $t(i18nConst.homeMessage6) }}</p>
          <p>{{ $t(i18nConst.homeMessage7) }}</p>
          <p>{{ $t(i18nConst.homeMessage8) }}</p>
          <div class="mt-6 text-center">
            <a  target=”_blank” href="https://metadex.io/wp-content/uploads/2023/01/METADEX-WHITEPAPER-FINAL_EN.pdf">
              <button type="button" class="btn btn-lg btn-meta-3"><i class="fa-light fa-money-simple-from-bracket">
                </i>
                <span><b>WHITE PAPER</b></span>
              </button>
            </a>
              </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import i18nConstantes from "@/constantes/i18n.constantes.js";
import HomeGraphs from "../components/home/HomeGraphs.vue";

export default {
  
  name: "Home",
  components: {HomeGraphs},
  data() {
    return {
      i18nConst: i18nConstantes,
    }
  }
};
</script>

<style scoped>
.metadexdao-protocol {
  background-color: black;
}

.metadexdao-protocol-text {
  color: white;
  font-weight: 400;
}
.home {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.line {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
}

.line-item {
  flex: 1 0 33%;
}
</style>
