From 6c73f456b62b6f245206ae9cb7140deb50511347 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 7 Aug 2025 19:29:38 +0000
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=B2=D1=85=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=B0=20=D0=B2=20=D0=BA=D0=BE=D1=81=D0=BC=D0=B8=D1=87=D0=B5?=
 =?UTF-8?q?=D1=81=D0=BA=D0=BE=D0=BC=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Добавлен новый React-компонент CosmicLoginForm для отображения формы входа.
- Создан отдельный CSS-файл с кастомными стилями для придания компоненту неонового космического вида.
- Интегрирован новый компонент в страницу /login, заменяя стандартную форму.
- Весь текст в компоненте представлен на русском языке.
---
 frontend/src/components/CosmicLoginForm.css | 160 ++++++++++++++++++++
 frontend/src/components/CosmicLoginForm.js  |  62 ++++++++
 frontend/src/pages/auth/Login.js            |  73 +++------
 3 files changed, 243 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/components/CosmicLoginForm.css
 create mode 100644 frontend/src/components/CosmicLoginForm.js

diff --git a/frontend/src/components/CosmicLoginForm.css b/frontend/src/components/CosmicLoginForm.css
new file mode 100644
index 0000000..c1f10f9
--- /dev/null
+++ b/frontend/src/components/CosmicLoginForm.css
@@ -0,0 +1,160 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+
+:root {
+  --primary-glow: #00aaff;
+  --secondary-glow: #ff00ff;
+  --background-color: #0c0c1e;
+  --form-bg-color: rgba(20, 20, 46, 0.8);
+  --input-bg-color: #1a1a3a;
+  --text-color: #e0e0e0;
+  --border-color: rgba(0, 170, 255, 0.5);
+  --font-family: 'Orbitron', sans-serif;
+}
+
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: var(--background-color);
+  font-family: var(--font-family);
+  color: var(--text-color);
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.login-form-wrapper {
+  background-color: var(--form-bg-color);
+  padding: 40px;
+  border-radius: 15px;
+  border: 2px solid var(--border-color);
+  box-shadow: 0 0 15px var(--primary-glow), 0 0 30px var(--secondary-glow) inset;
+  width: 100%;
+  max-width: 400px;
+  backdrop-filter: blur(5px);
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+	0% {
+		transform: translatey(0px);
+	}
+	50% {
+		transform: translatey(-10px);
+	}
+	100% {
+		transform: translatey(0px);
+	}
+}
+
+.login-title {
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 2.5em;
+  font-weight: 700;
+  color: var(--primary-glow);
+  text-shadow: 0 0 5px var(--primary-glow), 0 0 10px var(--primary-glow), 0 0 15px #fff;
+  letter-spacing: 2px;
+}
+
+.input-group {
+  position: relative;
+  margin-bottom: 35px;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 10px 0;
+  font-size: 1em;
+  color: var(--text-color);
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid var(--border-color);
+  outline: none;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.input-group label {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  font-size: 1em;
+  color: rgba(224, 224, 224, 0.7);
+  pointer-events: none;
+  transition: all 0.3s ease;
+}
+
+.input-group input:focus,
+.input-group input:valid {
+    border-bottom-color: var(--primary-glow);
+    box-shadow: 0 1px 0 var(--primary-glow);
+}
+
+.input-group input:focus + label,
+.input-group input:valid + label {
+  top: -20px;
+  left: 0;
+  font-size: 0.8em;
+  color: var(--secondary-glow);
+}
+
+.login-button {
+  width: 100%;
+  padding: 12px;
+  font-size: 1.2em;
+  font-weight: 700;
+  font-family: var(--font-family);
+  color: #fff;
+  background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  box-shadow: 0 0 5px var(--primary-glow), 0 0 10px var(--secondary-glow);
+}
+
+.login-button:hover:not(:disabled) {
+  box-shadow: 0 0 10px var(--primary-glow), 0 0 20px var(--secondary-glow);
+  transform: translateY(-2px);
+}
+
+.login-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.register-link {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.register-link p {
+  margin: 0;
+  color: var(--text-color);
+}
+
+.register-link a {
+  color: var(--primary-glow);
+  text-decoration: none;
+  font-weight: 700;
+  transition: color 0.3s, text-shadow 0.3s;
+}
+
+.register-link a:hover {
+  color: var(--secondary-glow);
+  text-shadow: 0 0 5px var(--secondary-glow);
+}
+
+.error-message {
+  color: #ff4d4d;
+  background-color: rgba(255, 77, 77, 0.1);
+  border: 1px solid #ff4d4d;
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  text-align: center;
+  font-size: 0.9em;
+  text-shadow: none;
+}
diff --git a/frontend/src/components/CosmicLoginForm.js b/frontend/src/components/CosmicLoginForm.js
new file mode 100644
index 0000000..c790e6d
--- /dev/null
+++ b/frontend/src/components/CosmicLoginForm.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './CosmicLoginForm.css';
+
+const CosmicLoginForm = ({
+  email,
+  setEmail,
+  password,
+  setPassword,
+  handleSubmit,
+  isSubmitting,
+  error,
+}) => {
+  return (
+    <div className="login-container">
+      <div className="login-form-wrapper">
+        <h2 className="login-title">Вход в систему</h2>
+        {error && <div className="error-message">{error}</div>}
+
+        <form onSubmit={handleSubmit} className="login-form">
+          <div className="input-group">
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <label htmlFor="email">Электронная почта</label>
+          </div>
+
+          <div className="input-group">
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+            <label htmlFor="password">Пароль</label>
+          </div>
+
+          <button
+            type="submit"
+            className="login-button"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Вход...' : 'Войти'}
+          </button>
+        </form>
+
+        <div className="register-link">
+          <p>
+            Еще нет аккаунта? <Link to="/register">Зарегистрируйтесь</Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CosmicLoginForm;
diff --git a/frontend/src/pages/auth/Login.js b/frontend/src/pages/auth/Login.js
index 3d78a0b..3e44587 100644
--- a/frontend/src/pages/auth/Login.js
+++ b/frontend/src/pages/auth/Login.js
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { useNavigate, useLocation, Link } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
-import { Container, Form, Button, Alert, Card } from 'react-bootstrap';
+import CosmicLoginForm from '../../components/CosmicLoginForm';
+import StarBackground from '../../components/StarBackground';
 
 const Login = () => {
   const [email, setEmail] = useState('');
@@ -11,70 +12,38 @@ const Login = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const from = location.state?.from?.pathname || '/';
+  // Определяем, откуда пришел пользователь, чтобы вернуть его обратно после логина
+  const from = location.state?.from?.pathname || '/lessons';
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    if (isSubmitting) return;
     setIsSubmitting(true);
     
     try {
       await login(email, password);
+      // После успешного входа перенаправляем пользователя
       navigate(from, { replace: true });
-    } catch (error) {
-      console.error('Login failed:', error);
+    } catch (err) {
+      // Ошибка будет обработана и отображена через `error` из useAuth
+      console.error('Login failed:', err);
     } finally {
       setIsSubmitting(false);
     }
   };
 
   return (
-    <Container className="d-flex justify-content-center align-items-center" style={{ minHeight: '80vh' }}>
-      <Card className="w-100" style={{ maxWidth: '400px' }}>
-        <Card.Body>
-          <h2 className="text-center mb-4">Вход</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          
-          <Form onSubmit={handleSubmit}>
-            <Form.Group className="mb-3" controlId="formBasicEmail">
-              <Form.Label>Email</Form.Label>
-              <Form.Control 
-                type="email" 
-                placeholder="Введите email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </Form.Group>
-
-            <Form.Group className="mb-3" controlId="formBasicPassword">
-              <Form.Label>Пароль</Form.Label>
-              <Form.Control 
-                type="password" 
-                placeholder="Пароль"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-            </Form.Group>
-
-            <Button 
-              variant="primary" 
-              type="submit" 
-              className="w-100"
-              disabled={isSubmitting}
-            >
-              {isSubmitting ? 'Вход...' : 'Войти'}
-            </Button>
-          </Form>
-          
-          <div className="text-center mt-3">
-            <p>
-              Нет аккаунта? <Link to="/register">Зарегистрируйтесь</Link>
-            </p>
-          </div>
-        </Card.Body>
-      </Card>
-    </Container>
+    <StarBackground>
+      <CosmicLoginForm
+        email={email}
+        setEmail={setEmail}
+        password={password}
+        setPassword={setPassword}
+        handleSubmit={handleSubmit}
+        isSubmitting={isSubmitting}
+        error={error}
+      />
+    </StarBackground>
   );
 };
 

From 76569471c088ca875bf5e6a550fa84f006af7490 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 7 Aug 2025 19:41:48 +0000
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D1=80=D0=B5=D0=B3=D0=B8?=
 =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B2=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D1=81=D0=BC=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=BE=D0=BC=20?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Добавлен новый React-компонент CosmicRegisterForm для отображения формы регистрации.
- Компонент использует существующие стили CosmicLoginForm.css для сохранения единого внешнего вида.
- Интегрирован новый компонент в страницу /register.
- Весь текст в компоненте представлен на русском языке.
---
 frontend/src/components/CosmicRegisterForm.js | 75 +++++++++++++++
 frontend/src/pages/auth/Register.js           | 93 ++++++-------------
 2 files changed, 101 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/components/CosmicRegisterForm.js

diff --git a/frontend/src/components/CosmicRegisterForm.js b/frontend/src/components/CosmicRegisterForm.js
new file mode 100644
index 0000000..5c119f1
--- /dev/null
+++ b/frontend/src/components/CosmicRegisterForm.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './CosmicLoginForm.css'; // Reusing the same CSS
+
+const CosmicRegisterForm = ({
+  email,
+  setEmail,
+  password,
+  setPassword,
+  confirmPassword,
+  setConfirmPassword,
+  handleSubmit,
+  isSubmitting,
+  error,
+}) => {
+  return (
+    <div className="login-container">
+      <div className="login-form-wrapper">
+        <h2 className="login-title">Регистрация</h2>
+        {error && <div className="error-message">{error}</div>}
+
+        <form onSubmit={handleSubmit} className="login-form">
+          <div className="input-group">
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+            <label htmlFor="email">Электронная почта</label>
+          </div>
+
+          <div className="input-group">
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+            <label htmlFor="password">Пароль</label>
+          </div>
+
+          <div className="input-group">
+            <input
+              type="password"
+              id="confirmPassword"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+            />
+            <label htmlFor="confirmPassword">Подтвердите пароль</label>
+          </div>
+
+          <button
+            type="submit"
+            className="login-button"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? 'Регистрация...' : 'Зарегистрироваться'}
+          </button>
+        </form>
+
+        <div className="register-link">
+          <p>
+            Уже есть аккаунт? <Link to="/login">Войдите</Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CosmicRegisterForm;
diff --git a/frontend/src/pages/auth/Register.js b/frontend/src/pages/auth/Register.js
index fd63618..08f75a1 100644
--- a/frontend/src/pages/auth/Register.js
+++ b/frontend/src/pages/auth/Register.js
@@ -1,101 +1,60 @@
 import React, { useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
-import { Container, Form, Button, Alert, Card } from 'react-bootstrap';
+import CosmicRegisterForm from '../../components/CosmicRegisterForm';
+import StarBackground from '../../components/StarBackground';
 
 const Register = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState('');
-  const { register } = useAuth();
+
+  // The error from useAuth is for login/register API calls,
+  // let's use a local error state for client-side validation like password mismatch.
+  const [formError, setFormError] = useState('');
+  const { register, error: authError } = useAuth();
   const navigate = useNavigate();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     
     if (password !== confirmPassword) {
-      return setError("Пароли не совпадают");
+      return setFormError("Пароли не совпадают");
     }
     
     if (password.length < 6) {
-      return setError("Пароль должен содержать минимум 6 символов");
+      return setFormError("Пароль должен содержать минимум 6 символов");
     }
     
     setIsSubmitting(true);
-    setError('');
+    setFormError('');
     
     try {
       await register(email, password);
-      navigate('/');
+      navigate('/lessons'); // Redirect to lessons after successful registration
     } catch (error) {
+      // The authError from useAuth will be displayed in the form
       console.error('Registration failed:', error);
-      setError(error.message || 'Ошибка при регистрации');
     } finally {
       setIsSubmitting(false);
     }
   };
 
   return (
-    <Container className="d-flex justify-content-center align-items-center" style={{ minHeight: '80vh' }}>
-      <Card className="w-100" style={{ maxWidth: '400px' }}>
-        <Card.Body>
-          <h2 className="text-center mb-4">Регистрация</h2>
-          {error && <Alert variant="danger">{error}</Alert>}
-          
-          <Form onSubmit={handleSubmit}>
-            <Form.Group className="mb-3" controlId="formBasicEmail">
-              <Form.Label>Email</Form.Label>
-              <Form.Control 
-                type="email" 
-                placeholder="Введите email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </Form.Group>
-
-            <Form.Group className="mb-3" controlId="formBasicPassword">
-              <Form.Label>Пароль</Form.Label>
-              <Form.Control 
-                type="password" 
-                placeholder="Пароль (минимум 6 символов)"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-            </Form.Group>
-
-            <Form.Group className="mb-3" controlId="formBasicConfirmPassword">
-              <Form.Label>Подтвердите пароль</Form.Label>
-              <Form.Control 
-                type="password" 
-                placeholder="Подтвердите пароль"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                required
-              />
-            </Form.Group>
-
-            <Button 
-              variant="primary" 
-              type="submit" 
-              className="w-100"
-              disabled={isSubmitting}
-            >
-              {isSubmitting ? 'Регистрация...' : 'Зарегистрироваться'}
-            </Button>
-          </Form>
-          
-          <div className="text-center mt-3">
-            <p>
-              Уже есть аккаунт? <Link to="/login">Войдите</Link>
-            </p>
-          </div>
-        </Card.Body>
-      </Card>
-    </Container>
+    <StarBackground>
+      <CosmicRegisterForm
+        email={email}
+        setEmail={setEmail}
+        password={password}
+        setPassword={setPassword}
+        confirmPassword={confirmPassword}
+        setConfirmPassword={setConfirmPassword}
+        handleSubmit={handleSubmit}
+        isSubmitting={isSubmitting}
+        error={formError || authError} // Display client-side or server-side errors
+      />
+    </StarBackground>
   );
 };
 

From 47640dfac0af8a47f5e794ca42c9c099a421eaaf Mon Sep 17 00:00:00 2001
From: Lins <alina.cheremiskina@gmail.com>
Date: Sat, 9 Aug 2025 12:09:13 +0300
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B8=20=D1=83?=
 =?UTF-8?q?=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B8=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Обновлен README.md с новыми разделами о технологическом стеке и особенностях проекта.
- Добавлены ссылки на документацию по фронтенду, компонентам и дизайн-системе.
- Реализованы анимации с использованием Framer Motion в компонентах CosmicLoginForm и CosmicRegisterForm.
- Обновлены стили и структура компонентов для улучшения пользовательского интерфейса.
- Оптимизирована навигация и добавлены новые элементы дизайна для космической тематики.
---
 CHANGELOG.md                                  |  81 +++
 README.md                                     | 146 ++++-
 docs/COMPONENTS.md                            | 457 +++++++++++++++
 docs/DESIGN_SYSTEM.md                         | 539 ++++++++++++++++++
 docs/FRONTEND.md                              | 399 +++++++++++--
 docs/README.md                                | 273 +++++++--
 frontend/package-lock.json                    | 378 ++----------
 frontend/package.json                         |   7 +-
 frontend/src/App.js                           | 128 +++--
 frontend/src/components/CosmicLoginForm.js    | 134 +++--
 frontend/src/components/CosmicRegisterForm.js | 147 +++--
 frontend/src/components/Footer.js             |  18 +-
 frontend/src/components/LessonsList.js        |  86 ++-
 .../components/layout/CosmicNavigation.jsx    | 231 ++++++++
 frontend/src/components/ui/Button.jsx         |  51 ++
 frontend/src/components/ui/Card.jsx           |  44 ++
 frontend/src/components/ui/Input.jsx          |  70 +++
 frontend/src/components/ui/Loading.jsx        |  64 +++
 frontend/src/components/ui/index.js           |   4 +
 frontend/src/index.js                         |   2 +-
 frontend/src/pages/Home/index.js              | 168 +++---
 frontend/src/pages/Lessons/index.js           |  82 ++-
 frontend/src/styles/globals.css               | 217 +++++++
 frontend/tailwind.config.js                   |  81 +++
 24 files changed, 3120 insertions(+), 687 deletions(-)
 create mode 100644 CHANGELOG.md
 create mode 100644 docs/COMPONENTS.md
 create mode 100644 docs/DESIGN_SYSTEM.md
 create mode 100644 frontend/src/components/layout/CosmicNavigation.jsx
 create mode 100644 frontend/src/components/ui/Button.jsx
 create mode 100644 frontend/src/components/ui/Card.jsx
 create mode 100644 frontend/src/components/ui/Input.jsx
 create mode 100644 frontend/src/components/ui/Loading.jsx
 create mode 100644 frontend/src/components/ui/index.js
 create mode 100644 frontend/src/styles/globals.css
 create mode 100644 frontend/tailwind.config.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..af41179
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,81 @@
+# 📝 Changelog
+
+Все важные изменения в проекте Space SQL документируются в этом файле.
+
+Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.0.0/),
+и проект следует [семантическому версионированию](https://semver.org/lang/ru/).
+
+## [Unreleased]
+
+### Планируется
+- 🔄 Система прогресса пользователей
+- 🏆 Достижения и бейджи
+- 📊 Аналитика выполнения заданий
+- 🌍 Интернационализация (i18n)
+- 🔍 Поиск по урокам
+
+## [2.0.0] - 2025-01-09
+
+### ✨ Добавлено
+- 🎨 **Полный рефакторинг фронтенда** с единой дизайн-системой
+- 🌌 **Космическая тема** с анимированными звездами и эффектами
+- 🎭 **Framer Motion** для плавных анимаций и переходов
+- 🎨 **Tailwind CSS** с кастомной конфигурацией
+- 🧩 **Система UI компонентов**: Button, Card, Input, Loading
+- 🚀 **CosmicNavigation** - новая навигация в космическом стиле
+- ⚡ **Page Transitions** - анимированные переходы между страницами
+- 📱 **Полная адаптивность** для всех устройств
+- 📚 **Обновленная документация** с дизайн-системой
+
+### 🔄 Изменено
+- 🏠 **Главная страница** - новый дизайн с hero секцией
+- 🔐 **Формы аутентификации** - космический стиль с анимациями
+- 📚 **Страница уроков** - карточки с hover эффектами
+- ⚡ **Практические задания** - улучшенный интерфейс
+- 🎯 **Состояния загрузки** - единые компоненты Loading
+
+### ❌ Удалено
+- 🗑️ **Bootstrap** зависимости полностью удалены
+- 🗑️ **Старые стили** заменены на Tailwind
+- 🗑️ **Inline стили** заменены на компоненты
+
+### 🐛 Исправлено
+- ✅ Консистентность дизайна на всех страницах
+- ✅ Производительность анимаций
+- ✅ Адаптивность на мобильных устройствах
+- ✅ Доступность компонентов
+
+## [1.0.0] - 2024-12-15
+
+### ✨ Добавлено
+- 🚀 Первый релиз Space SQL
+- ⚛️ React 18 фронтенд
+- ☕ Spring Boot 3 бэкенд
+- 🗄️ PostgreSQL база данных
+- 🔐 JWT аутентификация
+- 📚 Система уроков
+- ⚡ Практические задания
+- 🎯 Проверка SQL запросов
+
+### 🛠️ Техническое
+- 📡 REST API с Swagger документацией
+- 🗄️ Liquibase для миграций БД
+- 🔒 Spring Security конфигурация
+- 📝 Базовая документация
+
+---
+
+## Типы изменений
+
+- ✨ **Добавлено** - новые возможности
+- 🔄 **Изменено** - изменения в существующей функциональности
+- 🗑️ **Устарело** - функции, которые скоро будут удалены
+- ❌ **Удалено** - удаленные функции
+- 🐛 **Исправлено** - исправления ошибок
+- 🔒 **Безопасность** - уязвимости
+
+## Ссылки
+
+- [Unreleased]: https://github.com/your-username/space-sql/compare/v2.0.0...HEAD
+- [2.0.0]: https://github.com/your-username/space-sql/compare/v1.0.0...v2.0.0
+- [1.0.0]: https://github.com/your-username/space-sql/releases/tag/v1.0.0
diff --git a/README.md b/README.md
index f405a4d..f75391c 100644
--- a/README.md
+++ b/README.md
@@ -2,27 +2,44 @@
 
 <div align="center">
   <h1>🚀 Space SQL</h1>
-  <p>Интерактивная платформа для изучения SQL в игровой форме</p>
+  <p><em>Интерактивная платформа для изучения SQL в космическом стиле</em></p>
   
   [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
   [![Java](https://img.shields.io/badge/Java-17%2B-orange.svg)](https://java.com/)
   [![Spring Boot](https://img.shields.io/badge/Spring%20Boot-3.x-6DB33F.svg)](https://spring.io/projects/spring-boot)
   [![React](https://img.shields.io/badge/React-18.x-61DAFB.svg)](https://reactjs.org/)
+  [![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.x-38B2AC.svg)](https://tailwindcss.com/)
+  [![Framer Motion](https://img.shields.io/badge/Framer%20Motion-10.x-FF0055.svg)](https://www.framer.com/motion/)
 
-  [Документация](docs/README.md) | [Установка](#установка) | [Разработка](#разработка) | [Лицензия](#лицензия)
+  [📚 Документация](docs/README.md) | [⚡ Быстрый старт](#быстрый-старт) | [🎨 Дизайн-система](docs/DESIGN_SYSTEM.md) | [🧩 Компоненты](docs/COMPONENTS.md)
 </div>
 
 ## 📋 О проекте
 
-Space SQL - это интерактивная образовательная платформа, которая помогает изучить SQL в увлекательной игровой форме. Проект разработан для пользователей, которые хотят освоить основы SQL и улучшить свои навыки работы с базами данных.
+Space SQL - это современная интерактивная образовательная платформа с космической тематикой для изучения SQL. Проект сочетает в себе мощный бэкенд на Spring Boot и красивый фронтенд на React с анимациями и космическим дизайном.
 
-### 🎯 Основные возможности
+### ✨ Особенности
 
-- 📚 Интерактивные уроки по SQL
-- 🎯 Практические задания с автоматической проверкой
-- 🏆 Система достижений и прогресса
-- 👥 Профили пользователей
-- 🔐 Безопасная аутентификация
+- 🌌 **Космический дизайн** - уникальная тематика с анимированными звездами и плавными переходами
+- 📚 **Интерактивные уроки** - пошаговое изучение SQL от основ до продвинутых тем
+- ⚡ **Практические задания** - реальные задачи с автоматической проверкой SQL запросов
+- 🎭 **Современный UI** - кастомная дизайн-система на Tailwind CSS и Framer Motion
+- 🔐 **Безопасная аутентификация** - JWT токены и защищенные API endpoints
+- 📱 **Адаптивность** - полная поддержка мобильных устройств и планшетов
+
+### 🛠️ Технологический стек
+
+**Backend:**
+- ☕ Java 17 + Spring Boot 3.x
+- 🗄️ PostgreSQL + Liquibase
+- 🔒 Spring Security + JWT
+- 📡 REST API + Swagger
+
+**Frontend:**
+- ⚛️ React 18 + React Router
+- 🎨 Tailwind CSS + кастомная дизайн-система
+- 🎭 Framer Motion для анимаций
+- 📡 Axios для API запросов
 
 ## 🚀 Быстрый старт
 
@@ -62,23 +79,40 @@ Space SQL - это интерактивная образовательная п
 
 ## 🛠️ Разработка
 
-### Структура проекта
+### 📁 Структура проекта
 
 ```
 space-sql/
-├── backend/             # Бэкенд на Spring Boot
-│   ├── src/            # Исходный код
-│   ├── pom.xml         # Maven конфигурация
-│   └── ...
-├── frontend/           # Фронтенд на React
-│   ├── public/         # Статические файлы
-│   ├── src/            # Исходный код React
-│   └── ...
-├── docs/               # Документация
-│   ├── api/            # API документация
-│   ├── guides/         # Руководства
-│   └── ...
-└── README.md           # Этот файл
+├── src/                    # Backend (Spring Boot)
+│   ├── main/java/com/spacesql/
+│   │   ├── controller/     # REST контроллеры
+│   │   ├── service/        # Бизнес-логика
+│   │   ├── repository/     # Data Access Layer
+│   │   ├── entity/         # JPA сущности
+│   │   ├── dto/           # Data Transfer Objects
+│   │   ├── config/        # Конфигурация Spring
+│   │   └── security/      # Безопасность и JWT
+│   └── main/resources/
+│       ├── db/changelog/   # Liquibase миграции
+│       └── application.properties
+├── frontend/              # Frontend (React)
+│   ├── src/
+│   │   ├── components/    # React компоненты
+│   │   │   ├── ui/       # Базовые UI компоненты
+│   │   │   └── layout/   # Компоненты макета
+│   │   ├── pages/        # Страницы приложения
+│   │   ├── contexts/     # React контексты
+│   │   ├── services/     # API сервисы
+│   │   └── styles/       # Стили и дизайн-система
+│   ├── tailwind.config.js # Конфигурация Tailwind
+│   └── package.json
+├── docs/                 # Документация
+│   ├── FRONTEND.md       # Документация фронтенда
+│   ├── COMPONENTS.md     # Документация компонентов
+│   ├── DESIGN_SYSTEM.md  # Дизайн-система
+│   └── api/             # API документация
+├── pom.xml              # Maven конфигурация
+└── README.md            # Этот файл
 ```
 
 ### Сборка
@@ -111,11 +145,71 @@ npm test
 
 ## 📚 Документация
 
-Подробная документация доступна в [документации проекта](docs/README.md).
+### 📖 Полная документация
+
+| Документ | Описание |
+|----------|----------|
+| [📚 Фронтенд](docs/FRONTEND.md) | Подробная документация по React приложению |
+| [🧩 Компоненты](docs/COMPONENTS.md) | Описание всех UI компонентов и их API |
+| [🎨 Дизайн-система](docs/DESIGN_SYSTEM.md) | Космическая дизайн-система и стили |
+| [📡 API](docs/api/SPECIFICATION.md) | Спецификация REST API |
+| [🗄️ База данных](docs/architecture/database.md) | Схема и архитектура БД |
+
+### 🚀 Скриншоты
+
+<details>
+<summary>🏠 Главная страница</summary>
+
+*Космическая главная страница с анимированным фоном и hero секцией*
+
+</details>
+
+<details>
+<summary>🔐 Аутентификация</summary>
+
+*Красивые формы входа и регистрации с космическими эффектами*
+
+</details>
+
+<details>
+<summary>📚 Уроки</summary>
+
+*Интерактивные карточки уроков с hover эффектами*
+
+</details>
+
+<details>
+<summary>⚡ Практика</summary>
+
+*SQL редактор с подсветкой синтаксиса и проверкой запросов*
+
+</details>
+
+## 🤝 Участие в разработке
+
+Мы приветствуем вклад в проект! 
+
+### 🛠️ Как начать разработку
+
+1. Форкните репозиторий
+2. Создайте ветку для новой функции (`git checkout -b feature/amazing-feature`)
+3. Следуйте [стандартам кодирования](#стандарты-кодирования)
+4. Убедитесь, что все тесты проходят
+5. Создайте Pull Request
+
+### 📋 Стандарты кодирования
 
-## 🤝 Участие
+**Frontend:**
+- Используйте функциональные компоненты с хуками
+- Следуйте космической дизайн-системе
+- Добавляйте анимации с Framer Motion
+- Тестируйте на всех устройствах
 
-Вклады приветствуются! Пожалуйста, прочитайте [руководство по участию](CONTRIBUTING.md) для получения подробной информации о процессе отправки запросов на включение.
+**Backend:**
+- Следуйте принципам SOLID
+- Используйте Spring Boot best practices  
+- Покрывайте код тестами
+- Документируйте API с помощью Swagger
 
 ## 📄 Лицензия
 
diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md
new file mode 100644
index 0000000..d6fa687
--- /dev/null
+++ b/docs/COMPONENTS.md
@@ -0,0 +1,457 @@
+# 🧩 Документация по компонентам Space SQL
+
+## Обзор
+
+Этот документ описывает все компоненты, используемые в приложении Space SQL, их API, примеры использования и лучшие практики.
+
+## 🎨 UI Компоненты
+
+### Button
+
+Универсальная кнопка с космической тематикой и анимациями.
+
+#### Props
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `children` | `ReactNode` | - | Содержимое кнопки |
+| `variant` | `'primary' \| 'secondary' \| 'danger' \| 'ghost'` | `'primary'` | Вариант стиля |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Размер кнопки |
+| `disabled` | `boolean` | `false` | Отключена ли кнопка |
+| `loading` | `boolean` | `false` | Показывать ли спиннер загрузки |
+| `onClick` | `() => void` | - | Обработчик клика |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Тип кнопки |
+
+#### Примеры использования
+
+```jsx
+import { Button } from './components/ui';
+
+// Основная кнопка
+<Button variant="primary" size="large">
+  Начать обучение
+</Button>
+
+// Кнопка с загрузкой
+<Button loading={isSubmitting} disabled={isSubmitting}>
+  {isSubmitting ? 'Отправка...' : 'Отправить'}
+</Button>
+
+// Кнопка-призрак
+<Button variant="ghost" onClick={handleCancel}>
+  Отмена
+</Button>
+```
+
+### Card
+
+Карточка с эффектами hover и glow для отображения контента.
+
+#### Props
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `children` | `ReactNode` | - | Содержимое карточки |
+| `hover` | `boolean` | `true` | Включить hover эффекты |
+| `glow` | `boolean` | `false` | Добавить эффект свечения |
+| `onClick` | `() => void` | - | Обработчик клика |
+| `className` | `string` | `''` | Дополнительные CSS классы |
+
+#### Примеры использования
+
+```jsx
+import { Card } from './components/ui';
+
+// Простая карточка
+<Card>
+  <h3>Заголовок</h3>
+  <p>Описание карточки</p>
+</Card>
+
+// Интерактивная карточка с эффектами
+<Card hover={true} glow={true} onClick={handleClick}>
+  <div className="p-4">
+    <h3>Кликабельная карточка</h3>
+  </div>
+</Card>
+
+// Карточка урока
+<Card className="h-full">
+  <div className="flex flex-col justify-between h-full">
+    <div>
+      <h3>Урок 1: Основы SQL</h3>
+      <p>Изучите основы языка запросов</p>
+    </div>
+    <Button variant="secondary">Начать урок</Button>
+  </div>
+</Card>
+```
+
+### Input
+
+Поле ввода с анимированными лейблами и валидацией.
+
+#### Props
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `label` | `string` | - | Лейбл поля |
+| `type` | `string` | `'text'` | Тип input |
+| `value` | `string` | - | Значение |
+| `onChange` | `(e: ChangeEvent) => void` | - | Обработчик изменения |
+| `placeholder` | `string` | - | Плейсхолдер |
+| `error` | `string` | - | Текст ошибки |
+| `disabled` | `boolean` | `false` | Отключено ли поле |
+| `required` | `boolean` | `false` | Обязательное ли поле |
+
+#### Примеры использования
+
+```jsx
+import { Input } from './components/ui';
+
+// Простое поле
+<Input
+  label="Email"
+  type="email"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+  required
+/>
+
+// Поле с ошибкой
+<Input
+  label="Пароль"
+  type="password"
+  value={password}
+  onChange={(e) => setPassword(e.target.value)}
+  error={passwordError}
+  required
+/>
+
+// Отключенное поле
+<Input
+  label="Имя пользователя"
+  value={username}
+  disabled={true}
+/>
+```
+
+### Loading
+
+Компонент загрузки с космическим спиннером.
+
+#### Props
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `message` | `string` | `'Загрузка...'` | Текст сообщения |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Размер спиннера |
+| `className` | `string` | `''` | Дополнительные CSS классы |
+
+#### Примеры использования
+
+```jsx
+import { Loading } from './components/ui';
+
+// Простая загрузка
+<Loading />
+
+// Кастомное сообщение
+<Loading message="Загрузка уроков..." size="large" />
+
+// Встроенная загрузка
+<div className="min-h-screen flex items-center justify-center">
+  <Loading message="Подготовка космического путешествия..." />
+</div>
+```
+
+## 🏗 Layout Компоненты
+
+### CosmicNavigation
+
+Главная навигация приложения с поддержкой мобильных устройств.
+
+#### Особенности
+- Адаптивный дизайн
+- Интеграция с системой аутентификации
+- Анимированные переходы
+- Мобильное меню
+
+#### Примеры использования
+
+```jsx
+import CosmicNavigation from './components/layout/CosmicNavigation';
+
+// Использование в App.js
+<CosmicNavigation />
+```
+
+### StarBackground
+
+Анимированный звездный фон с параллакс эффектами.
+
+#### Props
+
+| Prop | Тип | По умолчанию | Описание |
+|------|-----|--------------|----------|
+| `children` | `ReactNode` | - | Дочерние элементы |
+| `isMainPage` | `boolean` | `true` | Главная страница или нет |
+
+#### Примеры использования
+
+```jsx
+import StarBackground from './components/StarBackground';
+
+// Для главной страницы
+<StarBackground isMainPage={true}>
+  <HomePage />
+</StarBackground>
+
+// Для внутренних страниц
+<StarBackground isMainPage={false}>
+  <LessonsPage />
+</StarBackground>
+```
+
+## 📄 Page Компоненты
+
+### Home
+
+Главная страница с hero секцией.
+
+#### Особенности
+- Анимированное появление контента
+- Адаптивный дизайн
+- Интеграция с аутентификацией
+
+### Login/Register
+
+Страницы аутентификации с космическими формами.
+
+#### Особенности
+- Анимированные формы
+- Валидация в реальном времени
+- Обработка ошибок
+
+### Lessons
+
+Страница со списком уроков.
+
+#### Особенности
+- Сетка уроков с анимациями
+- Состояния загрузки и ошибок
+- Фильтрация и поиск
+
+### Practice
+
+Страница с практическими заданиями.
+
+#### Особенности
+- Интерактивный SQL редактор
+- Проверка запросов
+- Система подсказок
+
+## 🎭 Анимационные паттерны
+
+### Page Transitions
+
+```jsx
+const PageTransition = ({ children }) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    exit={{ opacity: 0, y: -20 }}
+    transition={{ duration: 0.3 }}
+  >
+    {children}
+  </motion.div>
+);
+```
+
+### Stagger Children
+
+```jsx
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1
+    }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    transition: { duration: 0.5 }
+  }
+};
+```
+
+### Hover Effects
+
+```jsx
+const hoverVariants = {
+  hover: {
+    scale: 1.05,
+    y: -5,
+    transition: { type: 'spring', stiffness: 300 }
+  }
+};
+```
+
+## 🔧 Utility Компоненты
+
+### ProtectedRoute
+
+Компонент для защиты приватных роутов.
+
+```jsx
+import ProtectedRoute from './components/common/ProtectedRoute';
+
+<ProtectedRoute>
+  <PrivatePage />
+</ProtectedRoute>
+```
+
+## 🎨 Стилевые компоненты
+
+### CSS Utility классы
+
+```css
+/* Кнопки */
+.cosmic-button
+.cosmic-button:hover
+
+/* Карточки */
+.cosmic-card
+.cosmic-card:hover
+
+/* Инпуты */
+.cosmic-input
+.cosmic-input:focus
+
+/* Текст */
+.cosmic-title
+.glow-text
+
+/* Анимации */
+.animate-float
+.animate-twinkle
+.loading-spinner
+```
+
+## 📱 Адаптивность
+
+### Рекомендации по использованию
+
+```jsx
+// Адаптивные сетки
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+
+// Адаптивный текст
+<h1 className="text-3xl lg:text-5xl">
+
+// Скрытие на мобильных
+<div className="hidden md:block">
+
+// Показ только на мобильных
+<div className="block md:hidden">
+```
+
+## 🧪 Тестирование компонентов
+
+### Примеры тестов
+
+```jsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './components/ui';
+
+test('кнопка отображается с правильным текстом', () => {
+  render(<Button>Тест</Button>);
+  expect(screen.getByText('Тест')).toBeInTheDocument();
+});
+
+test('кнопка вызывает onClick при клике', () => {
+  const handleClick = jest.fn();
+  render(<Button onClick={handleClick}>Клик</Button>);
+  
+  fireEvent.click(screen.getByText('Клик'));
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+```
+
+## 🚀 Производительность
+
+### Оптимизация компонентов
+
+```jsx
+import React, { memo, useMemo, useCallback } from 'react';
+
+// Мемоизация компонента
+const ExpensiveComponent = memo(({ data }) => {
+  const processedData = useMemo(() => {
+    return data.map(item => ({ ...item, processed: true }));
+  }, [data]);
+
+  return <div>{/* рендер */}</div>;
+});
+
+// Мемоизация колбэков
+const ParentComponent = () => {
+  const handleClick = useCallback(() => {
+    // обработка клика
+  }, []);
+
+  return <ChildComponent onClick={handleClick} />;
+};
+```
+
+## 🎯 Лучшие практики
+
+### Создание новых компонентов
+
+1. **Структура файла:**
+```jsx
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const MyComponent = ({ prop1, prop2, ...props }) => {
+  // логика компонента
+  
+  return (
+    <motion.div {...props}>
+      {/* JSX */}
+    </motion.div>
+  );
+};
+
+export default MyComponent;
+```
+
+2. **PropTypes или TypeScript:**
+```jsx
+import PropTypes from 'prop-types';
+
+MyComponent.propTypes = {
+  prop1: PropTypes.string.isRequired,
+  prop2: PropTypes.number
+};
+```
+
+3. **Стилизация:**
+- Используйте Tailwind классы
+- Следуйте космической цветовой схеме
+- Добавляйте hover эффекты
+
+4. **Анимации:**
+- Используйте Framer Motion
+- Применяйте consistent timing
+- Тестируйте на мобильных
+
+---
+
+*Документация обновляется по мере добавления новых компонентов*
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
new file mode 100644
index 0000000..235eda9
--- /dev/null
+++ b/docs/DESIGN_SYSTEM.md
@@ -0,0 +1,539 @@
+# 🎨 Space SQL Design System
+
+## Обзор
+
+Space SQL использует кастомную дизайн-систему с космической тематикой, построенную на основе Tailwind CSS и дополненную уникальными компонентами и анимациями.
+
+## 🌌 Философия дизайна
+
+### Принципы
+- **Космическая тематика** - все элементы вдохновлены космосом
+- **Плавные анимации** - создание ощущения невесомости
+- **Интуитивность** - простота использования несмотря на сложную тематику
+- **Консистентность** - единообразие во всех компонентах
+
+### Целевая аудитория
+- Разработчики, изучающие SQL
+- Студенты компьютерных наук
+- Энтузиасты космической тематики
+
+## 🎨 Цветовая палитра
+
+### Основные цвета
+
+```css
+/* Космический фон */
+--space-dark: #0d0221      /* Глубокий космос */
+--space-purple: #2d0b59    /* Темно-фиолетовый */
+--space-deep: #0f0c29      /* Космическая глубина */
+--space-medium: #302b63    /* Средний космос */
+--space-light: #24243e     /* Светлый космос */
+```
+
+### Акцентные цвета
+
+```css
+/* Неоновые акценты */
+--cosmic-blue: #2de2e6     /* Электрический голубой */
+--cosmic-purple: #8a2be2   /* Магический фиолетовый */
+--cosmic-pink: #ff2e88     /* Космический розовый */
+--cosmic-green: #00ff9d    /* Матричный зеленый */
+--cosmic-cyan: #00aaff     /* Киберпанк голубой */
+--cosmic-magenta: #ff00ff  /* Неоновый пурпур */
+```
+
+### Текстовые цвета
+
+```css
+--starlight: #ffffff       /* Звездный белый */
+--text-muted: #b8b8b8     /* Приглушенный текст */
+```
+
+### Использование в Tailwind
+
+```jsx
+// Фоны
+<div className="bg-space-dark">
+<div className="bg-cosmic-purple">
+
+// Текст
+<h1 className="text-cosmic-blue">
+<p className="text-starlight">
+
+// Границы
+<div className="border-cosmic-purple">
+```
+
+## 🎭 Градиенты
+
+### Основные градиенты
+
+```css
+/* Космические градиенты */
+--cosmic-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+--cosmic-purple-gradient: linear-gradient(90deg, #8a2be2, #00ff9d);
+--cosmic-blue-gradient: linear-gradient(45deg, #2de2e6, #8a2be2);
+--space-dark-gradient: linear-gradient(135deg, #0a081a 0%, #201d47 50%, #18182f 100%);
+```
+
+### Применение
+
+```jsx
+// Кнопки
+<button className="bg-gradient-to-r from-cosmic-purple to-cosmic-green">
+
+// Заголовки
+<h1 className="bg-cosmic-gradient bg-clip-text text-transparent">
+
+// Фоны
+<div className="bg-cosmic-gradient">
+```
+
+## 📝 Типографика
+
+### Шрифтовые семейства
+
+```css
+/* Космические шрифты */
+--font-cosmic: "Press Start 2P", cursive;    /* Пиксельный ретро */
+--font-mono: "Roboto Mono", monospace;       /* Код и данные */
+--font-space: "Orbitron", sans-serif;        /* Футуристический */
+```
+
+### Иерархия заголовков
+
+```jsx
+// Главный заголовок (H1)
+<h1 className="font-cosmic text-4xl lg:text-6xl text-cosmic-purple">
+  Space SQL
+</h1>
+
+// Заголовок секции (H2)
+<h2 className="font-space text-2xl lg:text-3xl text-cosmic-blue">
+  Уроки SQL
+</h2>
+
+// Заголовок подсекции (H3)
+<h3 className="font-space text-xl text-starlight">
+  Основы SELECT
+</h3>
+
+// Заголовок карточки (H4)
+<h4 className="font-mono text-lg text-cosmic-green">
+  Урок 1
+</h4>
+```
+
+### Основной текст
+
+```jsx
+// Обычный текст
+<p className="font-mono text-base text-starlight">
+  Описание урока
+</p>
+
+// Приглушенный текст
+<p className="font-mono text-sm text-text-muted">
+  Дополнительная информация
+</p>
+
+// Код
+<code className="font-mono text-cosmic-green bg-space-dark p-2 rounded">
+  SELECT * FROM users;
+</code>
+```
+
+## 🎯 Spacing System
+
+### Размеры отступов
+
+```jsx
+// Tailwind spacing scale
+space-1   // 4px
+space-2   // 8px
+space-3   // 12px
+space-4   // 16px
+space-6   // 24px
+space-8   // 32px
+space-12  // 48px
+space-16  // 64px
+space-20  // 80px
+space-24  // 96px
+```
+
+### Применение
+
+```jsx
+// Внутренние отступы
+<div className="p-4">        // 16px со всех сторон
+<div className="px-6 py-4">  // 24px по горизонтали, 16px по вертикали
+
+// Внешние отступы
+<div className="m-4">        // 16px со всех сторон
+<div className="mb-8">       // 32px снизу
+
+// Промежутки между элементами
+<div className="space-y-6">  // 24px между дочерними элементами по вертикали
+<div className="gap-4">      // 16px в grid/flex
+```
+
+## 🔘 Компоненты
+
+### Кнопки
+
+#### Варианты
+
+```jsx
+// Primary - основная кнопка
+<button className="cosmic-button">
+  Начать обучение
+</button>
+
+// Secondary - вторичная кнопка
+<button className="border-2 border-cosmic-blue text-cosmic-blue hover:bg-cosmic-blue hover:text-white">
+  Подробнее
+</button>
+
+// Danger - кнопка удаления/отмены
+<button className="bg-red-600 hover:bg-red-700 text-white">
+  Удалить
+</button>
+
+// Ghost - прозрачная кнопка
+<button className="text-cosmic-purple hover:bg-cosmic-purple hover:bg-opacity-10">
+  Отмена
+</button>
+```
+
+#### Размеры
+
+```jsx
+// Small
+<button className="px-4 py-2 text-sm">Маленькая</button>
+
+// Medium (по умолчанию)
+<button className="px-6 py-3 text-base">Средняя</button>
+
+// Large
+<button className="px-8 py-4 text-lg">Большая</button>
+```
+
+### Карточки
+
+```jsx
+// Базовая карточка
+<div className="cosmic-card">
+  <h3>Заголовок</h3>
+  <p>Содержимое</p>
+</div>
+
+// Интерактивная карточка
+<div className="cosmic-card hover:transform hover:-translate-y-2 cursor-pointer">
+  <h3>Кликабельная карточка</h3>
+</div>
+
+// Карточка с эффектом свечения
+<div className="cosmic-card shadow-cosmic hover:shadow-cosmic-lg">
+  <h3>Светящаяся карточка</h3>
+</div>
+```
+
+### Поля ввода
+
+```jsx
+// Базовое поле
+<input className="cosmic-input" placeholder="Введите текст" />
+
+// Поле с ошибкой
+<input className="cosmic-input border-red-500" />
+
+// Поле с фокусом
+<input className="cosmic-input focus:border-cosmic-purple focus:shadow-cosmic" />
+```
+
+## ✨ Эффекты и анимации
+
+### Эффекты свечения
+
+```css
+/* Текст с эффектом свечения */
+.glow-text {
+  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
+}
+
+/* Тень с эффектом свечения */
+.shadow-cosmic {
+  box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
+}
+
+.shadow-cosmic-lg {
+  box-shadow: 0 0 30px rgba(138, 43, 226, 0.7);
+}
+```
+
+### Анимации
+
+```css
+/* Плавание */
+@keyframes float {
+  0% { transform: translatey(0px); }
+  50% { transform: translatey(-10px); }
+  100% { transform: translatey(0px); }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* Мерцание звезд */
+@keyframes twinkle {
+  0% { opacity: 0.3; }
+  100% { opacity: 1; }
+}
+
+.animate-twinkle {
+  animation: twinkle 3s infinite alternate;
+}
+
+/* Пульсация свечения */
+@keyframes glow-pulse {
+  0%, 100% { box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); }
+  50% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.8); }
+}
+
+.animate-glow-pulse {
+  animation: glow-pulse 2s infinite;
+}
+```
+
+## 📱 Адаптивность
+
+### Breakpoints
+
+```css
+/* Tailwind breakpoints */
+sm: 640px   /* Мобильные устройства (большие) */
+md: 768px   /* Планшеты */
+lg: 1024px  /* Ноутбуки */
+xl: 1280px  /* Десктопы */
+2xl: 1536px /* Большие экраны */
+```
+
+### Адаптивные компоненты
+
+```jsx
+// Адаптивная сетка
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+
+// Адаптивный текст
+<h1 className="text-3xl md:text-4xl lg:text-6xl">
+
+// Адаптивные отступы
+<div className="p-4 md:p-6 lg:p-8">
+
+// Скрытие/показ на разных экранах
+<div className="hidden md:block">Только на десктопе</div>
+<div className="block md:hidden">Только на мобильных</div>
+```
+
+## 🌟 Специальные эффекты
+
+### Звездный фон
+
+```jsx
+// Компонент StarBackground
+<StarBackground isMainPage={true}>
+  <div>Контент с звездным фоном</div>
+</StarBackground>
+```
+
+### Параллакс эффекты
+
+```jsx
+// Элементы с параллаксом
+<div className="transform transition-transform duration-300 hover:scale-105">
+  Элемент с увеличением при hover
+</div>
+```
+
+### Космические частицы
+
+```jsx
+// Анимированные частицы
+<div className="relative">
+  {[...Array(5)].map((_, i) => (
+    <div
+      key={i}
+      className="absolute w-1 h-1 bg-white rounded-full animate-twinkle"
+      style={{
+        left: `${Math.random() * 100}px`,
+        top: `${Math.random() * 50}px`,
+        animationDelay: `${i * 0.2}s`
+      }}
+    />
+  ))}
+</div>
+```
+
+## 🎮 Интерактивные состояния
+
+### Hover эффекты
+
+```jsx
+// Кнопки
+<button className="transform transition-all duration-300 hover:scale-105 hover:-translate-y-1">
+
+// Карточки
+<div className="transition-all duration-300 hover:shadow-cosmic-lg hover:-translate-y-2">
+
+// Ссылки
+<a className="text-cosmic-blue hover:text-cosmic-purple transition-colors duration-300">
+```
+
+### Focus состояния
+
+```jsx
+// Поля ввода
+<input className="focus:outline-none focus:ring-2 focus:ring-cosmic-purple focus:border-cosmic-purple">
+
+// Кнопки
+<button className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cosmic-purple">
+```
+
+### Active состояния
+
+```jsx
+// Кнопки
+<button className="active:transform active:scale-95 active:translate-y-1">
+```
+
+## 🔧 Utility классы
+
+### Кастомные утилиты
+
+```css
+/* Космическая кнопка */
+.cosmic-button {
+  @apply px-6 py-3 rounded-full font-bold text-white cursor-pointer transition-all duration-300 transform hover:scale-105;
+  background: linear-gradient(90deg, #8a2be2, #00ff9d);
+  box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
+}
+
+/* Космическая карточка */
+.cosmic-card {
+  @apply bg-opacity-80 backdrop-blur-sm rounded-2xl p-6 border border-opacity-30;
+  background: rgba(26, 26, 46, 0.8);
+  border-color: #8a2be2;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Космическое поле ввода */
+.cosmic-input {
+  @apply w-full p-4 rounded-lg font-mono text-white bg-opacity-50 border border-opacity-50 outline-none transition-all duration-300;
+  background: rgba(0, 0, 0, 0.5);
+  border-color: #2de2e6;
+}
+
+/* Космический заголовок */
+.cosmic-title {
+  @apply font-cosmic text-4xl lg:text-6xl mb-6;
+  background: linear-gradient(90deg, #8a2be2, #00ff9d);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
+}
+
+/* Спиннер загрузки */
+.loading-spinner {
+  @apply w-8 h-8 border-4 border-cosmic-purple border-t-transparent rounded-full animate-spin;
+}
+```
+
+## 🎨 Темы и кастомизация
+
+### Переключение тем
+
+```css
+/* Основная тема (по умолчанию) */
+:root {
+  --theme-primary: #8a2be2;
+  --theme-secondary: #2de2e6;
+}
+
+/* Альтернативная тема */
+[data-theme="alternative"] {
+  --theme-primary: #ff2e88;
+  --theme-secondary: #00ff9d;
+}
+```
+
+### Кастомизация компонентов
+
+```jsx
+// Переопределение стилей через className
+<Button className="bg-gradient-to-r from-purple-500 to-pink-500">
+  Кастомная кнопка
+</Button>
+
+// Использование CSS переменных
+<div style={{ backgroundColor: 'var(--cosmic-purple)' }}>
+  Элемент с переменной
+</div>
+```
+
+## 🚀 Производительность
+
+### Оптимизация анимаций
+
+```css
+/* Оптимизация для анимаций */
+.animate-optimized {
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+```
+
+### Ленивая загрузка эффектов
+
+```jsx
+// Условные анимации
+const shouldAnimate = useReducedMotion();
+
+<motion.div
+  animate={shouldAnimate ? {} : { scale: 1.1 }}
+>
+  Контент
+</motion.div>
+```
+
+## 📋 Чек-лист для новых компонентов
+
+- [ ] Использует космическую цветовую палитру
+- [ ] Имеет hover эффекты
+- [ ] Адаптивен для всех экранов
+- [ ] Включает анимации с Framer Motion
+- [ ] Следует принципам доступности
+- [ ] Оптимизирован для производительности
+- [ ] Документирован с примерами
+
+## 🎯 Лучшие практики
+
+### Do's ✅
+- Используйте установленные цвета из палитры
+- Добавляйте плавные переходы ко всем интерактивным элементам
+- Следуйте космической тематике в иконографии
+- Тестируйте на всех устройствах
+- Используйте семантически правильные HTML теги
+
+### Don'ts ❌
+- Не используйте цвета вне установленной палитры
+- Не создавайте резких переходов без анимаций
+- Не забывайте про доступность (контрастность, фокус)
+- Не перегружайте анимациями
+- Не нарушайте космическую тематику
+
+---
+
+*Дизайн-система создана для покорения космоса через красивый и функциональный интерфейс* ✨
diff --git a/docs/FRONTEND.md b/docs/FRONTEND.md
index 9609def..2054a11 100644
--- a/docs/FRONTEND.md
+++ b/docs/FRONTEND.md
@@ -1,15 +1,29 @@
-# Документация по фронтенду
+# 🚀 Space SQL Frontend Documentation
 
 ## Обзор
 
-Фронтенд-часть приложения Space SQL представляет собой React-приложение, которое взаимодействует с бэкендом через REST API.
+Фронтенд Space SQL — это современное React-приложение с космической тематикой, построенное на принципах единого дизайна и плавных анимаций. Приложение использует кастомную систему дизайна с Tailwind CSS и Framer Motion для создания захватывающего пользовательского опыта.
 
-## Установка и запуск
+## 🛠 Технологический стек
 
-### Требования
+### Основные технологии
+- **React 18** - основной фреймворк
+- **React Router Dom 6** - маршрутизация
+- **Framer Motion** - анимации и переходы
+- **Tailwind CSS** - utility-first CSS фреймворк
+- **Axios** - HTTP клиент для API запросов
+
+### Дизайн система
+- **Кастомная космическая тема** с CSS переменными
+- **Responsive дизайн** для всех устройств
+- **Анимированные компоненты** с Framer Motion
+- **Единая типографика** (Orbitron, Press Start 2P, Roboto Mono)
+
+## 📦 Установка и запуск
 
-- Node.js (рекомендуется версия 16.x или выше)
-- npm (идёт в комплекте с Node.js) или Yarn
+### Требования
+- Node.js 16.x или выше
+- npm или yarn
 
 ### Установка зависимостей
 
@@ -19,8 +33,6 @@ cd frontend
 
 # Устанавливаем зависимости
 npm install
-# или, если используете Yarn
-yarn install
 ```
 
 ### Запуск в режиме разработки
@@ -28,57 +40,372 @@ yarn install
 ```bash
 # Запускаем фронтенд
 npm start
-# или
-yarn start
 ```
 
 Приложение будет доступно по адресу: [http://localhost:3000](http://localhost:3000)
 
-## Структура проекта
+## 🏗 Архитектура проекта
+
+### Структура файлов
 
 ```
 frontend/
-├── public/              # Статические файлы
+├── public/                 # Статические файлы
 ├── src/
-│   ├── components/      # Переиспользуемые React-компоненты
-│   ├── pages/           # Страницы приложения
-│   ├── services/        # Сервисы для работы с API
-│   ├── styles/          # Глобальные стили
-│   ├── App.js           # Корневой компонент
-│   └── index.js         # Точка входа
-├── package.json         # Зависимости и скрипты
-└── README.md            # Локальная документация
+│   ├── components/         # React компоненты
+│   │   ├── ui/            # Базовые UI компоненты
+│   │   │   ├── Button.jsx
+│   │   │   ├── Card.jsx
+│   │   │   ├── Input.jsx
+│   │   │   ├── Loading.jsx
+│   │   │   └── index.js
+│   │   ├── layout/        # Компоненты макета
+│   │   │   └── CosmicNavigation.jsx
+│   │   ├── common/        # Общие компоненты
+│   │   ├── StarBackground.js
+│   │   ├── Footer.js
+│   │   └── ...
+│   ├── pages/             # Страницы приложения
+│   │   ├── Home/
+│   │   ├── auth/
+│   │   │   ├── Login.js
+│   │   │   └── Register.js
+│   │   ├── Lessons/
+│   │   └── Practice/
+│   ├── contexts/          # React контексты
+│   │   └── AuthContext.js
+│   ├── services/          # API сервисы
+│   │   └── authService.js
+│   ├── styles/            # Стили
+│   │   └── globals.css    # Главный файл стилей
+│   ├── App.js            # Корневой компонент
+│   └── index.js          # Точка входа
+├── tailwind.config.js     # Конфигурация Tailwind
+└── package.json          # Зависимости и скрипты
+```
+
+## 🎨 Система дизайна
+
+### Цветовая палитра
+
+```css
+/* Космические цвета */
+--space-dark: #0d0221      /* Основной фон */
+--space-purple: #2d0b59    /* Темно-фиолетовый */
+--space-deep: #0f0c29      /* Глубокий космос */
+
+/* Акцентные цвета */
+--cosmic-blue: #2de2e6     /* Космический голубой */
+--cosmic-purple: #8a2be2   /* Космический фиолетовый */
+--cosmic-green: #00ff9d    /* Космический зеленый */
+--cosmic-pink: #ff2e88     /* Космический розовый */
+```
+
+### Типографика
+
+- **Заголовки**: Press Start 2P (космический пиксельный шрифт)
+- **Основной текст**: Roboto Mono (моноширинный)
+- **UI элементы**: Orbitron (футуристический)
+
+### Utility классы
+
+```css
+/* Кнопки */
+.cosmic-button          /* Основная космическая кнопка */
+
+/* Карточки */
+.cosmic-card           /* Базовая карточка с эффектами */
+
+/* Инпуты */
+.cosmic-input          /* Стилизованное поле ввода */
+
+/* Заголовки */
+.cosmic-title          /* Анимированный заголовок */
+
+/* Эффекты */
+.glow-text            /* Текст с эффектом свечения */
+.animate-float        /* Анимация плавания */
+```
+
+## 🧩 UI Компоненты
+
+### Button
+Универсальная кнопка с различными вариантами:
+
+```jsx
+import { Button } from './components/ui';
+
+<Button variant="primary" size="large" loading={isLoading}>
+  Нажми меня
+</Button>
+
+// Варианты: primary, secondary, danger, ghost
+// Размеры: small, medium, large
+```
+
+### Card
+Карточка с hover эффектами:
+
+```jsx
+import { Card } from './components/ui';
+
+<Card hover={true} glow={true}>
+  <h3>Заголовок</h3>
+  <p>Содержимое карточки</p>
+</Card>
+```
+
+### Input
+Поле ввода с анимированными лейблами:
+
+```jsx
+import { Input } from './components/ui';
+
+<Input
+  label="Email"
+  type="email"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+  error={errorMessage}
+/>
 ```
 
-## Настройка окружения
+### Loading
+Космический спиннер загрузки:
 
-Создайте файл `.env` в корне фронтенд-проекта и настройте переменные окружения:
+```jsx
+import { Loading } from './components/ui';
+
+<Loading 
+  message="Загрузка данных..." 
+  size="large" 
+/>
+```
+
+## 🎭 Анимации
+
+### Page Transitions
+Плавные переходы между страницами:
+
+```jsx
+import { motion, AnimatePresence } from 'framer-motion';
+
+<AnimatePresence mode="wait">
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    exit={{ opacity: 0, y: -20 }}
+  >
+    {children}
+  </motion.div>
+</AnimatePresence>
+```
+
+### Stagger Animations
+Последовательные анимации для списков:
+
+```jsx
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { opacity: 1, y: 0 }
+};
+```
+
+## 🛣 Маршрутизация
+
+### Структура роутов
+
+```jsx
+<Routes>
+  <Route path="/" element={<Home />} />
+  <Route path="/login" element={<Login />} />
+  <Route path="/register" element={<Register />} />
+  
+  {/* Защищенные роуты */}
+  <Route path="/lessons" element={
+    <ProtectedRoute>
+      <Lessons />
+    </ProtectedRoute>
+  } />
+  <Route path="/lessons/:id" element={
+    <ProtectedRoute>
+      <LessonDetails />
+    </ProtectedRoute>
+  } />
+  <Route path="/practice" element={
+    <ProtectedRoute>
+      <Practice />
+    </ProtectedRoute>
+  } />
+</Routes>
+```
+
+## 🔐 Аутентификация
+
+### AuthContext
+Глобальное состояние аутентификации:
+
+```jsx
+import { useAuth } from './contexts/AuthContext';
+
+const { currentUser, login, logout, isLoading } = useAuth();
+
+// Вход в систему
+await login(email, password);
+
+// Выход
+logout();
+
+// Проверка авторизации
+if (currentUser) {
+  // Пользователь авторизован
+}
+```
+
+### ProtectedRoute
+Компонент для защиты приватных страниц:
+
+```jsx
+<ProtectedRoute>
+  <PrivatePage />
+</ProtectedRoute>
+```
+
+## 📱 Адаптивность
+
+### Breakpoints (Tailwind CSS)
+
+```css
+sm: 640px    /* Планшеты */
+md: 768px    /* Небольшие ноутбуки */
+lg: 1024px   /* Десктопы */
+xl: 1280px   /* Большие экраны */
+2xl: 1536px  /* Очень большие экраны */
+```
+
+### Примеры использования
+
+```jsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+  {/* Адаптивная сетка */}
+</div>
+
+<h1 className="text-3xl lg:text-5xl">
+  {/* Адаптивный размер текста */}
+</h1>
+```
+
+## 🔧 Конфигурация
+
+### Tailwind Config
+Кастомная конфигурация в `tailwind.config.js`:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        space: { /* космические цвета */ },
+        cosmic: { /* акцентные цвета */ }
+      },
+      fontFamily: {
+        'cosmic': ['"Press Start 2P"', 'cursive'],
+        'space': ['"Orbitron"', 'sans-serif']
+      },
+      animation: {
+        'float': 'float 6s ease-in-out infinite',
+        'twinkle': 'twinkle 3s infinite alternate'
+      }
+    }
+  }
+}
+```
+
+### Environment Variables
 
 ```env
-REACT_APP_API_URL=http://localhost:8080/api  # URL бэкенд-сервера
-REACT_APP_GH_CLIENT_ID=your_github_client_id # ID приложения GitHub OAuth (если используется)
+REACT_APP_API_URL=http://localhost:8080/api
 ```
 
-## Доступные скрипты
+## 📚 Доступные скрипты
 
-- `npm start` - Запуск приложения в режиме разработки
-- `npm test` - Запуск тестов
-- `npm run build` - Сборка для продакшена
-- `npm run eject` - Извлечение конфигурации (необратимо)
+```bash
+npm start          # Запуск в режиме разработки
+npm test           # Запуск тестов
+npm run build      # Сборка для продакшена
+npm run eject      # Извлечение конфигурации (необратимо)
+```
 
-## Деплой
+## 🚀 Деплой
 
-Для деплоя собранной версии приложения выполните:
+### Сборка для продакшена
 
 ```bash
 # Сборка приложения
 npm run build
 
-# Собранное приложение будет доступно в папке build/
+# Собранное приложение будет в папке build/
 ```
 
-## Дополнительная информация
+### Рекомендации для деплоя
+- Настройте правильные переменные окружения
+- Убедитесь, что все статические файлы доступны
+- Настройте fallback для SPA роутинга
+
+## 🎯 Лучшие практики
+
+### Компоненты
+- Используйте функциональные компоненты с хуками
+- Выносите логику в кастомные хуки
+- Применяйте мемоизацию для оптимизации
+
+### Стили
+- Используйте Tailwind utility классы
+- Создавайте переиспользуемые компоненты
+- Следуйте космической цветовой схеме
+
+### Анимации
+- Используйте Framer Motion для сложных анимаций
+- Применяйте `will-change` для оптимизации
+- Тестируйте производительность на мобильных
+
+## 🐛 Отладка
+
+### Полезные инструменты
+- React Developer Tools
+- Redux DevTools (если используется)
+- Framer Motion DevTools
+
+### Логирование
+```js
+console.log('Debug info:', data);
+// В продакшене используйте более продвинутые решения
+```
+
+## 📖 Дополнительные ресурсы
+
+- [React Documentation](https://reactjs.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Framer Motion](https://www.framer.com/motion/)
+- [React Router](https://reactrouter.com/)
+
+## 🤝 Вклад в проект
+
+При добавлении новых компонентов:
+1. Следуйте существующей структуре папок
+2. Используйте космическую тематику
+3. Добавляйте анимации с Framer Motion
+4. Тестируйте на всех устройствах
+5. Обновляйте документацию
+
+---
 
-- [Документация React](https://reactjs.org/)
-- [Создание React-приложения](https://create-react-app.dev/)
-- [Руководство по стилю](https://github.com/airbnb/javascript/tree/master/react)
+*Создано с ❤️*
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
index 03b4f53..3dcd314 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,56 +1,229 @@
 # 📚 Документация Space SQL
 
-## 🚀 Быстрый старт
-
-- [Установка и настройка](./guides/installation.md)
-- [Запуск приложения](./guides/running.md)
-- [Настройка окружения](./guides/environment.md)
-
-## 📖 Руководства
-
-- [Руководство по фронтенду](./FRONTEND.md)
-- [Руководство по бэкенду](./guides/backend.md)
-- [Работа с API](./api/README.md)
-- [Разработка и вклад в проект](./development/CONTRIBUTING.md)
-
-## 🏗 Архитектура
-
-- [Обзор архитектуры](./architecture/overview.md)
-- [Схема базы данных](./architecture/database.md)
-- [Безопасность](./architecture/security.md)
-
-## 🔍 API Документация
-
-- [Спецификация API](./api/SPECIFICATION.md)
-- [Аутентификация](./api/authentication.md)
-- [Уроки и задания](./api/lessons.md)
-- [Пользователи](./api/users.md)
-
-## 🛠 Разработка
-
-- [Настройка окружения разработки](./development/setup.md)
-- [Руководство по стилю кода](./development/code-style.md)
-- [Тестирование](./development/testing.md)
-- [Развертывание](./development/deployment.md)
-
-## 📋 Требования
-
-- Node.js 16+
-- npm 8+
-- Java 17+
-- Maven 3.8+
-- PostgreSQL 14+
-
-## 🤝 Участие
-
-Вклад приветствуется! Пожалуйста, прочитайте [руководство по участию](./development/CONTRIBUTING.md) для получения подробной информации о процессе отправки запросов на включение.
-
-## 📄 Лицензия
-
-Этот проект лицензирован в соответствии с лицензией MIT - подробности см. в файле [LICENSE](../LICENSE).
+Добро пожаловать в документацию проекта Space SQL - интерактивной платформы для изучения SQL с космической тематикой!
+
+## 🗂️ Структура документации
+
+### 🎨 Frontend
+- [**📚 Фронтенд**](FRONTEND.md) - Полная документация по React приложению
+- [**🧩 Компоненты**](COMPONENTS.md) - Описание всех UI компонентов и их API
+- [**🎨 Дизайн-система**](DESIGN_SYSTEM.md) - Космическая дизайн-система, цвета, типографика и стили
+
+### 🔧 Backend & API
+- [**📡 API Спецификация**](api/SPECIFICATION.md) - REST API endpoints и схемы данных
+- [**🗄️ База данных**](architecture/database.md) - Схема БД и архитектурные решения
+
+## 🚀 Быстрые ссылки
+
+### Для разработчиков
+- [Установка и настройка](FRONTEND.md#установка-и-запуск)
+- [Создание новых компонентов](COMPONENTS.md#лучшие-практики)
+- [Использование дизайн-системы](DESIGN_SYSTEM.md#utility-классы)
+
+### Для дизайнеров
+- [Цветовая палитра](DESIGN_SYSTEM.md#цветовая-палитра)
+- [Типографика](DESIGN_SYSTEM.md#типографика)
+- [Анимации и эффекты](DESIGN_SYSTEM.md#эффекты-и-анимации)
+
+### Для QA
+- [Тестирование компонентов](COMPONENTS.md#тестирование-компонентов)
+- [Адаптивность](DESIGN_SYSTEM.md#адаптивность)
+
+## 🎯 Архитектура проекта
+
+### Frontend Architecture
+
+```mermaid
+graph TD
+    A[React App] --> B[React Router]
+    A --> C[Framer Motion]
+    A --> D[Tailwind CSS]
+    
+    B --> E[Home Page]
+    B --> F[Auth Pages]
+    B --> G[Lessons Page]
+    B --> H[Practice Page]
+    
+    I[UI Components] --> J[Button]
+    I --> K[Card]
+    I --> L[Input]
+    I --> M[Loading]
+    
+    N[Design System] --> O[Colors]
+    N --> P[Typography]
+    N --> Q[Animations]
+    N --> R[Spacing]
+```
+
+### Backend Architecture
+
+```mermaid
+graph TD
+    A[Spring Boot App] --> B[Controllers]
+    A --> C[Services]
+    A --> D[Repositories]
+    A --> E[Security]
+    
+    B --> F[Auth Controller]
+    B --> G[Lesson Controller]
+    B --> H[Query Controller]
+    
+    C --> I[Auth Service]
+    C --> J[Lesson Service]
+    C --> K[Query Service]
+    
+    D --> L[User Repository]
+    D --> M[Lesson Repository]
+    D --> N[Task Repository]
+    
+    E --> O[JWT Filter]
+    E --> P[Security Config]
+```
+
+## 🛠️ Технологический стек
+
+### Frontend Technologies
+
+| Технология | Версия | Назначение |
+|------------|--------|------------|
+| **React** | 18.x | Основной фреймворк |
+| **React Router** | 6.x | Маршрутизация |
+| **Framer Motion** | 10.x | Анимации |
+| **Tailwind CSS** | 3.x | Стили |
+| **Axios** | 1.x | HTTP клиент |
+
+### Backend Technologies
+
+| Технология | Версия | Назначение |
+|------------|--------|------------|
+| **Java** | 17+ | Язык программирования |
+| **Spring Boot** | 3.x | Основной фреймворк |
+| **Spring Security** | 6.x | Безопасность |
+| **PostgreSQL** | 13+ | База данных |
+| **Liquibase** | 4.x | Миграции БД |
+
+## 🎨 Дизайн-принципы
+
+### 🌌 Космическая тематика
+- Темные фоны с градиентами
+- Неоновые акценты и свечения
+- Анимированные звезды и частицы
+- Футуристическая типографика
+
+### 🎭 Анимации
+- Плавные переходы между страницами
+- Hover эффекты для интерактивности
+- Stagger анимации для списков
+- Микроанимации для обратной связи
+
+### 📱 Адаптивность
+- Mobile-first подход
+- Breakpoints для всех устройств
+- Гибкие сетки и компоненты
+- Оптимизация для касаний
+
+## 🔧 Инструменты разработки
+
+### Рекомендуемые расширения VS Code
+```json
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "ms-vscode.vscode-typescript-next",
+    "formulahendry.auto-rename-tag",
+    "christian-kohler.path-intellisense"
+  ]
+}
+```
+
+### Настройка Prettier
+```json
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}
+```
+
+## 📋 Чек-листы
+
+### ✅ Создание нового компонента
+- [ ] Создать файл компонента в правильной папке
+- [ ] Использовать TypeScript или PropTypes
+- [ ] Добавить анимации с Framer Motion
+- [ ] Следовать дизайн-системе
+- [ ] Сделать адаптивным
+- [ ] Добавить в индексный файл
+- [ ] Написать документацию
+- [ ] Добавить тесты
+
+### ✅ Создание новой страницы
+- [ ] Создать компонент страницы
+- [ ] Добавить роут в App.js
+- [ ] Настроить защиту (если нужно)
+- [ ] Добавить анимации переходов
+- [ ] Протестировать на всех устройствах
+- [ ] Добавить в навигацию
+- [ ] Обновить документацию
+
+## 🐛 Отладка
+
+### Частые проблемы
+
+**Анимации не работают:**
+- Проверьте импорт Framer Motion
+- Убедитесь в правильности variants
+- Проверьте initial/animate props
+
+**Стили не применяются:**
+- Проверьте правильность Tailwind классов
+- Убедитесь в сборке CSS
+- Проверьте конфигурацию Tailwind
+
+**API не отвечает:**
+- Проверьте CORS настройки
+- Убедитесь в правильности endpoints
+- Проверьте аутентификацию
+
+### Полезные команды
+
+```bash
+# Проверка линтера
+npm run lint
+
+# Форматирование кода
+npm run format
+
+# Анализ bundle
+npm run analyze
+
+# Проверка типов
+npm run type-check
+```
+
+## 🤝 Вклад в документацию
+
+Документация - это живой документ, который развивается вместе с проектом. 
+
+### Как улучшить документацию:
+1. Найдите неточность или пробел
+2. Создайте issue с описанием проблемы
+3. Предложите исправление через PR
+4. Следуйте стилю существующей документации
+
+### Стиль документации:
+- Используйте эмодзи для визуального разделения
+- Добавляйте примеры кода
+- Создавайте диаграммы для сложных концепций
+- Пишите понятно и структурированно
 
 ---
 
 <div align="center">
-  <p>Создано с ❤️ командой Space SQL</p>
-</div>
+  <p><em>Документация создана с ❤️ для покорения космоса через изучение SQL</em></p>
+  
+  **[⬆️ Вернуться к началу](#-документация-space-sql)**
+</div>
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2dba0cb..5dce88a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,14 +10,17 @@
       "dependencies": {
         "@splinetool/react-spline": "latest",
         "axios": "^1.11.0",
-        "bootstrap": "^5.3.2",
         "framer-motion": "^10.18.0",
         "react": "^18.2.0",
-        "react-bootstrap": "^2.9.1",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "autoprefixer": "^10.4.21",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.1.11"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -3100,31 +3103,6 @@
         }
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.9.10",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.10.tgz",
-      "integrity": "sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
@@ -3134,60 +3112,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/@restart/hooks": {
-      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
-      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
-      "license": "MIT",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@restart/ui": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
-      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@popperjs/core": "^2.11.8",
-        "@react-aria/ssr": "^3.5.0",
-        "@restart/hooks": "^0.5.0",
-        "@types/warning": "^3.0.3",
-        "dequal": "^2.0.3",
-        "dom-helpers": "^5.2.0",
-        "uncontrollable": "^8.0.4",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
-      }
-    },
-    "node_modules/@restart/ui/node_modules/@restart/hooks": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
-      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
-      "license": "MIT",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@restart/ui/node_modules/uncontrollable": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
-      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.14.0"
-      }
-    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3568,15 +3492,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
-      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3856,24 +3771,6 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
-    "node_modules/@types/react": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
-      "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.12",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3946,12 +3843,6 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
-    "node_modules/@types/warning": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
-      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
-      "license": "MIT"
-    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -5364,25 +5255,6 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "license": "ISC"
     },
-    "node_modules/bootstrap": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
-      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "license": "MIT",
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.8"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -5704,12 +5576,6 @@
       "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==",
       "license": "MIT"
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-      "license": "MIT"
-    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -6466,12 +6332,6 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
-    "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
-    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6660,15 +6520,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6792,16 +6643,6 @@
         "utila": "~0.4"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -9398,15 +9239,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
@@ -12342,9 +12174,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.5",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.5.tgz",
-      "integrity": "sha512-d/jtm+rdNT8tpXuHY5MMtcbJFBkhXE6593XVR9UoGCH8jSFGci7jGvMGH5RYd5PBJW+00NZQt6gf7CbagJCrhg==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -12875,9 +12707,9 @@
       }
     },
     "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
@@ -13746,25 +13578,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "license": "MIT",
-      "dependencies": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=0.14.0"
-      }
-    },
-    "node_modules/prop-types-extra/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13955,36 +13768,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/react-bootstrap": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz",
-      "integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.22.5",
-        "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.6",
-        "@types/react-transition-group": "^4.4.6",
-        "classnames": "^2.3.2",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.8.1",
-        "prop-types-extra": "^1.1.0",
-        "react-transition-group": "^4.4.5",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.14.8",
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -14115,12 +13898,6 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-      "license": "MIT"
-    },
     "node_modules/react-merge-refs": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
@@ -14245,20 +14022,53 @@
         }
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "license": "BSD-3-Clause",
+    "node_modules/react-scripts/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/react-scripts/node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
       },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
     "node_modules/read-cache": {
@@ -16112,53 +15922,11 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.2.2",
@@ -16637,21 +16405,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": ">=15.0.0"
-      }
-    },
     "node_modules/underscore": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
@@ -16904,15 +16657,6 @@
         "makeerror": "1.0.12"
       }
     },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c06153e..2656701 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,10 +6,8 @@
   "dependencies": {
     "@splinetool/react-spline": "latest",
     "axios": "^1.11.0",
-    "bootstrap": "^5.3.2",
     "framer-motion": "^10.18.0",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
@@ -36,5 +34,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.11"
   }
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
index e47b3af..f3b02f8 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
 import { AuthProvider } from './contexts/AuthContext';
 import ProtectedRoute from './components/common/ProtectedRoute';
-import Navigation from './components/layout/Navigation';
+import CosmicNavigation from './components/layout/CosmicNavigation';
 import Footer from './components/Footer';
 import Home from './pages/Home';
 import Lessons from './pages/Lessons';
@@ -11,59 +12,94 @@ import LessonDetails from './components/LessonDetails';
 import Login from './pages/auth/Login';
 import Register from './pages/auth/Register';
 import StarBackground from './components/StarBackground';
-import './styles.css';
 
-// Обёртка для страниц с тёмным фоном
-const DarkLayout = ({ children }) => (
+// Обёртка для страниц с космическим фоном
+const CosmicLayout = ({ children }) => (
   <StarBackground isMainPage={false}>
-    <Navigation />
-    <div className="page-content">
+    <CosmicNavigation />
+    <motion.div 
+      className="flex-1 relative z-10"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
       {children}
-    </div>
-    <Footer className="transparent-footer" />
+    </motion.div>
+    <Footer />
   </StarBackground>
 );
 
+// Компонент для анимированных переходов страниц
+const PageTransition = ({ children }) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    exit={{ opacity: 0, y: -20 }}
+    transition={{ duration: 0.3 }}
+  >
+    {children}
+  </motion.div>
+);
+
 const AppContent = () => {
   return (
-    <div className="app-root">
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route 
-          path="/lessons" 
-          element={
-            <ProtectedRoute>
-              <DarkLayout>
-                <Lessons />
-              </DarkLayout>
-            </ProtectedRoute>
-          } 
-        />
-        <Route 
-          path="/lessons/:id" 
-          element={
-            <ProtectedRoute>
-              <DarkLayout>
-                <LessonDetails />
-              </DarkLayout>
-            </ProtectedRoute>
-          } 
-        />
-        <Route 
-          path="/practice" 
-          element={
-            <ProtectedRoute>
-              <div className="practice-page-wrapper">
-                <Practice />
-                <Footer className="transparent-footer" />
-              </div>
-            </ProtectedRoute>
-          } 
-        />
-        <Route path="/login" element={<Login />} />
-        <Route path="/register" element={<Register />} />
-        <Route path="*" element={<Navigate to="/" replace />} />
-      </Routes>
+    <div className="app-root min-h-screen flex flex-col">
+      <AnimatePresence mode="wait">
+        <Routes>
+          <Route path="/" element={
+            <PageTransition>
+              <Home />
+            </PageTransition>
+          } />
+          <Route 
+            path="/lessons" 
+            element={
+              <ProtectedRoute>
+                <CosmicLayout>
+                  <PageTransition>
+                    <Lessons />
+                  </PageTransition>
+                </CosmicLayout>
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="/lessons/:id" 
+            element={
+              <ProtectedRoute>
+                <CosmicLayout>
+                  <PageTransition>
+                    <LessonDetails />
+                  </PageTransition>
+                </CosmicLayout>
+              </ProtectedRoute>
+            } 
+          />
+          <Route 
+            path="/practice" 
+            element={
+              <ProtectedRoute>
+                <CosmicLayout>
+                  <PageTransition>
+                    <Practice />
+                  </PageTransition>
+                </CosmicLayout>
+              </ProtectedRoute>
+            } 
+          />
+          <Route path="/login" element={
+            <PageTransition>
+              <Login />
+            </PageTransition>
+          } />
+          <Route path="/register" element={
+            <PageTransition>
+              <Register />
+            </PageTransition>
+          } />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </AnimatePresence>
     </div>
   );
 };
diff --git a/frontend/src/components/CosmicLoginForm.js b/frontend/src/components/CosmicLoginForm.js
index c790e6d..90955a0 100644
--- a/frontend/src/components/CosmicLoginForm.js
+++ b/frontend/src/components/CosmicLoginForm.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import './CosmicLoginForm.css';
+import { motion } from 'framer-motion';
+import { Button, Input, Card } from './ui';
 
 const CosmicLoginForm = ({
   email,
@@ -11,50 +12,95 @@ const CosmicLoginForm = ({
   isSubmitting,
   error,
 }) => {
+  const formVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: { 
+      opacity: 1, 
+      scale: 1,
+      transition: { 
+        duration: 0.5,
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 }
+  };
+
   return (
-    <div className="login-container">
-      <div className="login-form-wrapper">
-        <h2 className="login-title">Вход в систему</h2>
-        {error && <div className="error-message">{error}</div>}
-
-        <form onSubmit={handleSubmit} className="login-form">
-          <div className="input-group">
-            <input
-              type="email"
-              id="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-            />
-            <label htmlFor="email">Электронная почта</label>
-          </div>
-
-          <div className="input-group">
-            <input
-              type="password"
-              id="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-            <label htmlFor="password">Пароль</label>
-          </div>
-
-          <button
-            type="submit"
-            className="login-button"
-            disabled={isSubmitting}
-          >
-            {isSubmitting ? 'Вход...' : 'Войти'}
-          </button>
-        </form>
-
-        <div className="register-link">
-          <p>
-            Еще нет аккаунта? <Link to="/register">Зарегистрируйтесь</Link>
-          </p>
-        </div>
-      </div>
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <motion.div
+        variants={formVariants}
+        initial="hidden"
+        animate="visible"
+        className="w-full max-w-md"
+      >
+        <Card className="animate-float">
+          <motion.div variants={itemVariants}>
+            <h2 className="text-3xl font-cosmic text-center text-cosmic-purple glow-text mb-8">
+              Вход в систему
+            </h2>
+          </motion.div>
+
+          {error && (
+            <motion.div 
+              variants={itemVariants}
+              className="bg-red-900 bg-opacity-30 border border-red-500 text-red-300 px-4 py-3 rounded-lg mb-6 text-center"
+            >
+              {error}
+            </motion.div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <motion.div variants={itemVariants}>
+              <Input
+                type="email"
+                label="Электронная почта"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                disabled={isSubmitting}
+              />
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <Input
+                type="password"
+                label="Пароль"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={isSubmitting}
+              />
+            </motion.div>
+
+            <motion.div variants={itemVariants}>
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isSubmitting}
+                loading={isSubmitting}
+              >
+                {isSubmitting ? 'Вход...' : 'Войти'}
+              </Button>
+            </motion.div>
+          </form>
+
+          <motion.div variants={itemVariants} className="text-center mt-6">
+            <p className="text-gray-400">
+              Еще нет аккаунта?{' '}
+              <Link 
+                to="/register" 
+                className="text-cosmic-blue hover:text-cosmic-purple transition-colors duration-300 font-space"
+              >
+                Зарегистрируйтесь
+              </Link>
+            </p>
+          </motion.div>
+        </Card>
+      </motion.div>
     </div>
   );
 };
diff --git a/frontend/src/components/CosmicRegisterForm.js b/frontend/src/components/CosmicRegisterForm.js
index 5c119f1..39ed7b6 100644
--- a/frontend/src/components/CosmicRegisterForm.js
+++ b/frontend/src/components/CosmicRegisterForm.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import './CosmicLoginForm.css'; // Reusing the same CSS
+import { motion } from 'framer-motion';
+import { Button, Input, Card } from './ui';
 
 const CosmicRegisterForm = ({
   email,
@@ -13,61 +14,107 @@ const CosmicRegisterForm = ({
   isSubmitting,
   error,
 }) => {
+  const formVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: { 
+      opacity: 1, 
+      scale: 1,
+      transition: { 
+        duration: 0.5,
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 }
+  };
+
   return (
-    <div className="login-container">
-      <div className="login-form-wrapper">
-        <h2 className="login-title">Регистрация</h2>
-        {error && <div className="error-message">{error}</div>}
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <motion.div
+        variants={formVariants}
+        initial="hidden"
+        animate="visible"
+        className="w-full max-w-md"
+      >
+        <Card className="animate-float">
+          <motion.div variants={itemVariants}>
+            <h2 className="text-3xl font-cosmic text-center text-cosmic-purple glow-text mb-8">
+              Регистрация
+            </h2>
+          </motion.div>
+
+          {error && (
+            <motion.div 
+              variants={itemVariants}
+              className="bg-red-900 bg-opacity-30 border border-red-500 text-red-300 px-4 py-3 rounded-lg mb-6 text-center"
+            >
+              {error}
+            </motion.div>
+          )}
 
-        <form onSubmit={handleSubmit} className="login-form">
-          <div className="input-group">
-            <input
-              type="email"
-              id="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-            />
-            <label htmlFor="email">Электронная почта</label>
-          </div>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <motion.div variants={itemVariants}>
+              <Input
+                type="email"
+                label="Электронная почта"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                disabled={isSubmitting}
+              />
+            </motion.div>
 
-          <div className="input-group">
-            <input
-              type="password"
-              id="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-            <label htmlFor="password">Пароль</label>
-          </div>
+            <motion.div variants={itemVariants}>
+              <Input
+                type="password"
+                label="Пароль"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                disabled={isSubmitting}
+              />
+            </motion.div>
 
-          <div className="input-group">
-            <input
-              type="password"
-              id="confirmPassword"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              required
-            />
-            <label htmlFor="confirmPassword">Подтвердите пароль</label>
-          </div>
+            <motion.div variants={itemVariants}>
+              <Input
+                type="password"
+                label="Подтвердите пароль"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                disabled={isSubmitting}
+                error={password && confirmPassword && password !== confirmPassword ? 'Пароли не совпадают' : ''}
+              />
+            </motion.div>
 
-          <button
-            type="submit"
-            className="login-button"
-            disabled={isSubmitting}
-          >
-            {isSubmitting ? 'Регистрация...' : 'Зарегистрироваться'}
-          </button>
-        </form>
+            <motion.div variants={itemVariants}>
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isSubmitting || (password && confirmPassword && password !== confirmPassword)}
+                loading={isSubmitting}
+              >
+                {isSubmitting ? 'Регистрация...' : 'Зарегистрироваться'}
+              </Button>
+            </motion.div>
+          </form>
 
-        <div className="register-link">
-          <p>
-            Уже есть аккаунт? <Link to="/login">Войдите</Link>
-          </p>
-        </div>
-      </div>
+          <motion.div variants={itemVariants} className="text-center mt-6">
+            <p className="text-gray-400">
+              Уже есть аккаунт?{' '}
+              <Link 
+                to="/login" 
+                className="text-cosmic-blue hover:text-cosmic-purple transition-colors duration-300 font-space"
+              >
+                Войдите
+              </Link>
+            </p>
+          </motion.div>
+        </Card>
+      </motion.div>
     </div>
   );
 };
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index fc50ed9..514f40e 100644
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -1,13 +1,21 @@
 import React from 'react';
-import '../styles.css';
+import { motion } from 'framer-motion';
 
 const Footer = () => {
   return (
-    <footer className="app-footer">
-      <div className="footer-content">
-        <p className="footer-text"> No php - No problems, 2025</p>
+    <motion.footer 
+      className="relative z-10 text-center py-6 border-t border-cosmic-purple border-opacity-20"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ delay: 0.5 }}
+    >
+      <div className="max-w-7xl mx-auto px-4">
+        <p className="text-gray-400 font-space text-sm">
+          🚀 Space SQL © 2025 • No PHP - No Problems • 
+          <span className="text-cosmic-purple ml-2">Made with ❤️ in the cosmos</span>
+        </p>
       </div>
-    </footer>
+    </motion.footer>
   );
 };
 
diff --git a/frontend/src/components/LessonsList.js b/frontend/src/components/LessonsList.js
index 1722dd0..07e5776 100644
--- a/frontend/src/components/LessonsList.js
+++ b/frontend/src/components/LessonsList.js
@@ -1,22 +1,80 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import GlowingCard from './GlowingCard';
+import { motion } from 'framer-motion';
+import { Card } from './ui';
 
 export default function LessonsList({ lessons }) {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: { 
+      opacity: 1, 
+      y: 0,
+      transition: { duration: 0.5 }
+    }
+  };
+
   return (
-    <div className="lessons-container">
-      {lessons.map((lesson) => (
-        <Link 
-          key={lesson.id} 
-          to={`/lessons/${lesson.id}`}
-          className="lesson-link"
-        >
-          <GlowingCard>
-            <h3>{lesson.title}</h3>
-            <p>{lesson.description}</p>
-          </GlowingCard>
-        </Link>
+    <motion.div 
+      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      {lessons.map((lesson, index) => (
+        <motion.div key={lesson.id} variants={itemVariants}>
+          <Link 
+            to={`/lessons/${lesson.id}`}
+            className="block h-full"
+          >
+            <Card 
+              hover={true} 
+              glow={true}
+              className="h-full flex flex-col justify-between group"
+            >
+              <div>
+                <div className="flex items-center justify-between mb-4">
+                  <span className="text-cosmic-blue text-sm font-space">
+                    Урок {index + 1}
+                  </span>
+                  <span className="text-2xl">
+                    {index % 4 === 0 ? '🚀' : index % 4 === 1 ? '⭐' : index % 4 === 2 ? '🌌' : '💫'}
+                  </span>
+                </div>
+                
+                <h3 className="text-xl font-space text-white mb-3 group-hover:text-cosmic-purple transition-colors duration-300">
+                  {lesson.title}
+                </h3>
+                
+                <p className="text-gray-400 text-sm leading-relaxed">
+                  {lesson.description}
+                </p>
+              </div>
+              
+              <div className="mt-6 pt-4 border-t border-cosmic-purple border-opacity-20">
+                <div className="flex items-center justify-between text-xs text-cosmic-green">
+                  <span className="flex items-center space-x-1">
+                    <span>📊</span>
+                    <span>Сложность: ★☆☆</span>
+                  </span>
+                  <span className="group-hover:translate-x-1 transition-transform duration-300">
+                    →
+                  </span>
+                </div>
+              </div>
+            </Card>
+          </Link>
+        </motion.div>
       ))}
-    </div>
+    </motion.div>
   );
 }
diff --git a/frontend/src/components/layout/CosmicNavigation.jsx b/frontend/src/components/layout/CosmicNavigation.jsx
new file mode 100644
index 0000000..7fc8640
--- /dev/null
+++ b/frontend/src/components/layout/CosmicNavigation.jsx
@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useAuth } from '../../contexts/AuthContext';
+import { Button } from '../ui';
+
+const CosmicNavigation = () => {
+  const { currentUser, logout } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleLogout = () => {
+    logout();
+    navigate('/');
+    setIsMenuOpen(false);
+  };
+
+  const isActive = (path) => location.pathname === path;
+
+  const navItems = [
+    { path: '/', label: 'Главная', icon: '🏠' },
+    { path: '/lessons', label: 'Уроки', icon: '📚', protected: true },
+    { path: '/practice', label: 'Практика', icon: '⚡', protected: true },
+  ];
+
+  const navVariants = {
+    hidden: { opacity: 0, y: -20 },
+    visible: { 
+      opacity: 1, 
+      y: 0,
+      transition: { duration: 0.3, staggerChildren: 0.1 }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, x: -20 },
+    visible: { opacity: 1, x: 0 }
+  };
+
+  return (
+    <motion.nav 
+      className="relative z-50 bg-space-dark bg-opacity-90 backdrop-blur-lg border-b border-cosmic-purple border-opacity-30"
+      variants={navVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo */}
+          <motion.div variants={itemVariants}>
+            <Link 
+              to="/" 
+              className="flex items-center space-x-2 text-2xl font-cosmic text-cosmic-purple hover:text-cosmic-blue transition-colors duration-300"
+            >
+              <span className="text-3xl">🚀</span>
+              <span className="glow-text">Space SQL</span>
+            </Link>
+          </motion.div>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center space-x-8">
+            {navItems.map((item) => {
+              if (item.protected && !currentUser) return null;
+              
+              return (
+                <motion.div key={item.path} variants={itemVariants}>
+                  <Link
+                    to={item.path}
+                    className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all duration-300 ${
+                      isActive(item.path)
+                        ? 'bg-cosmic-purple bg-opacity-20 text-cosmic-purple border border-cosmic-purple'
+                        : 'text-gray-300 hover:text-cosmic-blue hover:bg-cosmic-blue hover:bg-opacity-10'
+                    }`}
+                  >
+                    <span>{item.icon}</span>
+                    <span className="font-space">{item.label}</span>
+                  </Link>
+                </motion.div>
+              );
+            })}
+          </div>
+
+          {/* Auth Section */}
+          <div className="hidden md:flex items-center space-x-4">
+            {currentUser ? (
+              <motion.div 
+                className="flex items-center space-x-4"
+                variants={itemVariants}
+              >
+                <div className="flex items-center space-x-3 bg-space-purple bg-opacity-30 px-4 py-2 rounded-full border border-cosmic-purple border-opacity-30">
+                  <div className="w-8 h-8 bg-cosmic-purple rounded-full flex items-center justify-center">
+                    <span className="text-white text-sm font-bold">
+                      {currentUser.email?.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                  <span className="text-cosmic-green font-space text-sm">
+                    {currentUser.email}
+                  </span>
+                </div>
+                <Button variant="danger" size="small" onClick={handleLogout}>
+                  Выйти
+                </Button>
+              </motion.div>
+            ) : (
+              <motion.div 
+                className="flex items-center space-x-3"
+                variants={itemVariants}
+              >
+                <Button 
+                  variant="secondary" 
+                  size="small"
+                  onClick={() => navigate('/login')}
+                >
+                  Вход
+                </Button>
+                <Button 
+                  variant="primary" 
+                  size="small"
+                  onClick={() => navigate('/register')}
+                >
+                  Регистрация
+                </Button>
+              </motion.div>
+            )}
+          </div>
+
+          {/* Mobile Menu Button */}
+          <div className="md:hidden">
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="text-cosmic-purple hover:text-cosmic-blue transition-colors duration-300 p-2"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {isMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {isMenuOpen && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="md:hidden bg-space-purple bg-opacity-20 rounded-lg mt-2 overflow-hidden"
+            >
+              <div className="px-4 py-3 space-y-3">
+                {navItems.map((item) => {
+                  if (item.protected && !currentUser) return null;
+                  
+                  return (
+                    <Link
+                      key={item.path}
+                      to={item.path}
+                      onClick={() => setIsMenuOpen(false)}
+                      className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-all duration-300 ${
+                        isActive(item.path)
+                          ? 'bg-cosmic-purple bg-opacity-30 text-cosmic-purple'
+                          : 'text-gray-300 hover:text-cosmic-blue hover:bg-cosmic-blue hover:bg-opacity-10'
+                      }`}
+                    >
+                      <span>{item.icon}</span>
+                      <span className="font-space">{item.label}</span>
+                    </Link>
+                  );
+                })}
+                
+                {currentUser ? (
+                  <div className="pt-3 border-t border-cosmic-purple border-opacity-30">
+                    <div className="flex items-center space-x-3 px-3 py-2 mb-3">
+                      <div className="w-8 h-8 bg-cosmic-purple rounded-full flex items-center justify-center">
+                        <span className="text-white text-sm font-bold">
+                          {currentUser.email?.charAt(0).toUpperCase()}
+                        </span>
+                      </div>
+                      <span className="text-cosmic-green font-space text-sm">
+                        {currentUser.email}
+                      </span>
+                    </div>
+                    <Button 
+                      variant="danger" 
+                      size="small" 
+                      className="w-full"
+                      onClick={handleLogout}
+                    >
+                      Выйти
+                    </Button>
+                  </div>
+                ) : (
+                  <div className="pt-3 border-t border-cosmic-purple border-opacity-30 space-y-2">
+                    <Button 
+                      variant="secondary" 
+                      size="small"
+                      className="w-full"
+                      onClick={() => {
+                        navigate('/login');
+                        setIsMenuOpen(false);
+                      }}
+                    >
+                      Вход
+                    </Button>
+                    <Button 
+                      variant="primary" 
+                      size="small"
+                      className="w-full"
+                      onClick={() => {
+                        navigate('/register');
+                        setIsMenuOpen(false);
+                      }}
+                    >
+                      Регистрация
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.nav>
+  );
+};
+
+export default CosmicNavigation;
diff --git a/frontend/src/components/ui/Button.jsx b/frontend/src/components/ui/Button.jsx
new file mode 100644
index 0000000..5bb0c51
--- /dev/null
+++ b/frontend/src/components/ui/Button.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Button = ({ 
+  children, 
+  variant = 'primary', 
+  size = 'medium', 
+  disabled = false, 
+  loading = false,
+  className = '',
+  onClick,
+  type = 'button',
+  ...props 
+}) => {
+  const baseClasses = 'inline-flex items-center justify-center font-bold rounded-full transition-all duration-300 transform focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cosmic-purple disabled:opacity-50 disabled:cursor-not-allowed';
+  
+  const variants = {
+    primary: 'cosmic-button text-white',
+    secondary: 'bg-transparent border-2 border-cosmic-blue text-cosmic-blue hover:bg-cosmic-blue hover:text-white',
+    danger: 'bg-red-600 hover:bg-red-700 text-white shadow-lg hover:shadow-red-500/25',
+    ghost: 'text-cosmic-purple hover:bg-cosmic-purple hover:bg-opacity-10',
+  };
+  
+  const sizes = {
+    small: 'px-4 py-2 text-sm',
+    medium: 'px-6 py-3 text-base',
+    large: 'px-8 py-4 text-lg',
+  };
+  
+  const buttonClasses = `${baseClasses} ${variants[variant]} ${sizes[size]} ${className}`;
+  
+  return (
+    <motion.button
+      type={type}
+      className={buttonClasses}
+      disabled={disabled || loading}
+      onClick={onClick}
+      whileHover={{ scale: disabled ? 1 : 1.05 }}
+      whileTap={{ scale: disabled ? 1 : 0.95 }}
+      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+      {...props}
+    >
+      {loading && (
+        <div className="loading-spinner mr-2" />
+      )}
+      {children}
+    </motion.button>
+  );
+};
+
+export default Button;
diff --git a/frontend/src/components/ui/Card.jsx b/frontend/src/components/ui/Card.jsx
new file mode 100644
index 0000000..fd6b63e
--- /dev/null
+++ b/frontend/src/components/ui/Card.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Card = ({ 
+  children, 
+  className = '', 
+  hover = true,
+  glow = false,
+  onClick,
+  ...props 
+}) => {
+  const baseClasses = 'cosmic-card transition-all duration-300';
+  const hoverClasses = hover ? 'hover:transform hover:-translate-y-2 cursor-pointer' : '';
+  const glowClasses = glow ? 'shadow-cosmic hover:shadow-cosmic-lg' : '';
+  
+  const cardClasses = `${baseClasses} ${hoverClasses} ${glowClasses} ${className}`;
+  
+  const cardVariants = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    hover: hover ? { 
+      y: -8,
+      boxShadow: '0 20px 50px rgba(138, 43, 226, 0.3)',
+      transition: { type: 'spring', stiffness: 300 }
+    } : {},
+  };
+  
+  return (
+    <motion.div
+      className={cardClasses}
+      variants={cardVariants}
+      initial="initial"
+      animate="animate"
+      whileHover="hover"
+      onClick={onClick}
+      transition={{ duration: 0.3 }}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default Card;
diff --git a/frontend/src/components/ui/Input.jsx b/frontend/src/components/ui/Input.jsx
new file mode 100644
index 0000000..3a28ae8
--- /dev/null
+++ b/frontend/src/components/ui/Input.jsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+const Input = ({ 
+  label, 
+  type = 'text', 
+  value, 
+  onChange, 
+  placeholder,
+  error,
+  disabled = false,
+  required = false,
+  className = '',
+  ...props 
+}) => {
+  const [focused, setFocused] = useState(false);
+  const [hasValue, setHasValue] = useState(!!value);
+  
+  const handleChange = (e) => {
+    setHasValue(!!e.target.value);
+    onChange?.(e);
+  };
+  
+  const inputClasses = `cosmic-input ${error ? 'border-red-500' : ''} ${className}`;
+  
+  return (
+    <div className="relative mb-6">
+      {label && (
+        <motion.label
+          className={`absolute left-4 transition-all duration-300 pointer-events-none ${
+            focused || hasValue 
+              ? 'top-2 text-xs text-cosmic-purple' 
+              : 'top-4 text-base text-gray-400'
+          }`}
+          animate={{
+            y: focused || hasValue ? -8 : 0,
+            scale: focused || hasValue ? 0.85 : 1,
+            color: focused ? 'var(--cosmic-purple)' : error ? '#ef4444' : '#9ca3af'
+          }}
+        >
+          {label} {required && '*'}
+        </motion.label>
+      )}
+      
+      <input
+        type={type}
+        value={value}
+        onChange={handleChange}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        placeholder={!label ? placeholder : ''}
+        disabled={disabled}
+        className={inputClasses}
+        {...props}
+      />
+      
+      {error && (
+        <motion.p
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-red-400 text-sm mt-2 ml-1"
+        >
+          {error}
+        </motion.p>
+      )}
+    </div>
+  );
+};
+
+export default Input;
diff --git a/frontend/src/components/ui/Loading.jsx b/frontend/src/components/ui/Loading.jsx
new file mode 100644
index 0000000..bd128ea
--- /dev/null
+++ b/frontend/src/components/ui/Loading.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Loading = ({ 
+  message = 'Загрузка...', 
+  size = 'medium',
+  className = '' 
+}) => {
+  const sizes = {
+    small: 'w-6 h-6',
+    medium: 'w-8 h-8', 
+    large: 'w-12 h-12',
+  };
+
+  const textSizes = {
+    small: 'text-sm',
+    medium: 'text-base',
+    large: 'text-xl',
+  };
+
+  return (
+    <motion.div 
+      className={`flex flex-col items-center justify-center space-y-4 ${className}`}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className={`loading-spinner ${sizes[size]}`} />
+      
+      <motion.p 
+        className={`text-cosmic-blue font-space ${textSizes[size]}`}
+        animate={{ opacity: [0.5, 1, 0.5] }}
+        transition={{ duration: 2, repeat: Infinity }}
+      >
+        {message}
+      </motion.p>
+      
+      {/* Дополнительные звезды для космического эффекта */}
+      <div className="relative">
+        {[...Array(5)].map((_, i) => (
+          <motion.div
+            key={i}
+            className="absolute w-1 h-1 bg-white rounded-full"
+            style={{
+              left: `${Math.random() * 100}px`,
+              top: `${Math.random() * 50}px`,
+            }}
+            animate={{ 
+              opacity: [0, 1, 0],
+              scale: [0, 1, 0]
+            }}
+            transition={{ 
+              duration: 2,
+              delay: i * 0.2,
+              repeat: Infinity 
+            }}
+          />
+        ))}
+      </div>
+    </motion.div>
+  );
+};
+
+export default Loading;
diff --git a/frontend/src/components/ui/index.js b/frontend/src/components/ui/index.js
new file mode 100644
index 0000000..4d516b8
--- /dev/null
+++ b/frontend/src/components/ui/index.js
@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export { default as Card } from './Card';
+export { default as Input } from './Input';
+export { default as Loading } from './Loading';
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 659fc00..d48d164 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-import './styles.css';
+import './styles/globals.css';
 
 console.log('Application starting...');
 
diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js
index 44b2c89..b655130 100644
--- a/frontend/src/pages/Home/index.js
+++ b/frontend/src/pages/Home/index.js
@@ -1,95 +1,109 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
 import StarBackground from '../../components/StarBackground';
 import Footer from '../../components/Footer';
+import { Button } from '../../components/ui';
+import { useAuth } from '../../contexts/AuthContext';
 
 const Home = () => {
+  const navigate = useNavigate();
+  const { currentUser } = useAuth();
+
+  const heroVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { 
+      opacity: 1, 
+      y: 0,
+      transition: { 
+        duration: 0.8,
+        staggerChildren: 0.2
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: { opacity: 1, y: 0 }
+  };
 
   return (
-    <div style={{
-      position: 'relative',
-      width: '100%',
-      height: '100vh',
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column'
-    }}>
+    <div className="relative w-full h-screen overflow-hidden flex flex-col">
       {/* Звёздный фон */}
-      <div style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: 1
-      }}>
+      <div className="absolute inset-0 z-0">
         <StarBackground isMainPage={true} />
       </div>
       
       {/* Основной контент */}
-      <div style={{
-        position: 'relative',
-        width: '100%',
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 10,
-        color: 'white',
-        textAlign: 'center',
-        padding: '20px',
-        backgroundColor: 'rgba(10, 10, 26, 0.7)'
-      }}>
-      <h1 style={{
-        fontSize: '3rem',
-        marginBottom: '1.5rem',
-        background: 'linear-gradient(90deg, #8a2be2, #00ff9d)',
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        fontFamily: '"Press Start 2P", cursive',
-      }}>
-        Space SQL
-      </h1>
-      
-      <p style={{
-        fontSize: '1.5rem',
-        marginBottom: '3rem',
-        fontFamily: '"Roboto Mono", monospace',
-      }}>
-        Изучайте SQL, покоряя космос
-      </p>
-      
-      <Link 
-        to="/lessons" 
-        style={{
-          padding: '1rem 2.5rem',
-          background: 'linear-gradient(45deg, #8a2be2, #00ff9d)',
-          color: 'white',
-          border: 'none',
-          borderRadius: '50px',
-          fontSize: '1.2rem',
-          fontWeight: 'bold',
-          cursor: 'pointer',
-          textDecoration: 'none',
-          transition: 'all 0.3s ease',
-          boxShadow: '0 4px 15px rgba(138, 43, 226, 0.4)',
-        }}
-      >
-        Начать обучение
-      </Link>
+      <div className="relative flex-1 flex flex-col justify-center items-center z-10 text-center px-4">
+        <div className="bg-space-dark bg-opacity-70 backdrop-blur-lg rounded-3xl p-8 lg:p-12 max-w-4xl mx-auto border border-cosmic-purple border-opacity-30">
+          <motion.div
+            variants={heroVariants}
+            initial="hidden"
+            animate="visible"
+            className="space-y-8"
+          >
+            <motion.h1 
+              variants={itemVariants}
+              className="cosmic-title text-5xl lg:text-7xl"
+            >
+              Space SQL
+            </motion.h1>
+            
+            <motion.p 
+              variants={itemVariants}
+              className="text-xl lg:text-2xl text-gray-300 font-space max-w-2xl mx-auto leading-relaxed"
+            >
+              Изучайте SQL, покоряя космос
+            </motion.p>
+            
+            <motion.div 
+              variants={itemVariants}
+              className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+            >
+              <Button 
+                size="large"
+                onClick={() => navigate(currentUser ? '/lessons' : '/register')}
+                className="text-lg px-10 py-4"
+              >
+                🚀 {currentUser ? 'Продолжить обучение' : 'Начать обучение'}
+              </Button>
+              
+              {!currentUser && (
+                <Button 
+                  variant="secondary"
+                  size="large"
+                  onClick={() => navigate('/login')}
+                  className="text-lg px-10 py-4"
+                >
+                  Войти в систему
+                </Button>
+              )}
+            </motion.div>
+            
+            <motion.div 
+              variants={itemVariants}
+              className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 text-sm"
+            >
+              <div className="flex flex-col items-center space-y-2">
+                <span className="text-2xl">📚</span>
+                <span className="text-cosmic-blue font-space">Интерактивные уроки</span>
+              </div>
+              <div className="flex flex-col items-center space-y-2">
+                <span className="text-2xl">⚡</span>
+                <span className="text-cosmic-green font-space">Практические задания</span>
+              </div>
+              <div className="flex flex-col items-center space-y-2">
+                <span className="text-2xl">🌟</span>
+                <span className="text-cosmic-purple font-space">Космический опыт</span>
+              </div>
+            </motion.div>
+          </motion.div>
+        </div>
       </div>
       
       {/* Футер */}
-      <div style={{
-        position: 'relative',
-        zIndex: 10,
-        width: '100%',
-        backgroundColor: 'rgba(15, 12, 41, 0.8)',
-        backdropFilter: 'blur(5px)',
-        padding: '1rem 0',
-        marginTop: 'auto'
-      }}>
+      <div className="relative z-10 bg-space-dark bg-opacity-80 backdrop-blur-sm border-t border-cosmic-purple border-opacity-20">
         <Footer />
       </div>
     </div>
diff --git a/frontend/src/pages/Lessons/index.js b/frontend/src/pages/Lessons/index.js
index 5e041d4..3233468 100644
--- a/frontend/src/pages/Lessons/index.js
+++ b/frontend/src/pages/Lessons/index.js
@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
 import LessonsList from '../../components/LessonsList';
+import { Button } from '../../components/ui';
 import axios from 'axios';
 
 export default function Lessons() {
@@ -47,37 +49,79 @@ export default function Lessons() {
 
   if (loading) {
     return (
-      <div className="flex justify-center items-center h-64">
-        <div className="text-xl text-blue-500">Загрузка уроков...</div>
+      <div className="flex justify-center items-center min-h-screen">
+        <motion.div 
+          className="text-center space-y-4"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+        >
+          <div className="loading-spinner mx-auto" />
+          <p className="text-cosmic-blue text-xl font-space">Загрузка уроков...</p>
+        </motion.div>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="p-4 bg-red-100 border border-red-400 text-red-700 rounded">
-        <p className="font-bold">Ошибка</p>
-        <p>{error}</p>
-        <button 
-          onClick={() => window.location.reload()} 
-          className="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      <div className="flex justify-center items-center min-h-screen p-6">
+        <motion.div 
+          className="text-center max-w-md"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
         >
-          Попробовать снова
-        </button>
+          <div className="bg-red-900 bg-opacity-30 border border-red-500 rounded-lg p-6">
+            <div className="text-4xl mb-4">⚠️</div>
+            <h2 className="text-xl font-space text-red-300 mb-4">Ошибка загрузки</h2>
+            <p className="text-gray-400 mb-6">{error}</p>
+            <Button 
+              variant="danger"
+              onClick={() => window.location.reload()}
+            >
+              Попробовать снова
+            </Button>
+          </div>
+        </motion.div>
       </div>
     );
   }
 
   return (
-    <div className="lessons-page container mx-auto p-6">
-      <h1 className="text-3xl font-bold mb-6 text-white">Уроки SQL</h1>
-      {lessons.length > 0 ? (
-        <LessonsList lessons={lessons} />
-      ) : (
-        <div className="text-center py-10">
-          <p className="text-gray-400 text-lg">Нет доступных уроков</p>
-        </div>
-      )}
+    <div className="min-h-screen">
+      <div className="max-w-7xl mx-auto">
+        <motion.div 
+          className="text-center py-12"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <h1 className="cosmic-title text-4xl lg:text-5xl mb-4">
+            Уроки SQL
+          </h1>
+          <p className="text-xl text-gray-300 font-space max-w-2xl mx-auto">
+            Изучайте SQL шаг за шагом в космическом путешествии
+          </p>
+        </motion.div>
+
+        {lessons.length > 0 ? (
+          <LessonsList lessons={lessons} />
+        ) : (
+          <motion.div 
+            className="text-center py-20"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3 }}
+          >
+            <div className="text-6xl mb-6">🌌</div>
+            <p className="text-gray-400 text-lg font-space">
+              Пока нет доступных уроков
+            </p>
+            <p className="text-gray-500 text-sm mt-2">
+              Скоро здесь появятся захватывающие космические приключения!
+            </p>
+          </motion.div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
new file mode 100644
index 0000000..007a19a
--- /dev/null
+++ b/frontend/src/styles/globals.css
@@ -0,0 +1,217 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&family=Roboto+Mono:wght@300;400;500;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* CSS Custom Properties для космической темы */
+:root {
+  --space-dark: #0d0221;
+  --space-purple: #2d0b59;
+  --space-deep: #0f0c29;
+  --space-medium: #302b63;
+  --space-light: #24243e;
+  
+  --cosmic-blue: #2de2e6;
+  --cosmic-purple: #8a2be2;
+  --cosmic-pink: #ff2e88;
+  --cosmic-green: #00ff9d;
+  --cosmic-cyan: #00aaff;
+  --cosmic-magenta: #ff00ff;
+  
+  --starlight: #ffffff;
+  --text-muted: #b8b8b8;
+  
+  --font-cosmic: "Press Start 2P", cursive;
+  --font-mono: "Roboto Mono", monospace;
+  --font-space: "Orbitron", sans-serif;
+  
+  --cosmic-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  --cosmic-purple-gradient: linear-gradient(90deg, #8a2be2, #00ff9d);
+  --cosmic-blue-gradient: linear-gradient(45deg, #2de2e6, #8a2be2);
+  --space-dark-gradient: linear-gradient(135deg, #0a081a 0%, #201d47 50%, #18182f 100%);
+}
+
+/* Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: var(--font-mono);
+  background: var(--space-dark);
+  color: var(--starlight);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Utility Classes */
+@layer components {
+  .cosmic-button {
+    @apply px-6 py-3 rounded-full font-bold text-white cursor-pointer transition-all duration-300 transform hover:scale-105;
+    background: var(--cosmic-purple-gradient);
+    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
+  }
+  
+  .cosmic-button:hover {
+    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7);
+    transform: translateY(-2px) scale(1.05);
+  }
+  
+  .cosmic-button:active {
+    transform: translateY(1px) scale(1.02);
+  }
+  
+  .cosmic-card {
+    @apply bg-opacity-80 backdrop-blur-sm rounded-2xl p-6 border border-opacity-30;
+    background: rgba(26, 26, 46, 0.8);
+    border-color: var(--cosmic-purple);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+  
+  .cosmic-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(138, 43, 226, 0.3);
+  }
+  
+  .cosmic-input {
+    @apply w-full p-4 rounded-lg font-mono text-white bg-opacity-50 border border-opacity-50 outline-none transition-all duration-300;
+    background: rgba(0, 0, 0, 0.5);
+    border-color: var(--cosmic-blue);
+  }
+  
+  .cosmic-input:focus {
+    border-color: var(--cosmic-purple);
+    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
+  }
+  
+  .glow-text {
+    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
+  }
+  
+  .cosmic-title {
+    @apply font-cosmic text-4xl lg:text-6xl mb-6;
+    background: var(--cosmic-purple-gradient);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
+  }
+  
+  .page-transition {
+    @apply transition-all duration-500 ease-out;
+  }
+  
+  .loading-spinner {
+    @apply w-8 h-8 border-4 border-cosmic-purple border-t-transparent rounded-full animate-spin;
+  }
+}
+
+/* Animations */
+@keyframes float {
+  0% { transform: translatey(0px); }
+  50% { transform: translatey(-10px); }
+  100% { transform: translatey(0px); }
+}
+
+@keyframes twinkle {
+  0% { opacity: 0.3; }
+  100% { opacity: 1; }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); }
+  50% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.8); }
+}
+
+@keyframes slide-up {
+  0% { opacity: 0; transform: translateY(20px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+/* Star Background Styles */
+.star-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: -1;
+  background: var(--cosmic-gradient);
+}
+
+.star-field {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  will-change: transform;
+  overflow: hidden;
+}
+
+.star {
+  position: absolute;
+  background-color: white;
+  border-radius: 50%;
+  pointer-events: none;
+  will-change: transform;
+  backface-visibility: hidden;
+  transition: transform 0.1s ease-out;
+  animation: twinkle 3s infinite alternate;
+}
+
+.content-layer {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .cosmic-title {
+    @apply text-3xl;
+  }
+  
+  .cosmic-card {
+    @apply p-4;
+  }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(13, 2, 33, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--cosmic-purple);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--cosmic-blue);
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..fbdeb91
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,81 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Космическая палитра
+        space: {
+          'dark': '#0d0221',
+          'purple': '#2d0b59',
+          'deep': '#0f0c29',
+          'medium': '#302b63',
+          'light': '#24243e',
+        },
+        cosmic: {
+          'blue': '#2de2e6',
+          'purple': '#8a2be2',
+          'pink': '#ff2e88',
+          'green': '#00ff9d',
+          'cyan': '#00aaff',
+          'magenta': '#ff00ff',
+        },
+        starlight: '#ffffff',
+        'text-muted': '#b8b8b8',
+      },
+      fontFamily: {
+        'cosmic': ['"Press Start 2P"', 'cursive'],
+        'mono': ['"Roboto Mono"', 'monospace'],
+        'space': ['"Orbitron"', 'sans-serif'],
+      },
+      backgroundImage: {
+        'cosmic-gradient': 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)',
+        'cosmic-purple': 'linear-gradient(90deg, #8a2be2, #00ff9d)',
+        'cosmic-blue': 'linear-gradient(45deg, #2de2e6, #8a2be2)',
+        'space-dark': 'linear-gradient(135deg, #0a081a 0%, #201d47 50%, #18182f 100%)',
+      },
+      boxShadow: {
+        'cosmic': '0 0 20px rgba(138, 43, 226, 0.5)',
+        'cosmic-lg': '0 0 30px rgba(138, 43, 226, 0.7)',
+        'glow': '0 0 15px rgba(45, 226, 230, 0.5)',
+        'glow-lg': '0 0 25px rgba(45, 226, 230, 0.7)',
+      },
+      animation: {
+        'float': 'float 6s ease-in-out infinite',
+        'twinkle': 'twinkle 3s infinite alternate',
+        'glow-pulse': 'glow-pulse 2s infinite',
+        'slide-up': 'slide-up 0.5s ease-out',
+        'fade-in': 'fade-in 0.3s ease-out',
+      },
+      keyframes: {
+        float: {
+          '0%': { transform: 'translatey(0px)' },
+          '50%': { transform: 'translatey(-10px)' },
+          '100%': { transform: 'translatey(0px)' },
+        },
+        twinkle: {
+          '0%': { opacity: '0.3' },
+          '100%': { opacity: '1' },
+        },
+        'glow-pulse': {
+          '0%, 100%': { boxShadow: '0 0 10px rgba(138, 43, 226, 0.5)' },
+          '50%': { boxShadow: '0 0 20px rgba(138, 43, 226, 0.8)' },
+        },
+        'slide-up': {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+      },
+      backdropBlur: {
+        'cosmic': '5px',
+      },
+    },
+  },
+  plugins: [],
+}

From d74cc5a0db3497978ad5cecb3cd2a861729cce53 Mon Sep 17 00:00:00 2001
From: Lins <alina.cheremiskina@gmail.com>
Date: Sat, 9 Aug 2025 15:10:19 +0300
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=B2=D0=B8=D1=81?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=BE=D1=81=D1=82=D0=B5=D0=B9=20=D0=B8=20=D1=83?=
 =?UTF-8?q?=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B7=D0=B2=D0=B5=D0=B7?=
 =?UTF-8?q?=D0=B4=D0=BD=D0=BE=D0=B3=D0=BE=20=D1=84=D0=BE=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Обновлен пакет tailwindcss до версии 3.4.17 в package.json и package-lock.json.
- Оптимизирован компонент StarBackground для улучшения анимации с добавлением эффекта магнитного притяжения к курсору.
- Реализованы отдельные ссылки для анимации обновления звезд и плавного отслеживания движения мыши.
---
 frontend/package-lock.json                | 103 ++++---
 frontend/package.json                     |   2 +-
 frontend/postcss.config.js                |   7 +
 frontend/src/components/StarBackground.js |  78 ++++--
 migrate.sql                               | 324 ++++++++++++++++++++++
 5 files changed, 438 insertions(+), 76 deletions(-)
 create mode 100644 frontend/postcss.config.js
 create mode 100644 migrate.sql

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5dce88a..9fe9536 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,7 +20,7 @@
       "devDependencies": {
         "autoprefixer": "^10.4.21",
         "postcss": "^8.5.6",
-        "tailwindcss": "^4.1.11"
+        "tailwindcss": "^3.4.17"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -14022,55 +14022,6 @@
         }
       }
     },
-    "node_modules/react-scripts/node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/react-scripts/node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15922,11 +15873,53 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
-      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
-      "dev": true,
-      "license": "MIT"
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
     },
     "node_modules/tapable": {
       "version": "2.2.2",
diff --git a/frontend/package.json b/frontend/package.json
index 2656701..d352fd8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,6 +38,6 @@
   "devDependencies": {
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^3.4.17"
   }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..72e309d
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+
diff --git a/frontend/src/components/StarBackground.js b/frontend/src/components/StarBackground.js
index a5e9cb0..4682d0c 100644
--- a/frontend/src/components/StarBackground.js
+++ b/frontend/src/components/StarBackground.js
@@ -4,8 +4,11 @@ import '../styles.css';
 const StarBackground = ({ children, isMainPage = true }) => {
   const [stars, setStars] = useState([]);
   const containerRef = useRef(null);
-  const animationFrameRef = useRef(null);
+  // Separate RAF refs for smoothing loop and star update loop
+  const smoothRafRef = useRef(null);
+  const starsRafRef = useRef(null);
   const mousePosition = useRef({ x: 0, y: 0 });
+  const cursorPx = useRef({ x: 0, y: 0 });
 
   // Create stars with more variety
   useEffect(() => {
@@ -13,7 +16,16 @@ const StarBackground = ({ children, isMainPage = true }) => {
     const newStars = [];
     
     for (let i = 0; i < starCount; i++) {
-      const size = isMainPage ? Math.random() * 3 + 1 : Math.random() * 2 + 0.5;
+      // Size distribution: 55% small (1-2.5), 35% medium (2.5-4.5), 10% large (5-8)
+      const r = Math.random();
+      let size;
+      if (r < 0.55) {
+        size = isMainPage ? Math.random() * 1.5 + 1 : Math.random() * 1 + 0.5;
+      } else if (r < 0.9) {
+        size = isMainPage ? Math.random() * 2 + 2.5 : Math.random() * 1.5 + 1.5;
+      } else {
+        size = isMainPage ? Math.random() * 3 + 5 : Math.random() * 2 + 3.5;
+      }
       const opacity = isMainPage ? Math.random() * 0.8 + 0.2 : Math.random() * 0.5 + 0.1;
       
       newStars.push({
@@ -32,13 +44,13 @@ const StarBackground = ({ children, isMainPage = true }) => {
     setStars(newStars);
   }, [isMainPage]);
 
-  // Update stars position based on mouse movement with enhanced parallax
+  // Update stars position based on mouse movement with enhanced parallax + subtle magnetic effect
   const updateStars = useCallback(() => {
     if (!isMainPage) return;
     
-    const starElements = document.querySelectorAll('.star');
-    const time = Date.now();
     const container = containerRef.current;
+    const starElements = container ? container.querySelectorAll('.star') : [];
+    const time = Date.now();
     if (!container) return;
     
     // Get container dimensions for center calculation
@@ -61,6 +73,23 @@ const StarBackground = ({ children, isMainPage = true }) => {
       const offsetX = mousePosition.current.x * star.speed * parallaxMultiplier * 0.6; // Reduced multiplier
       const offsetY = mousePosition.current.y * star.speed * parallaxMultiplier * 0.6;
       
+      // Subtle magnetic attraction towards the cursor when nearby
+      const starPosX = (star.x / 100) * rect.width;
+      const starPosY = (star.y / 100) * rect.height;
+      const toCursorX = cursorPx.current.x - starPosX;
+      const toCursorY = cursorPx.current.y - starPosY;
+      const distToCursor = Math.hypot(toCursorX, toCursorY);
+      const magnetRadius = 140; // px
+      const magnetStrength = 0.35; // base strength
+      let magnetX = 0;
+      let magnetY = 0;
+      if (distToCursor > 0 && distToCursor < magnetRadius) {
+        const influence = 1 - distToCursor / magnetRadius; // 0..1
+        const strength = magnetStrength * influence * influence * star.speed; // ease-in
+        magnetX = toCursorX * strength;
+        magnetY = toCursorY * strength;
+      }
+
       // Add dynamic twinkling effect
       const twinkle = Math.sin(time * star.twinkleSpeed + star.twinkleOffset) * 0.4 + 0.6;
       const currentOpacity = star.opacity * twinkle;
@@ -70,7 +99,7 @@ const StarBackground = ({ children, isMainPage = true }) => {
       const scale = 1 + (moveIntensity * star.speed * 0.2);
       
       // Apply transformations and styles with enhanced effects
-      starEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+      starEl.style.transform = `translate(${offsetX + magnetX}px, ${offsetY + magnetY}px) scale(${scale})`;
       starEl.style.opacity = currentOpacity;
       
       // Add color shift based on position and time
@@ -80,9 +109,10 @@ const StarBackground = ({ children, isMainPage = true }) => {
     });
     
     // Continue the animation loop
-    animationFrameRef.current = requestAnimationFrame(updateStars);
+    starsRafRef.current = requestAnimationFrame(updateStars);
   }, [isMainPage, stars]);
 
+
   // Mouse move handler with smoother tracking
   useEffect(() => {
     if (!isMainPage) return;
@@ -101,6 +131,8 @@ const StarBackground = ({ children, isMainPage = true }) => {
       // Calculate position relative to center (-0.5 to 0.5)
       targetX = ((e.clientX - rect.left) / rect.width - 0.5) * 60; // Increased range for more movement
       targetY = ((e.clientY - rect.top) / rect.height - 0.5) * 60;
+      // Store absolute cursor position in container space for magnet effect
+      cursorPx.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
     };
 
     const animate = () => {
@@ -112,27 +144,33 @@ const StarBackground = ({ children, isMainPage = true }) => {
       mousePosition.current = { x: currentX, y: currentY };
       
       // Continue the animation loop
-      animationFrameRef.current = requestAnimationFrame(animate);
+      smoothRafRef.current = requestAnimationFrame(animate);
     };
 
-    const container = containerRef.current;
-    if (container) {
-      container.addEventListener('mousemove', handleMouseMove);
-      // Start the animation loop
-      animationFrameRef.current = requestAnimationFrame(animate);
-    }
+    // Track mouse globally so фон позади контента тоже реагирует
+    window.addEventListener('mousemove', handleMouseMove);
+    // Start the animation loop
+    smoothRafRef.current = requestAnimationFrame(animate);
 
     return () => {
-      if (container) {
-        container.removeEventListener('mousemove', handleMouseMove);
-      }
+      window.removeEventListener('mousemove', handleMouseMove);
       // Clean up animation frame
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
+      if (smoothRafRef.current) cancelAnimationFrame(smoothRafRef.current);
+      if (starsRafRef.current) cancelAnimationFrame(starsRafRef.current);
     };
   }, [isMainPage]);
 
+  // Start the star update loop when stars are created
+  useEffect(() => {
+    if (!isMainPage) return;
+    if (stars.length === 0) return;
+    // Kick off the loop once, it will re-schedule itself
+    starsRafRef.current = requestAnimationFrame(updateStars);
+    return () => {
+      if (starsRafRef.current) cancelAnimationFrame(starsRafRef.current);
+    };
+  }, [isMainPage, stars, updateStars]);
+
   // Generate star elements with optimized rendering
   const renderStars = () => {
     return stars.map((star) => (
diff --git a/migrate.sql b/migrate.sql
new file mode 100644
index 0000000..9ac8ac9
--- /dev/null
+++ b/migrate.sql
@@ -0,0 +1,324 @@
+SET SEARCH_PATH TO public, "$user","public";
+
+-- Lock Database
+UPDATE databasechangeloglock SET LOCKED = TRUE, LOCKEDBY = 'DESKTOP-072BN2D (10.0.8.47)', LOCKGRANTED = NOW() WHERE ID = 1 AND LOCKED = FALSE;
+
+SET SEARCH_PATH TO public, "$user","public";
+
+SET SEARCH_PATH TO public, "$user","public";
+
+-- *********************************************************************
+-- Update Database Script
+-- *********************************************************************
+-- Change Log: src/main/resources/db/changelog/db.changelog-master.xml
+-- Ran at: 09.08.2025, 14:18
+-- Against: admin@jdbc:postgresql://localhost:5432/space_sql
+-- Liquibase version: 4.24.0
+-- *********************************************************************
+
+-- Changeset src/main/resources/db/changelog/V1.0__initial_schema.xml::1.0::space-sql
+SET SEARCH_PATH TO public, "$user","public";
+
+CREATE TABLE lesson (id BIGINT GENERATED BY DEFAULT AS IDENTITY NOT NULL, title VARCHAR(255) NOT NULL, description TEXT NOT NULL, topic VARCHAR(100) NOT NULL, difficulty VARCHAR(50) NOT NULL, order_index INTEGER NOT NULL, CONSTRAINT lesson_pkey PRIMARY KEY (id));
+
+CREATE TABLE task (id BIGINT GENERATED BY DEFAULT AS IDENTITY NOT NULL, lesson_id BIGINT NOT NULL, title VARCHAR(255) NOT NULL, description TEXT NOT NULL, schema_definition TEXT NOT NULL, solution_query TEXT NOT NULL, order_index INTEGER NOT NULL, CONSTRAINT task_pkey PRIMARY KEY (id), CONSTRAINT fk_task_lesson FOREIGN KEY (lesson_id) REFERENCES lesson(id));
+
+INSERT INTO databasechangelog (ID, AUTHOR, FILENAME, DATEEXECUTED, ORDEREXECUTED, MD5SUM, DESCRIPTION, COMMENTS, EXECTYPE, CONTEXTS, LABELS, LIQUIBASE, DEPLOYMENT_ID) VALUES ('1.0', 'space-sql', 'src/main/resources/db/changelog/V1.0__initial_schema.xml', NOW(), 8, '9:617a5a5ca3b61504568242ca96dc9b0f', 'createTable tableName=lesson; createTable tableName=task', '', 'EXECUTED', NULL, NULL, '4.24.0', NULL);
+
+-- Changeset src/main/resources/db/changelog/V1.1__initial_data.xml::1::space-sql
+SET SEARCH_PATH TO public, "$user","public";
+
+INSERT INTO lesson (id, title, description, topic, difficulty, order_index) VALUES ('1', 'Основы SELECT', 'Научитесь извлекать данные из таблиц с помощью базовых запросов SELECT', 'Основы SQL', 'Легкий', '1');
+
+INSERT INTO lesson (id, title, description, topic, difficulty, order_index) VALUES ('2', 'JOIN и отношения', 'Освойте соединение таблиц и работу с реляционными данными', 'Работа с несколькими таблицами', 'Средний', '2');
+
+INSERT INTO lesson (id, title, description, topic, difficulty, order_index) VALUES ('3', 'Фильтрация данных', 'Научитесь точно фильтровать данные с помощью WHERE и HAVING', 'Фильтрация и сортировка', 'Легкий', '3');
+
+INSERT INTO lesson (id, title, description, topic, difficulty, order_index) VALUES ('4', 'Сортировка и агрегация', 'Используйте ORDER BY и агрегатные функции для анализа данных', 'Фильтрация и сортировка', 'Легкий', '4');
+
+INSERT INTO lesson (id, title, description, topic, difficulty, order_index) VALUES ('5', 'Изменение данных', 'Научитесь добавлять, изменять и удалять данные с помощью INSERT, UPDATE, DELETE', 'Модификация данных', 'Средний', '5');
+
+INSERT INTO lesson (id, title, description, topic, difficulty, order_index) VALUES ('6', 'Подзапросы', 'Освойте мощь подзапросов для сложных выборок данных', 'Продвинутые техники', 'Сложный', '6');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор всех данных', 'Выберите все записи из таблицы users', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), age INT, email VARCHAR(100));', 'SELECT * FROM users;', '1');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор конкретных столбцов', 'Выберите только имена и email пользователей', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), age INT, email VARCHAR(100));', 'SELECT name, email FROM users;', '2');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор с условием', 'Выберите пользователей старше 25 лет', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), age INT, email VARCHAR(100));', 'SELECT * FROM users WHERE age > 25;', '3');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор уникальных значений', 'Выберите уникальные города из таблицы пользователей', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), city VARCHAR(100));', 'SELECT DISTINCT city FROM users;', '4');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор с псевдонимами', 'Выберите имена пользователей с псевдонимом ''Имя''', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100));', 'SELECT name AS ''Имя'' FROM users;', '5');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор с вычислениями', 'Выберите имена и возраст пользователей через 5 лет', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), age INT);', 'SELECT name, age + 5 AS age_in_5_years FROM users;', '6');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор с несколькими условиями', 'Выберите пользователей из Москвы старше 20 лет', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), age INT, city VARCHAR(100));', 'SELECT * FROM users WHERE city = ''Москва'' AND age > 20;', '7');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор с диапазоном', 'Выберите пользователей в возрасте от 20 до 30 лет', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), age INT);', 'SELECT * FROM users WHERE age BETWEEN 20 AND 30;', '8');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор с IN', 'Выберите пользователей из Москвы или Санкт-Петербурга', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), city VARCHAR(100));', 'SELECT * FROM users WHERE city IN (''Москва'', ''Санкт-Петербург'');', '9');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('1', 'Выбор с LIKE', 'Выберите пользователей, чьи имена начинаются на ''А''', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100));', 'SELECT * FROM users WHERE name LIKE ''А%'';', '10');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'Простой INNER JOIN', 'Соедините таблицы users и orders', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, total DECIMAL(10,2));', 'SELECT u.name, o.total FROM users u JOIN orders o ON u.id = o.user_id;', '1');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'LEFT JOIN', 'Выведите всех пользователей, даже если у них нет заказов', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, total DECIMAL(10,2));', 'SELECT u.name, o.total FROM users u LEFT JOIN orders o ON u.id = o.user_id;', '2');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'RIGHT JOIN', 'Выведите все заказы, даже если нет информации о пользователе', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, total DECIMAL(10,2));', 'SELECT u.name, o.total FROM users u RIGHT JOIN orders o ON u.id = o.user_id;', '3');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'FULL JOIN', 'Выведите все записи из обеих таблиц', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, total DECIMAL(10,2));', 'SELECT u.name, o.total FROM users u FULL JOIN orders o ON u.id = o.user_id;', '4');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'Множественные JOIN', 'Соедините 3 таблицы: users, orders и products', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, product_id INT, quantity INT);', 'SELECT u.name, p.name, o.quantity, p.price * o.quantity AS total FROM users u JOIN orders o ON u.id = o.user_id JOIN products p ON o.product_id = p.id;', '5');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'SELF JOIN', 'Найдите пары сотрудников, работающих в одном отделе', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100));', 'SELECT a.name AS employee1, b.name AS employee2, a.department FROM employees a JOIN employees b ON a.department = b.department WHERE a.id < b.id;', '6');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'JOIN с агрегацией', 'Найдите общую сумму заказов для каждого пользователя', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, total DECIMAL(10,2));', 'SELECT u.name, SUM(o.total) AS total_spent FROM users u JOIN orders o ON u.id = o.user_id GROUP BY u.name;', '7');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'JOIN с фильтрацией', 'Найдите пользователей, у которых сумма заказов превышает 1000', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, total DECIMAL(10,2));', 'SELECT u.name, SUM(o.total) AS total_spent FROM users u JOIN orders o ON u.id = o.user_id GROUP BY u.name HAVING SUM(o.total) > 1000;', '8');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'JOIN с сортировкой', 'Выведите список пользователей с количеством их заказов, отсортированный по убыванию', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT);', 'SELECT u.name, COUNT(o.id) AS order_count FROM users u LEFT JOIN orders o ON u.id = o.user_id GROUP BY u.name ORDER BY order_count DESC;', '9');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('2', 'CROSS JOIN', 'Создайте все возможные комбинации цветов и размеров', 'CREATE TABLE colors(color VARCHAR(100)); CREATE TABLE sizes(size VARCHAR(100));', 'SELECT color, size FROM colors CROSS JOIN sizes;', '10');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Простая фильтрация', 'Выберите продукты дороже 1000 рублей', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2));', 'SELECT * FROM products WHERE price > 1000;', '1');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация по дате', 'Выберите заказы, сделанные в 2023 году', 'CREATE TABLE orders(id INT PRIMARY KEY, order_date DATE);', 'SELECT * FROM orders WHERE order_date BETWEEN ''2023-01-01'' AND ''2023-12-31'';', '2');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация по нескольким условиям', 'Выберите активных пользователей из Москвы', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), city VARCHAR(100), is_active BOOLEAN);', 'SELECT * FROM users WHERE city = ''Москва'' AND is_active = true;', '3');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация с OR', 'Выберите пользователей из Москвы или Санкт-Петербурга', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), city VARCHAR(100));', 'SELECT * FROM users WHERE city = ''Москва'' OR city = ''Санкт-Петербург'';', '4');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация с NOT', 'Выберите пользователей не из Москвы', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), city VARCHAR(100));', 'SELECT * FROM users WHERE NOT city = ''Москва'';', '5');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация с LIKE', 'Выберите продукты, название которых содержит ''Pro''', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100));', 'SELECT * FROM products WHERE name LIKE ''%Pro%'';', '6');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация с IN', 'Выберите пользователей с определенными ID', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100));', 'SELECT * FROM users WHERE id IN (1, 3, 5);', '7');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация с NULL', 'Выберите заказы без указанной даты доставки', 'CREATE TABLE orders(id INT PRIMARY KEY, delivery_date DATE);', 'SELECT * FROM orders WHERE delivery_date IS NULL;', '8');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Фильтрация с HAVING', 'Найдите отделы с более чем 5 сотрудниками', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100));', 'SELECT department, COUNT(*) AS employee_count FROM employees GROUP BY department HAVING COUNT(*) > 5;', '9');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('3', 'Комплексная фильтрация', 'Выберите активных пользователей из Москвы или Санкт-Петербурга, зарегистрированных в 2023 году', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), city VARCHAR(100), is_active BOOLEAN, registration_date DATE);', 'SELECT * FROM users WHERE is_active = true AND (city = ''Москва'' OR city = ''Санкт-Петербург'') AND registration_date BETWEEN ''2023-01-01'' AND ''2023-12-31'';', '10');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Простая сортировка', 'Отсортируйте пользователей по имени в алфавитном порядке', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100));', 'SELECT * FROM users ORDER BY name;', '1');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Сортировка по убыванию', 'Отсортируйте продукты по цене от дорогих к дешевым', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2));', 'SELECT * FROM products ORDER BY price DESC;', '2');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Множественная сортировка', 'Отсортируйте сотрудников по отделу, а затем по имени', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100));', 'SELECT * FROM employees ORDER BY department, name;', '3');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Подсчет записей', 'Посчитайте количество пользователей', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100));', 'SELECT COUNT(*) AS user_count FROM users;', '4');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Группировка', 'Посчитайте количество сотрудников в каждом отделе', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100));', 'SELECT department, COUNT(*) AS employee_count FROM employees GROUP BY department;', '5');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Среднее значение', 'Найдите среднюю зарплату по компании', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), salary DECIMAL(10,2));', 'SELECT AVG(salary) AS average_salary FROM employees;', '6');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Сумма', 'Найдите общую сумму всех заказов', 'CREATE TABLE orders(id INT PRIMARY KEY, total DECIMAL(10,2));', 'SELECT SUM(total) AS total_sum FROM orders;', '7');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Минимальное и максимальное значение', 'Найдите минимальную и максимальную цену продуктов', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2));', 'SELECT MIN(price) AS min_price, MAX(price) AS max_price FROM products;', '8');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Группировка с сортировкой', 'Найдите отделы с самой высокой средней зарплатой', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100), salary DECIMAL(10,2));', 'SELECT department, AVG(salary) AS avg_salary FROM employees GROUP BY department ORDER BY avg_salary DESC;', '9');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('4', 'Комплексная агрегация', 'Найдите среднюю зарплату по отделам, где работает более 3 сотрудников', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100), salary DECIMAL(10,2));', 'SELECT department, AVG(salary) AS avg_salary FROM employees GROUP BY department HAVING COUNT(*) > 3 ORDER BY avg_salary DESC;', '10');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Добавление записи', 'Добавьте нового пользователя', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), email VARCHAR(100));', 'INSERT INTO users VALUES (1, ''Иван'', ''ivan@example.com'');', '1');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Добавление нескольких записей', 'Добавьте трех новых пользователей', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), email VARCHAR(100));', 'INSERT INTO users VALUES (1, ''Иван'', ''ivan@example.com''), (2, ''Мария'', ''maria@example.com''), (3, ''Алексей'', ''alex@example.com'');', '2');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Обновление записи', 'Обновите email пользователя с id=1', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), email VARCHAR(100)); INSERT INTO users VALUES (1, ''Иван'', ''ivan@example.com'');', 'UPDATE users SET email = ''ivan.new@example.com'' WHERE id = 1;', '3');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Обновление нескольких записей', 'Увеличьте зарплату всем сотрудникам IT отдела на 10%', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100), salary DECIMAL(10,2));', 'UPDATE employees SET salary = salary * 1.1 WHERE department = ''IT'';', '4');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Удаление записи', 'Удалите пользователя с id=5', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100));', 'DELETE FROM users WHERE id = 5;', '5');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Удаление нескольких записей', 'Удалите всех неактивных пользователей', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), is_active BOOLEAN);', 'DELETE FROM users WHERE is_active = false;', '6');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Обновление с подзапросом', 'Увеличьте зарплату сотрудникам, чья зарплата ниже средней', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), salary DECIMAL(10,2));', 'UPDATE employees SET salary = salary * 1.05 WHERE salary < (SELECT AVG(salary) FROM employees);', '7');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Удаление с JOIN', 'Удалите все заказы пользователя ''Иван''', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT); INSERT INTO users VALUES (1, ''Иван'');', 'DELETE orders FROM orders JOIN users ON orders.user_id = users.id WHERE users.name = ''Иван'';', '8');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Вставка из другой таблицы', 'Скопируйте всех пользователей из таблицы old_users в new_users', 'CREATE TABLE old_users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE new_users(id INT PRIMARY KEY, name VARCHAR(100));', 'INSERT INTO new_users SELECT * FROM old_users;', '9');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('5', 'Комплексное изменение', 'Удалите все заказы старше 2022 года и обновите статус пользователей, у которых нет заказов', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), status VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, order_date DATE);', 'DELETE FROM orders WHERE order_date < ''2023-01-01''; UPDATE users SET status = ''inactive'' WHERE id NOT IN (SELECT DISTINCT user_id FROM orders);', '10');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Простой подзапрос', 'Найдите сотрудников с зарплатой выше средней', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), salary DECIMAL(10,2));', 'SELECT name FROM employees WHERE salary > (SELECT AVG(salary) FROM employees);', '1');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Подзапрос в WHERE', 'Найдите продукты дороже среднего', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2));', 'SELECT * FROM products WHERE price > (SELECT AVG(price) FROM products);', '2');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Подзапрос в FROM', 'Найдите среднюю зарплату по отделам, где она выше средней по компании', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100), salary DECIMAL(10,2));', 'SELECT department, avg_salary FROM (SELECT department, AVG(salary) AS avg_salary FROM employees GROUP BY department) AS dept_avg WHERE avg_salary > (SELECT AVG(salary) FROM employees);', '3');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Подзапрос в SELECT', 'Для каждого продукта выведите его цену и разницу со средней ценой', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2));', 'SELECT name, price, price - (SELECT AVG(price) FROM products) AS difference FROM products;', '4');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Подзапрос с IN', 'Найдите заказы пользователей из Москвы', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100), city VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT, total DECIMAL(10,2));', 'SELECT * FROM orders WHERE user_id IN (SELECT id FROM users WHERE city = ''Москва'');', '5');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Подзапрос с EXISTS', 'Найдите пользователей, сделавших хотя бы один заказ', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT);', 'SELECT * FROM users u WHERE EXISTS (SELECT 1 FROM orders o WHERE o.user_id = u.id);', '6');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Подзапрос с NOT EXISTS', 'Найдите пользователей без заказов', 'CREATE TABLE users(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE orders(id INT PRIMARY KEY, user_id INT);', 'SELECT * FROM users u WHERE NOT EXISTS (SELECT 1 FROM orders o WHERE o.user_id = u.id);', '7');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Коррелированный подзапрос', 'Для каждого продукта выведите количество заказов, где он присутствует', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100)); CREATE TABLE order_items(order_id INT, product_id INT, quantity INT);', 'SELECT p.name, (SELECT COUNT(*) FROM order_items oi WHERE oi.product_id = p.id) AS order_count FROM products p;', '8');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Подзапрос в HAVING', 'Найдите отделы, где средняя зарплата выше средней по компании', 'CREATE TABLE employees(id INT PRIMARY KEY, name VARCHAR(100), department VARCHAR(100), salary DECIMAL(10,2));', 'SELECT department, AVG(salary) AS avg_salary FROM employees GROUP BY department HAVING AVG(salary) > (SELECT AVG(salary) FROM employees);', '9');
+
+INSERT INTO task (lesson_id, title, description, schema_definition, solution_query, order_index) VALUES ('6', 'Множественные подзапросы', 'Найдите продукты, которые дороже среднего и были заказаны более 5 раз', 'CREATE TABLE products(id INT PRIMARY KEY, name VARCHAR(100), price DECIMAL(10,2)); CREATE TABLE order_items(order_id INT, product_id INT, quantity INT);', 'SELECT p.name FROM products p WHERE p.price > (SELECT AVG(price) FROM products) AND p.id IN (SELECT product_id FROM order_items GROUP BY product_id HAVING SUM(quantity) > 5);', '10');
+
+INSERT INTO databasechangelog (ID, AUTHOR, FILENAME, DATEEXECUTED, ORDEREXECUTED, MD5SUM, DESCRIPTION, COMMENTS, EXECTYPE, CONTEXTS, LABELS, LIQUIBASE, DEPLOYMENT_ID) VALUES ('1', 'space-sql', 'src/main/resources/db/changelog/V1.1__initial_data.xml', NOW(), 9, '9:3beecfd8b810c7c5b2d9b9146da072f8', 'insert tableName=lesson; insert tableName=lesson; insert tableName=lesson; insert tableName=lesson; insert tableName=lesson; insert tableName=lesson; insert tableName=task; insert tableName=task; insert tableName=task; insert tableName=task; inser...', '', 'EXECUTED', NULL, NULL, '4.24.0', NULL);
+
+-- Changeset src/main/resources/db/changelog/V1.1__add_users_table.xml::1.1::space-sql
+SET SEARCH_PATH TO public, "$user","public";
+
+CREATE TABLE users (id BIGINT GENERATED BY DEFAULT AS IDENTITY NOT NULL, github_username VARCHAR(255) NOT NULL, avatar_url TEXT, progress INTEGER DEFAULT 0 NOT NULL, CONSTRAINT users_pkey PRIMARY KEY (id), UNIQUE (github_username));
+
+INSERT INTO databasechangelog (ID, AUTHOR, FILENAME, DATEEXECUTED, ORDEREXECUTED, MD5SUM, DESCRIPTION, COMMENTS, EXECTYPE, CONTEXTS, LABELS, LIQUIBASE, DEPLOYMENT_ID) VALUES ('1.1', 'space-sql', 'src/main/resources/db/changelog/V1.1__add_users_table.xml', NOW(), 10, '9:c16d95db6716464cf0be44b7590bbc3a', 'createTable tableName=users', '', 'EXECUTED', NULL, NULL, '4.24.0', NULL);
+
+-- Changeset src/main/resources/db/changelog/V1.1__add_users_table.xml::1.2::space-sql
+SET SEARCH_PATH TO public, "$user","public";
+
+INSERT INTO users (github_username, avatar_url, progress) VALUES ('test_user', 'https://example.com/avatar.png', '0');
+
+INSERT INTO databasechangelog (ID, AUTHOR, FILENAME, DATEEXECUTED, ORDEREXECUTED, MD5SUM, DESCRIPTION, COMMENTS, EXECTYPE, CONTEXTS, LABELS, LIQUIBASE, DEPLOYMENT_ID) VALUES ('1.2', 'space-sql', 'src/main/resources/db/changelog/V1.1__add_users_table.xml', NOW(), 11, '9:ea51e47f7b4ae53c13e919dbaa55ec03', 'insert tableName=users', '', 'EXECUTED', NULL, NULL, '4.24.0', NULL);
+
+-- Changeset src/main/resources/db/changelog/V1.1__add_users_table.xml::1.3::space-sql
+SET SEARCH_PATH TO public, "$user","public";
+
+CREATE INDEX idx_users_github_username ON users(github_username);
+
+INSERT INTO databasechangelog (ID, AUTHOR, FILENAME, DATEEXECUTED, ORDEREXECUTED, MD5SUM, DESCRIPTION, COMMENTS, EXECTYPE, CONTEXTS, LABELS, LIQUIBASE, DEPLOYMENT_ID) VALUES ('1.3', 'space-sql', 'src/main/resources/db/changelog/V1.1__add_users_table.xml', NOW(), 12, '9:32d2dc6467d5b8a1510b76a559ae4bdb', 'createIndex indexName=idx_users_github_username, tableName=users', '', 'EXECUTED', NULL, NULL, '4.24.0', NULL);
+
+-- Changeset src/main/resources/db/changelog/V1.2__create_example_data_table.xml::1::space-sql
+SET SEARCH_PATH TO public, "$user","public";
+
+CREATE TABLE task_example_data (id BIGINT GENERATED BY DEFAULT AS IDENTITY NOT NULL, task_id BIGINT NOT NULL, example_data JSONB NOT NULL, created_at TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, updated_at TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, CONSTRAINT task_example_data_pkey PRIMARY KEY (id), CONSTRAINT fk_example_data_task FOREIGN KEY (task_id) REFERENCES task(id), UNIQUE (task_id));
+
+INSERT INTO databasechangelog (ID, AUTHOR, FILENAME, DATEEXECUTED, ORDEREXECUTED, MD5SUM, DESCRIPTION, COMMENTS, EXECTYPE, CONTEXTS, LABELS, LIQUIBASE, DEPLOYMENT_ID) VALUES ('1', 'space-sql', 'src/main/resources/db/changelog/V1.2__create_example_data_table.xml', NOW(), 13, '9:7ed003a683735317db9431bce4c9bfd9', 'createTable tableName=task_example_data', '', 'EXECUTED', NULL, NULL, '4.24.0', NULL);
+
+-- Changeset src/main/resources/db/changelog/V1.3__insert_example_data.xml::1::space-sql
+SET SEARCH_PATH TO public, "$user","public";
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('1', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "age": 25, "email": "oleg@example.com"},                     {"id": 2, "name": "Никита", "age": 30, "email": "nikita@example.com"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('2', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"name": "Олег", "email": "oleg@example.com"},                     {"name": "Никита", "email": "nikita@example.com"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('3', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "age": 28, "email": "oleg@example.com"},                     {"id": 2, "name": "Никита", "age": 22, "email": "nikita@example.com"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('4', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "city": "Москва"},                     {"id": 2, "name": "Никита", "city": "Санкт-Петербург"},                     {"id": 3, "name": "Анна", "city": "Москва"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('5', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег"},                     {"id": 2, "name": "Никита"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('6', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "age": 25},                     {"id": 2, "name": "Никита", "age": 30}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('7', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "age": 26, "city": "Москва"},                     {"id": 2, "name": "Никита", "age": 21, "city": "Санкт-Петербург"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('8', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "age": 22},                     {"id": 2, "name": "Никита", "age": 28}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('9', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "city": "Москва"},                     {"id": 2, "name": "Никита", "city": "Санкт-Петербург"},                     {"id": 3, "name": "Анна", "city": "Казань"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('10', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Андрей"},                     {"id": 2, "name": "Алексей"},                     {"id": 3, "name": "Борис"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('11', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "total": 100.00},                         {"id": 2, "user_id": 2, "total": 200.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('12', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "total": 100.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('13', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "total": 100.00},                         {"id": 2, "user_id": null, "total": 200.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('14', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "total": 100.00},                         {"id": 2, "user_id": null, "total": 200.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('15', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "product_id": 1, "quantity": 2},                         {"id": 2, "user_id": 2, "product_id": 2, "quantity": 1}                     ],                     "products": [                         {"id": 1, "name": "Лаптоп", "price": 500.00},                         {"id": 2, "name": "Телефон", "price": 300.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('16', '{                 "type": "join",                 "tables": {                     "employees": [                         {"id": 1, "name": "Олег", "department": "IT"},                         {"id": 2, "name": "Никита", "department": "IT"},                         {"id": 3, "name": "Анна", "department": "HR"}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('17', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "total": 100.00},                         {"id": 2, "user_id": 1, "total": 200.00},                         {"id": 3, "user_id": 2, "total": 150.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('18', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "total": 1000.00},                         {"id": 2, "user_id": 1, "total": 200.00},                         {"id": 3, "user_id": 2, "total": 150.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('19', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1},                         {"id": 2, "user_id": 1},                         {"id": 3, "user_id": 2}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('20', '{                 "type": "join",                 "tables": {                     "colors": [                         {"color": "Красный"},                         {"color": "Синий"}                     ],                     "sizes": [                         {"size": "S"},                         {"size": "M"}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('21', '{                 "type": "simple",                 "table": "products",                 "rows": [                     {"id": 1, "name": "Лаптоп", "price": 1200.00},                     {"id": 2, "name": "Телефон", "price": 800.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('22', '{                 "type": "simple",                 "table": "orders",                 "rows": [                     {"id": 1, "order_date": "2023-05-01"},                     {"id": 2, "order_date": "2022-12-15"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('23', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "city": "Москва", "is_active": true},                     {"id": 2, "name": "Никита", "city": "Санкт-Петербург", "is_active": false}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('24', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "city": "Москва"},                     {"id": 2, "name": "Никита", "city": "Санкт-Петербург"},                     {"id": 3, "name": "Анна", "city": "Казань"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('25', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "city": "Москва"},                     {"id": 2, "name": "Никита", "city": "Санкт-Петербург"},                     {"id": 3, "name": "Анна", "city": "Казань"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('26', '{                 "type": "simple",                 "table": "products",                 "rows": [                     {"id": 1, "name": "ProMax Телефон"},                     {"id": 2, "name": "Basic Лаптоп"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('27', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег"},                     {"id": 2, "name": "Никита"},                     {"id": 3, "name": "Анна"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('28', '{                 "type": "simple",                 "table": "orders",                 "rows": [                     {"id": 1, "delivery_date": null},                     {"id": 2, "delivery_date": "2023-05-01"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('29', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT"},                     {"id": 2, "name": "Никита", "department": "IT"},                     {"id": 3, "name": "Анна", "department": "HR"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('30', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "city": "Москва", "is_active": true, "registration_date": "2023-03-01"},                     {"id": 2, "name": "Никита", "city": "Санкт-Петербург", "is_active": false, "registration_date": "2022-12-15"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('31', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег"},                     {"id": 2, "name": "Никита"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('32', '{                 "type": "simple",                 "table": "products",                 "rows": [                     {"id": 1, "name": "Лаптоп", "price": 1200.00},                     {"id": 2, "name": "Телефон", "price": 800.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('33', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT"},                     {"id": 2, "name": "Никита", "department": "HR"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('34', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег"},                     {"id": 2, "name": "Никита"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('35', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT"},                     {"id": 2, "name": "Никита", "department": "HR"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('36', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "salary": 1200.00},                     {"id": 2, "name": "Никита", "salary": 1500.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('37', '{                 "type": "simple",                 "table": "orders",                 "rows": [                     {"id": 1, "total": 100.00},                     {"id": 2, "total": 200.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('38', '{                 "type": "simple",                 "table": "products",                 "rows": [                     {"id": 1, "name": "Лаптоп", "price": 1200.00},                     {"id": 2, "name": "Телефон", "price": 800.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('39', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT", "salary": 1500.00},                     {"id": 2, "name": "Никита", "department": "HR", "salary": 1200.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('40', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT", "salary": 1500.00},                     {"id": 2, "name": "Никита", "department": "HR", "salary": 1200.00},                     {"id": 3, "name": "Анна", "department": "IT", "salary": 1600.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('41', '{                 "type": "simple",                 "table": "users",                 "rows": []             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('42', '{                 "type": "simple",                 "table": "users",                 "rows": []             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('43', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "email": "oleg@example.com"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('44', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT", "salary": 1500.00},                     {"id": 2, "name": "Никита", "department": "IT", "salary": 1200.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('45', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег"},                     {"id": 2, "name": "Никита"},                     {"id": 5, "name": "Анна"}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('46', '{                 "type": "simple",                 "table": "users",                 "rows": [                     {"id": 1, "name": "Олег", "is_active": true},                     {"id": 2, "name": "Никита", "is_active": false}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('47', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "salary": 1500.00},                     {"id": 2, "name": "Никита", "salary": 1200.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('48', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Иван"}                     ],                     "orders": [                         {"id": 1, "user_id": 1}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('49', '{                 "type": "join",                 "tables": {                     "old_users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "new_users": []                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('50', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег", "status": "active"},                         {"id": 2, "name": "Никита", "status": "inactive"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "order_date": "2023-05-01"}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('51', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "salary": 1500.00},                     {"id": 2, "name": "Никита", "salary": 1200.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('52', '{                 "type": "simple",                 "table": "products",                 "rows": [                     {"id": 1, "name": "Лаптоп", "price": 1200.00},                     {"id": 2, "name": "Телефон", "price": 800.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('53', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT", "salary": 1500.00},                     {"id": 2, "name": "Никита", "department": "HR", "salary": 1200.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('54', '{                 "type": "simple",                 "table": "products",                 "rows": [                     {"id": 1, "name": "Лаптоп", "price": 1200.00},                     {"id": 2, "name": "Телефон", "price": 800.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('55', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег", "city": "Москва"},                         {"id": 2, "name": "Никита", "city": "Санкт-Петербург"}                     ],                     "orders": [                         {"id": 1, "user_id": 1, "total": 100.00}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('56', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('57', '{                 "type": "join",                 "tables": {                     "users": [                         {"id": 1, "name": "Олег"},                         {"id": 2, "name": "Никита"}                     ],                     "orders": [                         {"id": 1, "user_id": 1}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('58', '{                 "type": "join",                 "tables": {                     "products": [                         {"id": 1, "name": "Лаптоп"},                         {"id": 2, "name": "Телефон"}                     ],                     "order_items": [                         {"order_id": 1, "product_id": 1, "quantity": 2},                         {"order_id": 2, "product_id": 2, "quantity": 1}                     ]                 }             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('59', '{                 "type": "simple",                 "table": "employees",                 "rows": [                     {"id": 1, "name": "Олег", "department": "IT", "salary": 1500.00},                     {"id": 2, "name": "Никита", "department": "HR", "salary": 1200.00}                 ]             }');
+
+INSERT INTO task_example_data (task_id, example_data) VALUES ('60', '{                 "type": "join",                 "tables": {                     "products": [                         {"id": 1, "name": "Лаптоп", "price": 1200.00},                         {"id": 2, "name": "Телефон", "price": 800.00}                     ],                     "order_items": [                         {"order_id": 1, "product_id": 1, "quantity": 2},                         {"order_id": 2, "product_id": 2, "quantity": 1}                     ]                 }             }');
+
+INSERT INTO databasechangelog (ID, AUTHOR, FILENAME, DATEEXECUTED, ORDEREXECUTED, MD5SUM, DESCRIPTION, COMMENTS, EXECTYPE, CONTEXTS, LABELS, LIQUIBASE, DEPLOYMENT_ID) VALUES ('1', 'space-sql', 'src/main/resources/db/changelog/V1.3__insert_example_data.xml', NOW(), 14, '9:f0018b6f9bd3f11657afca446463a969', 'insert tableName=task_example_data; insert tableName=task_example_data; insert tableName=task_example_data; insert tableName=task_example_data; insert tableName=task_example_data; insert tableName=task_example_data; insert tableName=task_example_d...', '', 'EXECUTED', NULL, NULL, '4.24.0', NULL);
+
+-- Release Database Lock
+SET SEARCH_PATH TO public, "$user","public";
+
+UPDATE databasechangeloglock SET LOCKED = FALSE, LOCKEDBY = NULL, LOCKGRANTED = NULL WHERE ID = 1;
+
+SET SEARCH_PATH TO public, "$user","public";
+

From 6a2c5aeddc745a61dd200aceca0c659ac07bd611 Mon Sep 17 00:00:00 2001
From: Lins <alina.cheremiskina@gmail.com>
Date: Sat, 9 Aug 2025 16:50:25 +0300
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B0=D0=B7=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D0=B0?=
 =?UTF-8?q?=20=D0=B8=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Изменено название проекта с "Space SQL" на "DevUniverse" в заголовке, подвале и других компонентах.
- Обновлены зависимости в package.json и package-lock.json, включая добавление @types/react и @types/react-dom.
- Реализован новый компонент StarButton с анимацией и эффектами при наведении.
- Обновлены страницы входа и регистрации для перенаправления на главную страницу после успешного входа и регистрации.
---
 frontend/package-lock.json                    |  41 +++-
 frontend/package.json                         |   5 +-
 frontend/public/index.html                    |   4 +-
 frontend/src/components/Footer.js             |   2 +-
 frontend/src/components/Header.js             |   2 +-
 frontend/src/components/SpaceHero.js          |   2 +-
 frontend/src/components/home/MainGrid.tsx     | 162 ++++++++++++++
 .../components/layout/CosmicNavigation.jsx    |   2 +-
 frontend/src/components/ui/Button.jsx         | 206 +++++++++++++++---
 frontend/src/pages/Home/index.js              | 113 ++++------
 frontend/src/pages/auth/Login.js              |   6 +-
 frontend/src/pages/auth/Register.js           |   2 +-
 12 files changed, 434 insertions(+), 113 deletions(-)
 create mode 100644 frontend/src/components/home/MainGrid.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9fe9536..fd2e430 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,9 +18,12 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@types/react": "^19.1.9",
+        "@types/react-dom": "^19.1.7",
         "autoprefixer": "^10.4.21",
         "postcss": "^8.5.6",
-        "tailwindcss": "^3.4.17"
+        "tailwindcss": "^3.4.17",
+        "typescript": "^5.9.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -3771,6 +3774,26 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
+      "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.1.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
+      "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6332,6 +6355,13 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -16367,17 +16397,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/frontend/package.json b/frontend/package.json
index d352fd8..567a557 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,8 +36,11 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.9.2"
   }
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
index d4bbdcd..6af6cae 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Космический тренажер для изучения SQL" />
-    <title>Space SQL - Космический тренажер</title>
+    <meta name="description" content="DevUniverse — космическая платформа для обучения и практики" />
+    <title>DevUniverse</title>
     
     <!-- Preconnect для быстрой загрузки шрифтов -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index 514f40e..f99521e 100644
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -11,7 +11,7 @@ const Footer = () => {
     >
       <div className="max-w-7xl mx-auto px-4">
         <p className="text-gray-400 font-space text-sm">
-          🚀 Space SQL © 2025 • No PHP - No Problems • 
+          🚀 DevUniverse © 2025 • No PHP - No Problems • 
           <span className="text-cosmic-purple ml-2">Made with ❤️ in the cosmos</span>
         </p>
       </div>
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 51ed96e..ec92552 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -10,7 +10,7 @@ export default function Header() {
   return (
     <header className="app-header">
       <nav>
-        <Link to="/" className="logo-link">Space SQL</Link>
+        <Link to="/" className="logo-link">DevUniverse</Link>
         <div className="nav-links">
           <Link to="/lessons" className={location.pathname.startsWith('/lessons') ? 'active' : ''}>
             Уроки
diff --git a/frontend/src/components/SpaceHero.js b/frontend/src/components/SpaceHero.js
index 9c55abc..ce2ebd8 100644
--- a/frontend/src/components/SpaceHero.js
+++ b/frontend/src/components/SpaceHero.js
@@ -12,7 +12,7 @@ export default function SpaceHero() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.8 }}
       >
-        Space SQL
+        DevUniverse
       </motion.h1>
       
       <motion.p 
diff --git a/frontend/src/components/home/MainGrid.tsx b/frontend/src/components/home/MainGrid.tsx
new file mode 100644
index 0000000..6b454a9
--- /dev/null
+++ b/frontend/src/components/home/MainGrid.tsx
@@ -0,0 +1,162 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export type HomeCard = {
+  id: string;
+  title: string;
+  size: 'small' | 'medium' | 'large';
+  content: React.ReactNode;
+  color: string; // tailwind gradient classes
+};
+
+// Карточка-обёртка с hover-эффектами
+const Card: React.FC<{ title: string; className?: string; children: React.ReactNode }>
+  = ({ title, className = '', children }) => {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.03 }}
+      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+      className={`relative rounded-2xl p-5 md:p-6 overflow-hidden bg-white/5 border border-white/10 backdrop-blur-sm shadow-[0_10px_35px_rgba(0,0,0,0.25)] hover:shadow-[0_12px_45px_rgba(138,43,226,0.35)] ${className}`}
+    >
+      <div className="absolute inset-0 pointer-events-none bg-[radial-gradient(1200px_circle_at_var(--x,50%)_var(--y,50%),rgba(138,43,226,0.15),transparent_40%)]" />
+      <div className="relative z-10">
+        <h3 className="font-space text-lg md:text-xl mb-3 text-white/90">{title}</h3>
+        {children}
+      </div>
+    </motion.div>
+  );
+};
+
+// Контентные мини-компоненты
+export const NewsList: React.FC = () => {
+  const news = [
+    { id: 1, text: 'Запуск нового продукта 15 октября', date: '10.10.2023' },
+    { id: 2, text: 'Обновление политики безопасности', date: '05.10.2023' },
+    { id: 3, text: 'Хакатон Space SQL — регистрация открыта', date: '01.10.2023' },
+  ];
+  return (
+    <ul className="space-y-3">
+      {news.map((item) => (
+        <li key={item.id} className="p-3 rounded-lg transition bg-white/0 hover:bg-white/10">
+          <p className="font-medium">{item.text}</p>
+          <span className="text-xs opacity-70">{item.date}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const RatingChart: React.FC = () => (
+  <div className="text-sm text-white/80">ТОП-5 пользователей недели
+    <ul className="mt-3 space-y-2">
+      {['Алина', 'Олег', 'Кирилл', 'Мария', 'Иван'].map((n, i) => (
+        <li key={n} className="flex items-center justify-between">
+          <span>{i + 1}. {n}</span>
+          <span className="text-cosmic-green">{(100 - i * 7)} очков</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+const TasksPreview: React.FC = () => (
+  <ul className="text-sm space-y-2">
+    {['Проверить pull request', 'Подготовить релиз', 'Ответить в поддержку'].map((t, i) => (
+      <li key={i} className="flex items-center gap-2">
+        <span className="w-1.5 h-1.5 rounded-full bg-cosmic-purple" />
+        <span>{t}</span>
+      </li>
+    ))}
+  </ul>
+);
+
+const AnalyticsMini: React.FC = () => (
+  <div className="text-sm grid grid-cols-3 gap-3">
+    {[
+      { k: 'Пользователи', v: '12.4K' },
+      { k: 'Активность', v: '87%' },
+      { k: 'SQL-запросы', v: '1.2M' },
+    ].map((m) => (
+      <div key={m.k} className="rounded-lg bg-white/10 p-3 text-center">
+        <div className="text-xs opacity-70">{m.k}</div>
+        <div className="text-base font-semibold">{m.v}</div>
+      </div>
+    ))}
+  </div>
+);
+
+const CalendarMini: React.FC = () => (
+  <div className="text-sm">
+    <div className="opacity-70 mb-1">Октябрь</div>
+    <div className="grid grid-cols-7 gap-1 text-center text-xs opacity-90">
+      {Array.from({ length: 28 }).map((_, i) => (
+        <div key={i} className={`py-1 rounded ${[4, 11, 18].includes(i) ? 'bg-cosmic-purple/50' : 'bg-white/5'}`}>{i + 1}</div>
+      ))}
+    </div>
+  </div>
+);
+
+const ChatMini: React.FC = () => (
+  <div className="text-sm space-y-2">
+    {[
+      { u: 'Служба', m: 'Релиз перенесён на 18:00' },
+      { u: 'DevOps', m: 'Кластер обновлён' },
+    ].map((x, i) => (
+      <div key={i} className="p-2 rounded bg-white/5">
+        <span className="text-cosmic-blue">{x.u}:</span> {x.m}
+      </div>
+    ))}
+  </div>
+);
+
+const gridClassesBySize: Record<HomeCard['size'], string> = {
+  small: 'col-span-2 row-span-1',
+  medium: 'col-span-2 row-span-2',
+  large: 'col-span-4 row-span-2',
+};
+
+const colors = {
+  bluePurple: 'bg-gradient-to-br from-[#2de2e6]/20 via-[#8a2be2]/20 to-[#24243e]/20',
+  purplePink: 'bg-gradient-to-br from-[#8a2be2]/25 to-[#ff2e88]/20',
+  cyanBlue: 'bg-gradient-to-br from-[#2de2e6]/25 to-[#00aaff]/20',
+};
+
+export const MainGrid: React.FC = () => {
+  const cards: HomeCard[] = [
+    { id: 'news', title: 'Новости', size: 'large', content: <NewsList />, color: colors.bluePurple },
+    { id: 'ratings', title: 'Рейтинги', size: 'small', content: <RatingChart />, color: colors.purplePink },
+    { id: 'tasks', title: 'Задачи', size: 'small', content: <TasksPreview />, color: colors.cyanBlue },
+    { id: 'analytics', title: 'Аналитика', size: 'medium', content: <AnalyticsMini />, color: colors.bluePurple },
+    { id: 'calendar', title: 'Календарь', size: 'small', content: <CalendarMini />, color: colors.purplePink },
+    { id: 'chat', title: 'Чат', size: 'small', content: <ChatMini />, color: colors.cyanBlue },
+  ];
+
+  return (
+    <section className="w-full max-w-6xl mx-auto px-4 md:px-6 mt-12">
+      <motion.div
+        initial="hidden"
+        animate="visible"
+        variants={{ hidden: {}, visible: { transition: { staggerChildren: 0.08 } } }}
+        className="grid grid-cols-4 grid-rows-2 md:grid-rows-3 gap-4 md:gap-6 auto-rows-[minmax(120px,auto)]
+                   sm:grid-cols-2 sm:grid-rows-6"
+      >
+        {cards.map((card) => (
+          <motion.div
+            key={card.id}
+            variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}
+            className={`${gridClassesBySize[card.size]} ${card.color} rounded-2xl`}
+            style={{ position: 'relative' }}
+          >
+            <Card title={card.title}>
+              {card.content}
+            </Card>
+          </motion.div>
+        ))}
+      </motion.div>
+    </section>
+  );
+};
+
+export default MainGrid;
+
+
diff --git a/frontend/src/components/layout/CosmicNavigation.jsx b/frontend/src/components/layout/CosmicNavigation.jsx
index 7fc8640..cbb0d98 100644
--- a/frontend/src/components/layout/CosmicNavigation.jsx
+++ b/frontend/src/components/layout/CosmicNavigation.jsx
@@ -54,7 +54,7 @@ const CosmicNavigation = () => {
               className="flex items-center space-x-2 text-2xl font-cosmic text-cosmic-purple hover:text-cosmic-blue transition-colors duration-300"
             >
               <span className="text-3xl">🚀</span>
-              <span className="glow-text">Space SQL</span>
+              <span className="glow-text">DevUniverse</span>
             </Link>
           </motion.div>
 
diff --git a/frontend/src/components/ui/Button.jsx b/frontend/src/components/ui/Button.jsx
index 5bb0c51..7ba893b 100644
--- a/frontend/src/components/ui/Button.jsx
+++ b/frontend/src/components/ui/Button.jsx
@@ -1,51 +1,195 @@
-import React from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 
-const Button = ({ 
-  children, 
-  variant = 'primary', 
-  size = 'medium', 
-  disabled = false, 
+// Thickness border effect: smooth border-width and glow on hover/press
+const ThicknessBorder = ({ color = '#2de2e6', borderColor = 'rgba(138,43,226,0.35)' }) => (
+  <>
+    {/* Base subtle border */}
+    <div
+      aria-hidden
+      className="absolute inset-0 rounded-xl pointer-events-none"
+      style={{ border: `1px solid ${borderColor}` }}
+    />
+    {/* Animated thick border on hover */}
+    <motion.div
+      aria-hidden
+      className="absolute inset-0 rounded-xl pointer-events-none"
+      initial={{ borderWidth: 1, boxShadow: 'none', opacity: 0.9 }}
+      whileHover={{ borderWidth: 2, boxShadow: `0 0 12px ${color}` }}
+      transition={{ type: 'spring', stiffness: 300, damping: 24 }}
+      style={{ borderStyle: 'solid', borderColor: color }}
+    />
+  </>
+);
+
+// Neon flow along the contour (thin, precise, intermittent glow)
+const NeonFlowBorder = ({
+  from = '#8a2be2',
+  to = '#2de2e6',
+  opacity = 0.5,
+  gradientId = 'btn-neon-grad',
+}) => (
+  <svg className="absolute inset-0 w-full h-full pointer-events-none rounded-xl opacity-60 group-hover:opacity-95 transition-opacity duration-300 z-[1]" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden>
+    <defs>
+      <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" stopColor={from} />
+        <stop offset="50%" stopColor={to} />
+        <stop offset="100%" stopColor={from} />
+      </linearGradient>
+    </defs>
+    {/* Hairline base to keep contour crisp */}
+    <rect x="1" y="1" width="98" height="98" rx="12" ry="12" fill="none" stroke={from} strokeOpacity="0.1" strokeWidth="0.6" />
+    {/* Moving highlight segment */}
+    <motion.rect
+      x="1" y="1" width="98" height="98" rx="12" ry="12"
+      fill="none"
+      stroke={`url(#${gradientId})`}
+      strokeWidth="0.7"
+      strokeDasharray="28 360"
+      animate={{ strokeDashoffset: [0, -388], opacity: [opacity, 0.06, opacity] }}
+      transition={{ repeat: Infinity, duration: 3.2, ease: 'linear' }}
+      style={{ filter: `drop-shadow(0 0 3px ${to})` }}
+    />
+  </svg>
+);
+
+// New animated button inspired by star-border, adapted to project palette
+const StarButton = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
   loading = false,
   className = '',
   onClick,
   type = 'button',
-  ...props 
+  starColor = '#2de2e6',
+  borderColor = 'rgba(138,43,226,0.35)',
+  glowEffect = true,
+  magnetic = false,
+  'aria-label': ariaLabel,
+  ...props
 }) => {
-  const baseClasses = 'inline-flex items-center justify-center font-bold rounded-full transition-all duration-300 transform focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cosmic-purple disabled:opacity-50 disabled:cursor-not-allowed';
-  
-  const variants = {
-    primary: 'cosmic-button text-white',
-    secondary: 'bg-transparent border-2 border-cosmic-blue text-cosmic-blue hover:bg-cosmic-blue hover:text-white',
-    danger: 'bg-red-600 hover:bg-red-700 text-white shadow-lg hover:shadow-red-500/25',
-    ghost: 'text-cosmic-purple hover:bg-cosmic-purple hover:bg-opacity-10',
+  // Backward-compat for old size values
+  const normalizedSize = useMemo(() => {
+    if (size === 'small') return 'sm';
+    if (size === 'medium') return 'md';
+    if (size === 'large') return 'lg';
+    return size;
+  }, [size]);
+
+  const sizeClasses = {
+    sm: 'py-1.5 px-4 text-sm',
+    md: 'py-2.5 px-6 text-base',
+    lg: 'py-3.5 px-8 text-lg',
   };
-  
-  const sizes = {
-    small: 'px-4 py-2 text-sm',
-    medium: 'px-6 py-3 text-base',
-    large: 'px-8 py-4 text-lg',
+
+  const variantClasses = {
+    // Все варианты без заливки, с текстом и границей анимацией сверху
+    primary: 'bg-transparent text-white',
+    secondary: 'bg-transparent text-cosmic-blue',
+    ghost: 'bg-transparent text-white/90',
+    danger: 'bg-transparent text-red-400',
   };
-  
-  const buttonClasses = `${baseClasses} ${variants[variant]} ${sizes[size]} ${className}`;
-  
+
+  const baseClasses = `group relative inline-flex items-center justify-center font-bold rounded-xl border transition-all duration-300 select-none
+    focus:outline-none focus-visible:ring-2 focus-visible:ring-cosmic-purple focus-visible:ring-offset-2 focus-visible:ring-offset-space-dark
+    disabled:opacity-50 disabled:cursor-not-allowed`;
+
+  const buttonClasses = `${baseClasses} ${variantClasses[variant] || ''} ${sizeClasses[normalizedSize] || ''} ${className}`;
+
+  // Magnetic effect (slight attraction towards cursor)
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const handleMouseMove = useCallback((e) => {
+    if (!magnetic || disabled) return;
+    const target = e.currentTarget.getBoundingClientRect();
+    const cx = target.left + target.width / 2;
+    const cy = target.top + target.height / 2;
+    const dx = (e.clientX - cx) / (target.width / 2);
+    const dy = (e.clientY - cy) / (target.height / 2);
+    const strength = 6; // px
+    setOffset({ x: Math.max(-strength, Math.min(strength, dx * strength)), y: Math.max(-strength, Math.min(strength, dy * strength)) });
+  }, [magnetic, disabled]);
+  const resetOffset = useCallback(() => setOffset({ x: 0, y: 0 }), []);
+
+  // Ripple effect from cursor on click
+  const [ripples, setRipples] = useState([]);
+  const handleInternalClick = useCallback((e) => {
+    if (disabled || loading) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const id = Math.random().toString(36).slice(2);
+    setRipples((prev) => [...prev, { id, x, y }]);
+    // auto remove ripple
+    setTimeout(() => {
+      setRipples((prev) => prev.filter((r) => r.id !== id));
+    }, 700);
+    if (onClick) onClick(e);
+  }, [disabled, loading, onClick]);
+
   return (
     <motion.button
       type={type}
+      aria-label={ariaLabel}
+      aria-disabled={disabled || loading}
       className={buttonClasses}
+      style={{ borderColor }}
       disabled={disabled || loading}
-      onClick={onClick}
-      whileHover={{ scale: disabled ? 1 : 1.05 }}
-      whileTap={{ scale: disabled ? 1 : 0.95 }}
-      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+      onClick={handleInternalClick}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={resetOffset}
+      initial={false}
+      whileHover={{
+        scale: disabled ? 1 : 1.03,
+        x: offset.x,
+        y: offset.y,
+        boxShadow: glowEffect && !disabled ? `0 0 12px ${starColor}` : 'none',
+      }}
+      whileTap={{ scale: disabled ? 1 : 0.98, filter: glowEffect && !disabled ? `brightness(1.06)` : 'none' }}
+      transition={{ type: 'spring', stiffness: 400, damping: 22 }}
       {...props}
     >
-      {loading && (
-        <div className="loading-spinner mr-2" />
-      )}
-      {children}
+      {/* Thickness border effect */}
+      <ThicknessBorder color={starColor} borderColor={borderColor} />
+      {/* Neon flow border (unique gradient id per instance) */}
+      <NeonFlowBorder
+        from={borderColor.includes('rgba') ? '#8a2be2' : borderColor}
+        to={starColor}
+        opacity={0.5}
+        gradientId={`btn-neon-${Math.random().toString(36).slice(2)}`}
+      />
+
+      {/* Content */}
+      <div className="relative z-10 inline-flex items-center">
+        {loading && <div className="loading-spinner mr-2" />}
+        {children}
+      </div>
+
+      {/* Ripples */}
+      <div className="absolute inset-0 overflow-hidden rounded-xl pointer-events-none" aria-hidden>
+        {ripples.map((r) => (
+          <motion.span
+            key={r.id}
+            initial={{ opacity: 0.5, scale: 0 }}
+            animate={{ opacity: 0, scale: 2.2 }}
+            transition={{ duration: 0.7, ease: 'easeOut' }}
+            style={{
+              position: 'absolute',
+              top: r.y,
+              left: r.x,
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              background: `radial-gradient(circle, ${starColor} 0%, transparent 60%)`,
+              transform: 'translate(-50%, -50%)',
+              filter: `drop-shadow(0 0 8px ${starColor})`,
+            }}
+          />
+        ))}
+      </div>
     </motion.button>
   );
 };
 
-export default Button;
+export default StarButton;
diff --git a/frontend/src/pages/Home/index.js b/frontend/src/pages/Home/index.js
index b655130..f73fc53 100644
--- a/frontend/src/pages/Home/index.js
+++ b/frontend/src/pages/Home/index.js
@@ -34,77 +34,60 @@ const Home = () => {
         <StarBackground isMainPage={true} />
       </div>
       
-      {/* Основной контент */}
-      <div className="relative flex-1 flex flex-col justify-center items-center z-10 text-center px-4">
-        <div className="bg-space-dark bg-opacity-70 backdrop-blur-lg rounded-3xl p-8 lg:p-12 max-w-4xl mx-auto border border-cosmic-purple border-opacity-30">
-          <motion.div
-            variants={heroVariants}
-            initial="hidden"
-            animate="visible"
-            className="space-y-8"
+      {/* Основной контент — стартовый экран без карточек */}
+      <div className="relative flex-1 flex flex-col justify-center items-center z-10 text-center px-6">
+        <motion.div
+          variants={heroVariants}
+          initial="hidden"
+          animate="visible"
+          className="space-y-8 max-w-3xl"
+        >
+          <motion.h1 
+            variants={itemVariants}
+            className="cosmic-title text-5xl lg:text-7xl"
           >
-            <motion.h1 
-              variants={itemVariants}
-              className="cosmic-title text-5xl lg:text-7xl"
-            >
-              Space SQL
-            </motion.h1>
-            
-            <motion.p 
-              variants={itemVariants}
-              className="text-xl lg:text-2xl text-gray-300 font-space max-w-2xl mx-auto leading-relaxed"
-            >
-              Изучайте SQL, покоряя космос
-            </motion.p>
-            
-            <motion.div 
-              variants={itemVariants}
-              className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+            DevUniverse
+          </motion.h1>
+
+          <motion.p 
+            variants={itemVariants}
+            className="text-xl lg:text-2xl text-white/80 font-space leading-relaxed"
+          >
+            Изучайте SQL, покоряя космос
+          </motion.p>
+
+          <motion.div 
+            variants={itemVariants}
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+          >
+            <Button 
+              variant="ghost"
+              size="lg"
+              starColor="#8a2be2"
+              borderColor="rgba(138,43,226,0.5)"
+              glowEffect
+              magnetic
+              onClick={() => navigate(currentUser ? '/lessons' : '/register')}
+              className="px-10"
             >
+              🚀 {currentUser ? 'Продолжить обучение' : 'Начать обучение'}
+            </Button>
+
+            {!currentUser && (
               <Button 
-                size="large"
-                onClick={() => navigate(currentUser ? '/lessons' : '/register')}
-                className="text-lg px-10 py-4"
+                variant="ghost"
+                size="lg"
+                starColor="#2de2e6"
+                borderColor="rgba(45,226,230,0.45)"
+                magnetic
+                onClick={() => navigate('/login')}
+                className="px-10"
               >
-                🚀 {currentUser ? 'Продолжить обучение' : 'Начать обучение'}
+                Войти в систему
               </Button>
-              
-              {!currentUser && (
-                <Button 
-                  variant="secondary"
-                  size="large"
-                  onClick={() => navigate('/login')}
-                  className="text-lg px-10 py-4"
-                >
-                  Войти в систему
-                </Button>
-              )}
-            </motion.div>
-            
-            <motion.div 
-              variants={itemVariants}
-              className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 text-sm"
-            >
-              <div className="flex flex-col items-center space-y-2">
-                <span className="text-2xl">📚</span>
-                <span className="text-cosmic-blue font-space">Интерактивные уроки</span>
-              </div>
-              <div className="flex flex-col items-center space-y-2">
-                <span className="text-2xl">⚡</span>
-                <span className="text-cosmic-green font-space">Практические задания</span>
-              </div>
-              <div className="flex flex-col items-center space-y-2">
-                <span className="text-2xl">🌟</span>
-                <span className="text-cosmic-purple font-space">Космический опыт</span>
-              </div>
-            </motion.div>
+            )}
           </motion.div>
-        </div>
-      </div>
-      
-      {/* Футер */}
-      <div className="relative z-10 bg-space-dark bg-opacity-80 backdrop-blur-sm border-t border-cosmic-purple border-opacity-20">
-        <Footer />
+        </motion.div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/auth/Login.js b/frontend/src/pages/auth/Login.js
index 3e44587..8e62fc9 100644
--- a/frontend/src/pages/auth/Login.js
+++ b/frontend/src/pages/auth/Login.js
@@ -12,8 +12,8 @@ const Login = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  // Определяем, откуда пришел пользователь, чтобы вернуть его обратно после логина
-  const from = location.state?.from?.pathname || '/lessons';
+  // После логина всегда отправляем на главную страницу
+  const from = '/';
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -22,7 +22,7 @@ const Login = () => {
     
     try {
       await login(email, password);
-      // После успешного входа перенаправляем пользователя
+      // После успешного входа перенаправляем пользователя на главную
       navigate(from, { replace: true });
     } catch (err) {
       // Ошибка будет обработана и отображена через `error` из useAuth
diff --git a/frontend/src/pages/auth/Register.js b/frontend/src/pages/auth/Register.js
index 08f75a1..e6e039b 100644
--- a/frontend/src/pages/auth/Register.js
+++ b/frontend/src/pages/auth/Register.js
@@ -32,7 +32,7 @@ const Register = () => {
     
     try {
       await register(email, password);
-      navigate('/lessons'); // Redirect to lessons after successful registration
+      navigate('/'); // Перенаправить на главную после успешной регистрации
     } catch (error) {
       // The authError from useAuth will be displayed in the form
       console.error('Registration failed:', error);