last front

src/App.tsx

@@ -11,6 +11,8 @@ import {UserProvider} from "./utils/users/UserProvider.tsx";
 import {DashboardLayout} from "./layouts/DashboardLayout.tsx";
 import {MainLayout} from "./layouts/MainLayout.tsx";
 import {DataPage} from "./pages/dashboards/DataPage.tsx";
+import './css/Global.css'
+import './css/Containers.css'
 
 
 export default function App() {

src/css/Colors.css

@@ -0,0 +1,12 @@
+:root {
+    /* Основные цвета */
+    --color-background: #EEEDFF;
+    --color-text-primary: #000000;
+    --color-accent: #003CFF;
+    --color-secondary: #4C76FE;
+    --color-button-text: #FFFFFF;
+
+    /* Дополнительно можно добавить общие шрифты и т.п. */
+    --font-family: 'Arial', sans-serif;
+    --font-size-base: 16px;
+}

src/css/Containers.css

@@ -0,0 +1,65 @@
+/* === Базовый контейнер === */
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    gap: 0;
+}
+
+/* === Направление flex-direction === */
+.flex-row       { flex-direction: row; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.flex-col       { flex-direction: column; }
+.flex-col-reverse { flex-direction: column-reverse; }
+
+/* === Выравнивание элементов по главной оси (justify-content) === */
+.justify-start     { justify-content: flex-start; }
+.justify-end       { justify-content: flex-end; }
+.justify-center    { justify-content: center; }
+.justify-between   { justify-content: space-between; }
+.justify-around    { justify-content: space-around; }
+.justify-evenly    { justify-content: space-evenly; }
+
+/* === Выравнивание элементов по поперечной оси (align-items) === */
+.items-start      { align-items: flex-start; }
+.items-end        { align-items: flex-end; }
+.items-center     { align-items: center; }
+.items-stretch    { align-items: stretch; }
+.items-baseline   { align-items: baseline; }
+
+/* === Выравнивание для самого контейнера на внешнем уровне (align-self) === */
+.self-start      { align-self: flex-start; }
+.self-end        { align-self: flex-end; }
+.self-center     { align-self: center; }
+.self-stretch    { align-self: stretch; }
+
+/* === Обертка дочерних элементов (flex-wrap) === */
+.flex-wrap       { flex-wrap: wrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+.flex-nowrap     { flex-wrap: nowrap; }
+
+/* === Отступы между дочерними элементами (gap) === */
+.gap-1  { gap: 0.25rem; } /* 4px */
+.gap-2  { gap: 0.5rem; }  /* 8px */
+.gap-3  { gap: 1rem; }   /* 16px */
+.gap-4  { gap: 1.5rem; } /* 24px */
+.gap-5  { gap: 2rem; }   /* 32px */
+
+/* === Размеры ширины и высоты контейнера === */
+.full-width   { width: 100%; }
+.full-height  { height: 100%; }
+
+/* === Позиционирование дочерних элементов как самостоятельные flex-элементы === */
+.item {
+    flex: 1 1 auto;
+}
+.item-grow { flex-grow: 1; }
+.item-shrink { flex-shrink: 1; }
+
+
+.margin-center{
+    margin-left: auto;
+    margin-right: auto;
+}

src/css/Global.css

@@ -0,0 +1,101 @@
+@import './Colors.css';
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    background-color: var(--color-background);
+    color: var(--color-text-primary);
+    line-height: 1.5;
+}
+
+
+/* Заголовки */
+h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 16px;
+    font-weight: 600;
+}
+
+/* Кнопки */
+button {
+    font-family: var(--font-family);
+    font-size: 1rem;
+    padding: 12px 24px;
+    background-color: var(--color-accent);
+    color: var(--color-button-text);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: var(--color-secondary);
+}
+
+/* Формы и инпуты */
+input,
+textarea,
+select {
+    font-family: var(--font-family);
+    font-size: 1rem;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 2px rgba(0, 60, 255, 0.2);
+}
+
+/* Адаптивы */
+@media (max-width: 768px) {
+    body {
+        font-size: 14px;
+    }
+
+    button {
+        width: 100%;
+        padding: 14px;
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        font-size: 13px;
+    }
+
+    button {
+        font-size: 14px;
+        padding: 12px;
+    }
+}
+
+a,button{
+    text-decoration: none;
+    color: var(--color-button-text);
+    background-color: var(--color-accent);
+    padding: 10px 20px;
+    border-radius: 30px;
+}
+
+a,button .selected{
+    background-color: var(--color-secondary);
+}
+
+.underline{
+    text-decoration: underline;
+    text-decoration: #af4360;
+}

src/layouts/MainLayout.tsx

@@ -1,12 +1,20 @@
 import {Link, Outlet} from "react-router-dom";
 import React from "react";
