add home page

src/App.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider, Routes } from "react-router-dom";
 import {FormsData} from "./context";
 import router from "./router/router"
 import classes from "./assets/styles/app.module.scss"
@@ -7,6 +7,7 @@ import NavBar from "./components/NavBar.jsx";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 const App = () => {
+    // const navigate = useNavigate();
     const [forms, setForms] = useState([])
 
     return (
@@ -20,12 +21,13 @@ const App = () => {
                         <NavBar/>
                     </div>
                     <div className={classes.content}>
-                        <RouterProvider router={router}/>
+                        <Routes>
+                            <RouterProvider router={router}/>
+                        </Routes>                        
                     </div>
                 </div>
             </div>
         </FormsData.Provider>        
-        
     )
 }
 

src/assets/styles/components/navbar.module.scss

@@ -6,4 +6,62 @@
 .wrapper {
     width: 100%;
     height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.menu {
+    width: 80%;
+    height: 100%;
+    &__authorized {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        span {
+            margin-left: 2%;
+            display: block;
+            font-size: 15px;
+            color: rgb(80, 80, 80);
+            cursor: pointer;
+            &:hover {
+                color: rgb(66, 68, 189);
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+.profile {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &__authorized {
+        span {
+            font-size: 15px;
+            color: rgb(80, 80, 80);
+            cursor: pointer;
+            &:hover {
+                color: rgb(66, 68, 189);
+                text-decoration: underline;
+            }
+        }
+    }
+    &__nonAuthorized {
+        span {
+            font-size: 15px;
+            font-family: "Montserrat", sans-serif;
+            color: rgb(80, 80, 80);
+            cursor: pointer;
+            i {
+
+            }
+            &:hover {
+                color: rgb(66, 68, 189);
+                text-decoration: underline;
+            }
+        }
+    }
 }

src/assets/styles/home.module.scss

@@ -0,0 +1,68 @@
+.main {
+    width: 100%;
+    height: 100%;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.header {
+    width: 60%;
+    height: 30%;
+    text-align: center;
+    &__top {
+        font-size: 30px;
+        font-family: "Montserrat", sans-serif;
+        color: rgb(100, 100, 100);
+    }
+    &__bottom {
+        font-size: 30px;
+        font-family: "Montserrat", sans-serif;
+        color: rgb(100, 100, 100);
+    }
+}
+
+.content {
+    width: 60%;
+    height: 50%;
+    box-shadow: 0 0 5px 1px rgb(180, 180, 180);
+    padding: 1% 0;
+    &__title {
+        height: 30%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &__wrapper {
+            h3 {
+                font-size: 35px;
+                font-family: "Montserrat", sans-serif;
+                color: rgb(100, 100, 100);
+            }
+        }      
+    }
+    &__token {
+        height: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &__wrapper {
+            height: 35%;
+            width: 80%;
+        }
+    }
+    &__search {
+        height: 20%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &__wrapper {
+            height: 70%;
+        }
+    }
+}

src/components/MyInput.jsx

@@ -3,8 +3,8 @@ import classes from "../assets/styles/components/myInput.module.scss"
 
 const MyInput = (props) => {
     return (
-        <div className={classes.main}>
+        <div className={classes.main} style={{...props.otherMainStyle}}>
-            <input type="text" placeholder={props.placeholder}/>
+            <input type="text" placeholder={props.placeholder} style={{...props.otherInputStyle}}/>
         </div>
     )
 }

src/components/NavBar.jsx

@@ -1,13 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
-import { Link, BrowserRouter, useNavigate } from "react-router-dom";
 import classes from "../assets/styles/components/navbar.module.scss"
 
 const NavBar = () => {
+    const [auth, setAuth] = useState(true);
 
     return (
         <div className={classes.main}>
             <div className={classes.wrapper}>
-                
+                <div className={classes.menu}>
+                    {auth ? 
+                    <div className={classes.menu__authorized}>
+                        <span>Главная</span>
+                        <span>Мои формы</span>
+                    </div> : 
+                    <div></div>}                    
+                </div>
+                <div className={classes.profile}>
+                    {auth ? 
+                    <div className={classes.profile__authorized}>
+                        <span>Профиль</span>
+                    </div> : 
+                    <div className={classes.profile__nonAuthorized}>
+                        <span>Вход <i class="fa-solid fa-arrow-right-to-bracket"></i></span>       
+                    </div>}                                        
+                </div>
             </div>
         </div>
     )

src/index.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App.jsx';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
-    <App/>
+    <BrowserRouter>
+        <App/>
+    </BrowserRouter>   
 );

src/pages/Home.jsx

@@ -1,9 +1,34 @@
 import React from "react";
+import classes from "../assets/styles/home.module.scss";
+import MyButton from "../components/MyButton.jsx";
+import MyInput from "../components/MyInput.jsx";
 
 const Home = () => {
     return (
-        <div>
+        <div className={classes.main}>
-            <span>Home</span>
+            <div className={classes.wrapper}>
+                <div className={classes.header}>
+                    <div className={classes.header__top}>Кажется вы попали на общую страницу.</div>
+                    <div className={classes.header__bottom}>Чтобы перейти к форме ввелите токен ниже или снова перейдите по ссылке.</div>
+                </div>
+                <div className={classes.content}>
+                    <div className={classes.content__title}>
+                        <div className={classes.content__title__wrapper}>
+                            <h3>Перейти к нужной форме</h3>
+                        </div>                     
+                    </div>
+                    <div className={classes.content__token}>
+                        <div className={classes.content__token__wrapper}>
+                            <MyInput placeholder={"Введите токен формы..."} otherMainStyle={{width: "100%"}} otherInputStyle={{width: "100%"}}/>
+                        </div>
+                    </div>
+                    <div className={classes.content__search}>
+                        <div className={classes.content__search__wrapper}>
+                            <MyButton text={"Найти форму"}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }