bitlogic · marino-martin · Jun 19, 2024 · Jun 19, 2024 · Jun 19, 2024 · Jun 19, 2024
diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
@@ -5,6 +5,7 @@ import { useTheme } from "../../context/themeContext"
 import "./Banner.scss"
 import PropTypes from 'prop-types'
 import CustomLink from "../CustomLink/CustomLink"
+import CustomImage from "../CustomImage/CustomImage"
 
 const Banner = ({ data }) => {
   const { theme } = useTheme()
@@ -21,23 +22,21 @@ const Banner = ({ data }) => {
   const showTitle = () => {
     if (variant === "diagonal" || variant === "diagonalReverse") {
       return <h2>{title}</h2>
-    } else {
-      return <h1>{title}</h1>
     }
+
+    return <h1>{title}</h1>
   }
 
   return (
     <div className={`banner ${variant}`}>
       <div className="container banner__wrapper">
         {variant === "background" ?
-          <div
-            className="bgImage"
+          <div className="bgImage"
             style={{
-              backgroundImage: `url(${image?.url})`,
+              backgroundImage: image ? `url(${image?.url})` : '',
               backgroundPosition: 'center',
-              // backgroundSize: 'cover',
             }}>
-            <div className="title-background ">
+            <div className="title-background">
               <h1 style={{ color: theme === 'dark' ? 'white' : '#3F6BE8' }}>{title}</h1>
               {summary && (
                 <MarkdownView
@@ -77,19 +76,18 @@ const Banner = ({ data }) => {
             </div>
 
             <div className="imagen">
-              {image?.url ? (
-                <img
-                  src={theme === "dark" && imageDark ? imageDark?.url : image?.url}
+              {image ? (
+                <CustomImage image={theme === 'dark' && imageDark ? imageDark : image}
+                  alt={image?.alternativeText || title}
+                  className={''}
                   width={290}
                   height={200}
-                  alt={image?.alternativeText || title}
-                />) : (
+                />
+              ) : (
                 <div className="cont-lottie">
-                  {animation && <Lottie options={{
-                    ...defaultOptions,
-                    animationData: animation,
-                  }}
-                  />}
+                  {animation && (
+                    <Lottie options={{ ...defaultOptions, animationData: animation }} />
+                  )}
                 </div>
               )}
             </div>

diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
@@ -23,6 +23,10 @@
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
+
+    .imagen {
+      min-height: 450px;
+    }
   }
 
   .cont-lottie {

diff --git a/src/components/BannerList/Banner.scss b/src/components/BannerList/Banner.scss
@@ -2,29 +2,43 @@
 
 .bannerList {
   color: $primary;
+
   .card_item {
+    align-items: center;
+
     h4 {
       margin: 0;
     }
+
+    p {
+      margin: 0;
+    }
+
     a {
       color: inherit;
+
       &:hover {
         color: $secondary;
       }
     }
+
     img {
       margin: 0;
       width: 80px;
+      object-fit: cover;
     }
   }
+
   button {
     margin-top: 10px;
     @include primaryBtn;
     align-self: baseline;
+
     a {
       color: inherit;
     }
   }
+
   &__title {
     display: flex;
     flex-direction: column;
@@ -36,12 +50,7 @@
 
 @media screen and (min-width: $breakpoint-xl) {
   .bannerList {
-    .card_item {
-      img {
-        width: 80px;
-      }
-    }
-    &__buttonMobile{
+    &__buttonMobile {
       display: none;
     }
   }
@@ -59,13 +68,8 @@
 
 @media screen and (min-width: $breakpoint-md) {
   .bannerList {
-    .card_item {
-      img {
-        width: 80px;
-      }
-    }
-    &__buttonMobile{
+    &__buttonMobile {
       display: none;
     }
   }
-}
+}
diff --git a/src/components/BannerList/BannerList.js b/src/components/BannerList/BannerList.js
@@ -3,19 +3,21 @@ import React from "react"
 import "./Banner.scss"
 import useLandingUrl from "../../hooks/useLandingUrl"
 import PropTypes from "prop-types"
+import CustomImage from "../CustomImage/CustomImage"
 
 export default function BannerList({ data }) {
   const { title, Card, contactForm, concactFormAnchor, callToAction } = data
   const getUrl = useLandingUrl()
   const cards = Card.map(item => {
     return (
-      <div className="card_item d-flex mb-2">
+      <div className="card_item d-flex mb-2 gap-2" key={item.id}>
         {item?.icon && (
           <div className="card_item">
-            <img className="d-block"
-              alt={item?.icon?.alternativeText || 'card-icon'}
-              src={item.icon.url}
-              placeholder="blurred"
+            <CustomImage image={item?.icon}
+              className={'d-block'}
+              alt={item?.icon?.alternativeText || 'Card icon'}
+              width={60}
+              height={60}
             />
           </div>
         )}
@@ -37,17 +39,17 @@ export default function BannerList({ data }) {
   })
 
   return (
-    <div className="container pt-5">
+    <div className="container py-5">
       <div className="bannerList d-md-flex flex-row">
-        <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
+        <h2 className="bannerList__title col-md-6 col-xl-6 align-self-center mb-4">
           {title}
           {contactForm && concactFormAnchor && callToAction && (
             <button>
               <a href={concactFormAnchor}>{callToAction}</a>
             </button>
           )}
-        </h1>
-        <div className="bannerList__cards col-md-6 col-xl-6">
+        </h2>
+        <div className="bannerList__cards d-flex flex-column col-md-6 col-xl-6 gap-4">
           {cards}
         </div>
         {contactForm && concactFormAnchor && callToAction && (

diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.js b/src/components/BlogPage/BlogArticle/BlogArticle.js
@@ -10,18 +10,17 @@ const BlogArticle = ({ title, summary, image, slug, text }) => {
 
   return (
     <div className="article__container">
-      <CustomImage
-        image={image}
+      <CustomImage image={image}
         alt={image?.alternativeText || title}
         className="article__image"
+        width={140}
+        height={170}
       />
       <div className="article__description">
-        <h6>{`${title}`}</h6>
-        <div>
-          <MarkdownView markdown={`${summary}`}
-            dangerouslySetInnerHTML={{ __html: summary }}
-          />
-        </div>
+        <h4>{title}</h4>
+        <MarkdownView markdown={`${summary}`}
+          dangerouslySetInnerHTML={{ __html: summary }}
+        />
         <div className="article__link">
           <Link to={slug}>
             <small>{text || 'Ver más'}</small>

diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.scss b/src/components/BlogPage/BlogArticle/BlogArticle.scss
@@ -1,55 +1,67 @@
 @import "../../../styles/global.scss";
+
 .article {
   color: $primary;
+
   &__container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
+    height: 100%;
     padding: 0.5em;
     color: $primary;
   }
+
   &__image {
     width: 100%;
     height: 170px;
     transition: opacity 3s ease-in;
     border-radius: 8px;
   }
+
   &__description {
-    // display: flex;
-    // flex-direction: column;
-    // justify-content: flex-start;
     position: relative;
     width: 100%;
     height: 170px;
     padding: 0 0 0 15px;
+
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
       padding-left: 0;
-      // font-size: 15px !important;
-      margin-bottom: 15px;
-      // line-height: 1rem;
+      margin-bottom: 8px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       overflow: hidden;
     }
+
+    h4 {
+      text-wrap: pretty;
+      line-height: 1.3rem;
+      margin-bottom: 10px;
+      font-size: $medium;
+    }
+
     p {
       margin-bottom: 15px;
-      line-height: 24px;
+      line-height: 28px;
+      font-weight: $standard;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
     }
   }
+
   &__link {
     position: absolute;
     bottom: 15px;
+
     a {
       margin-right: 0;
       font-weight: $max_bold;
@@ -60,19 +72,16 @@
     }
   }
 }
+
 @media (min-width: $breakpoint-md) {
   .article {
-    &__description {
-      h6 {
-        margin-bottom: 2px;
-        line-height: 1.3rem;
-      }
-    }
+
     &__link {
       bottom: 0;
     }
   }
 }
+
 @media (min-width: $breakpoint-lg) {
   .article {
     &__container {
@@ -90,14 +99,14 @@
       width: 100%;
       height: 190px;
       padding: 0;
+
       p {
         font-size: 18px;
-        line-height: 30px;
 
         em {
           font-size: 18px;
         }
       }
     }
   }
-}
+}
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
@@ -32,7 +32,7 @@ const Blog = () => {
               {category.map((item, idx) => (
                 <BlogArticle
                   key={idx}
-                  image={item.image}
+                  image={item?.image || item?.imagePage}
                   title={item.title}
                   summary={item.summary}
                   slug={"/blog/" + item.slug}

diff --git a/src/components/CasesSection/CasesList.js b/src/components/CasesSection/CasesList.js
@@ -21,7 +21,7 @@ const CasesList = ({ data }) => {
           />
         </div>
         <div className="col-12 col-md-7">
-          <h5 className="pt-3 pb-2 caseExpanded__title">{caso.title}</h5>
+          <h4 className="pt-3 pb-2 caseExpanded__title">{caso.title}</h4>
           {caso.description && (
             <div className="caseExpanded__descr">
               <MarkdownView markdown={caso.description}
@@ -32,9 +32,9 @@ const CasesList = ({ data }) => {
         </div>
         <div className="col-12 col-md-5 row caseQuote">
           {caso?.quote?.title && (
-            <h5 className="caseQuote__title col-12 pt-md-3 pb-2">
+            <h4 className="caseQuote__title col-12 pt-md-3 pb-2">
               {caso.quote.title}
-            </h5>
+            </h4>
           )}
           {caso?.quote?.description && (
             <div className="caseQuote__descr col-9 col-md-12">