fix(light-themes): create a component to render legal and license inf…

…o in about us page

src/components/AboutUsContent/index.js

@@ -34,51 +34,81 @@ export default function AboutUsContent() {
           <h2 className="title-h2">Background</h2>
 
           <p className="description-p">
-           The Eclipse Tractus-X™ project is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation. The Eclipse Foundation is not-for-profit corporation that it supported by over 320 members, and represents the worlds largest sponsored collection of Open Source projects and developers.
+            The Eclipse Tractus-X™ project is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation. The Eclipse Foundation is not-for-profit corporation that it supported by over 320 members, and represents the worlds largest sponsored collection of Open Source projects and developers.
           </p>
 
           <div className={styles.img_container}>
-          <ThemedImage
-          // alt="About image"
-          sources={{
-            light: ('/img/tractus-x_bg-updated_light.png'),
-            dark: ('/img/tractus-x_bg-updated.svg'),
-          }}
-          className={styles.hero_bg}
-        />
+            <ThemedImage
+              // alt="About image"
+              sources={{
+                light: ('/img/tractus-x_bg-updated_light.png'),
+                dark: ('/img/tractus-x_bg-updated.svg'),
+              }}
+              className={styles.img}
+            />
           </div>
 
           <p className="description-p">
-          The Catena-X ecosystem consists of the following three areas, which are connected by the Tractus-X project:
+            The Catena-X ecosystem consists of the following three areas, which are connected by the Tractus-X project:
           </p>
 
           <p className="description-p">
-          (1) The <strong>Catena-X Automotive Network e.V.</strong> (in the following called ‘association’) is responsible for standardization, certifications, and governance of the Catena-X ecosystem and is managing the Eclipse Tractus-X project. Association members can participate in working groups to actively shape the Catena-X ecosystem.
+            (1) The <strong>Catena-X Automotive Network e.V.</strong> (in the following called ‘association’) is responsible for standardization, certifications, and governance of the Catena-X ecosystem and is managing the Eclipse Tractus-X project. Association members can participate in working groups to actively shape the Catena-X ecosystem.
           </p>
 
           <p className="description-p">
-          (2) The <strong>development environment</strong> is responsible for the development of the initial reference implementations of the core and enabling services. The reference implementations are managed in the Tractus-X repositories, that contain, among other things, source code, technical documentation, and deployment instructions.
+            (2) The <strong>development environment</strong> is responsible for the development of the initial reference implementations of the core and enabling services. The reference implementations are managed in the Tractus-X repositories, that contain, among other things, source code, technical documentation, and deployment instructions.
           </p>
 
           <p className="description-p">
-          (3) In the <strong>operating environment</strong>, the open-source reference implementations can be freely used, modified, and operated by providers - including core service provider (e.g., marketplace), enablement service provider (e.g., Eclipse Dataspace Connector), and business application provider (e.g., traceability applications). 
+            (3) In the <strong>operating environment</strong>, the open-source reference implementations can be freely used, modified, and operated by providers - including core service provider (e.g., marketplace), enablement service provider (e.g., Eclipse Dataspace Connector), and business application provider (e.g., traceability applications).
           </p>
-          
+
           <p className="description-p">
-          Tractus-X supports developers to accelerate the development and operation of services / applications and to contribute significantly to the rapid scaling of the ecosystem. Therefore Tractus-X provides reference implementations of core and enabling services as well as KITs to accelerate the development of interoperable and innovative applications and the on-boarding to the Catena-X ecosystem. 
+            Tractus-X supports developers to accelerate the development and operation of services / applications and to contribute significantly to the rapid scaling of the ecosystem. Therefore Tractus-X provides reference implementations of core and enabling services as well as KITs to accelerate the development of interoperable and innovative applications and the on-boarding to the Catena-X ecosystem.
           </p>
-          
+
           <p className="description-p">
-          Reference implementations are free and open-source software (FOSS) components, which are managed in the associated Eclipse Tractus-X project. Other reference implementations (e.g., DAPS) used by the Catena-X ecosystem but developed by other projects such as Gaia-X or IDSA can also be found in the Eclipse Tractus-X project.
+            Reference implementations are free and open-source software (FOSS) components, which are managed in the associated Eclipse Tractus-X project. Other reference implementations (e.g., DAPS) used by the Catena-X ecosystem but developed by other projects such as Gaia-X or IDSA can also be found in the Eclipse Tractus-X project.
           </p>
 
           <p className="description-p">
-          Reference implementations are released under the Apache 2.0 license. According to the Apache 2.0 license, anyone can freely use, modify, and distribute the reference implementations in any environment. Reference implementations are usually not market-ready solutions and require a certain industrialization effort, which can vary depending on the software component. As part of the development environment, the Catena-X consortium provides the first open-source Catena-X reference implementations for core and enabling services.
+            Reference implementations are released under the Apache 2.0 license. According to the Apache 2.0 license, anyone can freely use, modify, and distribute the reference implementations in any environment. Reference implementations are usually not market-ready solutions and require a certain industrialization effort, which can vary depending on the software component. As part of the development environment, the Catena-X consortium provides the first open-source Catena-X reference implementations for core and enabling services.
           </p>
         </div>
 
-        <div className={styles.img_container}>
-          <img className={styles.licenses} src={LicensesImg} /> 
+        <div className={styles.box_container}>
+          <div>
+            <ThemedImage
+              // alt="About image"
+              sources={{
+                light: ('/img/Bild.png'),
+                dark: ('/img/Bild.png'),
+              }}
+              className={styles.logo}
+            />
+            <div className={styles.text}>
+              <p className="description-p">Licenses</p>
+              <p className="subtitle-h3">Apache License Version 2.0 (Code)</p>
+              <p className="subtitle-h3">CC BY 4.0 (Non-Code)</p>
+            </div>
+          </div>
+          <div>
+            <ThemedImage
+              // alt="About image"
+              sources={{
+                light: ('/img/logo_tractus-x.svg'),
+                dark: ('/img/logo_tractus-x.svg'),
+              }}
+              className={styles.logo}
+            />
+            <div className={styles.text}>
+              <p className="description-p">Legal</p>
+              <p className="subtitle-h3">For this Eclipse Project we use Tractus-X instead of Catena-X as a name because the Catena-X Association wants to
+                keep it’s name as a trademark
+              </p>
+            </div>
+          </div>
         </div>
 
         <IFrameComponent
@@ -87,7 +117,7 @@ export default function AboutUsContent() {
           title={''}
           headerDescription={''}
         />
-        
+
       </div>
     </section>
   );

src/components/AboutUsContent/styles.module.css

@@ -28,6 +28,35 @@
   padding-top: 4rem;
 }
 
+.box_container {
+  margin: auto;
+}
+
+.box_container div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  flex-direction: column;
+  align-items: flex-start !important;
+  margin-left: 20px;
+}
+
+.logo {
+  padding: 25px;
+  width: 120px;
+}
+
+.text p {
+  display: block;
+  text-align: left;
+  padding-bottom: 0px !important;
+  margin-bottom: 0px !important;
+  width: 600px;
+}
+
 .img_container {
   display: flex;
   justify-content: center;
@@ -69,6 +98,10 @@
   .licenses {
     width: 80%;
   }
+
+  .text p {
+    width: 300px;
+  }
 }
 
 @media screen and (max-width: 600px) {
@@ -83,4 +116,8 @@
   .licenses {
     width: 100%;
   }
+
+  .text p {
+    width: 300px;
+  }
 }