UI: тёплый современный дизайн + русификация

client/src/pages/LoginPage.tsx

@@ -3,6 +3,7 @@ import { Link, Navigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Cat } from 'lucide-react';
 
 export default function LoginPage() {
   const { user, login } = useAuth();
@@ -20,49 +21,64 @@ export default function LoginPage() {
     try {
       await login(username, password);
     } catch (err: any) {
-      setError(err.response?.data?.error || 'Login failed');
+      setError(err.response?.data?.error || 'Ошибка входа');
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4">
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
       <div className="w-full max-w-sm animate-fade-in">
         <div className="text-center mb-8">
-          <h1 className="text-2xl font-semibold tracking-tight">Catstagram</h1>
-          <p className="text-sm text-muted-foreground mt-1">Sign in to your account</p>
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
+            <Cat className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
+            Catstagram
+          </h1>
+          <p className="mt-1.5 text-sm text-muted-foreground">Войдите, чтобы смотреть котов</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-3">
-          <Input
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="Username"
-            required
-            autoFocus
-            className="h-10 text-sm"
-          />
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Password"
-            required
-            className="h-10 text-sm"
-          />
-          {error && <p className="text-sm text-destructive">{error}</p>}
-          <Button type="submit" className="w-full h-10" disabled={loading}>
-            {loading ? 'Signing in...' : 'Sign in'}
-          </Button>
-        </form>
+        <div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
+          <form onSubmit={handleSubmit} className="space-y-3.5">
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Имя пользователя"
+              required
+              autoFocus
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Пароль"
+              required
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            {error && (
+              <p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
+            )}
+            <Button
+              type="submit"
+              className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
+              disabled={loading}
+            >
+              {loading ? 'Вход...' : 'Войти'}
+            </Button>
+          </form>
+        </div>
 
-        <p className="mt-6 text-center text-sm text-muted-foreground">
-          No account?{' '}
-          <Link to="/register" className="font-medium underline-offset-4 hover:underline">
-            Register
-          </Link>
-        </p>
+        <div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
+          <p className="text-sm text-muted-foreground">
+            Нет аккаунта?{' '}
+            <Link to="/register" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
+              Зарегистрироваться
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
   );