docs: homepage, concepts cleanup

docs/docs/apis/introduction.mdx

@@ -2,8 +2,8 @@
 title: Overview
 ---
 
-import {ApiCard} from '../../src/components/apicard';
-import Column from '../../src/components/column';
+import { ApiCard } from "../../src/components/apicard";
+import Column from "../../src/components/column";
 
 ## APIs
 
@@ -29,19 +29,22 @@ The easiest way to have a look at them is, to import them in the [Swagger Editor
 <div>
 
 ## Authentication
+
 The authentication API (aka Auth API) is used for all operations on the currently logged in user. The user id is taken from the sub claim in the token.
 
 </div>
 <div class="apicard-right">
 
 ### GRPC
+
 Endpoint:
 [https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService)
 
 Definition:
 [Auth Proto](/docs/apis/proto/auth)
 
 ### REST
+
 Endpoint:
 [https://api.zitadel.ch/auth/v1/](https://api.zitadel.ch/auth/v1/)
 
@@ -51,7 +54,6 @@ Swagger Editor:
 Definition:
 [Swagger Definition](https://api.zitadel.ch/openapi/v2/swagger/auth.swagger.json)
 
-
 </div>
 </Column>
 </ApiCard>
@@ -70,13 +72,15 @@ To identify the current organization you can send a header `x-zitadel-orgid` or
 <div class="apicard-right">
 
 ### GRPC
+
 Endpoint:
 [https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService)
 
 Definition:
 [Management Proto](/docs/apis/proto/management)
 
 ### REST
+
 Endpoint:
 [https://api.zitadel.ch/management/v1/](https://api.zitadel.ch/management/v1/)
 
@@ -102,13 +106,15 @@ This API is intended to configure and manage the IAM itself.
 <div class="apicard-right">
 
 ### GRPC
+
 Endpoint:
 [https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService)
 
 Definition:
 [Admin Proto](/docs/apis/proto/auth)
 
 ### REST
+
 Endpoint:
 [https://api.zitadel.ch/admin/v1/](https://api.zitadel.ch/admin/v1/)
 
@@ -134,18 +140,18 @@ The Assets API allows you to up- and download all kinds of assets. This can be f
 <div>
 
 ### REST
+
 Endpoint:
 [https://api.zitadel.ch/assets/v1/](https://api.zitadel.ch/assets/v1/)
 
 Definition:
-[/docs/apis/assets/assets](/docs/apis/assets/assets)
-
+[Assets](./assets/assets.md)
 
 </div>
 </Column>
 </ApiCard>
 
-## Example 
+## Example
 
 See below for an example with the call **GetMyUser**.
 
@@ -167,15 +173,15 @@ As you can see the `GetMyUser` function is also available as a REST service unde
 In the table below you can see the URI of those calls.
 
 | Service | URI                                                                                                                                            |
-|:--------|:-----------------------------------------------------------------------------------------------------------------------------------------------|
+| :------ | :--------------------------------------------------------------------------------------------------------------------------------------------- |
 | REST    | [https://api.zitadel.ch/auth/v1/users/me](https://api.zitadel.ch/auth/v1/users/me)                                                             |
 | GRPC    | [https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/GetMyUser](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/GetMyUser) |
 
 ## Domains
 
-| Domain Name | Example               | Description                                                                                                                          |
-| :---------- | :-------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| issuer      | `issuer.zitadel.ch`   | Provides the [OpenID Connect 1.0 Discovery Endpoint](openidoauth/endpoints#openid-connect-10-discovery)                                                  |
-| api         | `api.zitadel.ch`      | All ZITADEL API's are located under this domain.                                        |
-| login       | `accounts.zitadel.ch` | The accounts.* page provides server renderer pages like login and register and as well the authorization_endpoint for OpenID Connect |
-| console     | `console.zitadel.ch`  | With the console.* domain we serve the assets for the management gui                                                                 |
+| Domain Name | Example               | Description                                                                                                                           |
+| :---------- | :-------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| issuer      | `issuer.zitadel.ch`   | Provides the [OpenID Connect 1.0 Discovery Endpoint](openidoauth/endpoints#openid-connect-10-discovery)                               |
+| api         | `api.zitadel.ch`      | All ZITADEL API's are located under this domain.                                                                                      |
+| login       | `accounts.zitadel.ch` | The accounts.\* page provides server renderer pages like login and register and as well the authorization_endpoint for OpenID Connect |
+| console     | `console.zitadel.ch`  | With the console.\* domain we serve the assets for the management gui                                                                 |

docs/docs/concepts/general/eventstore.md → docs/docs/concepts/eventstore.md

@@ -2,7 +2,7 @@
 title: Eventstore
 ---
 
-ZITADEL is built on the [event sourcing pattern](../zitadel/architecture.md), where changes are stored as events in an eventstore.
+ZITADEL is built on the [event sourcing pattern](./architecture), where changes are stored as events in an eventstore.
 
 ## What is an eventstore?
 

docs/docs/concepts/introduction.mdx

@@ -0,0 +1,39 @@
+---
+title: Introduction
+---
+
+import {ListElement, ListWrapper, ICONTYPE} from '../../src/components/list';
+import Column from '../../src/components/column';
+
+This part of the **ZITADEL** documentation contains ZITADEL specific or general concepts required to understand the system or our guides.
+
+Please be reminded that ZITADEL is open source — and so is the documentation. Should you happen to stumble over an incorrectness, a spelling mistake, a hard-to-understand text passage, please don’t hesitate to leave a comment or propose a corresponding change.
+
+
+<Column>
+  <ListWrapper title="General">
+    <ListElement link="./principles" type={ICONTYPE.TASKS} title="Principles" description="Design and engineering principles" />
+    <ListElement link="./eventstore" type={ICONTYPE.STORAGE} title="Eventstore" description="Learn how ZITADEL stores data" />
+    <ListElement link="./architecture" type={ICONTYPE.ARCHITECTURE} title="Architecture" description="Sotware-, Cluster- and Multi Cluster Architecture" />
+  </ListWrapper>
+  <ListWrapper title="Structure">
+    <Column>
+      <div>
+      <ListElement link="./structure/overview" type={ICONTYPE.FOLDER} title="Overview" description="" />
+      <ListElement link="./structure/organizations" type={ICONTYPE.FILE} title="Organizations" description="" />
+      <ListElement link="./structure/policies" type={ICONTYPE.FILE} title="Policies" description="" />
+      <ListElement link="./structure/projects" type={ICONTYPE.FILE} title="Projects" description="" />
+    </div>
+    <div>
+      <ListElement link="./structure/applications" type={ICONTYPE.FILE} title="Applications" description="" />
+      <ListElement link="./structure/granted_projects" type={ICONTYPE.FILE} title="Granted Projects" description="" />
+      <ListElement link="./structure/users" type={ICONTYPE.FILE} title="Users" description="" />
+      <ListElement link="./structure/managers" type={ICONTYPE.FILE} title="Managers" description="" />
+    </div>
+    </Column>
+  </ListWrapper>
+
+  <ListWrapper title="Use Cases">
+    <ListElement link="./usecases/saas" type={ICONTYPE.START} title="SaaS" description="Product with Authentication and Authorization" />
+  </ListWrapper>
+</Column>

docs/docs/concepts/zitadel/objects/applications.md → docs/docs/concepts/structure/applications.md

@@ -18,4 +18,5 @@ As a fourth option there's the API (OAuth Resource Server), which generally has
 
 Depending on the app type registered, there are small differences in the possible settings.
 
-Please read the following guide about the [different-client-profiles](../../../guides/authorization/oauth-recommended-flows#different-client-profiles).
+Please read the following guide about the
+[different-client-profiles](../../guides/authorization/oauth-recommended-flows#different-client-profiles).

docs/docs/concepts/zitadel/objects/overview.md → docs/docs/concepts/structure/overview.md

@@ -1,5 +1,5 @@
 ---
-title: Structure
+title: Overview
 ---
 
 This overview shows the general structure of ZITADEL.

docs/docs/concepts/zitadel/objects/policies.md → docs/docs/concepts/structure/policies.md

@@ -55,7 +55,7 @@ You can configure all kinds of external identity providers for identity brokerin
 Create a new identity provider configuration and enable it in the list afterwards.
 
 For a detailed guide about how to configure a new identity provider for identity brokering have a look at our guide:
-[Identity Brokering](../../../guides/authentication/identity-brokering)
+[Identity Brokering](../../guides/authentication/identity-brokering)
 
 ## Lockout Policy
 

docs/docs/concepts/zitadel/objects/projects.md → docs/docs/concepts/structure/projects.md

@@ -11,7 +11,7 @@ import ProjectDescription from './_project_description.mdx';
 ## Project Settings
 
 On default the login screen will be shown in the private labeling settings of the system (e.g zitadel.ch).
-With the [primary domain scope](../../../apis/openidoauth/scopes#reserves-scopes) it is possible to trigger the setting of the given organization. 
+With the [primary domain scope](../../apis/openidoauth/scopes#reserves-scopes) it is possible to trigger the setting of the given organization. 
 But this will also restrict, the login to user of the given organization.  
 
 With the private labeling setting it is possible to choose which settings should trigger.

docs/docs/concepts/usecases/saas.md

@@ -1,5 +1,5 @@
 ---
-title: Saas Product with Authentication and Authorization
+title: SaaS Product with Authentication and Authorization
 ---
 
 This is an example architecture for a typical SaaS product. 

docs/docs/guides/api/access-zitadel-apis.md

@@ -37,7 +37,7 @@ ZITADEL Managers are Users who have permission to manage ZITADEL itself. There a
 - **Project Mangers**: In this level the user is able to manage a project.
 - **Project Grant Manager**: The project grant manager is for projects, which are granted of another organization.
 
-On each level we have some different Roles. Here you can find more about the different roles: [ZITADEL Manager Roles](../../concepts/zitadel/objects/managers.md)
+On each level we have some different Roles. Here you can find more about the different roles: [ZITADEL Manager Roles](../../concepts/structure/managers.md)
 
 
 ## Exercise: Add ORG_OWNER to Service User

docs/docs/guides/architecture-scenarios/b2b.mdx

@@ -0,0 +1,85 @@
+---
+title: B2B
+---
+
+import { B2B } from '../../../src/components/b2b';
+
+## Business to Business
+
+B2B describes the situation where an organization interacts with other organizations.
+This **multiple organization architecture** usually adds some form of complexity to an Identity and Access Management System.
+In ZITADEL a B2B organization represents a business partner or partner who typically has its own branding and has different access settings like an additional federated login for its users.
+
+B2b can be a simple scenario where an organization only shares one of its projects with another organization or have a more complex case where an organization is offering a portal application to all its partners with included (self)administration.
+
+<!-- This guide describes an application  -->
+## Sample scenario
+
+Octagon is a fictitious company which is used throughout this guide to explain the details and key concepts of such a B2B scenario.
+Octagon tries to solve multiple tasks in the banking field. Its portfolio includes several applications for their employees, customers, and partners. Some of which are web-based, some of which are used by machine users only.
+
+### Portal Application
+
+Octagon has a **Portal application** where its employees can access their account and list all applications they are allowed to use.
+Employees work for a department within Octagon or for Octagon itself. 
+Some of the users have enhanced features because they supervize certain teams. Those can onboard new employees and manage their roles and features.
+Target groups of the application can be split into:
+- **Employees:** users who are using the application as a starting point for their work.
+- **Supervisors:** users who are mainly using the application to manage users and their access of their department.
+- **Administrators:** this users are able to grant additional organizations or departments and elect supervisors.
+
+### Planning considerations
+
+In order to define the need of the **Portal Application** some planning considerations about organizations have to be made:
+
+- **Login and Access:** Does a user have a preset organization to login? Does the application show the default login page or does each organization use its own branding?
+- **Organizations:** Does a user have access in multiple organizations? Is a user required to use a different federated login for those organizations?
+- **Roles** Does the application need users to have specific roles assigned within their organizations? Which roles are needed to enable certain features of the application?
+
+### Login
+
+You can decide whether a organization is preselected for the login or if the user is redirected to the default login screen. You can send the user to a specific organization by defining the organization in a custom scope.
+Settings to the branding or the login options of the organization can be made from the organization section in [Console](https://console.zitadel.ch/org). 
+The behaviour of the login branding can be set in your projects detail page. You can choose the branding of the selected organization, the user resource owner, or the projects resource owner.
+
+### Organizations
+
+A user in general can be isolated to an organization, or be shared across multiple organizations. Anyways, a user should be able to use the same identity to switch between organizations.
+If this feature is not desired, a separate user for each organization should be created.
+
+Adding a user from a different organization to the audience of a project can be as easy as adding a new user authorization (user grant). A user grant combines a user from any organization with a project and 0-N roles.
+
+In our sample scenario, we assume to have the following users:
+
+- **Dimitri:** a team leader who is employed by Pentagon, an Octagon department. Dimitri uses his Microsoft Account in combination with his one time password to access the portal. Pentagon therefore has set up Microsoft as Identity Provider. Pentagon also requires its users to secure their accounts with additional factor.
+- **Michael:** a trainee of Pentagon only using the portal to access his workspace apps. Michael uses his Google Account in combination with his laptops fingerprint.
+- **Bill:** is employed at Octagon as Administrator of the Portal Application. Bill too uses a Microsoft Account in combination with a Security Key to secure his account.
+
+After having determined the constellation of the organizations and its users, all the necessary data (Portal project with roles and app, users, login requirements, identity providers, branding) should be set up in [Console](https://console.zitadel.ch/org).
+A B2B sample application for NextJS can be found in our [Example Repo](https://github.com/caos/zitadel-examples).
+
+To allow an other organization to use a project, a project grant has to be created. Upon creation, roles for a grant can be limited to a subset of the total project roles.
+
+In our scenario, Octagon creates a project grant for Pentagon. Pentagon is limited to use `writer` and `reader` role. The `admin` role is reserved for the Octagon organization itself.
+
+<B2B></B2B>
+
+### Roles
+
+In this scenario, Dimitri and Michael share the same organization Pentagon, where as Bill belongs to Octagon. Octagon is owner of the Portal project with its Web App, having Bill configured as user grant with `admin` role. Dimitri owns the `writer` role, whereas Michael only is `reader`.
+
+> Note: Roles are meant for internal business logic and therefore need to be validated separately, none of the users described are allowed to create user grants, at least if they do not own a ZITADEL manager role.
+
+If you made a dashboard where some users are able to create user grants, the Management API to do such operations should be triggered with the personal access token of the users, not with a token of a machine user, to create a meaningful audit log. 
+If you had such a use case, ZITADEL manager roles must be assigned to those users.
+
+### Noteworthy
+
+Due to the fact that ZITADEL includes unlimited users, projects, and applications and comes with all security features in the FREE tier, ZITADEL can be considered a great alternative to other SaaS IAM systems such as Auth0 or Okta.
+In such a case with this high potential of scalability where user counts can grow explosively, ZITADEL does not become the bottleneck and therefore is the valid choice. You can learn more on ZITADELs benefits and the pricing [here](https://zitadel.ch/pricing).
+
+### Learn more
+
+- [Creating an organization](../basics/organizations#exercise---create-a-new-organization)
+- [Organization Branding](../customization/branding)
+- [Authorization](../authorization/oauth-recommended-flows)