fix(light-theme): update bg image in header component of home and abo…

…ut us page

src/components/AboutUsContent/index.js

@@ -20,10 +20,10 @@
  ********************************************************************************/
 
 import React from "react";
-import TractusXBG from "@site/static/img/tractus-x_bg-updated.svg";
 import LicensesImg from "@site/static/img/licenses-minified.png";
 import IFrameComponent from "../../components/IFrameComponent";
 import styles from "./styles.module.css";
+import ThemedImage from '@theme/ThemedImage';
 
 export default function AboutUsContent() {
   return (
@@ -38,7 +38,14 @@ export default function AboutUsContent() {
           </p>
 
           <div className={styles.img_container}>
-            <TractusXBG className={styles.img}/>
+          <ThemedImage
+          // alt="About image"
+          sources={{
+            light: ('/img/tractus-x_bg-updated_light.png'),
+            dark: ('/img/tractus-x_bg-updated.svg'),
+          }}
+          className={styles.hero_bg}
+        />
           </div>
 
           <p className="description-p">

src/components/AboutUsHeader/index.js

@@ -32,7 +32,7 @@ export default function AboutUsHeader() {
         <ThemedImage
           // alt="Docusaurus themed image hero background"
           sources={{
-            // light: ('/img/main-bg-new.png'),
+            light: ('/img/main-bg-light.png'),
             dark: ('/img/main_bg-min.png'),
           }}
           className={styles.hero_bg}
@@ -45,7 +45,7 @@ export default function AboutUsHeader() {
           </div>
           <div className={styles.information_container}>
             <h1 className="headers-title-h1">About Tractus X</h1>
-            <p className="headers-subtitle-p">
+            <p className={styles.subtitle}>
               Eclipse Tractus-X™  is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation.
             </p>
           </div>

src/components/AboutUsHeader/styles.module.css

@@ -57,12 +57,25 @@
   flex-direction: column;
   justify-content: center;
 }
+
+.subtitle {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  max-width: 60%;
+}
 
 @media screen and (max-width: 996px) {
   .about_header {
     height: auto;
   }
 
+  .subtitle {
+    font-size: 16px;
+    line-height: 20px;
+    margin-top: -1rem;
+  }
+
   .container {
     height: auto;
     flex-direction: column;
@@ -100,6 +113,11 @@
     height: fit-content;
   }
 
+  .subtitle {
+    font-size: 14px;
+    line-height: 16px;
+  }
+
   .svg {
     width: 80%;
     height: 80%;

src/components/CommunityComponent/styles.module.css

@@ -195,5 +195,6 @@
   margin-top: -10px;
   top: 120px;
   cursor: pointer;
+  z-index: 9;
   background-color: var(--ifm-color-card-border);
 }

src/components/HomePageHeader/index.js

@@ -33,7 +33,7 @@ export default function HomePageHeader() {
       <ThemedImage
         // alt="Docusaurus themed image hero background"
         sources={{
-          // light: ('/img/main-bg-new.png'),
+          light: ('/img/main-bg-light.png'),
           dark: ('/img/main-bg-new.png'),
         }}
         className={styles.hero_bg}