<template>
  <div>
    <v-container fluid class="pa-0">
      <v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
        <v-col
          class="d-flex align-center pt-0 ml-8"
          style="position: relative; z-index: 10;"
        >
          <v-card flat color="rgb(0, 0, 0, 0)">
            <h1 class="display" style="position: relative;">
              Welcome to Savvy Firebox Tutorial
            </h1>
            <v-btn
              x-large
              color="primary"
              style="position: relative; z-index: 10;"
              class="lighten-1"
              >Click Here</v-btn
            >
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <v-container>
      <v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
      <v-row class="d-flex justify-space-around">
        <v-col class="d-flex justify-center" md="6" xs="12">
          <v-card
            flat
            color="rgb(0, 0, 0, 0)"
            class="d-flex align-center justify-center flex-column pa-6"
            data-aos="zoom-in"
            data-aos-duration="3000"
          >
            <v-card-title>
              <span class="display-2 font-weight-bold">Learn more</span>
            </v-card-title>
            <v-card-text class="d-flex justify-center flex-column align-center">
              <transition name="bounce">
                <v-img
                  src="@/assets/images/11-Casino chip.png"
                  max-height="150px"
                  max-width="150px"
                  class="mb-5"
                ></v-img>
              </transition>
              <span
                class="d-flex justify-center display body-1"
                style="color: black;"
              >
                More information about what we do and why.
              </span>
            </v-card-text>
            <v-card-actions>
              <v-btn color="secondary" medium>Click here</v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
        <v-col class="d-flex justify-center" md="6" xs="12">
          <v-card
            flat
            color="rgb(0, 0, 0, 0)"
            class="d-flex align-center justify-center flex-column pa-6"
            data-aos="test-roll"
            data-aos-duration="3000"
            data-aos-easing="new-easing"
          >
            <v-card-title>
              <span class="display-2 font-weight-bold">See more</span>
            </v-card-title>
            <v-card-text class="d-flex flex-column justify-center align-center">
              <v-img
                src="@/assets/images/12-Casino chip.png"
                max-height="150px"
                max-width="150px"
                class="mb-5"
              ></v-img>
              <span
                class="d-flex justify-center display body-1"
                style="color: black;"
              >
                Additional things about what it is.
              </span>
            </v-card-text>
            <v-card-actions>
              <v-btn color="secondary" medium>Click here</v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
        <!-- <v-col md="1" xs="0"></v-col> -->
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate: false
    };
  }
};
</script>

<style lang="scss" scoped>
.newtriangle {
  width: 105vw;
  height: 50vh;
  background-image: radial-gradient(
    circle farthest-corner at 7.5% 54.1%,
    rgba(0, 0, 0, 1) 0%,
    rgba(39, 0, 89, 1) 74.9%
  );
  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
}

h1 {
  color: white;
}

[data-aos="test-roll"] {
  -webkit-transform: translateX(-1000px) rotate(-720deg);
  transform: translateX(-1000px) rotate(-720deg);
  -webkit-filter: blur(50px);
  filter: blur(50px);
  opacity: 0;
  transition-property: transform, opacity, filter;
  &.aos-animate {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

[data-aos] {
  body[data-aos-easing="new-easing"] &,
  &[data-aos][data-aos-easing="new-easing"] {
    transition-timing-function: cubic-bezier(0.25, 1, 0.57, 0.55);
  }
}
</style>
