SBIT-118-fix

src/components/ButtonLink/ButtonLink.js

@@ -3,11 +3,12 @@ import React from "react"
 
 const ButtonLink = ({ button }) => {
   let internal = ""
-  if (button.landing_page) internal = "/" + button.landing_page.slug
-  else if (button.singleType) internal = "/" + button.singleType
+  if(!button) return null
+  if (button?.landing_page) internal = "/" + button.landing_page.slug
+  else if (button?.singleType) internal = "/" + button.singleType
 
   if (internal) return <Link to={internal}>{button.content}</Link>
-  else return <a href={button.url} target="_blank" rel="noreferrer">{button.content}</a>
+  else return <a href={button?.url} target="_blank" rel="noreferrer">{button.content}</a>
 }
 
 export default ButtonLink

src/components/DualSection/DualSection.js

@@ -1,38 +1,30 @@
-import React from 'react'
-import './DualSection.scss'
+import React from "react"
+import ButtonLink from "../ButtonLink/ButtonLink"
+import "./DualSection.scss"
 
 export default function DualSection({ data }) {
-    const dualSectionParts = data?.dualSectionPart
+  const dualSectionParts = data?.dualSectionPart
+  const listSectionParts = dualSectionParts.map(section => (
+    <div className="dualSection col-md-6 my-2 p-md-3 p-xl-4">
+      <div className="dualSection__image">
+        <img src={section.image.url} alt="naturaleza" />
+      </div>
 
-    const listSectionParts = dualSectionParts.map((section) =>
-        <div className="dualSection col-md-6 my-2 p-md-3 p-xl-4">
-            <div className="dualSection__image">
-                <img
-                    src={section.image.url}
-                    alt="naturaleza"
-                />
-            </div>
+      <div className="dualSection__textContainer">
+        <h4>{section.title}</h4>
+        <p>{section.description}</p>
+        {section.button && (
+          <button className="px-4">
+            <ButtonLink button={section.button} />
+          </button>
+        )}
+      </div>
+    </div>
+  ))
 
-            <div className="dualSection__textContainer">
-                <h4>{section.title}</h4>
-                <p>{section.description}</p>
-                {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 py-3" id={data.strapi_component + "-" + data.id}>
-            <div className="d-flex flex-column flex-md-row">
-                {listSectionParts}
-            </div>
-        </div>
-
-
-
-    )
+  return (
+    <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/OneSection.js

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

src/components/Footer/Subscription/subscription.scss

@@ -55,9 +55,6 @@
       input {
         width: 75%;
       }
-      button {
-        width: 35%;
-      }
     }
   }
 }

src/components/videoBackground/VideoBackground.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react"
+import ButtonLink from "../ButtonLink/ButtonLink"
 import "./videoBackground.scss"
 const VideoBackground = ({
   data: { video, description, button, strapi_component, id, backgroundImage },
@@ -42,7 +43,10 @@ const VideoBackground = ({
         className="container px-md-0 px-lg-3 videoBackground-container"
         id={strapi_component + "-" + id}
       >
-        <section className="videoBackground" style={{ marginTop: backgroundImage && 130}}>
+        <section
+          className="videoBackground"
+          style={{ marginTop: backgroundImage && 130 }}
+        >
           <video
             ref={videoRef}
             muted
@@ -55,9 +59,9 @@ const VideoBackground = ({
           />
           <div className="videoBackground-card">
             <h5>{description}</h5>
-            <a href={button.url} target="_blank" rel="noreferrer">
-              <button className="px-4">{button.content}</button>
-            </a>
+            <button className="px-4">
+              <ButtonLink button={button} />
+            </button>
           </div>
         </section>
       </div>

src/components/videoBackground/videoBackground.scss

@@ -25,19 +25,16 @@
   h5 {
     width: 100%;
     color: $grey;
-
   }
   button {
     @include secondaryBtn;
+    a {
+      color: $grey;
+    }
   }
 }
 
-
-
-
-
 @media screen and (min-width: $breakpoint-md) {
-
   .videoBackground {
     // width: calc(100% - 6em);
     height: 550px;
@@ -71,7 +68,7 @@
       box-shadow: 0px 0px 3px #00000044;
       margin: 2em;
       padding: 2em;
-  
+
       h5 {
         color: $grey;
       }
@@ -82,9 +79,7 @@
   }
 }
 
-
 @media screen and (min-width: $breakpoint-lg) {
-
   .videoBackground {
     height: 80vh;
     &-container {