SBIT-70: Release a PROD

src/components/Banner/Banner.js

@@ -1,20 +1,30 @@
 import React from "react"
 import { Link } from "gatsby"
+import ReactMarkdown from "react-markdown"
+import { useTheme } from "../../context/themeContext"
+
 import "./Banner.scss"
 
 const Banner = ({ data }) => {
+  const { theme } = useTheme()
   const title = data?.title
   const variant = data?.variant
   const summary = data?.summary
   const image = data?.image
+  const imageDark = data?.imageDark
   const button = data?.button
-  const id = data?.id
+  const diagonalReverseState =
+    variant === "diagonalReverse" ? "col-md-4" : "col-md-6"
   return (
-    <div className={`banner ${variant}`} id={id}>
-      <div className="title container">
-        <div className="col-12 col-md-6">
-          <h1>{title}</h1>
-          <h3>{summary}</h3>
+    <div
+      className={`banner ${variant}`}
+      id={data.strapi_component + "-" + data.id}
+    >
+      <div className="title container-md">
+        <div className="col-12 col-lg-6">
+          {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>}
+          {/* <h3>{summary}</h3> */}
+          <ReactMarkdown source={summary} className="banner-markdown" />
           {button &&
             (button?.landing_page ? (
               <Link to={`../${button.landing_page.slug}`} className="button">
@@ -32,9 +42,17 @@ const Banner = ({ data }) => {
             ))}
         </div>
       </div>
-
-      <div className="imagen col-12 col-md-6">
-        <img src={image?.url} alt={title} />
+
+      <div
+        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}
+        />
       </div>
     </div>
   )

src/components/Banner/Banner.scss

@@ -27,6 +27,13 @@
     .title {
       h1 {
         text-transform: uppercase;
+        text-align: left;
+        margin-bottom: 0.8rem;
+        word-wrap: initial;
+      }
+      h3 {
+        font-weight: 400;
+        text-align: left;
       }
     }
   }
