Repository: camunda/camunda-docs
Pull request #5148: Zeebe overview revamp
Author: login: christinaausley
Labels: name: component:zeebe
description: Issues related with Zeebe project
name: deploy
description: Stand up a temporary docs site with this PR
name: low prio
description: There is no urgency with this change.
Created: 2025-03-04T22:31:54Z | Merged: 2025-03-19T15:14:10Z

## Description

Revamping the Zeebe overview page -- closes https://github.com/camunda/camunda-docs/issues/4833.

Special shoutout to @mesellings, as his Connectors work inspired much of what I pulled into this overview page 💪 

To backport upon approval.

## When should this change go live?

<!-- PRs merged go to stage.docs.camunda.io first and must be manually released to docs.camunda.io. -->

- [ ] This is a bug fix, security concern, or something that needs **urgent release support**. (add `bug` or `support` label)
- [ ] This is already available but undocumented and should be released within a week. (add `available & undocumented` label)
- [ ] This is on a **specific schedule** and the assignee will coordinate a release with the DevEx team. (create draft PR and/or add `hold` label)
- [ ] This is part of a scheduled **alpha or minor**. (add alpha or minor label)
- [x] There is **no urgency** with this change (add `low prio` label)

## PR Checklist

<!-- Camunda maintains 18 months of minor versions. Backporting your change to multiple versions is common. -->

- [x] My changes are for **an upcoming minor release** and:
  - [x] are in the `/docs` directory (version 8.8).
  - [ ] are in the `/versioned_docs/version-8.7/` directory (version 8.7).
- [ ] My changes are for an **already released minor** and are in a `/versioned_docs` directory.

<!-- UNCOMMENT THIS SECTION IF APPLICABLE. Adding or removing pages requires extra steps.
- [ ] I included my new page in the sidebar file(s).
- [ ] I added a redirect for a renamed or deleted page to the .htaccess file.
-->

