<template>

  <Page>

    <h1><v-icon name="times"/> Title!</h1>

    <!-- Logo -->
    <ScorpionLogo id="_logo"/>

    <!-- Subtitle -->
    <i18n path="views.Home.subTitle1" tag="h1" class="text-center mt-6 pb-4">
      <!-- ref: {0} -->
      <span class="_font-vice-city-sans">{{ GLOBALS.__APP_NAME__ }}</span>
    </i18n>

    <!-- 'About' button -->
    <Button
      variant="primary"
      to="/about"
      class="mx-auto"
    >
      {{ $t('views.Home.aboutButton') }}
    </Button>

  </Page>

</template>

<script>
import { Core } from '@hperchec/scorpion-ui'
/**
 * Home page component
 */
export default {
  applyMixins () {
    return [
      Core.context.vue.mixins.RouteComponentMixin
    ]
  }
}
</script>

<style lang="scss">
#_logo {
  @apply mx-auto;
  @apply mt-4;
  width: 200px;
  height: auto;
}
</style>
