From 1175543e32c809e66aac9882ee1d7d4a6de95612 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Sat, 16 Aug 2025 16:32:42 +0200
Subject: [PATCH] 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 ++-
 src/components/effects/AuroraBackground.tsx | 30 +++++++++++++++++++++
 src/components/effects/index.ts             |  1 +
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/components/effects/AuroraBackground.tsx
 create mode 100644 src/components/effects/index.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 16910c8..29e3aff 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/components/effects/AuroraBackground.tsx b/src/components/effects/AuroraBackground.tsx
new file mode 100644
index 0000000..dd1d9bf
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/effects/index.ts b/src/components/effects/index.ts
new file mode 100644
index 0000000..8ea037d
--- /dev/null
+++ b/src/components/effects/index.ts
@@ -0,0 +1 @@
+export { AuroraBackground } from "./AuroraBackground";