@@ -42,30 +49,65 @@
     .imagen {
       display: flex;
       justify-content: flex-end;
+      img {
+        max-width: 450px;
+      }
+    }
+    .title {
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+      h2 {
+        text-transform: uppercase;
+        text-align: center;
+        word-wrap: initial;
+      }
+      h3 {
+        display: none;
+      }
+    }
+  }
+  &.topReverse {
+    height: auto;
+    justify-content: end;
+    .button {
+      @include primaryBtn;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: inline-block;
+    }
+    .imagen {
+      display: flex;
+      justify-content: flex-start;
       img {
         width: 100%;
         max-width: 450px;
       }
     }
     .title {
       padding-top: 2rem;
-      h1 {
+      padding-bottom: 2rem;
+      h2 {
         text-transform: uppercase;
         text-align: center;
+        word-wrap: initial;
       }
       h3 {
         display: none;
       }
     }
   }
   &.diagonal {
-    height: auto;
+    min-height: 300px;
     justify-content: end;
-    background-color: #f2f0f7;
+    background-color: $bg-diagonal;
     .button {
       margin-top: 20px;
       margin-bottom: 20px;
       display: inline-block;
+      font-weight: 600;
+      color: #607ee7;
+      text-decoration: underline;
+      padding-left: 5px;
     }
     .imagen {
       display: flex;
@@ -76,10 +118,12 @@
     }
     .title {
       padding-top: 2rem;
-      h1 {
+      padding-bottom: 2rem;
+      h2 {
         text-transform: uppercase;
         color: #607ee7;
         margin-bottom: 0;
+        word-wrap: initial;
       }
       h3 {
         display: none;
@@ -90,25 +134,32 @@
   &.diagonalReverse {
     height: auto;
     justify-content: end;
-    background-color: #f2f0f7;
+
     .button {
       margin-top: 20px;
       margin-bottom: 20px;
       display: inline-block;
+      color: #607ee7;
+      text-decoration: underline;
+      padding-left: 5px;
     }
     .imagen {
       display: flex;
-      justify-content: flex-end;
+      justify-content: center;
+      align-items: center;
       img {
-        width: 100%;
+        max-width: 200px;
       }
     }
     .title {
       padding-top: 2rem;
-      h1 {
+      padding-bottom: 2rem;
+      background-color: $bg-diagonal;
+      h2 {
         text-transform: uppercase;
         color: #607ee7;
         margin-bottom: 0;
+        word-wrap: initial;
       }
       h3 {
         display: none;
@@ -119,6 +170,23 @@
   .gatsby-image-wrapper {
     display: block;
   }
+  .banner-markdown{
+    font-size: 30px;
+    h1,h2,h3,h4,h5,h6{
+      font-size: 32px;
+      font-weight: 600;
+      margin-bottom: 0;
+    }
+    p , a, span, small, li, i, em{
+      span, strong, small, i, b, em {
+        font-size: 30px;
+      }
+      font-size: 30px;
+    }
+    strong, b {
+      font-weight: 600;
+    }
+  }
 
   @media screen and (min-width: $breakpoint-md) {
     flex-direction: row;
@@ -158,18 +226,18 @@
         padding: 0;
         justify-content: flex-end;
         img {
-          width: 100%;
           max-width: 600px;
         }
       }
 
       .title {
         position: absolute;
         padding-top: 0;
+        padding-bottom: 0;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        h1 {
+        h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
           text-align: left;
@@ -180,41 +248,43 @@
         }
       }
     }
-    &.diagonal {
+    &.topReverse {
       height: 400px;
       position: relative;
       align-items: center;
+      flex-direction: row-reverse;
       .imagen {
-        height: 500px;
+        max-height: 500px;
         overflow: hidden;
         padding: 0;
-        justify-content: flex-end;
         img {
           width: 100%;
+          max-width: 600px;
         }
       }
 
       .title {
-        position: absolute;
         padding-top: 0;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        h1 {
+        padding-bottom: 0;
+        flex-direction: row-reverse;
+        h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
+          text-align: left;
         }
         h3 {
           font-weight: 400;
           padding-right: 3rem;
         }
       }
     }
-    &.diagonalReverse {
-      height: 400px;
+    &.diagonal {
+      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;
         overflow: hidden;
         padding: 0;
@@ -227,18 +297,72 @@
       .title {
         position: absolute;
         padding-top: 0;
+        padding-bottom: 0;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        h1 {
+
+        h2 {
           margin-bottom: 1rem;
           padding-right: 3rem;
+          max-width: 400px;
         }
         h3 {
           font-weight: 400;
           padding-right: 3rem;
         }
       }
     }
+    &.diagonalReverse {
+      height: 300px;
+      position: relative;
+      align-items: center;
+      justify-content: flex-start;
+      flex-direction: row-reverse;
+      .imagen {
+        height: 500px;
+        overflow: hidden;
+        padding: 0;
+        justify-content: flex-end;
+      }
+      .button {
+        padding-left: 5rem;
+      }
+      .title {
+        background-color: $bg-diagonal;
+        -webkit-clip-path: polygon(0 0, 92% 0, 100% 45%, 100% 100%, 17% 100%);
+        clip-path: polygon(0 0, 92% 0, 100% 45%, 100% 100%, 17% 100%);
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: row-reverse;
+        height: 100%;
+        align-items: center;
+        h2 {
+          margin-bottom: 1rem;
+          padding-left: 5rem;
+        }
+        h3 {
+          font-weight: 400;
+          padding-left: 5rem;
+        }
+      }
+    }
+  }
+  @media screen and (min-width: $breakpoint-lg) {
+    &.diagonal {
+      height: 400px;
+    }
+    &.diagonalReverse {
+      height: 400px;
+      .title {
+        h2 {
+          padding-left: 10rem;
+        }
+      }
+      .button {
+        padding-left: 10rem;
+      }
+    }
+
   }
 }

src/components/BlogPage/BlogArticle/BlogArticle.js

@@ -8,11 +8,15 @@ import "./BlogArticle.scss"
 const BlogArticle = ({ title, summary, image, slug, text }) => {
   return (
     <div className="article__container">
-      <GatsbyImage
-        image={getImage(image?.localFile)}
-        alt={title}
-        className="article__image"
-      />
+      {image?.localFile ? (
+        <GatsbyImage
+          image={getImage(image?.localFile)}
+          alt={title}
+          className="article__image"
+        />
+      ) : (
+        <img src={image?.url} alt={title} className="article__image" />
+      )}
       <div className="article__description">
         <h6>{`${title} ...`}</h6>
         <div>