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/app/layout.tsx

@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { Navbar } from "@/components/organisms/Navbar";
 import { GlobalStoreProvider } from "./store/globalStore";
+import { AuroraBackground } from "@/components/effects";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -31,8 +32,9 @@ export default async function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <GlobalStoreProvider>
+          <AuroraBackground />
           <Navbar />
-          <main className="pt-16 lg:pt-20 [&>:last-child]:mb-0">
+          <main className="relative pt-16 lg:pt-20 [&>:last-child]:mb-0">
             {children}
           </main>
         </GlobalStoreProvider>

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";