diff --git a/docs/kit-process/processes/create_KIT_page.md b/docs/kit-process/processes/create_KIT_page.md
index 7d90d50f0a0..20cbb3d33e5 100644
--- a/docs/kit-process/processes/create_KIT_page.md
+++ b/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',
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 24e9d083714..8c58ffbc77a 100644
--- a/docusaurus.config.js
+++ b/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',
@@ -532,11 +532,7 @@ const config = {
{
label: "Icons used from svgrepo with CC0 License",
href: "https://www.svgrepo.com/",
- },
- {
- to: '/docs/kits/Behaviour%20Twin%20RuL%20Kit/Adoption%20View%20Remaining%20Useful%20Life%20Kit',
- label: 'Behaviour Twin RuL',
- },
+ }
],
},
{
diff --git a/src/components/AboutUsCard/index.js b/src/components/AboutUsCard/index.js
index 5f86e1284b4..e8d80520195 100644
--- a/src/components/AboutUsCard/index.js
+++ b/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 (
-
-
-
-
Welcome to the community
-
- The magic behind Eclipse Tractus-X
-
-
-
-
-
-
-
-
- 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 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.
-
-
-
- About Us
-
-
-
-
-
-
- );
-}
+ 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 (
+
+
+
+
{highlightText}
+
+ {title}
+
+
+
+
+
+
+
+
+ {descriptionhighlight}{description}
+
+
+
+ {buttonText}
+
+
+
+
+
+
+ );
+ }
+
+
\ No newline at end of file
diff --git a/src/components/AboutUsContent/index.js b/src/components/AboutUsContent/index.js
index e12c9f3862c..c3e162a3eba 100644
--- a/src/components/AboutUsContent/index.js
+++ b/src/components/AboutUsContent/index.js
@@ -22,7 +22,7 @@
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";
export default function AboutUsContent() {
@@ -73,6 +73,13 @@ export default function AboutUsContent() {
+
+
diff --git a/src/components/CarouselSuccessStories/index.js b/src/components/CarouselSuccessStories/index.js
new file mode 100644
index 00000000000..1cb3b3fe340
--- /dev/null
+++ b/src/components/CarouselSuccessStories/index.js
@@ -0,0 +1,120 @@
+/*********************************************************************************
+ * 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 Link from "@docusaurus/Link";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+import { successStories } from "@site/utils/successStories";
+
+import ArrowCircleRightOutlinedIcon from '@mui/icons-material/ArrowCircleRightOutlined';
+import ArrowCircleLeftOutlinedIcon from '@mui/icons-material/ArrowCircleLeftOutlined';
+
+import styles from "./styles.module.css";
+
+export default function CarouselSuccessStories() {
+ let [progress, setProgress] = useState((100 / successStories.length))
+ let [slideToShow, setSlideToShow] = useState(1.1)
+
+ const PrevArrow = () => {
+ return (
+ slider?.current?.slickPrev()}/>
+ );
+ };
+
+ const NextArrow = () => {
+ return (
+ slider?.current?.slickNext()}/>
+ );
+ };
+
+ let settings = {
+ dots: false,
+ infinite: false,
+ speed: 450,
+ slidesToShow: 1.1,
+ slidesToScroll: 1,
+ arrows: true,
+ prevArrow: ,
+ nextArrow: ,
+ afterChange: current => {
+ setProgress(100/ (successStories.length - slideToShow + 1) * (current + 1));
+ }
+ };
+
+ const slider = React.useRef(null);
+
+ const SuccessStoryCard = ({id, img, title, description, pageRoute, buttonName}) => {
+ return (
+
+
+
+
+
+
+
+
{title}
+
+
+
{description}
+
+
+ {buttonName}
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
Success Stories
+
+
+ Solutions / apps that already used one of the KITs and are sharing their experience with it on how they used the KIT for a use case.
+
+
+ );
+}
diff --git a/src/components/CarouselSuccessStories/styles.module.css b/src/components/CarouselSuccessStories/styles.module.css
new file mode 100644
index 00000000000..6c6e76c3de9
--- /dev/null
+++ b/src/components/CarouselSuccessStories/styles.module.css
@@ -0,0 +1,169 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.carousel {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem 0;
+ background-color: var(--ifm-background-color);
+}
+
+.container {
+ width: 70vw;
+ padding-bottom: 4rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.title_container {
+ width: 50vw;
+ text-align: left;
+}
+
+.subtitle_container {
+ width: 60%;
+}
+
+.slider_container {
+ width: 50vw;
+ margin-top: 1rem;
+ border-radius: 10px;
+ position: relative;
+}
+
+.slider_item {
+ display: flex;
+ gap: 2rem;
+ height: auto
+}
+
+.slider_img_container {
+ width: 60%;
+}
+
+.slider_img {
+ width: 100%;
+ max-height: 100%;
+ border-radius: 10px;
+ object-fit: cover;
+}
+
+.slider_info_container {
+ display: flex;
+ align-items: center;
+ width: 35%;
+}
+
+.btn_slider_left {
+ cursor: pointer;
+ color: var(--ifm-color-primary);
+ position: absolute;
+ z-index: 10;
+ top: 50%;
+ left: -3rem;
+}
+
+.btn_slider_right {
+ cursor: pointer;
+ color: var(--ifm-color-primary);
+ position: absolute;
+ z-index: 10;
+ top: 50%;
+ right: -3rem;
+}
+
+.btn_slider_left:hover,
+.btn_slider_right:hover {
+ color: var(--ifm-font-color-base);
+}
+
+.btn_slider_left:active,
+.btn_slider_right:active {
+ color: var(--ifm-color-primary-lightest);
+}
+
+.progress_bar_container {
+ width: 100%;
+ height: 2px;
+ background-color: #555;
+ margin-top: 3rem;
+}
+
+.progress_bar {
+ height: 100%;
+ background-color: #ccc;
+ transition-duration: 0.5s;
+}
+
+@media screen and (max-width: 1360px) {
+ .slider_container {
+ width: 60vw;
+ }
+}
+
+@media screen and (max-width: 1160px) {
+ .slider_container {
+ width: 70vw;
+ }
+}
+
+@media screen and (max-width: 1040px) {
+ .container {
+ width: 70vw;
+ }
+
+ .slider_container {
+ width: 75vw;
+ }
+}
+
+@media screen and (max-width: 996px) {
+ .container {
+ width: 80vw;
+ }
+
+ .subtitle_container {
+ width: 80%;
+ }
+
+ .slider_container {
+ width: 80vw;
+ }
+
+ .slider {
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 780px) {
+ .slider_item {
+ flex-direction: column;
+ }
+
+ .slider_img_container {
+ width: 75%;
+ }
+
+ .slider_info_container {
+ width: 85%;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .subtitle_container {
+ width: 100%;
+ }
+
+ .slider_container {
+ width: 70vw;
+ }
+
+ .slider_img_container {
+ width: 85%;
+ }
+}
diff --git a/src/components/DeepdiveContent/index.js b/src/components/DeepdiveContent/index.js
new file mode 100644
index 00000000000..4de0b2ebd69
--- /dev/null
+++ b/src/components/DeepdiveContent/index.js
@@ -0,0 +1,137 @@
+/*********************************************************************************
+ * 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 KitToolbox from "@site/static/img/kit-toolbox-min.png";
+import Thumbnail from "@site/static/img/main_bg-min.png"
+
+import styles from "./styles.module.css";
+import IFrameComponent from "../IFrameComponent";
+
+export default function DeepdiveContent() {
+ return (
+
+
+
+
+
+
+ General
+
+
+
+ To establish a global data space, Catena-X offers a range of standards and developer resources. Standards are published on the Catena-X Association website (Standard Library), while the developer resources, including KITs, are open for use and collaboration within the Tractus-X community, promoting trust. The development and maintenance of KITs forms the basis for further use cases, interoperable business applications, and services.
+
+
+
+ There are two main customer groups for KITs:
+
+
+
+
+
+ User(Data Provider / Consumer)
+
+
+ Companies that are part of the automotive value chain and participate in a Catena-X use case. These companies require technical support, specifications, and guidance. For example, a production company needs to exchange data on carbon footprint with its partners. KITs keep together the necessary software components, standards, policies, and deployment scripts, ensuring these companies have everything required to successfully participate in a Catena-X use case. In Catena-X they are called adopters.
+
+
+
+
+ App- /Service Provider
+
+
+ Companies interested in offering an application or service for a specific use case on one of the Catena-X marketplaces must align their existing solutions with Catena-X requirements. Within a KIT, these companies receive guidelines and technical support necessary for adapting their solutions to meet Catena-X conformity. These companies are referred to as solution providers.
+
+
+
+
+
+ Achieving network effects in the Catena-X data space is critical to success and depends on the active participation of adopters and the creation of appealing solution offerings, especially for SMEs, by solution providers. It is therefore important to make it as easy as possible to get started. KITs facilitate this process by supporting both customer groups and simplifying the technical integration with the Catena-X data space.
+
+
+
+
+
+ Key objectives & Benefits
+
+
+
+ KITs are available to everyone as part of the Eclipse Tractus-X open-source project, which facilitates participation in the design and development of KIT. KITs have a broad applicability and are not limited to the automotive value chain. There is at least one KIT to support companies for every use case.
+
+
+
+ 1. Transparency is a key feature of KITs as it enables automotive companies, suppliers, and other stakeholders to comprehend the source code. This transparency enables the identification of bugs and encourages contributions for improvement, fostering trust and collaboration.
+
+
+
+ 2. KITs contribute to cost reduction by facilitating the reuse of existing software components. This eliminates the need for companies to start from scratch, resulting in significant cost and time savings.
+
+
+
+ 3. Innovation thrives within KITs because of the diverse group of contributors. Regardless of the size of a company, small, medium, or large, contributors share ideas, expertise, and resources, promoting a culture of innovation.
+
+
+
+ 4. KITs in line with Catena-X principles of interoperability and standardization. They embrace the semantics of use cases, to establish a common "language" within the ecosystem, enabling seamless integration of diverse technologies from different providers while adhering to relevant standards.
+
+
+
+ 5. KITs promote the development of an ecosystem. Different stakeholders are collaborating and tailor solutions to specific needs. This expands the range of solutions and creates opportunities for partnerships.
+
+
+
+
+
+ The KIT Toolbox
+
+
+
+ A KIT is always structured in the same way and supports the journey of a company joining the data space of Catena-X. In order to ensure interoperability and data sovereignty in Catena-X use cases, compliance with a minimum set of elements is required. These include semantic models for data integration and understanding, logic and schema for value calculation, API implementation for intercommunication, and access and usage policies to maintain data sovereignty.
+
+
+
+
+
+
+
+ In addition to the minimum set , a KIT consists of various other artifacts The vision formulates the strategic goals of a KIT, which motivate users and solution providers to engage. The mission defines the purpose and addresses industry-specific problems. The business value emphasizes value by enabling the connection to the Catena-X data space and facilitating commercial or non-profit solutions for Catena-X marketplaces. Tutorials provide educational resources, including how-to guides and videos for specific use cases. Whitepapers outline KIT's goals, provide background information, highlight challenges, propose solutions, evaluate alternatives and offer actionable recommendations.
+
+
+
+ Standardized semantic models give fundamental meaning to the data and the relationships to enable interoperability. Standardized logic and schemas provide a definition of the minimum viable business logic that must be implemented to enable interoperability. Business processes describe interrelated (and cross-company) activities that enable specific objectives within a Catena-X use case. Access and usage guidelines regulate the rights and terms of data access and usage to enable data sovereignty.
+
+
+
+ API specifications describe the functional and expected behavior of an API, endpoints, data formats, and rules for interface interaction, and promote interoperability. Protocols define rules for data transmission and communication between components. Reference implementations implement all requirements from our corresponding standards in the Catena-X Association and beyond and are available for use or further development. The architecture describes the basic components and their interaction within the operating system. Quick Setup Guides for installing and configuring reference implementation provide step-by-step instructions for developers. Deployment scripts, such as HELM diagrams, simplify the installation of the components in the desired target environment.
+
+
+
+
+ );
+}
diff --git a/src/components/DeepdiveContent/styles.module.css b/src/components/DeepdiveContent/styles.module.css
new file mode 100644
index 00000000000..7ffa61f015a
--- /dev/null
+++ b/src/components/DeepdiveContent/styles.module.css
@@ -0,0 +1,108 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+ .deepdive_content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background-color: var(--ifm-background-color);
+}
+
+.container {
+ width: 50vw;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+ padding-bottom: 2rem;
+}
+
+.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) {
+ .container {
+ width: 80vw;
+ height: auto;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 2rem;
+ gap: 3rem;
+ }
+
+ .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) {
+ .container {
+ width: 70vw;
+ gap: 1rem;
+ padding-bottom: 0;
+ }
+
+ .img {
+ width: 100%;
+ }
+}
diff --git a/src/components/DeepdiveHeader/index.js b/src/components/DeepdiveHeader/index.js
new file mode 100644
index 00000000000..c7dbd13a23f
--- /dev/null
+++ b/src/components/DeepdiveHeader/index.js
@@ -0,0 +1,43 @@
+/*********************************************************************************
+ * 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 KitsCoreSvg from '@site/static/img/kits&core.svg'
+
+import styles from "./styles.module.css";
+
+export default function DeepdiveHeader({title, description, showImage}) {
+ return (
+
+
- We support service and app provider in developing applications for
- the Catena-X ecosystem. Find documentation, APIs, SDKs and more.
+ Your one-stop destination for open collaboration and insights into open source artifacts
-
+ {/*
Our Dev Kits
-
+
*/}
diff --git a/src/components/IFrameComponent/index.js b/src/components/IFrameComponent/index.js
new file mode 100644
index 00000000000..e1b3c2b2789
--- /dev/null
+++ b/src/components/IFrameComponent/index.js
@@ -0,0 +1,50 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-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 (
+
+ {headerDescription && (
+
+ {headerDescription}
+
+ )}
+
{title}
+
+
+ {description}
+
+
+
+
setDisplay("none")}
+ >
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/IFrameComponent/styles.module.css b/src/components/IFrameComponent/styles.module.css
new file mode 100644
index 00000000000..91680322aaa
--- /dev/null
+++ b/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/tractusx_video.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%;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/components/KitsPageHeader/index.js b/src/components/KitsPageHeader/index.js
new file mode 100644
index 00000000000..7ae9622436e
--- /dev/null
+++ b/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 (
+
+
+
+ KIT
+
+
+
+ Introduction to the Catena-X KITS.
+
+
+
+
+ );
+ }
+
\ No newline at end of file
diff --git a/src/components/KitsPageHeader/styles.module.css b/src/components/KitsPageHeader/styles.module.css
new file mode 100644
index 00000000000..e5910ab9c28
--- /dev/null
+++ b/src/components/KitsPageHeader/styles.module.css
@@ -0,0 +1,87 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ height: 71vh;
+}
+
+.container {
+ width: 100vw;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-image: url("/static/img/main-bg-new.png");
+ /* background-position: bottom; */
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.title,
+.subtitle {
+ font-family: "Manrope", sans-serif;
+}
+
+.title {
+ font-weight: 400;
+ font-size: 80px;
+ line-height: 90px;
+}
+
+.subtitle_box {
+ width: 60vw;
+ margin: 0 auto 2rem;
+}
+
+.subtitle {
+ font-weight: 400;
+ font-size: 25px;
+ line-height: 38px;
+ letter-spacing: -0.7px;
+}
+
+@media screen and (max-width: 996px) {
+ .container {
+ background-position: center right;
+ }
+
+ .title {
+ font-size: 10vw;
+ line-height: 10vw;
+ }
+
+ .subtitle {
+ font-size: 2vw;
+ line-height: 3vw;
+ }
+
+ .btn_container {
+ margin-top: -2rem;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .container {
+ justify-content: flex-start;
+ padding-top: 30%;
+ }
+
+ .title {
+ font-size: 44px;
+ line-height: 40px;
+ }
+ .subtitle_box {
+ width: 75vw;
+ }
+
+ .subtitle {
+ font-size: 14px;
+ line-height: 16px;
+ }
+}
diff --git a/src/components/KitsUsageContent/index.js b/src/components/KitsUsageContent/index.js
new file mode 100644
index 00000000000..d14ba971df6
--- /dev/null
+++ b/src/components/KitsUsageContent/index.js
@@ -0,0 +1,112 @@
+/*********************************************************************************
+ * 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 NetworkCoreServicesLogo from "@site/static/img/domain_logo-network-core-services.png";
+import PLMQualitySolutionsLogo from "@site/static/img/domain_logo-PLM-quality-solutions.png";
+import ResiliencyLogo from "@site/static/img/domain_logo-resiliency.png";
+import SustainabilityLogo from "@site/static/img/domain_logo-sustainability.png";
+
+
+import styles from "./styles.module.css";
+
+export default function KitsUsageContent() {
+ return (
+
+
+
+
+
Bring your use cases to life
+
+
+ Each domain within the Catena-X ecosystem supports various use cases. To bring these use cases to life, Catena-X requires apps and services. For each use case, Catena-X has released a KIT that empowers you to offer solutions. Let's introduce the Catena-X domains:
+
+
+
+
+
+
+
+
+
Core Service Domain
+
+ This domain offers foundational services that form the basis of the ecosystem, facilitating technical advancements in data sovereignty.
+
+
+
+
+
+
+
+
+
+
PLM & Quality Domain
+
+ Trace parts, build data chains, solve quality issues and optimize your products based on data across the entire value chain without compromising data sovereignty.
+
+
+
+
+
+
+
+
+
+
Resiliency Domain
+
+ The strengthen of resiliency of the supply chain and related shopfloor processes is a main focus in our business domain.
+
+
+
+
+
+
+
+
+
+
Sustainability Domain
+
+
+
+
+
+
+
+
+
+
+ Get ready with KITS
+
+
+
+ Catena-X KITs offer open-source tools and documentation to promote collaboration and trust under the governance of the Eclipse Tractus-X Project. These KITs consistently follow a clustering pattern and encompass all essential elements for developers at various stages of their work.
+
+
+
+ Utilize the filter to pinpoint KITs within your specific domains of interest.
+
>
);
diff --git a/src/components/ProductOverview/index.js b/src/components/ProductOverview/index.js
index 337a2415aa0..52cf2938ad9 100644
--- a/src/components/ProductOverview/index.js
+++ b/src/components/ProductOverview/index.js
@@ -26,11 +26,15 @@ import { products } from "../../../utils/products";
import styles from "./styles.module.css";
-export default function ProductOverview() {
+export default function ProductOverview({inputData}) {
+ let data = products
+ if(inputData) {
+ data = inputData
+ }
return (
- {products.map((product, index) => {
+ {data.map((product, index) => {
return(
)
diff --git a/src/components/RoleBasedEnrtyComponent/index.js b/src/components/RoleBasedEnrtyComponent/index.js
index 480898ec095..f52d412756a 100644
--- a/src/components/RoleBasedEnrtyComponent/index.js
+++ b/src/components/RoleBasedEnrtyComponent/index.js
@@ -30,8 +30,9 @@ import { useMediaQuery } from '@mui/material';
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
import sliderRightArrowImage from '@site/static/img/slider_right_icon.png'
import sliderLeftArrowImage from '@site/static/img/slider_left_icon.png';
+import Link from "@docusaurus/Link";
-export default function RoleBasedEnrtyComponent() {
+export default function RoleBasedEnrtyComponent({data}) {
const isWeb = useMediaQuery('(min-width:1024px)');
const isMobile = useMediaQuery('(max-width:600px)');
function NextArrow (props) {
@@ -75,50 +76,54 @@ export default function RoleBasedEnrtyComponent() {
initialSlide: 0,
};
- const RoleBasedEntryCard = ({ title, description }) => {
+ const RoleBasedEntryCard = ({ title, description, navigate }) => {
return (
-
-
-
- {title}
-
-
- {description}
-
-
-
-
-
-
-
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+
+
+
-
+
)
}
return (
+ {data && (
{!isMobile && (
)}
{
- carouselRoleBased.map((newPost, index) => {
+ data?.map((newPost, index) => {
return (
)
})
}
+ )}
);
}
diff --git a/src/components/RoleBasedEnrtyComponent/styles.module.css b/src/components/RoleBasedEnrtyComponent/styles.module.css
index 060c196fa42..aa475926e76 100644
--- a/src/components/RoleBasedEnrtyComponent/styles.module.css
+++ b/src/components/RoleBasedEnrtyComponent/styles.module.css
@@ -3,6 +3,15 @@
* and scoped locally.
*/
+.link_container {
+ color: #ffffff;
+}
+
+.link_container:hover {
+ color: #ffffff;
+ text-decoration: none;
+}
+
.roles_based_entry {
padding: 10rem 0 0rem;
}
diff --git a/src/components/UsageHeader/index.js b/src/components/UsageHeader/index.js
new file mode 100644
index 00000000000..0e9e227bd95
--- /dev/null
+++ b/src/components/UsageHeader/index.js
@@ -0,0 +1,35 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+
+import styles from "./styles.module.css";
+
+export default function UsageHeader(props) {
+ console.log(props)
+ return (
+
+
+
+ {props.icon}
+
+
+
{props.title}
+
+ {props.description}
+
+
+
+
+ );
+}
diff --git a/src/components/UsageHeader/styles.module.css b/src/components/UsageHeader/styles.module.css
new file mode 100644
index 00000000000..7852f89ee26
--- /dev/null
+++ b/src/components/UsageHeader/styles.module.css
@@ -0,0 +1,102 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.usage_header {
+ position: relative;
+ overflow: hidden;
+ height: 30vh;
+}
+
+.container {
+ width: 100vw;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* background-image: url("/static/img/main_bg-min.png");
+ background-position: top right;
+ background-repeat: no-repeat;
+ background-size: cover; */
+}
+
+.svg_container {
+ width: 25vw;
+ height: 60%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ position: relative;
+
+ /* border: 1px solid red; */
+}
+
+.svg_container svg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ right: -3rem;
+
+ /* border: 1px solid blue; */
+}
+
+.information_container {
+ width: 60vw;
+ height: 60%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+@media screen and (max-width: 996px) {
+ .usage_header {
+ height: auto;
+ }
+
+ .container {
+ height: auto;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ padding: 2rem 0;
+ }
+
+ .svg_container {
+ justify-content: center;
+ }
+
+ .svg_container svg {
+ position: initial;
+ }
+
+ .information_container {
+ width: 75vw;
+ height: 20vw;
+ justify-content: space-evenly;
+ align-items: center;
+ text-align: center;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .usage_header {
+ height: fit-content;
+ }
+
+ .svg_container {
+ width: 40vw;
+ height: fit-content;
+ }
+
+ .svg {
+ width: 80%;
+ height: 80%;
+ }
+
+ .information_container {
+ width: 80vw;
+ height: fit-content;
+ }
+}
diff --git a/src/pages/AppProvider/index.js b/src/pages/AppProvider/index.js
new file mode 100644
index 00000000000..57f905c66d5
--- /dev/null
+++ b/src/pages/AppProvider/index.js
@@ -0,0 +1,76 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import UsageHeader from "../../components/UsageHeader";
+import UsageSvg from '@site/static/icons/Icon_App_Service_Grey.svg';
+import styles from "./styles.module.css";
+import IFrameComponent from "../../components/IFrameComponent"
+import KitsGalleryWithFilters from "../../components/KitsGalleryWithFilters"
+import { kitsGallery } from "@site/utils/kitsGallery";
+
+export default function AppProvider() {
+ const { siteConfig } = useDocusaurusContext();
+
+ return (
+
+ } />
+
+
+
+
+
+
+
+ Relevant KITs
+
+
+
+ The Tractus-X project is structured along the 4 domains that represent use cases in Catena-X:
+ First, there is the Network & Core Services domain, which forms the basis for the functionality of the business domains. It is the foundation to build on and is mainly provided by the operator.
+
+
+ Then we have the business domains:
+ PLM & Quality, Resiliency and Sustainability, each dealing with specific industry challenges, that Catena-X solves with the help of KITs. Each of the domains provide at least one specific KIT with a clearly defined toolbox of development artifacts that support data providers to join a use case.
+
+
+ Application providers can combine multiple KITs and use API specifications, as well as semantic models, to develop new interoperable applications.
+
+
+
+ There are two main customer groups for KITs:
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/AppProvider/styles.module.css b/src/pages/AppProvider/styles.module.css
new file mode 100644
index 00000000000..65973637a32
--- /dev/null
+++ b/src/pages/AppProvider/styles.module.css
@@ -0,0 +1,44 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+ .content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background-color: var(--ifm-background-color);
+ }
+
+ .container {
+ width: 50vw;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+ padding-bottom: 2rem;
+ }
+
+ @media screen and (max-width: 996px) {
+ .container {
+ width: 80vw;
+ height: auto;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 2rem;
+ gap: 3rem;
+ }
+
+ }
+
+ @media screen and (max-width: 600px) {
+ .container {
+ width: 70vw;
+ gap: 1rem;
+ padding-bottom: 0;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/pages/Kit-Deepdive/index.js b/src/pages/Kit-Deepdive/index.js
new file mode 100644
index 00000000000..4dc80930895
--- /dev/null
+++ b/src/pages/Kit-Deepdive/index.js
@@ -0,0 +1,38 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import DeepdiveHeader from "../../components/DeepdiveHeader";
+import DeepdiveContent from "../../components/DeepdiveContent";
+
+export default function KitDeepdivePage() {
+ const { siteConfig } = useDocusaurusContext();
+ const headerInput = {
+ title: "KIT Deepdive",
+ description: "KIT, short for Keep It Together, offers open-source resources and comprehensive documentation designed for the use cases of Catena-X ecosystem.",
+ showImage: false
+ }
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Kit-Deepdive/styles.module.css b/src/pages/Kit-Deepdive/styles.module.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/pages/Kits-Usage/index.js b/src/pages/Kits-Usage/index.js
new file mode 100644
index 00000000000..395c4436069
--- /dev/null
+++ b/src/pages/Kits-Usage/index.js
@@ -0,0 +1,43 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import UsageHeader from "../../components/UsageHeader"
+import KitsUsageContent from "../../components/KitsUsageContent";
+import KitsGalleryWithFilters from "../../components/KitsGalleryWithFilters"
+import { kitsGallery } from "@site/utils/kitsGallery";
+import KitsUsageSvg from '@site/static/img/kits_usage_logo.svg';
+
+import styles from "./styles.module.css";
+
+export default function KitsUsagePage() {
+ const { siteConfig } = useDocusaurusContext();
+ return (
+
+ } />
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Kits-Usage/styles.module.css b/src/pages/Kits-Usage/styles.module.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/pages/Kits/index.js b/src/pages/Kits/index.js
new file mode 100644
index 00000000000..5b3ca85acbf
--- /dev/null
+++ b/src/pages/Kits/index.js
@@ -0,0 +1,59 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+
+import DeepdiveHeader from "../../components/DeepdiveHeader";
+import AboutUsCard from "../../components/AboutUsCard";
+import KitsGalleryWithFilters from "../../components/KitsGalleryWithFilters";
+import { kitsGallery } from "@site/utils/kitsGallery";
+import CarouselSuccessStories from "../../components/CarouselSuccessStories";
+import RoleBasedEnrtyComponent from "../../components/RoleBasedEnrtyComponent";
+import {carouselKitdeepdive} from "../../../utils/carouselKitdeepdive"
+
+export default function KitsPage() {
+ const { siteConfig } = useDocusaurusContext();
+ const aboutInput = {
+ highlightText: "Catena-X KITS",
+ title: "KIT stands for Keep It Together",
+ descriptionHighlight: "Kits aim to accelerate",
+ description: " the adoption, development, and operations of the next generation Business Applications and Services. Catena-X wants to support developers in order to accelerate the development of services and applications to contribute significantly to the rapid scaling of the Catena-X ecosystem.",
+ buttonText: "KIT Deepdive",
+ link: "/Kit-deepdive"
+ }
+ const headerInput = {
+ title: "KIT",
+ description: "Introduction to the Catena-X KITS.",
+ showImage: true
+ }
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Operator/index.js b/src/pages/Operator/index.js
new file mode 100644
index 00000000000..20aeaa8e4d0
--- /dev/null
+++ b/src/pages/Operator/index.js
@@ -0,0 +1,55 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import UsageHeader from "../../components/UsageHeader";
+import UsageSvg from '@site/static/icons/Icon_Operators_Grey.svg';
+import styles from "./styles.module.css";
+import ProductOverview from '../../components/ProductOverview'
+import { coreOnboardingServices } from "../../../utils/coreOnboardingServices"
+
+export default function Operator() {
+ const { siteConfig } = useDocusaurusContext();
+ return (
+
+ } />
+
+
+
+
+
+ Core Service Providers operate core services that enable the basic functionality of the Catena-X data space (e.g. Identity Provider, Marketplace). This Core Service Provider is responsible for providing the services commercially, operating and maintaining them, and supporting the release of the core services in the data space. It actively markets the core services and is the contractual partner for partners such as application providers and data providers/consumers.
+
+ The following KITs and services enable companies to become an operator for the Catena-X data space.
+
+
+
+
+ Core & Onboarding Services
+
+
+ In contrast to the Enablement Services, the Core & Onboarding Services offer common accessibility and discoverability functionalities for data space participants. Examples include BPN issuers for maintaining business partner numbers, and participant information, IAM solutions for identity and access management, and discovery services for locating the address of assets in decentralized organized registers, throughout the data space.
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Operator/styles.module.css b/src/pages/Operator/styles.module.css
new file mode 100644
index 00000000000..65973637a32
--- /dev/null
+++ b/src/pages/Operator/styles.module.css
@@ -0,0 +1,44 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+ .content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background-color: var(--ifm-background-color);
+ }
+
+ .container {
+ width: 50vw;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+ padding-bottom: 2rem;
+ }
+
+ @media screen and (max-width: 996px) {
+ .container {
+ width: 80vw;
+ height: auto;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 2rem;
+ gap: 3rem;
+ }
+
+ }
+
+ @media screen and (max-width: 600px) {
+ .container {
+ width: 70vw;
+ gap: 1rem;
+ padding-bottom: 0;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/pages/ServiceProvider/index.js b/src/pages/ServiceProvider/index.js
new file mode 100644
index 00000000000..20f0ffb209f
--- /dev/null
+++ b/src/pages/ServiceProvider/index.js
@@ -0,0 +1,54 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import UsageHeader from "../../components/UsageHeader";
+import UsageSvg from '@site/static/icons/Icon_App_Service_Grey.svg';
+import styles from "./styles.module.css";
+import ProductOverview from '../../components/ProductOverview'
+import { enablementServices } from "../../../utils/enablementServices"
+
+export default function ServiceProvider() {
+ const { siteConfig } = useDocusaurusContext();
+ return (
+
+ } />
+
+
+
+
+
+ An Enablement Service Provider (ESP) can operate various bundles of decentralized services that enable sovereign participation and data exchange for data providers / consumers in the Catena-X data space. An enablement service provider can decide on the scope of its enablement service and whether to offer them on one or more of the marketplaces.
+
+
+ The following KITs and services enable companies to become a service providers for the Catena-X data space.
+
+
+
+ Enablement Services
+
+
+ Every data provider / consumer must use enablement services to establish a basic connection to the data space, regardless of the business use case. The connector based on the data space protocol (e.g., Tractus-X EDC) and the identity wallet form the mandatory basis of the enablement services. In addition, there are context-specific enablement services. Examples include the Asset Administration Shell (AAS) as harmonized access layer for digital twins, the Decentral Digital Twin Registry (DDTR) for the local discoverability of digital twins in decentrally organized data spaces or the Item Relationship Service (IRS) for the creation of data chains and iteration through a tree structure of digital twins.
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/ServiceProvider/styles.module.css b/src/pages/ServiceProvider/styles.module.css
new file mode 100644
index 00000000000..65973637a32
--- /dev/null
+++ b/src/pages/ServiceProvider/styles.module.css
@@ -0,0 +1,44 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+ .content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background-color: var(--ifm-background-color);
+ }
+
+ .container {
+ width: 50vw;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+ padding-bottom: 2rem;
+ }
+
+ @media screen and (max-width: 996px) {
+ .container {
+ width: 80vw;
+ height: auto;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 2rem;
+ gap: 3rem;
+ }
+
+ }
+
+ @media screen and (max-width: 600px) {
+ .container {
+ width: 70vw;
+ gap: 1rem;
+ padding-bottom: 0;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/pages/User/index.js b/src/pages/User/index.js
new file mode 100644
index 00000000000..7f8d2bb5a2a
--- /dev/null
+++ b/src/pages/User/index.js
@@ -0,0 +1,77 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import React from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import UsageHeader from "../../components/UsageHeader";
+import UsageSvg from '@site/static/icons/Icon_App_Service_Grey.svg';
+import styles from "./styles.module.css";
+import KitsGalleryWithFilters from "../../components/KitsGalleryWithFilters"
+import { kitsGallery } from "@site/utils/kitsGallery";
+
+export default function User() {
+ const { siteConfig } = useDocusaurusContext();
+
+ return (
+
+ } />
+
+
+
+
+
+
+ A data provider / consumer (DPC) provides, consumes, and processes data to collaborate with other data space participants to solve a specific industry problem and create business value. This includes both standardized use cases and direct collaboration.
+
+
+ First, a data provider needs to decide which use case(s)they want to participate in: You want to exchange CO2 values? Use the PCF KIT. You want to exchange part data? Use the Traceability KIT. For each Catena-X use case there is a KIT available to ensure that the integration is described.
+
+
+ Next, a data provider needs the general technical requirements for data exchange, to be able to share data in the ecosystem. There is an end-to-end journey documentation available.
+
+
+
+
+
+ Relevant KITs
+
+
+
+ The Tractus-X project is structured along the 4 domains that represent use cases in Catena-X:
+ First, there is the Network & Core Services domain, which forms the basis for the functionality of the business domains. It's the foundation to build on and is mainly provided by the operator.
+
+
+ Then we have the business domains:
+ PLM & Quality, Resiliency and Sustainability, each addressing a specific set of industry challenges that Catena-X solves with the help of KITs.
+
+
+ Each of the domains provide at least one KIT with a well-defined toolbox of business and development artifacts that support data providers to join a use case. They can use the KITs to connect their existing in-house infrastructure to the Catena-X data space by mapping to the semantic data models and interfaces.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/User/styles.module.css b/src/pages/User/styles.module.css
new file mode 100644
index 00000000000..65973637a32
--- /dev/null
+++ b/src/pages/User/styles.module.css
@@ -0,0 +1,44 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+ .content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background-color: var(--ifm-background-color);
+ }
+
+ .container {
+ width: 50vw;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2rem;
+ padding-bottom: 2rem;
+ }
+
+ @media screen and (max-width: 996px) {
+ .container {
+ width: 80vw;
+ height: auto;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 2rem;
+ gap: 3rem;
+ }
+
+ }
+
+ @media screen and (max-width: 600px) {
+ .container {
+ width: 70vw;
+ gap: 1rem;
+ padding-bottom: 0;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 6bbabf789a6..03a27269e49 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -22,9 +22,19 @@ import KitsGalleryWithFilters from "../components/KitsGalleryWithFilters";
import { kitsGallery } from "@site/utils/kitsGallery";
import RoleBasedEnrtyComponent from "../components/RoleBasedEnrtyComponent";
import CommunityComponent from "../components/CommunityComponent";
+import { carouselRoleBased } from "../../utils/carouselRoleBased";
+
export default function Home() {
const { siteConfig } = useDocusaurusContext();
+ const aboutInput = {
+ highlightText: "Welcome to the community",
+ title: "The magic behind Eclipse Tractus-X",
+ descriptionHighlight: "The Eclipse Tractus-X™ project",
+ description: " 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.",
+ buttonText: "About Us",
+ link: "/aboutus"
+ }
return (
- {/* TODO - Enable when pages/content is available */}
- {/* */}
-
+
+
-
+ {/* Enable when it is required */}
+ {/* */}
);
diff --git a/static/icons/Icon_App_Service_Grey.svg b/static/icons/Icon_App_Service_Grey.svg
new file mode 100644
index 00000000000..c329bf525f4
--- /dev/null
+++ b/static/icons/Icon_App_Service_Grey.svg
@@ -0,0 +1,15 @@
+
diff --git a/static/icons/Icon_Operators_Grey.svg b/static/icons/Icon_Operators_Grey.svg
new file mode 100644
index 00000000000..3894a0ded04
--- /dev/null
+++ b/static/icons/Icon_Operators_Grey.svg
@@ -0,0 +1,20 @@
+
diff --git a/static/icons/Icon_User_Grey.svg b/static/icons/Icon_User_Grey.svg
new file mode 100644
index 00000000000..856645d2249
--- /dev/null
+++ b/static/icons/Icon_User_Grey.svg
@@ -0,0 +1,17 @@
+
diff --git a/static/img/countryRisk.png b/static/img/countryRisk.png
new file mode 100644
index 00000000000..7058b568544
Binary files /dev/null and b/static/img/countryRisk.png differ
diff --git a/static/img/domain_logo-PLM-quality-solutions.png b/static/img/domain_logo-PLM-quality-solutions.png
new file mode 100644
index 00000000000..87f03d9fdff
Binary files /dev/null and b/static/img/domain_logo-PLM-quality-solutions.png differ
diff --git a/static/img/domain_logo-network-core-services.png b/static/img/domain_logo-network-core-services.png
new file mode 100644
index 00000000000..507ecaf0b77
Binary files /dev/null and b/static/img/domain_logo-network-core-services.png differ
diff --git a/static/img/domain_logo-resiliency.png b/static/img/domain_logo-resiliency.png
new file mode 100644
index 00000000000..d63fa3e99ea
Binary files /dev/null and b/static/img/domain_logo-resiliency.png differ
diff --git a/static/img/domain_logo-sustainability.png b/static/img/domain_logo-sustainability.png
new file mode 100644
index 00000000000..85d0e849e15
Binary files /dev/null and b/static/img/domain_logo-sustainability.png differ
diff --git a/static/img/kit-toolbox-min.png b/static/img/kit-toolbox-min.png
new file mode 100644
index 00000000000..077060c9e79
Binary files /dev/null and b/static/img/kit-toolbox-min.png differ
diff --git a/static/img/kits_usage_logo.svg b/static/img/kits_usage_logo.svg
new file mode 100644
index 00000000000..73565b0b6d8
--- /dev/null
+++ b/static/img/kits_usage_logo.svg
@@ -0,0 +1,24 @@
+
diff --git a/static/img/tracex.png b/static/img/tracex.png
new file mode 100644
index 00000000000..a3e4a7c41c5
Binary files /dev/null and b/static/img/tracex.png differ
diff --git a/static/img/tractusx_video.png b/static/img/tractusx_video.png
new file mode 100644
index 00000000000..5ed4793c9b3
Binary files /dev/null and b/static/img/tractusx_video.png differ
diff --git a/utils/carouselCommunityInfo.js b/utils/carouselCommunityInfo.js
index 728bd3f2a84..bcfddff4061 100644
--- a/utils/carouselCommunityInfo.js
+++ b/utils/carouselCommunityInfo.js
@@ -8,7 +8,7 @@ export const carouselCommunityInfo = [
id: 0,
title: "Community.",
subtitle: "Contribute.",
- description: "Get familiar with the guidelines and governance you’ll need to contribute to this project. The Tractus-X community includes 8 products that are available.",
+ description: "Get familiar with the guidelines and governance that you’ll need to contribute to this project",
textCard: true
},
{
@@ -20,19 +20,19 @@ export const carouselCommunityInfo = [
{
id: 2,
title: "Community",
- navigate: "/community",
+ navigate: "/community/intro",
icon: communityIcon
},
{
id: 3,
title: "Contribute a KIT",
- navigate: "/docs/kit-process/graduation-process",
+ navigate: "/developer",
icon: contributeIcon
},
{
id: 4,
title: "FAQ",
- navigate: "/docs/kit-process/processes/kit-faq",
+ navigate: "/docs/dev_faq",
icon: faqIcon
}
]
diff --git a/utils/carouselKitdeepdive.js b/utils/carouselKitdeepdive.js
new file mode 100644
index 00000000000..0de0e4e4c7c
--- /dev/null
+++ b/utils/carouselKitdeepdive.js
@@ -0,0 +1,21 @@
+export const carouselKitdeepdive = [
+ {
+ id: 1,
+ title: "KIT Deepdive",
+ description: "What is a KIT?",
+ navigate: "/kit-deepdive"
+ },
+ {
+ id: 2,
+ title: "KIT Usage",
+ description: "How to use a KIT ?",
+ navigate: "/kits-usage"
+ },
+ {
+ id: 3,
+ title: "KIT Creation",
+ description: "How to create a KIT?",
+ navigate: "/docs/kit-process/graduation-process"
+ }
+ ]
+
\ No newline at end of file
diff --git a/utils/carouselRoleBased.js b/utils/carouselRoleBased.js
index 74aa77d66a3..c6c57548046 100644
--- a/utils/carouselRoleBased.js
+++ b/utils/carouselRoleBased.js
@@ -1,45 +1,27 @@
export const carouselRoleBased = [
{
id: 1,
- title: "Operating Company",
- description: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
- navigate: "/"
+ title: "App Provider",
+ description: "Business applications",
+ navigate: "/AppProvider"
},
{
id: 2,
- title: "Data Provider",
- description: "Lorem ipsum dolor sit amet",
- navigate: "/"
+ title: "User",
+ description: "Provide and consume data",
+ navigate: "/User"
},
{
id: 3,
- title: "App/Service Provider",
- description: "Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
- navigate: "/"
+ title: "Service Provider",
+ description: "Enablement services",
+ navigate: "/ServiceProvider"
},
{
id: 4,
- title: "Roadmap and Releases",
- description: "Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet",
- navigate: "/"
- },
- {
- id: 5,
- title: "Example Section one",
- description: "Lorem ipsum dolor sit amet",
- navigate: "/"
- },
- {
- id: 6,
- title: "Example Section two",
- description: "Lorem ipsum dolor sit amet",
- navigate: "/"
- },
- {
- id: 7,
- title: "Example Section three",
- description: "Lorem ipsum dolor sit amet",
- navigate: "/"
- },
+ title: "Operator",
+ description: "Core services",
+ navigate: "/Operator"
+ }
]
\ No newline at end of file
diff --git a/utils/coreOnboardingServices.js b/utils/coreOnboardingServices.js
new file mode 100644
index 00000000000..05c28d3a829
--- /dev/null
+++ b/utils/coreOnboardingServices.js
@@ -0,0 +1,76 @@
+export const coreOnboardingServices = [
+ {
+ productName: "Business Partner Data Management",
+ subTitle: "",
+ productDescription: "The core services for querying, adding, and changing business partner data in the Catena-X data space and the unique company identifier.",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/daps-helm-chart",
+ "https://github.com/dft-frontend",
+ "https://github.com/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false,
+ },
+
+ {
+ productName: "Portal & Marketplace",
+ subTitle: "",
+ productDescription: "The entry point to the Catena-X data space for all participants such as registration or onboarding. Access to the Catena-X Marketplace and more.",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ },
+
+ {
+ productName: "Semantic Hub",
+ subTitle: "",
+ productDescription: "The Discovery Finder is used to find endpoints of BPN Discoveries for a specific type, e.g. 'oen'",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ },
+
+ {
+ productName: "Discovery Finder",
+ subTitle: "",
+ productDescription: "The Discovery Finder is used to find endpoints of BPN Discoveries for a specific type, e.g. 'oen'",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ },
+
+ {
+ productName: "BPN Discovery",
+ subTitle: "",
+ productDescription: "The BPN Discovery is used to search for a specific type/key-combination for a Business Partner Number (BPN).",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ }
+]
diff --git a/utils/enablementServices.js b/utils/enablementServices.js
new file mode 100644
index 00000000000..d18923da1c0
--- /dev/null
+++ b/utils/enablementServices.js
@@ -0,0 +1,77 @@
+export const enablementServices = [
+ {
+ productName: "Tractus-X EDC",
+ subTitle: "",
+ productDescription: "Tractus-X EDC provides a framework for sovereign data exchange containing modules for performing data query, data exchange, policy enforcement, monitoring, and auditing.",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/daps-helm-chart",
+ "https://github.com/dft-frontend",
+ "https://github.com/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ },
+
+ {
+ productName: "Managed Identity Wallet",
+ subTitle: "",
+ productDescription: "The Managed Identity Wallets (MIW) service implements the Self-Sovereign-Identity (SSI) using did:web for the Catena-X data space.",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ },
+
+ {
+ productName: "Decental Digital Twin Registry",
+ subTitle: "",
+ productDescription: "The digital twin registry is used to manage and discover digital twin meta-data. Each participant must register its digital twin and relevant sub-models in the digital twin registry to expose its data offering to other participants.",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ },
+
+ {
+ productName: "Item Relationship Service",
+ subTitle: "",
+ productDescription: "The Item Relationship Service (IRS) builds data chains and provides custom business logic for business applications and other services",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ },
+
+ {
+ productName: "Knowledge Agent",
+ subTitle: "",
+ productDescription: "The Managed Identity Wallets (MIW) service implements the Self-Sovereign-Identity (SSI) using did:web for the Catena-X data space.",
+ githubRepo: [
+ "https://github.com/eclipse-tractusx/bpdm",
+ "https://github.com/eclipse-tractusx/daps-helm-chart",
+ "https://github.com/eclipse-tractusx/dft-frontend",
+ "https://github.com/eclipse-tractusx/bpdm"
+ ],
+ committers: [],
+ mailTo: "",
+ hasBoard: false
+ }
+ ]
+
\ No newline at end of file
diff --git a/utils/products.js b/utils/products.js
index b327ea2b397..196abdca945 100644
--- a/utils/products.js
+++ b/utils/products.js
@@ -11,7 +11,8 @@ export const products = [
"https://github.com/Maximilianong"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request Business Partner Data Management Team",
- hasBoard: false
+ hasBoard: false,
+ showVersion: true
},
{
@@ -24,10 +25,11 @@ export const products = [
"https://github.com/eclipse-tractusx/autosetup-backend"
],
committers: [
- "https://github.com/wjost"
+ "https://github.com/wjost"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request IDS Essential Services Team",
- hasBoard: false
+ hasBoard: false,
+ showVersion: true
},
{
@@ -41,7 +43,8 @@ export const products = [
"https://github.com/wjost"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request Semantic Layer & Digital Twin Team",
- hasBoard: false
+ hasBoard: false,
+ showVersion: true
},
{
@@ -57,7 +60,8 @@ export const products = [
"https://github.com/jzbmw"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request Item Relationship Service Team",
- hasBoard: false
+ hasBoard: false,
+ showVersion: true
},
{
@@ -77,7 +81,8 @@ export const products = [
"https://github.com/oyo"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request Portal and Marketplaces Team",
- hasBoard: false
+ hasBoard: false,
+ showVersion: true
},
{
@@ -95,7 +100,8 @@ export const products = [
"https://github.com/tunacicek"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request Semantic Layer & Digital Twin Team",
- hasBoard: false
+ hasBoard: false,
+ showVersion: true
},
{
@@ -109,7 +115,8 @@ export const products = [
"https://github.com/ds-mkanal"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request Trace-X Team",
- hasBoard: false
+ hasBoard: false,
+ showVersion: true
},
{
@@ -123,6 +130,7 @@ export const products = [
"https://github.com/florianrusch-zf"
],
mailTo: "tractusx-dev@eclipse.org?subject=Request Tractus-X EDC Team",
- hasBoard: true
+ hasBoard: true,
+ showVersion: true
},
]
diff --git a/utils/successStories.js b/utils/successStories.js
new file mode 100644
index 00000000000..17d0a862f3d
--- /dev/null
+++ b/utils/successStories.js
@@ -0,0 +1,21 @@
+import tracex from "@site/static/img/tracex.png";
+import countryRisk from "@site/static/img/countryRisk.png";
+
+export const successStories = [
+ {
+ id: 1,
+ img: tracex,
+ title: "TRACE-X SUCESS STORY",
+ description: "Trace-X empowers all companies from SMEs to large OEMs to participate in parts traceability with an Open-Source solution.",
+ pageRoute: "/docs-kits/kits/Data Chain Kit/Success Stories/Trace-X Sucess Story",
+ buttonName: "SUCESS STORY"
+ },
+ {
+ id: 2,
+ img: countryRisk,
+ title: "COUNTRY RISK SUCESS STORY",
+ description: "The service offers a risk score per country based on several, customizable ratings.",
+ pageRoute: "/docs-kits/kits/Business Partner Kit/Success Stories/Country Risk Score%C2%A0",
+ buttonName: "SUCESS STORY"
+ }
+]