feat:отображение для auth/!auth пользователей

Добавлено отображение задач на Main странице сайта для авторизованных пользователей и отображение основной информации для неавторизованных пользователей

src/Mainpage.js

@@ -1,41 +1,92 @@
-import {useState, useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import axios from 'axios';
 import Header from './Header';
 import './css/Mainpage.css';
 
 const Mainpage = () => {
     const [tasks, setTasks] = useState([]);
-    const [error, setError] = useState('');
+    const [error_message, setErrorMessage] = useState(null);
-    const [count, setCount] = useState('0');
+    const [count, setCount] = useState(0);
 
     useEffect(() => {
         const checkSession = async () => {
             try {
                 const response = await axios.get('/api/users/my_tasks');
+
+                // если нет ошибки — пользователь авторизован
                 setTasks(response.data.tasks || []);
                 setCount(response.data.count || 0);
+                setErrorMessage('');
+
             } catch (err) {
-                setError('Ошибка загрузки задачи');
+                const message = err.response?.data?.message || 'Ошибка авторизации';
+                setErrorMessage(message);
                 }
         };
 
         checkSession();
     }, []);
 
+    const isAuthenticated = !error_message;
+
     return (
         <>
-            <Header />
+            <Header/>
             <div className="content-wrapper">
-                {
+                {!isAuthenticated && (
-                    error && <div className="error">{error}</div>
+                    <div className="main-layout">
-                }
+                            <div>
+
+                                <h2 className="margin">
+                                    Наведите порядок в задачах за минуту
+                                </h2>
+
+                                <p className="com">
+                                    Kanban-доска помогает видеть весь процесс целиком: что запланировано,
+                                    что уже в работе и что готово. Перетаскивайте карточки между колонками,
+                                    фиксируйте договорённости и не теряйте контекст — всё в одном месте.
+                                </p>
+
+                                <h3 style={{ marginTop: "30px" }}>
+                                    Как это работает:
+                                </h3>
+
+                                <ul className="com">
+                                    <li>
+                                        Создайте карточку с задачей, добавьте описание и сроки.
+                                    </li>
+                                    <li>
+                                        Перемещайте её по этапам <strong>Сделать → В работе → Готово</strong>.
+                                    </li>
+                                    <li>
+                                        Смотрите прогресс по команде и быстро находите узкие места.
+                                    </li>
+                                </ul>
+
+                                <h3 style={{ marginTop: "30px" }}>
+                                    Начните сейчас
+                                </h3>
+
+                                <p className="com">
+                                    Войдите или зарегистрируйтесь, чтобы сохранять доски, открывать доступ
+                                    коллегам и синхронизировать задачи между устройствами.
+                                </p>
+
+                            </div>
+                    </div>
+                )}
+
+                {isAuthenticated && (
                     <div className="main-layout">
                         <div className="tasks-box">
                             <h3>Задачи ({count})</h3>
+
                             {tasks.length > 0 ? (
                                 <ul>
                                     {tasks.map((task, index) => (
-                                    <li key={index}>{task.title || task.name || `Задача ${index + 1}`}</li>
+                                        <li key={index}>
+                                            {task.title || task.name || `Задача ${index + 1}`}
+                                        </li>
                                     ))}
                                 </ul>
                             ) : (
@@ -43,6 +94,7 @@ const Mainpage = () => {
                             )}
                         </div>
                     </div>
+                )}
             </div>
         </>
     );