Style hellopage about

client/src/pages/hello.vue

@@ -2,12 +2,44 @@
   <div
     class="hello"
     data-cy="hello-page">
-    <h1
+    <div class="about">
-      class="hello__title public-page__title"
+      <div class="about__logos">
-      data-cy="hello-title">Wollen Sie {{ pageTitle }} jetzt im Unterricht verwenden?</h1>
+        <a
-    <a
+          href="https://www.hep-verlag.ch/"
-      href="/api/oauth/login/"
+          target="_blank">
-      data-cy="oauth-login">Login</a>
+          <hep-logo class="about__logo-hep"/>
+        </a>
+        <a
+          href="https://www.ehb.swiss/"
+          target="_blank">
+          <ehb-logo class="about__logo-ehb"/>
+        </a>
+      </div>
+      <p class="about__text">mySkillbox ist ein Angebot des hep Verlags in
+      Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für Berufsbildung.</p>
+    </div>
+    <div class="login-actions">
+      <h1
+        class="hello__title public-page__title"
+        data-cy="hello-title">Wollen Sie {{ pageTitle }} im Unterricht verwenden?</h1>
+      <a
+        class="button button--primary button--big actions__submit"
+        href="/api/oauth/login/"
+        data-cy="oauth-login">Mit hep Konto anmelden</a>
+
+      <div class="register">
+        <p>Haben Sie noch kein hep Konto?</p>
+        <a
+          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
+        href="/api/oauth/login/"
+        data-cy="oauth-login">Anleitung anschauen</a>
+    </div>
   </div>
 </template>
 
@@ -15,11 +47,15 @@
 
   import LoadingButton from '@/components/LoadingButton';
   import pageTitleMixin from '@/mixins/page-title';
+  import HepLogo from '@/components/icons/HepLogo';
+  import EhbLogo from '@/components/icons/EhbLogo';
 
   export default {
     mixins: [pageTitleMixin],
     components: {
-      LoadingButton
+      LoadingButton,
+      HepLogo,
+      EhbLogo
     },
 
     data() {
@@ -37,15 +73,32 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_mixins.scss";
 
-  .text-link {
+  .about {
-    font-family: $sans-serif-font-family;
+    &__text {
-    color: $color-brand;
+      margin-top: $medium-spacing;
-  }
+      @include regular-text;
+    }
 
-  .actions {
+    &__logos {
-    &__reset {
+      & a:first-child {
-      display: inline-block;
+        margin-right: $large-spacing;
-      margin-left: $large-spacing;
+      }
+    }
+
+    &__logo-hep {
+      width: auto;
+      height: 30px;
+      margin-bottom: $large-spacing;
+
+      @include desktop {
+        width: 147px;
+        margin-bottom: 0;
+      }
+    }
+
+    &__logo-ehb {
+      width: 100px;
+      height: 30px;
     }
   }