From 2447d3dd7ab3c97b28a4d27a803e2fb3c85e460f Mon Sep 17 00:00:00 2001
From: Dario Viada <dario.viada@bitlogic.io>
Date: Thu, 21 Apr 2022 12:32:09 -0300
Subject: [PATCH 1/2] arreglos en banner, logo y transition

---
 src/components/Banner/Banner.js               |  2 +-
 src/components/Banner/Banner.scss             | 76 +++++++++------
 src/components/NavBar/NavBar.scss             |  3 +
 src/components/NavBar/Navbar.js               |  1 +
 .../animatedTransitionContinous.scss          |  2 +-
 src/schema/blogSchema.js                      | 93 +++++++++++++++++++
 src/styles/global.scss                        | 10 +-
 7 files changed, 152 insertions(+), 35 deletions(-)

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index 40a60424..3c14eb40 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -14,7 +14,7 @@ const Banner = ({ data }) => {
   const imageDark = data?.imageDark
   const button = data?.button
   const diagonalReverseState =
-    variant === "diagonalReverse" ? "col-md-4" : "col-md-6"
+    variant === "diagonalReverse" ? "col-md-4" : "col-lg-6"
   return (
     <div
       className={`banner ${variant}`}
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index e1b3d2a0..f82b3eb4 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -112,8 +112,13 @@
     .imagen {
       display: flex;
       justify-content: flex-end;
+      overflow: hidden;
+      max-height: 300px;
+      align-items: center;
       img {
         width: 100%;
+        height: fit-content;
+        min-height: 100%;
       }
     }
     .title {
@@ -189,33 +194,7 @@
   }
 
   @media screen and (min-width: $breakpoint-md) {
-    flex-direction: row;
     align-items: flex-start;
-    &.hero {
-      height: 80vh;
-      position: relative;
-      .imagen {
-        max-height: 80vh;
-        overflow: hidden;
-        padding: 0;
-        justify-content: flex-end;
-      }
-
-      .title {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        h1 {
-          margin-bottom: 1rem;
-          padding-right: 3rem;
-        }
-        h3 {
-          font-weight: 400;
-          padding-right: 3rem;
-        }
-      }
-    }
     &.top {
       height: 400px;
       position: relative;
@@ -279,13 +258,15 @@
       }
     }
     &.diagonal {
+      flex-direction: row;
       height: 300px;
       position: relative;
       align-items: center;
       .imagen {
         -webkit-clip-path: polygon(17% 0, 100% 0, 100% 55%, 91% 100%, 0 100%);
         clip-path: polygon(17% 0, 100% 0, 100% 55%, 91% 100%, 0 100%);
-        height: 500px;
+        height: 300px;
+        max-height: 300px;
         overflow: hidden;
         padding: 0;
         justify-content: flex-end;
@@ -305,7 +286,7 @@
         h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
-          max-width: 400px;
+          max-width: 300px;
         }
         h3 {
           font-weight: 400;
@@ -349,8 +330,47 @@
     }
   }
   @media screen and (min-width: $breakpoint-lg) {
+    flex-direction: row;
+    
+    &.hero {
+      height: 500px;
+      position: relative;
+      .imagen {
+        max-height: 500px;
+        overflow: hidden;
+        padding: 0;
+        justify-content: flex-end;
+      }
+
+      .title {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        h1 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+        }
+        h3 {
+          font-weight: 400;
+          padding-right: 3rem;
+        }
+      }
+    }
     &.diagonal {
       height: 400px;
+      .imagen {
+        height: 400px;
+        max-height: 400px;
+      }
+      .title {
+        h2 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+          max-width: 400px;
+        }
+      }
+
     }
     &.diagonalReverse {
       height: 400px;
diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss
index c3eb7ad1..dc3df213 100644
--- a/src/components/NavBar/NavBar.scss
+++ b/src/components/NavBar/NavBar.scss
@@ -6,6 +6,9 @@
   & > a {
     margin: 1.5em 0 1em 50px;
   }
+  .logo{
+    max-width: 140px;
+  }
 }
 .NavBar__Logo {
   margin: 16px 28px;
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
index b01c964e..aa338797 100644
--- a/src/components/NavBar/Navbar.js
+++ b/src/components/NavBar/Navbar.js
@@ -31,6 +31,7 @@ const NavBar = () => {
           <GatsbyImage
             image={theme === "dark" && logoDark ? logoDark : logoLight}
             alt={"bitlogic"}
+            className= "logo"
           />
         </Link>
         <Navbar.Toggle
diff --git a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
index 1e5e02ab..cfba22a0 100644
--- a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
+++ b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
@@ -8,7 +8,7 @@
   margin: auto;
   overflow: hidden;
   z-index: 1;
-  margin-bottom: 3em;
+  margin: 2rem auto;
   &__title {
     display: flex;
     position: absolute;
diff --git a/src/schema/blogSchema.js b/src/schema/blogSchema.js
index e76a6e3e..47105241 100644
--- a/src/schema/blogSchema.js
+++ b/src/schema/blogSchema.js
@@ -443,6 +443,99 @@ type StrapiBlogCategory implements Node {
     strapiId: Int
     title: String
     bannerHead: StrapiBlogPageBannerHead
+    banner: StrapiBlogPageBanner
+  }
+  type StrapiBlogPageBanner {
+    id: Int
+    title: String
+    variant: String
+    summary: String
+    button: StrapiBlogPageBannerButton
+    image: StrapiBlogPageBannerImage
+  }
+  type StrapiBlogPageBannerButton {
+    id: Int
+    content: String
+    url: String
+    landing_page: StrapiBlogPageBannerButtonLanding_page
+  }
+  type StrapiBlogPageBannerButtonLanding_page {
+    id: Int
+    name: String
+    slug: String
+    published_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    created_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    updated_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+  }
+  
+  type StrapiBlogPageBannerImage {
+    id: Int
+    name: String
+    alternativeText: String
+    caption: String
+    width: Int
+    height: Int
+    formats: StrapiBlogPageBannerImageFormats
+    hash: String
+    ext: String
+    mime: String
+    size: Float
+    url: String
+    provider: String
+    created_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    updated_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    localFile: File
+  }
+  
+  type StrapiBlogPageBannerImageFormats {
+    small: StrapiBlogPageBannerImageFormatsSmall
+    thumbnail: StrapiBlogPageBannerImageFormatsThumbnail
+  }
+  type StrapiBlogPageBannerImageFormatsSmall {
+    ext: String
+    url: String
+    hash: String
+    mime: String
+    name: String
+    size: Float
+    width: Int
+    height: Int
+  }
+  
+  type StrapiBlogPageBannerImageFormatsThumbnail {
+    ext: String
+    url: String
+    hash: String
+    mime: String
+    name: String
+    size: Float
+    width: Int
+    height: Int
   }
 
   type StrapiBlogPageBannerHead {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 64eef92c..0ccd7053 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -121,22 +121,22 @@ body {
   p {
     line-height: 1.2;
     em {
-      font-size: 14px;
+      font-size: 16px;
       font-family: $secondary-font;
     }
     strong {
-      font-size: 14px;
+      font-size: 16px;
       font-family: $secondary-font;
     }
-    font-size: 14px;
+    font-size: 16px;
     font-family: $secondary-font;
   }
   button {
-    font-size: 14px;
+    font-size: 16px;
     font-family: $primary-font;
   }
   input {
-    font-size: 14px;
+    font-size: 16px;
     font-family: $primary-font;
   }
   h1 {

From 7ca8fd07ee4bbae3642e4b2db4523e49af1db02c Mon Sep 17 00:00:00 2001
From: Dario Viada <dario.viada@bitlogic.io>
Date: Thu, 21 Apr 2022 12:40:46 -0300
Subject: [PATCH 2/2] fix margin duplicado en animatedTransition

---
 .../animatedTransitionContinous/animatedTransitionContinous.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
index cfba22a0..8a6ce0eb 100644
--- a/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
+++ b/src/components/animatedTransitionContinous/animatedTransitionContinous.scss
@@ -5,7 +5,6 @@
   position: relative;
   width: 100%;
   height: 150px;
-  margin: auto;
   overflow: hidden;
   z-index: 1;
   margin: 2rem auto;