Add user invite doc

docs/how-to-guides/adding-users-to-netbird.md

@@ -0,0 +1,47 @@
+---
+sidebar_position: 2
+---
+# Adding Users to your NetBird network
+
+Whether you have a network for personal use or manage your company's corporate network, you'd probably want to invite 
+people to your account and join your NetBird network.
+
+There are two ways of adding users to a NetBird account - indirect and direct.
+
+### Indirect user invites
+This way of adding users is managed by the NetBird system and doesn't require administrator input. 
+It works only for organizations with private domains.
+
+Whenever a new user signs up with a private domain (e.g., @netbird.io), 
+NetBird creates a new account and associates it with the netbird.io organization (domain). Every consequent user signup with the same @netbird.io domain in their email address will end up under the same organization.
+
+How does it work? Every time a previously unknown user registers at [app.netbird.io](https://app.netbird.io/), 
+the system classifies the domain part of the email. 
+The domain can fall into one of the following categories - `public`, `private`, or `unclassified`. 
+The domains of the private category are the ones that are automatically grouped under the same account. 
+Public domains are the ones of the public email providers like Gmail. 
+
+:::info
+It might happen (unlikely) that the domain classification system didn't classify your company's domain as private. 
+Our system was unsure about your domain and assigned an unclassified or public category to be on the safe side. 
+Just email us at [hello@netbird.io](mailto:hello@netbird.io) or ping us on [Slack](https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A) to fix this.
+:::
+
+### Direct user invites
+As the name stands, this way of inviting users is straightforward and works through the web UI.
+To invite a new user, proceed to the `Users` tab and click the <button name="button" className="button-6">Invite User</button> button. 
+A user window will pop up where you can specify the name and email address of the invited user. Optionally, you could select a set of groups with which you want this user to be associated.
+
+<p align="center">
+    <img src="/docs/img/how-to-guides/user-invites.gif" alt="high-level-dia" width="800" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
+</p>
+
+### Get started
+<p float="center" >
+    <button name="button" className="button-5" onClick={() => window.open("https://netbird.io/pricing")}>Use NetBird</button>
+</p>
+
+- Make sure to [star us on GitHub](https://github.com/netbirdio/netbird)
+- Follow us [on Twitter](https://twitter.com/netbird)
+- Join our [Slack Channel](https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A)
+- NetBird [latest release](https://github.com/netbirdio/netbird/releases) on GitHub

src/css/custom.css

@@ -72,7 +72,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   justify-content: center;
   line-height: 1.25;
   margin: 0;
-  min-height: 3rem;
+  min-height: 2.5rem;
   padding: calc(.875rem - 1px) calc(1.5rem - 1px);
   position: relative;
   text-decoration: none;
@@ -99,3 +99,49 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
   transform: translateY(0);
 }
+
+.button-6 {
+  align-items: center;
+  background-clip: padding-box;
+  background-color: #1890ff;
+  border: 1px solid transparent;
+  border-radius: .25rem;
+  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  justify-content: center;
+  line-height: 1.25;
+  margin: 0;
+  /*min-height: 2rem;*/
+  height: 1rem;
+  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
+  position: relative;
+  text-decoration: none;
+  transition: all 250ms;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: baseline;
+  width: auto;
+}
+
+.button-6:hover,
+.button-6:focus {
+  background-color: #85a5ff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
+}
+
+.button-6:hover {
+  transform: translateY(-1px);
+}
+
+.button-6:active {
+  background-color: #85a5ff;
+  box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
+  transform: translateY(0);
+}