bitlogic · marino-martin · Jan 17, 2022 · Jan 11, 2022 · Jan 11, 2022 · Jan 12, 2022
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -34,8 +34,8 @@ module.exports = {
       resolve: `gatsby-source-strapi`,
       options: {
         // apiURL: `http://lb-bitlogic-strapi-dev-48805770.sa-east-1.elb.amazonaws.com:1337`,
-        apiURL: `https://strapi.bitlogic.io`,
-        // apiURL: process.env.STRAPI_URL,
+        // apiURL: `https://strapi.bitlogic.io`,
+        apiURL: process.env.STRAPI_URL,
         queryLimit: 1000,
         collectionTypes: [
           `banners`,

diff --git a/public/page-data/index/page-data.json b/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","770810350","854109855","882490824"]}
+    "staticQueryHashes": ["1128713364","1292738615","176670904","1868451474","2432702713","2499611023","3422151259","67086494","770810350","882490824"]}
diff --git a/public/render-page.js.map b/public/render-page.js.map
diff --git a/src/components/Banners/BannerActionCall.scss b/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;

diff --git a/src/components/Banners/BannerBgImage.js b/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()}

diff --git a/src/components/Banners/BannerBgImage.scss b/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);

diff --git a/src/components/Banners/BannerISO.scss b/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;

diff --git a/src/components/Banners/BannerLogo.js b/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 ">

diff --git a/src/components/Banners/BannerLogo.scss b/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;

diff --git a/src/components/Banners/BannerTop.js b/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 { 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 ">

diff --git a/src/components/Banners/BannerTop.scss b/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;

diff --git a/src/components/BitwayPage/Paragraph/Paragraph.scss b/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);
       }
     }

diff --git a/src/components/Cards/Cards.js b/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}
@@ -28,12 +31,13 @@ const Cards = ({ tech }) => {
   )
 
   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>

diff --git a/src/components/Cards/Cards.scss b/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;

diff --git a/src/components/ContactPage/Contact.scss b/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 {

diff --git a/src/components/EdTechCards/EdTechCards.js b/src/components/EdTechCards/EdTechCards.js
@@ -4,7 +4,11 @@ import { Link } from "gatsby"
 import showdown from "showdown"
 import "./EdtechCards.scss"
 
+import { useTheme } from "../../context/themeContext"
+
 const EdTechCards = ({ title, edteches }) => {
+  const { theme } = useTheme()
+
   const titles = title
   let converter = new showdown.Converter()
   let post = titles
@@ -13,13 +17,19 @@ const EdTechCards = ({ title, edteches }) => {
   const ReplaceHtml = () => {
     return { __html: html }
   }
+
   const edtechCard = edteches
     ?.map((edtech, idx) => (
       <div className="row mt-4">
         <div key={idx} className="col-12 col-lg-8 EdtechCards__card">
           <div className="EdtechCards__image col-4 ">
             <GatsbyImage
-              image={getImage(edtech?.homeIcon.localFile)}
+              image={
+                theme === "dark" &&
+                getImage(edtech?.homeIconDarkMode?.localFile)
+                  ? getImage(edtech?.homeIconDarkMode?.localFile)
+                  : getImage(edtech?.homeIcon?.localFile)
+              }
               alt={edtech.homeTitle}
             />{" "}
           </div>

diff --git a/src/components/EdTechCards/EdtechCards.scss b/src/components/EdTechCards/EdtechCards.scss
@@ -1,7 +1,7 @@
 @import "../../styles/global.scss";
 
 .EdtechCards {
-  background-color: $blue;
+  background-color: $secondary-container;
   width: 100%;
 
   padding: 33px 30px;
@@ -35,7 +35,6 @@
   &__card {
     display: flex;
     align-items: flex-end;
-
     margin-right: 10px;
   }
   &__image {