ShowEasyFrontEnd/FrontEnd/pages/user/redirect.vue

<template>
  <div :class="['tw-h-full tw-p-[30px] tw-bg-white md:tw-bg-primary-pale']">
    <div
        class="xl:tw-grid xl:tw-grid-cols-[auto_414px] xl:tw-gap-[96px] xl:tw-max-w-[1246px] xl:tw-mx-auto xl:tw-px-[60px]">
        <div class="tw-hidden xl:tw-block xl:tw-mt-[30px]">
          <p class="welcome tw-text-primary-light">{{ $t("Welcome to ShowEasy") }}</p>
          <p class="sub tw-text-neutral-400">
            {{
            $t(
            "Your best guide from trip to show and from show to the world."
            )
            }}
          </p>
          <img class="mt-11 ml-15" :src="require('@/assets/img/UserLoginMain.png')" />
        </div>
        <div class="md:tw-w-[414px] md:tw-mx-auto">
          <div class="tw-bg-white md:tw-rounded-[24px] md:tw-mt-[30px] md:tw-pt-[60px] md:tw-pb-[150px] md:tw-px-[30px]">
            <div class="tw-font-bold tw-text-black tw-text-[18px] tw-mb-[16px]">
              Thank you for signing up.
            </div>
            <div class="tw-text-black tw-text-[16px] tw-mb-[24px]">
              Your email has been verified.
            </div>
            <button class="tw-bg-primary-1 tw-text-white tw-text-[16px] tw-w-full tw-py-[10px] tw-rounded-[16px] tw-mb-[16px]">
              Explore with ShowEasy
            </button>
            <div class="tw-mx-auto tw-text-primary-1 tw-text-[14px] tw-w-fit">
              Go to ShowEasy in {{ `${this.countdown}` }} sec...
            </div>
            <loading :isLoading="isPageLoading"></loading>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import loading from "@/components/newComponent/loading/loading.vue";


export default {
  name: "Redirect",
  layout: "login",
  auth: false,
  components: {
    loading,
  },
  data() {
    return {
      isPageLoading: false,
      countdown: 5,
    };
  },
  watch: {
    
  },
  created(){
    this.secondCountDown();
    

  },
  methods: {
    secondCountDown(){
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        }
        if (this.countdown === 0) {
          clearInterval(this.timer);
        }
      }, 1000);
      if(this.countdown === 0){
        console.log("0")
      }
    }

  },
  computed: {
    
  },

};
</script>

<style lang="scss" scoped>
#app {
  overflow-y: hidden;
}

.welcome {
  color: #f5cda8;
  font-family: Damion;
  font-size: 48px;
  margin-bottom: 0px;
  font-weight: 400;
  line-height: 66px;
  letter-spacing: 0.02em;
}

.sub {
  color: #9c9c9c;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 29px;
  letter-spacing: 0.02em;
}

:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
  padding: 0;
  margin: 0;
}

:deep(.v-messages__message) {
  font-size: 14px;
}

$border-style: 1px solid #e5e5e5;

.title {
  font-weight: 700;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0.02em;
  color: #232323;
}

:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
  margin-bottom: 0;
  padding: 0;

  .v-messages {
    color: #9c9c9c;
    display: none;
  }

  .v-messages.error--text {
    display: block;
    margin-top: 4px;
    margin-bottom: 16px;
  }
}


.btn-border {
  border: $border-style;
}
</style>