SBIT-91: Crear y Agregar bgImage a componente text

src/components/Text/Text.js

@@ -1,19 +1,33 @@
-import React from 'react';
-import MarkdownView from "react-showdown";
-import './Text.scss';
+import React from "react"
+import MarkdownView from "react-showdown"
+import "./Text.scss"
 
 export default function Text({ data }) {
-    const title = data?.title;
-    const description = data?.text;
+    const title = data?.title
+    const description = data?.text
+    const bgImage = data?.backgroundImage[0].url
 
     return (
-        <div className="text container py-3 d-flex flex-column flex-lg-row">
-
-            {title && (
-                <h2 className="title me-3 mt-5 p-lg-2">{title}</h2>
-            )}
-            {description && (
-                <MarkdownView markdown={description} className="description px-lg-5" />
+        <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,8 +1,71 @@
 @import "../../styles/global.scss";
 
 .text {
-  color: $primary;
+  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) {
+  .text {
+    .title {
+      max-height: 60vh;
+
+      .titleText {
+        max-width: 30vw;
+        padding-left: 5rem !important;
+      }
+    }
+    .description {
+      padding-top: 70px;
+      max-width: 60vw;
+      max-height: 55vh;
+      padding-right: 10rem !important;
+    }
+  }
+}
+
+#descriptionText {
+  height: 70vh;
+  margin-bottom: 50px;
+  display: flex;
+  align-items: center;
+
+  p {
+    background-color: #ffffff;
+    padding: 2em 1em;
+    margin: 1em 1em 0;
+    border-radius: 20px;
+  }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+  #descriptionText {
+    max-height: 60vh;
+  }
+}
+
+@media screen and (min-width: $breakpoint-xl) {
+  #descriptionText {
+    p {
+      padding: 3em 3em;
+    }
   }
 }