<template>
  <div class="section">
    <div class="container">
      <!--Title-->
      <div class="section-title has-text-centered py-6">
        <h2 class="title is-2">
          Awesome Features
        </h2>
        <h4>Vuero has been carefully handcrafted.</h4>
      </div>

      <!--Content-->
      <div class="py-12">
        <div class="columns is-vcentered is-multiline card-icon-boxes">
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="blue"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-layout-alt-2"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Nice Vectors
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="warning"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-layers"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="success"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-grid-alt"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="purple"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-bulb"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="green"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-cog"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="yellow"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-plug"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="orange"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-folder-alt"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="info"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-timer"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="blue"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-pie-chart-alt"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="purple"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-licencse"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="green"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-grow"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
          <!--Box-->
          <div class="column is-3">
            <div class="card card-icon-box">
              <div class="card-content">
                <VIconBox
                  size="medium"
                  color="yellow"
                >
                  <i
                    aria-hidden="true"
                    class="lnil lnil-bank"
                  />
                </VIconBox>

                <h4 class="title is-5">
                  Icon title
                </h4>
                <p class="subtitle is-6 light-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </p>
              </div>
            </div>
          </div>
        </div>

        <!--CTA-->
        <div class="cta-block no-border">
          <div class="head-text">
            <h3>Want to learn more?</h3>
            <p>Check out the Vuero documentation</p>
          </div>
          <div class="head-action">
            <div class="buttons">
              <VButton
                class="action-button"
                color="primary"
                rounded
                elevated
                href="https://docs.cssninja.io/vuero"
              >
                Read the Docs
              </VButton>
              <a
                href="https://cssninja.io"
                target="_blank"
                rel="noopener"
                class="button chat-button is-secondary"
              >
                Chat with us
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
