Add networks documentation (#264)

src/components/NavigationDocs.jsx

@@ -106,6 +106,16 @@ export const docsNavigation = [
 
              ]
          },
+         {
+              title: 'Networks (new)',
+              isOpen: false,
+              links: [
+                  { title: 'Concept', href: '/how-to/networks-concept' },
+                  { title: 'Routing traffic to multiple IP resources', href: '/how-to/routing-traffic-to-multiple-resources' },
+                  { title: 'Accessing restricted website domain resources', href: '/how-to/accessing-restricted-websites' },
+                  { title: 'Accessing entire domains within networks', href: '/how-to/accessing-entire-domains-within-networks' },
+              ]
+         },
          {
              title: 'Network Routes',
              isOpen: false,

src/pages/how-to/accessing-entire-domains-within-networks.mdx

@@ -0,0 +1,119 @@
+# Accessing entire domains within networks
+Companies often run entire development and internal environments using assigned domains that are not publicly accessible due to security reasons. Creating routing resources for these environments can quickly become a problem for
+DevOps and Platform teams because development teams may issue requests for new resources frequently. Taking that with the fact that some resources won't be within the same network, this can become a challenge to manage.
+
+NetBird can help you configure access to these resources by routing your traffic through a routing peer configured with [Networks](/how-to/networks-concept) using [Wildcard domain resources](/how-to/networks-concept#resources).
+
+## Example
+In the following scenario, we will create a new development network and add a wildcard domain resource for the entire `dev.example.com`
+to be routed using [Routing peers](/how-to/networks-concept#routing-peers) running in the network. All developers will be able to access the development environment using the `Network` configuration.
+
+### Pre-requisites
+
+#### Configure Nameservers
+In order for the the following steps to work, you need to configure Nameservers to resolve all domain queries in your NetBird account. See the [Manage DNS in your network](/how-to/manage-dns-in-your-network) guide for more information.
+
+#### Enable DNS wildcard routing
+When you configure wildcard domains as resources, you need to enable DNS wildcard routing. Which has an additional effect in comparison to the previous DNS routes behavior from Network routes; it switches the DNS resolution to the routing peer instead of the local client system.
+This is also useful for regular DNS routes when you want to resolve the domain names using the routing peer's IP infrastructure, which will allow for more restricted access control rules in newer versions of the clients(**1**) and for the traffic to go to a near routing peer service.
+<Note>
+ (1) Support for more restricted rules will be available in future releases.
+</Note>
+You can enable DNS resolution on the routing peer by accessing your account `Settings` > `Networks` > Enable DNS wildcard routing. See example below:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/settings-1.png" alt="settings-acl" className="imagewrapper-big"/>
+</p>
+
+<Note>
+    The `Enable DNS wildcard routing` is supported by routing peers and routing clients running version 0.35.0 or later.
+    Once the feature is enabled, you may need to restart your routing peers and clients to apply the changes.
+</Note>
+
+### Create a Network
+To create a Network, navigate to the `Networks` > `Networks` section in the NetBird dashboard:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/new-network.png" alt="new-net" className="imagewrapper-big"/>
+</p>
+
+Click on `Add Network` to follow a Wizard that will guide you through the steps to create a network and add resources to it.
+
+First, we fill out the network Name and Description as shown in the image below and click `Continue`:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/new-dev-network-1.png" alt="new-dev-net1" className="imagewrapper"/>
+</p>
+
+### Add a routing peer
+Next we are asked to add a routing peer to the network. Let's click on `Add routing peer` and select a node from that VPC:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-wild-routing-peer-1.png" alt="new-wild-routing-peer-1" className="imagewrapper"/>
+</p>
+Click on `Continue` and then accept the defaults to add a routing peer by clicking on `Add Routing Peer`:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-routing-peer-2.png" alt="new-routing-peer-2" className="imagewrapper"/>
+</p>
+
+### Add a resource
+Following the guide, we are asked to add a new resource.
+
+Click on `Add Resource` and enter the domain name of the `Development domain` in this case, `*.dev.example.com`:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-wild-domain-resource-1.png" alt="new-wild-resource-1" className="imagewrapper"/>
+</p>
+
+We can also assign a group to this resource; in this example, we will assign the group `development-domains` to it. This way, we can create a policy that allows the development team to access the domains in the environment.
+
+### Add an access control policy
+Next, in the guide, we will be asked to create an access control policy. Here, we will create a policy that allows access to the `development-domains` group of the `*.dev.example.com`
+resource to peers in the `Developers` group. They will be granted all traffic to domains in the development environment.
+
+Click on `Create Policy` and fill out the fields as shown in the image below:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-wild-domain-resource-acl-1.png" alt="new-resource-acl-1" className="imagewrapper-big"/>
+</p>
+
+Click on `Continue` 2 times and then click on `Add Policy` to save the policy:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-wild-domain-resource-acl-2.png" alt="new-resource-acl-2" className="imagewrapper-big"/>
+</p>
+
+### View the network
+After completing the wizard, you will be able to see the network you just created in the Networks list:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/view-wild-network-1.png" alt="view-wild-network-1" className="imagewrapper-big"/>
+</p>
+
+To access a detailed view of the network, click on the network name:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/view-wild-network-2.png" alt="view-wild-network-2" className="imagewrapper-big"/>
+</p>
+
+You can edit or add more resources or routing peers to the network by clicking on the `Edit` buttons of each section in the detailed view.
+
+### Add a regular domain resource
+A wildcard domain won't cover the entire domain by itself because the wildcard character `*` only covers subdomains after the `.`. If you need to cover the entire domain, you can additionally add a regular domain resource to the network.
+
+This time, let's add a domain from the main Networks list view. Click on the `Add Resource` button:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/view-wild-network-3.png" alt="view-wild-network-3" className="imagewrapper-big"/>
+</p>
+Then, enter the domain name of the `Regular domain` in this case, `dev.example.com`:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-wild-domain-resource-2.png" alt="new-wild-resource-2" className="imagewrapper"/>
+</p>
+
+We can also assign the same group to this resource, allowing us to reuse the previous access control policy for the `development-domains` group.
+
+With the steps above, we created resources that allow the development team to access the entire `dev.example.com` domain and the `*.dev.example.com` subdomains using the same policy.
+
+## 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-2utg2ncdz-W7LEB6toRBLE1Jca37dYpg)
+- NetBird [latest release](https://github.com/netbirdio/netbird/releases) on GitHub

src/pages/how-to/accessing-restricted-websites.mdx

@@ -0,0 +1,81 @@
+# Accessing restricted website domain resources
+It is very common to find scenarios where you need to access restricted websites or services. This can be due to company policies, geographical restrictions, or even to avoid tracking.
+Very often these resources are located behind a cloud load balancer, which changes IP addresses frequently, making it hard to whitelist them.
+NetBird can help you to access these resources by routing your traffic through a routing peer configured with [Networks](/how-to/networks-concept) using [Domain resources](/how-to/networks-concept#resources).
+
+## Example
+In the following scenario, we will configure access to an accounting website which should accessible only by users from finance team.
+The server is running in the company's AWS account in the EU Central region behind a load balancer, so we will create a new Network and add a `domain resource`
+to be routed using [Routing peers](/how-to/networks-concept#routing-peers) running in the AWS VPC.
+
+### Create a Network
+To create a Network, navigate to the `Networks` > `Networks` section in the NetBird dashboard:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/new-network.png" alt="new-net" className="imagewrapper-big"/>
+</p>
+
+Click on `Add Network` to follow a Wizard that will guide you through the steps to create a network and add resources to it.
+
+First, we fill out the network Name and Description as shown in the image below and click `Continue`:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/new-network-2.png" alt="new-net2" className="imagewrapper"/>
+</p>
+
+### Add a routing peer
+Next we are asked to add a routing peer to the network. Let's click on `Add routing peer` and select a node from that VPC:
+
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-routing-peer-1.png" alt="new-routing-peer-1" className="imagewrapper"/>
+</p>
+Click on `Continue` and then accept the defaults to add a routing peer by clicking on `Add Routing Peer`:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-routing-peer-2.png" alt="new-routing-peer-2" className="imagewrapper"/>
+</p>
+### Add a resource
+Following the guide, we are asked to add a new resource.
+
+Click on `Add Resource` and enter the domain name of the `accounting website` in this case, `accounting.example.com`:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-domain-resource-1.png" alt="new-resource-1" className="imagewrapper"/>
+</p>
+
+We can also assign a group to this resource; in this case, we will assign the group `accounting-server` to it. This way, we can create a policy that allows only the finance team to access this resource.
+
+### Add an access control policy
+Next, in the guide, we will be asked to create an access control policy. Here, we will create a policy that allows access to the `accounting-server` group of the `accounting.example.com`
+resource to peers in the `Finance team` group. They will be able to access the service ports `TCP/80` and `TCP/443`.
+
+Click on `Create Policy` and fill out the fields as shown in the image below:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-domain-resource-acl-1.png" alt="new-resource-acl-1" className="imagewrapper-big"/>
+</p>
+
+Click on `Continue` 2 times and then click on `Add Policy` to save the policy:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/add-domain-resource-acl-2.png" alt="new-resource-acl-2" className="imagewrapper-big"/>
+</p>
+
+### View the network
+After completing the wizard, you will be able to see the network you just created in the Networks list:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/view-network-1.png" alt="view-network-1" className="imagewrapper-big"/>
+</p>
+
+To access a detailed view of the network, click on the network name:
+<p>
+    <img src="/docs-static/img/how-to-guides/networks/view-network-2.png" alt="view-network-2" className="imagewrapper-big"/>
+</p>
+
+You can edit or add more resources or routing peers to the network by clicking on the `Edit` buttons of each section in the detailed view.
+
+## 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-2utg2ncdz-W7LEB6toRBLE1Jca37dYpg)
+- NetBird [latest release](https://github.com/netbirdio/netbird/releases) on GitHub