Add video to Routes feature doc

docs/how-to-guides/network-routes.md

@@ -3,6 +3,11 @@ sidebar_position: 1
 ---
 # Routing Traffic to Private Networks
 
+<div class="videowrapper">
+<iframe src="https://www.youtube.com/embed/pmrpNttg2lI" allow="fullscreen;"></iframe>
+</div>
+<br/><br/>
+
 NetBird provides fast and reliable end-to-end encryption between peers in your network. You can install the agent on every desktop, VM, container, or physical server and have a fast, secure peer-to-peer mesh network. That is the desired configuration, but some cases do not allow for agent installation or can slow down migration from legacy systems:
 
 - Side-by-side migrations where part of your network is already using NetBird but needs to access services that are not
@@ -15,6 +20,12 @@ In these cases, you can configure network routes assigning routing peers to conn
     <img src="/docs/img/how-to-guides/netbird-network-routes.png" alt="high-level-dia"  />
 </p>
 
+:::tip try it
+If you want to see the Network Routes feature in action, try our managed version at https://app.netbird.io/routes. 
+
+It's free and simple! :)
+:::
+
 ## Concepts
 ### Network routes
 A network route describes the network you want to connect with your NetBird peers. It has an identifier, a network range, a routing peer, and some parameters available for managing priority and masquerading.
@@ -104,4 +115,14 @@ This way, devices that don't have the agent installed can communicate with your
 
 <p align="center">
     <img src="/docs/img/how-to-guides/netbird-network-routes-masquerading.png" alt="high-level-dia" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}} />
-</p>
+</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

@@ -53,3 +53,49 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   width: 100%;
   height: 100%;
 }
+
+/* CSS */
+.button-5 {
+  align-items: center;
+  background-clip: padding-box;
+  background-color: darkorange;
+  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: 16px;
+  font-weight: 400;
+  justify-content: center;
+  line-height: 1.25;
+  margin: 0;
+  min-height: 3rem;
+  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-5:hover,
+.button-5:focus {
+  background-color: #fb8332;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
+}
+
+.button-5:hover {
+  transform: translateY(-1px);
+}
+
+.button-5:active {
+  background-color: #c85000;
+  box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
+  transform: translateY(0);
+}