<template>
  <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-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"
        >
          <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="zoom-in"
        >
          <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>
</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;
}
</style>
