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

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

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> 

docs/docs/manuals/introduction.md

@@ -1,5 +0,0 @@
----
-title: Introduction
----
-
-In this section we provide manuals for different user profiles.

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>

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>
+  </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>

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);
 }