docs: welcome gigi (#4159)

* docs: welcome gigi

* light theme

* foreground

* banner on readme

Co-authored-by: mffap <mpa@zitadel.com>
Co-authored-by: Fabi <38692350+hifabienne@users.noreply.github.com>

docs/src/css/custom.css

@@ -72,14 +72,14 @@
 :root {
   --ifm-navbar-background-color: #ffffff;
   --ifm-footer-background-color: #f4f4f4;
-  --ifm-menu-color-background-active: #7E21CE10;
-  --ifm-menu-color-active: #7E21CE;
+  --ifm-menu-color-background-active: #7e21ce10;
+  --ifm-menu-color-active: #7e21ce;
   --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: #7E21CE;
+  --ifm-color-primary: #7e21ce;
   --ifm-color-primary-dark: #4d61cf;
   --ifm-color-primary-darker: #4356c9;
   --ifm-color-primary-darkest: #3a4cc3; /* 293bb9 */
@@ -118,10 +118,12 @@
   --apiauthbackground: linear-gradient(40deg, #a9d9ca 30%, #b4d5cb);
   --apimgmtbackground: linear-gradient(40deg, #c6d7f3 30%, #c7c6e3);
   --apiadminbackground: linear-gradient(40deg, #c192c790, #c192c790);
-  --apisystembackground: linear-gradient(40deg, #C7A6928E, #C7A6928E);
+  --apisystembackground: linear-gradient(40deg, #c7a6928e, #c7a6928e);
   --apiassetbackground: linear-gradient(40deg, #e4eaf1, #eef2f9);
   --overlaycolor: #6c90b420;
   --ifm-hero-text-color: #ffffff;
+  --gigibannerbackground: white;
+  --gigibannerforeground: black;
 }
 
 .get-started {
@@ -238,8 +240,8 @@ h2 {
   --ifm-menu-color-background-active: #ffffff10;
   --ifm-menu-color-active: #ffffff;
   --ifm-menu-color-background-hover: #3c405850;
-  --ifm-font-color-base: #DDDDDD;
-  --ifm-menu-color: #DDDDDD;
+  --ifm-font-color-base: #dddddd;
+  --ifm-menu-color: #dddddd;
   --ifm-link-color: #ff2069;
   --docsearch-searchbox-background: #454a66;
   --docsearch-searchbox-focus-background: #454a66;
@@ -260,7 +262,7 @@ h2 {
   --ifm-hero-background-color: #0f1022;
   --ifm-hero-text-color: #ffffff;
   --get-started-bg: var(--ifm-font-color-base);
-  --get-started: #FF1F69;
+  --get-started: #ff1f69;
   --ifm-footer-color: #ffffff50;
   --ifm-heading-color: #ffffff;
   --ifm-font-color-base: #c1c9d2;
@@ -282,9 +284,11 @@ h2 {
   --apiauthbackground: linear-gradient(40deg, #506e6e90 30%, #506e6e90);
   --apimgmtbackground: linear-gradient(40deg, #595d8090 30%, #595d8090);
   --apiadminbackground: linear-gradient(40deg, #6a506e90, #6a506e90);
-  --apisystembackground: linear-gradient(40deg, #6E695090, #6E695090);
+  --apisystembackground: linear-gradient(40deg, #6e695090, #6e695090);
   --apiassetbackground: linear-gradient(40deg, #3c4257, #3c4257);
   --overlaycolor: #ffffff15;
+  --gigibannerbackground: #7e21ce;
+  --gigibannerforeground: white;
 }
 
 .get-started:hover {

docs/src/pages/index.js

@@ -1,14 +1,19 @@
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import ThemedImage from '@theme/ThemedImage';
-import clsx from 'clsx';
-import React from 'react';
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import ThemedImage from "@theme/ThemedImage";
+import clsx from "clsx";
+import React from "react";
 
-import Column from '../components/column';
-import { HomeListWrapper, ICONTYPE, ListElement, ListWrapper } from '../components/list';
-import styles from './styles.module.css';
+import Column from "../components/column";
+import {
+  HomeListWrapper,
+  ICONTYPE,
+  ListElement,
+  ListWrapper,
+} from "../components/list";
+import styles from "./styles.module.css";
 
 const features = [
   {
@@ -248,6 +253,17 @@ function Feature({
   );
 }
 
+const Gigi = () => {
+  return (
+    <div className={styles.gigiwrapper}>
+      <div className={styles.gigiwrapperrelative}>
+        <img height="151px" width="256px" src="/img/gigi.svg" />
+        <div className={styles.gigibanner}>ZITADEL Cloud OUT NOW! 🚀</div>
+      </div>
+    </div>
+  );
+};
+
 export default function Home() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
@@ -272,6 +288,7 @@ export default function Home() {
             </Link>
           </div>
         </div>
+        <Gigi />
       </header>
       <main>
         {features && features.length > 0 && (

docs/src/pages/styles.module.css

@@ -12,6 +12,46 @@
   overflow: hidden;
 }
 
+.gigiwrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.gigiwrapperrelative {
+  position: relative;
+  overflow: hidden;
+  height: 256px;
+  width: 256px;
+}
+
+.gigiwrapperrelative img {
+  top: 50px;
+  position: absolute;
+  right: 0;
+}
+
+.gigibanner {
+  position: absolute;
+  top: 201px;
+  right: -50px;
+  padding: 1rem 0;
+  background-color: var(--gigibannerbackground);
+  color: var(--gigibannerforeground);
+  transform: rotate(45deg);
+  transform-origin: top right;
+  width: 350px;
+  text-align: center;
+  font-weight: 700;
+}
+
+@media screen and (max-width: 800px) {
+  .gigiwrapper {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 966px) {
   .heroBanner {
     padding: 2rem;
@@ -81,7 +121,6 @@
   background-position: center;
 }
 
-
 @media screen and (max-width: 600px) {
   .quickstartcontainer {
     flex-direction: column;
@@ -100,4 +139,4 @@
 
 .apilinks h2 {
   font-size: 1rem;
-}
+}