SBIT-103: Agregar detalles del componente text

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 (

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>

src/components/Text/Text.js

@@ -8,31 +8,26 @@ export default function Text({ data }) {
   const bgImage = data?.backgroundImage?.url
 
   return (
-    <div className="container-text">
+    <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"
-            style={{
-              backgroundImage: `url(${bgImage})`,
-            }}
-          >
-            <h2 className="titleText pt-5 ps-4 pe-md-3">{title}</h2>
+          <div className="title">
+            <h2 className="titleText pt-5 px-3 pb-3">{title}</h2>
           </div>
           <MarkdownView
             markdown={description}
-            className="description ps-4 px-lg-5"
+            className="description"
           />
         </div>
       ) : (
-        <MarkdownView
-          markdown={description}
-          className="px-lg-5"
-          id="descriptionText"
-          style={{
-            backgroundImage: `url(${bgImage})`,
-          }}
-        />
+        <div className="container-markdown">
+          <MarkdownView
+            markdown={description}
+            className="notTitle mx-lg-5"
+          />
+        </div>
       )}
     </div>
   )

src/components/Text/Text.scss

@@ -1,73 +1,68 @@
 @import "../../styles/global.scss";
 
-.text {
-  color: $primary;
-  padding-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 {
-  color: $primary;
-  height: 70vh;
-  padding-bottom: 50px;
-  display: flex;
-  align-items: center;
+  .container-markdown {
+    padding-top: 5rem;
+    padding-bottom: 3rem;
 
-  p {
-    background-color: $primary-container;
-    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;
+        }
+      }
     }
   }
 }

src/styles/global.scss

@@ -20,8 +20,6 @@ $title-jobs: var(--title-jobs);
 $jobs-hover: var(--jobs-hover);
 $bg-form: var(--bg-form);
 
-
-
 main {
   background-color: $primary-container !important;
 }
@@ -98,6 +96,10 @@ body {
       font-size: 16px;
       font-family: $secondary-font;
     }
+    strong {
+      font-size: 16px;
+      font-family: $secondary-font;
+    }
     font-size: 16px;
     font-family: $secondary-font;
   }
@@ -149,6 +151,9 @@ body {
       em {
         font-size: 20px;
       }
+      strong {
+        font-size: 20px;
+      }
       font-size: 20px;
     }
     h1 {