- [x] I added a DRI, team, or delegate as a reviewer for technical accuracy and grammar/style:
  - [x] [Engineering team review](https://github.com/camunda/camunda-docs/blob/main/howtos/documentation-guidelines.md#review-process)
  - [x] [Technical writer review](https://github.com/camunda/camunda-docs/blob/main/howtos/documentation-guidelines.md#review-process) via `@camunda/tech-writers` unless working with an embedded writer.

<!-- UNCOMMENT THIS SECTION IF APPLICABLE. Changes to **docs infra**, including updates to workflows and adding new npm packages, must be first discussed via issue or #ask-c8-documentation and linked for context.
- [ ] My changes require a [docs infrastructure review](https://github.com/camunda/camunda-docs/blob/main/howtos/documentation-guidelines.md#review-process). (add `dx` label) -->



Diff:
diff --git a/docs/components/zeebe/react-components/_zeebe-card-data.js b/docs/components/zeebe/react-components/_zeebe-card-data.js
new file mode 100644
index 00000000000..929ae038bbb
--- /dev/null
+++ b/docs/components/zeebe/react-components/_zeebe-card-data.js
@@ -0,0 +1,51 @@
+import IconWorkflow from "../../zeebe/technical-concepts/assets/icon-workflow-engine.png";
+import IconArrow from "../../zeebe/technical-concepts/assets/icon-arrow.png";
+import IconBlackbox from "../../zeebe/technical-concepts/assets/icon-blackbox.png";
+import IconPartition from "../../zeebe/technical-concepts/assets/icon-partition.png";
+import IconEnd from "../../zeebe/technical-concepts/assets/icon-end-to-end.png";
+import IconProtocol from "../../zeebe/technical-concepts/assets/icon-protocol.png";
+
+// Getting started cards on Zeebe introduction page
+export const gettingStartedCards = [
+  {
+    link: "../technical-concepts/architecture",
+    title: "Architecture",
+    image: IconWorkflow,
+    description:
+      "Learn about the four main components in Zeebe's architecture: clients, gateways, brokers, and exporters.",
+  },
+  {
+    link: "../technical-concepts/clustering",
+    title: "Clustering",
+    image: IconArrow,
+    description:
+      "Learn how Zeebe can operate as a cluster of brokers, forming a peer-to-peer network.",
+  },
+  {
+    link: "../technical-concepts/partitions",
+    title: "Partitions",
+    image: IconPartition,
+    description:
+      "Learn about partitions, which are persistent streams of process-related events.",
+  },
+  {
+    link: "../technical-concepts/internal-processing",
+    title: "Internal processing",
+    image: IconBlackbox,
+    description:
+      "Understand state machines, events and commands, stateful stream processing, driving the engine, and handling backpressure within Zeebe.",
+  },
+  {
+    link: "../technical-concepts/process-lifecycles",
+    title: "Process lifecycles",
+    image: IconEnd,
+    description:
+      "In Zeebe, the process execution is represented internally by events of type ProcessInstance.",
+  },
+  {
+    link: "../technical-concepts/protocols",
+    title: "Protocols",
+    image: IconProtocol,
+    description: "Let's discuss gRPC and supported clients.",
+  },
+];
diff --git a/docs/components/zeebe/react-components/_zeebe-card.js b/docs/components/zeebe/react-components/_zeebe-card.js
new file mode 100644
index 00000000000..afdcf6bec90
--- /dev/null
+++ b/docs/components/zeebe/react-components/_zeebe-card.js
@@ -0,0 +1,30 @@
+import React from "react";
+import "./_zeebe-table.css";
+
+const ZeebeCard = ({ link, title, image, description }) => {
+  return (
+    <a href={link} className="zeebe-card" title={title}>
+      <img src={image} alt={`${title} icon`} className="zeebe-card-image" />
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </a>
+  );
+};
+
+const ZeebeGrid = ({ zeebe }) => {
+  return (
+    <div className="zeebe-grid">
+      {zeebe.map((zeebe, index) => (
+        <ZeebeCard
+          key={index}
+          link={zeebe.link}
+          title={zeebe.title}
+          image={zeebe.image}
+          description={zeebe.description}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ZeebeGrid;
diff --git a/docs/components/zeebe/react-components/_zeebe-table.css b/docs/components/zeebe/react-components/_zeebe-table.css
new file mode 100644
index 00000000000..302c39790b6
--- /dev/null
+++ b/docs/components/zeebe/react-components/_zeebe-table.css
@@ -0,0 +1,367 @@
+/* Remove borders and background from the table */
+.no-border-table {
+  border-collapse: collapse;
+  width: 100%;
+  background: none;
+}
+
+.no-border-table th,
+.no-border-table td {
+  border: none;
+  background: none;
+  padding: 12px;
+  width: auto;
+}
+.no-border-table th {
+  text-align: left;
+}
+
+.no-border-table tr {
+  border: none;
+  background: none;
+}
+
+.no-border-cell {
+  border: none;
+  background: none;
+  vertical-align: middle;
+}
+
+td.no-border-cell-img {
+  border: none;
+  background: none;
+  width: 35%;
+}
+
+.no-border-cell-img img {
+  border: none;
+  background: none;
+  padding: 8px;
+  margin: 0;
+  width: 50px;
+}
+
+.zeebe-cell {
+  display: flex;
+  align-items: center; /* Center items vertically */
+  gap: 10px; /* Space between image and text */
+}
+
+.zeebe-image {
+  display: flex;
+  align-items: center; /* Center image vertically */
+  border: 0;
+  padding: 0px;
+}
+
+.zeebe-name {
+  display: flex;
+  align-items: center; /* Center text vertically */
+}
+
+.zeebe-input {
+  padding-top: 10px;
+}
+
+.zeebe-input-box {
+  border-radius: 3px;
+  height: 28px;
+  border: 1px solid #cacaca;
+  min-width: 240px;
+  padding-left: 6px;
+  margin-right: 20px;
+}
+
+.zeebe-input-link-about {
+  font-size: 14px;
+}
+
+.zeebe-no-results {
+  padding-top: 20px;
+  margin-bottom: 10px;
+  color: red;
+}
+
+.zeebe-no-results-list {
+  padding-top: 0px;
+  color: red;
+}
+
+.zeebe-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+
+a.zeebe-card {
+  text-decoration: none;
+  color: inherit;
+}
+
+.zeebe-card {
+  display: block;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 24px;
+  text-align: left;
+  background-color: #fff;
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s;
+  text-decoration: none;
+  color: inherit;
+}
+
+.zeebe-card img {
+  height: 40px;
+  border: none;
+  margin-bottom: 10px;
+  margin-top: 0;
+  padding: 0;
+}
+[data-theme="dark"] .zeebe-card img {
+  background-color: transparent;
+}
+
+.zeebe-card h3 {
+  margin: 0;
+  font-size: 1.1em;
+  font-weight: 600;
+  padding-bottom: 10px;
+}
+
+.zeebe-card p {
+  margin: 0;
+  font-size: 0.9em;
+  color: #555;
+}
+
+.zeebe-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .zeebe-card {
+  background-color: #1c1c1c;
+  border: 1px solid #3b3a3a;
+  box-shadow: 0px 8px 16px 4px #00000033;
+}
+[data-theme="dark"] .zeebe-card:hover {
+  background-color: transparent;
+  border: 1px solid var(--ifm-color-primary);
+  box-shadow: 0px 8px 16px 4px #78a9ff33;
+}
+[data-theme="dark"] .zeebe-card p {
+  color: #c6c6c6;
+}
+
+.zeebe-small-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+
+.zeebe-small {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+[data-theme="dark"] .zeebe-small {
+  background-color: #1c1c1c;
+  border: 1px solid #3b3a3a;
+  box-shadow: 0px 8px 16px 4px #00000033;
+}
+[data-theme="dark"] .zeebe-small:hover {
+  background-color: transparent;
+  border: 1px solid var(--ifm-color-primary);
+  box-shadow: 0px 8px 16px 4px #78a9ff33;
+}
+.zeebe-small img {
+  height: 32px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  padding-right: 10px;
+}
+[data-theme="dark"] .zeebe-small img {
+  background-color: transparent;
+}
+
+.zeebe-small:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+a.zeebe-small-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+@media (max-width: 1200px) {
+  .zeebe-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1024px) {
+  .zeebe-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .zeebe-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .zeebe-grid {
+    grid-template-columns: 1fr;
+  }
+  .zeebe-small-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* double column div layout  */
+.banner-column-container {
+  display: flex;
+  border-radius: 4px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: #000;
+}
+.banner-column-left {
+  flex: 1;
+  padding: 40px 10px 40px 30px;
+}
+.banner-column-right {
+  flex: 3;
+  padding: 40px 30px 40px 0px;
+  color: white;
+}
+.banner-column-left img {
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 160px;
+}
+@media (max-width: 768px) {
+  .banner-column-container {
+    flex-direction: column;
+  }
+  .banner-column-right {
+    padding: 0px 30px 40px 30px;
+  }
+  .banner-column-left {
+    padding: 40px 30px 20px 30px;
+  }
+}
+
+.fade-in-top-image {
+  opacity: 0;
+  transform: translateY(-20px);
+  animation: fadeInTop 2s forwards;
+  background-color: transparent;
+}
+[data-theme="dark"] .fade-in-top-image {
+  background-color: transparent !important;
+}
+
+@keyframes fadeInTop {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.filter-badges {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.badge--default {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: 4px;
+  background-color: #eee;
+  cursor: pointer;
+  margin-right: 10px;
+  font-size: 85%;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 1;
+  color: #616161;
+}
+[data-theme="dark"] .badge--default {
+  color: #999;
+  background-color: #3f3f3f;
+}
+
+.badge--outbound {
+  background-color: #0ba7b9;
+  color: #fff;
+  margin-top: 10px;
+}
+[data-theme="dark"] .badge--outbound {
+  background-color: #005d5d;
+  color: #bae6ff;
+}
+[data-theme="dark"] .badge--inbound {
+  background-color: #9a4e00;
+  color: #e1d9cd;
+}
+
+.badge--inbound {
+  background-color: #ff8b00;
+  color: #fff;
+  margin-top: 10px;
+}
+
+.badge--default:hover {
+  background-color: #ddd;
+}
+[data-theme="dark"] .badge--default:hover {
+  background-color: #555;
+}
+
+.badge--active {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active--outbound,
+.badge--active--outbound:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active--outbound {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active--inbound,
+.badge--active--inbound:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active--inbound {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.zeebe-type .badge:nth-of-type(1) {
+  margin-left: 0;
+  margin-bottom: 5px;
+}
diff --git a/docs/components/zeebe/technical-concepts/assets/icon-arrow.png b/docs/components/zeebe/technical-concepts/assets/icon-arrow.png
new file mode 100644
index 00000000000..b8642211a3c
Binary files /dev/null and b/docs/components/zeebe/technical-concepts/assets/icon-arrow.png differ
diff --git a/docs/components/zeebe/technical-concepts/assets/icon-blackbox.png b/docs/components/zeebe/technical-concepts/assets/icon-blackbox.png
new file mode 100644
index 00000000000..c18e8fdcef5
Binary files /dev/null and b/docs/components/zeebe/technical-concepts/assets/icon-blackbox.png differ
diff --git a/docs/components/zeebe/technical-concepts/assets/icon-end-to-end.png b/docs/components/zeebe/technical-concepts/assets/icon-end-to-end.png
new file mode 100644
index 00000000000..0f174f75caa
Binary files /dev/null and b/docs/components/zeebe/technical-concepts/assets/icon-end-to-end.png differ
diff --git a/docs/components/zeebe/technical-concepts/assets/icon-partition.png b/docs/components/zeebe/technical-concepts/assets/icon-partition.png
new file mode 100644
index 00000000000..1fdfae0d423
Binary files /dev/null and b/docs/components/zeebe/technical-concepts/assets/icon-partition.png differ
diff --git a/docs/components/zeebe/technical-concepts/assets/icon-protocol.png b/docs/components/zeebe/technical-concepts/assets/icon-protocol.png
new file mode 100644
index 00000000000..32f6351a93f
Binary files /dev/null and b/docs/components/zeebe/technical-concepts/assets/icon-protocol.png differ
diff --git a/docs/components/zeebe/technical-concepts/assets/icon-workflow-engine.png b/docs/components/zeebe/technical-concepts/assets/icon-workflow-engine.png
new file mode 100644
index 00000000000..4b394e8bedb
Binary files /dev/null and b/docs/components/zeebe/technical-concepts/assets/icon-workflow-engine.png differ
diff --git a/docs/components/zeebe/zeebe-overview.md b/docs/components/zeebe/zeebe-overview.md
index 66698b48592..77d14fa228a 100644
--- a/docs/components/zeebe/zeebe-overview.md
+++ b/docs/components/zeebe/zeebe-overview.md
@@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
+import ZeebeGrid from '../zeebe/react-components/\_zeebe-card';
 
-With Zeebe you can:
+import { gettingStartedCards } from '../zeebe/react-components/\_zeebe-card-data';
 
-- Define processes graphically in [BPMN 2.0](../modeler/bpmn/bpmn-coverage.md).
-- Choose any [gRPC](/apis-tools/zeebe-api/grpc.md)-supported programming language to implement your workers.
-- Build processes that react to events from Apache Kafka and other messaging platforms.
-- Use as part of a software as a service (SaaS) offering with Camunda 8 or deploy with Docker and Kubernetes (in the cloud or on-premises) with Camunda 8 Self-Managed.
-- Scale horizontally to handle very high throughput.
-- Rely on fault tolerance and high availability for your processes.
-- Export processes data for monitoring and analysis (available through the [exporters](../../self-managed/zeebe-deployment/exporters/exporters.md) added in Camunda 8 Self-Managed).
-- Engage with an active community.
+<p><a title="Zeebe architecture" href="../technical-concepts/architecture"><img src={OverviewImg} alt="Zeebe architecture" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '60%'}} className="fade-in-top-image"/></a>Zeebe is the process automation engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.</p>
+
+A workflow engine is an essential part of any process automation tool. We call it an “engine” because it drives business processes from start to finish, no matter how complex the process and decision logic need to be.
+
+## Why Zeebe?
+
+Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across nodes, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
+
+Zeebe distributes data across all brokers in a cluster with storage directly on the server filesystem. If one broker goes down, another can replace it with no data loss. This built-in replication mechanism ensures that Camunda can recover from machine or software failure with no human interaction, no data loss, and minimal downtime.
 
 For documentation on deploying Zeebe as part of Camunda 8 Self-Managed, refer to the [deployment guide](../../self-managed/zeebe-deployment/zeebe-installation.md).
 
-## Next steps
+## Get started
+
+New to Zeebe? Learn about clustering, partitions, internal processing, and more.
 
-- Get familiar with [technical concepts](technical-concepts/technical-concepts-overview.md).
+<ZeebeGrid zeebe={gettingStartedCards} />
diff --git a/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-card-data.js b/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-card-data.js
new file mode 100644
index 00000000000..929ae038bbb
--- /dev/null
+++ b/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-card-data.js
@@ -0,0 +1,51 @@
+import IconWorkflow from "../../zeebe/technical-concepts/assets/icon-workflow-engine.png";
+import IconArrow from "../../zeebe/technical-concepts/assets/icon-arrow.png";
+import IconBlackbox from "../../zeebe/technical-concepts/assets/icon-blackbox.png";
+import IconPartition from "../../zeebe/technical-concepts/assets/icon-partition.png";
+import IconEnd from "../../zeebe/technical-concepts/assets/icon-end-to-end.png";
+import IconProtocol from "../../zeebe/technical-concepts/assets/icon-protocol.png";
+
+// Getting started cards on Zeebe introduction page
+export const gettingStartedCards = [
+  {
+    link: "../technical-concepts/architecture",
+    title: "Architecture",
+    image: IconWorkflow,
+    description:
+      "Learn about the four main components in Zeebe's architecture: clients, gateways, brokers, and exporters.",
+  },
+  {
+    link: "../technical-concepts/clustering",
+    title: "Clustering",
+    image: IconArrow,
+    description:
+      "Learn how Zeebe can operate as a cluster of brokers, forming a peer-to-peer network.",
+  },
+  {
+    link: "../technical-concepts/partitions",
+    title: "Partitions",
+    image: IconPartition,
+    description:
+      "Learn about partitions, which are persistent streams of process-related events.",
+  },
+  {
+    link: "../technical-concepts/internal-processing",
+    title: "Internal processing",
+    image: IconBlackbox,
+    description:
+      "Understand state machines, events and commands, stateful stream processing, driving the engine, and handling backpressure within Zeebe.",
+  },
+  {
+    link: "../technical-concepts/process-lifecycles",
+    title: "Process lifecycles",
+    image: IconEnd,
+    description:
+      "In Zeebe, the process execution is represented internally by events of type ProcessInstance.",
+  },
+  {
+    link: "../technical-concepts/protocols",
+    title: "Protocols",
+    image: IconProtocol,
+    description: "Let's discuss gRPC and supported clients.",
+  },
+];
diff --git a/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-card.js b/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-card.js
new file mode 100644
index 00000000000..afdcf6bec90
--- /dev/null
+++ b/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-card.js
@@ -0,0 +1,30 @@
+import React from "react";
+import "./_zeebe-table.css";
+
+const ZeebeCard = ({ link, title, image, description }) => {
+  return (
+    <a href={link} className="zeebe-card" title={title}>
+      <img src={image} alt={`${title} icon`} className="zeebe-card-image" />
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </a>
+  );
+};
+
+const ZeebeGrid = ({ zeebe }) => {
+  return (
+    <div className="zeebe-grid">
+      {zeebe.map((zeebe, index) => (
+        <ZeebeCard
+          key={index}
+          link={zeebe.link}
+          title={zeebe.title}
+          image={zeebe.image}
+          description={zeebe.description}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ZeebeGrid;
diff --git a/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-table.css b/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-table.css
new file mode 100644
index 00000000000..302c39790b6
--- /dev/null
+++ b/versioned_docs/version-8.6/components/zeebe/react-components/_zeebe-table.css
@@ -0,0 +1,367 @@
+/* Remove borders and background from the table */
+.no-border-table {
+  border-collapse: collapse;
+  width: 100%;
+  background: none;
+}
+
+.no-border-table th,
+.no-border-table td {
+  border: none;
+  background: none;
+  padding: 12px;
+  width: auto;
+}
+.no-border-table th {
+  text-align: left;
+}
+
+.no-border-table tr {
+  border: none;
+  background: none;
+}
+
+.no-border-cell {
+  border: none;
+  background: none;
+  vertical-align: middle;
+}
+
+td.no-border-cell-img {
+  border: none;
+  background: none;
+  width: 35%;
+}
+
+.no-border-cell-img img {
+  border: none;
+  background: none;
+  padding: 8px;
+  margin: 0;
+  width: 50px;
+}
+
+.zeebe-cell {
+  display: flex;
+  align-items: center; /* Center items vertically */
+  gap: 10px; /* Space between image and text */
+}
+
+.zeebe-image {
+  display: flex;
+  align-items: center; /* Center image vertically */
+  border: 0;
+  padding: 0px;
+}
+
+.zeebe-name {
+  display: flex;
+  align-items: center; /* Center text vertically */
+}
+
+.zeebe-input {
+  padding-top: 10px;
+}
+
+.zeebe-input-box {
+  border-radius: 3px;
+  height: 28px;
+  border: 1px solid #cacaca;
+  min-width: 240px;
+  padding-left: 6px;
+  margin-right: 20px;
+}
+
+.zeebe-input-link-about {
+  font-size: 14px;
+}
+
+.zeebe-no-results {
+  padding-top: 20px;
+  margin-bottom: 10px;
+  color: red;
+}
+
+.zeebe-no-results-list {
+  padding-top: 0px;
+  color: red;
+}
+
+.zeebe-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+
+a.zeebe-card {
+  text-decoration: none;
+  color: inherit;
+}
+
+.zeebe-card {
+  display: block;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 24px;
+  text-align: left;
+  background-color: #fff;
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s;
+  text-decoration: none;
+  color: inherit;
+}
+
+.zeebe-card img {
+  height: 40px;
+  border: none;
+  margin-bottom: 10px;
+  margin-top: 0;
+  padding: 0;
+}
+[data-theme="dark"] .zeebe-card img {
+  background-color: transparent;
+}
+
+.zeebe-card h3 {
+  margin: 0;
+  font-size: 1.1em;
+  font-weight: 600;
+  padding-bottom: 10px;
+}
+
+.zeebe-card p {
+  margin: 0;
+  font-size: 0.9em;
+  color: #555;
+}
+
+.zeebe-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .zeebe-card {
+  background-color: #1c1c1c;
+  border: 1px solid #3b3a3a;
+  box-shadow: 0px 8px 16px 4px #00000033;
+}
+[data-theme="dark"] .zeebe-card:hover {
+  background-color: transparent;
+  border: 1px solid var(--ifm-color-primary);
+  box-shadow: 0px 8px 16px 4px #78a9ff33;
+}
+[data-theme="dark"] .zeebe-card p {
+  color: #c6c6c6;
+}
+
+.zeebe-small-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+
+.zeebe-small {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+[data-theme="dark"] .zeebe-small {
+  background-color: #1c1c1c;
+  border: 1px solid #3b3a3a;
+  box-shadow: 0px 8px 16px 4px #00000033;
+}
+[data-theme="dark"] .zeebe-small:hover {
+  background-color: transparent;
+  border: 1px solid var(--ifm-color-primary);
+  box-shadow: 0px 8px 16px 4px #78a9ff33;
+}
+.zeebe-small img {
+  height: 32px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  padding-right: 10px;
+}
+[data-theme="dark"] .zeebe-small img {
+  background-color: transparent;
+}
+
+.zeebe-small:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+a.zeebe-small-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+@media (max-width: 1200px) {
+  .zeebe-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1024px) {
+  .zeebe-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .zeebe-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .zeebe-grid {
+    grid-template-columns: 1fr;
+  }
+  .zeebe-small-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* double column div layout  */
+.banner-column-container {
+  display: flex;
+  border-radius: 4px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: #000;
+}
+.banner-column-left {
+  flex: 1;
+  padding: 40px 10px 40px 30px;
+}
+.banner-column-right {
+  flex: 3;
+  padding: 40px 30px 40px 0px;
+  color: white;
+}
+.banner-column-left img {
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 160px;
+}
+@media (max-width: 768px) {
+  .banner-column-container {
+    flex-direction: column;
+  }
+  .banner-column-right {
+    padding: 0px 30px 40px 30px;
+  }
+  .banner-column-left {
+    padding: 40px 30px 20px 30px;
+  }
+}
+
+.fade-in-top-image {
+  opacity: 0;
+  transform: translateY(-20px);
+  animation: fadeInTop 2s forwards;
+  background-color: transparent;
+}
+[data-theme="dark"] .fade-in-top-image {
+  background-color: transparent !important;
+}
+
+@keyframes fadeInTop {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.filter-badges {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.badge--default {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: 4px;
+  background-color: #eee;
+  cursor: pointer;
+  margin-right: 10px;
+  font-size: 85%;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 1;
+  color: #616161;
+}
+[data-theme="dark"] .badge--default {
+  color: #999;
+  background-color: #3f3f3f;
+}
+
+.badge--outbound {
+  background-color: #0ba7b9;
+  color: #fff;
+  margin-top: 10px;
+}
+[data-theme="dark"] .badge--outbound {
+  background-color: #005d5d;
+  color: #bae6ff;
+}
+[data-theme="dark"] .badge--inbound {
+  background-color: #9a4e00;
+  color: #e1d9cd;
+}
+
+.badge--inbound {
+  background-color: #ff8b00;
+  color: #fff;
+  margin-top: 10px;
+}
+
+.badge--default:hover {
+  background-color: #ddd;
+}
+[data-theme="dark"] .badge--default:hover {
+  background-color: #555;
+}
+
+.badge--active {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active--outbound,
+.badge--active--outbound:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active--outbound {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active--inbound,
+.badge--active--inbound:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active--inbound {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.zeebe-type .badge:nth-of-type(1) {
+  margin-left: 0;
+  margin-bottom: 5px;
+}
diff --git a/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-arrow.png b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-arrow.png
new file mode 100644
index 00000000000..b8642211a3c
Binary files /dev/null and b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-arrow.png differ
diff --git a/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-blackbox.png b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-blackbox.png
new file mode 100644
index 00000000000..c18e8fdcef5
Binary files /dev/null and b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-blackbox.png differ
diff --git a/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-end-to-end.png b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-end-to-end.png
new file mode 100644
index 00000000000..0f174f75caa
Binary files /dev/null and b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-end-to-end.png differ
diff --git a/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-partition.png b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-partition.png
new file mode 100644
index 00000000000..1fdfae0d423
Binary files /dev/null and b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-partition.png differ
diff --git a/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-protocol.png b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-protocol.png
new file mode 100644
index 00000000000..32f6351a93f
Binary files /dev/null and b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-protocol.png differ
diff --git a/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-workflow-engine.png b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-workflow-engine.png
new file mode 100644
index 00000000000..4b394e8bedb
Binary files /dev/null and b/versioned_docs/version-8.6/components/zeebe/technical-concepts/assets/icon-workflow-engine.png differ
diff --git a/versioned_docs/version-8.6/components/zeebe/zeebe-overview.md b/versioned_docs/version-8.6/components/zeebe/zeebe-overview.md
index 66698b48592..77d14fa228a 100644
--- a/versioned_docs/version-8.6/components/zeebe/zeebe-overview.md
+++ b/versioned_docs/version-8.6/components/zeebe/zeebe-overview.md
@@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
+import ZeebeGrid from '../zeebe/react-components/\_zeebe-card';
 
-With Zeebe you can:
+import { gettingStartedCards } from '../zeebe/react-components/\_zeebe-card-data';
 
-- Define processes graphically in [BPMN 2.0](../modeler/bpmn/bpmn-coverage.md).
-- Choose any [gRPC](/apis-tools/zeebe-api/grpc.md)-supported programming language to implement your workers.
-- Build processes that react to events from Apache Kafka and other messaging platforms.
-- Use as part of a software as a service (SaaS) offering with Camunda 8 or deploy with Docker and Kubernetes (in the cloud or on-premises) with Camunda 8 Self-Managed.
-- Scale horizontally to handle very high throughput.
-- Rely on fault tolerance and high availability for your processes.
-- Export processes data for monitoring and analysis (available through the [exporters](../../self-managed/zeebe-deployment/exporters/exporters.md) added in Camunda 8 Self-Managed).
-- Engage with an active community.
+<p><a title="Zeebe architecture" href="../technical-concepts/architecture"><img src={OverviewImg} alt="Zeebe architecture" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '60%'}} className="fade-in-top-image"/></a>Zeebe is the process automation engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.</p>
+
+A workflow engine is an essential part of any process automation tool. We call it an “engine” because it drives business processes from start to finish, no matter how complex the process and decision logic need to be.
+
+## Why Zeebe?
+
+Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across nodes, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
+
+Zeebe distributes data across all brokers in a cluster with storage directly on the server filesystem. If one broker goes down, another can replace it with no data loss. This built-in replication mechanism ensures that Camunda can recover from machine or software failure with no human interaction, no data loss, and minimal downtime.
 
 For documentation on deploying Zeebe as part of Camunda 8 Self-Managed, refer to the [deployment guide](../../self-managed/zeebe-deployment/zeebe-installation.md).
 
-## Next steps
+## Get started
+
+New to Zeebe? Learn about clustering, partitions, internal processing, and more.
 
-- Get familiar with [technical concepts](technical-concepts/technical-concepts-overview.md).
+<ZeebeGrid zeebe={gettingStartedCards} />
diff --git a/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-card-data.js b/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-card-data.js
new file mode 100644
index 00000000000..929ae038bbb
--- /dev/null
+++ b/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-card-data.js
@@ -0,0 +1,51 @@
+import IconWorkflow from "../../zeebe/technical-concepts/assets/icon-workflow-engine.png";
+import IconArrow from "../../zeebe/technical-concepts/assets/icon-arrow.png";
+import IconBlackbox from "../../zeebe/technical-concepts/assets/icon-blackbox.png";
+import IconPartition from "../../zeebe/technical-concepts/assets/icon-partition.png";
+import IconEnd from "../../zeebe/technical-concepts/assets/icon-end-to-end.png";
+import IconProtocol from "../../zeebe/technical-concepts/assets/icon-protocol.png";
+
+// Getting started cards on Zeebe introduction page
+export const gettingStartedCards = [
+  {
+    link: "../technical-concepts/architecture",
+    title: "Architecture",
+    image: IconWorkflow,
+    description:
+      "Learn about the four main components in Zeebe's architecture: clients, gateways, brokers, and exporters.",
+  },
+  {
+    link: "../technical-concepts/clustering",
+    title: "Clustering",
+    image: IconArrow,
+    description:
+      "Learn how Zeebe can operate as a cluster of brokers, forming a peer-to-peer network.",
+  },
+  {
+    link: "../technical-concepts/partitions",
+    title: "Partitions",
+    image: IconPartition,
+    description:
+      "Learn about partitions, which are persistent streams of process-related events.",
+  },
+  {
+    link: "../technical-concepts/internal-processing",
+    title: "Internal processing",
+    image: IconBlackbox,
+    description:
+      "Understand state machines, events and commands, stateful stream processing, driving the engine, and handling backpressure within Zeebe.",
+  },
+  {
+    link: "../technical-concepts/process-lifecycles",
+    title: "Process lifecycles",
+    image: IconEnd,
+    description:
+      "In Zeebe, the process execution is represented internally by events of type ProcessInstance.",
+  },
+  {
+    link: "../technical-concepts/protocols",
+    title: "Protocols",
+    image: IconProtocol,
+    description: "Let's discuss gRPC and supported clients.",
+  },
+];
diff --git a/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-card.js b/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-card.js
new file mode 100644
index 00000000000..afdcf6bec90
--- /dev/null
+++ b/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-card.js
@@ -0,0 +1,30 @@
+import React from "react";
+import "./_zeebe-table.css";
+
+const ZeebeCard = ({ link, title, image, description }) => {
+  return (
+    <a href={link} className="zeebe-card" title={title}>
+      <img src={image} alt={`${title} icon`} className="zeebe-card-image" />
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </a>
+  );
+};
+
+const ZeebeGrid = ({ zeebe }) => {
+  return (
+    <div className="zeebe-grid">
+      {zeebe.map((zeebe, index) => (
+        <ZeebeCard
+          key={index}
+          link={zeebe.link}
+          title={zeebe.title}
+          image={zeebe.image}
+          description={zeebe.description}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ZeebeGrid;
diff --git a/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-table.css b/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-table.css
new file mode 100644
index 00000000000..302c39790b6
--- /dev/null
+++ b/versioned_docs/version-8.7/components/zeebe/react-components/_zeebe-table.css
@@ -0,0 +1,367 @@
+/* Remove borders and background from the table */
+.no-border-table {
+  border-collapse: collapse;
+  width: 100%;
+  background: none;
+}
+
+.no-border-table th,
+.no-border-table td {
+  border: none;
+  background: none;
+  padding: 12px;
+  width: auto;
+}
+.no-border-table th {
+  text-align: left;
+}
+
+.no-border-table tr {
+  border: none;
+  background: none;
+}
+
+.no-border-cell {
+  border: none;
+  background: none;
+  vertical-align: middle;
+}
+
+td.no-border-cell-img {
+  border: none;
+  background: none;
+  width: 35%;
+}
+
+.no-border-cell-img img {
+  border: none;
+  background: none;
+  padding: 8px;
+  margin: 0;
+  width: 50px;
+}
+
+.zeebe-cell {
+  display: flex;
+  align-items: center; /* Center items vertically */
+  gap: 10px; /* Space between image and text */
+}
+
+.zeebe-image {
+  display: flex;
+  align-items: center; /* Center image vertically */
+  border: 0;
+  padding: 0px;
+}
+
+.zeebe-name {
+  display: flex;
+  align-items: center; /* Center text vertically */
+}
+
+.zeebe-input {
+  padding-top: 10px;
+}
+
+.zeebe-input-box {
+  border-radius: 3px;
+  height: 28px;
+  border: 1px solid #cacaca;
+  min-width: 240px;
+  padding-left: 6px;
+  margin-right: 20px;
+}
+
+.zeebe-input-link-about {
+  font-size: 14px;
+}
+
+.zeebe-no-results {
+  padding-top: 20px;
+  margin-bottom: 10px;
+  color: red;
+}
+
+.zeebe-no-results-list {
+  padding-top: 0px;
+  color: red;
+}
+
+.zeebe-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+
+a.zeebe-card {
+  text-decoration: none;
+  color: inherit;
+}
+
+.zeebe-card {
+  display: block;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 24px;
+  text-align: left;
+  background-color: #fff;
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s;
+  text-decoration: none;
+  color: inherit;
+}
+
+.zeebe-card img {
+  height: 40px;
+  border: none;
+  margin-bottom: 10px;
+  margin-top: 0;
+  padding: 0;
+}
+[data-theme="dark"] .zeebe-card img {
+  background-color: transparent;
+}
+
+.zeebe-card h3 {
+  margin: 0;
+  font-size: 1.1em;
+  font-weight: 600;
+  padding-bottom: 10px;
+}
+
+.zeebe-card p {
+  margin: 0;
+  font-size: 0.9em;
+  color: #555;
+}
+
+.zeebe-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .zeebe-card {
+  background-color: #1c1c1c;
+  border: 1px solid #3b3a3a;
+  box-shadow: 0px 8px 16px 4px #00000033;
+}
+[data-theme="dark"] .zeebe-card:hover {
+  background-color: transparent;
+  border: 1px solid var(--ifm-color-primary);
+  box-shadow: 0px 8px 16px 4px #78a9ff33;
+}
+[data-theme="dark"] .zeebe-card p {
+  color: #c6c6c6;
+}
+
+.zeebe-small-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+
+.zeebe-small {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+[data-theme="dark"] .zeebe-small {
+  background-color: #1c1c1c;
+  border: 1px solid #3b3a3a;
+  box-shadow: 0px 8px 16px 4px #00000033;
+}
+[data-theme="dark"] .zeebe-small:hover {
+  background-color: transparent;
+  border: 1px solid var(--ifm-color-primary);
+  box-shadow: 0px 8px 16px 4px #78a9ff33;
+}
+.zeebe-small img {
+  height: 32px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  padding-right: 10px;
+}
+[data-theme="dark"] .zeebe-small img {
+  background-color: transparent;
+}
+
+.zeebe-small:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+a.zeebe-small-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+@media (max-width: 1200px) {
+  .zeebe-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1024px) {
+  .zeebe-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .zeebe-small-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .zeebe-grid {
+    grid-template-columns: 1fr;
+  }
+  .zeebe-small-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* double column div layout  */
+.banner-column-container {
+  display: flex;
+  border-radius: 4px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: #000;
+}
+.banner-column-left {
+  flex: 1;
+  padding: 40px 10px 40px 30px;
+}
+.banner-column-right {
+  flex: 3;
+  padding: 40px 30px 40px 0px;
+  color: white;
+}
+.banner-column-left img {
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 160px;
+}
+@media (max-width: 768px) {
+  .banner-column-container {
+    flex-direction: column;
+  }
+  .banner-column-right {
+    padding: 0px 30px 40px 30px;
+  }
+  .banner-column-left {
+    padding: 40px 30px 20px 30px;
+  }
+}
+
+.fade-in-top-image {
+  opacity: 0;
+  transform: translateY(-20px);
+  animation: fadeInTop 2s forwards;
+  background-color: transparent;
+}
+[data-theme="dark"] .fade-in-top-image {
+  background-color: transparent !important;
+}
+
+@keyframes fadeInTop {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.filter-badges {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.badge--default {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: 4px;
+  background-color: #eee;
+  cursor: pointer;
+  margin-right: 10px;
+  font-size: 85%;
+  font-weight: var(--ifm-font-weight-bold);
+  line-height: 1;
+  color: #616161;
+}
+[data-theme="dark"] .badge--default {
+  color: #999;
+  background-color: #3f3f3f;
+}
+
+.badge--outbound {
+  background-color: #0ba7b9;
+  color: #fff;
+  margin-top: 10px;
+}
+[data-theme="dark"] .badge--outbound {
+  background-color: #005d5d;
+  color: #bae6ff;
+}
+[data-theme="dark"] .badge--inbound {
+  background-color: #9a4e00;
+  color: #e1d9cd;
+}
+
+.badge--inbound {
+  background-color: #ff8b00;
+  color: #fff;
+  margin-top: 10px;
+}
+
+.badge--default:hover {
+  background-color: #ddd;
+}
+[data-theme="dark"] .badge--default:hover {
+  background-color: #555;
+}
+
+.badge--active {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active--outbound,
+.badge--active--outbound:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active--outbound {
+  background-color: #007bff;
+  color: #fff;
+}
+.badge--active--inbound,
+.badge--active--inbound:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+[data-theme="dark"] .badge--active--inbound {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.zeebe-type .badge:nth-of-type(1) {
+  margin-left: 0;
+  margin-bottom: 5px;
+}
diff --git a/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-arrow.png b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-arrow.png
new file mode 100644
index 00000000000..b8642211a3c
Binary files /dev/null and b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-arrow.png differ
diff --git a/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-blackbox.png b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-blackbox.png
new file mode 100644
index 00000000000..c18e8fdcef5
Binary files /dev/null and b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-blackbox.png differ
diff --git a/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-end-to-end.png b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-end-to-end.png
new file mode 100644
index 00000000000..0f174f75caa
Binary files /dev/null and b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-end-to-end.png differ
diff --git a/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-partition.png b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-partition.png
new file mode 100644
index 00000000000..1fdfae0d423
Binary files /dev/null and b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-partition.png differ
diff --git a/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-protocol.png b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-protocol.png
new file mode 100644
index 00000000000..32f6351a93f
Binary files /dev/null and b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-protocol.png differ
diff --git a/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-workflow-engine.png b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-workflow-engine.png
new file mode 100644
index 00000000000..4b394e8bedb
Binary files /dev/null and b/versioned_docs/version-8.7/components/zeebe/technical-concepts/assets/icon-workflow-engine.png differ
diff --git a/versioned_docs/version-8.7/components/zeebe/zeebe-overview.md b/versioned_docs/version-8.7/components/zeebe/zeebe-overview.md
index 66698b48592..77d14fa228a 100644
--- a/versioned_docs/version-8.7/components/zeebe/zeebe-overview.md
+++ b/versioned_docs/version-8.7/components/zeebe/zeebe-overview.md
@@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
+import ZeebeGrid from '../zeebe/react-components/\_zeebe-card';
 
-With Zeebe you can:
+import { gettingStartedCards } from '../zeebe/react-components/\_zeebe-card-data';
 
-- Define processes graphically in [BPMN 2.0](../modeler/bpmn/bpmn-coverage.md).
-- Choose any [gRPC](/apis-tools/zeebe-api/grpc.md)-supported programming language to implement your workers.
-- Build processes that react to events from Apache Kafka and other messaging platforms.
-- Use as part of a software as a service (SaaS) offering with Camunda 8 or deploy with Docker and Kubernetes (in the cloud or on-premises) with Camunda 8 Self-Managed.
-- Scale horizontally to handle very high throughput.
-- Rely on fault tolerance and high availability for your processes.
-- Export processes data for monitoring and analysis (available through the [exporters](../../self-managed/zeebe-deployment/exporters/exporters.md) added in Camunda 8 Self-Managed).
-- Engage with an active community.
+<p><a title="Zeebe architecture" href="../technical-concepts/architecture"><img src={OverviewImg} alt="Zeebe architecture" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '60%'}} className="fade-in-top-image"/></a>Zeebe is the process automation engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.</p>
+
+A workflow engine is an essential part of any process automation tool. We call it an “engine” because it drives business processes from start to finish, no matter how complex the process and decision logic need to be.
+
+## Why Zeebe?
+
+Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across nodes, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
+
+Zeebe distributes data across all brokers in a cluster with storage directly on the server filesystem. If one broker goes down, another can replace it with no data loss. This built-in replication mechanism ensures that Camunda can recover from machine or software failure with no human interaction, no data loss, and minimal downtime.
 
 For documentation on deploying Zeebe as part of Camunda 8 Self-Managed, refer to the [deployment guide](../../self-managed/zeebe-deployment/zeebe-installation.md).
 
-## Next steps
+## Get started
+
+New to Zeebe? Learn about clustering, partitions, internal processing, and more.
 
-- Get familiar with [technical concepts](technical-concepts/technical-concepts-overview.md).
+<ZeebeGrid zeebe={gettingStartedCards} />


Reviews:
user: login: ChrisKujawa
body: @christinaausley looks great! Sorry for the late review 😞 

Changes look good, as I mentioned in our meeting a awhile ago I think we probably want to have at some point more a page covering the complete Standalone application, and not the separate component pages. Not sure whether it really makes sense to distinguish between them, as it is one product for the user.

The preview links (squares) didn't worked for me
It always showed when clicking them
```

<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
</Error>
```
state: DISMISSED
author_association: MEMBER
submitted_at: 2025-03-17T14:09:09Z
user: login: christinaausley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T15:21:45Z
user: login: christinaausley
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T15:22:40Z
user: login: ChrisKujawa
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-19T08:49:55Z
user: login: ChrisKujawa
body: Looks good to me 👍🏼 Cool stuff 🚀 

I feel there is one glitch. It looks like when clicking the icon/button, and switching to the other page. It first shows the page and then does somehow another reload. Do you see this as well?
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-19T08:52:33Z

Review comments:
diff_hunk: @@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
+import ZeebeGrid from '../zeebe/react-components/\_zeebe-card';
 
-With Zeebe you can:
+import { gettingStartedCards } from '../zeebe/react-components/\_zeebe-card-data';
 
-- Define processes graphically in [BPMN 2.0](../modeler/bpmn/bpmn-coverage.md).
-- Choose any [gRPC](/apis-tools/zeebe-api/grpc.md)-supported programming language to implement your workers.
-- Build processes that react to events from Apache Kafka and other messaging platforms.
-- Use as part of a software as a service (SaaS) offering with Camunda 8 or deploy with Docker and Kubernetes (in the cloud or on-premises) with Camunda 8 Self-Managed.
-- Scale horizontally to handle very high throughput.
-- Rely on fault tolerance and high availability for your processes.
-- Export processes data for monitoring and analysis (available through the [exporters](../../self-managed/zeebe-deployment/exporters/exporters.md) added in Camunda 8 Self-Managed).
-- Engage with an active community.
+<p><a title="Zeebe architecture" href="../technical-concepts/architecture"><img src={OverviewImg} alt="Zeebe architecture" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '60%'}} className="fade-in-top-image"/></a>Zeebe is the process automation engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.</p>
+
+A workflow engine is an essential part of any process automation tool. We call it an “engine” because it drives business processes from start to finish, no matter how complex the process and decision logic need to be.
+
+## Why Zeebe?
+
+Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across clusters, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
path: docs/components/zeebe/zeebe-overview.md
user: login: ChrisKujawa
body: ```suggestion
Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across nodes, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
```
created_at: 2025-03-17T14:05:18Z
author_association: MEMBER
diff_hunk: @@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
+import ZeebeGrid from '../zeebe/react-components/\_zeebe-card';
 
-With Zeebe you can:
+import { gettingStartedCards } from '../zeebe/react-components/\_zeebe-card-data';
 
-- Define processes graphically in [BPMN 2.0](../modeler/bpmn/bpmn-coverage.md).
-- Choose any [gRPC](/apis-tools/zeebe-api/grpc.md)-supported programming language to implement your workers.
-- Build processes that react to events from Apache Kafka and other messaging platforms.
-- Use as part of a software as a service (SaaS) offering with Camunda 8 or deploy with Docker and Kubernetes (in the cloud or on-premises) with Camunda 8 Self-Managed.
-- Scale horizontally to handle very high throughput.
-- Rely on fault tolerance and high availability for your processes.
-- Export processes data for monitoring and analysis (available through the [exporters](../../self-managed/zeebe-deployment/exporters/exporters.md) added in Camunda 8 Self-Managed).
-- Engage with an active community.
+<p><a title="Zeebe architecture" href="../technical-concepts/architecture"><img src={OverviewImg} alt="Zeebe architecture" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '60%'}} className="fade-in-top-image"/></a>Zeebe is the process automation engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.</p>
+
+A workflow engine is an essential part of any process automation tool. We call it an “engine” because it drives business processes from start to finish, no matter how complex the process and decision logic need to be.
+
+## Why Zeebe?
+
+Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across clusters, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
+
+Zeebe distributes data across all brokers in a cluster with storage directly on the server filesystem. If one broker goes down, another can replace it with no data loss. This pre-configured replication mechanism ensures that Camunda can recover from machine or software failure with no human interaction, no data loss, and minimal downtime.
path: docs/components/zeebe/zeebe-overview.md
user: login: ChrisKujawa
body: ```suggestion
Zeebe distributes data across all brokers in a cluster with storage directly on the server filesystem. If one broker goes down, another can replace it with no data loss. This built-in replication mechanism ensures that Camunda can recover from machine or software failure with no human interaction, no data loss, and minimal downtime.
```
created_at: 2025-03-17T14:05:49Z
author_association: MEMBER
diff_hunk: @@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
+import ZeebeGrid from '../zeebe/react-components/\_zeebe-card';
 
-With Zeebe you can:
+import { gettingStartedCards } from '../zeebe/react-components/\_zeebe-card-data';
 
-- Define processes graphically in [BPMN 2.0](../modeler/bpmn/bpmn-coverage.md).
-- Choose any [gRPC](/apis-tools/zeebe-api/grpc.md)-supported programming language to implement your workers.
-- Build processes that react to events from Apache Kafka and other messaging platforms.
-- Use as part of a software as a service (SaaS) offering with Camunda 8 or deploy with Docker and Kubernetes (in the cloud or on-premises) with Camunda 8 Self-Managed.
-- Scale horizontally to handle very high throughput.
-- Rely on fault tolerance and high availability for your processes.
-- Export processes data for monitoring and analysis (available through the [exporters](../../self-managed/zeebe-deployment/exporters/exporters.md) added in Camunda 8 Self-Managed).
-- Engage with an active community.
+<p><a title="Zeebe architecture" href="../technical-concepts/architecture"><img src={OverviewImg} alt="Zeebe architecture" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '60%'}} className="fade-in-top-image"/></a>Zeebe is the process automation engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.</p>
+
+A workflow engine is an essential part of any process automation tool. We call it an “engine” because it drives business processes from start to finish, no matter how complex the process and decision logic need to be.
+
+## Why Zeebe?
+
+Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across clusters, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
+
+Zeebe distributes data across all brokers in a cluster with storage directly on the server filesystem. If one broker goes down, another can replace it with no data loss. This pre-configured replication mechanism ensures that Camunda can recover from machine or software failure with no human interaction, no data loss, and minimal downtime.
 
 For documentation on deploying Zeebe as part of Camunda 8 Self-Managed, refer to the [deployment guide](../../self-managed/zeebe-deployment/zeebe-installation.md).
 
-## Next steps
+## Get started
+
+New to Zeebe? Learn about clustering, partitions, internal processing, and more.
 
-- Get familiar with [technical concepts](technical-concepts/technical-concepts-overview.md).
+<ZeebeGrid zeebe={gettingStartedCards} />
path: docs/components/zeebe/zeebe-overview.md
user: login: ChrisKujawa
body: Looks great. 🚀 I guess it is expected that the links don't work in the preview? ❓ 
created_at: 2025-03-17T14:06:19Z
author_association: MEMBER
diff_hunk: @@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
path: docs/components/zeebe/zeebe-overview.md
user: login: ChrisKujawa
body: 🔧 I feel we can update this image as well. Not sure whether we want to do it now
created_at: 2025-03-17T14:06:51Z
author_association: MEMBER
diff_hunk: @@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
path: docs/components/zeebe/zeebe-overview.md
user: login: christinaausley
body: Would your team be able to put together a new architecture diagram? If so, I'm happy to drop this in this PR, or I can create a separate issue.
created_at: 2025-03-18T15:21:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
+import ZeebeGrid from '../zeebe/react-components/\_zeebe-card';
 
-With Zeebe you can:
+import { gettingStartedCards } from '../zeebe/react-components/\_zeebe-card-data';
 
-- Define processes graphically in [BPMN 2.0](../modeler/bpmn/bpmn-coverage.md).
-- Choose any [gRPC](/apis-tools/zeebe-api/grpc.md)-supported programming language to implement your workers.
-- Build processes that react to events from Apache Kafka and other messaging platforms.
-- Use as part of a software as a service (SaaS) offering with Camunda 8 or deploy with Docker and Kubernetes (in the cloud or on-premises) with Camunda 8 Self-Managed.
-- Scale horizontally to handle very high throughput.
-- Rely on fault tolerance and high availability for your processes.
-- Export processes data for monitoring and analysis (available through the [exporters](../../self-managed/zeebe-deployment/exporters/exporters.md) added in Camunda 8 Self-Managed).
-- Engage with an active community.
+<p><a title="Zeebe architecture" href="../technical-concepts/architecture"><img src={OverviewImg} alt="Zeebe architecture" style={{border:0,padding:0,paddingLeft:20,margin:0,float: 'right', width: '60%'}} className="fade-in-top-image"/></a>Zeebe is the process automation engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.</p>
+
+A workflow engine is an essential part of any process automation tool. We call it an “engine” because it drives business processes from start to finish, no matter how complex the process and decision logic need to be.
+
+## Why Zeebe?
+
+Zeebe doesn’t rely on a central database, so there’s no performance bottleneck as process volumes increase. Deliver high throughput by distributing processing across clusters, or add cluster nodes to execute an unlimited number of processes at consistently low latency.
+
+Zeebe distributes data across all brokers in a cluster with storage directly on the server filesystem. If one broker goes down, another can replace it with no data loss. This pre-configured replication mechanism ensures that Camunda can recover from machine or software failure with no human interaction, no data loss, and minimal downtime.
 
 For documentation on deploying Zeebe as part of Camunda 8 Self-Managed, refer to the [deployment guide](../../self-managed/zeebe-deployment/zeebe-installation.md).
 
-## Next steps
+## Get started
+
+New to Zeebe? Learn about clustering, partitions, internal processing, and more.
 
-- Get familiar with [technical concepts](technical-concepts/technical-concepts-overview.md).
+<ZeebeGrid zeebe={gettingStartedCards} />
path: docs/components/zeebe/zeebe-overview.md
user: login: christinaausley
body: This works now 👍 
created_at: 2025-03-18T15:22:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,21 +5,25 @@ sidebar_label: "Introduction"
 description: "Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe."
 ---
 
-Zeebe is the workflow engine powering Camunda 8. While written in Java, you do not need to be a Java developer to use Zeebe.
+import OverviewImg from '../zeebe/technical-concepts/assets/zeebe-architecture.png';
path: docs/components/zeebe/zeebe-overview.md
user: login: ChrisKujawa
body: We might should do this as part of an effort to show the complete architecture (of the whole platform) wdyt? Meaning including webapps, identity, rest API, etc. 
created_at: 2025-03-19T08:49:55Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-04T22:32:18Z
body: :wave: :robot: :white_check_mark: Looks like the changes were ported across versions, nice job! :tada:

You can read more about the versioning within our docs in our [documentation guidelines](https://github.com/camunda/camunda-docs/blob/c666b7e5e35bfe31468ce4ac679ea7b62ab86d73/howtos/documentation-guidelines.md#versions).
<!-- thollander/actions-comment-pull-request "check-versions" -->
author_association: CONTRIBUTOR
user: login: christinaausley
created_at: 2025-03-04T22:32:38Z
body: @ChrisKujawa Based on our conversation a little over a week ago, WDYT about these changes? Is there anything you would add, or want to highlight about Zeebe on this page?
author_association: CONTRIBUTOR
user: login: mesellings
created_at: 2025-03-05T08:30:33Z
body: Great work @christinaausley, much clearer as a landing page 🚀  - I might look at creating a more generic version of these cards now they are being used in other places, but this page looks so much better! 

Only comment I have is that the icons/image need to use a colour that works well in both light/dark mode - you can see I use the grey #999999 which works well across both modes. If you want me to show you how to convert these icons/diagram let me know, or I can do it for you? (in Docusaurus you can also specify alternate images for each mode, but this seems like unnecessary work, so I settled on a grey that works for both).

Great job! 👏 
author_association: COLLABORATOR
user: login: christinaausley
created_at: 2025-03-05T15:17:59Z
body: > If you want me to show you how to convert these icons/diagram let me know, or I can do it for you?

@mesellings Agreed! Feel free to push a commit or propose the change to adjust the coloring here 😄 
author_association: CONTRIBUTOR
user: login: mesellings
created_at: 2025-03-19T08:59:50Z
body: > Looks good to me 👍🏼 Cool stuff 🚀
> 
> I feel there is one glitch. It looks like when clicking the icon/button, and switching to the other page. It first shows the page and then does somehow another reload. Do you see this as well?

Good catch, but I think this is very likely to be a glitch in the preview environment, but we could look on the staging environment before publishing the docs and followup with any PRs needed afterwards, but I think this will be fine - it uses the same code as the connectors work which doesn't suffer from this 👍 
author_association: COLLABORATOR
user: login: github-actions[bot]
created_at: 2025-03-19T15:17:52Z
body: <!-- add-pr-comment:add-pr-comment -->

:broom: Preview environment for this PR has been torn down.
author_association: CONTRIBUTOR