updated navbar and added react compiler

apps/web/next.config.mjs

@@ -6,6 +6,9 @@ const withMDX = createMDX();
 const config = {
 	reactStrictMode: true,
 	output: "export",
+	experimental: {
+		reactCompiler: true,
+	},
 };
 
 export default withMDX(config);

apps/web/package.json

@@ -11,6 +11,7 @@
 	},
 	"dependencies": {
 		"@xyflow/react": "^12.4.3",
+		"babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216",
 		"framer-motion": "^12.4.3",
 		"fumadocs-core": "15.0.6",
 		"fumadocs-mdx": "11.5.3",

apps/web/src/app/(home)/_components/Navbar.tsx

@@ -56,7 +56,7 @@ const Navbar = () => {
 
 			<div
 				className={`flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
-					scrolled ? "w-[480px]" : "w-[335px]"
+					scrolled ? "w-[480px]" : "w-[350px]"
 				}`}
 			>
 				<div
@@ -126,7 +126,7 @@ const Navbar = () => {
 					style={{
 						transform: scrolled ? "translateY(0)" : "translateY(-8px)",
 					}}
-					className={`text-violet-700 hover:text-white transition-all duration-300 py-2 px-4 rounded-full ${
+					className={` hover:text-white transition-all duration-300 py-2 px-4 rounded-full ${
 						scrolled
 							? "opacity-100 translate-y-0"
 							: "opacity-0 pointer-events-none"