diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
new file mode 100644
index 00000000..4fb009ab
--- /dev/null
+++ b/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
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
new file mode 100644
index 00000000..a06f26ca
--- /dev/null
+++ b/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;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss
index 27ed8d1d..4777f4ba 100644
--- a/src/components/BannerList/Banner.scss
+++ b/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;
+    }
   }
 }
diff --git a/src/components/BannerList/BannerLis.js b/src/components/BannerList/BannerLis.js
deleted file mode 100644
index 0d93afed..00000000
--- a/src/components/BannerList/BannerLis.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react"
-import "./Banner.scss"
-
-export default function BannerLis({ data }) {
-  const title = data?.title
-  const image = data?.Card[0]?.icon?.url
-
-  const cards = data?.Card.map(item => {
-    return (
-      <div className="card_item d-flex mb-4">
-        <div className="card_item col-3 mt-3 mt-xl-1">
-          <img class="mx-auto d-block" src={image} placeholder="blurred" />
-        </div>
-        <div className="card_item col-9 ps-2 pe-2">
-          <h4>{item.title}</h4>
-          <p>{item.description}</p>
-        </div>
-      </div>
-    )
-  })
-
-  return (
-    <div
-      className="container my-3 py-3"
-      id={data.strapi_component + "-" + data.id}
-    >
-      <div className="bannerList d-md-flex flex-row-reverse">
-        <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center ps-4 mb-4">
-          {title}
-        </h1>
-        <div className="bannerList__cards col-md-6 col-xl-6 pe-5">{cards}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/components/BannerList/BannerList.js b/src/components/BannerList/BannerList.js
new file mode 100644
index 00000000..ff1db0eb
--- /dev/null
+++ b/src/components/BannerList/BannerList.js
@@ -0,0 +1,58 @@
+import { Link } from "gatsby"
+import React from "react"
+import "./Banner.scss"
+
+export default function BannerList({ data }) {
+  const title = data?.title
+  const cards = data?.Card.map(item => {
+    return (
+      <div className="card_item d-flex mb-4">
+        {item.icon && (
+          <div className="card_item col-3">
+            <img class="d-block" src={item.icon?.url} placeholder="blurred" />
+          </div>
+        )}
+        <div
+          style={!item.icon ? { marginLeft: "2em" } : {}}
+          className="card_item col-9 ps-2 pe-2"
+        >
+          {item.landing_page ? (
+            <Link to={"/" + item.landing_page?.slug}>
+              <h4>{item.title}</h4>
+              <p>{item.description}</p>
+            </Link>
+          ) : (
+            <>
+              <h4>{item.title}</h4>
+              <p>{item.description}</p>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  })
+
+  return (
+    <div className="container py-5" id={data.strapi_component + "-" + data.id}>
+      <div className="bannerList d-md-flex flex-row">
+        <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center ps-4 mb-4">
+          {title}
+          {data.contactForm && (
+            <button>
+              <a href={"#" + data.concactFormAnchor}>Contactanos</a>
+            </button>
+          )}
+        </h1>
+        <div className="bannerList__cards col-md-6 col-xl-6 pe-5">{cards}
+        
+        </div>
+        {data.contactForm && (
+            <button className="bannerList__buttonMobile">
+              <a href={"#" + data.concactFormAnchor}>Contactanos</a>
+            </button>
+          )}
+        
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Footer/ContactData/contactData.js b/src/components/Footer/ContactData/contactData.js
index 2b78cd4e..a7485e37 100644
--- a/src/components/Footer/ContactData/contactData.js
+++ b/src/components/Footer/ContactData/contactData.js
@@ -5,7 +5,7 @@ import "./contactData.scss";
 
 export default function ContactData() {
   const data = useFooter();
-  const dataFooter = data?.allStrapiLayout?.nodes[0].footer;
+  const dataFooter = data?.allStrapiLayout?.nodes[0]?.footer;
 
   const contact = dataFooter?.contact?.iconText.map((item) => {
     return (
diff --git a/src/components/Footer/Subscription/subscription.js b/src/components/Footer/Subscription/subscription.js
index a353f7e2..fb73274f 100644
--- a/src/components/Footer/Subscription/subscription.js
+++ b/src/components/Footer/Subscription/subscription.js
@@ -4,11 +4,11 @@ import './subscription.scss';
 
 export default function Subscription() {
     const data = useFooter();
-    const dataSubscription = data?.allStrapiLayout?.nodes[0].footer.subscription;
+    const dataSubscription = data?.allStrapiLayout?.nodes[0]?.footer?.subscription;
 
     return (
         <div className="ContactData__Item">
-            <h6 className="titleSubscription">{dataSubscription.title}</h6>
+            <h6 className="titleSubscription">{dataSubscription?.title}</h6>
             <form>
                 <div className="ContactData__Form d-flex flex-md-column justify-content-between">
                     <label>
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
new file mode 100644
index 00000000..298a183e
--- /dev/null
+++ b/src/components/Form/Form.js
@@ -0,0 +1,84 @@
+import React, { useEffect } from "react"
+import MarkdownView from "react-showdown"
+import HubspotForm from "react-hubspot-form"
+import "./Form.scss"
+
+const Form = ({ location, data }) => {
+  const title = data?.title
+  const content = data?.content
+  const anchor = data?.anchor
+  const portalId = data?.portalId
+  const formId = data?.formId
+  const image = data?.image
+
+  useEffect(() => {
+    window.addEventListener("message", handler)
+    return () => {
+      window.removeEventListener("message", handler)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function handler(event) {
+    if (
+      event.origin === "https://forms.hsforms.com" ||
+      event.origin === "https://site.dev.bitlogic.io" ||
+      event.origin === "https://www.bitlogic.io"||
+      event.origin === "https://preprod.d2mi1do1cquuwf.amplifyapp.com"
+    ) {
+      if (
+        event.data.type === "hsFormCallback" &&
+        event.data.eventName === "onFormReady"
+      ) {
+        const hsFormId = "hsForm_" + formId
+        const formData = document?.getElementById("hs-form-iframe-0")
+          ?.contentWindow?.document?.forms[hsFormId]
+        if (formData) {
+          setInputValue(formData, "servicio_origen", location.pathname)
+        }
+      }
+    }
+    console.log(event.origin, "origin")
+  }
+
+  const jqueryChange = elem => {
+    var event = new Event("HTMLEvents", { bubbles: true, cancelable: false })
+    elem.dispatchEvent(event)
+  }
+
+  const setInputValue = (form, inputName, value) => {
+    const input = form?.[inputName]
+    if (input) {
+      input.value = value
+      jqueryChange(input)
+    }
+  }
+
+  return (
+    <div id={anchor} className="form">
+      <div className="container d-flex px-lg-2 flex-wrap">
+        <div className="col-12 col-md-6 px-4 ps-md-0 pe-md-5">
+          {title && (
+            <h2 className="title text-center text-md-start">{title}</h2>
+          )}
+          {content && (
+            <MarkdownView
+              markdown={content}
+              className="form__content text-center text-md-start"
+            />
+          )}
+          <div className="form__img mt-md-5 text-center text-md-start">
+            <img src={image?.url} alt="hero" />
+          </div>
+        </div>
+        <div className="col-12 col-md-6">
+          <div className="hubspot-form-wrapper">
+            <HubspotForm portalId={portalId} formId={formId} css="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Form
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
new file mode 100644
index 00000000..94f4a5e9
--- /dev/null
+++ b/src/components/Form/Form.scss
@@ -0,0 +1,45 @@
+@import "../../styles/global.scss";
+
+.form {
+  color: $primary;
+  padding: 5rem 0;
+  .title {
+    text-transform: uppercase;
+  }
+  .hubspot-form-wrapper {
+    background-color: $bg-form;
+    border-radius: 10px;
+    padding: 2rem;
+    padding-bottom: 1rem;
+    min-height: 540px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    > div{
+      width: 100%;
+    }
+  }
+  &__img {
+    padding: 2rem 1rem;
+    img {
+      max-width: 250px;
+      width: 100%;
+    }
+  }
+  &__content {
+    p {
+      font-weight: $bold;
+      font-size: 28px;
+    }
+  }
+}
+@media screen and (min-width: $breakpoint-lg) {
+  .form {
+    &__content {
+      p {
+        font-size: 36px;
+      }
+    }
+  }
+}
diff --git a/src/components/Hero/Hero.scss b/src/components/Hero/Hero.scss
index 2e1cdee6..56ecba87 100644
--- a/src/components/Hero/Hero.scss
+++ b/src/components/Hero/Hero.scss
@@ -1,47 +1,47 @@
-@import "../../styles/global.scss";
-.hero {
-  color: $primary;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
-  gap: 3em;
-  button {
-    @include primaryBtn;
-    margin-top: 20px;
-  }
+// @import "../../styles/global.scss";
+// .hero {
+//   color: $primary;
+//   overflow: hidden;
+//   display: flex;
+//   flex-direction: row;
+//   justify-content: space-around;
+//   align-items: center;
+//   gap: 3em;
+//   button {
+//     @include primaryBtn;
+//     margin-top: 20px;
+//   }
 
-  .gatsby-image-wrapper {
-    display: block;
-  }
+//   .gatsby-image-wrapper {
+//     display: block;
+//   }
 
-  &-title{
-    padding: 0 0 0 10vw;
-    flex-basis: 45%;
-    h3{
-      font-weight: 400;
-    }
-  }
+//   &-title{
+//     padding: 0 0 0 10vw;
+//     flex-basis: 45%;
+//     h3{
+//       font-weight: 400;
+//     }
+//   }
 
-  &-img{
-    max-height: 80vh;
-    overflow: hidden;
-    flex-basis: 55%;
-    img{
-      width: 100%;
-    }
-  }
+//   &-img{
+//     max-height: 80vh;
+//     overflow: hidden;
+//     flex-basis: 55%;
+//     img{
+//       width: 100%;
+//     }
+//   }
 
-  @media screen and (max-width: $breakpoint-xl) {
-    flex-direction: column-reverse;
-    &-img{
-      flex-basis: 100%;
-    }
-    &-title{
-      padding: 0 10vw;
-      flex-basis: 100%;
-    }
-  }
+//   @media screen and (max-width: $breakpoint-xl) {
+//     flex-direction: column-reverse;
+//     &-img{
+//       flex-basis: 100%;
+//     }
+//     &-title{
+//       padding: 0 10vw;
+//       flex-basis: 100%;
+//     }
+//   }
 
-}
+// }
diff --git a/src/components/HomePage/HomeContainer/HomeContainer.js b/src/components/HomePage/HomeContainer/HomeContainer.js
index 1dc38ed5..f94b98be 100644
--- a/src/components/HomePage/HomeContainer/HomeContainer.js
+++ b/src/components/HomePage/HomeContainer/HomeContainer.js
@@ -9,13 +9,13 @@ import "./HomeContainer.scss"
 import AnimatedTransitionContinous from "../../animatedTransitionContinous/AnimatedTransitionContinous"
 import Quote from "../../quote/Quote"
 import VideoBackground from "../../videoBackground/VideoBackground"
-import Hero from "../../Hero/Hero"
+import Banner from "../../Banner/Banner"
 import DualSection from "../../DualSection/DualSection"
 import OneSection from "../../DualSection/OneSection"
 import Text from "../../Text/Text"
-
+import BannerList from "../../BannerList/BannerList"
 const bodyComponents = {
-  "home.hero": data => <Hero data={data} />,
+  "components.banner": data => <Banner data={data} />,
   "home.transition": data => <AnimatedTransitionContinous data={data} />,
   "home.quote": data => <Quote data={data} />,
   "home.video-background": data => <VideoBackground data={data} />,
@@ -26,10 +26,12 @@ const bodyComponents = {
     ) : (
       <DualSection data={data} />
     ),
+  "components.banner-list": data => <BannerList data={data} />,
 }
 
 const Home = ({ location }) => {
   const data = useHomePage()
+  
   const { pageTitle, pageDescription, pageKeywords } =
     data?.allStrapiHome?.nodes[0]?.pageMetadata || {}
 
@@ -45,7 +47,9 @@ const Home = ({ location }) => {
 
       {/* Dynamic zone */}
       {data.allStrapiHome.nodes[0].body.map(component =>
-        bodyComponents[component.strapi_component] ? bodyComponents[component.strapi_component](component) : null
+        bodyComponents[component.strapi_component]
+          ? bodyComponents[component.strapi_component](component)
+          : null
       )}
     </Layout>
   )
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
index fa0ea5a3..799b40d2 100644
--- a/src/components/Text/Text.js
+++ b/src/components/Text/Text.js
@@ -3,32 +3,32 @@ import MarkdownView from "react-showdown"
 import "./Text.scss"
 
 export default function Text({ data }) {
-    const title = data?.title
-    const description = data?.text
-    const bgImage = data?.backgroundImage?.url
+  const title = data?.title
+  const description = data?.text
+  const bgImage = data?.backgroundImage?.url
 
-    return (
-        <div className="container-text">
-            {title !== "" && title !== undefined && title !== null ? (
-                <div className="text d-flex flex-column flex-md-row">
-                    <div
-                        className="title"
-                        style={{
-                            backgroundImage: `url(${bgImage})`,
-                        }}
-                    >
-                        <h2 className="titleText pt-5 ps-4 pe-md-3">{title}</h2>
-                    </div>
-                    <MarkdownView
-                        markdown={description}
-                        className="description ps-4 px-lg-5"
-                    />
-                </div>
-            ) : (
-                <MarkdownView markdown={description} className="px-lg-5" id="descriptionText" style={{
-                    backgroundImage: `url(${bgImage})`,
-                }} />
-            )}
+  return (
+    <div className="container-text" style={{
+      backgroundImage: `url("http://localhost:1337/uploads/Titulo_Texto_61d6e776fb.png")`,
+    }}>
+      {title !== "" && title !== undefined && title !== null ? (
+        <div className="text d-flex flex-column flex-md-row">
+          <div className="title">
+            <h2 className="titleText pt-5 px-3 pb-3">{title}</h2>
+          </div>
+          <MarkdownView
+            markdown={description}
+            className="description"
+          />
         </div>
-    )
+      ) : (
+        <div className="container-markdown">
+          <MarkdownView
+            markdown={description}
+            className="notTitle mx-lg-5"
+          />
+        </div>
+      )}
+    </div>
+  )
 }
diff --git a/src/components/Text/Text.scss b/src/components/Text/Text.scss
index f5fd77a4..7500cc02 100644
--- a/src/components/Text/Text.scss
+++ b/src/components/Text/Text.scss
@@ -1,71 +1,68 @@
 @import "../../styles/global.scss";
 
-.text {
-  margin-bottom: 50px;
-  .title {
-    text-transform: uppercase;
-    width: 100%;
-    min-height: 150px;
-    max-height: 65vh;
-    padding-top: 55px;
-  }
-  .description {
-    min-height: 60vh;
-    padding-top: 40px;
-  }
-}
-
-@media screen and (min-width: $breakpoint-md) {
-  .text {
-    .description {
-      padding-top: 55px;
-    }
-  }
-}
-
-@media screen and (min-width: $breakpoint-xl) {
+.container-text {
   .text {
+    color: $primary;
     .title {
-      max-height: 60vh;
-
+      width: 100%;
       .titleText {
-        max-width: 30vw;
-        padding-left: 5rem !important;
+        margin: 0;
+        text-transform: uppercase;
+        margin-top: 2rem;
       }
     }
     .description {
-      padding-top: 70px;
-      max-width: 60vw;
-      max-height: 55vh;
-      padding-right: 10rem !important;
+      background-color: $primary-container;
+      padding-bottom: 3rem;
+      p:first-child {
+        padding-top: 1rem;
+      }
+      p {
+        margin-bottom: 0;
+        padding: 0rem 1rem;
+      }
     }
   }
-}
-
-#descriptionText {
-  height: 70vh;
-  margin-bottom: 50px;
-  display: flex;
-  align-items: center;
+  .container-markdown {
+    padding-top: 5rem;
+    padding-bottom: 3rem;
 
-  p {
-    background-color: #ffffff;
-    padding: 2em 1em;
-    margin: 1em 1em 0;
-    border-radius: 20px;
+    .notTitle {
+      color: $primary;
+      border-radius: 20px;
+      background-color: $primary-container;
+      padding: 1rem;
+      margin: 1rem;
+      p {
+        margin-bottom: 0;
+      }
+    }
   }
 }
 
 @media screen and (min-width: $breakpoint-md) {
-  #descriptionText {
-    max-height: 60vh;
+  .container-text {
+    .text {
+      .title {
+        padding-top: 4rem;
+      }
+      .description {
+        p:first-child {
+          padding-top: 4rem;
+        }
+      }
+    }
   }
 }
-
 @media screen and (min-width: $breakpoint-xl) {
-  #descriptionText {
-    p {
-      padding: 3em 3em;
+  .container-text {
+    .text {
+      .description {
+        p {
+          padding: 0.5rem 2.5rem;
+          padding-right: 7rem;
+        }
+      }
     }
   }
 }
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 719e0d0f..2ac12e3b 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -37,7 +37,7 @@ const ListItem = ({ index, onClick, data }) => {
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent">
             <div className="listItem-more">
-              <h4>{data.title}</h4>
+              <h5>{data.title}</h5>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -69,7 +69,7 @@ const ExpandedListItem = ({ index, data, isFirst }) => {
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
-              <p></p>
+              <h5>{data.title}</h5>
             </div>
             <Flipped
               flipId={`avatar-${index}`}
@@ -78,15 +78,14 @@ const ExpandedListItem = ({ index, data, isFirst }) => {
             >
               <img alt="" src={data.image?.url} className="avatar-expanded" />
             </Flipped>
-            <div
-            
-              className={"additional-content "}
-            >
-              <div style={isFirst ? {opacity: "1"} : {}}>
+            <div className={"additional-content "}>
+              <div style={isFirst ? { opacity: "1" } : {}}>
                 <h4>{data.title}</h4>
-                <MarkdownView markdown={data.text} />
+                <div className="additional-content-markdown">
+                  <MarkdownView markdown={data.text} />
+                </div>
                 {data.landing_page && (
-                  <Link to={"/" + data.landing_page.slug}>Ver más</Link>
+                  <Link to={"/" + data.landing_page?.slug}>Ver más</Link>
                 )}
               </div>
             </div>
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index 5a31bae3..6011d3be 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -44,7 +44,7 @@
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {
-    flex: 0 1 calc(calc(100% / 2) - 10px);
+    flex: 0 1 calc(calc(100% / 3) - 10px);
   }
 
   @media screen and (max-width: 890px) {
@@ -54,10 +54,6 @@
   &-expanded {
     @extend .listItem;
     flex-basis: 100%;
-
-    @media screen and (max-width: 890px) {
-      height: 800px;
-    }
   }
 }
 
@@ -66,7 +62,7 @@
   flex-direction: row;
   height: 100%;
   position: relative;
-  @media screen and (max-width: 890px) {
+  @media screen and (max-width: $breakpoint-xl) {
     flex-direction: column;
     align-items: unset;
   }
@@ -85,13 +81,21 @@
 
   &-expanded {
     @extend .avatar;
+    box-shadow: 0px 4px 4px 0px #00000040;
+
     flex-grow: 0;
     margin-right: 0;
     min-width: 33%;
     max-width: 33%;
-    @media screen and (max-width: 1500px) {
-      min-width: 50%;
-      max-width: 50%;
+    @media screen and (max-width: $breakpoint-xl) {
+      min-width: 100%;
+      max-width: 100%;
+      height: 400px;
+      object-fit: cover;
+    }
+    @media screen and (max-width: $breakpoint-md) {
+      height: unset;
+      object-fit: unset;
     }
   }
 }
@@ -107,6 +111,7 @@
 }
 
 .additional-content {
+  box-shadow: 0px 4px 4px 0px #00000040;
   width: 100%;
   overflow: hidden;
   @media screen and (max-width: 890px) {
@@ -114,7 +119,8 @@
   }
 }
 
-.listItem-more{
+
+.listItem-more {
   position: absolute;
   inset: 0 0 20px 20px;
   display: flex;
@@ -123,14 +129,17 @@
   transition: opacity 200ms ease;
   opacity: 1;
   color: black;
-  p{
+  width: 300px;
+  p {
     padding: 0;
     margin: 0;
   }
-  &-expanded{
+  &-expanded {
     @extend .listItem-more;
-    opacity: 0;
     padding: 0 !important;
+    @media screen and (max-width: $breakpoint-xl) {
+      display: none;
+    }
   }
 }
 
@@ -139,18 +148,16 @@
   border-radius: 3px;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  p {
-    max-height: 10vw;
+  &-markdown{
+    height: 80%;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
-  a{
+  a {
     font-weight: 600;
     color: $secondary;
     text-decoration: underline;
     margin: auto 0 10px 10px;
-  } 
+  }
   h4 {
     text-align: left;
   }
diff --git a/src/components/index.js b/src/components/index.js
index 203eeac6..7723068c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,14 +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 BannerHead from "./BannerHead/BannerHead"
 import CasesSection from "./CasesSection/CasesSection"
 import CasesList from "./CasesSection/CasesList"
 import LogosSection from "./LogosSection/logosSection"
+import Form from "./Form/Form"
+import Banner from "./Banner/Banner"
+import BannerList from "./BannerList/BannerList"
+import ExpandGrid from "./expandGrid/ExpandGrid"
+import Catsone from "./Catsone/catsone"
+import Text from "./Text/Text"
+import Quote from "./quote/Quote"
+import OneSection from "./DualSection/OneSection"
+import DualSection from "./DualSection/DualSection"
+import AnimatedTransitionContinous from "./animatedTransitionContinous/AnimatedTransitionContinous"
+import BannerTop from "./Banners/BannerTop"
+import BannerHead from "./BannerHead/BannerHead";
 
 
 export {
@@ -16,11 +22,17 @@ export {
   CasesList,
   CasesSection,
   Seo,
-  BannerBgImage,
-  BannerLogo,
-  BannerISO,
-  BannerClientes,
-  BannerTop,
-  BannerHead,
   LogosSection,
+  Form,
+  Banner,
+  BannerList,
+  ExpandGrid,
+  Catsone,
+  Text,
+  Quote,
+  OneSection,
+  DualSection,
+  AnimatedTransitionContinous,
+  BannerTop,
+  BannerHead
 }
diff --git a/src/components/videoBackground/VideoBackground.js b/src/components/videoBackground/VideoBackground.js
index 010f9190..39f6b500 100644
--- a/src/components/videoBackground/VideoBackground.js
+++ b/src/components/videoBackground/VideoBackground.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react"
 import "./videoBackground.scss"
 const VideoBackground = ({
-  data: { video, description, button, strapi_component, id },
+  data: { video, description, button, strapi_component, id, backgroundImage },
 }) => {
   const [isVideoPause, setIsVideoPause] = useState(false)
   const videoRef = useRef(null)
@@ -33,27 +33,34 @@ const VideoBackground = ({
 
   return (
     <div
-      className="container-md my-3 px-0 px-lg-3"
-      id={strapi_component + "-" + id}
+      className="pt-5 py-3"
+      style={{
+        backgroundImage: `url(${backgroundImage?.url})`,
+      }}
     >
-      <section className="videoBackground my-md-3">
-        <video
-          ref={videoRef}
-          muted
-          autoPlay
-          loop
-          src={video.url}
-          type="video/mp4"
-          controls={false}
-          onClick={pausePlay}
-        />
-        <div className="videoBackground-card">
-          <h4>{description}</h4>
-          <a href={button.url} target="_blank" rel="noreferrer">
-            <button className="px-4">{button.content}</button>
-          </a>
-        </div>
-      </section>
+      <div
+        className="container px-md-0 px-lg-3 videoBackground-container"
+        id={strapi_component + "-" + id}
+      >
+        <section className="videoBackground">
+          <video
+            ref={videoRef}
+            muted
+            autoPlay
+            loop
+            src={video.url}
+            type="video/mp4"
+            controls={false}
+            onClick={pausePlay}
+          />
+          <div className="videoBackground-card">
+            <h5>{description}</h5>
+            <a href={button.url} target="_blank" rel="noreferrer">
+              <button className="px-4">{button.content}</button>
+            </a>
+          </div>
+        </section>
+      </div>
     </div>
   )
 }
diff --git a/src/components/videoBackground/videoBackground.scss b/src/components/videoBackground/videoBackground.scss
index 2d51613f..f5e54a22 100644
--- a/src/components/videoBackground/videoBackground.scss
+++ b/src/components/videoBackground/videoBackground.scss
@@ -1,57 +1,107 @@
 @import "../../styles/global.scss";
 
 .videoBackground {
-  // width: calc(100% - 6em);
-  height: 80vh;
-  position: relative;
-  z-index: 3;
-  display: flex;
-  // margin: 3em;
+  &-container {
+    margin-top: 50px;
+    margin-bottom: 50px;
+  }
   video {
-    top: 0;
-    position: absolute;
     width: 100%;
-    height: 100%;
+    height: 250px;
     object-fit: cover;
-    z-index: -1;
-    cursor: pointer;
-    // border-radius: 20px;
+    display: block;
+    border-radius: 5px;
   }
   &-card {
-    z-index: 4;
-    align-self: flex-end;
-    flex-basis: 1;
-    max-width: 600px;
+    width: 100%;
     backdrop-filter: blur(14px);
     color: white;
     border-radius: 5px;
     background: #e8e8e8c5;
     box-shadow: 0px 0px 3px #00000044;
-    margin: 1em;
-    padding: 2em;
-
-    h4 {
-      color: $grey;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
+    word-wrap: break-all;
+    padding: 15px;
+  }
+  h5 {
+    width: 100%;
+    color: $grey;
+   
+  }
+  button {
+    @include secondaryBtn;
+  }
+}
+
+
+
+
+
+@media screen and (min-width: $breakpoint-md) {
+
+  .videoBackground {
+    // width: calc(100% - 6em);
+    height: 550px;
+    position: relative;
+    z-index: 3;
+    display: flex;
+    // margin: 3em;
+    &-container {
+      margin-top: 80px;
+      margin-bottom: 80px;
+    }
+    video {
+      top: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: -1;
+      cursor: pointer;
+      // border-radius: 20px;
     }
-    button {
-      background: $grey;
-      border: 1px solid white;
+    &-card {
+      z-index: 4;
+      align-self: flex-end;
+      flex-basis: 1;
+      max-width: 700px;
+      backdrop-filter: blur(14px);
       color: white;
-      font-weight: 500;
-      border-radius: 3px;
-      padding: 0.6em 3em;
+      border-radius: 5px;
+      background: #e8e8e8c5;
+      box-shadow: 0px 0px 3px #00000044;
+      margin: 2em;
+      padding: 2em;
+  
+      h5 {
+        color: $grey;
+      }
+      button {
+        @include secondaryBtn;
+      }
     }
   }
 }
 
-@media screen and (min-width: $breakpoint-md) {
+
+@media screen and (min-width: $breakpoint-lg) {
+
   .videoBackground {
-    video {
-      border-radius: 20px;
+    height: 80vh;
+    &-container {
+      margin-top: 130px;
+      margin-bottom: 80px;
     }
   }
 }
+
+// @media screen and (max-width: $breakpoint-md) {
+//   .videoBackground {
+//     height: 500px;
+//     video {
+//       height: 80%;
+//     }
+//     &-card {
+//       height: 20%;
+//     }
+//   }
+// }
diff --git a/src/context/themeContext.js b/src/context/themeContext.js
index 55fee4e7..5ecc8f3c 100644
--- a/src/context/themeContext.js
+++ b/src/context/themeContext.js
@@ -8,13 +8,14 @@ const themes = {
     "--primary": "#000000",
     "--primary-invert": "#ffffff",
     "--primary-hover": "#000000",
-    "--primary-container": "#ffffff",
+    "--primary-container": "#faf8f8",
     "--title-jobs": "#5682c6",
     "--jobs-hover": "#f0f0f0",
 
     "--secondary": "#3f6be8",
     "--secondary-container": "#25cad3",
     "--border-bottom": "#cdcdcd",
+    "--bg-form": "#DBDBDD",
   },
   dark: {
     "--nav-footer-container": "#383838",
@@ -30,6 +31,8 @@ const themes = {
 
     "--secondary": "#67f293",
     "--secondary-container": "#191919",
+    "--bg-form": "#FAF8F8",
+
   },
 }
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 8bdd0d18..ae5e2e52 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,7 +1,7 @@
 /* Fonts */
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-$primary-font: "Poppins", sans-serif;
+$primary-font: "Plain", sans-serif;
 $secondary-font: "Roboto", sans-serif;
 $medium: 20px;
 
@@ -18,8 +18,7 @@ $secondary-container: var(--secondary-container);
 $border-bottom: var(--border-bottom);
 $title-jobs: var(--title-jobs);
 $jobs-hover: var(--jobs-hover);
-
-
+$bg-form: var(--bg-form);
 
 main {
   background-color: $primary-container !important;
@@ -82,6 +81,27 @@ $extra-large: 45px;
   }
 }
 
+@mixin secondaryBtn {
+  padding: 5px 15px;
+  font-weight: 500;
+  border: 1px solid $grey;
+  background-color: transparent;
+  color: $grey;
+  border-radius: 5px;
+  transition: filter 200ms ease-in;
+  &:hover {
+    color: white;
+    background-color: #7D7D92;
+    border: 1px solid #7D7D92;
+  }
+  &:active {
+    background-color: $grey;
+  }
+  @media screen and (min-width: $breakpoint-lg) {
+    padding: 8px 30px;
+  }
+}
+
 // new sizes
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
@@ -97,6 +117,10 @@ body {
       font-size: 16px;
       font-family: $secondary-font;
     }
+    strong {
+      font-size: 16px;
+      font-family: $secondary-font;
+    }
     font-size: 16px;
     font-family: $secondary-font;
   }
@@ -109,27 +133,27 @@ body {
     font-family: $primary-font;
   }
   h1 {
-    font-size: 40px;
+    font-size: 36px;
     font-family: $primary-font;
   }
   h2 {
-    font-size: 36px;
+    font-size: 32px;
     font-family: $primary-font;
   }
   h3 {
     span {
-      font-size: 32px;
+      font-size: 28px;
       font-family: $primary-font;
     }
-    font-size: 32px;
+    font-size: 28px;
     font-family: $primary-font;
   }
   h4 {
-    font-size: 28px;
+    font-size: 24px;
     font-family: $primary-font;
   }
   h5 {
-    font-size: 24px;
+    font-size: 20px;
     font-family: $primary-font;
   }
   h6 {
@@ -137,7 +161,7 @@ body {
     font-family: $primary-font;
   }
   small {
-    font-size: 16px;
+    font-size: 14px;
   }
 }
 
@@ -148,37 +172,40 @@ body {
       em {
         font-size: 20px;
       }
+      strong {
+        font-size: 20px;
+      }
       font-size: 20px;
     }
     h1 {
-      font-size: 69px;
+      font-size: 60px;
     }
     h2 {
-      font-size: 53px;
+      font-size: 56px;
     }
     h3 {
       span {
-        font-size: 39px;
+        font-size: 48px;
       }
-      font-size: 39px;
+      font-size: 48px;
     }
     h4 {
-      font-size: 31px;
+      font-size: 36px;
     }
     h5 {
-      font-size: 25px;
+      font-size: 32px;
     }
     h6 {
-      font-size: 20px;
+      font-size: 24px;
     }
     small {
-      font-size: 16px;
+      font-size: 18px;
     }
     button {
-      font-size: 16px;
+      font-size: 18px;
     }
     input {
-      font-size: 16px;
+      font-size: 18px;
     }
   }
 }
diff --git a/src/templates/LandingPage.js b/src/templates/LandingPage.js
index bd4482f1..0d1ba6de 100644
--- a/src/templates/LandingPage.js
+++ b/src/templates/LandingPage.js
@@ -1,75 +1,121 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import { Seo, CasesSection, CasesList, LogosSection } from "../components/index.js"
 
 // componentes del body
-import Hero from "../components/Hero/Hero"
-import BannerList from "../components/BannerList/BannerLis"
-import ExpandGrid from "../components/expandGrid/ExpandGrid"
-import Catsone from "../components/Catsone/catsone"
-import BannerHead from '../components/BannerHead/BannerHead';
-import Text from '../components/Text/Text';
+import {
+  Seo,
+  CasesSection,
+  CasesList,
+  LogosSection,
+  Banner,
+  Form,
+  BannerList,
+  ExpandGrid,
+  Catsone,
+  Text,
+  AnimatedTransitionContinous,
+  DualSection,
+  OneSection,
+  Quote
+} from "../components"
+
+import VideoBackground from "../components/videoBackground/VideoBackground"
+
 
 const LandingPage = ({ data, location }) => {
   const pageData = data?.allStrapiLandingPage?.nodes[0]
   const content = pageData.body.map((component, idx) => {
+    const bannerList =
+      component.strapi_component === "components.banner-list" ? (
+        <BannerList data={component} />
+      ) : null
 
-    const hero = component.strapi_component === "home.hero" ?
-      <Hero data={component} /> :
-      null
+    const expandGrid =
+      component.strapi_component === "components.selected-grid" ? (
+        <ExpandGrid data={component} />
+      ) : null
 
-    const bannerList = component.strapi_component === "components.banner-list" ?
-      <BannerList data={component} /> :
-      null
+    const casesSection =
+      component.strapi_component === "components.cases-section" &&
+      !component.allCases ? (
+        <CasesSection data={component} />
+      ) : null
 
-    const expandGrid = component.strapi_component === "components.selected-grid" ?
-      <ExpandGrid data={component} /> :
-      null
+    const casesList =
+      component.strapi_component === "components.cases-section" &&
+      component.allCases ? (
+        <CasesList />
+      ) : null
 
-    const casesSection = (component.strapi_component === "components.cases-section" && !component.allCases) ?
-      <CasesSection data={component} /> :
-      null
+    const catsone =
+      component.strapi_component === "scripts.catsone" ? (
+        <Catsone data={component} />
+      ) : null
 
-    const casesList = (component.strapi_component === "components.cases-section" && component.allCases) ?
-      <CasesList /> :
-      null
+    const text =
+      component.strapi_component === "components.text" ? (
+        <Text data={component} />
+      ) : null
+    const logosSection =
+      component.strapi_component === "components.logos-section" ? (
+        <LogosSection data={component} />
+      ) : null
+    const form =
+      component.strapi_component === "components.form" ? (
+        <Form data={component} location={location} />
+      ) : null
+    const banner =
+      component.strapi_component === "components.banner" ? (
+        <Banner data={component} />
+      ) : null
 
-    const catsone = component.strapi_component === "scripts.catsone" ?
-      <Catsone data={component} /> :
-      null
+    const quote =
+      component.strapi_component === "home.quote" ? (
+        <Quote data={component} />
+      ) : null
 
-    const bannerHead = component.strapi_component === "banners.banner-head" ?
-      <BannerHead data={component} /> :
-      null
+    const dualSection =
+      component.strapi_component === "home.dual-section" &&
+      (component.dualSectionPart.length === 1 ? (
+        <OneSection data={component} />
+      ) : (
+        <DualSection data={component} />
+      ))
 
-    const text = component.strapi_component === "components.text" ?
-      <Text data={component} /> :
-      null
-    const logosSection = component.strapi_component === "components.logos-section" ?
-      <LogosSection data={component} /> :
-      null
+    const animatedTransition =
+      component.strapi_component === "home.transition" ? (
+        <AnimatedTransitionContinous data={component} />
+      ) : null
+
+      const videoBackground =
+      component.strapi_component === "home.video-background" ? (
+        <VideoBackground data={component} />
+      ) : null
 
     return (
       <div key={idx}>
         <>
-          {hero}
+          {banner}
           {bannerList}
           {expandGrid}
           {casesSection}
           {casesList}
           {catsone}
-          {bannerHead}
           {text}
           {logosSection}
+          {form}
+          {videoBackground}
+          {quote}
+          {dualSection}
+          {animatedTransition}
         </>
       </div>
     )
-
   })
 
   return (
-    <Layout location={location} options={{ hasHeader: true }} >
+    <Layout location={location} options={{ hasHeader: true }}>
       <Seo title={pageData.name} />
       {content}
     </Layout>