Add AuroraBackground component for enhanced visual effects: integrate a new background effect with gradient and aurora styles into the RootLayout, improving overall aesthetics and user experience.

src/components/effects/AuroraBackground.tsx

@@ -0,0 +1,30 @@
+export const AuroraBackground = () => {
+  return (
+    <div className="fixed inset-0 -z-10 overflow-hidden">
+      {/* Base dark background with subtle aurora gradients */}
+      <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>
+
+      {/* Static aurora effects */}
+      <div className="absolute inset-0 opacity-40">
+        {/* Top-left aurora glow */}
+        <div className="absolute top-0 left-0 w-96 h-96 bg-gradient-radial from-purple-500/20 via-purple-500/5 to-transparent blur-3xl"></div>
+
+        {/* Top-right aurora glow */}
+        <div className="absolute top-20 right-0 w-80 h-80 bg-gradient-radial from-cyan-500/15 via-cyan-500/3 to-transparent blur-3xl"></div>
+
+        {/* Center aurora wave */}
+        <div className="absolute top-1/3 left-1/3 w-[600px] h-40 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-2xl transform rotate-12"></div>
+
+        {/* Bottom aurora glow */}
+        <div className="absolute bottom-0 left-1/4 w-96 h-64 bg-gradient-radial from-teal-500/15 via-teal-500/3 to-transparent blur-3xl"></div>
+
+        {/* Right side accent */}
+        <div className="absolute top-1/2 right-20 w-32 h-96 bg-gradient-to-b from-transparent via-purple-400/8 to-transparent blur-2xl transform -rotate-12"></div>
+      </div>
+
+      {/* Gradient mesh overlay for content readability */}
+      <div className="absolute inset-0 bg-gradient-to-t from-slate-950/95 via-slate-950/30 to-slate-950/70"></div>
+      <div className="absolute inset-0 bg-gradient-to-br from-slate-950/40 via-transparent to-slate-950/40"></div>
+    </div>
+  );
+};

src/components/effects/index.ts

@@ -0,0 +1 @@
+export { AuroraBackground } from "./AuroraBackground";