better design with selfmade shader

layouts/MainLayout.tsx

@@ -1,14 +1,13 @@
 import { PropsWithChildren } from "react";
-
-import { GradientBG } from '../components/GradientBG';
+import { R3Gradient } from '../components/R3Background';
 import { Navbar } from "../components/Navbar";
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className="w-full">
       <Navbar />
-      <GradientBG />
-      <main className="xl:p-10 p-4 px-10 xl:mx-0">{children}</main>
+      <R3Gradient />
+      <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
     </div>
   );
 };