From 0b744efd640ae8a72851fcff8ecd7fb9f06da2e0 Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Mon, 16 May 2022 11:33:19 -0300
Subject: [PATCH 1/3] Agregar variante background a banner

---
 src/components/Banner/Banner.js   | 107 +++++++++++++++++++-----------
 src/components/Banner/Banner.scss |  56 ++++++++++++++++
 2 files changed, 123 insertions(+), 40 deletions(-)

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index a3902d11..def6bd92 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -31,49 +31,76 @@ const Banner = ({ data }) => {
       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(http://localhost:1337/uploads/trama_gris_arriba_4dab8e35c4.png)",
+        }}>
+          <div className="title-background">
+            <h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
+            {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="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>
 
-      <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>
   )
 }
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 5ad2d3de..562e8009 100644
--- a/src/components/Banner/Banner.scss
+++ b/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;
+        }
+      }
+    }
+  }
 }

From 20667c92a8ab612c95708f3c43f7433690e4b8d2 Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Mon, 16 May 2022 12:28:33 -0300
Subject: [PATCH 2/3] factorizar codigo del button

---
 src/components/Banner/Banner.js | 48 +++++++++++++--------------------
 1 file changed, 18 insertions(+), 30 deletions(-)

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index def6bd92..a60a7707 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -26,6 +26,22 @@ 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>
+    ))
+
   return (
     <div
       className={`banner ${variant}`}
@@ -37,21 +53,7 @@ const Banner = ({ data }) => {
         }}>
           <div className="title-background">
             <h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
-            {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>
-              ))}
+            {addButton}
           </div>
         </div> :
         <>
@@ -60,21 +62,7 @@ const Banner = ({ data }) => {
               {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>
-                ))}
+              {addButton}
             </div>
           </div>
 

From 9675a9b0f3955f2d30549d98324d7f22e907117d Mon Sep 17 00:00:00 2001
From: Drina_Rincon <drina.rincon@bitlogic.io>
Date: Mon, 16 May 2022 15:46:25 -0300
Subject: [PATCH 3/3] agregar funcion para el titulo

---
 src/components/Banner/Banner.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index a60a7707..9a7035a6 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -42,6 +42,14 @@ const Banner = ({ data }) => {
       </a>
     ))
 
+  const showTitle = () => {
+    if (variant === "hero") {
+      return <h1>{title}</h1>
+    } else {
+      return <h2>{title}</h2>
+    }
+  }
+
   return (
     <div
       className={`banner ${variant}`}
@@ -49,7 +57,7 @@ const Banner = ({ data }) => {
     >
       {variant === "background" ?
         <div className="bgImage" style={{
-          backgroundImage: "url(http://localhost:1337/uploads/trama_gris_arriba_4dab8e35c4.png)",
+          backgroundImage: `url(${image?.url})`,
         }}>
           <div className="title-background">
             <h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
@@ -59,8 +67,8 @@ const Banner = ({ data }) => {
         <>
           <div className="title container-md">
             <div className="col-12 col-lg-6">
-              {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>}
-              {/* <h3>{summary}</h3> */}
+              {/* {variant === "hero" ? <h1>{title}</h1> : <h2>{title}</h2>} */}
+              {showTitle()}
               <ReactMarkdown source={summary} className="banner-markdown" />
               {addButton}
             </div>