SBIT-70: Release a PROD

src/components/Banner/Banner.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { Link } from "gatsby"
+import "./Banner.scss"
+
+const Banner = ({ data }) => {
+  const title = data?.title
+  const variant = data?.variant
+  const summary = data?.summary
+  const image = data?.image
+  const button = data?.button
+  const id = data?.id
+  return (
+    <div className={`banner ${variant}`} id={id}>
+      <div className="title container">
+        <div className="col-12 col-md-6">
+          <h1>{title}</h1>
+          <h3>{summary}</h3>
+          {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>
+
+      <div className="imagen col-12 col-md-6">
+        <img src={image?.url} alt={title} />
+      </div>
+    </div>
+  )
+}
+
+export default Banner

src/components/Banner/Banner.scss

@@ -0,0 +1,244 @@
+@import "../../styles/global.scss";
+.banner {
+  color: $primary;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: space-around;
+  align-items: center;
+  &.hero {
+    height: auto;
+    justify-content: end;
+    .button {
+      @include primaryBtn;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: inline-block;
+    }
+    .imagen {
+      padding: 2rem;
+      display: flex;
+      justify-content: center;
+      img {
+        width: 100%;
+        max-width: 540px;
+      }
+    }
+    .title {
+      h1 {
+        text-transform: uppercase;
+      }
+    }
+  }
+  &.top {
+    height: auto;
+    justify-content: end;
+    .button {
+      @include primaryBtn;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: inline-block;
+    }
+    .imagen {
+      display: flex;
+      justify-content: flex-end;
+      img {
+        width: 100%;
+        max-width: 450px;
+      }
+    }
+    .title {
+      padding-top: 2rem;
+      h1 {
+        text-transform: uppercase;
+        text-align: center;
+      }
+      h3 {
+        display: none;
+      }
+    }
+  }
+  &.diagonal {
+    height: auto;
+    justify-content: end;
+    background-color: #f2f0f7;
+    .button {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: inline-block;
+    }
+    .imagen {
+      display: flex;
+      justify-content: flex-end;
+      img {
+        width: 100%;
+      }
+    }
+    .title {
+      padding-top: 2rem;
+      h1 {
+        text-transform: uppercase;
+        color: #607ee7;
+        margin-bottom: 0;
+      }
+      h3 {
+        display: none;
+      }
+    }
+  }
+
+  &.diagonalReverse {
+    height: auto;
+    justify-content: end;
+    background-color: #f2f0f7;
+    .button {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      display: inline-block;
+    }
+    .imagen {
+      display: flex;
+      justify-content: flex-end;
+      img {
+        width: 100%;
+      }
+    }
+    .title {
+      padding-top: 2rem;
+      h1 {
+        text-transform: uppercase;
+        color: #607ee7;
+        margin-bottom: 0;
+      }
+      h3 {
+        display: none;
+      }
+    }
+  }
+
+  .gatsby-image-wrapper {
+    display: block;
+  }
+
+  @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;
+      align-items: center;
+      .imagen {
+        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 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+          text-align: left;
+        }
+        h3 {
+          font-weight: 400;
+          padding-right: 3rem;
+        }
+      }
+    }
+    &.diagonal {
+      height: 400px;
+      position: relative;
+      align-items: center;
+      .imagen {
+        height: 500px;
+        overflow: hidden;
+        padding: 0;
+        justify-content: flex-end;
+        img {
+          width: 100%;
+        }
+      }
+
+      .title {
+        position: absolute;
+        padding-top: 0;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        h1 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+        }
+        h3 {
+          font-weight: 400;
+          padding-right: 3rem;
+        }
+      }
+    }
+    &.diagonalReverse {
+      height: 400px;
+      position: relative;
+      align-items: center;
+      .imagen {
+        height: 500px;
+        overflow: hidden;
+        padding: 0;
+        justify-content: flex-end;
+        img {
+          width: 100%;
+        }
+      }
+
+      .title {
+        position: absolute;
+        padding-top: 0;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        h1 {
+          margin-bottom: 1rem;
+          padding-right: 3rem;
+        }
+        h3 {
+          font-weight: 400;
+          padding-right: 3rem;
+        }
+      }
+    }
+  }
+}

src/components/BannerList/Banner.scss

@@ -3,15 +3,31 @@
 .bannerList {
   color: $primary;
   .card_item {
-    p {
-      text-align: justify;
-      margin: 0 !important;
+    h4 {
+      margin: 0;
+    }
+    a {
+      color: inherit;
+      &:hover {
+        color: $secondary;
+      }
     }
     img {
+      margin: 0 10px 0 auto;
       width: 48px;
     }
   }
+  button {
+    margin-top: 10px;
+    @include primaryBtn;
+    align-self: baseline;
+    a {
+      color: inherit;
+    }
+  }
   &__title {
+    display: flex;
+    flex-direction: column;
     font-weight: 700;
     text-align: left;
   }
@@ -21,8 +37,37 @@
   .bannerList {
     .card_item {
       img {
-        width: 70px;
+        width: 80px;
       }
     }
+    &__buttonMobile{
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: $breakpoint-md) {
+  .bannerList {
+    &__buttonMobile{
+      margin-left: 1.5em;
+    }
+    &__title {
+      button {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  .bannerList {
+    .card_item {
+      img {
+        width: 80px;
+      }
+    }
+    &__buttonMobile{
+      display: none;
+    }
   }
 }