Redesign p1

frontend/src/pages/LoginPage.tsx

@@ -5,7 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useAuthStore } from '@/store/auth'
 import { marathonsApi } from '@/api'
-import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
+import { NeonButton, Input } from '@/components/ui'
+import { Gamepad2, LogIn, AlertCircle } from 'lucide-react'
 
 const loginSchema = z.object({
   login: z.string().min(3, 'Логин должен быть не менее 3 символов'),
@@ -52,16 +53,33 @@ export function LoginPage() {
   }
 
   return (
-    <div className="max-w-md mx-auto">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-center">Вход</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+    <div className="min-h-[80vh] flex items-center justify-center px-4 -mt-8">
+      {/* Background effects */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
+        <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
+      </div>
+
+      <div className="relative w-full max-w-md">
+        {/* Card */}
+        <div className="glass-neon rounded-2xl p-8 animate-scale-in">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="flex justify-center mb-4">
+              <div className="w-16 h-16 rounded-2xl bg-neon-500/10 border border-neon-500/30 flex items-center justify-center">
+                <Gamepad2 className="w-8 h-8 text-neon-500" />
+              </div>
+            </div>
+            <h1 className="text-2xl font-bold text-white mb-2">Добро пожаловать!</h1>
+            <p className="text-gray-400">Войдите, чтобы продолжить</p>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
             {(submitError || error) && (
-              <div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
-                {submitError || error}
+              <div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
+                <AlertCircle className="w-5 h-5 flex-shrink-0" />
+                <span>{submitError || error}</span>
               </div>
             )}
 
@@ -69,6 +87,7 @@ export function LoginPage() {
               label="Логин"
               placeholder="Введите логин"
               error={errors.login?.message}
+              autoComplete="username"
               {...register('login')}
             />
 
@@ -77,22 +96,39 @@ export function LoginPage() {
               type="password"
               placeholder="Введите пароль"
               error={errors.password?.message}
+              autoComplete="current-password"
               {...register('password')}
             />
 
-            <Button type="submit" className="w-full" isLoading={isLoading}>
+            <NeonButton
+              type="submit"
+              className="w-full"
+              size="lg"
+              isLoading={isLoading}
+              icon={<LogIn className="w-5 h-5" />}
+            >
               Войти
-            </Button>
+            </NeonButton>
+          </form>
 
-            <p className="text-center text-gray-400 text-sm">
+          {/* Footer */}
+          <div className="mt-6 pt-6 border-t border-dark-600 text-center">
+            <p className="text-gray-400 text-sm">
               Нет аккаунта?{' '}
-              <Link to="/register" className="link">
+              <Link
+                to="/register"
+                className="text-neon-400 hover:text-neon-300 transition-colors font-medium"
+              >
                 Зарегистрироваться
               </Link>
             </p>
-          </form>
-        </CardContent>
-      </Card>
+          </div>
+        </div>
+
+        {/* Decorative elements */}
+        <div className="absolute -top-4 -right-4 w-24 h-24 border border-neon-500/20 rounded-2xl -z-10" />
+        <div className="absolute -bottom-4 -left-4 w-32 h-32 border border-accent-500/20 rounded-2xl -z-10" />
+      </div>
     </div>
   )
 }