Add next-intl to internationalize our project

app/[locale]/(backend)/layout.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import Header from "@/components/Header/index";
+import Sidebar from "@/components/Sidebar";
+import React, { useState } from "react";
+import { usePathname } from "next/navigation";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const pathname = usePathname();
+
+  const getPageTitle = (path: string) => {
+    if (path === "/") return "Overview";
+    
+    const titles: Record<string, string> = {
+      "/users": "Users",
+      "/settings": "Settings",
+      "/profile": "Profile",
+      "/songs": "Songs Database",
+      "/events": "Worship & Events",
+    };
+
+    return titles[path] || "Dashboard";
+  };
+
+  return (
+    <div className="dashboard">
+      <Sidebar open={sidebarOpen} close={() => setSidebarOpen(false)} />
+
+      {/* Mobile Sidebar Overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 md:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      <div
+        className={`flex min-h-screen flex-col transition-all duration-300 md:pl-64`}
+      >
+        <Header 
+          onMenuClick={() => setSidebarOpen(!sidebarOpen)} 
+          pageTitle={getPageTitle(pathname)} 
+        />
+        
+        <main className="animate-in fade-in flex-1 p-4 duration-500 md:p-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default Layout;