<template>
  <div>
    <section id="home" class="section home">
      <b-container>
        <b-row class="justify-content-center">
          <b-col lg='7'>
            <div class="home-wrapper text-center">
              <div class="text-tran-box">
                <h1 class="text-transparent">
                  Appexy - Landing Page Template
                </h1>
              </div>
              <p>
                Appexy is a fully responsive landing template built using the
                latest bootstrap framework. It’s designed for describing your
                app, agency or business.
              </p>

              <a
                  class="btn btn-dark-custom mt-4 mb-5"
                  href="https://1.envato.market/appexy"
                  target="_blank"
              >
                <img alt="" class="footer-img" src='../assets/images/icon/shopping-cart-2-line.svg'/> Buy
                Now
              </a>
            </div>
          </b-col>
        </b-row>
      </b-container>
    </section>

    <div class="position-relative">
      <div class="shape overflow-hidden text-white">
        <svg
            fill="none"
            viewBox="0 0 2880 48"
            xmlns="http://www.w3.org/2000/svg"
        >
          <path
              d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z"
              fill="#fff"
          ></path>
        </svg>
      </div>
    </div>

    <section id="features" class="section">
      <b-container>
        <b-row>
          <b-col class="text-center" sm='12'>
            <h2 class="title text-dark">Available Demos</h2>
          </b-col>
        </b-row>

        <b-row class="row mt-4">
          <b-col lg='4' md='6'>
            <div class="demo-box">
              <a href="/landing/index-1" target="_blank">
                <img alt="demo-img" class="img-responsive" src='../assets/images/home/index1.jpg'/>
              </a>

              <h4>Index 1</h4>
            </div>
          </b-col>

          <b-col lg='4' md='6'>
            <div class="demo-box">
              <a href="/landing/index-2" target="_blank">
                <img alt="demo-img" class="img-responsive" src='../assets/images/home/index2.jpg'/>
              </a>

              <h4>Index 2</h4>
            </div>
          </b-col>

          <b-col lg='4' md='6'>
            <div class="demo-box">
              <a href="/landing/index-3" target="_blank">
                <img alt="demo-img" class="img-responsive" src='../assets/images/home/index3.jpg'/>
              </a>

              <h4>Index 3</h4>
            </div>
          </b-col>

          <b-col lg='4' md='6'>
            <div class="demo-box">
              <a href="/landing/index-4" target="_blank">
                <img alt="demo-img" class="img-responsive" src='../assets/images/home/index4.jpg'/>
              </a>

              <h4>Index 4</h4>
            </div>
          </b-col>

          <b-col lg='4' md='6'>
            <div class="demo-box">
              <a href="/landing/index-5" target="_blank">
                <img alt="demo-img" class="img-responsive" src='../assets/images/home/index5.jpg'/>
              </a>

              <h4>Index 5</h4>
            </div>
          </b-col>

          <b-col lg='4' md='6'>
            <div class="demo-box">
              <a href="/landing/index-6" target="_blank">
                <img alt="demo-img" class="img-responsive" src='../assets/images/home/index6.jpg'/>
              </a>

              <h4>Index 6</h4>
            </div>
          </b-col>
        </b-row>
      </b-container>
    </section>

    <div class="position-relative">
      <div class="shape overflow-hidden text-footer">
        <svg
            fill="none"
            viewBox="0 0 2880 48"
            xmlns="http://www.w3.org/2000/svg"
        >
          <path
              d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z"
              fill="#343a40"
          ></path>
        </svg>
      </div>
    </div>

    <footer class="bg-dark footer-one">
      <div class="footer-one-alt">
        <b-container>
          <b-row>
            <b-col sm='6'>
              <p class="m-b-0 font-13 copyright">
                © {{ year }}
                Appexy. Design & Develop by Coderthemes
              </p>
            </b-col>
            <b-col sm='6'>
              <ul class="list-inline footer-social-one m-b-0 float-right">
                <li class="list-inline-item">
                  <a
                      href="https://www.facebook.com/coderthemes"
                      target="_blank"
                  >
                    <img alt="" class='footer-img' src='../assets/images/icon/facebook-line.svg'/>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="https://twitter.com/coder_themes" target="_blank">
                    <img alt="" class='footer-img' src='../assets/images/icon/twitter-line.svg'/>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a
                      href="https://www.linkedin.com/in/coderthemes/"
                      target="_blank"
                  >
                    <img alt="" class='footer-img' src='../assets/images/icon/linkedin-line.svg'/>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="https://dribbble.com/coderthemes" target="_blank">
                    <img alt="" class='footer-img' src='../assets/images/icon/dribbble-line.svg'/>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="skype:coderthemes" rel="noreferrer" target="_blank">
                    <img alt="" class='footer-img' src='../assets/images/icon/skype-line.svg'/>
                  </a>
                </li>
              </ul>
            </b-col>
          </b-row>
        </b-container>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  computed: {
    year() {
      return new Date().getFullYear();
    }
  }
}
</script>

<style scoped>

</style>
