From 153c9054ad5de254d2d768f4e76024487489da0a Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Thu, 21 Oct 2021 17:02:25 +0200
Subject: [PATCH] docs: overview in help, legal section (#2532)

* help, legal section

* Update docs/docs/legal/introduction.mdx

Co-authored-by: Florian Forster <florian@caos.ch>

Co-authored-by: Florian Forster <florian@caos.ch>
---
 docs/docs/legal/introduction.md    |  6 -----
 docs/docs/legal/introduction.mdx   | 27 ++++++++++++++++++++
 docs/docs/manuals/introduction.md  |  5 ----
 docs/docs/manuals/introduction.mdx | 25 ++++++++++++++++++
 docs/src/components/list.jsx       | 41 +++++++++++++++++++++++++++---
 docs/src/css/custom.css            | 25 +++++++++++++++---
 6 files changed, 111 insertions(+), 18 deletions(-)
 delete mode 100644 docs/docs/legal/introduction.md
 create mode 100644 docs/docs/legal/introduction.mdx
 delete mode 100644 docs/docs/manuals/introduction.md
 create mode 100644 docs/docs/manuals/introduction.mdx

diff --git a/docs/docs/legal/introduction.md b/docs/docs/legal/introduction.md
deleted file mode 100644
index f503cd4af1..0000000000
--- a/docs/docs/legal/introduction.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Overview
---- 
-This section contains important agreements, policies and appendices relevant for users of our websites and services.
-
-All documents will be provided in English language.
diff --git a/docs/docs/legal/introduction.mdx b/docs/docs/legal/introduction.mdx
new file mode 100644
index 0000000000..3af448d1b1
--- /dev/null
+++ b/docs/docs/legal/introduction.mdx
@@ -0,0 +1,27 @@
+---
+title: Overview
+--- 
+
+import {ListElement, ListWrapper, ICONTYPE} from '../../src/components/list';
+import Column from '../../src/components/column';
+
+This section contains important agreements, policies and appendices relevant for users of our websites and services.
+
+All documents will be provided in English language.
+<Column>
+  <ListWrapper title="Main documents">
+    <ListElement link="/docs/legal/terms-of-service" type={ICONTYPE.POLICY} title="Terms of Service" description="" />
+    <ListElement link="/docs/legal/data-processing-agreement" type={ICONTYPE.POLICY} title="Data Processing Agreement" description="" />
+    <ListElement link="/docs/legal/privacy-policy" type={ICONTYPE.POLICY} title="Privacy Policy" description="" />
+  </ListWrapper>
+  <ListWrapper title="Service">
+    <ListElement link="/docs/legal/service-level-description" type={ICONTYPE.SERVICE} title="Service Level" description="Service levels offered by ZITADEL Cloud" />
+    <ListElement link="/docs/legal/terms-of-service-dedicated" type={ICONTYPE.SERVICE} title="Dedicated Instances" description="Terms and Conditions of dedicated Instances" />
+  </ListWrapper>
+  <ListWrapper title="Annexes">
+    <ListElement link="/docs/legal/support-services" type={ICONTYPE.POLICY} title="Support Services" description="Support services offered by ZITADEL and CAOS Ltd." />
+    <ListElement link="/docs/legal/dedicated-instance-annex" type={ICONTYPE.POLICY} title="Dedicated Instance Annex" description="Services and Guarantees for dedicated instances" />
+    <ListElement link="/docs/legal/acceptable-use-policy" type={ICONTYPE.POLICY} title="Acceptable Use Policy" description="Obligations while using ZITADEL Services" />
+    <ListElement link="/docs/legal/rate-limit-policy" type={ICONTYPE.POLICY} title="Rate Limit Policy" description="How ZITADEL will use rate limiting" />
+  </ListWrapper>
+</Column> 
diff --git a/docs/docs/manuals/introduction.md b/docs/docs/manuals/introduction.md
deleted file mode 100644
index 3198759d9a..0000000000
--- a/docs/docs/manuals/introduction.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Introduction
----
-
-In this section we provide manuals for different user profiles.
\ No newline at end of file
diff --git a/docs/docs/manuals/introduction.mdx b/docs/docs/manuals/introduction.mdx
new file mode 100644
index 0000000000..9a17420ba9
--- /dev/null
+++ b/docs/docs/manuals/introduction.mdx
@@ -0,0 +1,25 @@
+---
+title: Overview
+---
+
+import {ListElement, ListWrapper, ICONTYPE} from '../../src/components/list';
+import Column from '../../src/components/column';
+
+In this section we provide manuals for different user profiles.
+
+<ListWrapper title="User">
+  <Column>
+    <div>
+      <ListElement link="/docs/manuals/user-register" type={ICONTYPE.HELP_REGISTER} title="Register" description="User and Org registration" />
+      <ListElement link="/docs/manuals/user-login" type={ICONTYPE.HELP_LOGIN} title="Login" description="Login methods, use of multifactors, passwordless" />
+      <ListElement link="/docs/manuals/user-passwordless" type={ICONTYPE.HELP_PASSWORDLESS} title="Passwordless" description="Authenticate with your fingerprint or security key." />
+      <ListElement link="/docs/manuals/user-password" type={ICONTYPE.HELP_PASSWORD} title="Password" description="Change your ZITADEL password" />
+    </div>
+    <div>
+      <ListElement link="/docs/manuals/user-factors" type={ICONTYPE.HELP_FACTORS} title="Factors" description="Enable multifactor authentication for more security" />
+      <ListElement link="/docs/manuals/user-email" type={ICONTYPE.HELP_EMAIL} title="Email" description="How to change your email" />
+      <ListElement link="/docs/manuals/user-phone" type={ICONTYPE.HELP_PHONE} title="Phone" description="How to change your phonenumber" />
+      <ListElement link="/docs/manuals/user-social-login" type={ICONTYPE.HELP_SOCIAL} title="Social Login" description="Link an external Identity Provider with your account" />   
+    </div>
+  </Column> 
+</ListWrapper>
diff --git a/docs/src/components/list.jsx b/docs/src/components/list.jsx
index 1b268cd13b..ebd98d22b4 100644
--- a/docs/src/components/list.jsx
+++ b/docs/src/components/list.jsx
@@ -15,12 +15,47 @@ export const ICONTYPE = {
   TEXTS: <div className="rounded rounded-texts">
     <i className={`las la-paragraph`}></i>
   </div>,
+  POLICY: <div className="rounded rounded-policy">
+  <i className={`las la-file-contract`}></i>
+  </div>,
+  SERVICE: <div className="rounded rounded-service">
+  <i className={`las la-concierge-bell`}></i>
+  </div>,
   SYSTEM: <div className="rounded rounded-system">
     <i className={`las la-server`}></i>
   </div>,
   APIS: <div className="rounded rounded-apis">
-  <i className={`las la-code`}></i>
-</div>
+    <i className={`las la-code`}></i>
+  </div>,
+  HELP: <div className="rounded rounded-help">
+    <i className={`las la-question`}></i>
+  </div>,
+  HELP_REGISTER: <div className="rounded rounded-login">
+  <i className={`las la-plus-circle`}></i>
+  </div>,
+  HELP_LOGIN: <div className="rounded rounded-login">
+  <i className={`las la-sign-in-alt`}></i>
+  </div>,
+  HELP_PASSWORDLESS: <div className="rounded rounded-login">
+  <i className={`las la-fingerprint`}></i>
+  </div>,
+  HELP_PASSWORD: <div className="rounded rounded-password">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
+      <path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20M8.5,12A1.5,1.5 0 0,0 7,10.5A1.5,1.5 0 0,0 5.5,12A1.5,1.5 0 0,0 7,13.5A1.5,1.5 0 0,0 8.5,12M13,10.89C12.39,10.33 11.44,10.38 10.88,11C10.32,11.6 10.37,12.55 11,13.11C11.55,13.63 12.43,13.63 13,13.11V10.89Z"></path>
+    </svg>
+  </div>,
+  HELP_FACTORS: <div className="rounded rounded-login">
+  <i className={`las la-fingerprint`}></i>
+  </div>,
+  HELP_PHONE: <div className="rounded rounded-phone">
+  <i className={`las la-phone`}></i>
+  </div>,
+  HELP_EMAIL: <div className="rounded rounded-email">
+  <i className={`las la-at`}></i>
+  </div>,
+  HELP_SOCIAL: <div className="rounded rounded-login">
+  <i className={`las la-share-alt`}></i>
+  </div>,
 };
 
 export function ListElement({ link, iconClasses, type, title, description}) {
@@ -37,7 +72,7 @@ export function ListElement({ link, iconClasses, type, title, description}) {
   )
 }
 
-export function ListWrapper({children, title}) {
+export function ListWrapper({children, title, columns}) {
   return (
     <div className={styles.listWrapper}>
       <span className={styles.listWrapperTitle}>{title}</span>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index dee4895a06..f9313a93a1 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -223,6 +223,12 @@ main .container img {
   border-radius: 50%;
 }
 
+.rounded svg {
+  fill: white;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
 .rounded i {
   color: white;
 }
@@ -231,19 +237,30 @@ main .container img {
   background: linear-gradient(40deg, #059669 30%, #047857);
 }
 
-.rounded-login {
+.rounded-password {
+  background: linear-gradient(40deg, #f59e0b 30%, #b45309);
+}
+
+.rounded-login,
+.rounded-register {
   background: linear-gradient(40deg, #059669 30%, #047857);
 }
 
-.rounded-privatelabel {
+.rounded-privatelabel,
+.rounded-phone,
+.rounded-email,
+.rounded-service {
   background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
 }
 
-.rounded-texts {
+.rounded-texts,
+.rounded-help {
   background: linear-gradient(40deg, #dc2626 30%, #db2777);
 }
 
-.rounded-system, .rounded-apis {
+.rounded-system, 
+.rounded-apis,
+.rounded-policy {
   background: linear-gradient(40deg, #1f2937, #111827);
 }