SBIT-142: Release a PROD

package.json

@@ -43,6 +43,7 @@
     "react-hubspot-form": "^1.3.7",
     "react-icons": "^4.2.0",
     "react-intersection-observer": "^8.33.1",
+    "react-lottie": "^1.2.3",
     "react-markdown": "5.0.3",
     "react-script-tag": "^1.1.2",
     "react-showdown": "^2.3.1",

src/components/Banner/Banner.js

@@ -1,6 +1,7 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { Link } from "gatsby"
 import ReactMarkdown from "react-markdown"
+import Lottie from 'react-lottie'
 import { useTheme } from "../../context/themeContext"
 
 import "./Banner.scss"
@@ -10,11 +11,21 @@ const Banner = ({ data }) => {
   const title = data?.title
   const variant = data?.variant
   const summary = data?.summary
+  const animation = data?.animation
   const image = data?.image
   const imageDark = data?.imageDark
   const button = data?.button
   const diagonalReverseState =
     variant === "diagonalReverse" ? "col-md-4" : "col-lg-6"
+
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    rendererSettings: {
+      preserveAspectRatio: 'xMidYMid slice'
+    },
+  }
+
   return (
     <div
       className={`banner ${variant}`}
@@ -44,15 +55,24 @@ const Banner = ({ data }) => {
       </div>
 
       <div
-        className={`imagen col-12 ${
-          variant === "diagonal" ? "col-md-8" : diagonalReverseState
-        } `}
+        className={`imagen col-12 ${variant === "diagonal" ? "col-md-8" : diagonalReverseState
+          } `}
       >
         {/* <img src={image?.url} alt={title} /> */}
-        <img
-          src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
-          alt={title}
-        />
+
+        {image?.url ?
+          <img
+            src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
+            alt={title}
+          /> :
+          <div className="cont-lottie">
+            {animation && <Lottie options={{
+              ...defaultOptions,
+              animationData: animation,
+            }}
+            />}
+          </div>
+        }
       </div>
     </div>
   )

src/components/Banner/Banner.scss

@@ -23,6 +23,10 @@
         width: 100%;
         max-width: 540px;
       }
