Merge pull request #18 from Hilfstelefon-WirVsVirus/add_landing_page

Add landing page

src/App.vue

@@ -1,32 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </div>
 </template>
-
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>

src/assets/styles/_colors.scss

@@ -1 +1 @@
-$primary: #8A00EF;
+$primary: #526381;

src/assets/styles/_variables.scss

@@ -1,2 +1,6 @@
 $font-weight-regular: 400;
-$font-weight-bold: 700;
+$font-weight-bold: 700;
+
+$desktop: "only screen and (min-width: 1024px)";
+$tablet: "only screen and (min-width: 768px) and (max-width: 1023px)";
+$mobile: "only screen and (max-width: 767px)";

src/assets/styles/index.scss

@@ -4,10 +4,36 @@
 "_fonts.scss";
 
 body {
-    color: $primary;
-    font-family: 'Lato', 'sans-serif';
+  color: $primary;
+  font-family: 'Lato', 'sans-serif';
 }
 
 * {
-    box-sizing: border-box;
-}
+  box-sizing: border-box;
+}
+
+a {
+  color: $primary;
+  text-decoration: none;
+}
+
+h1, h2 ,h3 ,h4 ,h5 ,h6 {
+  font-family: 'Baloo 2', 'sans-serif';
+}
+
+.page-container {
+  margin: auto;
+  max-width: 1200px;
+
+  &.home main {
+    margin: 0 auto;
+
+    @media #{$desktop} {
+      max-width: 800px;
+    }
+
+    @media #{$tablet} {
+      max-width: 600px;
+    }
+  }
+}

src/components/Card.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="card">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+};
+</script>
+
+<style lang="scss" scoped>
+  .card {
+    background: #EDF2F7;
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
+    padding: 30px 20px;
+    margin: 0 5px;
+    text-align: center;
+  }
+</style>

src/components/Header.vue

@@ -0,0 +1,108 @@
+<template>
+  <header class="header">
+    <div class="header__logo logo">
+      <img
+        class="logo__image"
+        src="/img/icons/logo.svg"
+        :alt="$t('meta.title')"
+      />
+      <h1 class="logo__text">{{ $t('meta.title') }}</h1>
+    </div>
+    <h2 class="header__phone phone">
+      <a class="phone__link" :href="phone">{{ $t('meta.phone') }}</a>
+      <div class="phone__image-wrapper">
+        <img
+          class="phone__image"
+          src="/img/icons/phone.svg"
+          alt=""
+        />
+      </div>
+    </h2>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  computed: {
+    phone() {
+      return `tel:${this.$t('meta.phone')}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .header {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 20px 20px 0;
+
+    @media #{$tablet}, #{$desktop} {
+      flex-wrap: nowrap;
+    }
+
+    &__logo {
+      flex: 1 1 100%
+    }
+
+    &__phone {
+      flex: 1 1 100%;
+      margin: 0;
+      text-align: center;
+
+      @media #{$tablet}, #{$desktop} {
+        font-size: 2em;
+      }
+    }
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+
+    @media #{$tablet}, #{$desktop} {
+      justify-content: flex-start;
+    }
+
+    &__image {
+      width: 30px;
+      margin-right: 10px;
+    }
+
+    &__text {
+      margin: 0;
+    }
+  }
+
+  .phone {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media #{$tablet}, #{$desktop} {
+      justify-content: flex-end;
+    }
+
+    &__image-wrapper {
+      display: none;
+      border-radius: 100%;
+      height: 35px;
+      width: 35px;
+      background: #90CCC0;
+      margin-left: 10px;
+
+      @media #{$tablet}, #{$desktop} {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    &__image {
+      width: 20px;
+      filter: invert(100%)
+        sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
+    }
+  }
+</style>

src/components/Navigation.vue

@@ -0,0 +1,52 @@
+<template>
+    <nav class="navigation">
+      <ul class="navigation__list">
+        <li class="navigation__list-item">
+          <router-link to="/impressum">{{ $t('navigation.imprint') }}</router-link>
+        </li>
+        <li class="navigation__list-item">
+          <router-link to="/wirvsvirus">{{ $t('navigation.wirvsvirus') }}</router-link>
+        </li>
+        <li class="navigation__list-item">
+          <router-link
+            :class="navigation__link"
+            to="/contribute"
+          >
+            {{ $t('navigation.contribute') }}
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+</template>
+
+<script>
+export default {
+  name: 'Navigation',
+};
+</script>
+
+<style lang="scss" scoped>
+  .navigation {
+    font-size: 24px;
+    margin-top: 50px;
+
+    &__list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    &__list-item {
+      margin-bottom: 20px;
+      text-align: center;
+
+      &:last-child {
+        margin: 0;
+      }
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+</style>