feat: Introduce shared settings components, implement user settings pages, and refactor agent settings pages to utilize them.

src/app/(user)/user/settings/password/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { SettingsSidebar, PasswordSecurityForm } from '@/components/settings';
+
+export default function UserPasswordSecurityPage() {
+  const handleSave = (data: { currentPassword: string; newPassword: string }) => {
+    console.log('Updating user password:', data);
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6">
+      <div className="flex flex-col lg:flex-row gap-6">
+        {/* Left Sidebar */}
+        <SettingsSidebar basePath="/user/settings" />
+
+        {/* Main Content */}
+        <div className="flex-1">
+          {/* Header Card */}
+          <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
+            <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
+              Password Security
+            </h1>
+          </div>
+
+          <PasswordSecurityForm onSave={handleSave} />
+        </div>
+      </div>
+    </div>
+  );
+}