feat(kits): update home page corousel component with new data. Create…

… Kits page and relavent sub pages

docs/kit-process/processes/create_KIT_page.md

@@ -133,7 +133,7 @@ Each folder/KIT's content is structured in at least four pages/subfolders:
             type: 'dropdown',
             label: 'KITs',
             position: 'left',
-            to: '/developer',
+            to: '/Kits',
             items: [
               {
                 to: '/docs-kits/kits/Business%20Partner%20Kit/Adoption%20View',

docusaurus.config.js

@@ -370,7 +370,7 @@ const config = {
             type: 'dropdown',
             label: 'KITs',
             position: 'left',
-            to: '/developer',
+            to: '/Kits',
             items: [
               {
                 to: '/docs-kits/kits/knowledge-agents/adoption-view/intro',

src/components/AboutUsCard/index.js

@@ -19,38 +19,40 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import React from "react";
-import Link from "@docusaurus/Link";
-import AboutUsTeaser from "@site/static/img/about-us-card-minified.png";
-
-import styles from "./styles.module.css";
-
-export default function AboutUsCard() {
-  return (
-    <section className={styles.about_us}>
-      <div className={styles.maincontainer}>
-        <div className={styles.headercontainer}>
-          <h2 className={styles.title}>Welcome to the community</h2>
-          <p className={styles.subtitle}>
-          The magic behind Eclipse Tractus-X
-          </p>
-        </div>
-        <div className={styles.container}>
-        <div className={styles.img_container}>
-          <img className={styles.img} src={AboutUsTeaser} />
-        </div>
-        <div className={styles.information_container}>
-          <p className={styles.description}>
-            <span className={styles.descriptionhighlight}> The Eclipse Tractus-X™ project</span> is the official open-source project in the Catena-X ecosystem under the umbrella of the Eclipse Foundation. The Eclipse Foundation is a not-for-profit corporation that is supported by over 320 members, and represents the worlds largest sponsored collection of Open Source projects and developers.
-          </p>
-          <div>
-            <Link className={styles.outlinedbutton} to="/aboutus">
-              About Us
-            </Link>
-          </div>
-        </div>
-      </div>
-      </div>
-    </section>
-  );
-}
+ import React from "react";
+ import Link from "@docusaurus/Link";
+ import AboutUsTeaser from "@site/static/img/about-us-card-minified.png";
+
+ import styles from "./styles.module.css";
+
+ export default function AboutUsCard({ title, highlightText, description, descriptionhighlight, buttonText, link}) {
+   return (
+     <section className={styles.about_us}>
+       <div className={styles.maincontainer}>
+         <div className={styles.headercontainer}>
+           <h2 className={styles.title}>{highlightText}</h2>
+           <p className={styles.subtitle}>
+           {title}
+           </p>
+         </div>
+         <div className={styles.container}>
+         <div className={styles.img_container}>
+           <img className={styles.img} src={AboutUsTeaser} />
+         </div>
+         <div className={styles.information_container}>
+           <p className={styles.description}>
+             <span className={styles.descriptionhighlight}> {descriptionhighlight}</span>{description}
+           </p>
+           <div>
+             <Link className={styles.outlinedbutton} to={link}>
+               {buttonText}
+             </Link>
+           </div>
+         </div>
+       </div>
+       </div>
+     </section>
+   );
+ }
+
+

src/components/DeepdiveHeader/index.js

@@ -24,17 +24,17 @@ import KitsCoreSvg from '@site/static/img/kits&core.svg'
 
 import styles from "./styles.module.css";
 
-export default function DeepdiveHeader() {
+export default function DeepdiveHeader({title, description, showImage}) {
   return (
       <header className={styles.deepdive_header}>
-      <div className={styles.container}>
+      <div className={showImage ? styles.container : styles.no_bg_container}>
         <div className={styles.svg_container}>
           <KitsCoreSvg className={styles.svg}/>
         </div>
         <div className={styles.information_container}>
-          <h1 className="headers-title-h1">KIT Deepdive</h1>
+          <h1 className="headers-title-h1">{title}</h1>
           <p className="headers-subtitle-p">
-            KIT, short for Keep It Together, offers open-source resources and comprehensive documentation designed for the use cases of Catena-X ecosystem.
+            {description}
           </p>
         </div>
       </div>

src/components/DeepdiveHeader/styles.module.css

@@ -6,7 +6,7 @@
 .deepdive_header {
   position: relative;
   overflow: hidden;
-  height: 30vh;
+  height: 50vh;
 }
 
 .container {
@@ -15,10 +15,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  /* background-image: url("/static/img/main_bg-min.png");
+  background-image: url("/static/img/main_bg-min.png");
   background-position: top right;
   background-repeat: no-repeat;
-  background-size: cover; */
+  background-size: cover;
+}
+
+.no_bg_container {
+  width: 100vw;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .svg_container {

src/components/IFrameComponent/index.js

@@ -0,0 +1,58 @@
+/********************************************************************************* 
+ * Copyright (c) 2023 BMW Group AG
+ * Copyright (c) 2023 Mercedes Benz AG 
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ * 
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ * 
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+export default function IFrameComponent({ title, description, link, headerDescription }) {
+    const [display, setDisplay] = useState('block');
+
+    return (
+        <div className={styles.title_container}>
+            {headerDescription && (
+            <p className="description-p">
+            {headerDescription}
+          </p>
+          )}
+            <h2 className="title-h2">{title}</h2>
+
+            <p className="description-p">
+                {description}
+            </p>
+
+            <div className={styles.iframe_container}>
+                <div
+                    className={styles.thumbnail}
+                    style={{ display: display }}
+                    onMouseOver={() => setDisplay("none")}
+                ></div>
+                <iframe
+                    width="100%"
+                    height="450"
+                    src={link}
+                    title="YouTube video player"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                ></iframe>
+            </div>
+        </div>
+    );
+}

src/components/IFrameComponent/styles.module.css

@@ -0,0 +1,77 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+  .title_container {
+    width: 100%;
+    height: auto;
+    padding-top: 4rem;
+  }
+
+  .siblings_paragraph_container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .siblings_paragraph {
+    width: 40%;
+  }
+
+  .img_container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin: 2rem 0;
+  }
+
+  .img {
+    width: 100%;
+    height: auto;
+  }
+
+  .iframe_container {
+    width: 100%;
+    height: 450px;
+    position: relative;
+  }
+
+  .thumbnail {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-image: url("/static/img/main_bg-min.png");
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  @media screen and (max-width: 996px) {
+
+    .title_container {
+      padding-top: 3rem;
+    }
+
+    .siblings_paragraph_container {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .siblings_paragraph {
+      width: 90%;
+    }
+
+    .img {
+      width: 100%;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+
+    .img {
+      width: 100%;
+    }
+  }
+

src/components/KitsPageHeader/index.js

@@ -0,0 +1,44 @@
+/********************************************************************************* 
+ * Copyright (c) 2023 BMW Group AG
+ * Copyright (c) 2023 Mercedes Benz AG 
+ * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ * 
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ * 
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ * 
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+ import React from "react";
+ import Link from "@docusaurus/Link";
+ import NewsTicker from "../NewsTicker";
+
+ import styles from "./styles.module.css";
+
+ export default function KitsPageHeader() {
+   return (
+     <header className={styles.heroBanner}>
+       <div className={styles.container}>
+         <h1 className={styles.title}>
+           KIT
+         </h1>
+         <div className={styles.subtitle_box}>
+           <p className={styles.subtitle}>
+           Introduction to the Catena-X KITS.
+           </p>
+         </div>
+       </div>
+     </header>
+   );
+ }
+