Fix UI

2025-12-17 14:53:56 +07:00
parent 332491454d
commit debdd66458
22 changed files with 853 additions and 310 deletions
--- a/frontend/src/pages/AssignmentDetailPage.tsx
+++ b/frontend/src/pages/AssignmentDetailPage.tsx
@@ -344,14 +344,13 @@ export function AssignmentDetailPage() {

      {/* Dispute button */}
      {assignment.can_dispute && !dispute && !showDisputeForm && (
-        <NeonButton
-          variant="outline"
-          className="w-full border-red-500/50 text-red-400 hover:bg-red-500/10"
+        <button
+          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-semibold transition-all duration-200 border-2 border-red-500/50 text-red-400 bg-transparent hover:bg-red-500/10 hover:border-red-500"
          onClick={() => setShowDisputeForm(true)}
-          icon={<Flag className="w-4 h-4" />}
        >
+          <Flag className="w-4 h-4" />
          Оспорить выполнение
-        </NeonButton>
+        </button>
      )}

      {/* Dispute creation form */}
--- a/frontend/src/pages/CreateMarathonPage.tsx
+++ b/frontend/src/pages/CreateMarathonPage.tsx
@@ -162,7 +162,7 @@ export function CreateMarathonPage() {
                className={`
                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
                  ${!isPublic
-                    ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
+                    ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                  }
                `}
@@ -192,7 +192,7 @@ export function CreateMarathonPage() {
                className={`
                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
                  ${isPublic
-                    ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_20px_rgba(168,85,247,0.1)]'
+                    ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                  }
                `}
@@ -230,7 +230,7 @@ export function CreateMarathonPage() {
                className={`
                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left
                  ${gameProposalMode === 'all_participants'
-                    ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
+                    ? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                  }
                `}
@@ -260,7 +260,7 @@ export function CreateMarathonPage() {
                className={`
                  relative p-4 rounded-xl border-2 transition-all duration-300 text-left
                  ${gameProposalMode === 'organizer_only'
-                    ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_20px_rgba(168,85,247,0.1)]'
+                    ? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
                    : 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
                  }
                `}
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -7,26 +7,25 @@ export function HomePage() {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)

  return (
-    <div className="-mt-8">
+    <div className="-mt-8 relative">
+      {/* Global animated background - covers entire page */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        {/* Gradient orbs */}
+        <div className="absolute top-[10%] left-[10%] w-[500px] h-[500px] bg-neon-500/20 rounded-full blur-[120px] animate-float" />
+        <div className="absolute top-[40%] right-[10%] w-[600px] h-[600px] bg-accent-500/20 rounded-full blur-[120px] animate-float" style={{ animationDelay: '-3s' }} />
+        <div className="absolute top-[60%] left-[30%] w-[700px] h-[700px] bg-pink-500/10 rounded-full blur-[150px]" />
+        <div className="absolute bottom-[10%] right-[30%] w-[400px] h-[400px] bg-neon-500/15 rounded-full blur-[100px] animate-float" style={{ animationDelay: '-1.5s' }} />
+        <div className="absolute bottom-[30%] left-[5%] w-[450px] h-[450px] bg-accent-500/15 rounded-full blur-[100px] animate-float" style={{ animationDelay: '-4.5s' }} />
+      </div>
+
      {/* Hero Section */}
      <section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
-        {/* Animated background */}
-        <div className="absolute inset-0 overflow-hidden">
-          {/* Gradient orbs */}
-          <div className="absolute top-1/4 -left-20 w-96 h-96 bg-neon-500/20 rounded-full blur-[100px] animate-float" />
-          <div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-accent-500/20 rounded-full blur-[100px] animate-float" style={{ animationDelay: '-3s' }} />
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-pink-500/10 rounded-full blur-[120px]" />
-
-          {/* Grid lines */}
-          <div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:100px_100px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,black_40%,transparent_100%)]" />
-        </div>
-
        {/* Content */}
        <div className="relative z-10 max-w-5xl mx-auto text-center px-4">
          {/* Logo */}
          <div className="flex justify-center mb-8">
            <div className="relative">
-              <Gamepad2 className="w-24 h-24 text-neon-500 animate-float drop-shadow-[0_0_30px_rgba(0,240,255,0.5)]" />
+              <Gamepad2 className="w-24 h-24 text-neon-500 animate-float drop-shadow-[0_0_20px_rgba(34,211,238,0.4)]" />
              <div className="absolute inset-0 bg-neon-500/20 blur-2xl rounded-full" />
            </div>
          </div>
@@ -77,22 +76,7 @@ export function HomePage() {
            )}
          </div>

-          {/* Stats */}
-          <div className="flex flex-wrap justify-center gap-8 mt-16">
-            <div className="text-center">
-              <div className="text-3xl font-bold text-neon-400">100+</div>
-              <div className="text-sm text-gray-500">Марафонов</div>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-accent-400">500+</div>
-              <div className="text-sm text-gray-500">Игроков</div>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-pink-400">2000+</div>
-              <div className="text-sm text-gray-500">Челленджей</div>
-            </div>
          </div>
-        </div>

        {/* Scroll indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
@@ -139,8 +123,6 @@ export function HomePage() {

      {/* How it works */}
      <section className="py-24 relative">
-        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-dark-800/50 to-transparent" />
-
        <div className="max-w-6xl mx-auto px-4 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
@@ -195,9 +177,9 @@ export function HomePage() {
                      bg-dark-800 border-2 transition-all duration-300
                      flex items-center justify-center
                      group-hover:-translate-y-2
-                      ${item.color === 'neon' ? 'border-neon-500/50 group-hover:border-neon-500 group-hover:shadow-[0_0_30px_rgba(0,240,255,0.3)]' : ''}
-                      ${item.color === 'accent' ? 'border-accent-500/50 group-hover:border-accent-500 group-hover:shadow-[0_0_30px_rgba(168,85,247,0.3)]' : ''}
-                      ${item.color === 'pink' ? 'border-pink-500/50 group-hover:border-pink-500 group-hover:shadow-[0_0_30px_rgba(236,72,153,0.3)]' : ''}
+                      ${item.color === 'neon' ? 'border-neon-500/50 group-hover:border-neon-500 group-hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]' : ''}
+                      ${item.color === 'accent' ? 'border-accent-500/50 group-hover:border-accent-500 group-hover:shadow-[0_0_20px_rgba(139,92,246,0.25)]' : ''}
+                      ${item.color === 'pink' ? 'border-pink-500/50 group-hover:border-pink-500 group-hover:shadow-[0_0_20px_rgba(244,114,182,0.25)]' : ''}
                    `}
                    style={{ animationDelay: `${index * 100}ms` }}
                  >
@@ -244,7 +226,7 @@ export function HomePage() {
                Готовы к соревнованиям?
              </h2>
              <p className="text-gray-300 mb-8 max-w-xl mx-auto">
-                Присоединяйтесь к сотням игроков, которые уже соревнуются в игровых челленджах
+                Создавайте марафоны, приглашайте друзей и соревнуйтесь в игровых челленджах
              </p>

              {isAuthenticated ? (
--- a/frontend/src/pages/LeaderboardPage.tsx
+++ b/frontend/src/pages/LeaderboardPage.tsx
@@ -209,7 +209,7 @@ export function LeaderboardPage() {
                      relative flex items-center gap-4 p-4 rounded-xl
                      transition-all duration-300 group
                      ${isCurrentUser
-                        ? 'bg-neon-500/10 border border-neon-500/30 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
+                        ? 'bg-neon-500/10 border border-neon-500/30 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
                        : `${rankConfig.bg} border ${rankConfig.border} hover:border-neon-500/20`
                      }
                    `}
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -5,8 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useAuthStore } from '@/store/auth'
 import { marathonsApi } from '@/api'
-import { NeonButton, Input } from '@/components/ui'
-import { Gamepad2, LogIn, AlertCircle } from 'lucide-react'
+import { NeonButton, Input, GlassCard } from '@/components/ui'
+import { Gamepad2, LogIn, AlertCircle, Trophy, Users, Zap, Target } from 'lucide-react'

 const loginSchema = z.object({
  login: z.string().min(3, 'Логин должен быть не менее 3 символов'),
@@ -52,6 +52,13 @@ export function LoginPage() {
    }
  }

+  const features = [
+    { icon: <Trophy className="w-5 h-5" />, text: 'Соревнуйтесь с друзьями' },
+    { icon: <Target className="w-5 h-5" />, text: 'Выполняйте челленджи' },
+    { icon: <Zap className="w-5 h-5" />, text: 'Зарабатывайте очки' },
+    { icon: <Users className="w-5 h-5" />, text: 'Создавайте марафоны' },
+  ]
+
  return (
    <div className="min-h-[80vh] flex items-center justify-center px-4 -mt-8">
      {/* Background effects */}
@@ -60,74 +67,113 @@ export function LoginPage() {
        <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" />
+      {/* Bento Grid */}
+      <div className="relative w-full max-w-4xl">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-scale-in">
+          {/* Branding Block (left) */}
+          <GlassCard className="p-8 flex flex-col justify-center relative overflow-hidden" variant="neon">
+            {/* Background decoration */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+              <div className="absolute -top-20 -left-20 w-48 h-48 bg-neon-500/20 rounded-full blur-[60px]" />
+              <div className="absolute -bottom-20 -right-20 w-48 h-48 bg-accent-500/20 rounded-full blur-[60px]" />
+            </div>
+
+            <div className="relative">
+              {/* Logo */}
+              <div className="flex justify-center md:justify-start mb-6">
+                <div className="w-20 h-20 rounded-2xl bg-neon-500/10 border border-neon-500/30 flex items-center justify-center shadow-[0_0_24px_rgba(34,211,238,0.25)]">
+                  <Gamepad2 className="w-10 h-10 text-neon-500" />
+                </div>
+              </div>
+
+              {/* Title */}
+              <h1 className="text-3xl md:text-4xl font-bold text-white mb-2 text-center md:text-left">
+                Game Marathon
+              </h1>
+              <p className="text-gray-400 mb-8 text-center md:text-left">
+                Платформа для игровых соревнований
+              </p>
+
+              {/* Features */}
+              <div className="grid grid-cols-2 gap-3">
+                {features.map((feature, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-2 p-3 rounded-xl bg-dark-700/50 border border-dark-600"
+                  >
+                    <div className="w-8 h-8 rounded-lg bg-neon-500/20 flex items-center justify-center text-neon-400">
+                      {feature.icon}
+                    </div>
+                    <span className="text-sm text-gray-300">{feature.text}</span>
+                  </div>
+                ))}
              </div>
            </div>
-            <h1 className="text-2xl font-bold text-white mb-2">Добро пожаловать!</h1>
-            <p className="text-gray-400">Войдите, чтобы продолжить</p>
-          </div>
+          </GlassCard>

-          {/* Form */}
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-            {(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>
-            )}
+          {/* Form Block (right) */}
+          <GlassCard className="p-8">
+            {/* Header */}
+            <div className="text-center mb-8">
+              <h2 className="text-2xl font-bold text-white mb-2">Добро пожаловать!</h2>
+              <p className="text-gray-400">Войдите, чтобы продолжить</p>
+            </div>

-            <Input
-              label="Логин"
-              placeholder="Введите логин"
-              error={errors.login?.message}
-              autoComplete="username"
-              {...register('login')}
-            />
+            {/* Form */}
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+              {(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>
+              )}

-            <Input
-              label="Пароль"
-              type="password"
-              placeholder="Введите пароль"
-              error={errors.password?.message}
-              autoComplete="current-password"
-              {...register('password')}
-            />
+              <Input
+                label="Логин"
+                placeholder="Введите логин"
+                error={errors.login?.message}
+                autoComplete="username"
+                {...register('login')}
+              />

-            <NeonButton
-              type="submit"
-              className="w-full"
-              size="lg"
-              isLoading={isLoading}
-              icon={<LogIn className="w-5 h-5" />}
-            >
-              Войти
-            </NeonButton>
-          </form>
+              <Input
+                label="Пароль"
+                type="password"
+                placeholder="Введите пароль"
+                error={errors.password?.message}
+                autoComplete="current-password"
+                {...register('password')}
+              />

-          {/* 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="text-neon-400 hover:text-neon-300 transition-colors font-medium"
+              <NeonButton
+                type="submit"
+                className="w-full"
+                size="lg"
+                isLoading={isLoading}
+                icon={<LogIn className="w-5 h-5" />}
              >
-                Зарегистрироваться
-              </Link>
-            </p>
-          </div>
+                Войти
+              </NeonButton>
+            </form>
+
+            {/* 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="text-neon-400 hover:text-neon-300 transition-colors font-medium"
+                >
+                  Зарегистрироваться
+                </Link>
+              </p>
+            </div>
+          </GlassCard>
        </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 className="absolute -top-4 -right-4 w-24 h-24 border border-neon-500/20 rounded-2xl -z-10 hidden md:block" />
+        <div className="absolute -bottom-4 -left-4 w-32 h-32 border border-accent-500/20 rounded-2xl -z-10 hidden md:block" />
      </div>
    </div>
  )
--- a/frontend/src/pages/MarathonPage.tsx
+++ b/frontend/src/pages/MarathonPage.tsx
@@ -189,7 +189,7 @@ export function MarathonPage() {
      <div className="relative rounded-2xl overflow-hidden mb-8">
        {/* Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-neon-500/10 via-dark-800 to-accent-500/10" />
-        <div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px]" />
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(34,211,238,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(34,211,238,0.02)_1px,transparent_1px)] bg-[size:50px_50px]" />

        <div className="relative p-8">
          <div className="flex flex-col md:flex-row justify-between items-start gap-6">
@@ -254,15 +254,14 @@ export function MarathonPage() {
              </Link>

              {marathon.status === 'active' && isOrganizer && (
-                <NeonButton
-                  variant="secondary"
+                <button
                  onClick={handleFinish}
-                  isLoading={isFinishing}
-                  icon={<Flag className="w-4 h-4" />}
-                  className="!text-yellow-400 !border-yellow-500/30 hover:!bg-yellow-500/10"
+                  disabled={isFinishing}
+                  className="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-semibold transition-all duration-200 border border-yellow-500/30 bg-dark-600 text-yellow-400 hover:bg-yellow-500/10 hover:border-yellow-500/50 disabled:opacity-50 disabled:cursor-not-allowed"
                >
+                  {isFinishing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Flag className="w-4 h-4" />}
                  Завершить
-                </NeonButton>
+                </button>
              )}

              {canDelete && (
--- a/frontend/src/pages/MarathonsPage.tsx
+++ b/frontend/src/pages/MarathonsPage.tsx
@@ -216,7 +216,7 @@ export function MarathonsPage() {
            return (
              <Link key={marathon.id} to={`/marathons/${marathon.id}`}>
                <div
-                  className="group glass rounded-xl p-5 border border-dark-600 transition-all duration-300 hover:border-neon-500/30 hover:-translate-y-0.5 hover:shadow-[0_10px_40px_rgba(0,240,255,0.1)]"
+                  className="group glass rounded-xl p-5 border border-dark-600 transition-all duration-300 hover:border-neon-500/30 hover:-translate-y-0.5 hover:shadow-[0_10px_40px_rgba(34,211,238,0.08)]"
                  style={{ animationDelay: `${index * 50}ms` }}
                >
                  <div className="flex items-center justify-between">
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -263,7 +263,7 @@ export function ProfilePage() {
              <button
                onClick={handleAvatarClick}
                disabled={isUploadingAvatar}
-                className="relative w-28 h-28 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 hover:border-neon-500 transition-all group-hover:shadow-[0_0_30px_rgba(0,240,255,0.3)]"
+                className="relative w-28 h-28 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 hover:border-neon-500 transition-all group-hover:shadow-[0_0_20px_rgba(34,211,238,0.25)]"
              >
                {displayAvatar ? (
                  <img
@@ -452,7 +452,6 @@ export function ProfilePage() {

        {!showPasswordForm ? (
          <NeonButton
-            variant="secondary"
            onClick={() => setShowPasswordForm(true)}
            icon={<KeyRound className="w-4 h-4" />}
          >
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -5,8 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { useAuthStore } from '@/store/auth'
 import { marathonsApi } from '@/api'
-import { NeonButton, Input } from '@/components/ui'
-import { Gamepad2, UserPlus, AlertCircle } from 'lucide-react'
+import { NeonButton, Input, GlassCard } from '@/components/ui'
+import { Gamepad2, UserPlus, AlertCircle, Trophy, Users, Zap, Target, Sparkles } from 'lucide-react'

 const registerSchema = z.object({
  login: z
@@ -68,99 +68,172 @@ export function RegisterPage() {
    }
  }

+  const features = [
+    { icon: <Trophy className="w-5 h-5" />, text: 'Соревнуйтесь с друзьями' },
+    { icon: <Target className="w-5 h-5" />, text: 'Выполняйте челленджи' },
+    { icon: <Zap className="w-5 h-5" />, text: 'Зарабатывайте очки' },
+    { icon: <Users className="w-5 h-5" />, text: 'Создавайте марафоны' },
+  ]
+
  return (
-    <div className="min-h-[80vh] flex items-center justify-center px-4 -mt-8">
+    <div className="min-h-[80vh] flex items-center justify-center px-4 py-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" />
+      {/* Bento Grid */}
+      <div className="relative w-full max-w-4xl">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-scale-in">
+          {/* Branding Block (left) */}
+          <GlassCard className="p-8 flex flex-col justify-center relative overflow-hidden order-2 md:order-1" variant="neon">
+            {/* Background decoration */}
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+              <div className="absolute -top-20 -left-20 w-48 h-48 bg-accent-500/20 rounded-full blur-[60px]" />
+              <div className="absolute -bottom-20 -right-20 w-48 h-48 bg-neon-500/20 rounded-full blur-[60px]" />
+            </div>
+
+            <div className="relative">
+              {/* Logo */}
+              <div className="flex justify-center md:justify-start mb-6">
+                <div className="w-20 h-20 rounded-2xl bg-accent-500/10 border border-accent-500/30 flex items-center justify-center shadow-[0_0_40px_rgba(147,51,234,0.3)]">
+                  <Gamepad2 className="w-10 h-10 text-accent-500" />
+                </div>
+              </div>
+
+              {/* Title */}
+              <h1 className="text-3xl md:text-4xl font-bold text-white mb-2 text-center md:text-left">
+                Game Marathon
+              </h1>
+              <p className="text-gray-400 mb-6 text-center md:text-left">
+                Присоединяйтесь к игровому сообществу
+              </p>
+
+              {/* Benefits */}
+              <div className="p-4 rounded-xl bg-dark-700/50 border border-dark-600 mb-6">
+                <div className="flex items-center gap-2 mb-3">
+                  <Sparkles className="w-5 h-5 text-accent-400" />
+                  <span className="text-white font-semibold">Что вас ждет:</span>
+                </div>
+                <ul className="space-y-2 text-sm text-gray-400">
+                  <li className="flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 rounded-full bg-neon-500" />
+                    Создавайте игровые марафоны
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 rounded-full bg-accent-500" />
+                    Выполняйте уникальные челленджи
+                  </li>
+                  <li className="flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 rounded-full bg-pink-500" />
+                    Соревнуйтесь за первое место
+                  </li>
+                </ul>
+              </div>
+
+              {/* Features */}
+              <div className="grid grid-cols-2 gap-3">
+                {features.map((feature, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center gap-2 p-3 rounded-xl bg-dark-700/50 border border-dark-600"
+                  >
+                    <div className="w-8 h-8 rounded-lg bg-accent-500/20 flex items-center justify-center text-accent-400">
+                      {feature.icon}
+                    </div>
+                    <span className="text-sm text-gray-300">{feature.text}</span>
+                  </div>
+                ))}
              </div>
            </div>
-            <h1 className="text-2xl font-bold text-white mb-2">Создать аккаунт</h1>
-            <p className="text-gray-400">Присоединяйтесь к игровому марафону</p>
-          </div>
+          </GlassCard>

-          {/* Form */}
-          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-            {(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>
+          {/* Form Block (right) */}
+          <GlassCard className="p-8 order-1 md:order-2">
+            {/* Header */}
+            <div className="text-center mb-6">
+              <div className="flex justify-center mb-4 md:hidden">
+                <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>
-            )}
+              <h2 className="text-2xl font-bold text-white mb-2">Создать аккаунт</h2>
+              <p className="text-gray-400">Начните играть уже сегодня</p>
+            </div>

-            <Input
-              label="Логин"
-              placeholder="Придумайте логин"
-              error={errors.login?.message}
-              autoComplete="username"
-              {...register('login')}
-            />
+            {/* Form */}
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+              {(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>
+              )}

-            <Input
-              label="Никнейм"
-              placeholder="Как вас называть?"
-              error={errors.nickname?.message}
-              {...register('nickname')}
-            />
+              <Input
+                label="Логин"
+                placeholder="Придумайте логин"
+                error={errors.login?.message}
+                autoComplete="username"
+                {...register('login')}
+              />

-            <Input
-              label="Пароль"
-              type="password"
-              placeholder="Придумайте пароль"
-              error={errors.password?.message}
-              autoComplete="new-password"
-              {...register('password')}
-            />
+              <Input
+                label="Никнейм"
+                placeholder="Как вас называть?"
+                error={errors.nickname?.message}
+                {...register('nickname')}
+              />

-            <Input
-              label="Подтвердите пароль"
-              type="password"
-              placeholder="Повторите пароль"
-              error={errors.confirmPassword?.message}
-              autoComplete="new-password"
-              {...register('confirmPassword')}
-            />
+              <Input
+                label="Пароль"
+                type="password"
+                placeholder="Придумайте пароль"
+                error={errors.password?.message}
+                autoComplete="new-password"
+                {...register('password')}
+              />

-            <NeonButton
-              type="submit"
-              className="w-full"
-              size="lg"
-              color="purple"
-              isLoading={isLoading}
-              icon={<UserPlus className="w-5 h-5" />}
-            >
-              Зарегистрироваться
-            </NeonButton>
-          </form>
+              <Input
+                label="Подтвердите пароль"
+                type="password"
+                placeholder="Повторите пароль"
+                error={errors.confirmPassword?.message}
+                autoComplete="new-password"
+                {...register('confirmPassword')}
+              />

-          {/* 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="text-accent-400 hover:text-accent-300 transition-colors font-medium"
+              <NeonButton
+                type="submit"
+                className="w-full"
+                size="lg"
+                color="purple"
+                isLoading={isLoading}
+                icon={<UserPlus className="w-5 h-5" />}
              >
-                Войти
-              </Link>
-            </p>
-          </div>
+                Зарегистрироваться
+              </NeonButton>
+            </form>
+
+            {/* 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="text-accent-400 hover:text-accent-300 transition-colors font-medium"
+                >
+                  Войти
+                </Link>
+              </p>
+            </div>
+          </GlassCard>
        </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 className="absolute -top-4 -left-4 w-24 h-24 border border-accent-500/20 rounded-2xl -z-10 hidden md:block" />
+        <div className="absolute -bottom-4 -right-4 w-32 h-32 border border-neon-500/20 rounded-2xl -z-10 hidden md:block" />
      </div>
    </div>
  )
--- a/frontend/src/pages/UserProfilePage.tsx
+++ b/frontend/src/pages/UserProfilePage.tsx
@@ -123,7 +123,7 @@ export function UserProfilePage() {
        <div className="flex items-center gap-6">
          {/* Аватар */}
          <div className="relative">
-            <div className="w-24 h-24 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 shadow-[0_0_20px_rgba(0,240,255,0.2)]">
+            <div className="w-24 h-24 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 shadow-[0_0_14px_rgba(34,211,238,0.15)]">
              {avatarBlobUrl ? (
                <img
                  src={avatarBlobUrl}