[management, reverse proxy] Add reverse proxy feature (#5291)

* implement reverse proxy


---------

Co-authored-by: Alisdair MacLeod <git@alisdairmacleod.co.uk>
Co-authored-by: mlsmaycon <mlsmaycon@gmail.com>
Co-authored-by: Eduard Gert <kontakt@eduardgert.de>
Co-authored-by: Viktor Liu <viktor@netbird.io>
Co-authored-by: Diego Noguês <diego.sure@gmail.com>
Co-authored-by: Diego Noguês <49420+diegocn@users.noreply.github.com>
Co-authored-by: Bethuel Mmbaga <bethuelmbaga12@gmail.com>
Co-authored-by: Zoltan Papp <zoltan.pmail@gmail.com>
Co-authored-by: Ashley Mensah <ashleyamo982@gmail.com>

proxy/web/src/components/NetBirdLogo.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@/utils/helpers";
+import netbirdFull from "@/assets/netbird-full.svg";
+import netbirdMark from "@/assets/netbird.svg";
+
+type Props = {
+  size?: "small" | "default" | "large";
+  mobile?: boolean;
+};
+
+const sizes = {
+  small: {
+    desktop: 14,
+    mobile: 20,
+  },
+  default: {
+    desktop: 22,
+    mobile: 30,
+  },
+  large: {
+    desktop: 24,
+    mobile: 40,
+  },
+};
+
+export const NetBirdLogo = ({ size = "default", mobile = true }: Props) => {
+  return (
+    <>
+      <img
+        src={netbirdFull}
+        height={sizes[size].desktop}
+        style={{ height: sizes[size].desktop }}
+        alt="NetBird Logo"
+        className={cn(mobile && "hidden md:block", "group-hover:opacity-80 transition-all")}
+      />
+      {mobile && (
+        <img
+          src={netbirdMark}
+          width={sizes[size].mobile}
+          style={{ width: sizes[size].mobile }}
+          alt="NetBird Logo"
+          className={cn(mobile && "md:hidden ml-4")}
+        />
+      )}
+    </>
+  );
+};