+import logoUrl from '../img/logo.svg';
+import "./css/MainLayout.css"
 
 export function MainLayout() {
     return (
         <>
-            <div className="header">
-                <Link to="/dashboard" className="menu-button">☰</Link>
-                <h1 className="logo">Pro-Fi Test</h1>
+            <div className="header container flex-col">
+                <Link to="/dashboard" className="menu-button self-end">
+                    <svg width="75" height="65" viewBox="0 0 75 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect width="75" height="15" rx="7.5" className={"rect"}/>
+                        <rect y="25" width="75" height="15" rx="7.5" className={"rect"}/>
+                        <rect y="50" width="75" height="15" rx="7.5" className={"rect"}/>
+                    </svg>
+                </Link>
+                <img src={logoUrl as string} alt="Logo"/>
             </div>
             <div className="content">
                 <Outlet/>

src/layouts/css/MainLayout.css

@@ -0,0 +1,25 @@
+.header {
+    display: flex;
+    flex-direction: column;
+}
+
+.header .menu-button{
+    background: none;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+}
+
+.header>img{
+    width: 50%;
+    align-self: center;
+    margin-top: 50px;
+}
+
+.header .rect{
+    fill: var(--color-accent)
+}
+
+.header .menu-button:hover .rect{
+    fill: var(--color-secondary)
+}

src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react'
+import React, { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 

src/pages/MainPage.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import '../css/MainPage.css';
 import {Survey} from "../types/survey.ts";
 import {LoadingList} from "../components/LoadingList.tsx";
 import {useDataPage} from "../API/hooks.ts";
+import "./css/MainPage.css"
 
 export function MainPage() {
 
@@ -12,20 +12,42 @@ export function MainPage() {
 
 
     return (
-        <div className="main-page">
+        <div className="main-page container flex-col items-center gap-2 margin-center">
             <h2 className="title">Тесты для школьников и абитуриентов</h2>
 
-            <div className={"surveys-list"}>
+            <div className={"surveys-list container flex-col items-center gap-1"}>
                 <LoadingList data={surveys.items} listElement={(s: Survey) => (
                     <Link key={s.id} to={`surveys/${s.id}/`}>{s.title}</Link>
                 )}/>
             </div>
 
             <p className="description">
-                Добро пожаловать на Pro-Fi Test — ваш надежный помощник в мире профессий!
-                Мы понимаем, что выбор будущей профессии — это одно из самых важных решений
-                в жизни каждого школьника. Наша миссия — помочь молодым людям найти свой путь,
-                раскрыть таланты и понять, какие профессии соответствуют их интересам и способностям.
+                Добро пожаловать на <strong>Pro-Fi Test</strong> — платформу, созданную для тех, кто стоит перед важным
+                выбором: какую профессию выбрать, куда поступать и кем стать.
+                Мы знаем, что определиться с будущим бывает непросто — особенно когда вариантов много, а уверенность в
+                правильности выбора не всегда есть.
+                Наша цель — сделать этот путь понятнее, интереснее и максимально персонализированным.
+            </p>
+            <p className="description">
+                Pro-Fi Test — это не просто набор тестов. Это интеллектуальный гид в мире профессий, который поможет
+                вам:
+                <ul className="features-list">
+                    <li>Узнать себя лучше: выявить свои сильные стороны, склонности и скрытые таланты;</li>
+                    <li>Познакомиться с миром современных профессий через призму реальных навыков и интересов;</li>
+                    <li>Понять, какие специальности подходят именно вам, исходя из ваших целей и возможностей;</li>
+                    <li>Сэкономить время на выборе направления обучения и сосредоточиться на главном — вашем развитии.
+                    </li>
+                </ul>
+            </p>
+            <p className="description">
+                Независимо от того, стоите ли вы на пороге выпускного класса, подаёте документы в вуз или уже начали
+                обучение в колледже,
+                <strong>Pro-Fi Test</strong> будет с вами на каждом этапе. Мы верим, что у каждого есть своё уникальное
+                призвание — и помогаем найти его без страха, сомнений и лишней путаницы.
+            </p>
+            <p className="description">
+                Пройдите наш тест уже сегодня и сделайте первый шаг к осознанному и уверенному выбору своей
+                профессиональной дороги!
             </p>
         </div>
     );

src/pages/css/MainPage.css

@@ -0,0 +1,8 @@
+.main-page{
+    width: 600px;
+}
+
+
+@media (min-width: 1600px) {
+    width: 1000px;
+}

src/pages/surveys/SurveyPage.tsx

@@ -92,7 +92,7 @@ export function SurveyPage() {
     };
 
     return (
-        <div className="survey-page">
+        <div className="survey-page container items-center flex-col">
             <LoadingData data={survey}>
                 <h1>{survey?.title}</h1>
                 <div>{survey?.description}</div>