Merge dev to main

gatsby-config.js

@@ -3,8 +3,10 @@ module.exports = {
     title: `Bitlogic`,
     description: `Bitlogic Web es una empresa dedicada al diseño, ingeniería y desarrollo ágil de productos de software, especializada en la transformación digital de instituciones educativas .`,
     author: `Bitlogic.io`,
+    siteUrl: `https://www.bitlogic.io`,
   },
   plugins: [
+    `gatsby-plugin-sitemap`,
     {
       resolve: `gatsby-plugin-google-gtag`,
       options: {
@@ -52,6 +54,7 @@ module.exports = {
           `bitway-page`,
           `contact-page`,
           `global-config`,
+          `jobs-page`,
         ],
       },
     },

package.json

@@ -21,6 +21,7 @@
     "gatsby-plugin-react-helmet": "^4.12.0",
     "gatsby-plugin-sass": "^4.12.0",
     "gatsby-plugin-sharp": "^3.12.0",
+    "gatsby-plugin-sitemap": "^3.0.0",
     "gatsby-remark-external-links": "^0.0.4",
     "gatsby-source-filesystem": "^3.12.0",
     "gatsby-source-strapi": "^1.0.2",

public/page-data/index/page-data.json

@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","1687125271","176670904","2432702713","3498872882","3858639830","4109181808","854109855","882490824"]}
+    "staticQueryHashes": ["1128713364","1292738615","176670904","1868451474","2432702713","2499611023","3422151259","67086494","770810350","882490824"]}

src/components/Banners/BannerActionCall.scss

