SBIT-70: Release a PROD

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

@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","1693928026","176670904","2898073905","3206133181","3298386516","4006044966"]}
+    "staticQueryHashes": ["1128713364","176670904","1886264361","2898073905","3206133181","4006044966","943162249"]}

src/components/BannerHead/BannerHead.js

@@ -2,31 +2,44 @@ import React from "react"
 import "./BannerHead.scss"
 import MarkdownView from "react-showdown"
 import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { useTheme } from "../../context/themeContext"
 
 const BannerHead = ({ data }) => {
-    const title = data?.title;
+  console.log(data)
+  const { theme } = useTheme()
 
-    const checkImage = () => {
+  const title = data?.title
 
-        if (data?.image?.url) {
-            return <img src={data?.image?.url} alt={data?.image?.name} />
-        } else {
-            const image = getImage(data?.image?.localFile)
-            return <GatsbyImage image={image} alt={`img-${title}`}></GatsbyImage>
-        }
+  const checkImage = () => {
+    if (data?.image?.url) {
+      return (
+        <img
+          src={
+            theme === "dark" && data?.imageDark
+              ? data?.imageDark?.url
+              : data?.image?.url
+          }
+          alt={data?.image?.name}
+        />
+      )
+    } else {
+      const image = getImage(data?.image?.localFile)
+      const imageDark = data?.imageDark && getImage(data?.imageDark?.localFile)
+      return (
+        <GatsbyImage
+          image={theme === "dark" && imageDark ? imageDark : image}
+          alt={`img-${title}`}
+        ></GatsbyImage>
+      )
     }
+  }
 
-    return (
-        <div class="banner d-flex justify-content-center">
-            <div class="banner__image">
-                {checkImage()}
-            </div>
-
-            {title && (
-                <MarkdownView markdown={title} />
-            )}
-        </div>
-    )
+  return (
+    <div class="banner d-flex justify-content-center">
+      <div class="banner__image">{checkImage()}</div>
+      {title && <MarkdownView markdown={title} />}
+    </div>
+  )
 }
 
 export default BannerHead

src/components/BannerHead/BannerHead.scss

@@ -5,7 +5,7 @@
   width: 100%;
   min-height: 300px;
   align-items: center;
-
+  color: $primary;
   h3 {
     color: $primary;
     text-align: center;

src/components/BannerList/Banner.scss

@@ -1,6 +1,7 @@
 @import "../../styles/global.scss";
 
 .bannerList {
+  color: $primary;
   .card_item {
     p {
       text-align: justify;

src/components/BlogPage/BlogContainer.js

@@ -16,7 +16,6 @@ const Blog = () => {
   const bannerHead = blogData?.allStrapiBlogPage?.nodes[0]?.bannerHead
   const filterArticle = data.map(category => dataArticles.filter(article => category.name === article.blog_category.name))
 
-  console.log(bannerHead)
   const {
     pageTitle,
     pageDescription,

src/components/CasesSection/CasesSection.scss

@@ -1,12 +1,14 @@
 @import "../../styles/global.scss";
 
 .casesSection {
+    color: $primary;
     h2 {
         text-align: center;
         font-weight: 700;
     }
 }
 .case {
+    color: $primary;
     --bs-gutter-x: 0 !important;
     padding: 10px;
     &__img {

src/components/DualSection/DualSection.scss

@@ -27,22 +27,22 @@
   }
 }
 
-
 .one_sec {
+  color: $primary;
+  &-background{
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding: 1em 0 0 0;
+  }
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   gap: 3em;
   padding: 3em 0;
   button {
-    background: $light-grey;
-    color: white;
-    font-weight: 500;
-    border-radius: 3px;
-    border: none;
-    padding: 0.3em;
-    a{
+    @include primaryBtn;
+    a {
       color: inherit;
     }
   }
@@ -51,30 +51,35 @@
     display: block;
   }
 
-  &-title{
+  &-title {
     flex-basis: 45%;
-    h3{
-      font-weight: 400;
+    h3 {
+      font-weight: 700;
+      font-size: 36px;
+      line-height: 40px;
+    }
+    &-body{
+      font-weight: 400 !important;
     }
   }
 
-  &-img{
+  &-img {
     flex-basis: 55%;
-    img{
+    img {
       width: 100%;
-      padding: 0 0 0 3em;
+      padding: 0;
     }
   }
 
   @media screen and (max-width: $breakpoint-xl) {
     flex-direction: column-reverse;
-    &-img{
+    &-img {
       flex-basis: 100%;
     }
-    &-title{
+    &-title {
       padding: 0 10vw;
       flex-basis: 100%;
     }
   }
-
 }
+

src/components/DualSection/OneSection.js

@@ -1,25 +1,43 @@
 import React from "react"
+import { useTheme } from "../../context/themeContext"
 
 const OneSection = ({ data: { id, strapi_component, dualSectionPart } }) => {
-  const { title, button, description, image } = dualSectionPart
-    ? dualSectionPart[0]
-    : {}
+  const { theme } = useTheme()
+  const {
+    title,
+    button,
+    description,
+    image,
+    backgroundImage,
+    backgroundImageDark,
+  } = dualSectionPart ? dualSectionPart[0] : {}
 
   return (
-    <div className="one_sec container" id={strapi_component + "-" + id}>
-      <div className="one_sec-title">
-        <h1>{title}</h1>
-        <p>{description}</p>
-        {button && (
-          <button>
-            <a href={button.url} target="_blank" rel="noreferrer">
-              {button.content}
-            </a>
-          </button>
-        )}
-      </div>
-      <div className="one_sec-img">
-        <img src={image?.url} alt="one_sec" />
+    <div
+      className="one_sec-background"
+      style={{
+        backgroundImage: `url(${
+          theme === "dark" && backgroundImageDark?.url
+            ? backgroundImageDark?.url
+            : backgroundImage?.url
+        })`,
+      }}
+    >
+      <div className="one_sec container" id={strapi_component + "-" + id}>
+        <div className="one_sec-title">
+          <h3>{title}</h3>
+          <h3 className="one_sec-title-body">{description}</h3>
+          {button && (
+            <button>
+              <a href={button.url} target="_blank" rel="noreferrer">
+                {button.content}
+              </a>
+            </button>
+          )}
+        </div>
+        <div className="one_sec-img">
+          <img src={image?.url} alt="one_sec" />
+        </div>
       </div>
     </div>
   )

src/components/Hero/Hero.scss

@@ -1,5 +1,6 @@
 @import "../../styles/global.scss";
 .hero {
+  color: $primary;
   overflow: hidden;
   display: flex;
   flex-direction: row;

src/components/HomePage/HomeContainer/HomeContainer.js

@@ -12,14 +12,16 @@ import VideoBackground from "../../videoBackground/VideoBackground"
 import Hero from "../../Hero/Hero"
 import DualSection from "../../DualSection/DualSection"
 import OneSection from "../../DualSection/OneSection"
+import Text from "../../Text/Text"
 
 const bodyComponents = {
   "home.hero": data => <Hero data={data} />,
   "home.transition": data => <AnimatedTransitionContinous data={data} />,
   "home.quote": data => <Quote data={data} />,
   "home.video-background": data => <VideoBackground data={data} />,
+  "components.text": data => <Text data={data} />,
   "home.dual-section": data =>
-  data.dualSectionPart.length === 1 ? (
+    data.dualSectionPart.length === 1 ? (
       <OneSection data={data} />
     ) : (
       <DualSection data={data} />
@@ -43,7 +45,7 @@ const Home = ({ location }) => {
 
       {/* Dynamic zone */}
       {data.allStrapiHome.nodes[0].body.map(component =>
-        bodyComponents[component.strapi_component](component)
+        bodyComponents[component.strapi_component] ? bodyComponents[component.strapi_component](component) : null
       )}
     </Layout>
   )

src/components/LogosSection/logosSection.js

@@ -0,0 +1,33 @@
+import "./logosSection.scss"
+import React from "react"
+import { useTheme } from "../../context/themeContext"
+
+const LogosSection = ({ data }) => {
+  const { title, summary, media } = data
+
+  const { theme } = useTheme()
+
+  const logoList = media.map(logo => {
+    return (
+      <div className="logos__image">
+        <img
+          src={
+            theme === "dark" && logo.imageDark
+              ? logo.imageDark.url
+              : logo.img.url
+          }
+          alt={logo.name}
+        />
+      </div>
+    )
+  })
+  return (
+    <div className="logos container py-3 my-3">
+      {title && <h2 className="logos__title">{title}</h2>}
+      {summary && <h6 className="logos__summary px-lg-3">{summary}</h6>}
+      <div className="logos__logos">{logoList}</div>
+    </div>
+  )
+}
+
+export default LogosSection

src/components/LogosSection/logosSection.scss

@@ -0,0 +1,42 @@
+@import "../../styles/global.scss";
+
+.logos {
+    &__title {
+        font-weight: 700;
+        padding-bottom: 20px;
+        text-align: center;
+        width: fit-content;
+        margin: 0 auto;
+    }
+    &__summary {
+        font-weight: 400;
+        text-align: center;
+        line-height: 30px;
+    }
+    &__logos {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &__image {
+        margin-top: 15px;
+        max-width: 220px;
+    }
+}
+
+@media screen and (min-width: $breakpoint-md) {
+    .logos {
+        &__logos {
+            margin: 30px 0;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        &__image {
+            margin: 10px 10px 0 10px;
+        }
+    }
+}
+