➕ add next top loader

add new depedencies to create loading bar on top every page

app/(clean)/layout.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const clearLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+  return <div>{children}</div>;
+};
+
+export default clearLayout;

app/(clean)/log-in/page.tsx

@@ -0,0 +1,20 @@
+import LoginCard from "@/widgets/login/loginCard/Index";
+import React from "react";
+
+const page = () => {
+  return (
+    <>
+      {/* Fixed background overlay */}
+      <div className="relative w-screen h-screen bg-red-500 bg-[url('/assets/pages/login/a78h12j89a01n.jpg')] bg-cover bg-center">
+        {/* Fixed background overlay */}
+        <div className="fixed z-0 w-screen h-screen backdrop-blur-xl bg-black bg-opacity-70" />
+        {/* Login card centered on the screen */}
+        <div className="fixed z-10 w-screen h-screen flex justify-center items-center">
+          <LoginCard />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default page;

app/(clean)/sign-up/page.tsx

@@ -0,0 +1,12 @@
+import { Link } from "@heroui/react";
+import React from "react";
+
+const page = () => {
+  return (
+    <div>
+      <h1>Hello world</h1>
+    </div>
+  );
+};
+
+export default page;