changes

src/App.vue

@@ -26,13 +26,13 @@
     },
     methods: {
       handleScroll() {
-        const limit = 430;
+        const limit = this.$isMobile() ? 115 : 430;
         if (!pagesWithCarousel.includes(this.$route.name)) {
           this.stickyClass = 'has-sticky has-sticky-1'
           return;
         }
 
-        if (window.scrollY > 0 && window.scrollY <= limit) {
+        if (window.scrollY > 5 && window.scrollY <= limit) {
           this.stickyClass = 'has-sticky has-sticky-0';
         } else if(window.scrollY > limit) {
           this.stickyClass = 'has-sticky has-sticky-1';
@@ -45,7 +45,7 @@
 </script>
 
 <template>
-  <div class="width">{{ width }}px {{ deviceClass }}</div>
+  <!-- <div class="width">{{ width }}px {{ deviceClass }}</div> -->
   <Menu :class="`${stickyClass}`" />    
   <div class="main-container" :class="`${stickyClass} ${deviceClass}`">
     <div class="content-wrapper">
@@ -70,7 +70,7 @@
     opacity: 0.5;
   }
   .content-wrapper {
-    padding-top: 91px;
+    padding-top: 120px;
     background-color: #000;
   }
   .content {
@@ -109,7 +109,7 @@
 
   @media only screen and (max-width: 767px) {
     .content-wrapper {
-      padding-top: 50px;
+      padding-top: 115px;
     }
     .content {
       padding: 0 16px 72px;

src/components/CoffeeFarmer.vue

@@ -22,11 +22,11 @@ export default {
   }
 
   h3.header {
-    font-weight: 600;
+    font-weight: 300;
     font-size: 26px;
-    line-height: 58px;
+    line-height: 36px;
-    padding: 120px 230px 0;
+    padding: 120px 148px 0;
-    text-align: center;
+    text-align: center ;
     text-shadow: 1px 1px 10px #000;
   }
 

src/components/Different.vue

@@ -12,6 +12,7 @@ import DifferentBox from './DifferentBox.vue';
       <DifferentBox image="coffee-cup1.png" :title="$t('different.extraordinary.title')" :description="$t('different.extraordinary.description')" />
       <DifferentBox image="best-price1.png" :title="$t('different.affordable.title')" :description="$t('different.affordable.description')" />
     </div>
+    <h3>{{ $t('different.subheader1') }}</h3>
   </section>
 </template>
 
@@ -19,7 +20,7 @@ import DifferentBox from './DifferentBox.vue';
  .different {
     color: #fff;
     background-color: #000;
-    padding: 0 0 72px;
+    padding: 0 0 0px;
   }
 
   h2 {
@@ -32,7 +33,7 @@ import DifferentBox from './DifferentBox.vue';
     margin-top: 24px;
     padding: 0 150px;
     font-size: 20px;
-    line-height: 34px;
+    line-height: 30px;
     text-align: center;
     font-weight: 200;
     margin-bottom: 50px;

src/components/Menu.vue

@@ -29,6 +29,10 @@ export default {
           <div class="hamburger-line"></div>
           <div class="hamburger-line"></div>
         </div>
+        <div class="logo">
+          <img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
+        </div>
+        <div></div>
       </div>
       <div class="menu-content" :class="{collapsed: !mobileMenuOpened}">
         <div class="links">
@@ -44,7 +48,9 @@ export default {
       </div>
     </nav>
     <nav v-else>
-      <img class="logo" src="@images/tayrona-foods-yellow.png" />
+      <div class="logo">
+        <img src="@images/tayrona-foods-yellow.png" alt="Tayrona Foods"/>
+      </div>
       <div class="links">
         <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
         <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
@@ -80,9 +86,9 @@ export default {
       height: 100%;
       transition: background-color .3s ease-in-out;
 
-      .logo {
+      .logo img{
-        height: 75px;
+        height: 100px;
-        width: 75px;;
+        width: 100px;;
       }
 
       .links {
@@ -148,6 +154,20 @@ export default {
     .menu {
       &-bar {
         width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 2fr 1fr;
+        height: 115px;
+        transition: height .2s ease-out;
+
+        .logo, .hamburger {
+          justify-self: center;
+          align-self: center;
+        }
+
+        .logo {
+          opacity: 1;
+          transition: opacity .2s ease-out;
+        }
       }
       &-content {
         color: white;
@@ -172,9 +192,18 @@ export default {
         }
       }  
 
-      &.has-sticky-0 nav, &.has-sticky-1 nav{
+      &.has-sticky-0, &.has-sticky-1 {
+        .menu-bar {
+          height: 50px;
+        }
+        .logo {
+          opacity: 0;
+          overflow: hidden;
+        }
+        nav {
           background-color: #000;
         }
       }
     }
+  }
 </style>

src/data.js

@@ -76,7 +76,7 @@ export const products = [
   {
     kind: kinds.fire,
     name: 'products.uganda_gnoma.name',
-    images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
+    images: ['uganda-single.jpg', 'product-uganda-double1.png',],
     slogan: 'products.uganda_gnoma.slogan',
     description: 'products.uganda_gnoma.description',
     farm: 'products.uganda_gnoma.farm',
@@ -92,50 +92,50 @@ export const products = [
   },
   {
   kind: kinds.earth,
-    name: 'products.uganda_gnoma.name',
+  name: 'products.uganda_gnoma_cream.name',
-    images: ['product-uganda-single11.png', 'product-uganda-double1.png',],
+  images: ['uganda-caffecrem.jpg',],
-    slogan: 'products.uganda_gnoma.slogan',
+  slogan: 'products.uganda_gnoma_cream.slogan',
-    description: 'products.uganda_gnoma.description',
+  description: 'products.uganda_gnoma_cream.description',
-    farm: 'products.uganda_gnoma.farm',
+  farm: 'products.uganda_gnoma_cream.farm',
-    strain: 'products.uganda_gnoma.strain',
+  strain: 'products.uganda_gnoma_cream.strain',
-    country: 'products.uganda_gnoma.country',
+  country: 'products.uganda_gnoma_cream.country',
-    height: 'products.uganda_gnoma.height',
+  height: 'products.uganda_gnoma_cream.height',
-    revision: 'products.uganda_gnoma.revision',
+  revision: 'products.uganda_gnoma_cream.revision',
-    harvest: 'products.uganda_gnoma.harvest',
+  harvest: 'products.uganda_gnoma_cream.harvest',
-    profile: 'products.uganda_gnoma.profile',
+  profile: 'products.uganda_gnoma_cream.profile',
-    taste: 'products.uganda_gnoma.taste',
+  taste: 'products.uganda_gnoma_cream.taste',
-    texture: 'products.uganda_gnoma.texture',
+  texture: 'products.uganda_gnoma_cream.texture',
   url: 'https://tayronafoods.myshopify.com/products/uganda-ngoma',
-  },
+},
 ];
 
 export const slides = {
   home: [
     'mountains.jpg',
     'coffee1.jpg',
-    'Packaging_new.png',
+    'Packaging_new 1.jpg',
     'proysoc.01.jpg',
-    'kids-coffee.jpg',
+    'kids.jpg',
   ],
   about: [
     'coffee1.jpg',
     'mountains.jpg',
-    'Packaging_new.png',
+    'Packaging_new 1.jpg',
     'proysoc.01.jpg',
-    'kids-coffee.jpg',
+    'kids.jpg',
   ],
   social: [
     'proysoc.01.jpg',
-    'kids-coffee.jpg',
+    'kids.jpg',
     'mountains.jpg',
     'coffee1.jpg',
-    'Packaging_new.png',
+    'Packaging_new 1.jpg',
   ],
   products: [
-    'Packaging_new.png',
+    'Packaging_new 1.jpg',
     'coffee1.jpg',
     'mountains.jpg',
     'proysoc.01.jpg',
-    'kids-coffee.jpg',
+    'kids.jpg',
   ],
 };

src/i18n/de.js

@@ -131,6 +131,22 @@ export default {
       taste: 'Zartbitterschokolade',
       texture: 'sanft'
     },
+    uganda_gnoma_cream: {
+      title:'Earth',
+      slogan: 'Born to create',
+      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',
+      farm: 'Caffeè crema ',
+      strain: '100% Robusta',
+      country: 'Uganda / Wakiso District',
+      height: '1.250 m',
+      revision: 'Sonnengetrocknet',
+      harvest: 'handgepflückt',
+      profile: '1/4',
+      taste: 'Zartbitterschokolade',
+      texture: 'sanft'
+    },
   },
   labels: {
     country: 'Land / Region',
@@ -161,7 +177,7 @@ export default {
 
   contact:{
     title: 'Contacto',
-    paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
+    paragraph1: 'Si está interesado o tiene alguna pregunta, <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">¡contáctenos!</a>',
     paragraph2: 'Correo  Electrónico',
     paragraph3: 'info@tayronafoods.com',
     paragraph4: 'alejandro@tayronafoods.com',

src/i18n/en.js

@@ -133,7 +133,25 @@ export default {
       taste: '',
       texture: ''
     },
+    uganda_gnoma_cream: {
+      title:'Earth',
+      slogan: 'Born to create',
+      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',
+      farm: 'Caffeè crema ',
+      strain: '100% Robusta',
+      country: 'Uganda / Wakiso District',
+      height: '1.250 m',
+      revision: 'Sun dried',
+      harvest: 'Carefully selected',
+      profile: '1/4',
+      taste: 'Zartbitterschokolade',
+      texture: 'sanft'
     },
+  },
+  
+
   labels: {
     country: 'Country / Region',
     height: 'Height',
@@ -162,7 +180,7 @@ export default {
   },
   contact:{
     title: 'Contact',
-    paragraph1:'If you are interested or have any questions, please contact us!',
+    paragraph1:'If you are interested or have any questions, please <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">contact us!</a>',
     paragraph2: 'Email',
     paragraph3: 'info{\'@\'}tayronafoods.com',
     paragraph4: 'alejandro{\'@\'}tayronafoods.com',

src/i18n/es.js

@@ -37,6 +37,7 @@ export default {
   different: {
     header: '¿Por qué somos diferentes?',
     subheader: '¡No solo hacemos tu café, hacemos tu día!',
+    subheader1: 'Las grandes ideas comienzan con un excelente café, te ayudaremos a lograrlo.',
     beans: {
       title: 'Granos Supremos',
       description: 'Granos proporcionan gran sabor',
@@ -131,6 +132,23 @@ export default {
       taste: '-.',
       texture: '-'
     },
+
+    uganda_gnoma_cream: {
+      title:'Tierra',
+      slogan: 'Nacido para crear',
+      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',
+      farm: 'Caffeè crema ',
+      strain: '100% Robusta',
+      country: 'Uganda / Wakiso District',
+      height: '1.250 m',
+      revision: 'Secado al sol',
+      harvest: 'Seleccionado cuidadósamente',
+      profile: '1/4',
+      taste: '-.',
+      texture: '-'
+    },
   },
   labels: {
     country: 'País / Región',
@@ -161,7 +179,7 @@ export default {
 
   contact:{
     title: 'Contacto',
-    paragraph1: 'Si está interesado o tiene alguna pregunta, ¡contáctenos!',
+    paragraph1: 'Si está interesado o tiene alguna pregunta, <a class="link" href="https://tayronafoods.myshopify.com/pages/contact" target="_blank">¡contáctenos!</a>',
     paragraph2: 'Correo  Electrónico',
     paragraph3: 'info{\'@\'}tayronafoods.com',
     paragraph4: 'alejandro{\'@\'}tayronafoods.com',

src/style.css

@@ -68,6 +68,10 @@ body {
   margin-top: 48px;
 }
 
+a, .link {
+  color: #442808;
+}
+
 @media only screen and (max-width: 960px) {
   .main-container {
     width: 100%;

src/views/contact/Contact.vue

@@ -3,7 +3,7 @@
   <div class="contact-section">
     <div class="left">
       <h1>{{ $t('contact.title') }}</h1>
-      <p>{{ $t('contact.paragraph1') }}</p>
+      <p v-html="$t('contact.paragraph1')"></p>
       <h3>{{ $t('contact.paragraph2') }}</h3>
       <p>{{ $t('contact.paragraph3') }}</p>
       <p>{{ $t('contact.paragraph4') }}</p>
@@ -12,7 +12,7 @@
       <p>{{ $t('contact.paragraph7') }}</p>
       <p>{{ $t('contact.paragraph8') }}</p>
       <h3>{{ $t('contact.paragraph9') }}</h3>
-      <p>{{ $t('contact.paragraph10') }}</p>
+      <p><a href="https://www.instagram.com/tayrona_foods" target="">Instagram</a></p>
     </div>
     <div class="right"></div>
   </div>
@@ -36,20 +36,28 @@ export default {
 
     h1 {
       font-weight: 400;
-      font-size: 64px;
+      font-size: 32px;
       line-height: 75px;
     }
 
     h3 {
       margin-top: 54px;
       font-weight: 400;
-      font-size: 32px;
+      font-size: 18px;
       line-height: 38px;
     }
     p {
-      font-weight: 400;
+      font-weight: 300;
-      font-size: 20px;
+      font-size: 16px;
       line-height: 24px;
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .contact-section {
+      .left {
+        padding: 36px 16px;
+      }
+    }
+  }
 </style>