docs: quickstart, guides overview (#2524)

* fix: components, styles

* col component

* list components, change contents

* fix link

docs/src/components/card.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import styles from '../css/card.module.css';
+
+export function Card({ link, githubLink, imageSource, title, description, label}) {
+  if (githubLink) {
+    return (
+      <a className={styles.card} href={githubLink} target="_blank">
+        <h3 className={styles.card.title}>{title}</h3>
+        {description && <p className={styles.card.description}>{description}</p>}
+        <span className={styles.fillspace}></span>
+        <div className={styles.bottom}>
+          <img className={styles.bottomicon} src="/img/tech/github.svg" alt="github"/>
+          <span className={styles.bottomspan}>{label}</span>
+        </div>
+      </a>
+    )
+  } else if (link){
+    return (
+      <a className={styles.card} href={link}>
+        {imageSource && <img src={imageSource} className={styles.cardimg} alt={`image ${title}`}/>}
+        <h3 className={styles.card.title}>{title}</h3>
+        <p className={styles.card.description}>{description}</p>
+      </a>
+    )
+  };
+}
+
+export function CardWrapper({children}) {
+  return (
+    <div className={styles.cardWrapper}>
+      {children}
+    </div>
+  )
+}

docs/src/components/column.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import styles from '../css/column.module.css';
+
+export default function Column({children}) {
+    return (
+      <div className={styles.column}>
+        {children}
+      </div>
+    )
+}

docs/src/components/list.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import styles from '../css/list.module.css';
+
+export const ICONTYPE = {
+  START: <div className="rounded rounded-start">
+    <i className={`las la-play-circle`}></i>
+  </div>,
+  LOGIN: <div className="rounded rounded-login">
+    <i className={`las la-sign-in-alt`}></i>
+  </div>,
+  PRIVATELABELING: <div className="rounded rounded-privatelabel">
+    <i className={`las la-swatchbook`}></i>
+  </div>,
+  TEXTS: <div className="rounded rounded-texts">
+    <i className={`las la-paragraph`}></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>
+};
+
+export function ListElement({ link, iconClasses, type, title, description}) {
+  return (
+    <a className={styles.listelement} href={link}>
+      {type ? type : 
+        iconClasses && <div><i className={`${styles.icon} ${iconClasses}`}></i></div>
+      }
+      <div>
+        <h3>{title}</h3>
+        <p className={styles.listelement.description}>{description}</p>
+      </div>
+    </a>
+  )
+}
+
+export function ListWrapper({children, title}) {
+  return (
+    <div className={styles.listWrapper}>
+      <span className={styles.listWrapperTitle}>{title}</span>
+      {children}
+    </div>
+  )
+}

docs/src/css/card.module.css

@@ -0,0 +1,71 @@
+.card {
+  border-radius: .5rem;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  background: var(--card-background);
+  padding: 1rem;
+  text-decoration: none;
+  transition: all .2 ease-in-out;
+}
+
+.card:hover {
+  text-decoration: none;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.card p {
+  font-size: 14px;
+  margin: 0;
+  color: var(--ifm-font-color-base);
+}
+
+.cardimg {
+  height: 100px;
+  background-size: cover;
+  object-fit: contain;
+  background-position: center;
+  padding: .5rem 0;
+  pointer-events: none;
+}
+
+.fillspace {
+  flex: 1;
+}
+
+.bottom {
+  display: flex;
+  align-items: center;
+}
+
+.bottomicon {
+  width: 24px;
+  margin-right: .5rem;
+  color: var(--ifm-font-color-base);
+}
+
+.bottomspan {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.cardWrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 1rem;
+}
+
+@media (min-width: 769px) {
+  .cardWrapper {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 1180px) {
+  .cardWrapper {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}

docs/src/css/column.module.css

@@ -0,0 +1,11 @@
+.column {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 1rem;
+}
+
+@media (min-width: 1180px) {
+  .column {
+    grid-template-columns: 1fr 1fr;
+  }
+}

docs/src/css/custom.css

@@ -13,6 +13,9 @@
   --ifm-footer-background-color: #f4f4f4;
   --ifm-menu-color-background-active: #f2f5ff;
   --ifm-menu-color-active: #5469d4;
+  --ifm-menu-color-background-hover: #f7fafc;
+  --ifm-font-color-base: #6b7280;
+  --ifm-link-color: #5469d4;
   --ifm-menu-color: #697386;
   --ifm-footer-link-color: #000000;
   --ifm-color-primary: #5469d4;
@@ -48,6 +51,21 @@
   --ifm-color-warning-dark: #ffc1c1;
   --ifm-color-warning-contrast-background: #ffc1c1;
   --ifm-color-warning-contrast-foreground: #620e0e;
+  --card-background: #fafafa;
+  --list-background: #f7fafc;
+  --ifm-spacing-horizontal: 1.5rem;
+}
+
+.padding-top--md {
+  padding-top: 3rem !important;
+}
+
+.menu {
+  padding: 3rem .5rem !important;
+}
+
+.menu__link--active {
+  font-weight: 600;
 }
 
 .react-toggle-track {
@@ -138,7 +156,10 @@ h2 {
   --ifm-footer-background-color: #121430;
   --ifm-menu-color-background-active: #ffffff10;
   --ifm-menu-color-active: #ffffff;
+  --ifm-menu-color-background-hover: #3c405850;
+  --ifm-font-color-base: #c1c9d2;
   --ifm-menu-color: #a3acb9;
+  --ifm-link-color: #ff2069;
   --docsearch-searchbox-background: #454a66;
   --docsearch-searchbox-focus-background: #454a66;
   --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);
@@ -175,6 +196,8 @@ h2 {
   --ifm-color-warning-dark: #4f566b;
   --ifm-color-warning-contrast-background: #4f566b;
   --ifm-color-warning-contrast-foreground: #ffc1c1;
+  --card-background: #454a66;
+  --list-background: #3c405850;
 }
 
 .menu li li a {
@@ -182,6 +205,48 @@ h2 {
   /* padding: 2px 14px; */
 }
 
+i {
+  font-size: 1.5rem;
+  color: var(--ifm-heading-color);
+}
+
+main .container img {
+  border-radius: .5rem;
+}
+
+.rounded {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: .5rem;
+  margin-right: 1rem;
+  border-radius: 50%;
+}
+
+.rounded i {
+  color: white;
+}
+
+.rounded-start {
+  background: linear-gradient(40deg, #059669 30%, #047857);
+}
+
+.rounded-login {
+  background: linear-gradient(40deg, #059669 30%, #047857);
+}
+
+.rounded-privatelabel {
+  background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
+}
+
+.rounded-texts {
+  background: linear-gradient(40deg, #dc2626 30%, #db2777);
+}
+
+.rounded-system, .rounded-apis {
+  background: linear-gradient(40deg, #1f2937, #111827);
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgb(72, 77, 91);
   display: block;

docs/src/css/list.module.css

@@ -0,0 +1,47 @@
+.listelement {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: .5rem 0;
+  text-decoration: none;
+  transition: all .2 ease-in-out;
+  margin: .5rem 0;
+}
+
+.listelement:hover {
+  text-decoration: none;
+}
+
+.listelement h3 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.listelement p {
+  font-size: 14px;
+  margin: 0;
+  color: var(--ifm-font-color-base);
+}
+
+.fillspace {
+  flex: 1;
+}
+
+.icon {
+  padding: .5rem 1rem .5rem .5rem;
+}
+
+.listWrapper {
+  display: flex;
+  flex-direction: column;
+  background: var(--list-background);
+  border-radius: .5rem;
+  padding: 1rem;
+}
+
+.listWrapperTitle {
+  color: var(--ifm-heading-color);
+  font-size: 16px;
+  margin-bottom: .5rem;
+  display: block;
+}

docs/src/pages/index.js

@@ -1,18 +1,19 @@
-import React from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import styles from './styles.module.css';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
 import ThemedImage from '@theme/ThemedImage';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './styles.module.css';
 
 const features = [
   {
     title: 'Guides',
     darkImageUrl: 'img/index/Guides-dark.svg',
     lightImageUrl: 'img/index/Guides-light.svg',
-    link: 'docs/guides/introduction',
+    link: 'docs/guides/overview',
     description: (
       <>
         Read our guides on how to manage your data and role associations in ZITADEL and on what we recommend.