SBIT-67 fix

src/components/Banners/BannerActionCall.js

@@ -0,0 +1,24 @@
+import React from "react"
+import { Link } from "gatsby"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import "./BannerActionCall.scss"
+
+const BannerActionCall = ({ banner }) => {
+  const icon = getImage(banner?.image?.localFile)
+
+  return (
+    <div className="bannerActCall">
+      <div className="bannerActCall__logo">
+        <GatsbyImage image={icon} alt={banner.title} />
+      </div>
+      <div className="bannerActCall__description">
+        <h3 className="bannerActCall__title">{banner.title}</h3>
+        <Link to={`/${banner.link.pathTo}`} className="bannerActCall__link">
+          {banner.link.name}
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default BannerActionCall

src/components/Banners/BannerActionCall.scss

@@ -0,0 +1,75 @@
+@import "../../styles/global.scss";
+
+.bannerActCall {
+  background: linear-gradient(180deg, $primary-container 20%, $secondary-container 0);
+  padding: 30px 25px;
+  max-height: 235px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  margin-top: 65px;
+
+  &__description {
+    padding-top: 45px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: center;
+    max-width: 195px;
+  }
+  &__logo {
+    flex-basis: 60px;
+    padding-bottom: 30px;
+  }
+  &__title {
+    color: $white;
+    font-size: $medium;
+    line-height: 30px;
+    font-weight: $bold;
+    margin-bottom: 15px;
+    flex-basis: auto;
+    padding-left: 5px;
+    text-align: center;
+  }
+  &__link {
+    color: $white;
+    font-weight: $bold;
+    border-bottom: $bottom-yellow;
+    font-size: $small;
+    padding: 7px;
+    &:hover {
+      color: $white;
+      text-decoration: none;
+      border-color: rgb(255, 244, 179);
+    }
+  }
+}
+
+@media (min-width: $breakpoint-md) {
+  .bannerActCall {
+    padding: 45px 65px;
+    max-height: 600px;
+    background: linear-gradient(180deg, $primary-container 35%, $secondary-container 0);
+    &__title {
+      color: $white;
+      font-size: $second-large;
+      line-height: 55px;
+      margin-left: 5px;
+    }
+    &__link {
+      font-size: $large;
+    }
+    &__description {
+      padding-top: 20px;
+      padding-bottom: 20px;
+      max-width: 500px;
+      text-align: center;
+      margin-top: 7rem;
+    }
+    &__logo {
+      flex-basis: 110px;
+      padding-bottom: 65px;
+      //   transform: translateY(-10%);
+    }
+  }
+}

src/components/Banners/BannerBgImage.js

@@ -0,0 +1,69 @@
+import React from "react"
+import { Link } from "gatsby"
+import { getImage } from "gatsby-plugin-image"
+import { BgImage } from "gbimage-bridge"
+import showdown from "showdown"
+import "./BannerBgImage.scss"
+
+import { useTheme } from "../../context/themeContext"
+
+const BannerBgImage = ({ banner }) => {
+
+  const { theme } = useTheme()
+
+  const { bgImage, bgImageDarkMode, link, title } = banner
+
+  const titles = title
+  let converter = new showdown.Converter()
+  let post = titles
+  let html = converter.makeHtml(post)
+
+  const ReplaceHtml = () => {
+    return { __html: html }
+  }
+
+  const imagen = getImage(bgImage?.localFile)
+  const imagenDM = getImage(bgImageDarkMode?.localFile)
+
+  return (
+    <div className="bannerBgImage">
+      {banner.bgImage ? (
+        <BgImage
+          image={theme === "dark" && imagenDM ? imagenDM : imagen}
+          className="bannerBgImage__bgImage"
+        >
+          <div className="bannerBgImage__titleContainer">
+            <div
+              dangerouslySetInnerHTML={ReplaceHtml()}
+              className="col-12  bannerBgImage__title"
+            ></div>
+            <Link to={`/${link?.pathTo}`} className="bannerBgImage__link ">
+              {link?.name}
+            </Link>
+          </div>
+        </BgImage>
+      ) : (
+        <div className="bannerBgColor__container">
+          <div className="bannerBgColor__titleContainer">
+            <div
+              dangerouslySetInnerHTML={ReplaceHtml()}
+              className="col-12  bannerBgColor__title"
+            ></div>
+            <Link to={`/${link.pathTo}`} className="bannerBgColor__link ">
+              {link.name}
+            </Link>
+          </div>
+        </div>
+      )}
+      {/* {summary ? (
+        <div className="bannerBgImage__summary">
+          <div className="container ">
+            <p className="bannerBgImage__summary__txt">{summary}</p>
+          </div>
+        </div>
+      ) : null} */}
+    </div>
+  )
+}
+
+export default BannerBgImage

src/components/Banners/BannerBgImage.scss

@@ -0,0 +1,160 @@
+@import "../../styles/global.scss";
+
+.bannerBgImage {
+  &__bgImage {
+    min-height: 60vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $primary-container;
+  }
+  &__titleContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  &__title {
+    margin-bottom: 30px;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    span,
+    p {
+      font-size: $large;
+      color: $blue;
+      font-weight: $max-bold;
+      margin-bottom: 0px;
+      text-align: center;
+    }
+
+    h1 span,
+    h2 span,
+    h3 span,
+    h4 span,
+    h5 span,
+    h6 span,
+    p span {
+      background-color: $blue;
+      display: inline-block;
+      transform: skew(-15deg);
+    }
+    h1 span p,
+    h2 span p,
+    h3 span p,
+    h4 span p,
+    h5 span p,
+    h6 span p,
+    p span p {
+      color: $primary-container;
+      padding: 5px 20px;
+      display: inline-block;
+      transform: skew(15deg);
+    }
+  }
+  &__link {
+    color: $blue;
+    font-size: $medium;
+    font-weight: $max-bold;
+    border-bottom: 4px solid $yellow;
+    margin-bottom: 0;
+    &:hover {
+      text-decoration: none;
+      color: $blue;
+    }
+  }
+}
+.bannerBgColor {
+  &__container {
+    min-height: 60vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $secondary-container
+  }
+  &__titleContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  &__title {
+    margin-bottom: 30px;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    span,
+    p {
+      font-size: $large;
+      color: white;
+      font-weight: $max-bold;
+      margin-bottom: 10px;
+      text-align: center;
+    }
+
+    h1 span,
+    h2 span,
+    h3 span,
+    h4 span,
+    h5 span,
+    h6 span,
+    p span {
+      background-color: $white;
+      padding: 0px 30px;
+      display: inline-block;
+      transform: skew(-25deg);
+    }
+    h1 span p,
+    h2 span p,
+    h3 span p,
+    h4 span p,
+    h5 span p,
+    h6 span p,
+    p span p {
+      color: $secondary-container;
+      padding: 0 15px;
+      display: inline-block;
+      transform: skew(25deg);
+      margin-bottom: 0;
+    }
+  }
+  &__link {
+    color: $white;
+    font-size: $medium;
+    font-weight: $max-bold;
+    border-bottom: 4px solid $yellow;
+    margin-bottom: 0;
+    &:hover {
+      text-decoration: none;
+      color: $white;
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .bannerBgImage,
+  .bannerBgColor {
+    &__title {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      span,
+      p {
+        font-size: $extra-large;
+      }
+    }
+
+    &__link {
+      font-size: $large;
+    }
+  }
+}

src/components/Banners/BannerClientes.js

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { useBanner } from "../../hooks/index"
+import showdown from "showdown"
+// import "./BannerISO.scss"
+
+const BannerClientes = ({ banner, title }) => {
+  const dataBanner = useBanner()
+
+  const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find(
+    ban => ban.strapiId === banner.id
+  )
+  const { summary } = bannerSelected
+
+  const titles = summary
+  let converter = new showdown.Converter()
+  let post = titles
+  let html = converter.makeHtml(post)
+
+  const ReplaceHtml = () => {
+    return { __html: html }
+  }
+  return (
+    <div className="banner">
+      <div className="bannerISO__row">
+        <div className="banner__titleContainer ">
+          <h2>{title}</h2>
+          <div
+            dangerouslySetInnerHTML={ReplaceHtml()}
+            className="banner__subtitle"
+          ></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default BannerClientes