<template>
  <div
    class="page-container animated fadeIn flex column self-center items-center text-center"
  >
    <q-img
      class="page-logo"
      alt="Teknokomo Logo"
      src="~assets/logo.svg"
      fit="contain"
    />
    <span class="page-text"> Гипервселенная </span>
    <span class="page-text02">
      Бесконечное пространство исследований,
      <br />
      автоматизации и социального взаимодействия.
    </span>
    <span class="page-text07">
      Мы проводим глобальную реновацию наших проектов.
    </span>
    <span class="page-text09">
      Начните работу с
      <span
        @click="showLoginForm = true"
        class="cursor-pointer"
        style="text-decoration: underline"
        >авторизации</span
      >
      или
      <router-link to="/registrado" style="color: white"
        >регистрации</router-link
      >.</span
    >
  </div>
</template>

<script>
import { mapWritableState } from "pinia";
import { useUiStore } from "src/stores/UI";
export default {
  name: "NotAuth",
  props: {},
  computed: {
    ...mapWritableState(useUiStore, ["showLoginForm"]),
  },
};
</script>

<style scoped>
.page-container {
  --animate-duration: 2s;
  --animate-delay: 2s;

  width: 100%;
  gap: 20px;
  color: rgba(255, 255, 255, 1);
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
}
.page-logo {
  max-height: 25vh;
  max-width: 25vw;
}

.page-text {
  font-size: 4rem;
}

.page-text02 {
  font-size: 2rem;
}

.page-text07 {
  font-size: 1.5rem;
}

.page-text09 {
  font-size: 1.5rem;
}

@media (max-width: 820px) {
  .page-text {
    font-size: 2.5rem;
  }
  .page-text02 {
    font-size: 1.6rem;
  }
  .page-text07 {
    font-size: 1.2rem;
  }
  .page-text09 {
    font-size: 1.2rem;
  }
}
@media (max-width: 530px) {
  .page-text02 {
    font-size: 1.2rem;
  }
}
@media (max-width: 400px) {
  .page-text {
    font-size: 2rem;
  }
  .page-text02 {
    font-size: 0.8rem;
  }
  .page-text07 {
    font-size: 0.8rem;
  }
  .page-text09 {
    font-size: 0.8rem;
  }
}
</style>
