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;
+      background: #121212;
-      border-radius: 10px;
+      border-radius: 5px;
-      color: black;
+      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>

src/data.js

@@ -0,0 +1,78 @@
+export const products = [
+  {
+    kind: 'earth',
+    kind_localized: 'common.earth',
+    name: 'products.brasil_de_andrade.name',
+    image: 'logo_tierra.svg',
+    image_product_single: 'product-brasil-single.png',
+    image_product_double: 'product-brasil-double.png',
+    slogan: 'products.brasil_de_andrade.slogan',
+    description: 'products.brasil_de_andrade.description',
+    farm: 'products.brasil_de_andrade.farm',
+    strain: 'products.brasil_de_andrade.strain',
+    country: 'products.brasil_de_andrade.country',
+    height: 'products.brasil_de_andrade.height',
+    revision: 'products.brasil_de_andrade.revision',
+    harvest: 'products.brasil_de_andrade.harvest',
+    profile: 'products.brasil_de_andrade.profile',
+    taste: 'products.brasil_de_andrade.taste',
+    texture: 'products.brasil_de_andrade.texture'
+  }, 
+  {
+    kind: 'water',
+    kind_localized: 'common.water',
+    name: 'products.colombia_el_paseito.name',
+    image: 'logo_agua.svg',
+    image_product_single: 'product-colombia-single.png',
+    image_product_double: 'product-colombia-double.png',
+    slogan: 'products.colombia_el_paseito.slogan',
+    description: 'products.colombia_el_paseito.description',
+    farm: 'products.colombia_el_paseito.farm',
+    strain: 'products.colombia_el_paseito.strain',
+    country: 'products.colombia_el_paseito.country',
+    height: 'products.colombia_el_paseito.height',
+    revision: 'products.colombia_el_paseito.revision',
+    harvest: 'products.colombia_el_paseito.harvest',
+    profile: 'products.colombia_el_paseito.profile',
+    taste: 'products.colombia_el_paseito.taste',
+    texture: 'products.colombia_el_paseito.texture'
+  },
+  {
+    kind: 'air',
+    kind_localized: 'common.air',
+    name: 'products.peru_grad_1.name',
+    image: 'logo_aire2.svg',
+    image_product_single: 'product-peru-single.png',
+    image_product_double: 'product-peru-double.png',
+    slogan: 'products.peru_grad_1.slogan',
+    description: 'products.peru_grad_1.description',
+    farm: 'products.peru_grad_1.farm',
+    strain: 'products.peru_grad_1.strain',
+    country: 'products.peru_grad_1.country',
+    height: 'products.peru_grad_1.height',
+    revision: 'products.peru_grad_1.revision',
+    harvest: 'products.peru_grad_1.harvest',
+    profile: 'products.peru_grad_1.profile',
+    taste: 'products.peru_grad_1.taste',
+    texture: 'products.peru_grad_1.texture'
+  },
+  {
+    kind: 'fire',
+    kind_localized: 'common.fire',
+    name: 'products.uganda_gnoma.name',
+    image: 'logo_fuego.svg',
+    image_product_single: 'product-uganda-single.png',
+    image_product_double: 'product-uganda-double.png',
+    slogan: 'products.uganda_gnoma.slogan',
+    description: 'products.uganda_gnoma.description',
+    farm: 'products.uganda_gnoma.farm',
+    strain: 'products.uganda_gnoma.strain',
+    country: 'products.uganda_gnoma.country',
+    height: 'products.uganda_gnoma.height',
+    revision: 'products.uganda_gnoma.revision',
+    harvest: 'products.uganda_gnoma.harvest',
+    profile: 'products.uganda_gnoma.profile',
+    taste: 'products.uganda_gnoma.taste',
+    texture: 'products.uganda_gnoma.texture'
+  },
+];

src/style.css

@@ -45,3 +45,25 @@ body {
   width: 1366px;
   margin: 0 auto;;
 }
