updates

src/components/CoffeeFarmer.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="coffeefarmers">
     <h3 class="header">{{  $t('coffeefarmers.title') }}</h3>
-    <div class="separator"></div>
+    <!-- <div class="separator"></div> -->
   </section>
 </template>
 
@@ -14,9 +14,10 @@ export default {
 <style lang="scss" scoped>
   .coffeefarmers {
     height: 590px;
-    background-image: url('@images/grains.png');
+    background: white;
+    background-image: url('@images/grains.jpg');
     background-repeat: no-repeat;
-    background-size: contain;
+    background-size: cover;
     color: #fff;
   }
 
@@ -26,6 +27,7 @@ export default {
     line-height: 58px;
     padding: 175px 230px 0;
     text-align: center;
+    text-shadow: 1px 1px 10px #000;
   }
 
   .separator {

src/components/Employee.vue

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

src/components/LocaleSelector.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="locale-selector">
-      <a href="#" @click="toggle">
+      <a href="#" @click.prevent.stop="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 class="item" v-for="(value, key) in locales" :key="key" @click.prevent.stop="changeLocale(key)">{{ value }}</div>
       </div>
     </div>
 </template>
@@ -66,19 +66,24 @@ export default {
       }
     }
     .options {
-      padding: 8px;
+      padding: 8px 0 8px;
       display: inline-block;
       width: 100px;
       position: absolute;
       right: 0;
       top: 24px;
-      background: white;
-      border-radius: 10px;
-      color: black;
+      background: #121212;
+      border-radius: 5px;
+      color: #fefefe;
     }
     .item {
       cursor: pointer;
-      margin: 8px 0 0;
+      padding: 8px 0 8px 12px;
+
+      &:hover {
+        color: #FECE16;
+      background: #111;
+      }
     }
   }
 </style>

src/components/ProductBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-box">
     <div class="product-box-image">
-      <img :src="$helper.getImage(product.image_product_1)" alt="">
+      <img :src="$helper.getImage(product.image)" alt="">
     </div>
     <div class="product-box-bottom">
       <h1>{{ $t(product.name) }}</h1>

src/components/ProductCarousel.vue

@@ -0,0 +1,78 @@
+<template>
+  <Carousel class="carousel" :items-to-show="2" :wrap-around="false">
+    <Slide v-for="product in products" :key="product.kind">
+      <div class="carousel-item">
+        <ProductBox :product="product"></ProductBox>
+      </div>
+    </Slide>
+
+    <template #addons>
+      <Navigation />
+      <Pagination />
+    </template>
+  </Carousel>
+</template>
+
+<script>
+import 'vue3-carousel/dist/carousel.css'
+import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
+import ProductBox from './ProductBox.vue';
+
+export default {
+  props: {
+    products: Array
+  },
+  components: {
+    Carousel,
+    Slide,
+    Pagination,
+    Navigation,
+    ProductBox,
+  },
+}
+</script>
+
+<style lang="scss">
+  
+  .carousel {
+    margin-top: 32px;
+    &-item {
+      min-height: 570px;
+      width: 625px;
+      font-size: 20px;
+    }
+
+    &__slide {
+      padding: 10px;
+    }
+    &__pagination-button:hover::after, &__pagination-button--active::after {
+      background: rgba(255,255,255, 0.6);
+    }
+
+    &__pagination-button {
+      &::after{    
+        background: rgba(255,255,255, 0.3);
+      }
+
+      &--active::after {
+        background: rgba(255,255,255, 0.6);
+        &:hover {
+          background: rgba(255,255,255, 0.6);
+        }
+      }
+    }
+
+    &__prev,
+    &__next {
+      box-sizing: content-box;
+      background : rgba(255,255,255, 0.3);
+      border-radius: 50px;
+      border: none;
+      color: #333;
+
+      &:hover {
+        background : rgba(255,255,255, 0.8);
+      }
+    }
+  }
+</style>