cambios

src/components/CoffeeFarmer.vue

@@ -13,7 +13,7 @@ export default {
 
 <style lang="scss" scoped>
   .coffeefarmers {
-    height: 590px;
+    height: 480px;
     background: white;
     background-image: url('@images/grains.jpg');
     background-repeat: no-repeat;
@@ -22,8 +22,8 @@ export default {
   }
 
   h3.header {
-    font-weight: 400;
-    font-size: 48px;
+    font-weight: 600;
+    font-size: 36px;
     line-height: 58px;
     padding: 175px 230px 0;
     text-align: center;

src/components/Employee.vue

@@ -24,7 +24,7 @@ export default {
   .name {
     margin: 36px 0 0;
     font-weight: 700;
-    font-size: 32px;
+    font-size: 24px;
     line-height: 28px;
     padding: 0;
   }
@@ -32,7 +32,7 @@ export default {
   .role {
     margin: 28px 0 0;
     font-weight: 500;
-    font-size: 20px;
+    font-size: 16px;
     line-height: 23.44px;
     padding: 0;
   }

src/components/LocaleSelector.vue

@@ -16,7 +16,7 @@
 
 <script>
 const locales = {
-  // de: 'Deutsche',
+  de: 'Deutsch',
   en: 'English',
   es: 'Español'
 }

src/components/Menu.vue

@@ -14,11 +14,12 @@ export default {
   <section class="menu" :class="type">
     <div class="overlay">
       <nav>
-        <img class="logo" src="@images/logo-kreis_3.png" />
+        <img class="logo" src="@images/logo-kreis_34.png" />
         <div class="links">
           <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="/shopping">{{ $t('menu.shopping') }}</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>
@@ -57,8 +58,8 @@ export default {
      grid-template-columns: auto auto;
 
       .logo {
-        height: 72px;
-        width: 72px;;
+        height: 90px;
+        width: 90px;;
       }
 
       .links {

src/components/ProductBox.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="product-box">
+    <div class="header">
+      <div>
+
+      </div>
+      <div>
+        <h2>{{ $t(product.name) }}</h2>
+        <h3>{{ $t(product.farm) }} &bull; {{ $t(product.strain) }}</h3>
+      </div>
+    </div>
     <div class="product-box-image">
       <img :src="$helper.getImage(product.image)" alt="">
     </div>
-    <div class="product-box-bottom">
-      <h1>{{ $t(product.name) }}</h1>
-      <div class="separator"></div>
-      <p class="farm">{{ $t(product.farm) }}</p>
-      <p class="strain">{{ $t(product.strain) }}</p>
+    <div class="footer">
+      <!-- <h2>{{ $t(product.footer) }}</h2>
+      <h3>{{ $t(product.footer) }}</h3> -->
     </div>
   </div>
 </template>
@@ -21,43 +28,46 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .product-box{
-    display: inline-block;
-    width: 560px;
-    height: 573px;
-    background-image: url('@images/bg_1.png');
-    background-position: top left;
-    padding: 24px;
-    color: #603809;
-    
-    h1 {
+.product-box {
+  width: 360px;
+  height: 480px;
+  background: #DAD7DA;
+  border-radius: 12px;
+  background-position: top left;
+  box-sizing: border-box;
+  color: #141218;
+  padding: 0 px 0;
+
+  .header {
+    padding: 12px 16px;
+    align-items: center;
+    align-self: stretch;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 40px auto;
+
+    h2 {
+      padding: 0px;
+      font-weight: 500;
+      font-size: 24px;
+      text-align: left;
+      line-height: 32px;
+    }
+
+    h3 {
+      font-size: 14px;
       font-weight: 400;
-      font-size: 44px;
-      text-align: left;;
+      text-align: left;
+
     }
 
-    &-image {
-      height: 320px;
-    }
-
-    &-bottom {
-      margin-top: 24px;
-      padding: 20px;
-      background-color: #fff;
-      height: 181px;
-
-      p {
-        font-weight: 400;
-        line-height: 22px;
-        margin: 8px 0;
-      }
-
-      .separator {
-        border-bottom: 2px solid #603809;
-        margin-right: 20%;
-        margin-bottom: 24px;
-      }
-    }
   }
 
+  &-image {
+    width: fixed;
+    height: fixed;
+  }
+
+
+}
 </style>

src/components/ProductCarousel.vue

@@ -1,5 +1,5 @@
 <template>
-  <Carousel class="carousel" :items-to-show="2" :wrap-around="false">
+  <Carousel class="carousel" :items-to-show="3" :wrap-around="false">
     <Slide v-for="product in products" :key="product.kind">
       <div class="carousel-item">
         <ProductBox :product="product"></ProductBox>
@@ -38,7 +38,7 @@ export default {
     margin-top: 32px;
     &-item {
       min-height: 570px;
-      width: 625px;
+      width: 360px;
       font-size: 20px;
     }