Merge pull request #278 from bitlogic/dev

Release 20-08-2024

Author: marino-martin

gatsby-config.js

@@ -71,23 +71,13 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-google-gtag`,
+      resolve: "gatsby-plugin-google-tagmanager",
       options: {
-        // You can add multiple tracking ids and a pageview event will be fired for all of them.
-        trackingIds: ["G-F6VPYEJ1X0"],
-        gtagConfig: {
-          anonymize_ip: true,
-          cookie_expires: 0,
-          cookie_flags: "SameSite=None; Secure",
-        },
-        // This object is used for configuration specific to this plugin
-        pluginConfig: {
-          head: true,
-          respectDNT: true,
-        },
+        id: process.env.GTM_ID,
+        includeInDevelopment: false,
+        enableWebVitalsTracking: true,
       },
     },
-    "gatsby-plugin-react-helmet",
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -169,13 +159,5 @@ module.exports = {
     },
     "gatsby-plugin-offline",
     `gatsby-plugin-sass`,
-    /* {
-      resolve: "gatsby-plugin-hubspot",
-      options: {
-        trackingCode: "8668423",
-        respectDNT: true,
-        productionOnly: true,
-      },
-    }, */
   ],
 }

package.json

@@ -14,15 +14,11 @@
     "bootstrap": "^5.1.0",
     "gatsby": "^4.6.0",
     "gatsby-background-image": "^1.5.3",
+    "gatsby-plugin-google-tagmanager": "^4.25.0",
     "gatsby-plugin-canonical-urls": "^4.22.0",
-    "gatsby-plugin-gatsby-cloud": "^4.6.0",
-    "gatsby-plugin-google-analytics": "^3.12.0",
-    "gatsby-plugin-google-gtag": "^4.6.0",
-    "gatsby-plugin-google-marketing-platform": "^0.2.0",
     "gatsby-plugin-image": "^2.6.0",
     "gatsby-plugin-manifest": "^4.6.0",
     "gatsby-plugin-offline": "^5.6.0",
-    "gatsby-plugin-react-helmet": "^5.6.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sass": "^5.6.0",
     "gatsby-plugin-sharp": "^4.6.0",
@@ -40,13 +36,9 @@
     "react-dom": "^17.0.1",
     "react-flip-toolkit": "^7.0.13",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.11.0",
     "react-icons": "^4.2.0",
-    "react-intersection-observer": "^8.33.1",
-    "react-lottie": "^1.2.3",
-    "react-markdown": "5.0.3",
+    "react-lottie": "1.2.4",
     "react-multi-carousel": "^2.8.0",
-    "react-script-tag": "^1.1.2",
     "react-showdown": "^2.3.1",
     "sass": "^1.49.0",
     "webpack-filter-warnings-plugin": "^1.2.1"
@@ -74,4 +66,4 @@
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   }
-}
+}

src/components/Banner/Banner.scss

@@ -4,10 +4,6 @@
   width: 100%;
   height: 100%;
 
-  p {
-    font-size: $medium;
-  }
-
   &__wrapper {
     color: $primary;
     overflow: hidden;
@@ -23,10 +19,6 @@
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-
-    .imagen {
-      min-height: 450px;
-    }
   }
 
   .cont-lottie {
@@ -36,7 +28,7 @@
 
   &.background {
     .banner__wrapper {
-      padding: 0
+      padding: 0;
     }
 
     .button {
@@ -46,8 +38,7 @@
     }
 
     .bgImage {
-      margin: 32px 0 !important;
-      width: 100%;
+      margin: 32px 0;
     }
 
     .title-background {
@@ -88,7 +79,6 @@
         word-wrap: initial;
       }
 
-      h2,
       h3 {
         font-weight: 400;
         text-align: left;
@@ -141,7 +131,7 @@
 
       img {
         width: 100%;
-        object-fit: cover;
+        max-width: 450px;
       }
     }
 
@@ -182,7 +172,6 @@
 
       img {
         width: 100%;
-        height: 100%;
         object-fit: cover;
       }
     }
@@ -253,7 +242,7 @@
 
       .title-background {
         margin: 0 auto;
-        width: 80%;
+        width: 70%;
       }
     }
 
@@ -279,7 +268,7 @@
 
     &.top {
       .title {
-        h1 {
+        h2 {
           margin-bottom: 1rem;
           text-align: left;
         }
@@ -302,11 +291,13 @@
 
     &.topReverse {
       .imagen {
+        overflow: hidden;
+        padding: 0;
         height: 100%;
 
         img {
           width: 100%;
-          height: 100%;
+          max-width: 600px;
         }
 
         .cont-lottie {
@@ -316,10 +307,23 @@
       }
 
       .title {
+        padding-top: 0;
+        padding-bottom: 0;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
         flex-direction: row-reverse;
+
+        h2 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+          text-align: left;
+        }
+
+        h3 {
+          font-weight: 400;
+          padding-right: 3rem;
+        }
       }
     }
 
@@ -349,6 +353,15 @@
       .title {
         padding: 20px 0;
         flex: 1;
+
+        h2 {
+          margin-bottom: 1rem;
+          max-width: 300px;
+        }
+
+        h3 {
+          font-weight: 400;
+        }
       }
     }
 
@@ -390,9 +403,17 @@
         padding: 0;
         flex: 2;
 
-        &>div {
+        & > div {
           width: 70%;
         }
+
+        h2 {
+          margin-bottom: 1rem;
+        }
+
+        h3 {
+          font-weight: 400;
+        }
       }
     }
   }
@@ -415,8 +436,8 @@
 
     &.hero {
       .banner__wrapper {
-        min-height: 600px;
         flex-direction: row;
+        height: 600px;
         gap: 32px;
       }
 
@@ -425,6 +446,15 @@
         overflow: hidden;
         padding: 0;
 
+        .gatsby-image-wrapper.gatsby-image-wrapper-constrained {
+          width: 100%;
+          height: 100%;
+
+          img {
+            object-fit: contain !important;
+          }
+        }
+
         .cont-lottie {
           width: 100%;
           height: 100%;
@@ -434,12 +464,10 @@
       .title {
         h1 {
           margin-bottom: 1rem;
-          padding-right: 3rem;
         }
 
         h3 {
           font-weight: 400;
-          padding-right: 3rem;
         }
       }
     }
@@ -496,15 +524,6 @@
     &.diagonal {
       .banner__wrapper {
         max-height: 450px;
-        margin-right: 0;
-        margin-left: 8%;
-        max-width: calc(100% - 8%);
-        padding: 0;
-      }
-
-      .title {
-        display: flex;
-        justify-content: end;
       }
 
       .imagen {
@@ -513,11 +532,17 @@
           height: 400px;
         }
       }
+
+      .title {
+        h2 {
+          margin-bottom: 1rem;
+          max-width: 400px;
+        }
+      }
     }
   }
 
   @media screen and (min-width: $breakpoint-xxl) {
-
     &.hero,
     &.top,
     &.topReverse,
@@ -529,9 +554,16 @@
 
     &.diagonal {
       .banner__wrapper {
-        margin-left: 15%;
-        max-width: calc(100% - 15%);
+        margin-right: 0;
+        margin-left: 200px;
+        max-width: calc(100% - 200px);
+        padding: 0;
+      }
+
+      .title {
+        display: flex;
+        justify-content: end;
       }
     }
   }
-}
+}

src/components/BannerList/Banner.scss

@@ -29,47 +29,21 @@
     }
   }
 
-  button {
-    margin-top: 10px;
-    @include primaryBtn;
-    align-self: baseline;
-
-    a {
-      color: inherit;
-    }
-  }
-
   &__title {
     display: flex;
     flex-direction: column;
     font-weight: 700;
     text-align: left;
     text-transform: uppercase;
-  }
-}
 
-@media screen and (min-width: $breakpoint-xl) {
-  .bannerList {
-    &__buttonMobile {
-      display: none;
-    }
-  }
-}
+    a {
+      margin-top: 10px;
+      @include primaryBtn;
+      align-self: baseline;
 
-@media screen and (max-width: $breakpoint-md) {
-  .bannerList {
-    &__title {
-      button {
+      @media screen and (max-width: ($breakpoint-md - 1px)) {
         display: none;
       }
     }
   }
 }
-
-@media screen and (min-width: $breakpoint-md) {
-  .bannerList {
-    &__buttonMobile {
-      display: none;
-    }
-  }
-}