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

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

src/Mainpage.js

@@ -1,48 +1,100 @@
-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 [count, setCount] = useState('0');
+    const [error_message, setErrorMessage] = useState(null);
+    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">
-                {
-                    error && <div className="error">{error}</div>
-                }
-                <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>
-                                ))}
-                            </ul>
-                        ) : (
-                            <p>Нет задач</p>
-                        )}
+                {!isAuthenticated && (
+                    <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>
-                </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>
+                                    ))}
+                                </ul>
+                            ) : (
+                                <p>Нет задач</p>
+                            )}
+                        </div>
+                    </div>
+                )}
             </div>
         </>
     );