+
+.text-centered {
+  text-align: center !important;
+}
+.mt-1 {
+  margin-top: 8px !important;
+}
+.mt-2 {
+  margin-top: 16px !important;
+}
+.mt-3 {
+  margin-top: 24px !important;
+}
+.mt-4 {
+  margin-top: 32px !important;
+}
+.mt-5 {
+  margin-top: 40px !important;
+}
+.mt-6 {
+  margin-top: 48px;
+}

src/views/home/Home.vue

@@ -1,15 +1,46 @@
-<script setup>
+<script>
-  import MenuVue from "../../components/Menu.vue";
+
-  import Origins from "../../components/Origins.vue";
+import Certifications from '../../components/Certifications.vue';
-  import Different from "../../components/Different.vue";
+import CoffeeFarmer from '../../components/CoffeeFarmer.vue';
-  import CoffeeFarmer from "../../components/CoffeeFarmer.vue";
+import Different from '../../components/Different.vue';
-  import Certifications from "../../components/Certifications.vue";
+import Menu from '../../components/Menu.vue';
+import ProductCarousel from '../../components/ProductCarousel.vue';
+import { products } from '../../data.js';
+
+  export default {
+    data() {
+      return {
+        products,
+      };
+    },
+    components: {
+      Certifications,
+      Menu,
+      ProductCarousel,
+      CoffeeFarmer,
+      Certifications
+},
+    computed: {
+      productsCarousel() {
+        return this.products.map(p => ({
+          image: p.image_product_single,
+          name:  p.name,
+          farm: p.farm,
+          strain: p.strain,
+        }));
+      }
+    },
+
+  }
 </script>
 
 <template>
-  <MenuVue type="home" />
+  <Menu type="home" />
-  <Origins />
+  <section class="home-section content">
-  <Different />
+    <h2>{{ $t('origins.header') }}</h2>
-  <CoffeeFarmer />
+    <ProductCarousel :products="productsCarousel" />
+    <DifferentVue />
+    <CoffeeFarmer class="mt-5" />
     <Certifications />
+  </section>
 </template> 

src/views/products/Products.vue

@@ -1,90 +1,10 @@
 <script>
   import MenuVue from "../../components/Menu.vue";
   import 'vue3-carousel/dist/carousel.css'
-  import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
   import ProductFlipCard from "../../components/ProductFlipCard.vue";
-  import ProductBox from '../../components/ProductBox.vue';
   import Certifications from "../../components/Certifications.vue";
