Merge branch 'rama_carmen'

package.json

@@ -4,8 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
+    "build:beta": "vite build -- -beta",
     "preview": "vite preview"
   },
   "dependencies": {

src/App.vue

@@ -9,7 +9,9 @@
   export default {
     data() {
       return {
-        stickyClass: ''
+        stickyClass: '',
+        deviceClass: this.$isMobile() ? 'mobile' : 'desktop',
+        width: window.innerWidth
       }
     },
     components: { Footer, Menu },
@@ -24,15 +26,15 @@
     },
     methods: {
       handleScroll() {
-        console.log('this.$route.name :>> ', this.$route.name);
+        const limit = 430;
         if (!pagesWithCarousel.includes(this.$route.name)) {
           this.stickyClass = 'has-sticky has-sticky-1'
           return;
         }
 
-        if (window.scrollY > 0 && window.scrollY <= 574) {
+        if (window.scrollY > 0 && window.scrollY <= limit) {
           this.stickyClass = 'has-sticky has-sticky-0';
-        } else if(window.scrollY > 574) {
+        } else if(window.scrollY > limit) {
           this.stickyClass = 'has-sticky has-sticky-1';
         } else {
           this.stickyClass = '';
@@ -43,8 +45,9 @@
 </script>
 
 <template>
-  <div class="main-container" :class="stickyClass">
+  <div class="width">{{ width }}px {{ deviceClass }}</div>
-    <Menu />    
+  <Menu :class="`${stickyClass}`" />    
+  <div class="main-container" :class="`${stickyClass} ${deviceClass}`">
     <div class="content-wrapper">
       <RouterView />
     </div>
@@ -53,8 +56,21 @@
 </template>
 
 <style lang="scss">
+  .width {
+    position: fixed;
+    top: 0;
+    right: 0;
+    background-color: white;
+    color: #121212;
+    width: 150px;
+    height: 30px;
+    z-index: 200550;
+    border-bottom-right-radius: 10px;
+    padding: 4px;
+    opacity: 0.5;
+  }
   .content-wrapper {
-    padding-top: 130px;
+    padding-top: 91px;
     background-color: #000;
   }
   .content {
@@ -64,24 +80,25 @@
 
       h2 {
       font-size: 36px;
-      font-weight: 500;
+      font-weight: 300;
       line-height: 50px;
       text-align: center;
       padding: 52px 0;
     }
 
     h4 {
-      font-size: 24px;
+      font-size: 20px;
       font-weight: 500;
-      line-height: 70px;
+      font-style: italic;
+      line-height: 42px;
       text-align: center;
       padding: 72px 264px;
     }
 
     p {
-      font-weight: 500;
+      font-weight: 300;
-      font-size: 20px;
+      font-size: 16px;
-      line-height: 40px;
+      line-height: 24px;
       text-align: justify;
 
       &.centered {
@@ -89,4 +106,17 @@
       }
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .content-wrapper {
+      padding-top: 50px;
+    }
+    .content {
+      padding: 0 16px 72px;
+
+      h4 {
+        padding: 72px 0;
+      }
+    }
+  }
 </style>

src/components/Certifications.vue

@@ -2,11 +2,11 @@
   <section class="certifications">
     <div class="right">
       <h2>{{ $t('certifications.title1') }}</h2>
-      <p class="centered"><img src="@images/image_membresias.png" /></p>
+      <p class="centered"><img class="image" src="@images/image_membresias.png" /></p>
     </div>
     <div class="left">
       <h2>{{ $t('certifications.title2') }}</h2>
-      <p class="centered"><img src="@images/Nuestros_aliados.png" /></p>
+      <p class="centered"><img class="image" src="@images/Nuestros_aliados.png" /></p>
     </div>
   </section>
 </template>
@@ -19,22 +19,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header {
+h2 {
   background-color: #000;
   color: #fff;
   text-align: center;  
+  padding-bottom: 26px !important;
+}
 
+.image {
+  height: 270px;
+  widows: 270px;;
 }
 
 .certifications {
-  height: 600px;
   background-color: #000;
   background-position: top left;
   background-size: contain;
-  height: 600px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items:center;
 }
 
+@media only screen and (max-width: 767px) {
+
+  h2 {
+    font-size: 24px !important;
+  }
+  .image {
+    height: 170px;
+    widows: 170px;;
+  }
+  .certifications {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 </style>

src/components/CoffeeFarmer.vue

@@ -13,7 +13,7 @@ export default {
 
 <style lang="scss" scoped>
   .coffeefarmers {
-    height: 480px;
+    height: 400px;
     background: white;
     background-image: url('@images/grains.jpg');
     background-repeat: no-repeat;
@@ -23,9 +23,9 @@ export default {
 
   h3.header {
     font-weight: 600;
-    font-size: 36px;
+    font-size: 26px;
     line-height: 58px;
-    padding: 175px 230px 0;
+    padding: 120px 230px 0;
     text-align: center;
     text-shadow: 1px 1px 10px #000;
   }
@@ -35,4 +35,12 @@ export default {
     width: 700px;
     margin: 50px auto 0;
   }
+
+  @media only screen and (max-width: 767px) {
+    h3.header {
+      font-size: 26px;
+      line-height: 36px;
+      padding: 120px 16px 0;
+    }
+  }
 </style>

src/components/Different.vue

@@ -19,11 +19,11 @@ import DifferentBox from './DifferentBox.vue';
  .different {
     color: #fff;
     background-color: #000;
-    padding: 72px 0;
+    padding: 0 0 72px;
   }
 
   h2 {
-    padding: 0 150px;
+    padding-bottom: 26px !important;
     font-size: 52px;
     text-align: center;
   }
@@ -34,11 +34,21 @@ import DifferentBox from './DifferentBox.vue';
     font-size: 20px;
     line-height: 34px;
     text-align: center;
-    font-weight: 400;
+    font-weight: 200;
     margin-bottom: 50px;
   } 
   .boxes {
     display: flex;
     justify-content: space-between;
   }
+
+
+@media only screen and (max-width: 767px) {
+  h3 {
+    padding: 0;
+  }
+  .boxes {
+    flex-direction: column;
+  }
+}
 </style>

src/components/DifferentBox.vue

@@ -18,29 +18,36 @@ export default {
 <style lang="scss" scoped>
 .different-box {
   width: 280px;
-  height: 284px;
+  height: 276px;
   background: #E2CAAA;
   text-align: center;
   padding: 36px 24px 0;
 }
 .image {
-  width: 88px;
+  width: 70px;
-  height: 88px;
+  height: 70px;
 }
 .title {
-  margin-top: 24px;
+  margin-top: 16px;
   color: #603809;
   font-weight: 700;
-  font-size: 28px;
+  font-size: 20px;
+  height: 48px;
 }
 
 .description {
   margin-top: 12px;
   font-style: 400;
   font-weight: 400;
-  font-size: 20px;
+  font-size: 16px;
   line-height: 24px;
   color: #1E1E1E;
   text-align: center;
 }
+
+@media only screen and (max-width: 767px) {
+  .different-box {
+    margin: 0 auto 8px;
+  }
+}
 </style>

src/components/Employee.vue

@@ -23,7 +23,7 @@ export default {
 
   .name {
     margin: 36px 0 0;
-    font-weight: 700;
+    font-weight: 300;
     font-size: 24px;
     line-height: 28px;
     padding: 0;
@@ -31,9 +31,15 @@ export default {
 
   .role {
     margin: 28px 0 0;
-    font-weight: 500;
+    font-weight: 200;
     font-size: 16px;
     line-height: 23.44px;
     padding: 0;
   }
+
+  @media only screen and (max-width: 767px) {
+    .role {
+      margin-top: 8px;
+    }
+  }
 </style>

src/components/Footer.vue

@@ -11,14 +11,16 @@
           <a href="mailto:alejandro@tayronafoods.com" class="email"><i class="email-icon"></i>alejandro@tayronafoods.com</a>
           <a href="mailto:jose@tayronafoods.com" class="email"><i class="email-icon"></i>jose@tayronafoods.com</a>
         </p>
-        <p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
+        <div class="phones">
-        <p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
+          <p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
-        <p class="rss">
+          <p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
+        </div>
+        <!-- <p class="rss">
           <a href="#"><i class="facebook-icon"></i></a>
           <a href="#"><i class="instagram-icon"></i></a>
           <a href="#"><i class="youtube-icon"></i></a>
           <a href="#"><i class="twitter-icon"></i></a>
-        </p>
+        </p> -->
         <p class="links">
           <router-link class="link" to="/impressum">{{ $t('footer.impressum')}}</router-link>
           <router-link class="link" to="/dataprotection">{{ $t('footer.dataprotection') }}</router-link>
@@ -35,10 +37,11 @@
   footer {
     position: relative;
     color: #fff;
-    height: 492px;
     background-color: #442808;
     background-image: url('@images/footer_coffee.png');
     background-blend-mode: overlay;
+    background-position: bottom;
+    padding-bottom: 36px;
   }
 
   h5 {
@@ -93,6 +96,10 @@
     font-size: 20px;
     font-weight: 500;
 
+    .phones {
+      margin-top: 24px;
+    }
+
     .emails {
       padding: 0;
       .email {
@@ -136,4 +143,30 @@
       @include icon('@images/twitter.svg');
     }
   }
+
+  @media only screen and (max-width: 767px) {
+
+    h5 {
+      padding-top: 16px;
+    }
+    .contact-info {
+      .emails {
+        display: grid;
+        gap: 8px;
+        flex-direction: column;
+      }
+
+      p.links {
+      margin-top: 58px;
+
+      a {
+        margin-right: 20px;
+        font-size: 80%;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
 </style>

src/components/Menu.vue

@@ -3,13 +3,47 @@ import LocaleSelector from './LocaleSelector.vue';
 
 export default {
   components: { LocaleSelector },
+  data() {
+    return {
+      mobileMenuOpened: false
+    }
+  },
+  methods: {
+    openMobileClick() {
+      this.mobileMenuOpened = !this.mobileMenuOpened;
+    },
+    closeMenu() {
+      this.mobileMenuOpened = false;  
+    }
+  },
 }
 
 </script>
 
 <template>
   <section class="menu">
-    <nav>
+    <nav v-if="$isMobile()">
+      <div class="menu-bar">
+        <div class="hamburger" @click="openMobileClick">
+          <div class="hamburger-line"></div>
+          <div class="hamburger-line"></div>
+          <div class="hamburger-line"></div>
+        </div>
+      </div>
+      <div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
+        <div class="links">
+          <router-link class="link" @click.native="closeMenu" to="/">{{ $t('menu.home')}}</router-link>
+          <router-link class="link" @click.native="closeMenu" to="/about">{{ $t('menu.about') }}</router-link>
+          <router-link class="link" @click.native="closeMenu" to="/products">{{ $t('menu.products') }}</router-link>
+          <!-- <router-link class="link" to="/store">{{ $t('Tienda') }}</router-link> -->
+          <a href="https://tayronafoods.myshopify.com" @click.native="closeMenu" target="_blank" class="link">{{ $t('Tienda') }}</a>
+          <router-link class="link" @click.native="closeMenu" to="/social">{{ $t('menu.social') }}</router-link>
+          <router-link class="link" @click.native="closeMenu" to="/contact">{{ $t('menu.contact') }}</router-link>
+          <LocaleSelector class="link"></LocaleSelector>
+        </div>
+      </div>
+    </nav>
+    <nav v-else>
       <img class="logo" src="@images/tayrona-foods-yellow.png" />
       <div class="links">
         <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
@@ -26,44 +60,29 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  // @media only screen and (min-width: 768px) {
+    /* tablets and desktop */
   .menu {
     background-color: transparent;
-    height: 130px;
     position: fixed;
-    top: 0px;
+    top: 0;
-    left: 0px;
+    left: 0;
     z-index: 1000;
     width: 100%;
 
-    
-    .nav-wrapper {
-      position: relative;
-      width: 1366px;
-      height: 100%;
-      // background: #000;
-    }
-    
     nav {
       margin: 0 auto;
-      padding: 16px 50px;
+      padding: 8px 50px;
       display: grid;
       grid-template-columns: auto auto;
       background: transparent;
-      width: 1366px;
+      width: 960px;
       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: 75px;
-        width: 100px;;
+        width: 75px;;
       }
 
       .links {
@@ -71,7 +90,7 @@ export default {
         align-self: center;
 
         .link {
-          margin-right: 54px;
+          margin-right: 20px;
           color: #fff;
           text-decoration: none;
 
@@ -90,6 +109,72 @@ export default {
       }
     }    
 
+    &.has-sticky-0 nav{
+      background-color: rgba(0, 0, 0, 0.5);
+    }
       
+    &.has-sticky-1 nav{
+      background-color: #000;
+    }
+
+    .hamburger {
+      width: 70px;
+      height: 50px;
+      padding: 14px 18px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      &-line {
+        width: 100%;
+        background-color: #fff;
+        height: 2px;
+      }
+    }
+  }
+  // }
+  @media only screen and (max-width: 960px) {
+    .menu {
+      nav, .nav-wrapper {
+        width: 100%;
+        .links .link {
+          font-size: 82%;
+        }
+      }
+    }
+  }
+
+  @media only screen and (max-width: 767px) {
+    .menu {
+      &-bar {
+        width: 100%;
+      }
+      &-content {
+        color: white;
+
+        &.collapsed {
+          display: none;
+        }
+      }
+      nav {
+        display: block;
+        background-color: #000;
+        padding: 0;
+
+        .links {
+          padding: 0 8px 16px;
+          .link {
+            text-align: center;
+            display: block;
+            padding: 8px;
+            font-size: 18px;
+          }
+        }
+      }  
+
+      &.has-sticky-0 nav, &.has-sticky-1 nav{
+        background-color: #000;
+      }
+    }
   }
 </style>

src/components/OriginBox.vue

@@ -36,7 +36,7 @@ export default {
 
 .description {
   font-style: normal;
-  font-weight: 400;
+  font-weight: 300;
   font-size: 16px;
   line-height: 21px;
   color: #1E1E1E;

src/components/ProductBox.vue

@@ -32,8 +32,8 @@ export default {
 
 <style lang="scss" scoped>
 .product-box {
-  width: 360px;
+  width: 330px;
-  height: 480px;
+  height: 450px;
   border-radius: 12px;
   background-position: top left;
   box-sizing: border-box;
@@ -75,8 +75,8 @@ export default {
   }
 
   &-image {
-    width: 360px;
+    width: 330px;
-    height: 285px;
+    height: 250px;
 
     img {
       width: 100%;

src/components/ProductCarousel.vue

@@ -1,5 +1,5 @@
 <template>
-  <Carousel class="carousel" :items-to-show="3" :wrap-around="false">
+  <Carousel class="carousel" v-bind:breakpoints="breakpoints" :items-to-show="1" :wrap-around="false">
     <Slide v-for="product in products" :key="product.name">
       <div class="carousel-item">
         <ProductBox :product="product"></ProductBox>
@@ -21,6 +21,19 @@ export default {
   props: {
     products: Array
   },
+  data: () => ({
+    // breakpoints are mobile first
+    // any settings not specified will fallback to the carousel settings
+    breakpoints: {
+     
+      // 1024 and up
+      920: {
+        itemsToShow: 2,
+        snapAlign: 'start',
+        wrapAround: false,
+      },
+    },
+  }),
   components: {
     Carousel,
     Slide,
@@ -36,8 +49,8 @@ export default {
   .carousel {
     margin-top: 32px;
     &-item {
-      min-height: 570px;
+      height: 450px;
-      width: 360px;
+      width: 330px;
       font-size: 20px;
     }
 

src/components/ProductFlipCard.vue

@@ -115,7 +115,7 @@ export default {
 
 <style lang="scss" scoped>
 h3 {
-    font-weight: 500;
+    font-weight: 300;
     font-size: 36px;
     line-height: 50px;
     text-align: left;

src/components/ProductTable.vue

@@ -179,7 +179,6 @@ export default {
       padding: 4px 0 0 8px;
       border-right-style: solid;
       border-right-width: 3px;
-      min-width: 100px;
       flex-basis: 0px;
       flex-grow: 1;
 

src/data.js

@@ -92,29 +92,29 @@ export const slides = {
   home: [
     'mountains.jpg',
     'coffee1.jpg',
-    'products.jpg',
+    'Packaging_new.png',
     'proysoc.01.jpg',
-    'kids.jpg',
+    'kids-coffee.jpg',
   ],
   about: [
     'coffee1.jpg',
     'mountains.jpg',
-    'products.jpg',
+    'Packaging_new.png',
     'proysoc.01.jpg',
-    'kids.jpg',
+    'kids-coffee.jpg',
   ],
   social: [
     'proysoc.01.jpg',
-    'kids.jpg',
+    'kids-coffee.jpg',
     'mountains.jpg',
     'coffee1.jpg',
-    'products.jpg',
+    'Packaging_new.png',
   ],
   products: [
-    'products.jpg',
+    'Packaging_new.png',
     'coffee1.jpg',
     'mountains.jpg',
     'proysoc.01.jpg',
-    'kids.jpg',
+    'kids-coffee.jpg',
   ],
 };

src/i18n/de.js

@@ -10,6 +10,7 @@ export default {
     home: 'Home',
     about: 'Über uns',
     products: 'Produkt',
+    shopping: 'Shopping',
     social: 'Soziales Projekt',
     contact: 'Kontakt'
   },
@@ -61,7 +62,7 @@ export default {
     title2:'Unsere Partner'
   },
   products_page: {
-    title: 'Origen',
+    title: 'Single Origins',
     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.',
 
   },
@@ -75,32 +76,32 @@ export default {
       strain: '100% Arábica',
       country: 'Brasil/ Cerrado, Carmo do paranaiba',
       height: '1.100 m',
-      revision: 'Secado al sol',
+      revision: 'sonnengetrocknet',
-      harvest: 'Seleccionado cuidadósamente',
+      harvest: 'handgepflückt',
       profile: '1/4',
-      taste: 'Chocolate, ligero ácido de frutas.',
+      taste: 'Schokolade,leichte Fruchtsäure.',
-      texture: 'Ligeramente picante'
+      texture: 'mild würzig'
     },
     colombia_el_paseito: {
-      title:'Agua',
+      title:'Water',
-      slogan: 'Nacido para sentir',
+      slogan: 'Born to feel',
       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: 'Colombia /Quimbaya, Quindío',
+      country: 'Kolumbien /Quimbaya, Quindío',
       height: '1.470 m',
-      revision: 'Secado al sol',
+      revision: 'Sonnengetrocknet',
-      harvest: 'Seleccionado cuidadósamente',
+      harvest: 'handgepflückt',
       profile: '3/4',
-      taste: 'Leche acaramelada.',
+      taste: 'leichte Karamellnote.',
-      texture: 'Lleno'
+      texture: 'voll'
     },
     peru_grad_1: {
-      title:'Aire',
+      title:'Air',
-      slogan: 'Nacido para inspirar',
+      slogan: 'Born to inspire',
       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',
@@ -108,15 +109,15 @@ export default {
       strain: '100% Arábica',
       country: 'Perú / Puno, Sandia',
       height: '1.800 m',
-      revision: 'Secado al sol',
+      revision: 'Sonnengetrocknet',
-      harvest: 'Seleccionado cuidadósamente',
+      harvest: 'handgepflückt',
       profile: '3/4',
-      taste: '-',
+      taste: 'blumig-fruchtig,Schokolade',
-      texture: '-'
+      texture: 'würzig'
     },
     uganda_gnoma: {
-      title:'Fuego',
+      title:'Fire',
-      slogan: 'Nacido para triunfar',
+      slogan: 'Born to succeed',
       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',
@@ -124,38 +125,38 @@ export default {
       strain: '100% Robusta',
       country: 'Uganda / Wakiso District',
       height: '1.250 m',
-      revision: 'Secado al sol',
+      revision: 'Sonnengetrocknet',
-      harvest: 'Seleccionado cuidadósamente',
+      harvest: 'handgepflückt',
       profile: '4/4',
-      taste: '-.',
+      taste: 'Zartbitterschokolade',
-      texture: '-'
+      texture: 'sanft'
     },
   },
   labels: {
-    country: 'País / Región',
+    country: 'Land / Region',
-    height: 'Altura',
+    height: 'Anbauhöhe',
-    revision: 'Revisión',
+    revision: 'Verarbeitung',
-    harvest: 'Cosecha',
+    harvest: 'Ernte',
-    profile: 'Perfil',
+    profile: 'Profil',
-    taste: 'Gusto',
+    taste: 'Geschmack',
-    texture: 'Textura'
+    texture: 'Mundgefühl'
   },
 
   social: {
-    title: 'Tayrona Foods',
+    title: 'Committed to our community',
-    paragraph1: 'Creemos en el poder del café para conectar a la gente, enriquecer las culturas y hacer cambios positivos. Por esta razón tenemos un programa especial, por cada bolsa de café que compres estarás contribuyendo con 5 céntimos de euro para una escuela primaria en Colombia.',
+    paragraph1: 'Wir glauben an die Kraft des Kaffees, um Menschen zu verbin-den, Kulturen zu bereichern und positive Veränderungen zu be- wirken. Aus diesem Grund haben wir ein besonderes Programm ins Leben gerufen: Für jede Kaffeetüte, die Sie bei uns erwerben,spenden wir 5 Cent an eineSchule in unserem Dorf.',
-    paragraph2: 'Nos gustaría que futuras generaciones tengan una mejor educación que les permita hacer sus sueños una realidad, por eso trabajamos en estrecha colaboración con los productores locales de café para obtener granos de alta calidad directamente de la región de cultivo. Cada taza de café que disfrutas con nosotros es, por lo tanto, una pequeña contribución al desarrollo sostenible y   a la apreciación de nuestra maravillosa patria.',
+    paragraph2: 'Dorf. Damit möch-ten wir sicherstellen, dass dass zukünftige Generationen eine gute Bildung erhalten und ihre Träume verwirklichen können.Wir arbeiten eng mit lokalen Kaffeebauern zusammen, um qualitativ hochwertige Bohnen direkt aus der Region zu be-ziehen. Jede Tasse Kaffee, die Sie bei uns genießen, ist somit ein kleiner Beitrag zur nachhaltigen Entwicklung und Wertschät-zung unserer wunderbaren Heimat.',
-    paragraph3:'Forma parte de nuestra revolución del café y descubre una nueva dimensión de sabores.',
+    paragraph3:'Seien Sie Teil unserer Kaffeerevolution und entdecken Sie eine neue Dimension des Genusses. ',
-    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.'
+    paragraph4:'Tauchen Sie ein in die Welt von Tayroona Foods, wo der Kaffee nicht nur eine Leidenschaft ist,sondern auch eine Quelle des Wandels und der Unterstützung für diejenigen, die es am meisten brauchen.'
   },
   common: {
-    earth: 'Tierra',
+    earth: 'Erde',
-    water: 'Agua',
+    water: 'Wasser',
-    air: 'Aire',
+    air: 'Luft',
-    fire: 'Fuego',
+    fire: 'Feuer',
     company_name: 'Tayrona Foods',
     rol_managing_partner: 'Managing Partner',
-    download: 'Descargar'
+    download: 'Download'
   },
 
   contact:{

src/i18n/en.js

@@ -10,6 +10,7 @@ export default {
     home: 'Home',
     about: 'About',
     products: 'Products',
+    shopping: 'Shopping',
     social: 'Social',
     contact: 'Contact'
   },
@@ -62,7 +63,7 @@ export default {
     title2:'Partners Certifications'
   },
   products_page: {
-    title: 'Origin',
+    title: 'Single Origins',
     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',
 
@@ -144,7 +145,7 @@ export default {
   },
 
   social: {
-    title: 'Tayrona Foods',
+    title: 'Committed to our community',
     paragraph1: 'We believe in the power of coffee to connect people, enrich cultures, and bring about positive change. That\'s why we have a special program for every bag of coffee you purchase, you will be contributing 5 euro cents towards an elementary school in Colombia.',
     paragraph2: 'We want future generations to have a better education that enables them to make their dreams come true. That\'s why we work closely with local coffee growers to source high-quality beans directly from the growing region. Every cup of coffee you enjoy with us is, therefore, a small contribution to sustainable development and the appreciation of our wonderful homeland.',
     paragraph3:'Join our coffee revolution and discover a new dimension of flavors.',

src/i18n/es.js

@@ -62,7 +62,7 @@ export default {
     title2:'Nuestros Aliados'
   },
   products_page: {
-    title: 'Origen',
+    title: 'Cafés de origenes únicos',
     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',
   },
@@ -143,7 +143,7 @@ export default {
   },
 
   social: {
-    title: 'Tayrona Foods',
+    title: 'Comprometidos con nuestra comunidad',
     paragraph1: 'Creemos en el poder del café para conectar a la gente, enriquecer las culturas y hacer cambios positivos. Por esta razón tenemos un programa especial, por cada bolsa de café que compres estarás contribuyendo con 5 céntimos de euro para una escuela primaria en Colombia.',
     paragraph2: 'Nos gustaría que futuras generaciones tengan una mejor educación que les permita hacer sus sueños una realidad, por eso trabajamos en estrecha colaboración con los productores locales de café para obtener granos de alta calidad directamente de la región de cultivo. Cada taza de café que disfrutas con nosotros es, por lo tanto, una pequeña contribución al desarrollo sostenible y   a la apreciación de nuestra maravillosa patria.',
     paragraph3:'Forma parte de nuestra revolución del café y descubre una nueva dimensión de sabores.',

src/style.css

@@ -42,7 +42,7 @@ body {
 }
 
 .main-container {
-  width: 1366px;
+  width: 960px;
   margin: 0 auto;;
 }
 
@@ -67,3 +67,9 @@ body {
 .mt-6 {
   margin-top: 48px;
 }
+
+@media only screen and (max-width: 960px) {
+  .main-container {
+    width: 100%;
+  }
+}

src/views/about/About.vue

@@ -35,4 +35,14 @@
       margin: 0 150px;
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .employees {
+      flex-direction: column;
+
+      .employee {
+        margin: 0 8px 32px;
+      }
+    }
+  }
 </style>

src/views/products/Products.vue

@@ -32,7 +32,7 @@
   <section class="product-section content">
     <h2>{{ $t('products_page.title') }}</h2>
     <p>{{ $t('products_page.subtitle1') }}</p>
-    <p class="centered"><img src="@images/v-elemento.png" /></p>
+    <p hidden class="centered"><img src="@images/v-elemento.png" /></p>
     <ProductCarouselVue :products="products" />
     <Certifications />
 
@@ -46,7 +46,7 @@
 <style lang="scss" scoped>
 .product-section.content {
   h6 {
-      font-weight: 500;
+      font-weight: 200;
       font-size: 52px;
       text-align: left;
       line-height: 60px;

src/views/social/Social.vue

@@ -6,13 +6,8 @@
     <p>{{ $t('social.paragraph2') }}</p>
   </section>
   <section class="social-bottom">
-    <div class="left">
+    <img src="@images/proyect-soc-new.jpg">
-      <p>{{ $t('social.paragraph3') }}</p>
+    <p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
-      <p>{{ $t('social.paragraph4') }}</p>
-    </div>
-    <div class="right">
-      <img src="@images/kid-coffee.jpg">
-    </div>
   </section>
 </template>
 
@@ -23,22 +18,37 @@ import { slides } from '../../data';
 
 <style lang="scss" scoped>
   .social-bottom {
-    padding: 40px 98px;
+    padding: 0px 72px;
-    background-image: url('@images/bg_1.jpg');
     background-position: top left;
-    background-size: contain;
+    // display: grid;
-    height: 600px;
+    // grid-template-columns: 1fr 1fr;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
     .left {
-      padding: 52px 32px 0 0
+      padding: 0 32px 0 0
+    }
+
+    img {
+      float: right;
+      width: 50%;
+      padding: 16px
     }
     p {
       font-weight: 500;
       color: #603809;
-      font-size: 32px;
+      font-size: 24px;
-      line-height: 50px;
+      line-height: 40px;
 
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .social-bottom {
+      padding: 16px;
+
+      img {
+        float: none;
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
 </style>

vite.config.js

@@ -2,10 +2,14 @@ import { fileURLToPath, URL } from 'node:url';
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+console.log('process.argv :>> ', process.argv);
+
+const base = process.argv.includes('-beta') ? '/beta' : '/';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  base,
   resolve: {
     alias: {
       '@images': fileURLToPath(new URL('./src/assets/images',