Merge pull request #130 from bitlogic/develop

Release 3

Author: brunoportesio

src/components/Banner/Banner.js

@@ -9,7 +9,8 @@ import CustomImage from "../CustomImage/CustomImage"
 
 const Banner = ({ data }) => {
   const { theme } = useTheme()
-  const { title, variant, summary, animation, image, imageDark, button } = data
+  const { title, variant, summary, animation, image, imageDark, arrayButtons, button } = data
+
 
   const defaultOptions = {
     loop: true,
@@ -39,14 +40,27 @@ const Banner = ({ data }) => {
                 dangerouslySetInnerHTML={{ __html: summary }}
               />
             }
-            {button && (
-              <CustomLink
-                content={button?.content}
-                url={button?.url}
-                landing={button?.english_landing_page}
-                className={"button"}
-              />
+            {Array.isArray(arrayButtons) && arrayButtons.length > 0 && (
+              <div className="banner__buttons">
+                {arrayButtons.map((btn, index) => (
+                  <CustomLink
+                    key={index}
+                    content={btn.content}
+                    url={btn.url}
+                    landing={btn.english_landing_page}
+                    className="button"
+                  />
+                ))}
+              </div>
             )}
+            {button && (
+                <CustomLink
+                  content={button.content}
+                  url={button?.url}
+                  landing={button?.landing_page}
+                  className={'button'}
+                />
+              )}
           </div>
         </div>
 
@@ -81,6 +95,15 @@ Banner.propTypes = {
     title: PropTypes.string.isRequired,
     variant: PropTypes.string.isRequired,
     summary: PropTypes.string,
+    arrayButtons: PropTypes.arrayOf(
+    PropTypes.shape({
+      content: PropTypes.string,
+      url: PropTypes.string,
+      english_landing_page: PropTypes.shape({
+        slug: PropTypes.string.isRequired,
+      }),
+    })
+  ),
     button: PropTypes.shape({
       content: PropTypes.string.isRequired,
       url: PropTypes.string,

src/components/Banner/Banner.scss

@@ -170,6 +170,8 @@
   &.diagonalReverse {
     .banner__wrapper {
       margin: 32px auto;
+      display: flex;
+      flex-direction: column;
     }
 
     .imagen {
@@ -184,13 +186,22 @@
       }
     }
 
+     .banner__buttons{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      padding-top: 25px;
+      padding-right: 10px;
+    }
+    
     .button {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      display: inline-block;
-      color: #607ee7;
-      text-decoration: underline;
-      padding-left: 5px;
+      color:$primary;
+        
+      @include primaryBtn;
+      display: block;
+      width: max-content;
+      padding: 10px 15px;
+      margin-right: 20px;
     }
 
     .title {
@@ -356,9 +367,7 @@
         }
       }
 
-      .button {
-        padding-left: 5rem;
-      }
+      
 
       .title {
         display: flex;

src/components/BannerList/Banner.scss

@@ -54,11 +54,16 @@
     a {
       margin-top: 10px;
       @include primaryBtn;
-      align-self: baseline;
+      align-self: flex-start;
 
-      @media screen and (max-width: ($breakpoint-md - 1px)) {
-        display: none;
-      }
+     @media screen and (max-width: ($breakpoint-md - 1px)) {
+      display: inline-block;
+      @include primaryBtn;
+      //margin: 10px auto 0; 
+      text-align: center;
+      align-self:flex-start;
+    }
+      
     }
   }
 }

src/components/Banners/BannerTop.js

@@ -12,15 +12,26 @@ const BannerTop = ({ banner }) => {
 
   return (
     <div className={`BannerTop ${variant}`}>
-      <BgImage image={imageBanner} className="BannerTop__bgImage">
+      {imageBanner ? (
+        <BgImage
+          image={imageBanner}
+          className="BannerTop__bgImage"
+          loading="eager"
+          fetchpriority="high"
+        >
+          <div className="BannerTop__titleContainer">
+            <h1 className={`BannerTop__title ${variant && "background container"}`}>
+              {title}
+            </h1>
+          </div>
+        </BgImage>
+      ) : (
         <div className="BannerTop__titleContainer">
-          <h1
-            className={`BannerTop__title ${variant && "background container"}`}
-          >
+          <h1 className={`BannerTop__title ${variant && "background container"}`}>
             {title}
           </h1>
         </div>
-      </BgImage>
+      )}
     </div>
   )
 }

src/components/Banners/BannerTop.scss

@@ -56,4 +56,4 @@
       }
     }
   }
-}
+}

