Zeebe overview revamp

[christinaausley]

Description

Revamping the Zeebe overview page -- closes #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?

• 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)
• There is no urgency with this change (add low prio label)

PR Checklist

• My changes are for an upcoming minor release and:
  • 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.

• I added a DRI, team, or delegate as a reviewer for technical accuracy and grammar/style:
  • Engineering team review
  • Technical writer review via @camunda/tech-writers unless working with an embedded writer.

[github-actions]

👋 🤖 🤔 Hello, @christinaausley! Did you make your changes in all the right places?

These files were changed only in docs/. You might want to duplicate these changes in versioned_docs/version-8.6/.

• docs/components/zeebe/react-components/_zeebe-card-data.js
• docs/components/zeebe/react-components/_zeebe-card.js
• docs/components/zeebe/react-components/_zeebe-table.css
• docs/components/zeebe/technical-concepts/assets/icon-arrow.png
• docs/components/zeebe/technical-concepts/assets/icon-blackbox.png
• docs/components/zeebe/technical-concepts/assets/icon-end-to-end.png
• docs/components/zeebe/technical-concepts/assets/icon-partition.png
• docs/components/zeebe/technical-concepts/assets/icon-protocol.png
• docs/components/zeebe/technical-concepts/assets/icon-workflow-engine.png
• docs/components/zeebe/zeebe-overview.md

These files were changed only in docs/. You might want to duplicate these changes in versioned_docs/version-8.7/.

• docs/components/zeebe/react-components/_zeebe-card-data.js
• docs/components/zeebe/react-components/_zeebe-card.js
• docs/components/zeebe/react-components/_zeebe-table.css
• docs/components/zeebe/technical-concepts/assets/icon-arrow.png
• docs/components/zeebe/technical-concepts/assets/icon-blackbox.png
• docs/components/zeebe/technical-concepts/assets/icon-end-to-end.png
• docs/components/zeebe/technical-concepts/assets/icon-partition.png
• docs/components/zeebe/technical-concepts/assets/icon-protocol.png
• docs/components/zeebe/technical-concepts/assets/icon-workflow-engine.png
• docs/components/zeebe/zeebe-overview.md

You may have done this intentionally, but we wanted to point it out in case you didn't. You can read more about the versioning within our docs in our documentation guidelines.

[christinaausley]

@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?

[github-actions]

The preview environment relating to the commit f817206 has successfully been deployed. You can access it at https://preview.docs.camunda.cloud/pr-5148/index.html

[mesellings]

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! 👏

[christinaausley]

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 😄