<template>
  <div>
    <b-row class="mb-3 d-flex justify-content-center">
      <b-col md="8">
        <div class="profile-card pb-2">
          <div class="px-5 pt-3">
            <div class="custom-padding px-5 pt-3 pb-0">
              <div class="mb-2 akkurat-bold gray-color">
                <span style="display: block">
                  Parabéns, cadastro concluído! 😍
                </span>
                <span>Retornaremos em breve com mais informações.</span>
              </div>

            </div>
          </div>
          <div class="akkurat-regular gray-color-min">
            ATENÇÃO: O cadastro será avaliado em até 48 Horas,
            a análise será enviada para seu email de cadastro.
          </div>
        </div>
      </b-col>
    </b-row>
    <b-row class="mb-2">
      <b-col class="d-flex justify-content-center align-items-center mt-3">
        <signup-button title="Voltar a tela inicial" icon="user-friends" btn-color="#278937"
        class="align-self-center" router-name="Documentos" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
import Email from '@/components/shared-components/inputs/Email.vue';
import TextInput from '@/components/shared-components/inputs/TextInput.vue';
import NumberInput from '@/components/shared-components/inputs/NumberInput.vue';
import SignupButton from '@/components/signup/SignupButton.vue';

export default {
  name: 'signup-form',
  components: {
    Email,
    TextInput,
    NumberInput,
    SignupButton,
  },
  data: () => ({
    name: 'Lúcia Matias',
    userId: '',
    email: '',
  })
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';
@import '../../assets/css/cards.scss';

.custom-width {
  width: 25%;
}

.custom-padding {
  padding-left: 60px;
  padding-right: 60px;
}

.orange-color {
  color: #ED8626;
}

.gray-color {
  color: #737373;
}

.gray-color-min {
  color: #7A7A7A;
  font-size: 12px;
}
</style>