src/components/BlogPage/BlogContainer.js

@@ -7,7 +7,7 @@ import Layout from "../layout"
 import Banner from "../Banner/Banner"
 import "./BlogContainer.scss"
 
-const Blog = () => {
+const Blog = ({location}) => {
   const { allStrapiBlogCategory, allStrapiArticle, allStrapiBlogPage } = useBlog()
   const categorias = allStrapiBlogCategory.nodes
   const articulos = allStrapiArticle.nodes
@@ -44,6 +44,7 @@ const Blog = () => {
         title={seo?.pageTitle}
         description={seo?.pageDescription}
         keywords={seo?.pageKeywords}
+        location={location}
       />
       <Banner data={banner} />
 

src/components/DualSection/OneSection.js

@@ -19,7 +19,6 @@ const OneSection = ({ data: { dualSectionPart } }) => {
     <div
       className="one_sec-background"
       style={{
-        backgroundRepeat: "repeat",
         backgroundPosition: "center",
         backgroundImage: `url(${
           theme === "dark" && backgroundImageDark?.url

src/components/FaIcon/FaIcon.js

@@ -1,15 +1,23 @@
 import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faEnvelope, faLocationDot } from "@fortawesome/free-solid-svg-icons"
-import { faLinkedin, faTwitter, faInstagram, faYoutube, faSpotify } from "@fortawesome/free-brands-svg-icons"
+import {
+  faLinkedin,
+  faTwitter,
+  faXTwitter, 
+  faInstagram,
+  faYoutube,
+  faSpotify
+  
+} from "@fortawesome/free-brands-svg-icons"
 import PropTypes from "prop-types"
 
-// Mapeo de los íconos que se usan
 const iconMap = {
   "fa-envelope": faEnvelope,
   "fa-location-dot": faLocationDot,
   "fa-linkedin": faLinkedin,
   "fa-twitter": faTwitter,
+  "fa-x-twitter": faXTwitter, 
   "fa-instagram": faInstagram,
   "fa-youtube": faYoutube,
   "fa-spotify": faSpotify,
@@ -31,4 +39,6 @@ FaIcon.propTypes = {
   code: PropTypes.string.isRequired,
 }
 
-export default FaIcon
+
+export default FaIcon
+

src/components/Seo/Seo.js

@@ -3,9 +3,10 @@ import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { useGlobalSeo } from "../../hooks"
 
-function Seo({ description, lang, meta, title, keywords }) {
+function Seo({ description, lang, meta, title, keywords, location }) {
   const data = useGlobalSeo()
 
+  const pathname = location?.pathname || "/"
   const {
     author,
     robots,
@@ -77,17 +78,13 @@ function Seo({ description, lang, meta, title, keywords }) {
         },
       ].concat(meta)}
       link={[
-        {
-          rel: "canonical",
-          href: `https://bitlogic.io`
-        },
         {
           rel: "alternate",
-          href: `https://en.bitlogic.io`
+          href: `https://bitlogic.io${pathname}` 
         },
         {
           rel: "alternate",
-          href: `https://www.bitlogic.io`
+          href: `https://www.bitlogic.io${pathname}`
         }
 
       ]}
@@ -99,14 +96,16 @@ Seo.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
+  location: null,
 }
 
 Seo.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
-  keywords: PropTypes.string
+  keywords: PropTypes.string,
+  location: PropTypes.object, 
 }
 
 export default Seo

src/components/Text/Text.scss

@@ -22,7 +22,7 @@
     flex: 2;
     background-color: $primary-container;
     border-radius: 10px;
-    padding: 32px 16px;
+    padding: 32px 35px;
     @media (min-width: $breakpoint-lg) {
       padding: 24px 32px;
     }