Enhance login page with new UI and styling updates

Introduced a redesigned login page featuring a two-column layout with a branding section. Added new styles such as gradient backgrounds, input fields with focus animations, and button hover effects. These changes improve the visual appeal and user experience.

frontend/src/pages/LoginPage.jsx

@@ -26,27 +26,42 @@ export function LoginPage() {
 
   return (
     <div className="login-wrap">
-      <form className="card login-card" onSubmit={submit}>
-        <h2>Login</h2>
-        <label>Email</label>
-        <input
-          type="email"
-          placeholder="E-Mail"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          autoComplete="username"
-        />
-        <label>Passwort</label>
-        <input
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          autoComplete="current-password"
-        />
-        {error && <p className="error">{error}</p>}
-        <button disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
-      </form>
+      <div className="login-shell">
+        <section className="login-brand card">
+          <h1>NexaPG Monitor</h1>
+          <p>PostgreSQL Monitoring, Query Insights und Infrastruktur-Overview in einer Ansicht.</p>
+          <div className="login-brand-points">
+            <span>Multi-Target Monitoring</span>
+            <span>Live Database Overview</span>
+            <span>RBAC + Audit Logging</span>
+          </div>
+        </section>
+        <form className="card login-card" onSubmit={submit}>
+          <h2>Login</h2>
+          <label>Email</label>
+          <div className="input-shell">
+            <input
+              type="email"
+              placeholder="E-Mail"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoComplete="username"
+            />
+          </div>
+          <label>Passwort</label>
+          <div className="input-shell">
+            <input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+            />
+          </div>
+          {error && <p className="error">{error}</p>}
+          <button className="login-cta" disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
+        </form>
+      </div>
     </div>
   );
 }