index.html

@@ -8,9 +8,6 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Righteous&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <title>Tayrona Foods</title>
 </head>
 

src/App.vue

@@ -1,77 +1,30 @@
-<script>
+<script setup>
   import Footer from './components/Footer.vue';
-  import Menu from './components/Menu.vue';
-
-  const pagesWithCarousel = [
-    'home', 'social', 'about', 'products'
-  ];
-
-  export default {
-    data() {
-      return {
-        stickyClass: ''
-      }
-    },
-    components: { Footer, Menu },
-    created() {
-      window.addEventListener('scroll', this.handleScroll);
-    },
-    destroyed() {
-      window.removeEventListener('scroll', this.handleScroll);
-    },
-    beforeRouteEnter() {
-      this.stickyClass = '';
-    },
-    methods: {
-      handleScroll() {
-        console.log('this.$route.name :>> ', this.$route.name);
-        if (!pagesWithCarousel.includes(this.$route.name)) {
-          this.stickyClass = 'has-sticky has-sticky-1'
-          return;
-        }
-
-        if (window.scrollY > 0 && window.scrollY <= 574) {
-          this.stickyClass = 'has-sticky has-sticky-0';
-        } else if(window.scrollY > 574) {
-          this.stickyClass = 'has-sticky has-sticky-1';
-        } else {
-          this.stickyClass = '';
-        }
-      },
-    },
-}
 </script>
 
 <template>
-  <div class="main-container" :class="stickyClass">
+  <div class="main-container">
-    <Menu />    
+    <RouterView />
-    <div class="content-wrapper">
-      <RouterView />
-    </div>
     <Footer></Footer>
   </div>
 </template>
 
 <style lang="scss">
