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/login/"
          data-cy="oauth-login"
        >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://myskillbox.ch/anleitung"
        data-cy="oauth-login"
      >Anleitung anschauen</a>
    </div>
    <div class="links">
      <ul class="links__list">
        <li class="links__list-item">
          <a href="https://myskillbox.ch/angebot">Lizenz kaufen</a>
        </li>
        <li class="links__list-item">
          <a :href="$flavor.supportLink">Support</a>
        </li>
        <li class="links__list-item">
          <a href="https://myskillbox.ch/datenschutz">Datenschutz</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
  const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');

  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>