feat: add gradient to the body

src/app/(modules)/layout.tsx

@@ -11,13 +11,13 @@ const ModulesLayout = ({
   children: React.ReactNode;
 }>) => {
   return (
-    <SidebarProvider>
-      <AppSidebar />
-      <main className="flex flex-1 flex-col w-full h-screen overflow-hidden">
+    <SidebarProvider className="bg-transparent overflow-hidden">
+      <AppSidebar className="bg-transparent" />
+      <main className="flex flex-1 flex-col w-full h-screen overflow-hidden bg-transparent">
         <div className="flex-1 overflow-auto">
           {/* Centering container wrapper */}
           <div className="max-w-380 mx-auto w-full flex flex-col min-h-full">
-            <div className="flex gap-3 items-center sticky top-0 bg-background/50 backdrop-blur-md z-30 py-3 px-6 border-b border-border/10">
+            <div className="flex gap-3 items-center sticky top-0 bg-background/30 backdrop-blur-xl z-30 py-3 px-6 border-b border-border/10">
               <SidebarTrigger />
               <ModeToggle />
               <Separator orientation="vertical" className="mx-2 h-4" />

src/app/globals.css

@@ -7,7 +7,7 @@
   --radius: 0.65rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
+  --card: oklch(1 0 0 / 0.4);
   --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.141 0.005 285.823);
@@ -28,7 +28,7 @@
   --chart-3: oklch(0.541 0.281 293.009);
   --chart-4: oklch(0.491 0.27 292.581);
   --chart-5: oklch(0.432 0.232 292.759);
-  --sidebar: oklch(0.985 0 0);
+  --sidebar: oklch(0.985 0 0 / 0.6);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: oklch(0.541 0.281 293.009);
   --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
@@ -41,7 +41,7 @@
 .dark {
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
+  --card: oklch(0.21 0.006 285.885 / 0.6);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
@@ -62,7 +62,7 @@
   --chart-3: oklch(0.541 0.281 293.009);
   --chart-4: oklch(0.491 0.27 292.581);
   --chart-5: oklch(0.432 0.232 292.759);
-  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar: oklch(0.21 0.006 285.885 / 0.6);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.606 0.25 292.717);
   --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
@@ -115,41 +115,16 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
-/* Base styles */
-/* @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply text-foreground;
-    background-image: url("/background.png");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    min-height: 100vh;
-    background-color: transparent !important;
-  }
-
-  .bg-mesh-gradient {
-    background: transparent !important;
-  }
-
-  [data-slot="card"] {
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-  }
-} */
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
-  body {
-    @apply bg-background text-foreground;
-  }
 
+  body {
+    @apply bg-transparent text-foreground;
+    min-height: 100vh;
+  }
+  
   /* Modern Scrollbar Styles */
   ::-webkit-scrollbar {
     width: 8px; /* Slightly wider for better accessibility */
@@ -174,4 +149,3 @@
   }
 }
 
-

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner"
+import { BackgroundGradient } from "@/components/background-gradient";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -35,7 +36,10 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <div className="relative min-h-screen isolate">
+            <BackgroundGradient />
+            {children}
+          </div>
           <Toaster  position="top-center" />
         </ThemeProvider>
       </body>