-  .content-wrapper {
-    padding-top: 130px;
-    background-color: #000;
-  }
   .content {
     background-color: #000;
     color: #fff;
     padding: 0 72px 72px;
 
       h2 {
-      font-size: 36px;
+      font-size: 52px;
       font-weight: 500;
-      line-height: 50px;
+      line-height: 70px;
       text-align: center;
-      padding: 52px 0;
+      padding: 72px 0;
     }
 
     h4 {
-      font-size: 24px;
+      font-size: 32px;
       font-weight: 500;
       line-height: 70px;
       text-align: center;

src/components/BigCarousel.vue

@@ -1,40 +0,0 @@
-<template>
-  <section class="big-carousel">
-    <Carousel :autoplay="5000" class="big-carousel" :wrapAround="true" >
-      <Slide v-for="(slide, index) in images" :key="index">
-        <img :src="$helper.getImage(slide)" alt="" />
-      </Slide>
-    </Carousel>
-  </section>
-</template>
-
-<script>
-import 'vue3-carousel/dist/carousel.css'
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
-export default {
-  props: {
-    images: Array,
-  },
-  components: {
-    Carousel,
-    Slide,
-    Pagination,
-    Navigation,
-  },
-  mounted() {
-    console.log(this.images);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .big-carousel {
-    margin-top:0;
-    padding: 0;
-    
-
-    .carousel__slide {
-      padding: 0;
-    }
-  }
-</style>

src/components/Menu.vue

@@ -2,68 +2,64 @@
 import LocaleSelector from './LocaleSelector.vue';
 
 export default {
-  components: { LocaleSelector },
+    props: {
+        type: String,
+        title: String,
+    },
+    components: { LocaleSelector }
 }
-
 </script>
 
 <template>
-  <section class="menu">
+  <section class="menu" :class="type">
-    <nav>
+    <div class="overlay">
-      <img class="logo" src="@images/tayrona-foods-yellow.png" />
+      <nav>
-      <div class="links">
+        <img class="logo" src="@images/logo-kreis_34.png" />
-        <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
+        <div class="links">
-        <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
+          <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
-        <router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
+          <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
-        <!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
+          <router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
-        <a href="https://tayronafoods.myshopify.com" target="_blank" class="link">{{ $t('Tienda') }}</a>
+          <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="/social">{{ $t('menu.social') }}</router-link>
-        <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
+          <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
-        <LocaleSelector class="link"></LocaleSelector>
+          <!-- <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
-      </div>
+          <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link> -->
-    </nav>
+          <LocaleSelector class="link"></LocaleSelector>
+        </div>
+      </nav>
+      <h1 class="title" v-if="title">{{ title }}</h1>
+    </div>
   </section>
 </template>
 
 <style lang="scss" scoped>
   .menu {
-    background-color: transparent;
+    height: 574px;
-    height: 130px;
+    background-repeat: no-repeat;
-    position: fixed;
+    background-size: contain;
-    top: 0px;
-    left: 0px;
-    z-index: 1000;
-    width: 100%;
 
-    
+    .overlay {
-    .nav-wrapper {
+      width: 100%;
-      position: relative;
-      width: 1366px;
       height: 100%;
-      // background: #000;
+      background: linear-gradient(89.82deg, rgba(30, 30, 30, 0.72) -6.88%, rgba(0, 0, 0, 0.18) 87.45%);
     }
 
+    .title {
+      color: #fff;
+      font-weight: 500;
+      font-size: 65px;
+      line-height: 70px;
+      text-align: right;
+      padding: 88px 93px 0;
+    }
     nav {
-      margin: 0 auto;
+     padding: 24px 93px 0;
-      padding: 16px 50px;
+     display: grid;
-      display: grid;
+     grid-template-columns: auto auto;
-      grid-template-columns: auto auto;
-      background: transparent;
-      width: 1366px;
-      height: 100%;
-      transition: background-color .3s ease-in-out;
-
-      .has-sticky-0 & {
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-      
-      .has-sticky-1 & {
-        background-color: #000;
-      }
 
       .logo {
-        height: 100px;
+        height: 90px;
-        width: 100px;;
+        width: 90px;;
       }
 
       .links {
@@ -90,6 +86,28 @@ export default {
       }
     }
 
+    &.home {
+      background-image: url('@images/mountains.png');
+    }
 
+    &.about {
+      background-image: url('@images/coffee1.jpg');
+    }
+
+    &.products {
+      background-image: url('@images/products.png');
+    }
+    
+    &.social {
+      background-image: url('@images/proysoc.01.png');
+    }
+
+    &.contact {
+      background-color: #000;
+      height: 180px;
+      .overlay {
+        background: transparent;
+      }
+    }
   }
 </style>

src/components/ProductBox.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="product-box">
     <div class="header">
-      <div class="kind-image">
+      <div>
-        <img :src="$helper.getImage(product.kind.image)" />
+
       </div>
       <div>
         <h2>{{ $t(product.name) }}</h2>
@@ -10,30 +10,28 @@
       </div>
     </div>
     <div class="product-box-image">
-      <img :src="$helper.getImage(product.images[0])" alt="" />
+      <img :src="$helper.getImage(product.image)" alt="">
     </div>
     <div class="footer">
-      <product-table :product="product"></product-table>
+      <!-- <h2>{{ $t(product.footer) }}</h2>
+      <h3>{{ $t(product.footer) }}</h3> -->
     </div>
   </div>
 </template>
 
 <script>
-import ProductTable from "./ProductTable.vue";
 export default {
   props: {
     product: Object,
-  },
+  }
-  components: {
+}
-    ProductTable,
-  },
-};
 </script>
 
 <style lang="scss" scoped>
 .product-box {
   width: 360px;
   height: 480px;
+  background: #DAD7DA;
   border-radius: 12px;
   background-position: top left;
   box-sizing: border-box;
@@ -41,10 +39,6 @@ export default {
   padding: 0 px 0;
 
   .header {
-    background-color: #1f1f1f;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    color: #c1c1a1;
     padding: 12px 16px;
     align-items: center;
     align-self: stretch;
@@ -52,13 +46,6 @@ export default {
     display: grid;
     grid-template-columns: 40px auto;
 
-    .kind-image {
-      align-self: start;
-      img {
-        width: 40px;
-      }
-    }
-
     h2 {
       padding: 0px;
       font-weight: 500;
@@ -71,17 +58,16 @@ export default {
       font-size: 14px;
       font-weight: 400;
       text-align: left;
+
     }
+
   }
 
   &-image {
-    width: 360px;
+    width: fixed;
-    height: 285px;
+    height: fixed;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
   }
+
+
 }
 </style>

src/components/ProductCarousel.vue

@@ -1,6 +1,6 @@
 <template>
   <Carousel class="carousel" :items-to-show="3" :wrap-around="false">
-    <Slide v-for="product in products" :key="product.name">
+    <Slide v-for="product in products" :key="product.kind">
       <div class="carousel-item">
         <ProductBox :product="product"></ProductBox>
       </div>
@@ -8,6 +8,7 @@
 
     <template #addons>
       <Navigation />
+      <Pagination />
     </template>
   </Carousel>
 </template>

src/components/ProductFlipCard.vue

@@ -12,6 +12,9 @@ export default {
     toggle() {
       this.flipped = !this.flipped;
     },
+    translate(val) {
+      console.log('Vue.$t :>> ', Vue.$t);
+    }
   }
 }
 </script>
@@ -20,9 +23,9 @@ export default {
   <div class="flip-card" :class="{flipped}" @click="toggle">
     <div v-if="product" class="flip-card-inner" :class="(product && product.kind) || 'no-product'">
       <div class="flip-card-front">
-        <img class="logo" :src="$helper.getImage(product.kind.getImageimage)" />
+        <img class="logo" :src="$helper.getImage(product.image)" />
         <div>
-          <h3 class="title">{{ $t(product.kind.localized)}}</h3> 
+          <h3 class="title">{{ $t(product.kind_localized)}}</h3> 
           <h3 class="slogan">{{ $t(product.slogan) }}</h3>
         </div>
         <div class="description">{{  $t(product.description) }}</div>    
@@ -36,8 +39,8 @@ export default {
           </div>
           <div class="info-data">
             <div class="info-data-left">
-              <img class="logo" :src="$helper.getImage(product.kind.image)" />
+              <img class="logo" :src="$helper.getImage(product.image)" />
-              <p class="kind">{{ $t(product.kind.localized) }}</p>
+              <p class="kind">{{ $t(product.kind_localized) }}</p>
               <p class="slogan">{{ $t(product.slogan) }}</p>
             </div>
             <div class="info-data-right">

src/components/ProductTable.vue

@@ -1,256 +0,0 @@
-<template>
-  <div class="info" :class="product.kind.name">
-    <div class="info-data">
-      <div class="info-data-left" >
-        <img class="logo" :src="$helper.getImage(product.kind.image)" />
-        <p class="kind">{{ $t(product.kind.localized) }}</p>
-        <p class="slogan">{{ $t(product.slogan) }}</p>
-      </div>
-      <div class="info-data-right">
-        <div class="info-data-row">
-          <div class="info-data-box land">
-            <div class="info-data-box-label">{{ $t("labels.country") }}</div>
-            <div class="info-data-box-value">
-              {{ $t(product.country) }}
-            </div>
-          </div>
-          <div class="info-data-box height">
-            <div class="info-data-box-label">{{ $t("labels.height") }}</div>
-            <div class="info-data-box-value">
-              <div class="text-overflow">
-                {{ $t(product.height) }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="info-data-row">
-          <div class="info-data-box revision">
-            <div class="info-data-box-label">{{ $t("labels.revision") }}</div>
-            <div class="info-data-box-value">
-              <div class="text-overflow">
-                {{ $t(product.revision) }}
-              </div>
-            </div>
-          </div>
-          <div class="info-data-box harvest">
-            <div class="info-data-box-label">{{ $t("labels.harvest") }}</div>
-            <div class="info-data-box-value">
-              <div class="text-overflow">
-                {{ $t(product.harvest) }}
-              </div>
-            </div>
-          </div>
-          <div class="info-data-box profile">
-            <div class="info-data-box-label">{{ $t("labels.profile") }}</div>
-            <div class="info-data-box-value">
-              <div class="text-overflow">
-                {{ $t(product.profile) }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="info-data-row">
-          <div class="info-data-box taste">
-            <div class="info-data-box-label">{{ $t("labels.taste") }}</div>
-            <div class="info-data-box-value">
-              <div class="text-overflow">
-                {{ $t(product.taste) }}
-              </div>
-            </div>
-          </div>
-          <div class="info-data-box mouthfeel">
-            <div class="info-data-box-label">{{ $t("labels.texture") }}</div>
-            <div class="info-data-box-value">
-              <div class="text-overflow">
-                {{ $t(product.texture) }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    product: Object
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.info {
-  font-size: 12px;
-  border-bottom-left-radius: 15px;
-  border-bottom-right-radius: 15px;
-  .logo {
-    width: 50px
-  }
-  &.earth {
-      background-color: #A6AF94;
-  }
-  &.water {
-    background-color: #889CA7;
-  }
-  &.air {
-    background-color: #F4EEB0;
-  }
-  &.fire {
-    background-color: #D58C83;
-  }
-  &.no-product {
-    background-color: #fff;
-  }
-
-  height: 100%;
-  width: 100%;
-
-  &-data {
-    display: grid;
-    grid-template-columns: 20% 80%;
-    border-style: solid;
-    border-width: 2px;
-    border-bottom-left-radius: 15px;
-    border-bottom-right-radius: 15px;
-
-    &-left {
-      padding-top: 16px;
-      border-bottom-left-radius: 15px;
-    }
-
-    &-right {
-      border-bottom-right-radius: 15px;
-      display: grid;
-      grid-template-rows: repeat(3, 1fr);
-      height: 100%;
-      width: 100%;
-
-      .earth & {
-        background-color: #babfa9;
-      }
-      .water & {
-        background-color: #92a7b1;
-      }
-      .air & {
-        background-color: #f4f4cc;
-      }
-      .fire & {
-        background-color: #d59c95;
-      }
-    }
-
-    &-row {
-      border-top-style: solid;
-      border-top-width: 2px;
-      border-bottom-style: solid;
-      border-bottom-width: 2px;
-      display: inline-flex;
-      // flex-wrap: nowrap;
-      // justify-content: space-around;
-      min-width: 100%;
-      height: 100%;
-
-      &:first-child {
-        border-top: none;
-      }
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      .earth & {
-        border-color: #a6af94;
-      }
-
-      .water & {
-        border-color: #889ca7;
-      }
-      .air & {
-        border-color: #f4eeb0;
-      }
-      .fire & {
-        border-color: #d58c83;
-      }
-    }
-
-    &-box {
-      padding: 4px 0 0 8px;
-      border-right-style: solid;
-      border-right-width: 3px;
-      min-width: 100px;
-      flex-basis: 0px;
-      flex-grow: 1;
-
-      .text-overflow {
-        // width: 98%;
-        // text-overflow: ellipsis;
-        // overflow: hidden;
-        // white-space: nowrap;
-      }
-
-      &:last-child {
-        border-right: none;
-      }
-
-      .earth & {
-        border-color: #a6af94;
-      }
-
-      .water & {
-        border-color: #889ca7;
-      }
-      .air & {
-        border-color: #f4eeb0;
-      }
-      .fire & {
-        border-color: #d58c83;
-      }
-
-      &-label {
-        font-family: "Righteous", cursive;
-        text-transform: uppercase;
-        font-size: 9px;
-      }
-      &-value {
-        font-family: "Cormorant Garamond", serif;
-        line-height: 12px;
-        font-size: 12px;
-      }
-    }
-
-    p {
-      &.kind {
-        font-family: "Righteous", cursive;
-        text-align: center;
-        line-height: 20px;
-        margin-left: 4px;
-        text-transform: uppercase;
-        letter-spacing: 1.3px;
-        font-size: 10px;
-      }
-      &.slogan {
-        font-family: "Cormorant Garamond", serif;
-        text-align: center;
-        line-height: 12px;
-        margin-left: 4px;
-        font-size: 10px;
-      }
-    }
-
-    .earth & {
-      border-color: #babfa9;
-    }
-    .water & {
-      border-color: #92a7b1;
-    }
-    .air & {
-      border-color: #f4f4cc;
-    }
-    .fire & {
-      border-color: #d59c95;
-    }
-  }
-}
-</style>

src/data.js

@@ -1,31 +1,11 @@
-export const kinds = {
-  earth: {
-    name: 'earth',
-    localized: 'common.earth',
-    image: 'logo_tierra.svg'
-  },
-  water: {
-    name: 'water',
-    localized: 'common.water',
-    image: 'logo_agua.svg'
-  },
-  air: {
-    name: 'air',
-    localized: 'common.air',
-    image: 'logo_aire2.svg'
-  },
-  fire: {
-    name: 'fire',
-    localized: 'common.fire',
-    image: 'logo_fuego.svg'
-  },
-};
-
 export const products = [
   {
-    kind: kinds.earth,
+    kind: 'earth',
+    kind_localized: 'common.earth',
     name: 'products.brasil_de_andrade.name',
-    images: ['product-brasil-single11.png', 'product-brasil-double1.png',],
+    image: 'logo_tierra.svg',
+    image_product_single: 'product-brasil-single11.png',
+    image_product_double: 'product-brasil-double1.png',
     slogan: 'products.brasil_de_andrade.slogan',
     description: 'products.brasil_de_andrade.description',
     farm: 'products.brasil_de_andrade.farm',
@@ -39,9 +19,12 @@ export const products = [
     texture: 'products.brasil_de_andrade.texture'
   }, 
   {
-    kind: kinds.water,
+    kind: 'water',
+    kind_localized: 'common.water',
     name: 'products.colombia_el_paseito.name',
-    images: ['product-colombia-single11.png', 'product-colombia-double1.png',],
+    image: 'logo_agua.svg',
+    image_product_single: 'product-colombia-single11.png',
+    image_product_double: 'product-colombia-double1.png',
     slogan: 'products.colombia_el_paseito.slogan',
     description: 'products.colombia_el_paseito.description',
     farm: 'products.colombia_el_paseito.farm',
@@ -55,9 +38,12 @@ export const products = [
     texture: 'products.colombia_el_paseito.texture'
   },
   {
-    kind: kinds.air,
+    kind: 'air',
+    kind_localized: 'common.air',
     name: 'products.peru_grad_1.name',
-    images: ['product-peru-single11.png', 'product-peru-double1.png',],
+    image: 'logo_aire2.svg',
+    image_product_single: 'product-peru-single11.png',
+    image_product_double: 'product-peru-double1.png',
     slogan: 'products.peru_grad_1.slogan',
     description: 'products.peru_grad_1.description',
     farm: 'products.peru_grad_1.farm',
@@ -71,9 +57,12 @@ export const products = [
     texture: 'products.peru_grad_1.texture'
   },
   {
-    kind: kinds.fire,
+    kind: 'fire',
+    kind_localized: 'common.fire',
     name: 'products.uganda_gnoma.name',
-    images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
+    image: 'logo_fuego.svg',
+    image_product_single: 'product-uganda-single11.png',
+    image_product_double: 'product-uganda-double1.png',
     slogan: 'products.uganda_gnoma.slogan',
     description: 'products.uganda_gnoma.description',
     farm: 'products.uganda_gnoma.farm',
@@ -87,34 +76,3 @@ export const products = [
     texture: 'products.uganda_gnoma.texture',
   },
 ];
-
-export const slides = {
-  home: [
-    'mountains.jpg',
-    'coffee1.jpg',
-    'products.jpg',
-    'proysoc.01.jpg',
-    'kids.jpg',
-  ],
-  about: [
-    'coffee1.jpg',
-    'mountains.jpg',
-    'products.jpg',
-    'proysoc.01.jpg',
-    'kids.jpg',
-  ],
-  social: [
-    'proysoc.01.jpg',
-    'kids.jpg',
-    'mountains.jpg',
-    'coffee1.jpg',
-    'products.jpg',
-  ],
-  products: [
-    'products.jpg',
-    'coffee1.jpg',
-    'mountains.jpg',
-    'proysoc.01.jpg',
-    'kids.jpg',
-  ],
-};

src/i18n/de.js

@@ -10,7 +10,6 @@ export default {
     home: 'Home',
     about: 'Über uns',
     products: 'Produkt',
-    shopping: 'Shopping',
     social: 'Soziales Projekt',
     contact: 'Kontakt'
   },
@@ -62,7 +61,7 @@ export default {
     title2:'Unsere Partner'
   },
   products_page: {
-    title: 'Disfruta del sabor auténtico de un café recién tostado',
+    title: 'Origen',
     subtitle1: 'Die Indianer haben seit jeher eine enge Beziehung zu ihrer na-türlichen Umgebung. Im Einklang mit den vier Elementen - Feuer,Wasser, Luft und Erde - gestalten sie ihr Leben. Dies beschreibt wunderbar unsere Kaffeereihe.',
 
   },
@@ -76,32 +75,32 @@ export default {
       strain: '100% Arábica',
       country: 'Brasil/ Cerrado, Carmo do paranaiba',
       height: '1.100 m',
-      revision: 'sonnengetrocknet',
+      revision: 'Secado al sol',
-      harvest: 'handgepflückt',
+      harvest: 'Seleccionado cuidadósamente',
       profile: '1/4',
-      taste: 'Schokolade,leichte Fruchtsäure.',
+      taste: 'Chocolate, ligero ácido de frutas.',
-      texture: 'mild würzig'
+      texture: 'Ligeramente picante'
     },
     colombia_el_paseito: {
-      title:'Water',
+      title:'Agua',
-      slogan: 'Born to feel',
+      slogan: 'Nacido para sentir',
       description: `El agua, juega un papel decisivo en la preparación del café.
       Por lo tanto, solo utilizamos agua de primera clase que se adapta perfectamente a los requisitos individuales de cada café.
       La cantidad y calidad correcta del agua despliega los aromas y sabores en cada taza.`,
       name: 'Colombia El Pastelito',
       farm: 'La Mejorana',
       strain: '100% Arábica',
-      country: 'Kolumbien /Quimbaya, Quindío',
+      country: 'Colombia /Quimbaya, Quindío',
       height: '1.470 m',
-      revision: 'Sonnengetrocknet',
+      revision: 'Secado al sol',
-      harvest: 'handgepflückt',
+      harvest: 'Seleccionado cuidadósamente',
       profile: '3/4',
-      taste: 'leichte Karamellnote.',
+      taste: 'Leche acaramelada.',
-      texture: 'voll'
+      texture: 'Lleno'
     },
     peru_grad_1: {
-      title:'Air',
+      title:'Aire',
-      slogan: 'Born to inspire',
+      slogan: 'Nacido para inspirar',
       description: `El aire, es otra parte esencial de nuestra pasión por el café, damos gran importancia a los granos de café recién tostados que conservan su aroma y sabor inconfundibles.
       Es por eso que tostamos en pequeños lotes para asegurarnos de que cada taza que disfrutes esté llena de frescura y aroma.`,
       name: 'Perú Grad 1',
@@ -109,15 +108,15 @@ export default {
       strain: '100% Arábica',
       country: 'Perú / Puno, Sandia',
       height: '1.800 m',
-      revision: 'Sonnengetrocknet',
+      revision: 'Secado al sol',
-      harvest: 'handgepflückt',
+      harvest: 'Seleccionado cuidadósamente',
       profile: '3/4',
-      taste: 'blumig-fruchtig,Schokolade',
+      taste: '-',
-      texture: 'würzig'
+      texture: '-'
     },
     uganda_gnoma: {
-      title:'Fire',
+      title:'Fuego',
-      slogan: 'Born to succeed',
+      slogan: 'Nacido para triunfar',
       description: `El fuego, la pasión que resuena en cada paso de nuestro trabajo. 
       Desde la selección de variedades de café verde hasta el cuidadoso tostado y la preparación amorosa, estamos allí con alma y corazón para ofrecerte una experiencia de café extraordinaria.`,
       name: 'Uganda Ngoma',
@@ -125,21 +124,21 @@ export default {
       strain: '100% Robusta',
       country: 'Uganda / Wakiso District',
       height: '1.250 m',
-      revision: 'Sonnengetrocknet',
+      revision: 'Secado al sol',
-      harvest: 'handgepflückt',
+      harvest: 'Seleccionado cuidadósamente',
       profile: '4/4',
-      taste: 'Zartbitterschokolade',
+      taste: '-.',
-      texture: 'sanft'
+      texture: '-'
     },
   },
   labels: {
-    country: 'Land / Region',
+    country: 'País / Región',
-    height: 'Anbauhöhe',
+    height: 'Altura',
-    revision: 'Verarbeitung',
+    revision: 'Revisión',
-    harvest: 'Ernte',
+    harvest: 'Cosecha',
-    profile: 'Profil',
+    profile: 'Perfil',
-    taste: 'Geschmack',
+    taste: 'Gusto',
-    texture: 'Mundgefühl'
+    texture: 'Textura'
   },
 
   social: {
@@ -150,13 +149,13 @@ export default {
     paragraph4:'Sumérgete en el mundo de Tayrona Foods, donde el café no solo es una pasión, sino también una fuente de cambio y apoyo para quienes más lo necesitan.'
   },
   common: {
-    earth: 'Eart',
+    earth: 'Tierra',
-    water: 'Water',
+    water: 'Agua',
-    air: 'Air',
+    air: 'Aire',
-    fire: 'Fire',
+    fire: 'Fuego',
     company_name: 'Tayrona Foods',
     rol_managing_partner: 'Managing Partner',
-    download: 'Download'
+    download: 'Descargar'
   },
 
   contact:{

src/i18n/en.js

@@ -10,7 +10,6 @@ export default {
     home: 'Home',
     about: 'About',
     products: 'Products',
-    shopping: 'Shopping',
     social: 'Social',
     contact: 'Contact'
   },
@@ -63,9 +62,8 @@ export default {
     title2:'Partners Certifications'
   },
   products_page: {
-    title: 'Disfruta del sabor auténtico de un café recién tostado',
+    title: 'Origin',
     subtitle1: 'Indigenous cultures have always had a close relationship with their natural environment, finding harmony with the four elements: fire, water, air, and earth, the meaning of their lives, and it is this close relationship that beautifully describes our series of coffees.',
-    download: 'Download here our portfolio',
 
   },
   products: {
@@ -164,9 +162,9 @@ export default {
     title: 'Contact',
     paragraph1:'If you are interested or have any questions, please contact us!',
     paragraph2: 'Email',
-    paragraph3: 'info{\'@\'}tayronafoods.com',
+    paragraph3: 'info@tayronafoods.com',
-    paragraph4: 'alejandro{\'@\'}tayronafoods.com',
+    paragraph4: 'alejandro@tayronafoods.com',
-    paragraph5: 'jose{\'@\'}tayronafoods.com',
+    paragraph5: 'jose@tayronafoods.com',
     paragraph6: 'Phones',
     paragraph7: '+49(0)176 321 368 59',
     paragraph8: '+49(0)152 549 389 62',

src/i18n/es.js

@@ -62,9 +62,9 @@ export default {
     title2:'Nuestros Aliados'
   },
   products_page: {
-    title: 'Disfruta del sabor auténtico de un café recién tostado',
+    title: 'Origen',
     subtitle1: 'Las culturas indígenas siempre han tenido una estrecha relación con su entorno natural, encontrando en la armonía con los cuatro elementos: fuego, agua, aire y tierra, el sentido de sus vidas, y es esta misma relación la que describe maravillosamente nuestra serie de cafés.',
-    download: 'Descarga aquí nuestro portafolio',
+
   },
   products: {
     brasil_de_andrade: {
@@ -163,9 +163,9 @@ export default {
     title: 'Contacto',
     paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
     paragraph2: 'Correo  Electrónico',
-    paragraph3: 'info{\'@\'}tayronafoods.com',
+    paragraph3: 'info@tayronafoods.com',
-    paragraph4: 'alejandro{\'@\'}tayronafoods.com',
+    paragraph4: 'alejandro@tayronafoods.com',
-    paragraph5: 'jose{\'@\'}tayronafoods.com',
+    paragraph5: 'jose@tayronafoods.com',
     paragraph6: 'Teléfonos',
     paragraph7: '+49(0)176 321 368 59',
     paragraph8: '+49(0)152 549 389 62',

src/router/router.js

@@ -8,7 +8,6 @@ import ContactView from '../views/contact/Contact.vue';
 import ImpressumView from '../views/impressum/Impressum.vue';
 import DataProtectionView from '../views/dataprotection/DataProtection.vue';
 import AgbView from '../views/agb/Agb.vue';
-import StoreView from '../views/store/StoreView.vue';
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -53,11 +52,6 @@ const router = createRouter({
       name: 'agb',
       component: AgbView,
     },
-    { 
-      path: '/store',
-      name: 'store',
-      component: StoreView,
-    },
   ]
 });
 

src/views/about/About.vue

@@ -1,12 +1,10 @@
 <script setup>
-  import BigCarousel from '../../components/BigCarousel.vue';
+  import MenuVue from "../../components/Menu.vue";
   import Employee from "../../components/Employee.vue";
-
-  import { slides } from '../../data';
 </script>
 
 <template>
-  <big-carousel :images="slides.about"></big-carousel>
+  <MenuVue type="about" :title="$t('about.title')"></MenuVue>
   <section class="about-section content">
     <h2>{{ $t('about.subtitle1') }}</h2>
     <p>{{ $t('about.paragraph1') }}</p>

src/views/agb/Agb.vue

@@ -1,4 +1,5 @@
 <template>
+  <MenuVue type="contact" />
   <div class="contact-section">
     <div class="left">
       <h1>Allgemeine Geschäftsbedingungen (AGB)</h1>
@@ -56,8 +57,10 @@
 </template>
 
 <script>
+import MenuVue from "../../components/Menu.vue";
 
 export default {
+  components: { MenuVue },
 };
 </script>
 

src/views/contact/Contact.vue

@@ -1,5 +1,6 @@
 <template>
   
+  <MenuVue type="contact" />
   <div class="contact-section">
     <div class="left">
       <h1>{{ $t('contact.title') }}</h1>
@@ -19,7 +20,10 @@
 </template>
 
 <script>
+import MenuVue from '../../components/Menu.vue';
+
 export default {
+    components: { MenuVue }
 }
 </script>
 

src/views/home/Home.vue

@@ -1,42 +1,47 @@
 <script>
-import BigCarousel from '../../components/BigCarousel.vue';
-import Certifications from "../../components/Certifications.vue";
-import CoffeeFarmer from "../../components/CoffeeFarmer.vue";
-import Different from "../../components/Different.vue";
-import Menu from "../../components/Menu.vue";
-import ProductCarousel from "../../components/ProductCarousel.vue";
-import { products, slides } from "../../data.js";
 
-export default {
+import Certifications from '../../components/Certifications.vue';
-  data() {
+import CoffeeFarmer from '../../components/CoffeeFarmer.vue';
-    return {
+import Different from '../../components/Different.vue';
-      slides: slides.home,
+import Menu from '../../components/Menu.vue';
-      products,
+import ProductCarousel from '../../components/ProductCarousel.vue';
-    };
+import { products } from '../../data.js';
-  },
+
-  components: {
+  export default {
-    Certifications,
+    data() {
-    Menu,
+      return {
-    ProductCarousel,
+        products,
-    CoffeeFarmer,
+      };
-    Certifications,
+    },
-    Different,
+    components: {
-    BigCarousel,
+      Certifications,
-  },
+      Menu,
-};
+      ProductCarousel,
+      CoffeeFarmer,
+      Certifications,
+      Different
+},
+    computed: {
+      productsCarousel() {
+        return this.products.map(p => ({
+          image: p.image_product_single,
+          name:  p.name,
+          farm: p.farm,
+          strain: p.strain,
+        }));
+      }
+    },
+
+  }
 </script>
 
 <template>
-    <big-carousel :images="slides"></big-carousel>
+  <Menu type="home" />
-    <section class="home-section content">
+  <section class="home-section content">
-      <h2>{{ $t("origins.header") }}</h2>
+    <h2>{{ $t('origins.header') }}</h2>
-      <ProductCarousel :products="products" />
+    <ProductCarousel :products="productsCarousel" />
-      <Different />
+    <Different />
-      <CoffeeFarmer class="mt-5" />
+    <CoffeeFarmer class="mt-5" />
-      <Certifications />
+    <Certifications />
-    </section>
+  </section>
-    
 </template> 
-
-<style lang="scss" scoped>
-</style>

src/views/impressum/Impressum.vue

@@ -1,5 +1,6 @@
 <template>
   
+  <MenuVue type="contact" />
   <div class="contact-section">
     <div class="left">
       <h1>Impressum</h1>
@@ -18,7 +19,10 @@
 </template>
 
 <script>
+import MenuVue from '../../components/Menu.vue';
+
 export default {
+    components: { MenuVue }
 }
 </script>
 

src/views/products/Products.vue

@@ -1,22 +1,31 @@
 <script>
+  import MenuVue from "../../components/Menu.vue";
   import 'vue3-carousel/dist/carousel.css'
   import ProductFlipCard from "../../components/ProductFlipCard.vue";
   import Certifications from "../../components/Certifications.vue";
   import ProductCarouselVue from "../../components/ProductCarousel.vue";
-  import BigCarousel from '../../components/BigCarousel.vue';
+  import { products } from '../../data.js';
-  import { products, slides } from '../../data.js';
   export default {
     data() {
       return {
         products,
-        slides: slides.products
       };
     },
     components: {
+      MenuVue,
       ProductFlipCard,
       Certifications,
-      ProductCarouselVue,
+      ProductCarouselVue
-      BigCarousel
+    },
+    computed: {
+      productsCarousel() {
+        return this.products.map(p => ({
+          image: p.image_product_double,
+          name:  p.name,
+          farm: p.farm,
+          strain: p.strain,
+        }));
+      }
     },
     methods: {
       download() {
@@ -28,15 +37,18 @@
 </script>
 
 <template>
-  <big-carousel :images="slides"></big-carousel>
+  <MenuVue type="products"></MenuVue>
   <section class="product-section content">
     <h2>{{ $t('products_page.title') }}</h2>
-    <p hidden>{{ $t('products_page.subtitle1') }}</p>
+    <p>{{ $t('products_page.subtitle1') }}</p>
-    <p hidden class="centered"><img src="@images/v-elemento.png" /></p>
+    <p class="centered"><img src="@images/v-elemento.png" /></p>
-    <ProductCarouselVue :products="products" />
+    <div class="cards">
+      <ProductFlipCard class="card" v-for="(product, index) in products" :key="index" :product="product"></ProductFlipCard>
+    </div>
+    <ProductCarouselVue :products="productsCarousel" />
     <Certifications />
 
-    <h6 class="text-centered">{{ $t('products_page.download')}}</h6>
+    <h6 class="text-centered">Descarga aquí nuestro porfolio</h6>
     <div class="buttons text-centered">
       <button class="mt-5" @click.prevent.stop="download">{{ $t('common.download') }}</button>
     </div>

src/views/social/Social.vue

@@ -1,5 +1,5 @@
 <template>
-  <big-carousel :images="slides.social"></big-carousel>
+  <MenuVue type="social" />
   <section class="social-section content">
     <h2>{{ $t('social.title') }}</h2>
     <p>{{ $t('social.paragraph1') }}</p>
@@ -11,20 +11,23 @@
       <p>{{ $t('social.paragraph4') }}</p>
     </div>
     <div class="right">
-      <img src="@images/kid-coffee.jpg">
+      <img src="@images/kid-coffee.png">
     </div>
   </section>
 </template>
 
-<script setup>
+<script>
-import BigCarousel from '../../components/BigCarousel.vue';
+import MenuVue from '../../components/Menu.vue';
-import { slides } from '../../data';
+
+export default {
+    components: { MenuVue }
+}
 </script>
 
 <style lang="scss" scoped>
   .social-bottom {
     padding: 40px 98px;
-    background-image: url('@images/bg_1.jpg');
+    background-image: url('@images/bg_1.png');
     background-position: top left;
     background-size: contain;
     height: 600px;

src/views/store/StoreView.vue

@@ -1,16 +0,0 @@
-<template>
-  <MenuVue type="contact" />
-  <div><iframe src="http://tayronafoods.myshopify.com"></iframe></div>
-
-</template>
-
-<script>
-import MenuVue from '../../components/Menu.vue';
-export default {
-    components: { MenuVue }
-}
-</script>
-
-<style lang="scss" scoped>
- 
-</style>