SBIT-134: Modificar banner para funcionalidad de lottie, agregar estilos para mejorar el componente text

src/components/Banner/Banner.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { Link } from "gatsby"
 import ReactMarkdown from "react-markdown"
 import Lottie from 'react-lottie'
@@ -17,17 +17,28 @@ const Banner = ({ data }) => {
   const diagonalReverseState =
     variant === "diagonalReverse" ? "col-md-4" : "col-lg-6"
 
-  console.log(image)
+  console.log(image?.url)
+
+  const [lottieLight, setLottieLight] = useState(null)
 
   const defaultOptions = {
     loop: true,
     autoplay: true,
     rendererSettings: {
       preserveAspectRatio: 'xMidYMid slice'
     },
-    path: image?.url,
   }
 
+  useEffect(() => {
+    //if (image.mime === "application/json") {
+
+    fetch(image?.url, {
+      method: 'GET', // or 'PUT'
+    }).then(res => res.json())
+      .catch(error => console.error('Error:', error))
+      .then(res => setLottieLight(res));
+  }, [])
+
   return (
     <div
       className={`banner ${variant}`}
@@ -62,7 +73,10 @@ const Banner = ({ data }) => {
       >
         {/* <img src={image?.url} alt={title} /> */}
 
-        {image?.mime === "application/json" ? <Lottie options={{ ...defaultOptions }} /> : <img
+        {image?.mime === "application/json" ? <Lottie options={{
+          ...defaultOptions,
+          animationData: lottieLight,
+        }} /> : <img
           src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
           alt={title}
         />}

src/components/DualSection/DualSection.scss

@@ -53,6 +53,7 @@
   &-img {
     flex-basis: 55%;
     img {
+      border-radius: 8px;
       width: 100%;
       padding: 0;
     }

src/components/Text/Text.scss

@@ -13,7 +13,7 @@
       background-color: $primary-container;
       border-radius: 10px;
       p:first-child {
-        padding-top: 1rem;
+        padding-top: 29px;
       }
       p {
         color: $primary;
@@ -26,13 +26,27 @@
     padding-bottom: 3rem;
 
     .notTitle {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       color: $primary;
       border-radius: 20px;
       background-color: $primary-container;
-      padding: 1rem;
-      margin: 1.5rem 0rem;
-      p:nth-last-child(-n + 2) {
+      padding: 0rem 1rem;
+
+      p:first-child {
+        padding-top: 29px;
+      }
+
+      h6 {
         margin-bottom: 0px;
+
+        &:last-child {
+          padding-bottom: 29px;
+        }
+        strong {
+          font-size: 16px !important;
+        }
       }
     }
   }