skillbox/client/src/pages/hello.vue

<template>
  <div
    class="hello"
    data-cy="hello-page"
  >
    <div class="about">
      <div class="about__logos logos">
        <a
          href="https://www.hep-verlag.ch/"
          target="_blank"
        >
          <hep-logo-no-claim class="logos__logo" />
        </a>
        <a
          href="https://www.ehb.swiss/"
          target="_blank"
          v-if="$flavor.showEHB"
        >
          <ehb-logo class="logos__logo" />
        </a>
      </div>
      <p class="about__text">
        <template v-if="$flavor.showEHB">
          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in Zusammenarbeit mit der Eidgenössischen Hochschule
          für Berufsbildung (EHB).
        </template>
        <template v-else> {{ $flavor.textAppName }} ist ein Angebot des hep Verlags. </template>
      </p>
    </div>
    <logo class="logo" />
    <div class="login-actions">
      <h2
        class="login-actions__title"
        data-cy="hello-title"
      >
        Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
      </h2>
      <a
        class="button button--primary button--big actions__submit"
        href="/api/oauth/login/"
        data-cy="oauth-login"
        >Mit hep Konto anmelden</a
      >

      <div class="login-actions__register register">
        <p>Haben Sie noch kein hep Konto?</p>
        <a
          class="hep-link"
          href="/api/oauth/register/"
          data-cy="oauth-register"
          >Jetzt registrieren</a
        >
      </div>
    </div>
    <div class="information">
      <p>Was ist ein hep Konto und wie kann ich mich dafür registrieren?</p>
      <a
        class="hep-link"
        :href="`https://${$flavor.baseUrl}/anleitung`"
        >Anleitung anschauen</a
      >
    </div>
    <div class="links">
      <ul class="links__list">
        <li class="links__list-item">
          <a :href="`${$flavor.licenseUrl}`">Lizenz kaufen</a>
        </li>
        <li class="links__list-item">
          <a :href="`https://${$flavor.baseUrl}/support`">Support</a>
        </li>
        <li class="links__list-item">
          <a :href="`https://${$flavor.baseUrl}/datenschutz`">Datenschutz</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const HepLogoNoClaim = defineAsyncComponent(() => import('@/components/icons/HepLogoNoClaim.vue'));
const EhbLogo = defineAsyncComponent(() => import('@/components/icons/EhbLogo.vue'));
const Logo = defineAsyncComponent(() => import('@/components/icons/Logo.vue'));

export default {
  components: {
    HepLogoNoClaim,
    EhbLogo,
    Logo,
  },

  data() {
    return {
      email: '',
      submitted: false,
      loading: false,
    };
  },
};
</script>

<style scoped lang="scss">
@import 'styles/helpers';

$hello-block-margin: 2 * $medium-spacing;

.hello {
  max-width: 600px;
  margin: 0 auto;
  @include desktop {
    max-width: 600px;
    margin: 0 auto;
  }
}

.logo {
  display: block;
  width: 300px;
  margin: $small-spacing auto $hello-block-margin;

  @include desktop {
    display: none;
  }
}

.about {
  display: none;
  margin-bottom: $hello-block-margin;

  @include desktop {
    display: block;
  }

  &__text {
    margin-top: $medium-spacing;
    @include regular-text;
  }

  &__logos {
    & a:first-child {
      margin-right: $large-spacing;
    }
  }
}

.logos {
  &__logo {
    height: 30px;
  }
}

.login-actions {
  @include widget-shadow;
  padding: $medium-spacing;
  margin-bottom: $hello-block-margin;

  &__title {
    font-size: 2.125rem; // 34px
    font-weight: 700;
  }

  &__register {
    margin-top: $large-spacing;

    > p,
    a {
      @include regular-text;
    }
  }
}

.information {
  margin-top: $hello-block-margin;
  > p,
  a {
    @include regular-text;
  }
}

.links {
  margin-top: $hello-block-margin;
  display: flex;

  &__list-item {
    color: $color-silver-dark;

    > a {
      @include regular-text;
    }

    flex-direction: column;
    margin-top: $medium-spacing;

    &:first-child {
      margin-top: 0;
    }

    @include desktop {
      display: inline-block;
      flex-direction: row;

      &:not(:last-child) {
        margin-right: 1rem;
      }
    }
  }
}
</style>