-
+  import ProductCarouselVue from "../../components/ProductCarousel.vue";
-  const products = [
+  import { products } from '../../data.js';
-    {
-      kind: 'earth',
-      kind_localized: 'common.earth',
-      name: 'products.brasil_de_andrade.name',
-      image: 'logo_tierra.svg',
-      image_product_1: 'product-brasil-single.png',
-      image_product_2: 'product-brasil-single.png',
-      slogan: 'products.brasil_de_andrade.slogan',
-      description: 'products.brasil_de_andrade.description',
-      farm: 'products.brasil_de_andrade.farm',
-      strain: 'products.brasil_de_andrade.strain',
-      country: 'products.brasil_de_andrade.country',
-      height: 'products.brasil_de_andrade.height',
-      revision: 'products.brasil_de_andrade.revision',
-      harvest: 'products.brasil_de_andrade.harvest',
-      profile: 'products.brasil_de_andrade.profile',
-      taste: 'products.brasil_de_andrade.taste',
-      texture: 'products.brasil_de_andrade.texture'
-    }, 
-    {
-      kind: 'water',
-      kind_localized: 'common.water',
-      name: 'products.colombia_el_paseito.name',
-      image: 'logo_agua.svg',
-      image_product_1: 'product-brasil-single.png',
-      image_product_2: 'product-brasil-single.png',
-      slogan: 'products.colombia_el_paseito.slogan',
-      description: 'products.colombia_el_paseito.description',
-      farm: 'products.colombia_el_paseito.farm',
-      strain: 'products.colombia_el_paseito.strain',
-      country: 'products.colombia_el_paseito.country',
-      height: 'products.colombia_el_paseito.height',
-      revision: 'products.colombia_el_paseito.revision',
-      harvest: 'products.colombia_el_paseito.harvest',
-      profile: 'products.colombia_el_paseito.profile',
-      taste: 'products.colombia_el_paseito.taste',
-      texture: 'products.colombia_el_paseito.texture'
-    },
-    {
-      kind: 'air',
-      kind_localized: 'common.air',
-      name: 'products.peru_grad_1.name',
-      image: 'logo_aire2.svg',
-      image_product_1: 'product-brasil-single.png',
-      image_product_2: 'product-brasil-single.png',
-      slogan: 'products.peru_grad_1.slogan',
-      description: 'products.peru_grad_1.description',
-      farm: 'products.peru_grad_1.farm',
-      strain: 'products.peru_grad_1.strain',
-      country: 'products.peru_grad_1.country',
-      height: 'products.peru_grad_1.height',
-      revision: 'products.peru_grad_1.revision',
-      harvest: 'products.peru_grad_1.harvest',
-      profile: 'products.peru_grad_1.profile',
-      taste: 'products.peru_grad_1.taste',
-      texture: 'products.peru_grad_1.texture'
-    },
-    {
-      kind: 'fire',
-      kind_localized: 'common.fire',
-      name: 'products.uganda_gnoma.name',
-      image: 'logo_fuego.svg',
-      image_product_1: 'product-brasil-single.png',
-      image_product_2: 'product-brasil-single.png',
-      slogan: 'products.uganda_gnoma.slogan',
-      description: 'products.uganda_gnoma.description',
-      farm: 'products.uganda_gnoma.farm',
-      strain: 'products.uganda_gnoma.strain',
-      country: 'products.uganda_gnoma.country',
-      height: 'products.uganda_gnoma.height',
-      revision: 'products.uganda_gnoma.revision',
-      harvest: 'products.uganda_gnoma.harvest',
-      profile: 'products.uganda_gnoma.profile',
-      taste: 'products.uganda_gnoma.taste',
-      texture: 'products.uganda_gnoma.texture'
-    },
-  ];
-
   export default {
     data() {
       return {
@@ -93,18 +13,25 @@
     },
     components: {
       MenuVue,
-    Carousel,
-    Slide,
-    Pagination,
-    Navigation,
       ProductFlipCard,
-    ProductBox,
+      Certifications,
-    Certifications
+      ProductCarouselVue
+    },
+    computed: {
+      productsCarousel() {
+        return this.products.map(p => ({
+          image: p.image_product_double,
+          name:  p.name,
+          farm: p.farm,
+          strain: p.strain,
+        }));
+      }
     },
     methods: {
-      getImage(image) {
+      download() {
-        return new URL(`/src/assets/images/${image}`, import.meta.url).href;
+        const fileURL =  new URL(`/src/assets/resources/Porfolio_V elemento_${this.$i18n.locale.toUpperCase()}.pdf`, import.meta.url).href;
-      },
+        window.open(fileURL);
+      }
     }
   }
 </script>
@@ -118,76 +45,36 @@
     <div class="cards">
       <ProductFlipCard class="card" v-for="(product, index) in products" :key="index" :product="product"></ProductFlipCard>
     </div>
-    <Carousel class="carousel" :items-to-show="2" :wrap-around="false">
+    <ProductCarouselVue :products="productsCarousel" />
-      <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>
     <Certifications />
+
+    <h6 class="text-centered">Descarga aquí nuestro porfolio</h6>
+    <div class="buttons text-centered">
+      <button class="mt-5" @click.prevent.stop="download">Descargar</button>
+    </div>
   </section>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .product-section.content {
+  h6 {
+      font-weight: 500;
+      font-size: 52px;
+      text-align: left;
+      line-height: 60px;
+  }
+  button {
+    width: 154px;
+    height: 40px;
+    border-radius: 12px;
+  }
   .cards {
     display: grid;
     grid-template-columns: 50% 50%;
   }
 
-  h2 {
-    padding: 0 !important;
-  }
-
   .card {
     margin: 8px;
   }
-  .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>