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