<template>
  <div
    class="page-container animated fadeIn flex flex-center column text-center"
  >
    <q-img
      class="page-logo"
      alt="Teknokomo Logo"
      src="~assets/logo.png"
      fit="contain"
    />

    <q-btn
      color="white"
      text-color="#00000000"
      @click="$router.push({ name: 'IndexPage' })"
      >В БУДУЩЕЕ</q-btn
    >

    <span class="page-text02">
      Погрузитесь через РВМ Универсо
      <br />
      в гипервселенную — бесконечное пространство
      <br />
      исследований, цифровизации и социального
      <br />
      взаимодействия.
    </span>

    <div class="bottom-banners-block">
      <!-- Your banner components here -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotAuth',
  props: {},

  data() {
    return {
      banners: [
        {
          text: 'Международное сообщество Текнокомо',
          color: '#4E70C7',
          action: '/',
        },
        {
          text: 'КиберГосплан',
          color: '#006868',
          action: '/actions',
        },
        {
          text: 'Метавселенные',
          color: '#5E2B4D',
          action: '/universes',
        },
      ],
    };
  },
};
</script>

<style scoped>
.page-container {
  background-image: url(../assets/background.jpg);
  background-color: #cccccc;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  z-index: 0;
  min-height: 100vh;
}
.page-logo {
  max-height: 25vh;
  max-width: 25vw;
  justify-self: center;
  margin-bottom: 60px; /* Add a 150px margin at the bottom */
  margin-top: 50px;
}

.page-text02 {
  font-size: 32px;
  margin-bottom: 133px; /* Add a 150px margin at the bottom */
  margin-top: 60px;
  color: aliceblue;
}
</style>
