Self Hosted Quickstart and Other Changes

src/components/Button.jsx

@@ -23,6 +23,8 @@ const variantStyles = {
     'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-netbird dark:text-white dark:hover:bg-netbird-dark',
   outline:
     'rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white',
+  'outline-arrow':
+    'rounded-[5px] text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white duration-300 relative overflow-hidden group',
   text: 'text-netbird hover:text-netbird-dark dark:text-netbird dark:hover:text-netbird-light',
 }
 
@@ -52,12 +54,16 @@ export function Button({
     />
   )
 
-  if (variant === 'primary') {
+  if (variant === 'primary' || variant === 'outline-arrow') {
     return (
       <div className="relative inline-flex group transition-all" onClick={props.href ? undefined : props.onClick}>
-        <span className="absolute h-full w-full left-0 top-0 blur-sm bg-netbird z-0 transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
+        {variant === 'primary' && (
+          <span className="absolute h-full w-full left-0 top-0 blur-sm bg-netbird z-0 transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
+        )}
         <Component className={className} {...props}>
-          <span className="absolute h-full w-full left-0 top-0 z-10 bg-gradient-to-br from-netbird to-netbird-dark transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
+          {variant === 'primary' && (
+            <span className="absolute h-full w-full left-0 top-0 z-10 bg-gradient-to-br from-netbird to-netbird-dark transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
+          )}
           <span className="z-20 relative flex gap-2 items-center transition-all">
             {arrow === 'left' && arrowIcon}
             {children}

src/components/Header.jsx

@@ -77,7 +77,7 @@ export const Header = forwardRef(function Header({ className }, ref) {
           <ModeToggle />
         </div>
         <div className="hidden min-[416px]:contents">
-          <Button href="https://app.netbird.io/" target="_blank">Try NetBird</Button>
+          <Button href="https://app.netbird.io/" target="_blank" className="!py-1.5 !px-3 text-xs">Try NetBird</Button>
         </div>
       </div>
     </motion.div>

src/components/Tiles.jsx

@@ -42,16 +42,26 @@ function TilePattern({ mouseX, mouseY }) {
  * 
  * @param {string} title - The heading title for the tiles section
  * @param {string} [id] - Optional id for the heading anchor
+ * @param {string} [description] - Optional description text to display below the title
  * @param {Array<{href: string, name: string, description: string}>} items - Array of tile items
  * @param {string} [buttonText='Read more'] - Optional button text (defaults to "Read more")
  */
-export function Tiles({ title, id, items, buttonText = 'Read more' }) {
+export function Tiles({ title, id, description, items, buttonText = 'Read more' }) {
+  const hasHeader = title || description;
+
   return (
     <div className="my-16 xl:max-w-none">
-      <Heading level={2} id={id} anchor={!!id}>
-        {title}
-      </Heading>
-      <div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2">
+      {title && (
+        <Heading level={2} id={id} anchor={!!id}>
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <div className={`text-sm text-zinc-600 dark:text-zinc-400 ${title ? 'mt-4' : ''}`}>
+          {description}
+        </div>
+      )}
+      <div className={`not-prose grid grid-cols-1 gap-8 sm:grid-cols-2 ${hasHeader ? 'mt-4 border-t border-zinc-900/5 pt-10 dark:border-white/5' : ''}`}>
         {items.map((item) => {
           let mouseX = useMotionValue(0)
           let mouseY = useMotionValue(0)

src/pages/introduction.mdx

@@ -25,52 +25,22 @@ It creates a high-performance point-to-point [WireGuard®](https://www.wireguard
 It literally takes less than 5 minutes to deploy a secure point-to-point VPN with NetBird.
 
 <div className="not-prose mb-16 mt-6 flex gap-3">
-  <Button href="https://app.netbird.io/install" arrow="right" children="Get started" />
-  <Button href="https://github.com/netbirdio/netbird" variant="outline" children="Explore Github" />
+  <Button href="https://app.netbird.io/install" arrow="right" children="Try NetBird Cloud" />
+  <Button href="/selfhosted/selfhosted-quickstart" variant="outline-arrow" arrow="right" children="Deploy NetBird Self-Hosted" />
 </div>
 
-<Tiles 
-  title="About NetBird" 
-  id="about-netbird" 
-  items={[
-    {
-      href: '/about-netbird/how-netbird-works',
-      name: 'How NetBird Works',
-      description: 'Learn about NetBird concepts, architecture, protocols, and how it creates secure networks.',
-    },
-    {
-      href: '/about-netbird/netbird-vs-traditional-vpn',
-      name: 'NetBird vs. Traditional VPN',
-      description:
-        'Discover how NetBird compares to traditional VPNs and understand the advantages of Zero Trust networking.',
-    },
-    {
-      href: '/about-netbird/why-wireguard-with-netbird',
-      name: 'Why WireGuard with NetBird',
-      description:
-        'Explore why NetBird uses WireGuard and how it provides fast, secure, and modern networking.',
-    },
-    {
-      href: '/about-netbird/browser-client-architecture',
-      name: 'Browser Client Architecture',
-      description:
-        'Understand how the Browser Client enables secure remote access directly from web browsers using WebAssembly.',
-    },
-  ]} 
-/>
-
 <Tiles 
   title="Guides" 
   id="guides" 
   items={[
     {
       href: '/get-started',
-      name: 'Quickstart Guide',
+      name: 'Onboarding Guide',
       description: 'Get started with NetBird in under 5 minutes. Learn the basics of installation and setup.',
     },
     {
       href: '/selfhosted/selfhosted-quickstart',
-      name: 'Self-Hosted Quickstart',
+      name: 'Self-Host NetBird',
       description: 'Get started with self-hosted NetBird in 5 minutes. Learn how to deploy and configure your own NetBird instance.',
     },
     {
@@ -110,4 +80,33 @@ It literally takes less than 5 minutes to deploy a secure point-to-point VPN wit
   ]} 
 />
 
+<Tiles 
+  title="About NetBird" 
+  id="about-netbird" 
+  items={[
+    {
+      href: '/about-netbird/how-netbird-works',
+      name: 'How NetBird Works',
+      description: 'Learn about NetBird concepts, architecture, protocols, and how it creates secure networks.',
+    },
+    {
+      href: '/about-netbird/netbird-vs-traditional-vpn',
+      name: 'NetBird vs. Traditional VPN',
+      description:
+        'Discover how NetBird compares to traditional VPNs and understand the advantages of Zero Trust networking.',
+    },
+    {
+      href: '/about-netbird/why-wireguard-with-netbird',
+      name: 'Why WireGuard with NetBird',
+      description:
+        'Explore why NetBird uses WireGuard and how it provides fast, secure, and modern networking.',
+    },
+    {
+      href: '/about-netbird/browser-client-architecture',
+      name: 'Browser Client Architecture',
+      description:
+        'Understand how the Browser Client enables secure remote access directly from web browsers using WebAssembly.',
+    },
+  ]} 
+/>
 

src/pages/selfhosted/identity-providers/authentik.mdx

@@ -1,6 +1,6 @@
 import {Note} from "@/components/mdx";
 
-# Authentik
+# Authentik with NetBird Self-Hosted
 
 [Authentik](https://goauthentik.io) is an open-source identity provider focused on flexibility and security. It serves as a self-hosted alternative to commercial solutions like Okta and Auth0, providing single sign-on (SSO), multi-factor authentication (MFA), access policies, user management, and support for SAML and OIDC protocols.
 

src/pages/selfhosted/identity-providers/keycloak.mdx

@@ -1,6 +1,6 @@
 import {Note} from "@/components/mdx";
 
-# Keycloak
+# Keycloak with NetBird Self-Hosted
 
 [Keycloak](https://www.keycloak.org/) is an open-source Identity and Access Management solution maintained by Red Hat. It provides single sign-on, social login, user federation, fine-grained authorization, and supports OpenID Connect, OAuth 2.0, and SAML 2.0 protocols.
 

src/pages/selfhosted/identity-providers/pocketid.mdx

@@ -1,6 +1,6 @@
 import {Note} from "@/components/mdx";
 
-# PocketID
+# PocketID with NetBird Self-Hosted
 
 [PocketID](https://pocket-id.org/) is a simplified identity management solution designed for self-hosted environments, offering a lightweight and easy-to-deploy option for authentication.
 

src/pages/selfhosted/identity-providers/zitadel.mdx

@@ -1,6 +1,6 @@
 import {Note} from "@/components/mdx";
 
-# Zitadel
+# Zitadel with NetBird Self-Hosted
 
 [Zitadel](https://zitadel.com) is an open-source identity infrastructure platform designed for cloud-native environments. It provides multi-tenancy, customizable branding, passwordless authentication, and supports protocols like OpenID Connect, OAuth2, SAML2, and LDAP.
 
@@ -17,49 +17,118 @@ Add Zitadel as an external IdP directly in the NetBird Management Dashboard. Thi
 - NetBird self-hosted with embedded IdP enabled
 - Zitadel instance (cloud or self-hosted)
 
-### Step 1: Create Application in Zitadel
+### Step 1: Create a Project in Zitadel
 
 1. Log in to your Zitadel Console
-2. Navigate to your project (or create one)
-3. Click **New** in the **Applications** section
-4. Fill in:
+2. If you don't have a project yet, click **New Project** (or navigate to an existing project)
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/01_create-project-zitadel.png" alt="Create project" className="imagewrapper-big"/>
+</p>
+
+3. Fill in the project details:
+   - **Name**: `NetBird` (or your preferred name)
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/02_name-project-zitadel.png" alt="Name project" className="imagewrapper-big"/>
+</p>
+
+4. Click **Create**
+
+### Step 2: Create Application in Zitadel
+
+1. Make sure you're in your project (select it from the project dropdown if needed)
+2. Click **New** in the **Applications** section
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/03_new-app-zitadel.png" alt="New application" className="imagewrapper-big"/>
+</p>
+
+3. Fill in:
    - **Name**: `NetBird`
    - **Type**: `Web`
-5. Click **Continue**
-6. Configure authentication:
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/04_app-new-type-web-zitadel.png" alt="Application type Web" className="imagewrapper-big"/>
+</p>
+
+4. Click **Continue**
+5. Configure authentication:
    - **Authentication Method**: `Code` (not PKCE)
-7. Leave redirect URIs empty for now
-8. Click **Create**
-9. Go to **Token Settings** and enable **User Info inside ID Token**
-10. Note the **Client ID** and generate a **Client Secret**
 
-### Step 2: Add Identity Provider in NetBird
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/05_app-select-code-zitadel.png" alt="Select Code authentication" className="imagewrapper-big"/>
+</p>
+
+6. **Don't click Create yet** — you'll add the redirect URI in Step 4
+
+### Step 3: Get Redirect URL from NetBird
 
-1. Log in to your NetBird Dashboard
+1. Open a new tab or window and log in to your NetBird Dashboard
 2. Navigate to **Settings** → **Identity Providers**
 3. Click **Add Identity Provider**
-4. Fill in the fields:
+4. Fill in the fields (you can leave **Client ID and Secret** empty for now):
 
 | Field | Value |
 |-------|-------|
 | Type | Zitadel |
 | Name | Zitadel (or your preferred display name) |
-| Client ID | From Zitadel application |
-| Client Secret | From Zitadel application |
-| Issuer | Your Zitadel URL (e.g., `https://your-instance.zitadel.cloud`) |
+| Issuer URL | Your Zitadel URL (e.g., `https://your-instance.zitadel.cloud`) |
+| Client ID | Leave empty for now |
+| Client Secret | Leave empty for now |
+
+5. NetBird will display a **Redirect URL** — **copy this URL** (but don't click **Save** yet)
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/06_copy-callback-url-netbird-zitadel.png" alt="Copy callback URL from NetBird" className="imagewrapper-big"/>
+</p>
+
+### Step 4: Complete Application Configuration in Zitadel
+
+1. Return to the Zitadel Console tab
+2. In the redirect URIs field, paste the redirect URL you copied from NetBird
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/07_add_redirect-uri-zitadel.png" alt="Add redirect URI" className="imagewrapper-big"/>
+</p>
+
+3. Click **Create**
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/08_click-create-app-zitadel.png" alt="Click Create application" className="imagewrapper-big"/>
+</p>
+
+4. Now you will have the Client ID and Secret displayed.
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/09_copy-client-id-zitadel.png" alt="Copy Client ID" className="imagewrapper-big"/>
+</p>
+
+### Step 5: Complete NetBird Setup
+
+1. Return to the NetBird tab
+2. In the identity provider form, paste the **Client ID and Secret** you displayed in Step 4
+3. Click **Save**
+
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/10_fill-netbird-config-zitadel.png" alt="Fill NetBird configuration" className="imagewrapper-big"/>
+</p>
 
-5. Click **Save**
+### Step 6: Configure Token Settings in Zitadel
 
-### Step 3: Configure Redirect URI
+1. Return to the Zitadel Console tab
+2. Navigate to your NetBird application → **Token Settings**
+3. Enable:
+   - **Include user's profile info in the ID Token**
+   - **User roles inside ID Token** (if group mapping is needed)
 
-After saving, NetBird displays the **Redirect URL**. Copy this URL and add it to your Zitadel application:
+<p>
+    <img src="/docs-static/img/selfhosted/identity-providers/self-hosted/zitadel/11_token-settings-zitadel.png" alt="Token settings" className="imagewrapper-big"/>
+</p>
 
-1. Return to Zitadel Console
-2. Go to your application → **Redirect Settings**
-3. Add the redirect URL from NetBird to **Redirect URIs**
 4. Click **Save**
 
-### Step 4: Test the Connection
+### Step 7: Test the Connection
 
 1. Log out of NetBird Dashboard
 2. On the login page, you should see a "Zitadel" button