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

client/src/pages/RegisterPage.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 RegisterPage() {
   const { user, register } = useAuth();
@@ -19,7 +20,7 @@ export default function RegisterPage() {
     setError('');
 
     if (password !== confirm) {
-      setError('Passwords do not match');
+      setError('Пароли не совпадают');
       return;
     }
 
@@ -27,59 +28,74 @@ export default function RegisterPage() {
     try {
       await register(username, password);
     } catch (err: any) {
-      setError(err.response?.data?.error || 'Registration 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">Create 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"
-            minLength={3}
-            required
-            autoFocus
-            className="h-10 text-sm"
-          />
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Password"
-            minLength={4}
-            required
-            className="h-10 text-sm"
-          />
-          <Input
-            type="password"
-            value={confirm}
-            onChange={(e) => setConfirm(e.target.value)}
-            placeholder="Confirm 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 ? 'Creating account...' : 'Create account'}
-          </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="Имя пользователя"
+              minLength={3}
+              required
+              autoFocus
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Пароль"
+              minLength={4}
+              required
+              className="h-11 text-sm rounded-xl bg-secondary/50"
+            />
+            <Input
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(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">
-          Already have an account?{' '}
-          <Link to="/login" className="font-medium underline-offset-4 hover:underline">
-            Sign in
-          </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="/login" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
+              Войти
+            </Link>
+          </p>
+        </div>
       </div>
     </div>
   );