Fixes

next.config.mjs

@@ -25,17 +25,17 @@ const nextConfig = {
     return [
       {
         source: '/',
-        destination: '/docs/introductions',
+        destination: '/docs/introduction',
         permanent: true,
       },
       {
         source: '/docs',
-        destination: '/docs/introductions',
+        destination: '/docs/introduction',
         permanent: true,
       },
       {
         source: '/ipa',
-        destination: '/ipa/introductions',
+        destination: '/ipa/introduction',
         permanent: true,
       },
     ]

src/components/AboutNetbird.jsx

@@ -4,20 +4,20 @@ import { Heading } from '@/components/Heading'
 const aboutNetbird = [
   {
     href: '/docs/about-netbird/how-netbird-works',
-    name: 'How NetBird Works',
+    name: 'How NetBird works',
-    description: 'Learn everything there is to know about how NetBird works.',
+    description: 'Concepts, architecture, protocols, and more.',
   },
   {
     href: '/docs/about-netbird/netbird-vs-traditional-vpn',
     name: 'NetBird vs. traditional VPN',
     description:
-      'Read how NetBird compares to traditional VPNs and why it is better.',
+      'Learn how NetBird compares to traditional VPNs and why it is better.',
   },
   {
     href: '/docs/about-netbird/why-wireguard-with-netbird',
     name: 'Why WireGuard with NetBird',
     description:
-      'Learn why NetBird is using WireGuard and how NetBird simplifies the usage.',
+      'Learn why and how NetBird uses WireGuard.',
   },
 ]
 

src/components/Header.jsx

@@ -69,8 +69,8 @@ export const Header = forwardRef(function Header({ className }, ref) {
         <nav className="hidden md:block">
           <ul role="list" className="flex items-center gap-8">
             <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
-            <TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
+            <TopLevelNavItem href="/docs/introduction">Docs</TopLevelNavItem>
-            <TopLevelNavItem href="/ipa/introductions">API</TopLevelNavItem>
+            <TopLevelNavItem href="/ipa/introduction">API</TopLevelNavItem>
             <TopLevelNavItem href="https://netbird.io/blog/">Blog</TopLevelNavItem>
             <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
             <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>

src/components/How-To-Guides.jsx

@@ -3,27 +3,38 @@ import { Heading } from '@/components/Heading'
 
 const howToGuides = [
   {
-    href: '/docs/how-to/add-users-to-your-network',
+    href: '/docs/how-to/getting-started',
-    name: 'Add Users to your network',
+    name: 'Quickstart guide',
-    description: 'Learn how to add users to your network.',
+    description: 'Start using NetBird in under 5 minutes.',
   },
   {
-    href: '/docs/how-to/configure-periodic-user-authentication',
+    href: '/docs/how-to/manage-network-access',
-    name: 'Configure periodic user authentication',
+    name: 'Manage network access',
     description:
-      'Learn how to configure periodic user authentication.',
+        'Learn how to use access controls to manage access to your machines.',
+  },
+  {
+    href: '/docs/how-to/add-users-to-your-network',
+    name: 'Add users to your network',
+    description: 'learn how to add team members to your NetBird network.',
+  },
+  {
+    href: '/docs/how-to/routing-traffic-to-private-networks',
+    name: 'Route traffic to private networks',
+    description:
+      'Learn how to provide access to LANs, VPS, and corporate private networks.',
+  },
+  {
+    href: '/docs/how-to/monitor-system-and-network-activity',
+    name: 'Log and monitor network activity',
+    description:
+      'Learn how to keep track of system and network activities in your account.',
   },
   {
     href: '/docs/how-to/manage-dns-in-your-network',
     name: 'Manage DNS in your network',
     description:
-      'Learn how to configure DNS servers for your network.',
+        'Learn how to configure name servers in your private network.',
-  },
-  {
-    href: '/docs/how-to/monitor-system-and-network-activity',
-    name: 'Monitoring system and network activities',
-    description:
-      'Learn how to keep track of system and network activities in your account.',
   },
 ]
 

src/components/Layout.jsx

@@ -168,7 +168,7 @@ export function Layout({ children, title, tableOfContents }) {
           </main>
           <Footer />
         </div>
-        {!router.route.startsWith("/ipa/resources") && !router.route.includes("introductions") && <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
+        {!router.route.startsWith("/ipa/resources") && !router.route.includes("introduction") && <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
           <nav aria-labelledby="on-this-page-title" className="w-56">
             {tableOfContents.length > 0 && (
               <>

src/components/NavigationAPI.jsx

@@ -40,8 +40,8 @@ export function NavigationAPI({tableOfContents, className}) {
       <nav className={className}>
         <ul role="list">
           <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
-          <TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
+          <TopLevelNavItem href="/docs/introduction">Docs</TopLevelNavItem>
-          <TopLevelNavItem href="/ipa/introductions">API</TopLevelNavItem>
+          <TopLevelNavItem href="/ipa/introduction">API</TopLevelNavItem>
           <TopLevelNavItem href="https://netbird.io/blog/">Blog</TopLevelNavItem>
           <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
           <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>

src/components/NavigationDocs.jsx

@@ -46,8 +46,8 @@ export function NavigationDocs({className}) {
     <nav className={className}>
       <ul role="list">
           <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
-          <TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
+          <TopLevelNavItem href="/docs/introduction">Docs</TopLevelNavItem>
-          <TopLevelNavItem href="/ipa/introductions">API</TopLevelNavItem>
+          <TopLevelNavItem href="/ipa/introduction">API</TopLevelNavItem>
           <TopLevelNavItem href="https://netbird.io/blog/">Blog</TopLevelNavItem>
           <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
           <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>

src/pages/docs/how-to/access-netbird-public-api.mdx

@@ -63,7 +63,7 @@ Be aware that once you close the popup it is impossible to see the plain version
 
 ### Using access tokens
 
-Once you have created an access token, you can use it to authenticate API requests to NetBird. See [NetBird API](/ipa/introductions) documentation for detailed usage.
+Once you have created an access token, you can use it to authenticate API requests to NetBird. See [NetBird API](/ipa/introduction) documentation for detailed usage.
 
 For example, if you were using the GitHub API, you might include your personal access token like this:
 

src/pages/docs/how-to/manage-dns-in-your-network.mdx

@@ -21,7 +21,7 @@ Besides accessing machines by their domain names, you can configure NetBird to u
 control what nameservers a specific [peer group](/docs/how-to/access-control#concepts) should use, and set up split DNS.
 
 <Note>
-    Nameservers is available for NetBird [v0.11.0](https://github.com/netbirdio/netbird/releases) or later.
+    Nameservers feature is available in NetBird [v0.11.0](https://github.com/netbirdio/netbird/releases) or later.
 </Note>
 
 ## Concepts

src/pages/docs/how-to/manage-network-access.mdx

@@ -5,7 +5,7 @@ defining what peer groups are permitted to establish connections with one anothe
 
 <div class="videowrapper">
 
-    <iframe src="https://www.youtube.com/embed/WvbkACjdsHA" allow="fullscreen;" width="800" height="500" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}}></iframe>
+    <iframe src="https://www.youtube.com/embed/WvbkACjdsHA" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen;" style={{boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}}></iframe>
 
 </div>
 

src/pages/docs/introduction.mdx

@@ -11,7 +11,7 @@ NetBird is a simple and fast alternative to corporate VPNs built on top of [Wire
 It requires near zero configuration effort leaving behind the hassle of opening ports, complex firewall rules, vpn gateways, and so forth. {{ className: 'lead' }}
 
 <Note>
-    NetBird is an **open-source** project.
+    NetBird is an **open-source** project and can be self-hosted
 </Note>
 
 There is no centralized VPN server with NetBird - your computers, devices, machines, and servers connect to each other directly over a fast encrypted tunnel.
@@ -23,6 +23,8 @@ It literally takes less than 5 minutes to deploy a secure peer-to-peer VPN with
   <Button href="https://github.com/netbirdio/netbird" variant="outline" children="Explore Github" />
 </div>
 
+<AboutNetbird />
+
 <HowToGuides />
 
-<AboutNetbird />
+

src/styles/tailwind.css

@@ -19,7 +19,7 @@
   clear: both;
   width: 100%;
   position: relative;
-  padding-bottom: 56.25%;
+  padding-bottom: 46.25%;
   padding-top: 25px;
   height: 0;
 }