feat: Documentation and API reference (#348)

Co-authored-by: Vadim Smirnov <smirnou.vadzim@gmail.com>
Co-authored-by: zakariasaad <zakaria.elas@gmail.com>
Co-authored-by: Vilfred Sikker <vilfredsikker@gmail.com>
Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>
Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

www/docs/src/components/Banner/Banner.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from "react"
+import CloseIcon from "../close-icon"
+import styles from "./banner.module.css"
+import clsx from "clsx"
+import useThemeContext from "@theme/hooks/useThemeContext"
+import ConfLogo from "../../../static/img/logo.svg"
+
+const Banner = (props) => {
+  const [isBannerVisible, setIsBannerVisible] = useState(true)
+  const { isDarkTheme } = useThemeContext()
+
+  const handleDismissBanner = () => {
+    setIsBannerVisible(false)
+    if (localStorage) {
+      localStorage.setItem("mc::banner", false)
+    }
+  }
+
+  useEffect(() => {
+    if (localStorage) {
+      const shouldShow = localStorage.getItem("mc::banner")
+      if (!shouldShow) {
+        setIsBannerVisible(true)
+      }
+
+      if (shouldShow === "false") {
+        setIsBannerVisible(false)
+      }
+    }
+  }, [])
+
+  return (
+    isBannerVisible && (
+      <div className={clsx(styles.bannerContainer, "margin-top--lg")}>
+        <div
+          className={clsx(styles.banner, "padding--sm", "padding-right--md")}
+        >
+          <div className="padding" sx={{ marginLeft: "10px" }}>
+            <ConfLogo />
+            <p className="padding-left--md">
+              We are still working on building out our documentation and guides,
+              but if you are interested in learning more please reach out - we
+              would love to jump on a call with you and help you get set up!
+            </p>
+          </div>
+          {/* <div style={{ cursor: "pointer" }} onClick={handleDismissBanner}>
+            <CloseIcon fill={isDarkTheme ? "white" : "black"} />
+          </div> */}
+        </div>
+      </div>
+    )
+  )
+}
+
+export default Banner