feat(scope): Updatedlogin

app/login/page.tsx

@@ -10,34 +10,58 @@ export default function LoginPage() {
   const router = useRouter()
 
   useEffect(() => {
-    // If user is already authenticated, redirect to dashboard
     if (!loading && user) {
       router.push('/dashboard')
     }
   }, [user, loading, router])
 
+  // Loading spinner (fullscreen, responsive)
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-screen">
+<<<<<<< HEAD
+      <div className="fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-500 via-indigo-400 to-purple-600">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-          <p className="text-gray-600">Loading...</p>
+          <div className="animate-spin rounded-full h-16 w-16 border-4 border-white/30 border-t-white mx-auto mb-4"></div>
+          <p className="text-white font-semibold text-lg">Loading...</p>
+=======
+<<<<<<< HEAD
+      <div className="fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-500/80 via-indigo-400/80 to-purple-600/80">
+=======
+      <div className="fixed inset-0 flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-500/80 via-indigo-400/80 to-purple-600/80">
+>>>>>>> 103a9a3825538b99686d415d2314c828cd229ade
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-14 w-14 border-4 border-t-4 border-blue-300 border-t-blue-600 mx-auto mb-5"></div>
+          <p className="text-blue-700 font-semibold text-lg drop-shadow">Loading...</p>
+>>>>>>> 8c5d71f2bcb92fa8a2790cab3afe90a1c657bd0f
         </div>
       </div>
     )
   }
 
+<<<<<<< HEAD
+  if (user) return null
+
+  return <Auth />
+=======
   // If user is authenticated, don't render anything (effect will redirect)
-  if (user) {
-    return null
-  }
+  if (user) return null
 
-  // Show login component for unauthenticated users
+<<<<<<< HEAD
+  // Main login page layout (centered)
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <div className="max-w-md w-full">
-        <Auth />
+    <div className="fixed inset-0 w-full h-full bg-gradient-to-br from-blue-500/80 via-indigo-400/80 to-purple-600/80 flex items-center justify-center px-2">
+      <Auth />
+=======
+  // Responsive Fullscreen login with advanced background & centering
+  return (
+    <div className="fixed inset-0 w-full h-full bg-gradient-to-br from-blue-500/80 via-indigo-400/80 to-purple-600/80 flex items-center justify-center">
+      <div className="w-full h-full flex items-center justify-center">
+        <div className="w-full max-w-xl px-2 sm:px-4 flex flex-col justify-center items-center h-full">
+          <Auth />
+        </div>
       </div>
+>>>>>>> 103a9a3825538b99686d415d2314c828cd229ade
     </div>
   )
-}
+>>>>>>> 8c5d71f2bcb92fa8a2790cab3afe90a1c657bd0f
+}

package.json

@@ -10,6 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "firebase": "^9.23.0",
@@ -22,16 +23,16 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.3.5",
+    "@types/node": "20.19.23",
+    "@types/react": "18.3.26",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.18",
     "eslint": "^9.9.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "globals": "^15.9.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.5.3",
+    "typescript": "5.9.3",
     "typescript-eslint": "^8.3.0"
   }
 }