diff --git a/src/components/Banners/BannerActionCall.js b/src/components/Banners/BannerActionCall.js
new file mode 100644
index 00000000..625f4e08
--- /dev/null
+++ b/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
diff --git a/src/components/Banners/BannerActionCall.scss b/src/components/Banners/BannerActionCall.scss
new file mode 100644
index 00000000..fbb6566b
--- /dev/null
+++ b/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%);
+    }
+  }
+}
diff --git a/src/components/Banners/BannerBgImage.js b/src/components/Banners/BannerBgImage.js
new file mode 100644
index 00000000..0e3fd20a
--- /dev/null
+++ b/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
diff --git a/src/components/Banners/BannerBgImage.scss b/src/components/Banners/BannerBgImage.scss
new file mode 100644
index 00000000..af4a4689
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/components/Banners/BannerClientes.js b/src/components/Banners/BannerClientes.js
new file mode 100644
index 00000000..6b53de9b
--- /dev/null
+++ b/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
diff --git a/src/components/Banners/BannerISO.js b/src/components/Banners/BannerISO.js
new file mode 100644
index 00000000..4a77edf6
--- /dev/null
+++ b/src/components/Banners/BannerISO.js
@@ -0,0 +1,35 @@
+import React from "react"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import showdown from "showdown"
+import "./BannerISO.scss"
+
+const BannerISO = ({ banner }) => {
+
+  const { title, subtitle, image, imageDarkMode } = banner
+
+  const titles = subtitle
+  let converter = new showdown.Converter()
+  let post = titles
+  let html = converter.makeHtml(post)
+
+  const ReplaceHtml = () => {
+    return { __html: html }
+  }
+  return (
+    <div className="bannerISO">
+      <div className="bannerISO__row">
+        <div className="bannerISO__titleContainer ">
+          <h2>{title}</h2>
+          <div
+            dangerouslySetInnerHTML={ReplaceHtml()}
+            className="bannerISO__subtitle"
+          ></div>
+        </div>
+        <div className="bannerISO__image ">
+          <GatsbyImage image={getImage(image?.localFile)} alt={`img-${title}`} />
+        </div>
+      </div>
+    </div>
+  )
+}
+export default BannerISO
diff --git a/src/components/Banners/BannerISO.scss b/src/components/Banners/BannerISO.scss
new file mode 100644
index 00000000..5b998f3e
--- /dev/null
+++ b/src/components/Banners/BannerISO.scss
@@ -0,0 +1,98 @@
+@import "../../styles/global.scss";
+
+.bannerISO {
+  background-color: $secondary-container;
+  width: 100%;
+  min-height: 300px;
+  padding: 50px;
+  &__row {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    // padding: 40px 0;
+  }
+  &__titleContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    // padding-left: 350px;
+    h2 {
+      color: $white;
+      font-size: $large;
+      font-weight: $bold;
+      border-bottom: 4px solid $yellow;
+      padding-bottom: 15px;
+      text-align: center;
+    }
+    p {
+      color: $white;
+      font-size: $medium;
+      font-weight: $bold;
+      margin-bottom: 0;
+      padding-bottom: 35px;
+      text-align: center;
+      width: 60%;
+    }
+  }
+  &__subtitle {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .bannerISO {
+    flex-direction: row;
+    align-items: center;
+
+    &__row {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+    &__titleContainer {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+      // padding-left: 350px;
+      h2 {
+        border-bottom: none;
+      }
+      p {
+        border-bottom: 4px solid $yellow;
+        width: 100%;
+        padding-bottom: 15px;
+      }
+    }
+    &__subtitle {
+      display: flex;
+      justify-content: flex-start;
+    }
+    &__image {
+      margin-left: 100px;
+      // display: flex;
+      // justify-content: center;
+    }
+  }
+}
+@media screen and (min-width: 1200px) {
+  .bannerISO {
+    &__titleContainer {
+      margin-right: 200px;
+      h2 {
+        border-bottom: none;
+        font-size: $extra-large;
+      }
+      p {
+        font-size: $large;
+        border-bottom: 4px solid $yellow;
+      }
+    }
+  }
+}
diff --git a/src/components/Banners/BannerLogo.js b/src/components/Banners/BannerLogo.js
new file mode 100644
index 00000000..e0b35557
--- /dev/null
+++ b/src/components/Banners/BannerLogo.js
@@ -0,0 +1,49 @@
+import * as React from "react"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { BgImage } from "gbimage-bridge"
+
+import { useBanner } from "../../hooks/index"
+import { useTheme } from "../../context/themeContext"
+
+import "./BannerLogo.scss"
+
+const BannerLogo = ({ banner }) => {
+  const { theme } = useTheme()
+  const { bgImage, bgImageDarkMode, image, imageDarkMode, title } = banner
+
+  const imagen = getImage(bgImage?.localFile)
+  const logoImage = getImage(image?.localFile)
+  // Version Dark Mode
+  const imagenDM = getImage(bgImageDarkMode?.localFile)
+  const logoDM = getImage(imageDarkMode?.localFile)
+
+  return (
+    <>
+      {theme === "dark" && imagenDM && logoDM ? (
+        <BgImage image={imagenDM} className="BannerLogo__BgImage">
+          <div className="BannerLogo__Logo__Container">
+            <GatsbyImage image={logoDM} alt={`img-${title}`}></GatsbyImage>
+          </div>
+          <h1 className="BannerLogo__Title">{title}</h1>
+        </BgImage>
+      ) : (
+        <BgImage image={imagen} className="BannerLogo__BgImage">
+          <div className="BannerLogo__Logo__Container">
+            <GatsbyImage image={logoImage} alt={`img-${title}`}></GatsbyImage>
+          </div>
+          <h1 className="BannerLogo__Title">{title}</h1>
+        </BgImage>
+      )}
+{/* 
+      {title ? (
+        <div className="BannerLogo__summary">
+          <div className="container ">
+            <p className="BannerLogo__summary__txt">{title}</p>
+          </div>
+        </div>
+      ) : null} */}
+    </>
+  )
+}
+
+export default BannerLogo
diff --git a/src/components/Banners/BannerLogo.scss b/src/components/Banners/BannerLogo.scss
new file mode 100644
index 00000000..27cf01bc
--- /dev/null
+++ b/src/components/Banners/BannerLogo.scss
@@ -0,0 +1,110 @@
+@import "../../styles/global.scss";
+
+@keyframes slogan-underline {
+  0% {
+    left: 0;
+    width: 50%;
+    background: #ffe927;
+  }
+  25% {
+    left: 45%;
+    width: 55%;
+    background: #fafafa;
+  }
+  50% {
+    left: 25%;
+    width: 20%;
+    background: #ffe927;
+  }
+  75% {
+    left: 40%;
+    width: 40%;
+    background: #fafafa;
+  }
+  100% {
+    left: 0;
+    width: 50%;
+    background: #ffe927;
+  }
+}
+.BannerLogo__BgImage {
+  background-color: $primary-container;
+  width: 100%;
+  min-height: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.BannerLogo__Logo__Container {
+  max-width: 45%;
+  min-width: 15rem;
+}
+
+.BannerLogo__Title {
+  position: relative;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 1.2rem;
+  line-height: 16px;
+  padding: 1.8rem 0 0.5rem;
+  color: $primary;
+}
+.BannerLogo__Title::after {
+  position: absolute;
+  content: "";
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  width: 50%;
+  background: #ffe927;
+  animation: 3s infinite slogan-underline;
+}
+.BannerLogo__summary {
+  background-color: $blue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__txt {
+    color: $white;
+    font-size: 15px;
+    padding: 23px 16px;
+    font-weight: $normal;
+    line-height: 18px;
+    letter-spacing: 0em;
+    text-align: center;
+    margin: 20px 0 20px;
+  }
+}
+@media screen and (min-width: 767px) {
+  .BannerLogo__Title {
+    font-size: 3rem;
+    line-height: 20px;
+    padding: 2rem 0 0.75rem;
+  }
+  .BannerLogo__Title::after {
+    height: 3px;
+  }
+  .BannerLogo__summary {
+    &__txt {
+      font-size: $large;
+      line-height: 35px;
+      text-align: center;
+      padding: 4rem 6rem;
+      margin-top: 0;
+    }
+  }
+}
+@media screen and (min-width: 992px) {
+  .BannerLogo__Title {
+    font-size: 4rem;
+    line-height: 30px;
+    padding: 2rem 0 1rem;
+  }
+  .Home__Title::after {
+    height: 4px;
+  }
+}
diff --git a/src/components/Banners/BannerTop.js b/src/components/Banners/BannerTop.js
new file mode 100644
index 00000000..a2716b99
--- /dev/null
+++ b/src/components/Banners/BannerTop.js
@@ -0,0 +1,41 @@
+import React from "react"
+import { getImage } from "gatsby-plugin-image"
+import { BgImage } from "gbimage-bridge"
+import "./BannerTop.scss"
+
+import { useTheme } from "../../context/themeContext"
+
+const BannerTop = ({ banner }) => {
+  const { bgImage, bgImageDarkMode, image, title, summary } = banner
+  const { theme } = useTheme()
+
+  const imageBanner = getImage(bgImage?.localFile) || getImage(image?.localFile)
+  const imageDM = getImage(bgImageDarkMode?.localFile)
+
+  return (
+    <div className="banner">
+      {theme === "dark" && imageDM ? (
+        <BgImage image={imageDM} className="banner__bgImage">
+          <div className="banner__titleContainer">
+            <h1 className="banner__title">{title}</h1>
+          </div>
+        </BgImage>
+      ) : (
+        <BgImage image={imageBanner} className="banner__bgImage">
+          <div className="banner__titleContainer">
+            <h1 className="banner__title">{title}</h1>
+          </div>
+        </BgImage>
+      )}
+      {summary ? (
+        <div className="banner__summary">
+          <div className="container ">
+            <p className="banner__summary__txt">{summary}</p>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default BannerTop
diff --git a/src/components/Banners/BannerTop.scss b/src/components/Banners/BannerTop.scss
new file mode 100644
index 00000000..8607018d
--- /dev/null
+++ b/src/components/Banners/BannerTop.scss
@@ -0,0 +1,61 @@
+@import "../../styles/global.scss";
+
+.banner {
+  &__bgImage {
+    min-height: 60vh;
+    display: flex;
+    align-items: flex-end;
+  }
+  &__titleContainer {
+    background-color: rgba(36, 39, 42, 0.4);
+    padding: 27px 45px 28px 24px;
+    width: 100%;
+  }
+  &__title {
+    font-size: $medium;
+    color: $white;
+    font-weight: $max-bold;
+    margin: 0;
+  }
+  &__summary {
+    background-color: $secondary-container;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__txt {
+      color: $white;
+      font-size: $medium;
+      padding: 23px 16px;
+      font-weight: $normal;
+      line-height: 25px;
+      letter-spacing: 0em;
+      text-align: center;
+      margin: 20px 0 20px;
+      font-weight: bold;
+    }
+  }
+}
+
+@media (min-width: $breakpoint-md) {
+  .banner {
+    &__bgImage {
+      min-height: 600px;
+    }
+    &__titleContainer {
+      padding: 30px;
+    }
+    &__title {
+      font-size: $extra-large;
+    }
+    &__summary {
+      &__txt {
+        font-size: $large;
+        line-height: 35px;
+        text-align: center;
+        padding: 4rem 6rem;
+        margin-top: 0;
+      }
+    }
+  }
+}
diff --git a/src/components/index.js b/src/components/index.js
index 158174b6..76591434 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,8 +1,20 @@
+import Cards from "./Cards/Cards"
 import Seo from "./Seo/Seo"
+import BannerBgImage from "./Banners/BannerBgImage"
+import BannerLogo from "./Banners/BannerLogo"
+import BannerISO from "./Banners/BannerISO"
+import BannerClientes from "./Banners/BannerClientes"
+import BannerTop from "./Banners/BannerTop"
+import BannerActionCall from "./Banners/BannerActionCall"
 import CasesSection from "./CasesSection/CasesSection"
-
 export {
+  Cards,
   CasesSection,
   Seo,
- 
+  BannerBgImage,
+  BannerLogo,
+  BannerISO,
+  BannerClientes,
+  BannerTop,
+  BannerActionCall,
 }
diff --git a/src/schema/globalSeoSchema.js b/src/schema/globalSeoSchema.js
index 0bafefa7..074c4805 100644
--- a/src/schema/globalSeoSchema.js
+++ b/src/schema/globalSeoSchema.js
@@ -35,6 +35,41 @@ type StrapiGlobalSeo implements Node {
     pageDescription: String
     pageKeywords: String
   }
+
+
+type StrapiGlobalConfig implements Node {
+    id: ID!
+    parent: Node
+    children: [Node!]!
+    internal: Internal!
+    published_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    created_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    updated_at(
+      formatString: String
+      fromNow: Boolean
+      difference: String
+      locale: String
+    ): Date
+    script: [StrapiGlobalConfigScript]
+    strapiId: Int
+  }
+  
+  type StrapiGlobalConfigScript {
+    id: Int
+    name: String
+    enable: Boolean
+    src: String
+  }
 `
 module.exports = {
     value: globalSeoSchema,