Update: create Banner (coscine/issues#738)

src/App.vue

@@ -24,7 +24,6 @@
         </ul>
       </nav>
     </header>
-    
     <div class="container-fluid app-content">
       <div class="row">
         <div class="col-xl-2"></div>
@@ -36,19 +35,26 @@
           </h1>
           <div class="row">
             <div class="col-sm-12 col-md-7">
-              <div class="card bg-light mb-3 w-100">
-                <div class="card-body">
-                  <h5 class="card-title">{{ $t('description_headline') }}</h5>
-                  <p class="card-text">{{ $t('description_text') }}</p>
-                  <h5 class="card-title">{{ $t('description_help_headline') }}</h5>
-                  <p class="card-text">
-                    {{ $t('description_help') }}
-                    <a href="mailto:servicedesk@itc.rwth-aachen.de">Servicedesk</a>
+                <div class="alert alert-warning" role="alert">
+                  <h5 class="alert-heading">{{ $t('alert_headline') }}</h5>
+                  <p class="alert-title">{{ $t('alert_text1') }}
+                  <a href="mailto:servicedesk@itc.rwth-aachen.de?subject=CoScInE%20Pilot%20Program">Servicedesk</a>
+                  {{ $t('alert_text2') }}
                   </p>
                 </div>
+                <div class="card bg-light mb-3 w-100">
+                  <div class="card-body">
+                    <h5 class="card-title">{{ $t('description_headline') }}</h5>
+                    <p class="card-text">{{ $t('description_text') }}</p>
+                    <h5 class="card-title">{{ $t('description_help_headline') }}</h5>
+                    <p class="card-text">
+                      {{ $t('description_help') }}
+                      <a href="mailto:servicedesk@itc.rwth-aachen.de">Servicedesk</a>
+                    </p>
+                  </div>
               </div>
             </div>
-            <div class="col-sm-12 col-md-5">
+           <div class="col-sm-12 col-md-5">
               <div class="row">
                 <div class="card bg-light mb-3 w-100">
                   <div class="card-body">
@@ -77,11 +83,10 @@
               </div>
             </div>
           </div>
-        </div>
+          </div>
       </div>
       <div class="col-xl-2"></div>
-    </div>
-
+    </div>   
     <footer id="footer">
       <div class="row container">
         <div id="servicecol" class="col-xs-12 col-sm-6">
@@ -345,4 +350,13 @@ export default Vue.extend({
 #signup-toggle {
   margin: 0em;
 }
+
+.alert-heading {
+  text-align: left;
+  border-radius: .2rem;
+}
+.alert-title {
+  text-align: left;
+  border-radius: .2rem;
+}
 </style>

src/locale/de.ts

@@ -25,4 +25,10 @@ export default {
     imprint: 'Impressum',
     contact: 'Kontakt',
     otherLocale: 'En',
+    alert_headline: 'Informationen zur Pilotphase',
+    alert_text2: '] senden.',
+    alert_text1: `CoScInE befindet sich derzeit in der ersten Pilotphase. Sie können sich also gerne
+                einloggen und das System erkunden, aber benutzen Sie es noch nicht für Ihre wichtigen Forschungsdaten!
+                Bitte kontaktieren Sie uns, wenn Sie an dem Pilotprogramm teilnehmen möchten. Feedback und
+                Verbesserungsvorschläge können Sie gerne an [`,
 };

src/locale/en.ts

@@ -25,4 +25,10 @@ export default {
     imprint: 'Imprint',
     contact: 'Contact',
     otherLocale: 'De',
+    alert_headline: 'Information about the pilot phase',
+    alert_text2: ']',
+    alert_text1: `CoScInE is currently in the first pilot phase. So you are welcome to
+                 log in and explore the system, but do not use it for your important
+                 research data yet! Please contact us if you want to be part of the
+                 pilot program. If you have feedback you are welcome to send it to [`,
 };