feat(navbar): add modular navbar components and color variables

apps/web/src/components/navbar/NavLink.tsx

@@ -0,0 +1,26 @@
+import { Link } from "@tanstack/react-router";
+
+type NavLinkProps = { to: string; children: React.ReactNode };
+
+const NavLink = ({ to, children }: NavLinkProps) => {
+  return (
+    <Link
+      to={to}
+      className="relative text-sm font-medium text-(--color-text-muted) transition-colors duration-200
+        hover:text-(--color-primary)
+        [&.active]:text-(--color-primary)
+        [&.active]:after:absolute
+        [&.active]:after:-bottom-1
+        [&.active]:after:left-0
+        [&.active]:after:w-full
+        [&.active]:after:h-0.5
+        [&.active]:after:bg-(--color-accent)
+        [&.active]:after:rounded-full
+        [&.active]:after:content-['']"
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default NavLink;