+      .cont-lottie {
+        width: 300px;
+        height: 300px;
+      }
     }
     .title {
       h1 {
@@ -53,7 +57,6 @@
       width: 100%;
       img {
         max-width: 100%;
-
       }
     }
     .title {
@@ -216,17 +219,21 @@
     }
   }
   @media screen and (min-width: $breakpoint-sm) {
-    &.hero{
-      .imagen{
+    &.hero {
+      .imagen {
         justify-content: flex-end;
       }
     }
   }
   @media screen and (min-width: $breakpoint-md) {
     align-items: flex-start;
-    &.hero{
-      .imagen{
+    &.hero {
+      .imagen {
         justify-content: flex-end;
+        .cont-lottie {
+          width: 600px;
+          height: 600px;
+        }
       }
     }
     &.top {
@@ -360,18 +367,21 @@
       }
     }
   }
-
 
   @media screen and (min-width: $breakpoint-lg) {
     flex-direction: row;
 
     &.hero {
-      height: 500px;
+      height: 600px;
       position: relative;
       .imagen {
-        max-height: 500px;
+        max-height: 600px;
         overflow: hidden;
         padding: 0;
+        .cont-lottie {
+          width: 650px;
+          height: 650px;
+        }
       }
 
       .title {
@@ -397,7 +407,7 @@
           max-width: 700px;
         }
       }
-      .title{
+      .title {
         h2 {
           padding-right: 0rem;
         }

src/components/DualSection/DualSection.scss

@@ -53,6 +53,7 @@
   &-img {
     flex-basis: 55%;
     img {
+      border-radius: 8px;
       width: 100%;
       padding: 0;
     }

src/components/Footer/Navegation/navegation.js

@@ -7,7 +7,6 @@ export default function Navegation() {
   const data = useFooter()
   const dataFooter = data?.allStrapiLayout?.nodes[0].footer
   const dataNav = data?.allStrapiLayout?.nodes[0].navbar
-  console.log(dataNav)
 
   return (
     <div className="ContactData__Item ps-md-3">

src/components/Form/Form.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react"
 import MarkdownView from "react-showdown"
 import HubspotForm from "react-hubspot-form"
+import Lottie from 'react-lottie'
 import "./Form.scss"
 
 const Form = ({ location, data }) => {
@@ -10,6 +11,15 @@ const Form = ({ location, data }) => {
   const portalId = data?.portalId
   const formId = data?.formId
   const image = data?.image
+  const animation = data?.animation
+
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    rendererSettings: {
+      preserveAspectRatio: 'xMidYMid slice'
+    },
+  }
 
   useEffect(() => {
     window.addEventListener("message", handler)
@@ -23,7 +33,7 @@ const Form = ({ location, data }) => {
     if (
       event.origin === "https://forms.hsforms.com" ||
       event.origin === "https://site.dev.bitlogic.io" ||
-      event.origin === "https://www.bitlogic.io"||
+      event.origin === "https://www.bitlogic.io" ||
       event.origin === "https://preprod.d2mi1do1cquuwf.amplifyapp.com"
     ) {
       if (
@@ -38,7 +48,6 @@ const Form = ({ location, data }) => {
         }
       }
     }
-    console.log(event.origin, "origin")
   }
 
   const jqueryChange = elem => {
@@ -67,8 +76,19 @@ const Form = ({ location, data }) => {
               className="form__content text-start"
             />
           )}
-          <div className="form__img mt-md-5 text-center text-md-start">
-            <img src={image?.url} alt="hero" />
+          <div className="form__img text-center text-md-start">
+            {image?.url ?
+              <img
+                src={image?.url} alt="hero"
+              /> :
+              <>
+                {animation && <Lottie options={{
+                  ...defaultOptions,
+                  animationData: animation,
+                }}
+                />}
+              </>
+            }
           </div>
         </div>
         <div className="col-12 col-md-6">

src/components/Form/Form.scss

@@ -15,15 +15,19 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    > div{
+    > div {
       width: 100%;
     }
   }
   &__img {
-    padding: 2rem 1rem;
     img {
+      padding: 3rem 1rem;
       max-width: 250px;
     }
+
+    svg {
+      max-width: 350px !important;
+    }
   }
   &__content {
     p {

src/components/NavBar/Navbar.js

@@ -11,7 +11,7 @@ import { useTheme } from "../../context/themeContext"
 // theme images
 import moon from "../../images/moon-solid.svg"
 import sun from "../../images/sun.svg"
-console.log(menusvg)
+
 const NavBar = () => {
   const { theme, toggleTheme } = useTheme()
   const navbarData = useNavbar()
@@ -32,7 +32,7 @@ const NavBar = () => {
           <GatsbyImage
             image={theme === "dark" && logoDark ? logoDark : logoLight}
             alt={"bitlogic"}
-            className= "logo"
+            className="logo"
           />
         </Link>
         <Navbar.Toggle

src/components/Text/Text.scss

@@ -13,7 +13,7 @@
       background-color: $primary-container;
       border-radius: 10px;
       p:first-child {
-        padding-top: 1rem;
+        padding-top: 29px;
       }
       p {
         color: $primary;
@@ -26,13 +26,27 @@
     padding-bottom: 3rem;
 
     .notTitle {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       color: $primary;
       border-radius: 20px;
       background-color: $primary-container;
-      padding: 1rem;
-      margin: 1.5rem 0rem;
-      p:nth-last-child(-n + 2) {
+      padding: 0rem 1rem;
+
+      p:first-child {
+        padding-top: 29px;
+      }
+
+      h6 {
         margin-bottom: 0px;
+
+        &:last-child {
+          padding-bottom: 29px;
+        }
+        strong {
+          font-size: 16px !important;
+        }
       }
     }
   }

src/components/quote/quote.scss

@@ -9,6 +9,7 @@
     img {
       width: 100%;
       object-fit: cover;
+      border-radius: 8px;
     }
     iframe {
       width: 100%;

src/hooks/useBlog.js

@@ -51,6 +51,7 @@ const useBlog = () => {
             image {
               url
             }
+            animation
           }
         }
       }

src/hooks/useNavbar.js

@@ -28,7 +28,7 @@ const useNavbar = () => {
               localFile {
                 childImageSharp {
                   gatsbyImageData(
-                    placeholder: TRACED_SVG
+                    placeholder: BLURRED
                   )
                 }
               }
@@ -37,7 +37,7 @@ const useNavbar = () => {
               localFile {
                 childImageSharp {
                   gatsbyImageData(
-                    placeholder: TRACED_SVG
+                    placeholder: BLURRED
                   )
                 }
               }