SBIT-90: cambios banner list

src/components/BannerList/Banner.scss

@@ -7,13 +7,26 @@
       text-align: justify;
       margin: 0 !important;
     }
+    a{
+      color: inherit;
+    }
     img {
       width: 48px;
     }
   }
   &__title {
+    display: flex;
+    flex-direction: column;
     font-weight: 700;
     text-align: left;
+    button{
+      margin-top: 30px;
+      @include primaryBtn;
+      align-self: baseline;
+      a{
+        color: inherit;
+      }
+    }
   }
 }
 

src/components/BannerList/BannerLis.js

@@ -1,34 +1,39 @@
+import { Link } from "gatsby"
 import React from "react"
 import "./Banner.scss"
 
 export default function BannerLis({ data }) {
   const title = data?.title
   const image = data?.Card[0]?.icon?.url
-
+  console.log(data)
   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>
+          <Link to={item.landing_page ? "/" + item.landing_page?.slug : null}>
+            <h4>{item.title}</h4>
+          </Link>
           <p>{item.description}</p>
         </div>
       </div>
     )
   })
 
   return (
-    <div
-      className="container my-3 py-3"
-      id={data.strapi_component + "-" + data.id}
-    >
+    <div className="container py-5" id={data.strapi_component + "-" + data.id}>
       <div className="bannerList d-md-flex flex-row-reverse">
+        <div className="bannerList__cards col-md-6 col-xl-6 pe-5">{cards}</div>
         <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>
       </div>
     </div>
   )

src/components/Text/Text.js

@@ -3,32 +3,37 @@ 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">
+      {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})`,
+          }}
+        />
+      )}
+    </div>
+  )
 }

src/components/Text/Text.scss

@@ -1,7 +1,8 @@
 @import "../../styles/global.scss";
 
 .text {
-  margin-bottom: 50px;
+  color: $primary;
+  padding-bottom: 50px;
   .title {
     text-transform: uppercase;
     width: 100%;
@@ -43,13 +44,14 @@
 }
 
 #descriptionText {
+  color: $primary;
   height: 70vh;
-  margin-bottom: 50px;
+  padding-bottom: 50px;
   display: flex;
   align-items: center;
 
   p {
-    background-color: #ffffff;
+    background-color: $primary-container;
     padding: 2em 1em;
     margin: 1em 1em 0;
     border-radius: 20px;

src/context/themeContext.js

@@ -8,7 +8,7 @@ const themes = {
     "--primary": "#000000",
     "--primary-invert": "#ffffff",
     "--primary-hover": "#000000",
-    "--primary-container": "#ffffff",
+    "--primary-container": "#faf8f8",
     "--title-jobs": "#5682c6",
     "--jobs-hover": "#f0f0f0",