feat(deps): Integrate Clerk authentication and authorization

Add comprehensive Clerk authentication system with advanced features:

- Implement Clerk authentication provider
- Set up protected routes with role-based access control
- Configure advanced authentication flows
- Add middleware for authentication checks
- Implement user session management
- Create login, signup, and profile management components

This implementation enhances application security and provides a robust authentication solution with seamless user experience.

app/layout.tsx

@@ -1,9 +1,53 @@
-import "styles/tailwind.css"
+import type { Metadata } from "next";
+import {
+  ClerkProvider,
+  SignInButton,
+  SignUpButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+} from "@clerk/nextjs";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../styles/tailwind.css";
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
+    <ClerkProvider>
+      <html lang="en">
+        <body
+          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        >
+          <header className="flex justify-end items-center p-4 gap-4 h-16">
+            <SignedOut>
+              <SignInButton />
+              <SignUpButton />
+            </SignedOut>
+            <SignedIn>
+              <UserButton />
+            </SignedIn>
+          </header>
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
+  );
+}