Style Consistency Changes and Element Improvements (#541)

Co-authored-by: braginini <bangvalo@gmail.com>

src/pages/introduction.mdx

@@ -1,15 +1,14 @@
 import {Note} from "@/components/mdx"
-import {HowToGuides} from "@/components/How-To-Guides"
-import {AboutNetbird} from "@/components/AboutNetbird"
+import {Tiles} from "@/components/Tiles"
+import {YouTube} from "@/components/YouTube"
+import {Button} from "@/components/Button"
 
 export const description =
   'Learn everything there is to know about NetBird.'
 
 # Introduction to NetBird
 
-<div className="videowrapper">
-    <iframe src="https://www.youtube.com/embed/CFa7SY4Up9k?si=FVdoVW0ClxsJgd4t" allow="fullscreen;"></iframe>
-</div>
+<YouTube videoId="CFa7SY4Up9k" />
 
 NetBird is an Open Source Zero Trust Networking platform that allows you to create secure private networks for your
 organization or home. We designed NetBird to be simple and fast, requiring near-zero configuration effort and leaving
@@ -30,8 +29,85 @@ It literally takes less than 5 minutes to deploy a secure point-to-point VPN wit
   <Button href="https://github.com/netbirdio/netbird" variant="outline" children="Explore Github" />
 </div>
 
-<AboutNetbird />
+<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.',
+    },
+  ]} 
+/>
 
-<HowToGuides />
+<Tiles 
+  title="Guides" 
+  id="guides" 
+  items={[
+    {
+      href: '/get-started',
+      name: 'Quickstart 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',
+      description: 'Get started with self-hosted NetBird in 5 minutes. Learn how to deploy and configure your own NetBird instance.',
+    },
+    {
+      href: '/manage/access-control/manage-network-access',
+      name: 'Manage Network Access',
+      description:
+          'Learn how to use access control policies to manage and secure access to your machines and resources.',
+    },
+    {
+      href: '/manage/team/add-users-to-your-network',
+      name: 'Add Users to Your Network',
+      description: 'Discover how to add team members to your NetBird network and manage user access.',
+    },
+    {
+      href: '/manage/network-routes/routing-traffic-to-private-networks',
+      name: 'Route Traffic to Private Networks',
+      description:
+        'Learn how to provide secure access to LANs, VPS instances, and corporate private networks.',
+    },
+    {
+      href: '/manage/network-routes/configuring-default-routes-for-internet-traffic',
+      name: 'Configure Default Routes',
+      description: 'Set up default routes for internet traffic and configure exit nodes for your network.',
+    },
+    {
+      href: '/manage/activity/traffic-events-logging',
+      name: 'Log and Monitor Network Activity',
+      description:
+        'Learn how to track and monitor system and network activities in your NetBird account.',
+    },
+    {
+      href: '/manage/dns',
+      name: 'Manage DNS in Your Network',
+      description:
+          'Configure custom name servers and DNS settings for your private network.',
+    },
+  ]} 
+/>