верстку поменял

cucumber-frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "cucumber-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@ant-design/icons": "^5.5.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -24,7 +25,8 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "@types/react-dom": "^18.3.1"
+        "@types/react-dom": "^18.3.1",
+        "tailwindcss": "^3.4.14"
       }
     },
     "node_modules/@adobe/css-tools": {

cucumber-frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.5.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -43,6 +44,7 @@
     ]
   },
   "devDependencies": {
-    "@types/react-dom": "^18.3.1"
+    "@types/react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.14"
   }
 }

cucumber-frontend/src/App.css

@@ -2,6 +2,11 @@
   text-align: center;
 }
 
+#main-content {
+  display: flex;
+  flex-direction: row;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

cucumber-frontend/src/App.tsx

@@ -4,15 +4,17 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import {LoginPage} from './pages/Login';
 import {RegisterPage} from './pages/Register';
 import {AppLayout} from './components/Layout';
+import { ProfilePage } from './pages/Profile';
 
 function App() {
   return (
     <div className="App">
       <Routes>
         <Route path="/" element={<AppLayout />}>
-          <Route index element={<Navigate to="/login" />} />
+          <Route index element={<Navigate to="/profile" />} />
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
         </Route>
         
       </Routes>

cucumber-frontend/src/components/Header.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import Title from 'antd/es/typography/Title';
+import { LoginOutlined, ProfileOutlined } from '@ant-design/icons';
 
 export function Header () {
   return (
-    <header className="header">
+    <div className="flex items-center justify-between bg-slate-700" style={{ height: '100px'}}>
       <div className="logo">
-        <Link to="/">Cucumber App</Link>
+        <Title level={1} className='text-white' style={{ marginLeft: '20px' }}><Link to="/" style={{ textDecoration: 'none', color: 'white'}}>Cucumber</Link></Title>
       </div>
       <nav className="nav">
-        <ul>
+        <ul className="flex">
-          <li>
+          <li className="mr-4">
-            <Link to="/login">Login</Link>
+            <Link to="/login"><LoginOutlined style={{ fontSize: '24px' }} className="text-white"/></Link>
           </li>
           <li>
-            <Link to="/register">Register</Link>
+            <Link to="/register"><ProfileOutlined style={{ fontSize: '24px', marginRight: '20px'}} className="text-white"/></Link>
           </li>
         </ul>
       </nav>
-    </header>
+    </div>
   );
-};
+};

cucumber-frontend/src/components/Layout.tsx

@@ -6,13 +6,13 @@ import {Footer} from './Footer';
 
 export function AppLayout () {
   return (
-    <Layout>
+    <div id="app-layout" className="bg-slate-100">
       <Header />
-      <Layout.Content>
+      <div id="main-content">
         <Outlet />
-      </Layout.Content>
+      </div>
       <Footer />
-    </Layout>
+    </div>
   );
 };
 

cucumber-frontend/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -34,4 +38,14 @@ footer {
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  position:absolute;
+  left:0;
+  bottom:0;
+  right:0;
+}
+
+#app-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }

cucumber-frontend/src/pages/Login.tsx

@@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { Button, Form, Input } from 'antd';
 import { loginUser } from '../API/api';
 import ILoginRequest from '../Requests/LoginRequest';
+import Text from 'antd/es/typography/Text';
 
 export function LoginPage () {
   const [email, setEmail] = useState('');
@@ -29,8 +30,8 @@ export function LoginPage () {
   };
 
   return (
-    <div className="login-page">
+    <div className="container mx-auto" style={{ maxWidth: '20%', marginTop: '200px'}}>
-      <h1>Login</h1>
+      <Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '40px', marginTop: '20px'}}>Вход в систему</Text>
       <Form onFinish={onFinish}>
         <Form.Item 
           label="Email" 
@@ -40,7 +41,7 @@ export function LoginPage () {
           <Input value={email} onChange={e => setEmail(e.target.value)} />
         </Form.Item>
         <Form.Item 
-          label="Password" 
+          label="Пароль" 
           name="password" 
           rules={[{ required: true, min: 8, message: 'Пароль должен содержать не менее 8 символов!' }]}
         >

cucumber-frontend/src/pages/Profile.tsx

@@ -0,0 +1,15 @@
+import { Navigate } from "react-router-dom";
+
+export function ProfilePage () {
+    const token = localStorage.getItem('token');
+
+    if (!token) {
+        return <Navigate to="/login" />;
+    }
+
+    return (
+        <div>
+            <h1 className="PCEtLSBpY29uNjY2LmNvbSAtIE1JTExJT05TIHZlY3RvciBJQ09OUyBGUkVFIC0tPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48Zz48cGF0aCBkPSJNMjU2LDBDMTE0Ljg0MiwwLDAsMTE0Ljg0MiwwLDI1NnMxMTQuODQyLDI1NiwyNTYsMjU2czI1Ni0xMTQuODQyLDI1Ni0yNTZTMzk3LjE1OCwwLDI1NiwweiBNMjU2LDQ2NS40NTUgYy0xMTUuNDkzLDAtMjA5LjQ1NS05My45NjEtMjA5LjQ1NS0yMDkuNDU1UzE0MC41MDcsNDYuNTQ1LDI1Niw0Ni41NDVTNDY1LjQ1NSwxNDAuNTA3LDQ2NS40NTUsMjU2UzM3MS40OTMsNDY1LjQ1NSwyNTYsNDY1LjQ1NXogIj48L3BhdGg+PC9nPjwvZz48Zz48Zz48cGF0aCBkPSJNMzE4LjA2MSwxMzkuNjM2Yy0xMi44NTMsMC0yMy4yNzMsMTAuNDItMjMuMjczLDIzLjI3M3YxODYuMTgyYzAsMTIuODUzLDEwLjQyLDIzLjI3MywyMy4yNzMsMjMuMjczIGMxMi44NTMsMCwyMy4yNzMtMTAuNDIsMjMuMjczLTIzLjI3M1YxNjIuOTA5QzM0MS4zMzMsMTUwLjA1NiwzMzAuOTEzLDEzOS42MzYsMzE4LjA2MSwxMzkuNjM2eiI+PC9wYXRoPjwvZz48L2c+PGc+PGc+PHBhdGggZD0iTTE5My45MzksMTM5LjYzNmMtMTIuODUzLDAtMjMuMjczLDEwLjQyLTIzLjI3MywyMy4yNzN2MTg2LjE4MmMwLDEyLjg1MywxMC40MiwyMy4yNzMsMjMuMjczLDIzLjI3MyBjMTIuODUzLDAsMjMuMjczLTEwLjQyLDIzLjI3My0yMy4yNzNWMTYyLjkwOUMyMTcuMjEyLDE1MC4wNTYsMjA2Ljc5MiwxMzkuNjM2LDE5My45MzksMTM5LjYzNnoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==">Profile</h1>
+        </div>
+    )
+}

cucumber-frontend/src/pages/Register.tsx

@@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { Button, Form, Input } from 'antd';
 import { createUser } from '../API/api';
 import IRegisterRequest from '../Requests/RegisterRequest';
+import Text from 'antd/es/typography/Text';
 
 export function RegisterPage () {
   const [name, setName] = useState('');
@@ -38,16 +39,16 @@ export function RegisterPage () {
   };
 
   return (
-    <div className="register-page">
+    <div className="container mx-auto" style={{ maxWidth: '20%', marginTop: '200px'}}>
-      <h1>Register</h1>
+      <Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '40px', marginTop: '20px'}}>Регистрация</Text>
       <Form onFinish={handleFinish}>
-        <Form.Item label="Name" name="name" rules={[{ required: true, message: 'Пожалуйста, введите имя!' }]}>
+        <Form.Item label="Имя" name="name" rules={[{ required: true, message: 'Пожалуйста, введите имя!' }]}>
           <Input value={name} onChange={e => setName(e.target.value)} />
         </Form.Item>
         <Form.Item label="Email" name="email" rules={[{ required: true, type: 'email', message: 'Пожалуйста, введите корректный адрес почты!' }]}>
           <Input value={email} onChange={e => setEmail(e.target.value)} />
         </Form.Item>
-        <Form.Item label="Password" name="password" rules={[{ required: true, min: 8, message: 'Пароль должен содержать не менее 8 символов!' }]}>
+        <Form.Item label="Пароль" name="password" rules={[{ required: true, min: 8, message: 'Пароль должен содержать не менее 8 символов!' }]}>
           <Input
             type="password"
             value={password}

cucumber-frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+