SBIT-103: Modificar detalles en dual section, onesection y text

src/components/DualSection/DualSection.js

@@ -5,7 +5,7 @@ export default function DualSection({ data }) {
     const dualSectionParts = data?.dualSectionPart
 
     const listSectionParts = dualSectionParts.map((section) =>
-        <div className="dualSection p-4" >
+        <div className="dualSection col-md-6 my-2 p-md-3 p-xl-4">
             <div className="dualSection__image">
                 <img
                     src={section.image.url}
@@ -16,19 +16,20 @@ export default function DualSection({ data }) {
             <div className="dualSection__textContainer">
                 <h4>{section.title}</h4>
                 <p>{section.description}</p>
-                <a href={section.button?.url} target="_blank" rel="noreferrer" >
-                    <button className="px-4">{section.button?.content}</button>
-                </a>
+                {section.button && (
+                    <a href={section.button?.url} target="_blank" rel="noreferrer" >
+                        <button className="px-4">{section.button?.content}</button>
+                    </a>
+                )}
             </div>
-
         </div>
     );
 
     return (
-        <div className="container my-3 py-3" id={data.strapi_component + "-" + data.id}>
-        <div className="d-flex flex-column flex-md-row">
-            {listSectionParts}
-        </div>        
+        <div className="container py-3" id={data.strapi_component + "-" + data.id}>
+            <div className="d-flex flex-column flex-md-row">
+                {listSectionParts}
+            </div>
         </div>
 
 

src/components/DualSection/DualSection.scss

@@ -1,32 +1,21 @@
 @import "../../styles/global.scss";
 
 .dualSection {
-  p {
-    text-align: justify;
-    font-weight: 700;
-    max-height: 300px;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
+  color: $primary;
   h4 {
+    margin-top: 1rem;
     font-weight: 700;
   }
 
   &__image {
-    width: 300px;
+    width: 100%;
   }
   button {
-    background: $light-grey;
-    color: white;
-    font-weight: 500;
-    border-radius: 3px;
-    border: none;
-    padding: 0.3em;
+    @include primaryBtn;
   }
 }
 
+
 .one_sec {
   color: $primary;
   &-background{
@@ -39,7 +28,8 @@
   justify-content: space-around;
   align-items: center;
   gap: 3em;
-  padding: 3em 0;
+  padding-top: 3em;
+  padding-bottom: 3em;
   button {
     @include primaryBtn;
     a {
@@ -71,13 +61,12 @@
     }
   }
 
-  @media screen and (max-width: $breakpoint-xl) {
+  @media screen and (max-width: $breakpoint-sm) {
     flex-direction: column-reverse;
     &-img {
       flex-basis: 100%;
     }
     &-title {
-      padding: 0 10vw;
       flex-basis: 100%;
     }
   }

src/components/DualSection/OneSection.js

@@ -20,17 +20,17 @@ const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
           theme === "dark" && backgroundImageDark?.url
             ? backgroundImageDark?.url
             : backgroundImage?.url
-        })`,
+          })`,
       }}
     >
-      <div className="one_sec container" id={strapi_component + "-" + id}>
+      <div className="container one_sec" id={strapi_component + "-" + id}>
         <div className="one_sec-title">
-          <h3>{title}</h3>
-          <h3 className="one_sec-title-body">{description}</h3>
+          <h4>{title}</h4>
+          <h4 className="one_sec-title-body">{description}</h4>
           {button && (
-            <button>
-              <ButtonLink button={button} />
-            </button>
+            <a href={button?.url} target="_blank" rel="noreferrer" >
+              <button className="px-4">{button?.content}</button>
+            </a>
           )}
         </div>
         <div className="one_sec-img">

src/components/Text/Text.js

@@ -8,27 +8,29 @@ export default function Text({ data }) {
   const bgImage = data?.backgroundImage?.url
 
   return (
-    <div className="container-text" style={{
+    <div className="container-text mt-3 mt-xl-5" style={{
       backgroundImage: `url(${bgImage})`,
-    }} id={data.strapi_component + "-" + data.id}>
-      {title !== "" && title !== undefined && title !== null ? (
-        <div className="text d-flex flex-column flex-md-row">
-          <div className="title">
-            <h2 className="titleText pt-5 px-3 pb-3">{title}</h2>
+    }}>
+      <div className="container">
+        {title !== "" && title !== undefined && title !== null ? (
+          <div className="text d-flex flex-column flex-md-row">
+            <div className="title">
+              <h2 className="titleText pt-5 px-3 ps-md-0">{title}</h2>
+            </div>
+            <MarkdownView
+              markdown={description}
+              className="description"
+            />
           </div>
-          <MarkdownView
-            markdown={description}
-            className="description"
-          />
-        </div>
-      ) : (
-        <div className="container-markdown">
-          <MarkdownView
-            markdown={description}
-            className="notTitle mx-lg-5"
-          />
-        </div>
-      )}
+        ) : (
+          <div className="container-markdown">
+            <MarkdownView
+              markdown={description}
+              className="notTitle"
+            />
+          </div>
+        )}
+      </div>
     </div>
   )
 }

src/components/Text/Text.scss

@@ -4,21 +4,23 @@
   .text {
     color: $primary;
     .title {
-      width: 100%;
       .titleText {
-        margin: 0;
         text-transform: uppercase;
         margin-top: 2rem;
       }
     }
     .description {
-      background-color: $primary-container;
-      padding-bottom: 3rem;
+      background-color: $grey-light-bg;
+
       p:first-child {
         padding-top: 1rem;
       }
+      p:last-child {
+        margin-bottom: 0.5rem;
+      }
       p {
-        padding: 0rem 1rem;
+        color: $black;
+        padding: 0rem 0.5rem;
       }
     }
   }
@@ -29,10 +31,10 @@
     .notTitle {
       color: $primary;
       border-radius: 20px;
-      background-color: $primary-container;
+      background-color: $white;
       padding: 1rem;
-      margin: 1rem;
-      p:nth-last-child(2) {
+      margin: 1.5rem 0rem;
+      p:nth-last-child(-n+2) {
         margin-bottom: 0px;
       }
     }
@@ -46,9 +48,8 @@
         padding-top: 4rem;
       }
       .description {
-        p:first-child {
-          padding-top: 4rem;
-        }
+        margin-left: 2rem;
+        margin-top: 2rem;
       }
     }
   }
@@ -58,8 +59,7 @@
     .text {
       .description {
         p {
-          padding: 0rem 2.5rem;
-          padding-right: 7rem;
+          padding: 0rem 2rem;
         }
       }
     }

src/styles/global.scss

@@ -57,7 +57,7 @@ $grey: #545468;
 $light-grey: #c4c4c4;
 $alt: #67f293;
 $blackBit: #242424;
-
+$grey-light-bg: #FAF8F8;
 /* Sizes */
 $small: 15px;
 $medium: 20px;