From 39f8bd82f6fece86ccb5afad3bbe729c9a3183d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Conde?= <jcondec@protonmail.com>
Date: Mon, 4 Sep 2023 12:56:05 +0200
Subject: [PATCH] changes

---
 src/App.vue                   | 10 ++++-----
 src/components/Menu.vue       | 41 ++++++++++++++++++++++++++++++-----
 src/i18n/de.js                |  2 +-
 src/i18n/en.js                |  2 +-
 src/i18n/es.js                |  2 +-
 src/style.css                 |  4 ++++
 src/views/contact/Contact.vue | 20 ++++++++++++-----
 7 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 52f0221..2ab5a5e 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 296c778..9fb730a 100644
--- a/src/components/Menu.vue
+++ b/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 {
-        height: 75px;
-        width: 75px;;
+      .logo img{
+        height: 100px;
+        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,8 +192,17 @@ export default {
         }
       }  
 
-      &.has-sticky-0 nav, &.has-sticky-1 nav{
-        background-color: #000;
+      &.has-sticky-0, &.has-sticky-1 {
+        .menu-bar {
+          height: 50px;
+        }
+        .logo {
+          opacity: 0;
+          overflow: hidden;
+        }
+        nav {
+          background-color: #000;
+        }
       }
     }
   }
diff --git a/src/i18n/de.js b/src/i18n/de.js
index db54d92..bcaa338 100644
--- a/src/i18n/de.js
+++ b/src/i18n/de.js
@@ -177,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',
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 83f3ef0..b8d2763 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -180,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',
diff --git a/src/i18n/es.js b/src/i18n/es.js
index 33d848e..5e2e6a9 100644
--- a/src/i18n/es.js
+++ b/src/i18n/es.js
@@ -179,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',
diff --git a/src/style.css b/src/style.css
index 3cec73a..dc54631 100644
--- a/src/style.css
+++ b/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%;
diff --git a/src/views/contact/Contact.vue b/src/views/contact/Contact.vue
index 1c85bdb..3675b09 100644
--- a/src/views/contact/Contact.vue
+++ b/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-size: 20px;
+      font-weight: 300;
+      font-size: 16px;
       line-height: 24px;
     }
   }
+
+  @media only screen and (max-width: 767px) {
+    .contact-section {
+      .left {
+        padding: 36px 16px;
+      }
+    }
+  }
 </style>
\ No newline at end of file