@@ -1,7 +1,7 @@
 @import "../../styles/global.scss";
 
 .bannerActCall {
-  background: linear-gradient(180deg, $white 20%, $blue 0);
+  background: linear-gradient(180deg, $primary-container 20%, $secondary-container 0);
   padding: 30px 25px;
   max-height: 235px;
   display: flex;
@@ -49,7 +49,7 @@
   .bannerActCall {
     padding: 45px 65px;
     max-height: 600px;
-    background: linear-gradient(180deg, $white 35%, $blue 0);
+    background: linear-gradient(180deg, $primary-container 35%, $secondary-container 0);
     &__title {
       color: $white;
       font-size: $second-large;

src/components/Banners/BannerBgImage.js

@@ -6,13 +6,16 @@ import { useBanner } from "../../hooks/index"
 import showdown from "showdown"
 import "./BannerBgImage.scss"
 
+import { useTheme } from "../../context/themeContext"
+
 const BannerBgImage = ({ banner }) => {
   const dataBanner = useBanner()
+  const { theme } = useTheme()
 
   const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find(
     ban => ban.strapiId === banner.id
   )
-  const { image, link, summary } = bannerSelected
+  const { image, imageDarkMode, link, summary } = bannerSelected
 
   const titles = summary
   let converter = new showdown.Converter()
@@ -23,10 +26,16 @@ const BannerBgImage = ({ banner }) => {
     return { __html: html }
   }
 
+  const imagen = getImage(image?.localFile)
+  const imagenDM = getImage(imageDarkMode?.localFile)
+
   return (
     <div className="bannerBgImage">
       {bannerSelected.type === "bgImage" ? (
-        <BgImage image={getImage(image.localFile)} className="bannerBgImage__bgImage">
+        <BgImage
+          image={theme === "dark" && imagenDM ? imagenDM : imagen}
+          className="bannerBgImage__bgImage"
+        >
           <div className="bannerBgImage__titleContainer">
             <div
               dangerouslySetInnerHTML={ReplaceHtml()}

src/components/Banners/BannerBgImage.scss

@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: $primary-container;
   }
   &__titleContainer {
     display: flex;
@@ -48,7 +49,7 @@
     h5 span p,
     h6 span p,
     p span p {
-      color: $white;
+      color: $primary-container;
       padding: 5px 20px;
       display: inline-block;
       transform: skew(15deg);
@@ -72,7 +73,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $blue;
+    background-color: $secondary-container
   }
   &__titleContainer {
     display: flex;
@@ -91,7 +92,7 @@
     span,
     p {
       font-size: $large;
-      color: $white;
+      color: white;
       font-weight: $max-bold;
       margin-bottom: 10px;
       text-align: center;
@@ -116,7 +117,7 @@
     h5 span p,
     h6 span p,
     p span p {
-      color: $blue;
+      color: $secondary-container;
       padding: 0 15px;
       display: inline-block;
       transform: skew(25deg);

src/components/Banners/BannerISO.js

@@ -31,7 +31,7 @@ const BannerISO = ({ banner, title }) => {
           ></div>
         </div>
         <div className="bannerISO__image ">
-          <GatsbyImage image={getImage(logo.localFile)} alt={`img-${title}`} />
+          <GatsbyImage image={getImage(logo?.localFile)} alt={`img-${title}`} />
         </div>
       </div>
     </div>

src/components/Banners/BannerISO.scss

@@ -1,7 +1,7 @@
 @import "../../styles/global.scss";
 
 .bannerISO {
-  background-color: $blue;
+  background-color: $secondary-container;
   width: 100%;
   min-height: 300px;
   padding: 50px;

src/components/Banners/BannerLogo.js

@@ -3,29 +3,44 @@ import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import { BgImage } from "gbimage-bridge"
 
 import { useBanner } from "../../hooks/index"
+import { useTheme } from "../../context/themeContext"
 
 import "./BannerLogo.scss"
 
 const BannerLogo = ({ banner, title }) => {
+  const { theme } = useTheme()
+
   const dataBanner = useBanner()
 
   const bannerSelected = dataBanner?.allStrapiBanners?.nodes.find(
     ban => ban.strapiId === banner.id
   )
-  const { image, logo, summary } = bannerSelected
+  const { image, imageDarkMode, logo, logoDarkMode, summary } = bannerSelected
 
-  const imagen = getImage(image.localFile)
-  const logoImage = getImage(logo.localFile)
+  const imagen = getImage(image?.localFile)
+  const logoImage = getImage(logo?.localFile)
+  // Version Dark Mode
+  const imagenDM = getImage(imageDarkMode?.localFile)
+  const logoDM = getImage(logoDarkMode?.localFile)
 
   return (
     <>
-      <BgImage image={imagen} className="BannerLogo__BgImage">
-        <div className="BannerLogo__Logo__Container">
-          <GatsbyImage image={logoImage} alt={`img-${title}`}></GatsbyImage>
-        </div>
-        <h1 className="BannerLogo__Title">{title}</h1>
-      </BgImage>
-
+      {theme === "dark" && imagenDM && logoDM ? (
+        <BgImage image={imagenDM} className="BannerLogo__BgImage">
+          <div className="BannerLogo__Logo__Container">
+            <GatsbyImage image={logoDM} alt={`img-${title}`}></GatsbyImage>
+          </div>
+          <h1 className="BannerLogo__Title">{title}</h1>
+        </BgImage>
+      ) : (
+        <BgImage image={imagen} className="BannerLogo__BgImage">
+          <div className="BannerLogo__Logo__Container">
+            <GatsbyImage image={logoImage} alt={`img-${title}`}></GatsbyImage>
+          </div>
+          <h1 className="BannerLogo__Title">{title}</h1>
+        </BgImage>
+      )}
+
       {summary ? (
         <div className="BannerLogo__summary">
           <div className="container ">

src/components/Banners/BannerLogo.scss

@@ -28,6 +28,7 @@
   }
 }
 .BannerLogo__BgImage {
+  background-color: $primary-container;
   width: 100%;
   min-height: 600px;
   display: flex;
@@ -48,6 +49,7 @@
   font-size: 1.2rem;
   line-height: 16px;
   padding: 1.8rem 0 0.5rem;
+  color: $primary;
 }
 .BannerLogo__Title::after {
   position: absolute;

src/components/Banners/BannerTop.js

@@ -3,17 +3,30 @@ import { getImage } from "gatsby-plugin-image"
 import { BgImage } from "gbimage-bridge"
 import "./BannerTop.scss"
 
+import { useTheme } from "../../context/themeContext"
+
 const BannerTop = ({ banner }) => {
-  const { image, title, summary } = banner
-  const imageBanner = getImage(image.localFile)
+  const { image, imageDarkMode, title, summary } = banner
+  const { theme } = useTheme()
+
+  const imageBanner = getImage(image?.localFile)
+  const imageDM = getImage(imageDarkMode?.localFile)
 
   return (
     <div className="banner">
-      <BgImage image={imageBanner} className="banner__bgImage">
-        <div className="banner__titleContainer">
-          <h1 className="banner__title">{title}</h1>
-        </div>
-      </BgImage>
+      {theme === "dark" && imageDM ? (
+        <BgImage image={imageDM} className="banner__bgImage">
+          <div className="banner__titleContainer">
+            <h1 className="banner__title">{title}</h1>
+          </div>
+        </BgImage>
+      ) : (
+        <BgImage image={imageBanner} className="banner__bgImage">
+          <div className="banner__titleContainer">
+            <h1 className="banner__title">{title}</h1>
+          </div>
+        </BgImage>
+      )}
       {summary ? (
         <div className="banner__summary">
           <div className="container ">

src/components/Banners/BannerTop.scss

@@ -18,7 +18,7 @@
     margin: 0;
   }
   &__summary {
-    background-color: $blue;
+    background-color: $secondary-container;
     display: flex;
     justify-content: center;
     align-items: center;

src/components/BitwayPage/Gallery/Gallery.js

@@ -39,7 +39,7 @@ const Gallery = ({ content, ...extra }) => {
         >
           {fillGrid(elem.galleryImage, photos[elem.type]).map(
             (image, index) => {
-              const prosImage = getImage(image.image.localFile)
+              const prosImage = getImage(image?.image?.localFile)
               return (
                 <BgImage
                   className={"bitway-gallery-" + index + " bitway-gallery-item"}

src/components/BitwayPage/Paragraph/Paragraph.scss

@@ -1,5 +1,6 @@
 @import "../../../styles/global.scss";
 .bitway-paragraph {
+  color: $primary;
   margin-bottom: 20px;
   & p {
     font-family: $primary-font;
@@ -54,7 +55,7 @@
         font-weight: $bold;
         margin: 0;
         display: inline-block;
-        color: white;
+        color: $primary-container;
         transform: skew(15deg);
       }
     }

src/components/BlogPage/BlogArticle/BlogArticle.js

@@ -9,7 +9,7 @@ const BlogArticle = ({ title, summary, image, slug, text }) => {
   return (
     <div className="article__container">
       <GatsbyImage
-        image={getImage(image.localFile)}
+        image={getImage(image?.localFile)}
         alt={title}
         className="article__image"
       />

src/components/Cards/Cards.js

@@ -3,8 +3,11 @@ import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import Markdown from "react-markdown"
 import { SubModulesEdTech } from "../index"
 import "./Cards.scss"
+import { useTheme } from "../../context/themeContext"
 
 const Cards = ({ tech }) => {
+  const { theme } = useTheme()
+
   const subModules = tech?.edTechSubmodules?.ed_tech_submodules.map(submod => (
     <p
       key={submod.id}
@@ -27,13 +30,14 @@ const Cards = ({ tech }) => {
       )
   )
 
-  const icon = getImage(tech?.icon.localFile)
+  const icon = getImage(tech?.icon?.localFile)
+  const iconDark = getImage(tech?.iconDarkMode?.localFile)
 
   return (
     <>
       <div className=" Cards container-fluid ">
         <div className="Cards__icon ">
-          <GatsbyImage image={icon} alt={tech.title} />
+          <GatsbyImage image={theme === "dark" && iconDark ? iconDark : icon} alt={tech.title} />
         </div>
         <div className="Cards__body col-12">
           <div className="Cards__title col-lg-8">{tech.title}</div>

src/components/Cards/Cards.scss

@@ -11,6 +11,7 @@
     transform: translateY(60%);
   }
   &__title {
+    color: $primary;
     font-weight: $max-bold;
     font-size: $medium;
     line-height: $large;
@@ -28,6 +29,8 @@
     }
   }
   &__description {
+    background-color: rgba(255, 255, 255, 0.089);
+    color: $primary;
     padding: 20px 25px;
     margin-bottom: 0;
     p {
@@ -37,11 +40,13 @@
     }
   }
   &__submodules {
+    background-color: none;
+    color: $primary;
     position: relative;
     padding: 0 45px;
 
     &__title {
-      margin: 0 0 30px 0;
+      margin: 2em 0 30px 0;
       font-size: $medium;
       line-height: 18px;
       text-align: center;
@@ -105,9 +110,11 @@
     &__submodules {
       box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
       border-radius: 18px;
+      background-color: rgba(255, 255, 255, 0.089);
 
       &--items {
         box-shadow: none;
+        background-color: unset;
       }
       &__title {
         margin: 0 0 5px 0;

src/components/ContactPage/Contact.scss

@@ -25,7 +25,7 @@
             transform: skew(-15deg);
             height: 40px;
             p {
-                color: $white;
+                color: $primary-container;
                 text-transform: uppercase;
                 padding: 5px 15px;
                 display: inline-block;
@@ -46,8 +46,8 @@
     .contact {
         max-width: 1400px;
         margin: 0 auto;
-        margin-bottom: 50px;
-        margin-top: 20px;
+        padding-bottom: 50px;
+        padding-top: 20px;
         flex-direction: row-reverse;
         justify-content: space-around;
         &__group {