cambios

src/components/Footer.vue

@@ -2,7 +2,7 @@
 
 <template>
   <footer>
-    <img class="logo" src="@images/logo-kreis_3.png">
+    <!-- <img class="logo" src="@images/logo-kreis_3.png"> -->
     <div class="contact-info">
         <h5>{{ $t('footer.contact')}}</h5>
         <p>{{ $t('footer.message')}}</p>
@@ -20,9 +20,12 @@
           <a href="#"><i class="twitter-icon"></i></a>
         </p>
         <p class="links">
-          <a href="https://tayronafoods.com/impressum">{{ $t('footer.impressum')}}</a>
+          <router-link class="link" to="/impressum">{{ $t('footer.impressum')}}</router-link>
+          <router-link class="link" to="/dataprotection">{{ $t('footer.dataprotection') }}</router-link>
+          <router-link class="link" to="/agb">{{ $t('footer.agb') }}</router-link>
+          <!-- <a href="https://tayronafoods.com/impressum">{{ $t('footer.impressum')}}</a>
           <a href="https://tayronafoods.com/datenschutz">{{ $t('footer.dataprotection')}}</a>
-          <a href="https://tayronafoods.com/agb">{{ $t('footer.agb')}}</a>
+          <a href="https://tayronafoods.com/agb">{{ $t('footer.agb')}}</a> -->
         </p>
     </div>
   </footer>

src/components/LocaleSelector.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="locale-selector">
+      <a href="#" @click="toggle">
+        <img class="globe-image" src="@images/global.svg" alt="">
+        <span>{{ selectedLocale }}</span>
+        <img src="@images/arrow-down.svg" alt="">
+      </a>
+      <div class="options" v-if="active">
+        <div class="item" v-for="(value, key) in locales" :key="key" @click="changeLocale(key)">{{ value }}</div>
+      </div>
+    </div>
+</template>
+
+<script>
+const locales = {
+  de: 'Deutsche',
+  en: 'English',
+  es: 'Español'
+}
+export default {
+  data() {
+    return {
+      active: false,
+      locales,
+    }
+  },
+  computed: {
+    selectedLocale() {
+      return this.locales[this.$i18n.locale];
+    }
+  },
+  methods: {
+    toggle() {
+      this.active = !this.active;
+    },
+    changeLocale(locale) {
+      this.$i18n.locale = locale;
+      this.active = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .locale-selector {
+    display: inline;
+    position: relative;
+
+    .globe-image{
+      height: 14px;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      color: #fff;
+      text-decoration: none;
+    }
+
+    img {
+      margin-right: 5px;
+
+      &:last-child {
+        margin-right: 0;
+        margin-left: 5px;
+      }
+    }
+    .options {
+      padding: 8px;
+      display: inline-block;
+      width: 100px;
+      position: absolute;
+      right: 0;
+      top: 24px;
+      background: white;
+      border-radius: 10px;
+      color: black;
+    }
+    .item {
+      cursor: pointer;
+      margin: 8px 0 0;
+    }
+  }
+</style>

src/components/Menu.vue

@@ -1,9 +1,12 @@
 <script>
+import LocaleSelector from './LocaleSelector.vue';
+
 export default {
-  props: {
-    type: String,
-    title: String,
-  }
+    props: {
+        type: String,
+        title: String,
+    },
+    components: { LocaleSelector }
 }
 </script>
 
@@ -16,8 +19,11 @@ export default {
           <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
           <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
           <router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
+          <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
+          <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
           <!-- <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
           <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link> -->
+          <LocaleSelector class="link"></LocaleSelector>
         </div>
       </nav>
       <h1 class="title" v-if="title">{{ title }}</h1>
@@ -51,8 +57,8 @@ export default {
      grid-template-columns: auto auto;
 
       .logo {
-        height: 117px;
-        width: 118px;;
+        height: 72px;
+        width: 72px;;
       }
 
       .links {
@@ -90,5 +96,17 @@ export default {
     &.products {
       background-image: url('@images/products.png');
     }
+    
+    &.social {
+      background-image: url('@images/kids.png');
+    }
+
+    &.contact {
+      background-color: #000;
+      height: 180px;
+      .overlay {
+        background: transparent;
+      }
+    }
   }
 </style>

src/components/ProductFlipCard.vue

@@ -213,7 +213,10 @@ h3 {
       display: grid;
       grid-template-rows: 35% 65%;
 
-      
+      h3.title {
+        text-transform: uppercase;
+      }
+
       .strain {
         text-align: center;
         font-family: 'Cormorant Garamond', serif;