Redesign p1

frontend/src/pages/RegisterPage.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, UserPlus, AlertCircle } from 'lucide-react'
 
 const registerSchema = z.object({
   login: z
@@ -68,16 +69,33 @@ export function RegisterPage() {
   }
 
   return (
-    <div className="max-w-md mx-auto">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-center">Регистрация</CardTitle>
-        </CardHeader>
-        <CardContent>
+    <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/3 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
+        <div className="absolute bottom-1/3 -left-32 w-96 h-96 bg-neon-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-accent-500/10 border border-accent-500/30 flex items-center justify-center">
+                <Gamepad2 className="w-8 h-8 text-accent-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-4">
             {(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>
             )}
 
@@ -85,12 +103,13 @@ export function RegisterPage() {
               label="Логин"
               placeholder="Придумайте логин"
               error={errors.login?.message}
+              autoComplete="username"
               {...register('login')}
             />
 
             <Input
               label="Никнейм"
-              placeholder="Придумайте никнейм"
+              placeholder="Как вас называть?"
               error={errors.nickname?.message}
               {...register('nickname')}
             />
@@ -100,6 +119,7 @@ export function RegisterPage() {
               type="password"
               placeholder="Придумайте пароль"
               error={errors.password?.message}
+              autoComplete="new-password"
               {...register('password')}
             />
 
@@ -108,22 +128,40 @@ export function RegisterPage() {
               type="password"
               placeholder="Повторите пароль"
               error={errors.confirmPassword?.message}
+              autoComplete="new-password"
               {...register('confirmPassword')}
             />
 
-            <Button type="submit" className="w-full" isLoading={isLoading}>
+            <NeonButton
+              type="submit"
+              className="w-full"
+              size="lg"
+              color="purple"
+              isLoading={isLoading}
+              icon={<UserPlus 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="/login" className="link">
+              <Link
+                to="/login"
+                className="text-accent-400 hover:text-accent-300 transition-colors font-medium"
+              >
                 Войти
               </Link>
             </p>
-          </form>
-        </CardContent>
-      </Card>
+          </div>
+        </div>
+
+        {/* Decorative elements */}
+        <div className="absolute -top-4 -left-4 w-24 h-24 border border-accent-500/20 rounded-2xl -z-10" />
+        <div className="absolute -bottom-4 -right-4 w-32 h-32 border border-neon-500/20 rounded-2xl -z-10" />
+      </div>
     </div>
   )
 }