SBIT-142: Release a PROD

src/components/Banner/Banner.js

@@ -26,54 +26,77 @@ const Banner = ({ data }) => {
     },
   }
 
+  const addButton = button &&
+    (button?.landing_page ? (
+      <Link to={`../${button.landing_page.slug}`} className="button">
+        {button.content}
+      </Link>
+    ) : (
+      <a
+        href={button.url}
+        target="_blank"
+        rel="noreferrer"
+        className="button"
+      >
+        {button.content}
+      </a>
+    ))
+
+  const showTitle = () => {
+    if (variant === "hero") {
+      return <h1>{title}</h1>
+    } else {
+      return <h2>{title}</h2>
+    }
+  }
+
   return (
     <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">
-                {button.content}
-              </Link>
-            ) : (
-              <a
-                href={button.url}
-                target="_blank"
-                rel="noreferrer"
-                className="button"
-              >
-                {button.content}
-              </a>
-            ))}
-        </div>
-      </div>
+      {variant === "background" ?
+        <div className="bgImage" style={{
+          backgroundImage: `url(${image?.url})`,
+        }}>
+          <div className="title-background">
+            <h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
+            {addButton}
+          </div>
+        </div> :
+        <>
+          <div className="title container-md">
+            <div className="col-12 col-lg-6">
+              {/* {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>} */}
+              {showTitle()}
+              <ReactMarkdown source={summary} className="banner-markdown" />
+              {addButton}
+            </div>
+          </div>
 
-      <div
-        className={`imagen col-12 ${variant === "diagonal" ? "col-md-8" : diagonalReverseState
-          } `}
-      >
-        {/* <img src={image?.url} alt={title} /> */}
+          <div
+            className={`imagen col-12 ${variant === "diagonal" ? "col-md-8" : diagonalReverseState
+              } `}
+          >
+            {/* <img src={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,
-            }}
-            />}
+            {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>
+        </>
+      }
+
     </div>
   )
 }

src/components/Banner/Banner.scss

@@ -6,6 +6,25 @@
   flex-direction: column-reverse;
   justify-content: space-around;
   align-items: center;
+
+  &.background {
+    .button {
+      @include primaryBtn;
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    .bgImage {
+      height: 320px;
+      width: 100%;
+    }
+
+    .title-background {
+      margin-top: 120px;
+      text-align: center;
+      padding: 0px 10px;
+    }
+  }
   &.hero {
     height: auto;
     justify-content: end;
@@ -227,6 +246,13 @@
   }
   @media screen and (min-width: $breakpoint-md) {
     align-items: flex-start;
+
+    &.background {
+      .title-background {
+        padding: 0px 150px;
+      }
+    }
+
     &.hero {
       .imagen {
         justify-content: flex-end;
@@ -371,6 +397,17 @@
   @media screen and (min-width: $breakpoint-lg) {
     flex-direction: row;
 
+    &.background {
+      .bgImage {
+        height: 400px;
+      }
+      .title-background {
+        h1 {
+          padding-bottom: 20px;
+        }
+      }
+    }
+
     &.hero {
       height: 600px;
       position: relative;
@@ -439,4 +476,23 @@
       }
     }
   }
+
+  @media screen and (min-width: $breakpoint-xl) {
+    &.background {
+      .title-background {
+        padding: 0px 350px;
+      }
+    }
+  }
+
+  @media screen and (min-width: 1560px) {
+    &.background {
+      .title-background {
+        padding: 0px 500px;
+        h1 {
+          padding-bottom: 35px;
+        }
+      }
+    }
+  }
 }