docs: join cloud button

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/noco-docs/docusaurus.config.js

@@ -132,6 +132,18 @@ const config = {
             type: "docsVersionDropdown",
             position: "right",
           },
+          {
+            href: "https://app.nocodb.com/#/signin?utm_source=docs&utm_medium=docs&utm_campaign=docs&utm_content=docs",
+            html: "Join NocoDB Cloud For FREE",
+            position: "right",
+            className: "header-join-link",
+          },
+          {
+            href: "https://app.nocodb.com/#/signin?utm_source=docs&utm_medium=docs&utm_campaign=docs&utm_content=docs",
+            html: "Join NocoDB Cloud",
+            position: "right",
+            className: "header-join-link-medium",
+          },
           {
             href: "https://github.com/nocodb/nocodb",
             position: "right",
@@ -148,6 +160,11 @@ const config = {
           width: 50,
         },
         links: [
+          {
+            label: "Join NocoDB Cloud For FREE",
+            href: "https://app.nocodb.com/#/signin?utm_source=docs&utm_medium=docs&utm_campaign=docs&utm_content=docs",
+            className: "footer-join-link",
+          },
           {
             label: "GitHub",
             href: "https://github.com/facebook/docusaurus",

packages/noco-docs/src/css/header.scss

@@ -13,6 +13,67 @@
   }
 }
 
+@media (max-width: 1100px) {
+  .header-join-link {
+    display: none;
+  }
+}
+
+@media (max-width: 996px) {
+  .header-join-link-medium {
+    display: none;
+  }
+}
+
+@media (min-width: 1100px) {
+  .header-join-link-medium {
+    display: none;
+  }
+}
+
+@media (min-width: 997px) {
+  .footer-join-link {
+    display: none;
+  }
+}
+
+.header-join-link, .header-join-link-medium {
+  height: 40px;
+  white-space: nowrap;
+  background-color: #36f;
+  border-radius: 12px;
+  align-items: center;
+  margin-left: 5px;
+  margin-right: 5px;
+  padding: 8px 24px;
+  font-size: .875rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+
+  color: white;
+
+  &:hover {
+    color: #eeeeee;
+  }
+}
+
+.footer-join-link {
+  white-space: nowrap;
+  background-color: #36f;
+  border-radius: 12px;
+  padding: 8px 24px;
+  font-size: .875rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  margin-bottom: 10px;
+
+  color: white;
+
+  &:hover {
+    color: #eeeeee;
+  }
+}
+
 .navbar__logo {
   height: 3rem;
 }